/* OPDkit demo. Uses the tokens and fonts from ../styles.css. */
body.demo {
   background: var(--bg-alt);
}

.demo .i {
   width: 16px;
   height: 16px;
   flex: none;
   stroke: currentColor;
   fill: none;
   stroke-width: 2;
   stroke-linecap: round;
   stroke-linejoin: round;
}

/* ---------- Top bar ---------- */
.dbar {
   position: sticky;
   top: 0;
   z-index: 30;
   background: rgb(255 255 255 / .92);
   backdrop-filter: blur(16px);
   border-bottom: 1px solid var(--line-soft);
}

.dbar__in {
   max-width: 1440px;
   margin: 0 auto;
   padding: 10px 16px;
   display: flex;
   align-items: center;
   gap: 12px;
   flex-wrap: wrap;
}

.dbar .brand {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   font-weight: 700;
   font-size: 18px;
   color: var(--text);
   text-decoration: none;
}

.dbar__tag {
   font-size: 12px;
   font-weight: 600;
   color: var(--warn);
   background: var(--warn-soft);
   padding: 3px 10px;
   border-radius: 980px;
}

.dbar__clock {
   font-size: 13px;
   color: var(--text-2);
   font-variant-numeric: tabular-nums;
   margin-right: auto;
}

.roles {
   display: inline-flex;
   background: var(--bg-alt);
   border-radius: 980px;
   padding: 3px;
}

.roles button,
.dbar__reset {
   position: relative;
   border: 0;
   background: none;
   font: 500 14px var(--font);
   color: var(--text-2);
   padding: 6px 14px;
   border-radius: 980px;
   cursor: pointer;
}

.roles button[aria-pressed="true"] {
   background: #fff;
   color: var(--text);
   box-shadow: 0 1px 3px rgb(0 0 0 / .1);
}

.roles .dot {
   position: absolute;
   top: 4px;
   right: 6px;
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background: var(--accent);
}

.dbar__reset:hover {
   color: var(--text);
   background: var(--bg-alt);
}

/* ---------- Layout ---------- */
.demo-wrap {
   max-width: 1440px;
   margin: 0 auto;
   padding: 20px 16px 40px;
}

.guide {
   background: #fff;
   border-radius: var(--r);
   padding: 20px 22px;
   margin-bottom: 18px;
}

.guide__head {
   position: relative;
   padding-right: 60px;
}

.guide h1 {
   font-size: 22px;
   letter-spacing: -0.02em;
   line-height: 1.25;
}

.guide__head p {
   color: var(--text-2);
   font-size: 15px;
   margin-top: 4px;
   max-width: 760px;
}

.guide__count {
   position: absolute;
   top: 0;
   right: 0;
   font-weight: 700;
   color: var(--accent);
}

.guide__list {
   list-style: none;
   margin: 16px 0 0;
   padding: 0;
   display: grid;
   grid-template-columns: repeat(7, minmax(0, 1fr));
   gap: 8px;
}

.guide__list li {
   display: flex;
   flex-direction: column;
   gap: 6px;
   padding: 10px 12px;
   border-radius: 12px;
   background: var(--bg-alt);
   font-size: 14px;
   line-height: 1.3;
   color: var(--text-2);
}

.guide__list li.is-next {
   background: var(--accent-soft);
   color: var(--text);
   box-shadow: inset 0 0 0 1.5px var(--accent);
}

.guide__list li.is-done {
   color: var(--text-3);
}

.g-n {
   width: 22px;
   height: 22px;
   border-radius: 50%;
   display: grid;
   place-items: center;
   font-size: 12px;
   font-weight: 700;
   background: #fff;
   color: var(--text-2);
}

.is-done .g-n {
   background: var(--ok);
   color: #fff;
}

.is-done .g-n .i {
   width: 13px;
   height: 13px;
}

.g-t small {
   display: block;
   font-size: 11px;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: .04em;
   color: var(--text-3);
}

.g-t em {
   display: block;
   font-style: normal;
   font-size: 12.5px;
   color: var(--text-2);
   margin-top: 4px;
}

.g-show {
   align-self: flex-start;
   border: 0;
   background: var(--accent);
   color: #fff;
   font: 500 12.5px var(--font);
   padding: 5px 12px;
   border-radius: 980px;
   cursor: pointer;
}

.guide__end {
   margin-top: 14px;
   display: flex;
   gap: 16px;
   align-items: center;
   justify-content: space-between;
   flex-wrap: wrap;
   padding: 14px 16px;
   border-radius: 12px;
   background: var(--ok-soft);
}

.guide__end p {
   max-width: 760px;
}

.demo-app {
   display: grid;
   gap: 16px;
}

.demo-app.role-both {
   grid-template-columns: 1fr 1fr;
}

.demo-foot {
   margin-top: 20px;
   font-size: 13px;
   color: var(--text-3);
   text-align: center;
}

.demo-foot a {
   color: var(--accent);
}

/* ---------- App window ---------- */
.pane {
   background: #fff;
   border-radius: var(--r);
   border: 1px solid var(--line-soft);
   overflow: hidden;
   min-width: 0;
   box-shadow: 0 10px 30px rgb(0 0 0 / .05);
}

.pane__bar {
   display: flex;
   align-items: center;
   gap: 6px;
   padding: 10px 14px;
   background: #fafafc;
   border-bottom: 1px solid var(--line-soft);
   font-size: 13px;
   font-weight: 600;
   color: var(--text-2);
}

.pane__bar i {
   width: 10px;
   height: 10px;
   border-radius: 50%;
   background: var(--line);
}

.pane__bar span {
   margin-left: 8px;
}

.pane--doc .pane__bar span::before {
   content: "";
   display: inline-block;
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background: var(--ok);
   margin-right: 6px;
}

.pane__body {
   display: grid;
   grid-template-columns: 172px minmax(0, 1fr);
   min-height: 640px;
}

.side {
   border-right: 1px solid var(--line-soft);
   padding: 10px 8px;
   display: flex;
   flex-direction: column;
   gap: 2px;
   background: #fcfcfd;
}

