/* ============================================================
   styles.css — the application interface.

   The printed document lives in letter.css. This file styles only
   the chrome around it, and none of it reaches paper.

   Colour note. The Connected Care red is the brand, so it carries
   identity and the one affirmative action (Print). It deliberately
   does NOT signal trouble here: in a clinical tool a red button that
   means "danger" and a red button that means "the brand" cannot
   coexist. Incomplete states are amber, destructive actions are
   quiet and confirmed rather than coloured.
   ============================================================ */

:root{
  /* Brand.
     The Connected Care site is teal (#5BABA4 — nav hover, section rules, card
     headers, the hero button), so the app is teal too and the red survives
     only in the logo mark itself. That also settles a problem noted earlier:
     a red primary button in a clinical tool reads as danger.

     Two teals, because the site's is too light to carry white text. #5BABA4
     on white is 2.7:1 — below the 4.5:1 needed for body text and below 3:1
     for large text. Fills and indicators use it; anything bearing text or
     acting as a button uses --brand-dark (5.3:1) or --brand-deep (6.7:1). */
  --brand:#5BABA4;
  --brand-dark:#3F7570;
  --brand-deep:#2F6560;
  --brand-wash:#EDF6F5;
  --brand-line:#BFDEDA;

  /* Ink and surfaces */
  --ink:#17181C;
  --ink-2:#4E5158;
  --ink-3:#83878F;
  --line:#E3E5E9;
  --line-2:#F0F1F4;
  --bg:#F6F7F9;
  --surface:#FFFFFF;
  --canvas:#E4E7EC;

  /* States */
  --warn:#9A5B00;
  --warn-wash:#FDF6E9;
  --warn-line:#EFDCB6;
  --ok:#16704A;
  --ok-wash:#EAF4EF;

  --radius:9px;
  --radius-sm:6px;
  --shadow-1:0 1px 2px rgba(23,24,28,.05);
  --shadow-2:0 1px 2px rgba(23,24,28,.06), 0 6px 18px rgba(23,24,28,.07);
  --shadow-3:0 18px 50px rgba(23,24,28,.24);

  --ui:"Avenir Next",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,
       "Helvetica Neue",Arial,sans-serif;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;font-family:var(--ui);color:var(--ink);background:var(--bg);
  font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;
  display:flex;flex-direction:column;
}
/* The brand hairline that tops the whole application. */
body::before{
  content:"";position:fixed;top:0;left:0;right:0;height:3px;
  background:var(--brand);z-index:20;
}

::selection{background:var(--brand-wash);color:var(--brand-dark)}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:4px}

/* ─────────── App bar ─────────── */
.appbar{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:11px 20px;margin-top:3px;
  background:var(--surface);border-bottom:1px solid var(--line);
  flex:0 0 auto;z-index:5;
}
.appbar-brand{display:flex;align-items:center;gap:12px;min-width:0}
.appbar-mark{width:30px;height:30px;flex:0 0 auto;object-fit:contain}
.appbar-id{min-width:0}
.appbar-title{
  font-size:15px;font-weight:600;letter-spacing:-.005em;margin:0;line-height:1.25;
}
.appbar-sub{
  margin:1px 0 0;font-size:12px;color:var(--ink-3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:52ch;
}
.appbar-actions{display:flex;align-items:center;gap:8px;flex:0 0 auto}

.pill{
  display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:500;
  padding:5px 10px;border-radius:99px;white-space:nowrap;
}
.pill svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.8;
          stroke-linejoin:round;stroke-linecap:round}
.pill-privacy{background:var(--ok-wash);color:var(--ok)}

