/* Clinical Note App — TEC colours from the roster app. Compact: more on one screen, less scrolling. */
:root {
  --teal: #61abb8;
  --teal-dark: #4d96a3;
  --teal-deep: #326e79;
  --pale: #e1eff2;
  --pale-2: #f0f7f9;
  --ink: #2a2a2c;
  --charcoal: #3f3f41;
  --grey: #58585b;
  --mute: #85868a;
  --line: #dcdfe0;
  --line-soft: #eceeef;
  --paper: #fbfcfc;
  --card: #ffffff;
  --warn: #a8661c; --warn-bg: #fdf3e3;
  --ok: #2f7d5f;   --ok-bg: #e9f5ef;
  --sans: Mulish, "Avenir Next", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --mono: "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --r: 8px;          /* squarer corners throughout */
  --tap: 38px;       /* still a comfortable touch target */
  --banner-h: 72px;  /* tall enough for the larger logo (Morgan) */
  --shadow: 0 1px 2px rgba(42,42,44,.05), 0 3px 10px rgba(42,42,44,.04);
  color-scheme: light;
  --edit-head-h: 0px;   /* the editor's sticky head, measured when a note is open (2.8.8) */
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0; font-family: var(--sans); font-size: 14px; line-height: 1.4;
  color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; }

/* --------------------------------------------------------------- banner */
/* Logo left, Clinical Note App in the middle, who and the buttons right (Morgan, after 2.8.2: "centred, larger, more
   visible"). The two sides share what's left equally, so the name is centred unless one side needs more room. */
.banner {
  position: sticky; top: 0; z-index: 30; height: var(--banner-h);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; padding: 0 18px;
  background: var(--card); border-bottom: 1px solid var(--line);
}
.brand { grid-column: 1; justify-self: start; display: flex; align-items: center; }
.brand-logo { height: 54px; width: auto; display: block; }
.brand-name { grid-column: 2; margin: 0; font-size: 26px; font-weight: 800; letter-spacing: .01em; color: var(--teal-deep); white-space: nowrap; }
.banner-end { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 14px; }
.banner-end .btn { white-space: nowrap; }
@media (max-width: 1000px) { .brand-name { font-size: 20px; } .banner-end { gap: 8px; } .who-label { display: none; } }
@media (max-width: 820px) { .brand-logo { height: 40px; } .brand-name { font-size: 18px; } .who-name { font-size: 15px; } }
.who { display: flex; align-items: baseline; gap: 8px; padding: 6px 12px; background: var(--pale); border-radius: var(--r); }
.who-label { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--teal-deep); font-weight: 700; }
.who-name { font-size: 18px; font-weight: 800; color: var(--teal-deep); line-height: 1.15; white-space: nowrap; }
.mock-strip {
  padding: 3px 18px; font-size: 12px; font-weight: 600; text-align: center;
  color: var(--warn); background: var(--warn-bg); border-bottom: 1px solid #f1dfc0;
}