.side__tab {
   position: relative;
   display: flex;
   align-items: center;
   gap: 9px;
   border: 0;
   background: none;
   font: 500 14px var(--font);
   color: var(--text-2);
   padding: 9px 10px;
   border-radius: 9px;
   text-align: left;
   cursor: pointer;
}

.side__tab:hover {
   background: var(--bg-alt);
}

.side__tab.is-on {
   background: var(--accent-soft);
   color: var(--accent);
}

.side__tab.is-locked {
   color: var(--text-3);
   opacity: .7;
}

.side__tab.is-locked .i:last-child {
   margin-left: auto;
   width: 13px;
   height: 13px;
}

.side__sep {
   margin: 14px 10px 4px;
   font-size: 11px;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: .04em;
   color: var(--text-3);
}

.tab-dot {
   margin-left: auto;
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background: var(--accent);
}

.main {
   padding: 18px 20px 24px;
   min-width: 0;
}

/* ---------- Common bits ---------- */
.demo-app h2 {
   font-size: 22px;
   letter-spacing: -0.02em;
   line-height: 1.2;
}

.demo-app .sub {
   font-size: 13.5px;
   color: var(--text-3);
   margin-top: 2px;
}

.head {
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
   gap: 12px;
   flex-wrap: wrap;
   margin-bottom: 14px;
}

.stats {
   display: flex;
   gap: 14px;
   font-size: 13.5px;
   color: var(--text-2);
}

.stats b {
   color: var(--text);
}

.h3 {
   font-size: 14px;
   font-weight: 600;
   color: var(--text-2);
   margin: 18px 0 8px;
}

.h3row {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 8px;
}

.h3row .h3 {
   margin-top: 0;
}

.h4 {
   font-size: 12px;
   font-weight: 600;
   color: var(--text-3);
   text-transform: uppercase;
   letter-spacing: .04em;
   margin: 14px 0 6px;
}

.fine {
   font-size: 12.5px;
   color: var(--text-3);
   margin-top: 8px;
}

.empty {
   color: var(--text-3);
   font-size: 14px;
   padding: 18px;
   background: var(--bg-alt);
   border-radius: 12px;
}

.linkbtn {
   border: 0;
   background: none;
   color: var(--accent);
   font: inherit;
   padding: 0;
   cursor: pointer;
   text-decoration: underline;
}

.btn {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   border: 0;
   background: var(--accent);
   color: #fff;
   font: 500 14px var(--font);
   padding: 8px 14px;
   border-radius: 980px;
   cursor: pointer;
   white-space: nowrap;
}

.btn:hover {
   background: var(--accent-hover);
}

.btn:disabled {
   opacity: .4;
   cursor: not-allowed;
}

.btn--ghost {
   background: var(--bg-alt);
   color: var(--text);
}

.btn--ghost:hover {
   background: var(--line-soft);
}

.btn--sm {
   font-size: 13px;
   padding: 5px 11px;
}

.btn .i {
   width: 15px;
   height: 15px;
}

.acts {
   display: flex;
   flex-wrap: wrap;
   gap: 6px;
   align-items: center;
   margin-top: 12px;
}

.rows .acts,
.queue .acts {
   margin-top: 0;
}

.acts--end {
   justify-content: flex-end;
}

.note {
   font-size: 13.5px;
   padding: 9px 12px;
   border-radius: 10px;
   margin: 8px 0;
   background: var(--bg-alt);
   display: flex;
   gap: 6px;
   align-items: center;
}

.note--ok {
   background: var(--ok-soft);
   color: #0f5c35;
}

.note--warn {
   background: var(--warn-soft);
   color: #7a3700;
}

.card {
   border: 1px solid var(--line-soft);
   border-radius: 14px;
   padding: 14px 16px;
   margin: 10px 0;
   background: #fff;
}

.banner {
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 12px 14px;
   border-radius: 14px;
   background: var(--accent);
   color: #fff;
   margin: 6px 0 12px;
   animation: pulse 1.6s ease-in-out infinite;
}

.banner p {
   flex: 1;
   font-size: 14px;
}

.banner b {
   display: block;
   font-size: 15px;
}

.banner .btn {
   background: #fff;
   color: var(--accent);
}

@keyframes pulse {
   50% {
      box-shadow: 0 0 0 6px rgb(209 42 84 / .18);
   }
}

@media (prefers-reduced-motion: reduce) {
   .banner {
      animation: none;
   }
}

.callout {
   display: flex;
   align-items: center;
   gap: 12px;
   background: var(--ok-soft);
   border-color: transparent;
}

.callout--wait {
   background: var(--accent-soft);
}

.callout p {
   flex: 1;
   font-size: 14px;
}

.callout b {
   display: block;
}

/* Lists */
.queue,
.rows,
.cal,
.visits,
.audit,
.week {
   list-style: none;
   margin: 0;
   padding: 0;
}

.queue li,
.rows li,
.cal li {
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 9px 4px;
   border-bottom: 1px solid var(--line-soft);
   flex-wrap: wrap;
}

.rows--click li {
   padding: 0;
}

.rows--click button {
   display: flex;
   align-items: center;
   width: 100%;
   border: 0;
   background: none;
   padding: 9px 4px;
   text-align: left;
   cursor: pointer;
   font: inherit;
   color: inherit;
}

.rows--click button:hover {
   background: var(--bg-alt);
}

.is-dim {
   opacity: .55;
}

.demo-app .tok {
   flex: none;
   width: 34px;
   height: 30px;
   display: grid;
   place-items: center;
   border-radius: 8px;
   background: var(--bg-alt);
   font-weight: 700;
   font-size: 14px;
}

.demo-app .tok--live {
   background: var(--accent);
   color: #fff;
}

.demo-app .who {
   flex: 1;
   min-width: 140px;
   font-weight: 600;
   font-size: 14.5px;
   line-height: 1.25;
}

.demo-app .who small {
   display: block;
   font-weight: 400;
   font-size: 12.5px;
   color: var(--text-3);
}