/* ─────────── Buttons ─────────── */
.btn{
  font:inherit;font-size:13px;font-weight:500;padding:6px 12px;border-radius:var(--radius-sm);
  border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  transition:background .12s,border-color .12s,color .12s,box-shadow .12s;
}
.btn:hover:not(:disabled){background:var(--line-2);border-color:#D3D7DD}
.btn:active:not(:disabled){background:var(--line)}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn .ico{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;
          stroke-linejoin:round;stroke-linecap:round;flex:0 0 auto}

.btn-primary{background:var(--brand-dark);border-color:var(--brand-dark);color:#fff;font-weight:550}
.btn-primary:hover:not(:disabled){background:var(--brand-deep);border-color:var(--brand-deep)}
.btn-primary:active:not(:disabled){background:#245049}
.btn-ghost{background:transparent}
/* Destructive work is quiet and confirmed, not coloured — red is the brand here. */
.btn-quiet{background:transparent;border-color:transparent;color:var(--ink-3)}
.btn-quiet:hover{background:var(--line-2);color:var(--ink)}

.icon-btn{
  font:inherit;font-size:22px;line-height:1;border:0;background:transparent;color:var(--ink-3);
  cursor:pointer;padding:1px 7px;border-radius:var(--radius-sm);flex:0 0 auto;
}
.icon-btn:hover{background:var(--line-2);color:var(--ink)}
.linklike{
  font:inherit;border:0;background:transparent;color:var(--brand-dark);font-weight:550;
  text-decoration:underline;text-underline-offset:2px;cursor:pointer;padding:0;
}
.linklike:hover{color:var(--brand-deep)}
.count{
  background:var(--line-2);color:var(--ink-2);border-radius:99px;
  padding:1px 6px;font-size:11px;font-weight:600;
}

/* ─────────── Layout ─────────── */
/* The preview column is sized in pixels rather than a fraction, so the page
   can be given as much room as the screen allows and the drag handle has
   something concrete to move. The form takes whatever is left. */
:root{ --rail-w:264px; --preview-w:820px; }

.layout{
  flex:1 1 auto;min-height:0;
  display:grid;
  grid-template-columns:var(--rail-w) minmax(430px,1fr) 7px var(--preview-w);
}
body.rail-hidden{ --rail-w:0px; }
body.rail-hidden .rail{display:none}
body.rail-hidden .layout{grid-template-columns:minmax(430px,1fr) 7px var(--preview-w)}

.rail-toggle{margin-right:4px;padding:6px 10px;font-size:12.5px}
.rail-toggle svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;
                 stroke-linecap:round;display:block;flex:0 0 auto}
.rail-toggle.is-off{background:var(--brand-wash);border-color:var(--brand-line);color:var(--brand-dark)}

/* Drag handle between the form and the page. */
.splitter{
  cursor:col-resize;background:var(--line);position:relative;
  display:flex;align-items:center;justify-content:center;
  transition:background .12s;
}
.splitter:hover,.splitter.dragging{background:var(--brand-line)}
.splitter span{
  width:2px;height:26px;border-radius:2px;background:var(--ink-3);opacity:.35;
  pointer-events:none;
}
.splitter:hover span,.splitter.dragging span{background:var(--brand);opacity:1}
.splitter:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
body.dragging,body.dragging *{cursor:col-resize !important;user-select:none}

/* Zoom control */
.zoom{
  display:flex;align-items:center;gap:1px;flex:0 0 auto;margin-left:auto;
  border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden;
  background:var(--surface);
}
.zoom-btn,.zoom-lvl{
  font:inherit;border:0;background:transparent;color:var(--ink-2);cursor:pointer;
  padding:4px 8px;line-height:1;
}
.zoom-btn{font-size:15px;width:26px}
.zoom-lvl{
  font-size:11.5px;font-weight:600;min-width:44px;font-variant-numeric:tabular-nums;
  border-left:1px solid var(--line);border-right:1px solid var(--line);
}
.zoom-btn:hover,.zoom-lvl:hover{background:var(--line-2);color:var(--ink)}
.zoom-btn:disabled{opacity:.35;cursor:not-allowed;background:transparent}

/* ─────────── Template rail ─────────── */
.rail{
  background:var(--surface);border-right:1px solid var(--line);
  display:flex;flex-direction:column;min-height:0;
}
.rail-search{position:relative;padding:11px 12px;border-bottom:1px solid var(--line-2)}
.rail-search-ico{
  position:absolute;left:22px;top:50%;transform:translateY(-50%);
  width:14px;height:14px;fill:none;stroke:var(--ink-3);stroke-width:1.8;
  stroke-linecap:round;pointer-events:none;
}
.rail-search input{
  width:100%;font:inherit;font-size:13px;padding:7px 26px 7px 30px;
  border-radius:var(--radius-sm);border:1px solid var(--line);
  background:var(--bg);color:var(--ink);
}
.rail-search input::placeholder{color:var(--ink-3)}
.rail-search input:focus{outline:none;border-color:var(--brand);background:var(--surface);
                         box-shadow:0 0 0 3px var(--brand-wash)}
.rail-search input::-webkit-search-cancel-button{display:none}
.rail-search-clear{
  position:absolute;right:20px;top:50%;transform:translateY(-50%);
  border:0;background:transparent;color:var(--ink-3);font-size:17px;line-height:1;
  cursor:pointer;padding:2px 4px;border-radius:4px;
}
.rail-search-clear:hover{color:var(--ink);background:var(--line-2)}

.rail-list{flex:1 1 auto;overflow-y:auto;padding:4px 8px 28px}
.rail-group{
  display:flex;align-items:center;gap:7px;
  font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3);padding:16px 8px 6px;
}
.rail-group::after{content:"";flex:1 1 auto;height:1px;background:var(--line-2)}

.rail-item{
  position:relative;display:block;width:100%;text-align:left;font:inherit;font-size:13px;
  border:0;background:transparent;color:var(--ink-2);cursor:pointer;
  padding:7px 10px 7px 11px;border-radius:var(--radius-sm);line-height:1.35;
  transition:background .11s,color .11s;
}
.rail-item:hover{background:var(--line-2);color:var(--ink)}
.rail-item .ri-aud{display:block;font-size:11px;color:var(--ink-3);font-weight:400;margin-top:2px}
.rail-item.active{background:var(--brand-wash);color:var(--brand-dark);font-weight:600}
.rail-item.active .ri-aud{color:#5E8A86}
.rail-item.active::before{
  content:"";position:absolute;left:0;top:7px;bottom:7px;width:3px;
  border-radius:0 3px 3px 0;background:var(--brand);
}
.rail-empty{padding:22px 12px;color:var(--ink-3);font-size:13px;line-height:1.5}

/* ─────────── Editor ─────────── */
.editor{
  overflow-y:auto;min-height:0;background:var(--bg);border-right:1px solid var(--line);
  container-type:inline-size;container-name:editor;
}

/* Welcome */
.welcome{max-width:560px;margin:0 auto;padding:44px 26px 60px}
.welcome-logo{width:186px;height:auto;display:block;margin:0 0 26px}
.welcome h2{
  font-size:21px;line-height:1.3;margin:0 0 10px;font-weight:600;letter-spacing:-.015em;
  max-width:19ch;
}
.welcome-lede{margin:0 0 26px;font-size:14px;color:var(--ink-2);max-width:52ch;line-height:1.6}

.steps{list-style:none;margin:0 0 30px;padding:0;display:flex;flex-direction:column;gap:11px}
.steps li{display:flex;gap:11px;align-items:flex-start;font-size:13.5px;color:var(--ink-2);
          line-height:1.5}
.step-n{
  flex:0 0 auto;width:21px;height:21px;border-radius:50%;
  background:var(--brand-wash);color:var(--brand-dark);
  font-size:11.5px;font-weight:700;display:grid;place-items:center;margin-top:1px;
}

.cat-cards{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.cat-card{
  text-align:left;font:inherit;cursor:pointer;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius);padding:12px 13px;
  transition:border-color .12s,box-shadow .12s,transform .12s;
}
.cat-card:hover{border-color:var(--brand-line);box-shadow:var(--shadow-2);transform:translateY(-1px)}
.cat-card-n{
  font-size:19px;font-weight:600;color:var(--brand-dark);line-height:1;letter-spacing:-.02em;
}
.cat-card-l{display:block;font-size:12.5px;color:var(--ink-2);margin-top:5px;line-height:1.35}

/* Template header */
.editor-body{padding:24px 26px 48px;max-width:790px}
.chip{
  display:inline-block;font-size:11px;font-weight:600;letter-spacing:.02em;
  background:var(--line-2);color:var(--ink-2);padding:3px 9px;border-radius:99px;
  margin-bottom:9px;
}
.editor-head h2{font-size:19px;margin:0 0 6px;letter-spacing:-.015em;line-height:1.28;font-weight:600}
.editor-head p{margin:0;font-size:13.5px;color:var(--ink-2);line-height:1.55;max-width:64ch}
.tpl-source{margin-top:8px !important;font-size:12px;color:var(--ink-3) !important}
.tpl-source a{color:var(--ink-3);text-decoration:underline;text-underline-offset:2px}
.tpl-source a:hover{color:var(--brand-dark)}

/* Completion meter */
.meter{display:flex;align-items:center;gap:11px;margin:18px 0 0}
.meter-track{flex:1 1 auto;height:5px;border-radius:99px;background:var(--line);overflow:hidden}
.meter-fill{
  height:100%;width:0;border-radius:99px;background:var(--brand);
  transition:width .25s ease,background .25s ease;
}
.meter.done .meter-fill{background:var(--ok)}
.meter-text{font-size:12px;color:var(--ink-3);white-space:nowrap;font-variant-numeric:tabular-nums}
.meter.done .meter-text{color:var(--ok);font-weight:550}

.warnbar{
  margin:18px 0 0;padding:11px 13px;border-radius:var(--radius-sm);font-size:12.5px;
  background:var(--warn-wash);color:var(--warn);border:1px solid var(--warn-line);
  line-height:1.55;
}
.warnbar strong{font-weight:650}

/* ─────────── Form ─────────── */
fieldset{
  border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);
  margin:16px 0 0;padding:6px 17px 17px;box-shadow:var(--shadow-1);
}
legend{
  font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3);padding:0 7px;
}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:13px 15px}
.fld{display:flex;flex-direction:column;gap:5px;min-width:0}
.fld.full{grid-column:1 / -1}
.fld label{font-size:12.5px;font-weight:550;color:var(--ink-2)}
.fld .req{color:var(--warn);margin-left:3px;font-weight:700}
.fld .help{font-size:11.5px;color:var(--ink-3);line-height:1.45}
.fld input[type=text],.fld input[type=date],.fld input[type=number],
.fld input[type=tel],.fld input[type=email],.fld select,.fld textarea{
  font:inherit;font-size:13px;padding:7px 10px;border:1px solid var(--line);
  border-radius:var(--radius-sm);background:var(--surface);color:var(--ink);width:100%;
  transition:border-color .12s,box-shadow .12s;
}
.fld textarea{resize:vertical;min-height:66px;line-height:1.55}
.fld input:focus,.fld select:focus,.fld textarea:focus{
  outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-wash);
}
/* Incomplete is amber, never red — see the colour note at the top. */
.fld.missing input,.fld.missing textarea,.fld.missing select{
  border-color:var(--warn-line);background:#FFFDF8;
}
.checks{display:flex;flex-direction:column;gap:6px;margin-top:2px}
.checks label{
  display:flex;align-items:flex-start;gap:8px;font-size:12.5px;font-weight:400;
  color:var(--ink);line-height:1.45;cursor:pointer;
}
.checks input{margin:2px 0 0;flex:0 0 auto;accent-color:var(--brand)}

