/* togetherMADE · the shell
 *
 * v6 draws a 393 × 852 phone sitting on a contact sheet. This is the layer
 * that makes it an actual phone: the frame fills the viewport, the sheet's
 * chrome goes, and the safe areas become real ones. Nothing here restyles a
 * component — every rule below is about the frame around them, so a v6 rebuild
 * cannot be undone by this file.
 */

:root {
  /* was 393 × 852 — a drawn iPhone. Now whatever the reader is holding.
     100dvh, not 100vh: on iOS Safari the toolbar makes vh lie, and this app's
     bottom tray is the exact thing that gets cut off when it does. */
  --app-shell-width: 100%;
  --app-shell-height: 100dvh;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overscroll-behavior: none;          /* no rubber-band under a fixed tray */
  background: var(--semantic-color-contrast-light, #fff);
}

body {
  /* The sheet let text be selected because it was a specimen to read. An app
     is a thing to touch, and a long-press that selects a case title instead of
     opening the menu reads as broken. */
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* text you would actually want to copy — a dose, a reference — stays selectable */
.tm-answer__t, .tm-item__t, .tm-post__body, .tm-th__body, .ax-ans, .ax-ans * {
  -webkit-user-select: text;
  user-select: text;
}

/* ── the frame ────────────────────────────────────────────────────────── */
#stage { height: 100dvh; width: 100%; overflow: hidden; }

/* v6's `.scr` carried 30px of air above the phone because it sat on a sheet
   with a caption under it. There is no sheet now. */
.scr { padding-top: 0 !important; }
.scr > .scode { display: none !important; }

.aphone {
  width: 100% !important;
  height: 100dvh !important;
  max-width: none !important;
  border-radius: 0 !important;   /* it is the device now, not a picture of one */
  box-shadow: none !important;
  border: 0 !important;
}

/* On a tablet or a desktop browser, centre the phone rather than stretching a
   375-wide design across 1400px. The client will open this on a phone; anyone
   reviewing it will not. */
@media (min-width: 560px) {
  body { background: var(--tm-navy, #032E42); }
  #stage { display: flex; align-items: center; justify-content: center; }
  .scr.on { width: 393px; height: 852px; max-height: 100dvh; }
  .aphone {
    height: min(852px, 100dvh) !important;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .45) !important;
  }
}

/* ── fields the design drew, and the app has to make typeable ─────────── */
/* v6 draws a field as `<span class="dp-field__val">placeholder</span>` — it is
   a picture of an input. The boot pass swaps in a real one and gives it this
   class, so it inherits the drawn field's type and colour exactly. */
.tm-input {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  color: inherit;
  padding: 0;
}
.tm-input::placeholder { color: var(--semantic-color-text-neutral-subtle, #6B7C85); opacity: 1; }
.dp-field__control:focus-within { outline: 2px solid var(--tm-teal, #089799); outline-offset: 2px; }

/* ── the demo switcher ─────────────────────────────────────────────────── */
/* Deliberately plain. It is scaffolding for a demo, not part of the product,
   and dressing it up in the design system would blur that line. */
.tm-cast {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  background: var(--tm-navy, #032E42);
  color: #fff;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  font-family: var(--font-body, system-ui), system-ui, sans-serif;
  transform: translateY(calc(100% - 30px));
  transition: transform .22s ease;
}
.tm-cast.on { transform: translateY(0); }
.tm-cast__grip {
  height: 20px; display: flex; align-items: center; justify-content: center;
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255, 255, 255, .62); cursor: pointer;
}
.tm-cast__row { display: flex; gap: 6px; padding-top: 8px; }
.tm-cast__opt {
  flex: 1; min-width: 0; background: rgba(255, 255, 255, .09); color: #fff;
  border: 1px solid rgba(255, 255, 255, .22); padding: 8px 6px;
  font: inherit; font-size: 12px; line-height: 1.25; cursor: pointer; text-align: left;
}
.tm-cast__opt.on { border-color: var(--tm-teal-300, #9ED8D9); background: rgba(158, 216, 217, .18); }
.tm-cast__opt b { display: block; font-size: 12.5px; }
.tm-cast__opt span { color: rgba(255, 255, 255, .6); font-size: 10.5px; }

/* ── boot and failure ──────────────────────────────────────────────────── */
#boot {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center; flex-direction: column;
  gap: 14px; background: var(--tm-navy, #032E42); color: #fff;
  font-family: system-ui, sans-serif; text-align: center; padding: 32px;
}
#boot.gone { display: none; }
#boot .bar { width: 132px; height: 2px; background: rgba(255, 255, 255, .2); overflow: hidden; }
#boot .bar i { display: block; height: 100%; width: 40%; background: #9ED8D9; animation: bootslide 1.1s infinite ease-in-out; }
@keyframes bootslide { 0% { transform: translateX(-100%) } 100% { transform: translateX(330%) } }
#boot p { margin: 0; font-size: 13.5px; color: rgba(255, 255, 255, .68); max-width: 30ch; line-height: 1.5; }
#boot .err { color: #FBB044; font-size: 14px; }
@media (prefers-reduced-motion: reduce) { #boot .bar i { animation: none; width: 100% } }

/* A message the app puts over a screen — a failed sign-in, a queued write.
   The design system has no toast; this is the app's, and it says so by being
   visibly not of it. */
.tm-toast {
  position: fixed; left: 12px; right: 12px; z-index: 120;
  /* clear of the nav tray — a message that lands on top of the tab bar
     covers the control the reader is most likely to reach for next */
  bottom: calc(104px + env(safe-area-inset-bottom, 0px));
  background: var(--tm-navy, #032E42); color: #fff;
  padding: 11px 14px; font-family: system-ui, sans-serif; font-size: 13.5px;
  line-height: 1.45; box-shadow: 0 8px 24px rgba(0, 0, 0, .3);
  opacity: 0; transform: translateY(8px); transition: opacity .18s, transform .18s;
}
.tm-toast.on { opacity: 1; transform: translateY(0); }
.tm-toast--bad { background: var(--tm-err, #AC0019); }

/* ── where the answer came from ───────────────────────────────────────────
   At the head of the trail rather than on the card: it is a statement about
   the relationship between the two, and it sits beside the anonymity note,
   which is the same kind of thing — a rule about this case, printed where it
   applies. */
.tm-trail__src {
  margin: 12px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--semantic-color-text-neutral-subtle, #5C7480);
}

/* ── the modification ─────────────────────────────────────────────────────
   The second of the answer card's two blocks, sitting below the controls that
   produce it. Separated with the same device the design already uses for
   `.tm-answer__flag` — a rule and some air, no panel and no alert colouring.
   A colleague disagreeing is normal practice, not an error state, and the
   amber-and-red vocabulary here belongs to urgency. */
.tm-answer__mod {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--semantic-color-border-neutral-subtle, #D6E0E3);
}
.tm-answer__modk {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--tm-gold, #A38450);
  margin-bottom: 6px;
}
.tm-answer__modt {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--semantic-color-text-neutral-bold, #14323F);
}

/* The lead and its controls are one group. Tightening the gap is what makes
   the buttons read as belonging to the text above rather than floating
   between the two blocks. */
.tm-answer__t + .tm-cta { margin-top: 14px; }

/* ── the Ask answer's detail ──────────────────────────────────────────────
   `.ax-lead` is display serif sized for one line — the drawn answer is a
   headline with structured metric blocks under it. A real answer carries a
   regimen in prose, and five sentences at that size is a wall nobody reads on
   a phone. The lead keeps the action; this carries the specifics, at the size
   the rest of the app reads at. */
.ax-detail {
  margin: 14px 0 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--semantic-color-text-neutral-bold, #14323F);
}

/* ── the phone is real now ─────────────────────────────────────────────────
 * Two pieces of contact-sheet furniture that stop making sense once this is
 * installed on an actual phone.
 *
 * `.astatus` draws a picture of a status bar — 9:41, full signal, full
 * battery. In standalone mode the REAL one sits in exactly that place, so the
 * app drew a second, wrong clock above the true one. Its 28px is given back to
 * the safe-area inset, which is the real thing's actual height on the actual
 * device — notch, island or neither.
 *
 * `.aphone *{cursor:crosshair}` is for inspecting a specimen, not using an app. */
.astatus { display: none !important; }

/* ── the frame is exactly the window, top and bottom ───────────────────────
 * There is no global `box-sizing: border-box` in this stylesheet, so padding
 * ADDS to a height. `.aphone` is `height: 100dvh`, and the padding-top I put
 * here yesterday made it 100dvh + the notch inset — which pushed its bottom
 * edge off the screen, taking the nav tray (position:absolute; bottom:0) with
 * it. That is the bottom navigation sitting below the bottom of the device.
 *
 * The padding is gone rather than corrected: it existed to clear a
 * `black-translucent` status bar, and the app now declares `default`, so iOS
 * reserves that space itself and the inset resolves to 0. border-box stays as
 * a guard, so that anything padded here in future comes out of the height
 * instead of growing past it. */
.aphone, .aphone * { box-sizing: border-box; }

/* ── one home indicator ────────────────────────────────────────────────────
 * `.hpill` is a 134×5 drawn home bar — the specimen's picture of the one iOS
 * draws itself, and on a real phone they sat one above the other. The space it
 * occupied is kept, but as the DEVICE's actual inset rather than a fixed 22px:
 * a phone with a home button needs none of it, and one without needs more than
 * 22px. The floor keeps the tray off the very edge on the older ones. */
.hpill { display: none !important; }

.ahome {
  height: max(env(safe-area-inset-bottom, 0px), 8px);
  min-height: max(env(safe-area-inset-bottom, 0px), 8px);
  padding: 0;
}

.aphone *, .aphone { cursor: auto; }
.aphone a, .aphone button, .aphone [data-goto], .aphone [role="button"] { cursor: pointer; }

/* ── tappable on a phone ───────────────────────────────────────────────────
 * iOS Safari only dispatches a click on a non-interactive element when the
 * element LOOKS interactive — cursor:pointer, an onclick attribute, or a
 * natively clickable tag. The master set `.aphone *{cursor:crosshair}` for
 * inspecting a contact sheet, which happened to satisfy that; replacing it
 * with cursor:auto quietly made every row built as a <div> untappable on the
 * one device that matters. Rows are divs because that is how they are drawn,
 * so the cursor is what has to say they are controls. */
.aphone .dp-list-row,
.aphone .dp-resrow,
.aphone .dp-scoperow,
.aphone .dp-chip,
.aphone .ax-p,
.aphone .ax-cmopt,
.aphone .dp-choice__opt,
.aphone .ac-row[data-goto],
.aphone .tm-al,
.aphone [data-open],
.aphone [data-person],
.aphone [data-res],
.aphone [data-value] { cursor: pointer; }

/* ── one cursor per field ──────────────────────────────────────────────────
 * The master draws a blinking caret as a <span>, because a specimen has no
 * real input to put one in. Ours are real inputs with real carets, so every
 * field showed two — and the drawn one keeps blinking in fields you are not
 * even in. */
.dp-field__caret { display: none !important; }

/* ── one keyboard ──────────────────────────────────────────────────────────
 * Same reason as the status bar: the drawn keyboard is a picture of one, and
 * the real one slides up over it. */
[data-tpl="kb"], .tm-kb { display: none !important; }

/* ── the empty states ──────────────────────────────────────────────────────
 * `.ac-empty__s` is a class this app invented; the master styles only the
 * title, so the second line inherited whatever was nearest and read as
 * greyed-out. It is the sentence that says what to do about the emptiness,
 * which makes it the more useful of the two. */
.ac-empty__s {
  margin-top: var(--primitive-spacing-md, 6px);
  font-size: var(--app-text-14, 14px);
  line-height: 1.45;
  color: var(--tm-muted, #4A5A5A);
  opacity: 1;
}

/* ── the To row opens ──────────────────────────────────────────────────────
 * The row is drawn with a chevron, which promises a picker. A native <select>
 * laid transparently over it keeps the drawn look and gives iOS its own wheel
 * — no second screen, and one control every clinician has already used. */
.ax-topic--picker { position: relative; }

.ax-topic__pick {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
}

/* ── the status sheet ──────────────────────────────────────────────────────
 * Built on the tokens the design already reserved for each state, so the pill
 * and the row that sets it are the same colour. It sits above everything
 * because it is answering a tap on the app bar, which is above everything. */
.tm-availsheet { position: fixed; inset: 0; z-index: 900; }

.tm-availsheet__scrim {
  position: absolute; inset: 0;
  background: rgba(3, 46, 66, .34);
}

.tm-availsheet__panel {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: #fff;
  padding: 8px 20px calc(20px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -18px 50px rgba(3, 46, 66, .22);
}

.tm-availsheet__grip {
  width: 38px; height: 4px; border-radius: 2px;
  background: var(--tm-line, #D7E0E2);
  margin: 4px auto 14px;
}

.tm-availsheet__t {
  font-family: var(--axserif, Georgia, serif);
  font-size: 21px; color: var(--tm-navy, #032E42);
}

.tm-availsheet__s {
  font-size: 13.5px; line-height: 1.45;
  color: var(--tm-muted, #4A5A5A);
  margin: 4px 0 14px;
}

.tm-availrow {
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 13px 0; cursor: pointer;
  background: none; border: 0; border-top: 1px solid var(--axhair, #E6EDEE);
  text-align: left; font: inherit; color: inherit;
}

.tm-availrow__dot {
  width: 13px; height: 13px; border-radius: 50%; flex: none;
  background: var(--component-status-off-bg, #EDF0F0);
  box-shadow: inset 0 0 0 1px rgba(3, 46, 66, .16);
}
.tm-availrow__dot.is-available     { background: var(--tm-teal-bg, #D8F0EE); }
.tm-availrow__dot.dp-status--oncall  { background: var(--component-status-oncall-bg); }
.tm-availrow__dot.dp-status--theatre { background: var(--component-status-theatre-bg); }
.tm-availrow__dot.dp-status--off     { background: var(--component-status-off-bg); }

.tm-availrow__b { flex: 1; min-width: 0; display: block; }
.tm-availrow__l { display: block; font-weight: 700; font-size: 15px; color: var(--tm-navy, #032E42); }
.tm-availrow__s { display: block; font-size: 12.5px; color: var(--tm-muted, #4A5A5A); margin-top: 1px; }

/* The tick is present in every row and transparent until the row is the one
   you are on — an empty space would make the list jump as it moves. */
.tm-availrow__ck { flex: none; color: transparent; display: grid; place-items: center; }
.tm-availrow.on .tm-availrow__ck { color: var(--axtealdeep, #00494B); }

.dp-status { cursor: pointer; }