.demo-app .st {
   font-size: 12.5px;
   font-weight: 600;
   padding: 3px 9px;
   border-radius: 980px;
   background: var(--bg-alt);
   color: var(--text-2);
   white-space: nowrap;
}

.demo-app .st--ok {
   background: var(--ok-soft);
   color: var(--ok);
}

.demo-app .st--live,
.demo-app .st--call {
   background: var(--accent-soft);
   color: var(--accent);
}

.demo-app .st--bill,
.demo-app .st--warn {
   background: var(--warn-soft);
   color: var(--warn);
}

.time {
   width: 48px;
   font-variant-numeric: tabular-nums;
   font-weight: 600;
   font-size: 13.5px;
   color: var(--text-2);
}

.cal__free .free {
   color: var(--text-3);
   font-size: 13.5px;
   flex: 1;
}

.cal__arrived .who small {
   color: var(--ok);
}

.cal__noshow {
   opacity: .55;
}

.week {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
   gap: 8px;
}

.week li {
   padding: 12px;
   border-radius: 12px;
   background: var(--bg-alt);
   font-size: 13.5px;
}

.week b {
   display: block;
}

.phone {
   display: inline-flex;
   align-items: center;
   gap: 5px;
   font-size: 13px;
   color: var(--text-2);
   text-decoration: none;
   font-variant-numeric: tabular-nums;
}

/* Forms */
.form label {
   display: flex;
   flex-direction: column;
   gap: 4px;
   font-size: 13px;
   font-weight: 600;
   color: var(--text-2);
   margin-top: 8px;
}

.form .opt {
   font-weight: 400;
   color: var(--text-3);
}

.demo-app input,
.demo-app select,
.demo-app textarea {
   font: 400 15px var(--font);
   color: var(--text);
   border: 1px solid var(--line);
   border-radius: 9px;
   padding: 8px 10px;
   background: #fff;
   width: 100%;
   min-width: 0;
}

.demo-app input:focus,
.demo-app select:focus,
.demo-app textarea:focus {
   outline: 2px solid rgb(209 42 84 / .35);
   border-color: var(--accent);
}

.demo-app input:disabled,
.demo-app textarea:disabled {
   background: var(--bg-alt);
   color: var(--text-2);
}

.grid2 {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 0 12px;
   align-items: end;
}

.span2 {
   grid-column: span 2;
}

.form--row {
   display: flex;
   gap: 10px;
   align-items: flex-end;
   flex-wrap: wrap;
}

.form--row label {
   margin-top: 0;
}

.form--row .grow {
   flex: 1;
   min-width: 180px;
}

.search {
   display: flex;
   align-items: center;
   gap: 8px;
   border: 1px solid var(--line);
   border-radius: 980px;
   padding: 2px 14px;
   margin: 6px 0 10px;
   color: var(--text-3);
}

.search input {
   border: 0 !important;
   outline: 0 !important;
   padding: 8px 0 !important;
}

.seg {
   display: inline-flex;
   background: var(--bg-alt);
   border-radius: 980px;
   padding: 3px;
   gap: 2px;
}

.seg--wrap {
   flex-wrap: wrap;
   border-radius: 14px;
}

.seg button {
   border: 0;
   background: none;
   font: 500 13px var(--font);
   color: var(--text-2);
   padding: 6px 12px;
   border-radius: 980px;
   cursor: pointer;
}

.seg button.is-on {
   background: #fff;
   color: var(--text);
   box-shadow: 0 1px 3px rgb(0 0 0 / .1);
}

.chips,
.additem {
   display: flex;
   flex-wrap: wrap;
   gap: 6px;
   margin: 8px 0;
}

.chip {
   display: inline-flex;
   align-items: center;
   gap: 4px;
   border: 1px solid var(--line);
   background: #fff;
   font: 500 13px var(--font);
   color: var(--text-2);
   padding: 5px 11px;
   border-radius: 980px;
   cursor: pointer;
}

.chip .i {
   width: 13px;
   height: 13px;
}

.chip.is-on {
   border-color: var(--accent);
   color: var(--accent);
   background: var(--accent-soft);
}

/* Patient card */
.pcard__top {
   display: flex;
   gap: 12px;
   align-items: center;
}

.avatar {
   width: 44px;
   height: 44px;
   border-radius: 50%;
   display: grid;
   place-items: center;
   font-weight: 700;
   background: var(--accent-soft);
   color: var(--accent);
}

.pname {
   font-weight: 700;
   font-size: 17px;
}

.facts {
   display: grid;
   grid-template-columns: auto 1fr;
   gap: 6px 14px;
   margin: 12px 0 0;
   font-size: 14px;
}

.facts dt {
   color: var(--text-3);
}

.facts dd {
   margin: 0;
}

.demo-app .tag-warn {
   display: inline-flex;
   align-items: center;
   gap: 5px;
   font-size: 13px;
   font-weight: 600;
   color: var(--warn);
   background: var(--warn-soft);
   padding: 3px 10px;
   border-radius: 980px;
}

.due {
   color: var(--warn);
}

.visits li {
   display: flex;
   align-items: center;
   gap: 8px;
   font-size: 13.5px;
   color: var(--text-3);
   padding: 5px 0;
}

.visits b {
   color: var(--text);
   min-width: 52px;
}

.visits .i {
   width: 13px;
   height: 13px;
}

.visits--doc li {
   display: block;
   color: var(--text);
   padding: 8px 0;
   border-bottom: 1px solid var(--line-soft);
}

.visits--doc b {
   display: block;
   font-size: 12.5px;
   color: var(--text-3);
}

.visits--doc small {
   display: block;
   color: var(--text-2);
   font-size: 12.5px;
}

.visits--doc .rxs {
   color: var(--text-3);
   margin-top: 2px;
}

/* Consultation */
.consult {
   display: grid;
   grid-template-columns: minmax(0, 1fr) 210px;
   gap: 16px;
}