/* Repeating rows */
.rep{display:flex;flex-direction:column;gap:7px}
.rep-row{display:grid;gap:7px;align-items:start;grid-template-columns:1fr auto}
.rep-cells{display:grid;gap:7px}
.rep-cell{display:flex;flex-direction:column;gap:3px;min-width:0}
.rep-cell-l{display:none;font-size:10.5px;font-weight:600;letter-spacing:.04em;
            text-transform:uppercase;color:var(--ink-3)}
.rep-row input,.rep-row textarea{
  font:inherit;font-size:13px;padding:6px 9px;border:1px solid var(--line);
  border-radius:var(--radius-sm);width:100%;background:var(--surface);color:var(--ink);
}
.rep-row textarea{resize:vertical;min-height:34px;line-height:1.45}
.rep-row textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-wash)}
.rep-del{
  font:inherit;font-size:16px;line-height:1;border:1px solid var(--line);background:var(--surface);
  color:var(--ink-3);border-radius:var(--radius-sm);cursor:pointer;padding:6px 9px;align-self:start;
}
.rep-del:hover{background:var(--brand-wash);color:var(--brand-deep);border-color:var(--brand-line)}
.rep-add{
  align-self:start;font:inherit;font-size:12.5px;font-weight:550;color:var(--brand-deep);
  border:1px dashed var(--brand-line);background:transparent;
  border-radius:var(--radius-sm);padding:6px 12px;cursor:pointer;
}
.rep-add:hover{background:var(--brand-wash)}
.rep-head{
  display:grid;gap:7px;font-size:10.5px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-3);padding:0 0 1px;
}