/* -------------------------------------------------------------- buttons */
.btn {
  min-height: var(--tap); padding: 7px 14px; font-weight: 700; border-radius: var(--r);
  border: 1px solid transparent; cursor: pointer; transition: background .12s, border-color .12s;
}
.btn-sm { min-height: 30px; padding: 4px 10px; font-size: 12.5px; }
.btn-primary { background: var(--teal-dark); color: #fff; }
.btn-primary:hover { background: var(--teal-deep); }
.btn-quiet { background: var(--card); color: var(--grey); border-color: var(--line); }
.btn-quiet:hover { border-color: var(--teal); color: var(--teal-dark); }
.btn-add { background: var(--pale-2); color: var(--teal-deep); border: 1px dashed var(--teal); }
.btn-add:hover { background: var(--pale); }
/* Adding a tooth in Clinical and Radiographic: easy to see and tap, the same colour as Copy note (Morgan, after 2.1). */
.btn-add-tooth { min-height: 44px; margin-top: 6px; padding: 8px 22px; font-size: 15px; font-weight: 800; }
.btn-danger { background: var(--card); color: #b03a4b; border-color: #e3b7be; }
.btn-danger:hover { background: #b03a4b; color: #fff; border-color: #b03a4b; }
.same-patient { display: flex; align-items: center; gap: 6px; margin: 12px 0 0; font-weight: 700; }
.same-patient input { width: 18px; height: 18px; }
.btn-x {
  width: 28px; height: 28px; border-radius: 6px; border: 1px solid var(--line);
  background: var(--card); color: var(--mute); cursor: pointer; font-size: 15px; line-height: 1;
}
.btn-x:hover { color: #b03a4b; border-color: #b03a4b; }
/* My drafts: a red circle with a white ✕ in place of the Delete button (Morgan, 2.12.3, filled in 2.12.5) */
/* The same height as the Draft badge beside it (Morgan, 2.12.7): 12px text and 2px padding, so 19px either way. */
.btn-x-red { width: 19px; height: 19px; border-radius: 50%; background: #b03a4b; border-color: #b03a4b;
  color: #fff; font-weight: 800; font-size: 12px; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.btn-x-red:hover { background: #8f2e3d; border-color: #8f2e3d; color: #fff; }
button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--teal); outline-offset: 1px; }

/* --------------------------------------------------------------- drafts */
.page { max-width: 1100px; margin: 0 auto; padding: 18px 18px 48px; }
.page-head { display: flex; align-items: flex-end; gap: 14px; margin-bottom: 12px; }
.page-head h1 { margin: 0 auto 0 0; font-family: var(--serif); font-size: 26px; font-weight: 600; }
.table-wrap { overflow-x: auto; background: var(--card); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); }
table.drafts { width: 100%; border-collapse: collapse; min-width: 760px; }
.drafts th { text-align: left; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--grey); padding: 9px 12px; border-bottom: 1px solid var(--line); }
.drafts td { padding: 10px 12px; border-bottom: 1px solid var(--line-soft); }
.drafts tr:last-child td { border-bottom: 0; }
.drafts tbody tr { cursor: pointer; }
.drafts tbody tr:hover { background: var(--pale-2); }
.drafts .pt { font-weight: 700; }
/* Bulk delete (after 2.7.2): over the Delete buttons, which become tick boxes; tapping a row ticks it */
.my-drafts th, .my-drafts td { white-space: nowrap; } /* My drafts only: Accounts and the day sheet table wrap */
.my-drafts td.pt { white-space: normal; }
.my-drafts .del-col { width: 200px; } /* the same in both modes, so the columns don't jump */
.my-drafts th.del-col { text-transform: none; letter-spacing: normal; }
.bulk-head { display: flex; align-items: center; gap: 6px; }
.drafts .pick-box { width: 20px; height: 20px; margin: 0 0 0 4px; vertical-align: middle; accent-color: #b03a4b; cursor: pointer; }
.drafts tbody tr.picked { background: #fdeef0; }
/* Column headings sort My drafts (after 2.8.2): the heading is the button; faint arrows until it's the sorted column */
.my-drafts th.sortable { padding: 0; }
.sort-btn { display: flex; align-items: center; gap: 6px; width: 100%; padding: 9px 12px; border: 0; background: none; cursor: pointer;
  text-align: left; text-transform: inherit; letter-spacing: inherit; }
.sort-btn:hover { color: var(--teal-deep); }
.sort-arrow { display: inline-flex; flex-direction: column; gap: 2px; }
.sort-arrow::before, .sort-arrow::after { content: ''; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; opacity: .3; }
.sort-arrow::before { border-bottom: 5px solid currentColor; }
.sort-arrow::after { border-top: 5px solid currentColor; }
.my-drafts th[aria-sort] { color: var(--teal-deep); background: var(--pale-2); }
.my-drafts th[aria-sort="ascending"] .sort-arrow::before, .my-drafts th[aria-sort="descending"] .sort-arrow::after { opacity: 1; }
.my-drafts th[aria-sort="ascending"] .sort-arrow::after, .my-drafts th[aria-sort="descending"] .sort-arrow::before { opacity: 0; }
.drafts.picking tbody tr:hover { background: #fbe3e7; }
.btn-danger-solid:disabled { opacity: .45; cursor: default; }
/* Upload day sheet next to My drafts, coloured like + New note (Morgan, after 2.7.3) */
.drafts-head { align-items: center; }
.drafts-head h1 { margin-right: 4px; }
.drafts-head .page-actions { margin-left: auto; }
.badge { display: inline-block; padding: 2px 8px; border-radius: 5px; font-size: 12px; font-weight: 700; }
.badge-draft { background: var(--pale); color: var(--teal-deep); }
.badge-copied { background: var(--ok-bg); color: var(--ok); }
.muted { color: var(--mute); }
.fineprint { margin: 10px 2px 0; font-size: 12.5px; color: var(--mute); }

/* ------------------------------------------------------------ new note */
.modal { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 20px; background: rgba(42,42,44,.35); }
.modal-card { width: 100%; max-width: 520px; padding: 20px; background: var(--card); border-radius: 12px; box-shadow: 0 10px 40px rgba(0,0,0,.18); }
.modal-card h2 { margin: 0 0 12px; font-family: var(--serif); font-size: 22px; font-weight: 600; }
.kind-grid { display: grid; gap: 8px; }
.kind-btn { display: grid; gap: 2px; text-align: left; padding: 12px 14px; background: var(--card); border: 1.5px solid var(--line); border-radius: var(--r); cursor: pointer; }
.kind-btn:hover { border-color: var(--teal); background: var(--pale-2); }
.kind-btn b { font-size: 16px; }
.kind-btn span { font-size: 13px; color: var(--grey); }
.kind-btn:disabled { opacity: .5; cursor: default; background: var(--paper); }
.add-tx { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.add-tx .btn { min-height: 44px; padding: 8px 20px; font-size: 15px; }

/* --------------------------------------------------------------- editor */
.editor { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 42%); gap: 16px; max-width: 1560px; margin: 0 auto; padding: 4px 18px 60px; }
/* The name, ← My drafts and the section links stay put while the page scrolls (Morgan, 2.8.8) */
.edit-sticky { position: sticky; top: var(--banner-h); z-index: 24; background: var(--paper); box-shadow: 0 6px 10px -8px rgba(42, 42, 44, .45); }
.edit-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; max-width: 1560px; margin: 0 auto; padding: 8px 18px 0; }
.edit-head h1 { margin: 0; font-family: var(--serif); font-size: 22px; font-weight: 600; }
/* Back to the list: as tall as the name beside it (Morgan, 2.8.8: "larger, in line with the patient's name"),
   and light teal and larger again (Morgan, 2.12.4) */
.btn-back { min-height: 48px; padding: 10px 22px; font-size: 16.5px; font-weight: 800;
  background: var(--pale); color: var(--teal-deep); border-color: var(--teal); }
.btn-back:hover { background: var(--teal); color: #fff; border-color: var(--teal); }
.kind-tag { padding: 2px 8px; border-radius: 5px; background: var(--charcoal); color: #fff; font-size: 12px; font-weight: 700; }
/* The template tag changes the template (Morgan, 2.13) */
.kind-change { border: 0; cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; gap: 5px; min-height: 24px; }
.kind-change:hover { background: var(--teal-deep); }
.kind-change .caret { font-size: 10px; opacity: .8; }
.kind-btn.on { border-color: var(--teal); background: var(--pale); }
.save-state { font-size: 12px; color: var(--mute); margin-left: auto; }

.jump { display: flex; gap: 5px; overflow-x: auto; max-width: 1560px; margin: 0 auto; padding: 6px 18px; background: var(--paper); scrollbar-width: none; }
.jump a { flex: none; padding: 4px 10px; border-radius: 6px; border: 1px solid var(--line); background: var(--card); color: var(--grey); font-size: 12.5px; font-weight: 700; text-decoration: none; }
.jump a:hover { border-color: var(--teal); color: var(--teal-dark); }

.panels { display: grid; gap: 10px; align-content: start; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px 12px; box-shadow: var(--shadow); scroll-margin-top: calc(var(--banner-h) + var(--edit-head-h) + 8px); }
.card > h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 14px; font-weight: 800; letter-spacing: .02em; }
.card > h2 .hint { font-size: 12px; font-weight: 600; color: var(--mute); letter-spacing: 0; }
.card > h2 .right { margin-left: auto; }
.card.tx { border-left: 4px solid var(--teal); }
.sub { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line-soft); }
.sub-title { margin: 0 0 4px; font-size: 11.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--grey); }

.row { position: relative; padding: 8px 10px; margin-bottom: 8px; border: 1px solid var(--line-soft); border-radius: var(--r); background: var(--pale-2); }
.row > .btn-x { position: absolute; top: 8px; right: 8px; }

.field-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px 10px; margin-top: 4px; }
.field { display: grid; gap: 2px; }
.field label, .lbl { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--grey); }
input[type=text], input[type=number], input[type=url], input:not([type]), textarea {
  width: 100%; min-height: var(--tap); padding: 7px 10px; font: inherit; color: var(--ink);
  background: var(--card); border: 1px solid var(--line); border-radius: 6px;
}
textarea { resize: vertical; min-height: 38px; line-height: 1.4; }
.upper { text-transform: uppercase; }
input.invalid { border-color: #b03a4b; background: #fdeef0; }
.field-error { min-height: 0; font-size: 12px; font-weight: 700; color: #b03a4b; }
.field-error:empty { display: none; }
.typebox { margin-top: 6px; }
.typebox textarea { background: #fffef9; border-style: dashed; }
.typebox textarea:focus { border-style: solid; }
textarea.rfr-box { height: 180px; min-height: 120px; overflow-y: auto; resize: vertical; font-size: 14.5px; line-height: 1.5; background: #fffef9; }
.typebox-large textarea { min-height: 60px; font-size: 14.5px; line-height: 1.45; }
/* Relevant MH is the long one, Occupation a single line (Morgan, 2.10.1) */
.field > .typebox-large textarea { min-height: 96px; }
input.one-line { background: #fffef9; border-style: dashed; }
/* The Tx plan discussion is one box now, a line per bullet (Morgan, 2.10.1) */
.points-box { min-height: 110px; }
/* A gap between groups of chips, e.g. the clamps in Morgan's order (2.11) */
.chip-gap { width: 14px; }
input.one-line:focus { border-style: solid; }
/* Next patient sits beside Copy note, above the note (Morgan, 2.10.1) */
.next-btn { min-height: 46px; padding: 8px 16px; font-size: 14.5px; border-radius: var(--r); }
.next-btn[hidden] { display: none; }

/* ----------------------------------------------------------------- chips */
.chips { display: flex; flex-wrap: wrap; gap: 5px; margin: 4px 0; }
.chips + .chips { margin-top: 0; }
.chip-label { width: 100%; margin: 2px 0 -1px; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); }
.chip {
  position: relative; min-height: 34px; padding: 5px 11px; border-radius: 6px;
  border: 1.5px solid var(--line); background: var(--card); color: var(--charcoal);
  font-weight: 700; font-size: 13.5px; cursor: pointer; user-select: none; -webkit-user-select: none;
  touch-action: manipulation; transition: background .1s, border-color .1s, transform .06s;
}
.chip:hover { border-color: var(--teal); }
.chip:active { transform: scale(.97); }
.chip.used { border-color: var(--teal); background: var(--pale-2); }
.chip.on { background: var(--teal-dark); border-color: var(--teal-dark); color: #fff; }
.chip:disabled { opacity: .3; cursor: not-allowed; transform: none; border-style: dashed; }
.chip.small { min-height: 30px; padding: 3px 9px; font-size: 12.5px; font-weight: 600; }
.chip.big { min-height: var(--tap); padding: 6px 13px; font-size: 14.5px; }
.chip .n { position: absolute; top: -6px; right: -5px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 4px; background: var(--teal-deep); color: #fff; font-size: 10.5px; line-height: 17px; }
.chip.preset b { font-size: 15px; margin-right: 2px; }
.chip.preset small { margin-left: 6px; font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; opacity: .7; }

.tokens { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 2px 0 4px; padding: 4px 6px; border-radius: 6px; background: var(--pale); }
.tokens .lbl { margin-right: 3px; color: var(--teal-deep); }
.token { display: inline-flex; align-items: center; gap: 1px; padding: 1px 2px 1px 8px; border-radius: 5px; background: var(--card); border: 1px solid #c5dfe5; font-size: 13px; font-weight: 700; }
.token button { width: 22px; height: 22px; border: 0; background: none; color: var(--mute); cursor: pointer; font-size: 15px; border-radius: 4px; }
.token button:hover { background: var(--pale); color: #b03a4b; }

.tests { display: grid; gap: 0; margin-top: 6px; }
.test-row { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; }
.test-row .chips { margin: 2px 0; align-items: center; }
.test-row .chips .inline-input { margin-left: 4px; }
.test-name { flex-shrink: 0; min-width: 56px; padding-right: 4px; font-size: 12.5px; font-weight: 800; letter-spacing: .03em; color: var(--charcoal); }
.test-hint { font-size: 12px; color: var(--mute); }
.inline-input { width: 220px; }
/* Every Other box stands as tall as the chips in its row (Morgan, 2.8.9) */
.test-row .inline-input { min-height: 34px; padding: 5px 10px; }
.test-row:has(.chip.big) .inline-input { min-height: var(--tap); }
/* An Other box and its Add button stand as tall as the chips they sit with (Morgan, 2.8.9: "align them") */
.other-input { display: inline-flex; align-items: center; gap: 4px; }
.other-input .inline-input { min-height: var(--tap); padding: 5px 10px; }
.other-input .btn { min-height: var(--tap); padding: 5px 12px; font-size: 13px; }
.inline-input.narrow { width: 150px; }
.chip.surface { min-width: 42px; }
.surface-now { margin-left: 4px; padding: 3px 8px; border-radius: 5px; background: var(--charcoal); color: #fff; font-weight: 800; letter-spacing: .06em; }

.ref-search { position: relative; max-width: 520px; }
.ref-field { display: flex; align-items: stretch; }
.ref-title { display: grid; place-items: center; padding: 0 10px; border: 1px solid var(--line); border-right: 0; border-radius: 6px 0 0 6px; background: var(--pale); color: var(--teal-deep); font-weight: 800; }
.ref-field input { border-radius: 0 6px 6px 0; }
.ref-list { position: absolute; left: 0; right: 0; top: calc(100% + 2px); z-index: 25; display: grid; max-height: 320px; overflow: auto;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: 0 8px 24px rgba(0,0,0,.12); }
.ref-item { display: flex; justify-content: space-between; gap: 12px; padding: 8px 10px; border: 0; border-bottom: 1px solid var(--line-soft); background: none; text-align: left; cursor: pointer; }
.ref-item:last-child { border-bottom: 0; }
.ref-item span { color: var(--mute); white-space: nowrap; }
.ref-item:hover, .ref-item.on { background: var(--pale); }

.resto { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px 16px; margin: 6px 0 2px; }
.resto-chart { display: grid; justify-items: center; gap: 3px; }
.surface-chart { width: 104px; height: 104px; display: block; touch-action: manipulation; }
.surf { cursor: pointer; outline: none; }
.surf polygon { fill: var(--card); stroke: var(--grey); stroke-width: 1.5; transition: fill .1s; }
.surf text { font: 800 15px var(--sans); fill: var(--charcoal); text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.surf:hover polygon, .surf:focus-visible polygon { fill: var(--pale); }
.surf.other polygon { fill: var(--pale); stroke: var(--teal); }
.surf.other text { fill: var(--teal-deep); }
.resto-pill { display: inline-flex; align-items: stretch; border: 1.5px solid var(--line); border-radius: 6px; overflow: hidden; background: var(--card); }
.resto-pill.on { border-color: var(--teal-dark); }
.resto-pill-name { min-height: 34px; padding: 4px 10px; border: 0; background: none; font-weight: 700; font-size: 13px; cursor: pointer; }
.resto-pill.on .resto-pill-name { background: var(--teal-dark); color: #fff; }
.resto-pill-x { width: 28px; border: 0; border-left: 1px solid var(--line); background: none; color: var(--mute); cursor: pointer; font-size: 15px; }
.resto-pill-x:hover { color: #b03a4b; }
.surf.on polygon { fill: var(--teal-dark); stroke: var(--teal-deep); }
.surf.on text { fill: #fff; }
.surface-chart.off { opacity: .35; }
.surface-chart.off .surf { cursor: default; }
.resto-code { min-width: 52px; padding: 1px 8px; border-radius: 5px; background: var(--charcoal); color: #fff; font-size: 12.5px; font-weight: 800; letter-spacing: .06em; text-align: center; }
.resto-types { display: grid; align-content: start; gap: 0; min-width: 0; flex: 1 1 260px; }
.resto-types .chips { margin: 2px 0; }
.chip-label.inline { width: auto; margin: 0 4px 0 0; }

.points { display: grid; gap: 4px; margin: 6px 0; }

.trauma-grid { display: grid; grid-template-columns: 40px repeat(6, minmax(40px, 52px)); gap: 3px; justify-content: start; margin-bottom: 6px; }
.grid-label { display: grid; place-items: center end; padding-right: 6px; font-size: 11.5px; font-weight: 800; color: var(--grey); }
.grid-cell, .grid-tooth { min-height: 34px; border-radius: 5px; border: 1px solid var(--line); background: var(--card); font-weight: 800; font-size: 14px; cursor: pointer; touch-action: manipulation; }
.grid-cell.mid, .grid-tooth.mid { margin-left: 6px; }
.grid-cell.has { background: var(--pale); border-color: var(--teal); color: var(--teal-deep); }
.grid-cell.v-neg { background: #fdeef0; border-color: #e3b7be; color: #b03a4b; }
.grid-cell.v-na { background: var(--paper); color: var(--mute); font-size: 11px; }
.grid-tooth { display: flex; align-items: center; justify-content: center; cursor: default; font-size: 15px; background: var(--charcoal); color: #fff; border-color: var(--charcoal); }
.grid-tooth.upper { border-bottom: 3px solid var(--grey); }
.grid-tooth.lower { border-top: 3px solid var(--grey); }
.trauma-notes { display: grid; gap: 4px; }
.trauma-table { display: grid; gap: 4px; }
.trauma-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 4px 8px; border: 1px solid var(--line-soft); border-radius: var(--r); background: var(--pale-2); }
.trauma-row.all { background: var(--pale); border-style: dashed; }
.trauma-tooth { min-width: 40px; font-size: 17px; font-weight: 800; }
.trauma-test { display: inline-flex; align-items: center; gap: 4px; }
.trauma-test .lbl { color: var(--charcoal); }
.trauma-test .chips { margin: 0; }
.trauma-note { flex: 1 1 160px; min-height: 34px; padding: 5px 8px; }

/* ---------------------------------------------------------- tooth picker */
.tooth { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 4px; }
/* The symptom beside the tooth number on a treatment note (Morgan, 2.8.4): the tooth on the left, the symptom chips filling
   what's left and wrapping within it. Phones and the open tooth grid put the chips below instead. */
.tooth-symptom { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 4px 16px; }
.tooth-symptom > .tooth { flex: 0 0 auto; margin-bottom: 0; }
.tooth-symptom > .chips { flex: 1 1 210px; align-items: center; }
@media (max-width: 700px) { .tooth-symptom > .chips { flex-basis: 100%; } }
.tooth-now { display: grid; place-items: center; min-width: 52px; height: 40px; padding: 0 8px; border-radius: var(--r); background: var(--charcoal); color: #fff; font-size: 21px; font-weight: 800; font-variant-numeric: tabular-nums; }
.tooth-now.empty { background: var(--card); color: var(--mute); border: 1.5px dashed var(--line); font-size: 13px; font-weight: 700; }
.tooth-pick { display: grid; gap: 4px; }
.tooth-rowline { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.tooth-rowline .lbl { width: 72px; }
.tbtn { width: 38px; height: 38px; border-radius: 6px; border: 1.5px solid var(--line); background: var(--card); font-size: 16px; font-weight: 800; cursor: pointer; touch-action: manipulation; }
.tbtn:hover { border-color: var(--teal); }
.tbtn.on { background: var(--teal-dark); border-color: var(--teal-dark); color: #fff; }
.tbtn:disabled { opacity: .35; cursor: default; }
.tbtn.quick { width: auto; padding: 0 10px; background: var(--pale); border-color: #c5dfe5; color: var(--teal-deep); }
/* Quadrant and tooth rows share one grid (Morgan): each quadrant button is two tooth buttons wide, so 1–4 sit evenly over 1–8. */
.tooth-grid { display: grid; grid-template-columns: 72px repeat(8, 38px) auto; justify-content: start; }
.tooth-grid .tbtn { width: auto; }
.tooth-grid .tbtn.quad { grid-column: span 2; }
.tooth-grid > .btn { justify-self: start; margin-left: 4px; }

/* --------------------------------------------------------------- canals */
.canal-table { width: 100%; border-collapse: separate; border-spacing: 0 3px; margin-top: 4px; }
.canal-table th { text-align: left; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--grey); padding: 0 5px; }
.canal-table td { padding: 0 3px; }
.canal-table tr.active td { background: var(--pale); }
.canal-table tr.active td:first-child { border-radius: 6px 0 0 6px; }
.canal-table tr.active td:last-child { border-radius: 0 6px 6px 0; }
.canal-table input { min-height: 34px; padding: 5px 8px; }
.canal-table .c-name { width: 84px; }
.canal-table .c-len { width: 84px; }
.len-step { display: inline-flex; align-items: center; gap: 3px; }
.step-btn { width: 34px; height: 34px; border-radius: 6px; border: 1.5px solid var(--line); background: var(--card); font-size: 18px; font-weight: 800; cursor: pointer; touch-action: manipulation; }
.step-btn:hover { border-color: var(--teal); }
.step-btn:active { background: var(--pale); }
.len-wrap { position: relative; display: inline-block; }
.len-wrap input { padding-right: 32px; }
.len-wrap span { position: absolute; right: 9px; top: 50%; transform: translateY(-50%); color: var(--mute); font-size: 12.5px; pointer-events: none; }
.canal-help { margin: 2px 0 2px; font-size: 12.5px; color: var(--grey); }

.la-row { display: grid; gap: 2px; }
.tag-group + .tag-group { margin-top: 8px; padding-top: 6px; border-top: 1px solid var(--line-soft); }
/* Dental dam on the left, bite block in the space on the right (Morgan, 1.3); stacked when narrow. */
/* An Other box at the end of a chip row (dam, procedure, LA), as tall as the chips beside it */
.chips .chip-other { flex: 1 1 72px; width: auto; min-width: 72px; max-width: 150px; min-height: var(--tap); padding: 4px 8px; }
.chips .chip-other.regular { min-height: 34px; }
.dam-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 20px; align-items: start; }
.bite-block { padding-left: 16px; border-left: 1px solid var(--line-soft); }
@media (max-width: 1100px) { .dam-grid { grid-template-columns: minmax(0, 1fr); } .bite-block { padding-left: 0; border-left: 0; } }
.la-n { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.la-n input { width: 56px; min-height: 34px; padding: 5px 4px; text-align: center; font-size: 15px; font-weight: 700; }

.quote-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--line-soft); }
.quote-line .t { font-size: 17px; font-weight: 800; width: 34px; }
.quote-line .kind { color: var(--grey); width: 76px; }
.quote-line input { width: 110px; }
.empty-note { margin: 0; padding: 7px 10px; border-radius: 6px; background: var(--pale-2); color: var(--grey); font-size: 13px; }

/* --------------------------------------------------------------- preview */
.preview-col { position: sticky; top: calc(var(--banner-h) + var(--edit-head-h) + 8px); align-self: start; display: grid; gap: 10px; max-height: calc(100vh - var(--banner-h) - var(--edit-head-h) - 16px); overflow: auto; padding-bottom: 4px; }
.preview-card { background: var(--card); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); }
/* Copy note and Next patient stay put while the note scrolls (Morgan, 2.12.2). The card can't hide its overflow for
   that to work, so the corners are rounded on the top and foot rows instead. */
.preview-top { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 10px; padding: 8px 12px;
  border-bottom: 1px solid var(--line); background: var(--pale-2); border-radius: 9px 9px 0 0; }
.preview-top .lbl { margin-right: auto; }
.copy-btn { min-height: 46px; padding: 8px 22px; font-size: 16.5px; border-radius: var(--r); }
.copy-btn.done { background: var(--ok); }
.preview-foot { display: flex; justify-content: flex-end; padding: 8px 12px; border-top: 1px solid var(--line-soft); background: var(--pale-2); border-radius: 0 0 9px 9px; }
.status-line { padding: 5px 12px; font-size: 12.5px; color: var(--grey); border-bottom: 1px solid var(--line-soft); }
textarea.note {
  display: block; width: 100%; min-height: 360px; margin: 0; padding: 12px 14px 16px; border: 0; border-radius: 0;
  resize: none; overflow: hidden; background: var(--card); white-space: pre-wrap; overflow-wrap: anywhere; tab-size: 8;
  font-family: var(--mono); font-size: 12.5px; line-height: 1.5; color: var(--ink);
}
textarea.note:focus { outline: none; box-shadow: inset 0 0 0 2px var(--pale); }
.edited { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 6px 12px; font-size: 12.5px; color: var(--warn); background: var(--warn-bg); border-bottom: 1px solid #f1dfc0; }

/* AI under the note (after 2.5): each dentist's own buttons, copy the note and open the AI in a new tab. */
.ai-bar { padding: 8px 12px 10px; border-top: 1px solid var(--line-soft); background: var(--card); }
.ai-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ai-hint { margin-right: auto; font-size: 12px; color: var(--mute); }
.ai-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ai-btn {
  display: inline-flex; align-items: center; gap: 7px; min-height: 42px; padding: 6px 14px; max-width: 100%;
  border: 1.5px solid var(--line); border-radius: var(--r); background: var(--card); color: var(--ink);
  text-decoration: none; font-size: 15px; cursor: pointer; transition: border-color .12s, background .12s;
}
.ai-btn:hover { border-color: var(--teal); background: var(--pale-2); }
.ai-btn:active { transform: scale(.98); }
.ai-prompt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--mono); font-size: 12.5px; color: var(--grey); }
.ai-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--teal); }
.ai-claude .ai-dot, .ai-dot.ai-claude { background: #d97757; }
.ai-chatgpt .ai-dot, .ai-dot.ai-chatgpt { background: #10a37f; }
.ai-gemini .ai-dot, .ai-dot.ai-gemini { background: #4285f4; }
.ai-copilot .ai-dot, .ai-dot.ai-copilot { background: #7a5af8; }
.ai-msg { margin: 8px 0 0; padding: 6px 10px; border-radius: 6px; font-size: 12.5px; font-weight: 600; color: var(--warn); background: var(--warn-bg); }
/* Claude writing the report under the note (after 2.6) */
.ai-writers { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.ai-write { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 8px 18px; font-size: 16px; }
.ai-write .ai-dot { background: #fff; }
.ai-write .ai-prompt { color: rgba(255,255,255,.85); }
.ai-write:disabled { opacity: .55; cursor: default; }
.ai-report-head { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.ai-report-head .lbl { margin-right: auto; }
.copy-report { min-height: 38px; padding: 6px 16px; }
.ai-report {
  margin-top: 6px; padding: 12px 14px; min-height: 120px; border: 1px solid var(--line); border-radius: var(--r);
  background: #fffef9; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; line-height: 1.5; color: var(--ink);
}
.ai-report:focus { outline: 2px solid var(--teal); outline-offset: 1px; }
.ai-report b { font-weight: 800; }
.ai-chat { display: grid; gap: 6px; margin-top: 10px; }
.ai-turn p { margin: 0; font-size: 13px; line-height: 1.45; white-space: pre-wrap; }
.ai-you { color: var(--grey); }
.ai-said { margin-top: 2px !important; padding-left: 10px; border-left: 3px solid #d97757; color: var(--ink); }
.ai-ask { display: flex; align-items: flex-end; gap: 6px; margin-top: 8px; }
.ai-ask .ai-ask-box { flex: 1; min-height: 38px; }
.ai-list .ai-hint { align-self: center; margin-right: 2px; }
/* Claude's daily limit (2.8) */
.ai-used { font-size: 12px; font-weight: 700; color: var(--grey); white-space: nowrap; }
.ai-used.full { color: #b03a4b; }
.limit-row { margin-top: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--pale-2); }
.limit-row label { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.limit-row .fineprint { margin: 6px 0 0; }
.limit-row .limit-box { width: 80px; min-height: 34px; padding: 4px 8px; font: inherit; border: 1px solid var(--line); border-radius: 6px; }
.modal-ai { max-width: 600px; max-height: calc(100vh - 40px); overflow-y: auto; }
.modal-ai > p { margin-bottom: 8px; }
.ai-rows { display: grid; gap: 8px; margin-top: 12px; }
.ai-row { display: grid; gap: 6px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--pale-2); }
.ai-row-head { display: flex; align-items: center; gap: 8px; }
.ai-row-head b { margin-right: auto; font-size: 15px; }
.ai-row textarea { width: 100%; resize: vertical; font-family: var(--mono); font-size: 13px; }

.bottom-bar { display: none; }

.toast { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 90; padding: 9px 16px; border-radius: var(--r); background: var(--charcoal); color: #fff; font-weight: 700; box-shadow: 0 6px 24px rgba(0,0,0,.2); }

@media (max-width: 700px) {
  .editor { grid-template-columns: minmax(0, 1fr); padding-bottom: 90px; }
  .preview-col { position: static; max-height: none; overflow: visible; }
  .preview-top { position: static; } /* phones scroll the page, and the bottom bar has Copy note */
  .bottom-bar {
    display: flex; gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); background: var(--card); border-top: 1px solid var(--line);
  }
  .bottom-bar .btn { flex: 1; }
}
@media (max-width: 700px) {
  :root { --banner-h: 50px; }
  /* Phones keep the smaller logo and no app name; the dentist's name gives way instead of sliding under it. */
  .banner { grid-template-columns: auto minmax(0, 1fr); gap: 8px; padding: 0 10px; }
  .banner-end { grid-column: 2; justify-self: stretch; justify-content: flex-end; min-width: 0; }
  .banner-end .btn { white-space: normal; }
  .brand-logo { height: 30px; }
  .who { min-width: 0; }
  .who-name { overflow: hidden; text-overflow: ellipsis; }
  .brand-name, .who-label { display: none; }
  .tooth .tooth-pick { flex: 1 1 100%; }
  .tooth-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); max-width: 360px; }
  .tooth-grid .lbl, .tooth-grid > .btn { grid-column: 1 / -1; margin-left: 0; }
  .who-name { font-size: 15px; }
  .page, .editor { padding-left: 10px; padding-right: 10px; }
  .edit-sticky { position: static; box-shadow: none; }
  .editor-page { --edit-head-h: 0px; }
  .edit-head, .jump { padding-left: 10px; padding-right: 10px; }
}

/* Are-you-sure pop-up */
.modal-card p { margin: 0; line-height: 1.45; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.btn-danger-solid { background: #b03a4b; color: #fff; border-color: #b03a4b; }
.btn-danger-solid:hover { background: #8f2e3d; border-color: #8f2e3d; }

/* Review teeth: a pill per tooth with its own remove button */
.tooth-block { display: grid; gap: 6px; }
.tooth-pill .resto-pill-name { display: inline-flex; align-items: center; cursor: default; font-size: 16px; font-weight: 800; }

/* Language row (Morgan): room above and below, so it doesn't run into the DOB and Relevant MH boxes */
.lang-row { margin: 10px 0 12px; }

/* ---------------------------------------------------------------- the app (Phase 1) */
.loading { padding: 40px 20px; color: var(--mute); text-align: center; }
.save-state.bad { color: #b03a4b; font-weight: 700; }
.conflict { position: sticky; top: calc(var(--banner-h) + var(--edit-head-h) + 4px); z-index: 22; box-shadow: 0 4px 14px rgba(0,0,0,.08); display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 10px; padding: 10px 12px;
  border: 1.5px solid #e3b7be; border-radius: var(--r); background: #fdeef0; color: #7a1f2e; }
.row-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.accounts td { vertical-align: middle; }
.invite-card { margin-top: 16px; }
.invite-card select { width: 100%; min-height: 38px; }

/* Login */
.login-body { min-height: 100vh; }
.login-wrap { display: grid; justify-items: center; gap: 12px; padding: 40px 16px; }
.login-card { width: 100%; max-width: 420px; padding: 24px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 6px 24px rgba(0,0,0,.06); }
.login-form { display: grid; gap: 8px; }
.login-form h1 { margin: 0 0 4px; font-family: var(--serif); font-size: 26px; font-weight: 600; }
.login-intro { margin: 0 0 6px; color: var(--charcoal); line-height: 1.45; }
.login-label { margin-top: 6px; font-size: 13px; font-weight: 800; }
.login-input { width: 100%; min-height: 44px; font-size: 16px; }
.login-btn { margin-top: 10px; min-height: 46px; font-size: 16px; }
.login-links { margin: 6px 0 0; text-align: center; }
.link-btn { border: 0; background: none; color: var(--teal-dark); font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; }
.login-foot { max-width: 420px; text-align: center; }

/* Trial links */
.trial-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 6px 0; }
.trial-row input { flex: 1 1 260px; min-height: 38px; }
.trial-result { margin-top: 8px; padding: 8px 10px; border: 1px dashed var(--line); border-radius: var(--r); }
.trial-link { font-family: Menlo, Consolas, monospace; font-size: 12px; }

/* Radiographic tooth model (2.0): the drawing on the left, everything else on the right */
.root-model { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 8px 18px; align-items: start; margin: 4px 0 8px; }
.rm-figure { display: grid; justify-items: center; gap: 4px; padding: 6px 6px 8px; background: var(--pale-2); border: 1px solid var(--line-soft); border-radius: var(--r); }
.rm-caption { font-size: 11px; font-weight: 800; color: var(--grey); text-align: center; }
.root-svg { width: 180px; height: auto; display: block; overflow: visible; }
.rm-tooth { fill: #fff; stroke: #85868a; stroke-width: 2; stroke-linejoin: round; }
.rm-chamber { fill: #e6eaeb; }
.rm-canal { fill: none; stroke-linecap: round; }
.rm-canal.none { stroke: #c3cccf; stroke-width: 2.5; stroke-dasharray: 3 5; }
.rm-canal.patent { stroke: #3f3f41; stroke-width: 3.5; }
.rm-canal.filled { stroke: var(--teal-deep); stroke-width: 7; }
.rm-apex.none { fill: none; stroke: #b8c2c5; stroke-width: 1.5; stroke-dasharray: 3 3; }
.rm-apex.normal { fill: none; stroke: #2f7d5f; stroke-width: 2.5; }
.rm-apex.lesion { fill: rgba(176, 58, 75, .22); stroke: #b03a4b; stroke-width: 2; stroke-dasharray: 5 3; }
.rm-hit { fill: none; stroke: transparent; stroke-width: 22; cursor: pointer; pointer-events: stroke; }
.rm-hit-apex { fill: transparent; cursor: pointer; }
.rm-hit:hover, .rm-hit-apex:hover { stroke: rgba(97, 171, 184, .25); }
.rm-label { font: 800 12px var(--sans); fill: var(--grey); text-anchor: middle; dominant-baseline: middle; }
.rm-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 10px; font-size: 11px; color: var(--grey); }
.rm-legend i { display: inline-block; vertical-align: middle; margin-right: 4px; }
.rm-legend .filled { width: 16px; height: 6px; border-radius: 3px; background: var(--teal-deep); }
.rm-legend .patent { width: 16px; height: 3px; background: #3f3f41; }
.rm-legend .normal { width: 10px; height: 10px; border-radius: 50%; border: 2px solid #2f7d5f; }
.rm-legend .lesion { width: 14px; height: 14px; border-radius: 50%; background: rgba(176, 58, 75, .22); border: 2px dashed #b03a4b; }
.rm-controls { display: grid; gap: 2px; min-width: 0; }
@media (max-width: 1100px) { .root-model { grid-template-columns: minmax(0, 1fr); } .rm-figure { justify-self: start; } }
.rm-hint { font-size: 11px; color: var(--mute); }
.rm-controls .test-name { min-width: 92px; }
.rm-controls .typebox { margin-top: 4px; }

/* ------------------------------------------------------- upload day sheet (Morgan, 2.2) */
.btn:disabled { opacity: .5; cursor: default; }
.page-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.notice { position: static; box-shadow: none; }
.modal-wide { max-width: 900px; max-height: calc(100vh - 40px); overflow-y: auto; }
.modal-wide > p { margin-bottom: 12px; }
.ds-pick { position: relative; overflow: hidden; }
.ds-file { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.ds-status { margin: 12px 0 8px !important; font-weight: 700; }
.ds-status:empty { display: none; }
.ds-status.bad { color: #b03a4b; }
.ds-days { margin: 0 0 10px; }
.ds-wrap { box-shadow: none; }
table.ds-table { min-width: 680px; }
.ds-table tbody tr { cursor: default; }
.ds-table tbody tr:hover { background: none; }
.ds-table td { vertical-align: middle; padding: 7px 10px; }
.ds-table input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--teal-dark); }
.ds-table select { min-height: 34px; }
.ds-table select.invalid { border-color: #b03a4b; background: #fdeef0; }
.ds-off td { color: var(--grey); }
.ds-taken td { color: var(--mute); background: var(--paper); }
.ds-warn { display: block; margin-top: 2px; }
.ds-hint { margin-right: auto; align-self: center; font-size: 13px; font-weight: 700; color: #b03a4b; }
@media (max-width: 700px) { .modal { padding: 8px; } .modal-actions { flex-wrap: wrap; } .ds-hint { flex: 1 1 100%; } }

/* The Chinese name reminder stands out a little (Morgan, after 2.4.1) */
.lang-hint.remind { font-weight: 800; color: var(--warn); }
/* …and from 2.10 it is a bar across the top of the Patient card, answered in a tap (Morgan: he never saw the small one) */
.lang-prompt { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 12px;
  padding: 10px 12px; border-radius: var(--r); background: var(--warn-bg); border: 1px solid var(--warn); }
.lang-prompt-text { font-weight: 800; color: var(--warn); }
.lang-prompt .chips { margin: 0; }
.lang-prompt[hidden] { display: none; } /* an author display: flex beats the browser's [hidden] rule */

/* Radiographic: canal and PA for all roots, then each canal, one line each (Morgan, after 2.4.1) */
.rm-row { flex-wrap: nowrap; gap: 2px 8px; }
.rm-row .test-name { min-width: 52px; }
.rm-row .chips { flex-wrap: nowrap; flex-shrink: 0; gap: 4px; margin: 2px 0; }
.rm-row .chips + .chips { padding-left: 6px; border-left: 1px solid var(--line); }
.rm-row .chip { white-space: nowrap; padding: 5px 8px; }
.test-hint.remind { font-weight: 800; color: var(--warn); }

/* --------------------------------------------------------------- apical surgery chart (2.8.1) */
/* Drawn in millimetres: stroke widths and font sizes below are in mm of the chart. */
.surgery-chart { margin: 6px 0 8px; padding: 6px 6px 4px; background: #fff; border: 1px solid var(--line-soft); border-radius: var(--r); }
.surgery-svg { display: block; width: 100%; height: auto; margin: 0 auto; overflow: visible; }
.sc-tooth { fill: #fff; stroke: #5d5e62; stroke-width: .26; stroke-linejoin: round; }
.sc-tooth.behind { fill: #f4f5f5; stroke: #a9adb0; stroke-width: .2; }
.sc-tooth.op { fill: var(--pale); stroke: var(--teal-deep); stroke-width: .4; }
.sc-cej { fill: none; stroke: #9a9ca0; stroke-width: .18; }
.sc-groove { fill: none; stroke: #9a9ca0; stroke-width: .16; stroke-linecap: round; }
.sc-gum { fill: rgba(222, 150, 160, .28); stroke: rgba(196, 110, 124, .55); stroke-width: .22; pointer-events: none; }
.sc-num { font: 800 2.3px var(--sans); fill: var(--charcoal); text-anchor: middle; dominant-baseline: middle; }
.sc-side { font: 700 1.5px var(--sans); fill: var(--mute); text-anchor: middle; dominant-baseline: middle; pointer-events: none; }
.sc-incision { fill: none; stroke: #b03a4b; stroke-width: .5; stroke-linecap: round; stroke-linejoin: round; }
/* A vertical with no level tapped yet: shown faint, as far as the sulcus, so the three dots read as choices (2.8.3) */
.sc-incision.guide { stroke-width: .3; stroke-dasharray: .8 .7; opacity: .5; }
.sc-level { font: 700 1.4px var(--sans); fill: var(--grey); text-anchor: start; dominant-baseline: middle; pointer-events: none; }
.sc-level.left { text-anchor: end; }
.surgery-svg.marking { cursor: crosshair; }
.sc-dot { fill: #fff; stroke: #5d5e62; stroke-width: .2; pointer-events: none; }
.sc-dot.end { fill: #b03a4b; stroke: #b03a4b; }
.sc-suture { fill: none; stroke: var(--ink); stroke-width: .42; stroke-linecap: round; pointer-events: none; }
.sc-hit { fill: transparent; cursor: pointer; }
.sc-hit:hover, .sc-hit:focus-visible { fill: rgba(97, 171, 184, .3); outline: none; }
.sc-hit-line { fill: none; stroke: transparent; stroke-width: 2.6; stroke-linecap: round; cursor: pointer; pointer-events: stroke; }
.sc-hit-line:hover, .sc-hit-line:focus-visible { stroke: rgba(97, 171, 184, .3); outline: none; }
.sc-caption { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; padding: 4px 4px 0; font-size: 12.5px; color: var(--grey); }

/* ---- The hub (2.14): the letter under the report, and the medical history forms ---- */
.btn-xs { min-height: 24px; padding: 2px 7px; font-size: 11.5px; }
.letter-bar { border-top: 2px solid var(--pale); }
.letter-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin-top: 8px; }
.letter-to { display: grid; gap: 6px; align-content: start; }
.letter-head-fields { display: grid; gap: 6px; align-content: start; }
.letter-address { width: 100%; min-height: 96px; font: 13px/1.35 var(--sans); padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; resize: vertical; }
.clinic-picked { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 6px 8px; border-radius: 6px; background: var(--pale-2); border: 1px solid var(--pale); }
.clinic-likely { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 6px; }
.clinic-results { display: grid; gap: 2px; margin-top: 4px; }
.clinic-hit { text-align: left; padding: 5px 8px; border: 1px solid var(--line-soft); border-radius: 6px; background: var(--card); font: 13px var(--sans); cursor: pointer; }
.clinic-hit:hover { border-color: var(--teal); background: var(--pale-2); }
.letter-films { margin-top: 10px; }
.film-drop { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; margin-top: 4px; padding: 10px; min-height: 64px;
  border: 2px dashed var(--line); border-radius: 8px; background: var(--paper); }
.film-drop.over { border-color: var(--teal); background: var(--pale-2); }
.film { display: grid; justify-items: center; gap: 2px; max-width: 120px; }
.film canvas { height: 84px; width: auto; border-radius: 4px; background: #000; }
.film-name { max-width: 116px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10.5px; color: var(--mute); }
.film-tools { display: flex; gap: 2px; }
.letter-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.letter-sent { font-size: 12.5px; font-weight: 700; color: var(--ok); }
.letter-msg { margin: 6px 0 0; font-size: 12px; color: var(--mute); }
.letter-msg:empty { display: none; }
.letter-pages { display: grid; gap: 8px; justify-items: center; margin-top: 8px; }
.letter-page { border: 1px solid var(--line); box-shadow: var(--shadow); background: #fff; }
.letter-send { max-width: 640px; }
.send-facts { width: 100%; border-collapse: collapse; margin-bottom: 8px; font-size: 13px; }
.send-facts th { width: 80px; padding: 3px 8px 3px 0; text-align: left; vertical-align: top; color: var(--grey); font-weight: 700; }
.send-facts td { padding: 3px 0; word-break: break-word; }
.letter-email { width: 100%; font: 13px/1.4 var(--sans); padding: 8px; border: 1px solid var(--line); border-radius: 6px; resize: vertical; }
.form-banner { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 8px;
  padding: 7px 10px; border-radius: 6px; font-size: 13px; background: var(--ok-bg); color: var(--ink); border: 1px solid #cfe7da; }
.forms-search { max-width: 320px; margin: 10px 0; }
table.forms { min-width: 560px; }
tr.row-link { cursor: pointer; }
tr.row-link:hover td { background: var(--pale-2); }
.form-detail { display: grid; gap: 12px; max-width: 760px; }
.form-mh { padding: 10px 12px; border-radius: 8px; background: var(--pale-2); border: 1px solid var(--pale); }
.form-mh p { margin: 4px 0 8px; font-size: 15px; font-weight: 600; }
.form-section h3 { margin: 0 0 4px; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--teal-deep); }
.form-rows { width: 100%; border-collapse: collapse; font-size: 14px; }
.form-rows th { width: 190px; padding: 4px 10px 4px 0; text-align: left; vertical-align: top; font-weight: 600; color: var(--grey); border-bottom: 1px solid var(--line-soft); }
.form-rows td { padding: 4px 0; border-bottom: 1px solid var(--line-soft); white-space: pre-wrap; word-break: break-word; }
.form-modal { max-width: 720px; max-height: 88vh; overflow: auto; }
@media (max-width: 900px) { .letter-grid { grid-template-columns: 1fr; } .form-rows th { width: 130px; } }