.consult__side {
   border-left: 1px solid var(--line-soft);
   padding-left: 14px;
}

.vitals {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 0 8px;
}

.rx {
   margin: 6px 0;
   padding-left: 20px;
   font-size: 14px;
}

.rx li {
   margin: 4px 0;
}

.rx b {
   display: block;
}

.rxadd {
   display: grid;
   grid-template-columns: 2fr 1fr 1.4fr 1fr auto;
   gap: 6px;
   margin-top: 8px;
}

.signed {
   display: flex;
   gap: 10px;
   align-items: flex-start;
   background: var(--ok-soft);
   border-color: transparent;
   color: #0f5c35;
   font-size: 14px;
}

.signed b {
   display: block;
}

.amend li {
   font-size: 13.5px;
   padding: 8px 12px;
   background: var(--bg-alt);
   border-radius: 10px;
   margin-top: 6px;
   list-style: none;
}

.amend {
   padding: 0;
   margin: 0;
}

.amend b {
   display: block;
   font-size: 12px;
   color: var(--text-3);
}

/* Up next */
.next .lbl {
   font-size: 12px;
   font-weight: 600;
   color: var(--text-3);
   text-transform: uppercase;
   letter-spacing: .04em;
   margin-bottom: 8px;
}

.nrow {
   display: flex;
   align-items: center;
   gap: 10px;
   flex-wrap: wrap;
}

.next .empty {
   padding: 10px;
}

/* Billing */
.items {
   width: 100%;
   border-collapse: collapse;
   font-size: 14.5px;
}

.items td {
   padding: 7px 4px;
   border-bottom: 1px solid var(--line-soft);
}

.num {
   text-align: right;
   font-variant-numeric: tabular-nums;
}

.x {
   border: 0;
   background: none;
   color: var(--text-3);
   cursor: pointer;
   padding: 2px;
}

.total {
   text-align: right;
   font-size: 15px;
   color: var(--text-2);
   padding-bottom: 8px;
}

.total b {
   font-size: 22px;
   color: var(--text);
   margin-left: 6px;
}

/* Reports */
.demo-app .kpis {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
   gap: 8px;
   margin: 4px 0 14px;
}

.demo-app .kpi {
   background: var(--bg-alt);
   border-radius: 12px;
   padding: 12px 14px;
}

.demo-app .kpi small {
   display: block;
   font-size: 12.5px;
   color: var(--text-3);
}

.demo-app .kpi b {
   font-size: 22px;
   font-weight: 700;
   font-variant-numeric: tabular-nums;
}

.demo-app .kpi em {
   display: block;
   font-style: normal;
   font-size: 12px;
   color: var(--ok);
}

.demo-app .kpi--hi {
   background: var(--ok-soft);
}

.demo-app .mb p {
   display: grid;
   grid-template-columns: 110px 1fr 90px;
   align-items: center;
   gap: 10px;
   font-size: 14px;
   margin: 6px 0;
}

.demo-app .mb i {
   display: block;
   height: 10px;
   width: var(--w);
   background: var(--accent);
   border-radius: 5px;
   opacity: .8;
}

.demo-app .mb b {
   text-align: right;
   font-variant-numeric: tabular-nums;
}

.bars {
   display: flex;
   align-items: flex-end;
   gap: 14px;
   height: 200px;
   padding: 20px 4px 24px;
   border-bottom: 1px solid var(--line-soft);
}

.bar {
   position: relative;
   flex: 1;
   height: 100%;
   display: flex;
   flex-direction: column-reverse;
}

.bar .seg-r {
   background: var(--accent);
   border-radius: 0 0 4px 4px;
}

.bar .seg-n {
   background: #f3a3b6;
   border-radius: 4px 4px 0 0;
}

.bar .v {
   font-size: 12px;
   color: var(--text-2);
   text-align: center;
   order: 3;
}

.bar .m {
   position: absolute;
   bottom: -20px;
   left: 0;
   right: 0;
   text-align: center;
   font-size: 12px;
   color: var(--text-3);
}

.legend {
   display: flex;
   gap: 14px;
   font-size: 12.5px;
   color: var(--text-2);
   margin: 14px 0 6px;
}

.legend i {
   display: inline-block;
   width: 10px;
   height: 10px;
   border-radius: 3px;
   margin-right: 5px;
}

.sw-r {
   background: var(--accent);
}

.sw-n {
   background: #f3a3b6;
}

/* Audit */
.audit li {
   display: flex;
   gap: 10px;
   align-items: flex-start;
   padding: 8px 0;
   border-bottom: 1px solid var(--line-soft);
   font-size: 14px;
}

.audit time {
   width: 44px;
   color: var(--text-3);
   font-variant-numeric: tabular-nums;
   font-size: 13px;
}

.al {
   flex: none;
   width: 24px;
   height: 24px;
   border-radius: 50%;
   display: grid;
   place-items: center;
   font-size: 11px;
   font-weight: 700;
   background: var(--accent-soft);
   color: var(--accent);
}

.al--r {
   background: var(--ok-soft);
   color: var(--ok);
}

/* Settings switch */
.switch {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   border: 0;
   background: none;
   font: 500 13px var(--font);
   color: var(--text-2);
   cursor: pointer;
}

.switch span {
   position: relative;
   width: 38px;
   height: 22px;
   border-radius: 11px;
   background: var(--line);
   transition: background .2s;
}

.switch span::after {
   content: "";
   position: absolute;
   top: 2px;
   left: 2px;
   width: 18px;
   height: 18px;
   border-radius: 50%;
   background: #fff;
   transition: transform .2s;
}

.switch.is-on span {
   background: var(--ok);
}

.switch.is-on span::after {
   transform: translateX(16px);
}

/* Modal: A4 preview */
.modal {
   position: fixed;
   inset: 0;
   z-index: 50;
   background: rgb(0 0 0 / .45);
   display: grid;
   place-items: center;
   padding: 16px;
}

.modal[hidden] {
   display: none;
}