.editor-foot{display:flex;gap:8px;margin-top:20px}

/* ─────────── Preview ─────────── */
.preview{display:flex;flex-direction:column;min-height:0;background:var(--canvas)}
.preview-bar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 15px;background:var(--surface);border-bottom:1px solid var(--line);flex:0 0 auto;
}
.preview-status{
  display:flex;align-items:center;gap:7px;font-size:12px;color:var(--ink-3);
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.preview-status::before{
  content:"";width:7px;height:7px;border-radius:50%;background:var(--ok);flex:0 0 auto;
}
.preview-status.warn{color:var(--warn)}
.preview-status.warn::before{background:var(--warn)}
.preview-status:empty::before{display:none}
.preview-actions{display:flex;gap:7px;flex:0 0 auto}
.paper-scroll{
  flex:1 1 auto;overflow:auto;padding:26px 24px 64px;
  display:flex;flex-direction:column;align-items:center;
}
/* When the page is zoomed wider than the column, centring would clip its left
   edge out of reach. Fall back to normal flow so both edges stay scrollable. */
.paper-scroll.overflowing{align-items:flex-start}
.page{box-shadow:var(--shadow-2)}

/* ─────────── Dialogs ─────────── */
.sheet{
  border:0;border-radius:12px;padding:0;max-width:640px;width:calc(100% - 40px);
  box-shadow:var(--shadow-3);color:var(--ink);
}
.sheet::backdrop{background:rgba(23,24,28,.45);backdrop-filter:blur(2px)}
.sheet-inner{display:flex;flex-direction:column;max-height:84vh}
.sheet-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
  padding:16px 20px;border-bottom:1px solid var(--line);
}
.sheet-head h2{font-size:15.5px;margin:0;font-weight:600;letter-spacing:-.01em}
.sheet-lede{margin:3px 0 0;font-size:12px;color:var(--ink-3);line-height:1.45}
.sheet-body{padding:18px 20px;overflow-y:auto}
.sheet-foot{
  display:flex;align-items:center;gap:8px;padding:13px 20px;
  border-top:1px solid var(--line);background:var(--bg);border-radius:0 0 12px 12px;
}
.sheet-note{font-size:11.5px;color:var(--ink-3)}
.spacer{flex:1 1 auto}