.modal__box {
   background: var(--bg-alt);
   border-radius: 16px;
   padding: 16px;
   width: min(640px, 100%);
   max-height: 92vh;
   overflow: auto;
}

.modal__acts {
   display: flex;
   align-items: center;
   gap: 8px;
   justify-content: flex-end;
   margin-top: 12px;
}

.modal__acts .fine {
   margin: 0 auto 0 0;
}

.paper {
   background: #fff;
   padding: 28px 30px;
   border-radius: 4px;
   box-shadow: 0 4px 20px rgb(0 0 0 / .08);
   font-size: 14px;
   min-height: 420px;
}

.paper__head {
   display: flex;
   justify-content: space-between;
   gap: 16px;
   padding-bottom: 12px;
   border-bottom: 2px solid var(--accent);
   font-size: 12.5px;
   color: var(--text-2);
}

.paper__clinic {
   font-size: 18px;
   font-weight: 700;
   color: var(--text);
}

.paper__dr {
   text-align: right;
}

.paper__pt {
   display: flex;
   justify-content: space-between;
   gap: 10px;
   padding: 10px 0;
   border-bottom: 1px solid var(--line-soft);
   margin-bottom: 10px;
}

.paper__title {
   font-weight: 700;
   margin: 12px 0 0;
}

.paper__lbl {
   font-size: 11.5px;
   color: var(--text-3);
   text-transform: uppercase;
   letter-spacing: .04em;
   margin-top: 12px;
}

.paper__rx {
   font-size: 24px;
   font-weight: 700;
   font-style: italic;
   color: var(--accent);
   margin-top: 12px;
}

.paper__sign {
   margin: 48px 0 0 auto;
   width: 160px;
   border-top: 1px solid var(--text-3);
   text-align: center;
   font-size: 12px;
   color: var(--text-3);
   padding-top: 4px;
}

.paper .items .tot td {
   font-weight: 700;
}

.toast {
   position: fixed;
   left: 50%;
   bottom: 22px;
   transform: translateX(-50%);
   z-index: 60;
   background: var(--text);
   color: #fff;
   font-size: 14px;
   padding: 10px 16px;
   border-radius: 12px;
   max-width: min(520px, calc(100% - 32px));
   box-shadow: 0 10px 30px rgb(0 0 0 / .2);
}

.toast[hidden] {
   display: none;
}

/* ---------- Responsive ---------- */
@media (max-width: 1280px) {
   .guide__list {
      grid-template-columns: repeat(4, minmax(0, 1fr));
   }

   .consult {
      grid-template-columns: 1fr;
   }

   .consult__side {
      border-left: 0;
      padding-left: 0;
      border-top: 1px solid var(--line-soft);
   }
}

@media (max-width: 1099px) {
   .roles__both {
      display: none;
   }

   .demo-app.role-both {
      grid-template-columns: 1fr;
   }
}

@media (max-width: 720px) {
   .dbar__clock {
      display: none;
   }

   .dbar__tag {
      margin-right: auto;
   }

   .dbar .pill {
      display: none;
   }

   .guide__list {
      grid-template-columns: 1fr 1fr;
   }

   .pane__body {
      grid-template-columns: 1fr;
      min-height: 0;
   }

   .side {
      flex-direction: row;
      overflow-x: auto;
      border-right: 0;
      border-bottom: 1px solid var(--line-soft);
      padding: 6px;
   }

   .side__tab {
      flex: none;
      padding: 8px 10px;
   }

   .side__tab.is-locked,
   .side__sep {
      display: none;
   }

   .main {
      padding: 14px 14px 20px;
   }

   .grid2,
   .vitals {
      grid-template-columns: 1fr 1fr;
   }

   .rxadd {
      grid-template-columns: 1fr 1fr;
   }

   .rxadd input:first-child {
      grid-column: span 2;
   }

   .demo-app .mb p {
      grid-template-columns: 80px 1fr 76px;
   }
}

/* Print only the A4 sheet */
@media print {
   body.demo > *:not(.modal) {
      display: none !important;
   }

   .modal {
      position: static;
      background: none;
      padding: 0;
   }

   .modal__box {
      background: none;
      padding: 0;
      width: auto;
      max-height: none;
   }

   .modal__acts {
      display: none;
   }

   .paper {
      box-shadow: none;
   }
}

/* fixes */
.guide__end[hidden] {
   display: none;
}

.demo-app .callout {
   display: flex;
   flex-direction: row;
   align-items: center;
   text-align: left;
   gap: 12px;
}

.demo-app .callout .i {
   width: 20px;
   height: 20px;
}

.h3row {
   margin: 18px 0 8px;
}

.grid2--fu {
   grid-template-columns: minmax(150px, 1fr) minmax(0, 1.4fr);
}

.vitals {
   grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
}

@media (max-width: 720px) {
   .guide__list {
      grid-template-columns: 1fr;
   }

   .guide__list li:not(.is-next) {
      display: none;
   }

   .grid2--fu {
      grid-template-columns: 1fr;
   }
}

.guide__list {
   grid-template-columns: repeat(8, minmax(0, 1fr));
}

@media (max-width: 1280px) {
   .guide__list {
      grid-template-columns: repeat(4, minmax(0, 1fr));
   }
}

@media (max-width: 720px) {
   .guide__list {
      grid-template-columns: 1fr;
   }

   .pane--solo .side__sep {
      display: block;
      margin: 0 6px;
      align-self: center;
   }
}

.side__sep--top {
   margin-top: 4px;
}

/* ================= Real-app layout (role chooser + app shell) ================= */
.dbar__space {
   margin-left: auto;
}

.demo-wrap {
   padding-top: 16px;
}

/* Role chooser */
.chooser {
   max-width: 760px;
   margin: 6vh auto 0;
   text-align: center;
}

.chooser__tag {
   display: inline-block;
   font-size: 13px;
   font-weight: 600;
   color: var(--warn);
   background: var(--warn-soft);
   padding: 4px 12px;
   border-radius: 980px;
}

.chooser h1 {
   font-size: clamp(30px, 4vw, 44px);
   letter-spacing: -0.03em;
   margin-top: 14px;
}

.chooser__lead {
   color: var(--text-2);
   font-size: 17px;
   margin: 10px auto 0;
   max-width: 560px;
}

.chooser__cards {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 16px;
   margin-top: 28px;
   text-align: left;
}

.pick {
   display: flex;
   flex-direction: column;
   gap: 8px;
   padding: 24px;
   border: 1px solid var(--line-soft);
   border-radius: var(--r-lg);
   background: #fff;
   font: inherit;
   color: inherit;
   cursor: pointer;
   box-shadow: 0 10px 30px rgb(0 0 0 / .05);
   transition: transform .15s, box-shadow .15s, border-color .15s;
}

.pick:hover,
.pick:focus-visible {
   transform: translateY(-2px);
   border-color: var(--accent);
   box-shadow: 0 16px 40px rgb(209 42 84 / .12);
}

.pick .i {
   width: 30px;
   height: 30px;
   color: var(--accent);
}

.pick b {
   font-size: 21px;
   letter-spacing: -0.02em;
}

.pick span {
   font-size: 15px;
   color: var(--text-2);
   line-height: 1.45;
}

.pick em {
   font-style: normal;
   font-size: 13px;
   color: var(--text-3);
   margin-top: auto;
}

.chooser .fine {
   margin-top: 18px;
}

/* App shell */
.pane--app .pane__body {
   min-height: calc(100vh - 170px);
   grid-template-columns: 210px minmax(0, 1fr);
}

.appbar {
   display: flex;
   align-items: center;
   gap: 16px;
   padding: 12px 18px;
   border-bottom: 1px solid var(--line-soft);
   background: #fcfcfd;
   flex-wrap: wrap;
}

.appbar__clinic {
   margin-right: auto;
   line-height: 1.25;
}

.appbar__clinic b {
   display: block;
   font-size: 16px;
}

.appbar__clinic span {
   font-size: 13px;
   color: var(--text-3);
   font-variant-numeric: tabular-nums;
}

.rolesw {
   display: inline-flex;
   align-items: center;
   gap: 4px;
   background: var(--bg-alt);
   border-radius: 980px;
   padding: 4px;
}

.rolesw__lbl {
   font-size: 12px;
   font-weight: 600;
   color: var(--text-3);
   padding: 0 6px 0 10px;
}

.rolesw button {
   position: relative;
   display: inline-flex;
   align-items: center;
   gap: 6px;
   border: 0;
   background: none;
   font: 600 14px var(--font);
   color: var(--text-2);
   padding: 7px 14px;
   border-radius: 980px;
   cursor: pointer;
}

.rolesw button[aria-pressed="true"] {
   background: #fff;
   color: var(--accent);
   box-shadow: 0 1px 3px rgb(0 0 0 / .1);
}

.rolesw .dot {
   position: absolute;
   top: 4px;
   right: 6px;
   width: 9px;
   height: 9px;
   border-radius: 50%;
   background: var(--accent);
   box-shadow: 0 0 0 2px var(--bg-alt);
   animation: dotpulse 1.4s ease-in-out infinite;
}

@keyframes dotpulse {
   50% {
      transform: scale(1.35);
   }
}

@media (prefers-reduced-motion: reduce) {
   .rolesw .dot {
      animation: none;
   }
}

.me {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   font-size: 14px;
   font-weight: 600;
   line-height: 1.2;
}

.me small {
   display: block;
   font-weight: 400;
   font-size: 12px;
   color: var(--text-3);
}

.me .avatar {
   width: 34px;
   height: 34px;
   font-size: 13px;
}

.side .side__sep:first-child {
   margin-top: 4px;
}

.grid2--top {
   align-items: start;
   gap: 0 24px;
}

.grid2--top .audit li {
   font-size: 13.5px;
}

@media (max-width: 720px) {
   .chooser__cards {
      grid-template-columns: 1fr;
   }

   .appbar {
      padding: 10px 12px;
   }

   .rolesw__lbl,
   .me {
      display: none;
   }

   .pane--app .pane__body {
      min-height: 0;
   }

   .grid2--top {
      grid-template-columns: 1fr;
   }
}

@media (max-width: 720px) {
   .pane--app .pane__body {
      grid-template-columns: 1fr;
   }

   .pane--app .side {
      flex-direction: row;
      overflow-x: auto;
      border-right: 0;
      border-bottom: 1px solid var(--line-soft);
      padding: 6px;
   }

   .pane--app .side__sep {
      display: none;
   }

   .dbar__reset {
      padding: 6px 8px;
   }
}

/* ================= Full-window app (v7) =================
   The demo bar on top holds the demo's own controls (who you're viewing as,
   start again). Everything under it looks and behaves like the real app. */
body.demo {
   min-height: 100vh;
   display: flex;
   flex-direction: column;
}

.dbar__in {
   max-width: none;
   padding: 8px 16px;
   flex-wrap: nowrap;
}

.dbar .rolesw {
   margin-left: 8px;
}

.dbar .rolesw[hidden] {
   display: none;
}

.demo-wrap {
   max-width: none;
   margin: 0;
   padding: 0;
   flex: 1;
   display: flex;
   flex-direction: column;
}

.demo-app {
   flex: 1;
   display: flex;
   flex-direction: column;
   gap: 0;
}

.pane--app {
   flex: 1;
   display: flex;
   flex-direction: column;
   border: 0;
   border-radius: 0;
   box-shadow: none;
}

.pane--app .pane__body {
   flex: 1;
   min-height: 0;
   grid-template-columns: 220px minmax(0, 1fr);
}

.pane--app .side {
   padding: 12px 10px;
}

.pane--app .main {
   padding: 22px 28px 40px;
   max-width: 1180px;
}

/* App bar: clinic, patient search, signed-in user */
.appbar {
   gap: 20px;
   padding: 10px 20px;
   background: #fff;
   flex-wrap: nowrap;
}

.appbar__clinic {
   margin-right: 0;
   min-width: 190px;
}