.logo-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.logo-prev{
  max-height:46px;max-width:140px;object-fit:contain;border:1px solid var(--line);
  border-radius:var(--radius-sm);padding:4px;background:#fff;
}

.draft-item{display:flex;align-items:center;gap:12px;padding:12px 4px;
            border-bottom:1px solid var(--line-2)}
.draft-item:last-child{border-bottom:0}
.draft-main{flex:1 1 auto;min-width:0}
.draft-title{font-size:13px;font-weight:600;line-height:1.35}
.draft-meta{font-size:11.5px;color:var(--ink-3);margin-top:3px}
.draft-stale{color:var(--warn);font-weight:600}
.draft-acts{display:flex;gap:6px;flex:0 0 auto}
.drafts-empty{color:var(--ink-3);font-size:13px;padding:20px 0;text-align:center}

/* ─────────── Toast ─────────── */
.toast{
  position:fixed;bottom:24px;left:50%;transform:translate(-50%,14px);
  background:var(--ink);color:#fff;font-size:13px;padding:10px 17px;border-radius:8px;
  box-shadow:var(--shadow-3);opacity:0;pointer-events:none;
  transition:opacity .18s,transform .18s;z-index:99;max-width:80vw;text-align:center;
}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ─────────── Narrow screens ─────────── */
@media (max-width:1240px){
  :root{ --rail-w:224px; }
  .editor-body{padding:20px 20px 44px}
}
@media (max-width:980px){
  .layout,body.rail-hidden .layout{
    grid-template-columns:1fr;grid-template-rows:auto auto auto;overflow-y:auto;
  }
  .splitter{display:none}
  .rail{border-right:0;border-bottom:1px solid var(--line);max-height:236px}
  .editor{border-right:0;border-bottom:1px solid var(--line);overflow:visible}
  .grid{grid-template-columns:1fr}
  .paper-scroll{padding:14px}
  .appbar{flex-wrap:wrap;gap:10px}
  .appbar-sub{max-width:34ch}
  .welcome{padding:30px 20px 44px}
  .cat-cards{grid-template-columns:1fr}
}

/* Document styles live in letter.css. The preview page keeps its true 8.5in
   dimensions and is scaled to fit its column by fitPage() in app.js, so the
   preview is a real page rather than a reflowed approximation. */