.appbar__search {
   flex: 1;
   max-width: 460px;
   display: flex;
   align-items: center;
   gap: 8px;
   background: var(--bg-alt);
   border-radius: 10px;
   padding: 0 12px;
   color: var(--text-3);
}

.demo-app .appbar__search input {
   border: 0;
   background: none;
   padding: 9px 0;
   min-height: 0;
   box-shadow: none;
   font-size: 14px;
}

.demo-app .appbar__search input:focus {
   box-shadow: none;
}

.appbar__search:focus-within {
   box-shadow: 0 0 0 2px var(--accent);
}

.me {
   margin-left: auto;
}

.me__out {
   border: 1px solid var(--line);
   background: #fff;
   font: 500 13px var(--font);
   color: var(--text-2);
   padding: 6px 12px;
   border-radius: 980px;
   cursor: pointer;
   margin-left: 6px;
}

.me__out:hover {
   color: var(--text);
   border-color: var(--text-3);
}

.avatar--r {
   background: #e8f0fe;
   color: #1a56c4;
}

.demo-app .rows .avatar {
   width: 34px;
   height: 34px;
   font-size: 13px;
   flex: none;
}

/* Sign-in screen */
.signin {
   flex: 1;
   display: grid;
   place-items: center;
   padding: 32px 16px;
}

.signin__card {
   width: 100%;
   max-width: 440px;
   background: #fff;
   border: 1px solid var(--line-soft);
   border-radius: var(--r-lg);
   padding: 32px 28px 24px;
   box-shadow: 0 10px 30px rgb(0 0 0 / .05);
}

.signin__card h1 {
   font-size: 26px;
   letter-spacing: -0.02em;
   margin-top: 16px;
}

.signin__clinic {
   color: var(--text-2);
   margin-top: 2px;
}

.signin__lbl {
   margin: 22px 0 8px;
   font-size: 12px;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: .04em;
   color: var(--text-3);
}

.acct {
   display: flex;
   align-items: center;
   gap: 14px;
   width: 100%;
   text-align: left;
   border: 1px solid var(--line);
   border-radius: 14px;
   background: #fff;
   padding: 14px 16px;
   margin-bottom: 10px;
   font: inherit;
   color: inherit;
   cursor: pointer;
   transition: border-color .15s, box-shadow .15s;
}

.acct:hover,
.acct:focus-visible {
   border-color: var(--accent);
   box-shadow: 0 0 0 3px rgb(209 42 84 / .12);
   outline: none;
}

.acct .avatar {
   flex: none;
}

.acct__who {
   flex: 1;
   line-height: 1.3;
}

.acct__who b {
   display: block;
   font-size: 16px;
}

.acct__who small {
   display: block;
   font-size: 13px;
   color: var(--accent);
   font-weight: 600;
}

.acct__who em {
   display: block;
   font-style: normal;
   font-size: 13px;
   color: var(--text-2);
   margin-top: 2px;
}

.acct > .i {
   color: var(--text-3);
}

.signin .fine {
   margin-top: 14px;
   text-align: center;
}

/* Patient names open the patient's file from any screen */
.demo-app .plink {
   display: inline;
   width: auto;
   border: 0;
   background: none;
   padding: 0;
   font: inherit;
   color: inherit;
   cursor: pointer;
   text-align: left;
}

.demo-app .plink:hover,
.demo-app .plink:focus-visible {
   color: var(--accent);
   text-decoration: underline;
   text-underline-offset: 3px;
}

.back {
   display: inline-flex;
   align-items: center;
   gap: 4px;
   border: 0;
   background: none;
   font: 500 14px var(--font);
   color: var(--accent);
   padding: 0;
   margin-bottom: 14px;
   cursor: pointer;
}

.back .i {
   transform: rotate(180deg);
}

/* Patient file */
.pfile__head {
   display: flex;
   align-items: center;
   gap: 14px;
   flex-wrap: wrap;
}

.pfile__head .avatar {
   width: 52px;
   height: 52px;
   font-size: 17px;
}

.pfile__head > div:nth-child(2) {
   margin-right: auto;
}

.pfile__head + .acts {
   margin: 14px 0 18px;
}

.pfile {
   display: grid;
   grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
   gap: 16px;
   align-items: start;
}

.pfile .card {
   margin: 0;
}

.nextgrid {
   align-items: stretch;
   gap: 12px;
}

.nextgrid > .card {
   margin: 0;
}

.h3__note {
   font-weight: 400;
   font-size: 13px;
   color: var(--text-3);
   margin-left: 6px;
}

.week li.is-today {
   background: var(--accent-soft);
}

/* Inline forms under a bill (record payment, cancel with a reason) */
.rows li.rowform {
   display: block;
   padding: 6px 0 12px;
}

.rowform .card {
   margin: 0;
   background: var(--bg-alt);
}

.rowform .form--row {
   display: flex;
   align-items: flex-end;
   gap: 10px;
   margin-top: 10px;
   flex-wrap: wrap;
}

@media (max-width: 1099px) {
   .pfile {
      grid-template-columns: 1fr;
   }

   .appbar__clinic {
      min-width: 0;
   }
}

@media (max-width: 860px) {
   .dbar__more,
   .dbar .pill,
   .rolesw__lbl,
   .me > span:not(.avatar) {
      display: none;
   }

   .dbar__in {
      gap: 8px;
   }

   .dbar .rolesw {
      margin-left: 0;
   }

   .rolesw button {
      padding: 6px 10px;
   }
}

@media (max-width: 720px) {
   .dbar .brand span {
      display: none;
   }

   .rolesw button .i {
      display: none;
   }

   .appbar {
      flex-wrap: wrap;
      gap: 10px;
      padding: 10px 12px;
   }

   .appbar__search {
      order: 3;
      flex-basis: 100%;
      max-width: none;
   }

   .me {
      display: inline-flex;
   }

   .pane--app .pane__body {
      grid-template-columns: 1fr;
   }

   .pane--app .main {
      padding: 16px 14px 28px;
   }

   .nextgrid {
      grid-template-columns: 1fr;
   }

   .pane--app .side__tab.is-locked {
      display: none;
   }
}