/* Active category filter, shown at the top of the rail. */
.rail-filter{
  display:flex;align-items:center;gap:7px;width:calc(100% - 4px);margin:10px 2px 2px;
  font:inherit;font-size:11.5px;font-weight:600;letter-spacing:.02em;
  background:var(--brand-wash);color:var(--brand-dark);
  border:1px solid var(--brand-line);border-radius:99px;
  padding:5px 11px;cursor:pointer;text-align:left;
}
.rail-filter span{margin-left:auto;font-size:15px;line-height:1}
.rail-filter:hover{background:#DFEFED}

/* ─────────── Patient picker ─────────── */
.patient-bar{margin:0 0 16px}
.patient-pick{
  display:inline-flex;align-items:center;gap:8px;font:inherit;font-size:13px;font-weight:550;
  color:var(--ink-2);background:var(--surface);border:1px dashed var(--line);
  border-radius:var(--radius-sm);padding:8px 13px;cursor:pointer;
  transition:border-color .12s,color .12s,background .12s;
}
.patient-pick:hover{border-color:var(--brand-line);color:var(--brand-dark);background:var(--brand-wash)}
.patient-pick svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;
                  stroke-linejoin:round;stroke-linecap:round}

.patient-on{
  display:flex;align-items:center;gap:10px;background:var(--surface);
  border:1px solid var(--line);border-left:3px solid var(--brand);
  border-radius:var(--radius-sm);padding:9px 12px;box-shadow:var(--shadow-1);
}
.patient-on > span:not(.prow-av):not(.spacer){display:flex;flex-direction:column;min-width:0}
.patient-on-name{display:block;font-size:13px;font-weight:600;line-height:1.3}
.patient-on-meta{display:block;font-size:11.5px;color:var(--ink-3);margin-top:2px}
.patient-on .spacer{flex:1 1 auto}

.patient-search{padding:12px 20px 0}
.patient-search input{
  width:100%;font:inherit;font-size:13px;padding:8px 11px;
  border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--bg);color:var(--ink);
}
.patient-search input:focus{outline:none;border-color:var(--brand);background:var(--surface);
                            box-shadow:0 0 0 3px var(--brand-wash)}
#patientList{padding-top:10px}

.prow{
  display:flex;align-items:center;gap:11px;width:100%;text-align:left;font:inherit;
  border:0;background:transparent;cursor:pointer;padding:9px 10px;border-radius:var(--radius-sm);
}
.prow:hover{background:var(--line-2)}
.prow-av{
  flex:0 0 auto;width:31px;height:31px;border-radius:50%;display:grid;place-items:center;
  background:var(--brand-wash);color:var(--brand-dark);font-size:11.5px;font-weight:700;
  letter-spacing:.02em;
}
.prow > span:not(.prow-av){display:flex;flex-direction:column;min-width:0}
.prow-name{display:block;font-size:13px;font-weight:600;line-height:1.3}
.prow-meta{
  display:block;font-size:11.5px;color:var(--ink-3);margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.patient-note{
  font-size:12px;color:var(--warn);background:var(--warn-wash);
  border:1px solid var(--warn-line);border-radius:var(--radius-sm);
  padding:8px 11px;margin:0 0 10px;line-height:1.5;
}


/* ─────────── Narrow form column ───────────
   Keyed to the editor column, not the viewport. On a wide screen with the
   page dragged large, the form is the narrow thing — a viewport media query
   would never fire and the repeater cells would stay unusably thin. */
@container editor (max-width: 620px){
  .grid{grid-template-columns:1fr}
  .rep-cells{grid-template-columns:1fr !important}
  .rep-head{display:none}
  .rep-cell-l{display:block}
  .rep-row{
    grid-template-columns:1fr;gap:9px;position:relative;
    border:1px solid var(--line-2);border-radius:var(--radius-sm);
    padding:10px 11px 11px;background:var(--bg);
  }
  .rep-del{position:absolute;top:7px;right:7px;padding:3px 7px;font-size:14px;
           border-color:transparent;background:transparent}
  .rep{gap:9px}
  .editor-body{padding:18px 16px 44px}
}

/* Very narrow: the two-up dialog fields stack too. */
@container editor (max-width: 430px){
  .cat-cards{grid-template-columns:1fr}
}

/* ─────────── Email dialog ─────────── */
.email-note{
  margin:18px 0 0;font-size:12px;color:var(--ink-3);line-height:1.55;
  padding-top:13px;border-top:1px solid var(--line-2);
}
.email-note code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;
  background:var(--line-2);padding:1px 5px;border-radius:4px;color:var(--ink-2);
}