.dbar__reset {
   white-space: nowrap;
}

/* ================= Phones (v8) ================= */
/* The landing page's stylesheet sets .who to flex; in the demo it's a plain block
   so a name stays on one line with the text before it. */
.demo-app .who {
   display: block;
}

.dbar__reset .sm,
.tabbar,
.sheet {
   display: none;
}

.seg .cnt {
   display: inline-block;
   min-width: 18px;
   padding: 0 5px;
   margin-left: 2px;
   border-radius: 980px;
   background: rgb(0 0 0 / .06);
   font-size: 12px;
   text-align: center;
}

.h4 + .chips {
   margin-top: 0;
}

@media (max-width: 720px) {
   /* Demo bar: one compact row */
   .dbar__in {
      padding: 6px 12px;
      gap: 6px;
   }

   .dbar .brand {
      display: none;
   }

   .dbar__tag {
      margin-right: 0;
      padding: 3px 8px;
   }

   .dbar .rolesw {
      padding: 3px;
   }

   .rolesw button {
      font-size: 13px;
      padding: 6px 10px;
   }

   .rolesw .dot {
      top: 2px;
      right: 2px;
   }

   .dbar__reset {
      padding: 6px 8px;
      font-size: 13px;
   }

   .dbar__reset .lg {
      display: none;
   }

   .dbar__reset .sm {
      display: inline;
   }

   /* App: sidebar becomes a bottom tab bar + "More" sheet */
   .pane--app .side {
      display: none;
   }

   .pane--app .main {
      padding: 16px 14px calc(84px + env(safe-area-inset-bottom));
   }

   .tabbar {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 40;
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      background: rgb(255 255 255 / .96);
      backdrop-filter: blur(12px);
      border-top: 1px solid var(--line-soft);
      padding: 4px 4px calc(4px + env(safe-area-inset-bottom));
   }

   .tabbar__btn {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 3px;
      border: 0;
      background: none;
      padding: 7px 2px 6px;
      border-radius: 10px;
      font: 500 11px var(--font);
      color: var(--text-3);
      cursor: pointer;
      min-width: 0;
   }

   .tabbar__btn span:not(.tab-dot) {
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
   }

   .tabbar__btn .i {
      width: 22px;
      height: 22px;
   }

   .tabbar__btn.is-on {
      color: var(--accent);
   }

   .tabbar__btn .tab-dot {
      position: absolute;
      top: 6px;
      left: calc(50% + 8px);
      margin: 0;
   }

   .sheet {
      display: flex;
      position: fixed;
      inset: 0;
      z-index: 50;
      background: rgb(0 0 0 / .35);
      align-items: flex-end;
   }

   .sheet__panel {
      width: 100%;
      max-height: 85vh;
      overflow-y: auto;
      background: #fff;
      border-radius: 18px 18px 0 0;
      padding: 8px 12px calc(16px + env(safe-area-inset-bottom));
   }

   .sheet__head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 8px 6px 4px;
   }

   .pane--app .side--sheet {
      display: flex;
      flex-direction: column;
      border: 0;
      padding: 0;
      background: none;
      overflow: visible;
   }

   .pane--app .side--sheet .side__tab {
      padding: 12px 10px;
      font-size: 15px;
   }

   .pane--app .side--sheet .side__tab.is-locked,
   .pane--app .side--sheet .side__sep {
      display: flex;
   }

   .pane--app .side--sheet .side__sep {
      display: block;
      margin: 12px 10px 4px;
   }

   .toast {
      bottom: calc(80px + env(safe-area-inset-bottom));
   }

   /* App bar: tighter */
   .appbar {
      padding: 8px 12px 10px;
      gap: 8px;
   }

   .appbar__clinic b {
      font-size: 15px;
   }

   /* Headings */
   .demo-app h2 {
      font-size: 20px;
   }

   .head {
      flex-wrap: wrap;
      gap: 8px;
   }

   /* Queue: token | name + status | action, so Call stays on the right */
   .queue li {
      display: grid;
      grid-template-columns: 34px minmax(0, 1fr) auto;
      column-gap: 10px;
      row-gap: 4px;
      align-items: center;
   }

   .queue .tok {
      grid-row: span 2;
   }

   .queue .who {
      grid-column: 2;
   }

   .queue .st {
      grid-column: 2;
      grid-row: 2;
      justify-self: start;
   }

   .queue li > .btn {
      grid-column: 3;
      grid-row: 1 / span 2;
   }

   /* Rows with several buttons: buttons go on their own line, lined up */
   .rows li .acts {
      width: 100%;
   }

   .rows li .time + .who + .acts {
      padding-left: 56px;
   }

   /* Forms in a row: full-width field, then the buttons */
   .form--row,
   .rowform .form--row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: end;
      gap: 10px;
   }

   .form--row .grow {
      grid-column: 1 / -1;
      min-width: 0;
   }

   .rowform .form--row .btn {
      justify-self: start;
   }

   /* Segmented controls scroll sideways instead of wrapping */
   .seg:not(.seg--wrap) {
      max-width: 100%;
      overflow-x: auto;
      scrollbar-width: none;
   }

   .seg button {
      white-space: nowrap;
   }

   .nrow .who small {
      white-space: normal;
   }

   .kpi b {
      font-size: 22px;
   }
}

@media (max-width: 380px) {
   .dbar__tag {
      display: none;
   }
}

@media (max-width: 720px) {
   /* Signed out: the demo bar has room for the logo */
   .dbar__in:has(.rolesw[hidden]) .brand,
   .dbar__in:has(.rolesw[hidden]) .dbar__tag {
      display: inline-flex;
   }

   /* Consultation: past visits first, so the doctor reads the history before writing */
   .consult {
      display: flex;
      flex-direction: column;
   }

   .consult__side {
      order: -1;
      border-top: 0;
      padding-top: 0;
   }
}