/* SimaSuites — shared design tokens.
   ============================================================================
   ONE source of truth for the suite's visual language. Every module page links
   this BEFORE its own stylesheet, so a module sheet only has to describe what
   is unique about that module — never what green is, or how big small text is.

   Why this file exists: before it, the four modules defined three different
   accent colors (green #2f6f4f, blue #2563eb, slate #2a5878), nine ad-hoc font
   sizes, and five radii. The suite read as four apps that happened to share a
   back link. Change a value here and it changes everywhere, consistently.

   Rules of the road:
     - Module sheets use var(--token). They should not introduce raw hex.
     - New color? Add a token here first, then use it.
     - Dark mode works because every color is a token: the dark block at the
       bottom redefines the tokens, and nothing else has to know.
   ========================================================================== */

:root {
  /* --- Brand ------------------------------------------------------------ */
  /* Sima green. The suite's one accent — primary actions, active states,
     links, focus. Confirmed as the product identity color (CLAUDE.md). */
  --accent: #2f6f4f;
  --accent-hover: #255a40;
  --accent-active: #1d4732;
  --accent-weak: #eaf3ee; /* tinted backgrounds */
  --accent-border: #b6d6c4; /* borders on tinted backgrounds */
  --on-accent: #ffffff; /* text on an accent fill */

  /* --- Semantic --------------------------------------------------------- */
  /* Success IS the brand green — not a second green five degrees away from it.
     "It worked" is the product's happy path, so the accent is the right color
     for it, and a near-miss green only adds hue noise. These alias rather than
     restate so the two can never drift apart again. */
  --ok: var(--accent);
  --ok-weak: var(--accent-weak);
  --ok-border: var(--accent-border);

  --warn: #8a5a00;
  --warn-weak: #fdf4e3;
  --warn-border: #e6c98a;

  --danger: #b3261e;
  --danger-hover: #94201a;
  --danger-weak: #fdecea;
  --danger-border: #f0c2bd;

  /* A desaturated slate blue, kept deliberately far from both the brand green
     and the recording red so an informational aside can never be misread as
     either. (The value arrived here as sidepanel.css's old accent; it survives
     on merit, not inheritance.) */
  --info: #2a5878;
  --info-weak: #eef4f8;
  --info-border: #c7d3dd;

  /* Recording red is deliberately its own token, not --danger. Recording is a
     *state*, not an error, and it must stay visually unique — nothing else in
     the UI is allowed to use this color. */
  --rec: #c0392b;
  /* Recording red is used two ways: as a FILL behind light text (the Record
     button) and as TEXT on a tinted background (the timer, the status line).
     Dark mode has to lighten the text-role red, which would leave the filled
     button at 3:1 — so the fill role gets its own tokens. */
  --rec-fill: #c0392b;
  --rec-fill-hover: #a93226;
  --on-rec: #ffffff;
  --rec-weak: #fdeeec;
  --rec-border: #f0b8b1;
  --rec-glow: rgba(192, 57, 43, 0.5); /* the pulsing halo on the record dot */
  --rec-glow-0: rgba(192, 57, 43, 0);

  /* --- Neutrals --------------------------------------------------------- */
  /* Warm ink, biased very slightly green, rather than the cool blue-grey these
     started as. A neutral ramp is most of what a reader perceives as "quality",
     and a blue-grey one reads as generic dashboard chrome no matter what the
     accent is. Biasing the greys toward the accent's hue is what makes the
     palette read as chosen. See docs/brand-design-brief.md §5. */
  --bg: #f4f6f2; /* page — paper, not blue-white */
  --surface: #ffffff; /* cards, panels */
  --surface-2: #fafbf9; /* nested/secondary surfaces (list rows) */
  --surface-3: #eaeee8; /* inset wells, disabled fills */
  --border: #dde2dc;
  --border-strong: #c2ccc4; /* inputs, anything interactive */

  --text: #171c19; /* 15.9:1 on --bg, 17.3:1 on --surface */
  --text-muted: #4b544d; /* secondary copy. 7.6:1 on --bg */
  --text-subtle: #5f6a62; /* tertiary copy. 5.2:1 on --bg and 5.6:1 on
                             --surface — passes AA on both, which is the bar the
                             previous value was chosen to clear (it managed
                             4.6:1 / 4.9:1). The original #999 was 2.8:1. */

  /* --- Type scale ------------------------------------------------------- */
  /* Five sizes, not nine. If a new size feels necessary, the layout is
     probably the real problem. */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas,
    monospace;

  --fs-xs: 11px; /* metadata, badges, captions */
  --fs-sm: 12px; /* labels, secondary UI */
  --fs-base: 13px; /* body — note text */
  --fs-md: 15px; /* card titles */
  --fs-lg: 20px; /* page titles */
  --fs-display: 30px; /* the one big number on a screen: the recording
                          clock, a calculator's result */

  --lh-tight: 1.3;
  --lh-base: 1.55;

  /* --- Spacing ---------------------------------------------------------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;

  /* --- Radius ----------------------------------------------------------- */
  --r-sm: 4px; /* inputs, buttons */
  --r-md: 8px; /* cards, panels */
  --r-lg: 12px; /* the big surfaces */
  --r-pill: 999px; /* badges, segmented control */

  /* --- Elevation -------------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(19, 26, 20, 0.05);
  --shadow-md: 0 2px 8px rgba(19, 26, 20, 0.08);
  --shadow-lg: 0 6px 20px rgba(19, 26, 20, 0.12);

  /* --- Motion ----------------------------------------------------------- */
  --t-fast: 0.12s ease;
  --t-base: 0.2s ease;
}

/* ============================================================================
   Base
   ========================================================================== */

* {
  box-sizing: border-box;
}

/* The `hidden` attribute must always win. Without this, an element carrying its
   own `display:` rule (e.g. a flex panel) stays visible when JS sets `hidden`,
   because an author `display` declaration beats the UA `[hidden]` default. */
[hidden] {
  display: none !important;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

/* ============================================================================
   Focus — one visible ring everywhere.
   `:focus-visible` (not `:focus`) so a mouse click doesn't leave a ring behind,
   but keyboard and assistive-tech navigation always shows where you are.
   Four of the six module sheets previously had no focus style at all.
   ========================================================================== */

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* ============================================================================
   Buttons

   Bare `button` is the PRIMARY action (accent fill). That is deliberate: much
   of the suite creates buttons in TypeScript without a class, and those are
   almost always the main action of their card. Everything quieter opts in.

     .btn--secondary  outlined, for the second action in a pair
     .btn--ghost      text-only, for tertiary/inline actions
     .btn--neutral    grey fill, for non-committal actions (Stop, Open)
     .btn--danger     red fill, for destructive actions (Delete)
     .btn--sm         compact, for list rows
     .btn--block      full width
   ========================================================================== */

button {
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: 1.4;
  padding: var(--sp-1) var(--sp-3);
  border: 1px solid var(--accent);
  border-radius: var(--r-sm);
  background: var(--accent);
  color: var(--on-accent);
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast),
    color var(--t-fast);
}

button:hover:not(:disabled) {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

button:active:not(:disabled) {
  background: var(--accent-active);
  border-color: var(--accent-active);
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.btn--secondary {
  background: var(--surface);
  border-color: var(--border-strong);
  color: var(--accent);
}

.btn--secondary:hover:not(:disabled) {
  background: var(--accent-weak);
  border-color: var(--accent-border);
}

.btn--ghost,
button.link {
  background: none;
  border-color: transparent;
  color: var(--accent);
  padding: var(--sp-1) var(--sp-1);
  text-decoration: underline;
}

.btn--ghost:hover:not(:disabled),
button.link:hover:not(:disabled) {
  background: none;
  border-color: transparent;
  color: var(--accent-hover);
}

.btn--neutral {
  background: var(--text-muted);
  border-color: var(--text-muted);
  color: var(--on-accent);
}

.btn--neutral:hover:not(:disabled) {
  background: var(--text);
  border-color: var(--text);
}

.btn--danger {
  background: var(--danger);
  border-color: var(--danger);
  color: var(--on-accent);
}

.btn--danger:hover:not(:disabled) {
  background: var(--danger-hover);
  border-color: var(--danger-hover);
}

.btn--sm {
  font-size: var(--fs-xs);
  padding: 3px var(--sp-2);
}

.btn--block {
  display: block;
  width: 100%;
}

/* ============================================================================
   Form controls — one look for every input in the suite.
   ========================================================================== */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="search"],
input[type="tel"],
select,
textarea {
  font-family: inherit;
  font-size: var(--fs-sm);
  padding: var(--sp-1) var(--sp-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}

input:hover:not(:disabled),
select:hover:not(:disabled),
textarea:hover:not(:disabled) {
  border-color: var(--text-subtle);
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-weak);
}

input:disabled,
select:disabled,
textarea:disabled {
  background: var(--surface-3);
  color: var(--text-subtle);
  cursor: not-allowed;
}

::placeholder {
  color: var(--text-subtle);
}

/* ============================================================================
   Shared primitives used by more than one module.
   ========================================================================== */

/* Card / panel */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
  box-shadow: var(--shadow-sm);
}

/* Section heading inside a card — small, uppercase, quiet. */
.card-title {
  font-size: var(--fs-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin: 0;
}

/* "‹ Suite" back link, present on every module page. */
.suite-back {
  display: inline-block;
  font-size: var(--fs-sm);
  color: var(--accent);
  text-decoration: none;
}

.suite-back:hover {
  text-decoration: underline;
}

/* Badge / pill */
.badge {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 500;
  line-height: 1.6;
  padding: 0 var(--sp-2);
  border-radius: var(--r-pill);
  background: var(--surface-3);
  color: var(--text-muted);
}

/* Inline message block (the four states every panel needs). */
.msg {
  font-size: var(--fs-sm);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  margin: 0;
}

.msg--info {
  background: var(--info-weak);
  border-color: var(--info-border);
  color: var(--info);
}

.msg--ok {
  background: var(--ok-weak);
  border-color: var(--ok-border);
  color: var(--ok);
}

.msg--warn {
  background: var(--warn-weak);
  border-color: var(--warn-border);
  color: var(--warn);
}

.msg--error {
  background: var(--danger-weak);
  border-color: var(--danger-border);
  color: var(--danger);
}

/* Skeleton shimmer — the loading placeholder shape. */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--surface-3) 25%,
    var(--border) 37%,
    var(--surface-3) 63%
  );
  background-size: 400% 100%;
  animation: sima-shimmer 1.4s ease infinite;
  border-radius: var(--r-sm);
}

@keyframes sima-shimmer {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}

/* Screen-reader-only text. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================================
   Reduced motion — honor the OS setting. Shimmer and pulse are decorative;
   nothing in the UI depends on them to convey state (the recording dot is
   backed by text and color too).
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* Dark tokens, defined twice on purpose.

   The two rules are byte-identical and MUST stay that way — edit one, edit the
   other. CSS has no way to share a declaration block across a media query and
   an attribute selector, and both are needed:

     [data-theme="dark"]          the provider explicitly chose dark
     @media + :not([data-theme])  she's on "system" and the OS is dark

   The :not([data-theme="light"]) guard is what lets an explicit *light* choice
   win on a machine whose OS is dark. `shared/theme.js` stamps data-theme
   before first paint; the media query also covers the frame before it runs.
   ========================================================================== */

:root[data-theme="dark"] {

  --accent: #5fb489;
  --accent-hover: #74c39a;
  --accent-active: #8ad0ac;
  --accent-weak: #1e2f26;
  --accent-border: #2f5844;
  --on-accent: #10201a;

  --ok: var(--accent);
  --ok-weak: var(--accent-weak);
  --ok-border: var(--accent-border);

  --warn: #e0b262;
  --warn-weak: #302614;
  --warn-border: #56421f;

  --danger: #f08379;
  --danger-hover: #f59a91;
  --danger-weak: #34201e;
  --danger-border: #5c322d;

  --info: #7fb2d6;
  --info-weak: #1a2833;
  --info-border: #2e485c;

  --rec: #ef6a5c;
  --rec-fill: #ef6a5c;
  --rec-fill-hover: #f48377;
  --on-rec: #2a1310;
  --rec-weak: #331f1c;
  --rec-border: #5e332d;
  --rec-glow: rgba(239, 106, 92, 0.5);
  --rec-glow-0: rgba(239, 106, 92, 0);

  --bg: #121614;
  --surface: #1b211d;
  --surface-2: #232b26;
  --surface-3: #2b342e;
  --border: #2f3a33;
  --border-strong: #46524a;

  --text: #dce3dd; /* 14.0:1 on --bg, 12.5:1 on --surface */
  --text-muted: #b3bcb5; /* 9.8:1 on --bg */
  --text-subtle: #a3aea6; /* 8.0:1 on --bg, 7.2:1 on --surface */

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 6px 20px rgba(0, 0, 0, 0.45);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {

    --accent: #5fb489;
    --accent-hover: #74c39a;
    --accent-active: #8ad0ac;
    --accent-weak: #1e2f26;
    --accent-border: #2f5844;
    --on-accent: #10201a;

    --ok: var(--accent);
    --ok-weak: var(--accent-weak);
    --ok-border: var(--accent-border);

    --warn: #e0b262;
    --warn-weak: #302614;
    --warn-border: #56421f;

    --danger: #f08379;
    --danger-hover: #f59a91;
    --danger-weak: #34201e;
    --danger-border: #5c322d;

    --info: #7fb2d6;
    --info-weak: #1a2833;
    --info-border: #2e485c;

    --rec: #ef6a5c;
    --rec-fill: #ef6a5c;
    --rec-fill-hover: #f48377;
    --on-rec: #2a1310;
    --rec-weak: #331f1c;
    --rec-border: #5e332d;
    --rec-glow: rgba(239, 106, 92, 0.5);
    --rec-glow-0: rgba(239, 106, 92, 0);

    --bg: #121614;
    --surface: #1b211d;
    --surface-2: #232b26;
    --surface-3: #2b342e;
    --border: #2f3a33;
    --border-strong: #46524a;

    --text: #dce3dd; /* 14.0:1 on --bg, 12.5:1 on --surface */
    --text-muted: #b3bcb5; /* 9.8:1 on --bg */
    --text-subtle: #a3aea6; /* 8.0:1 on --bg, 7.2:1 on --surface */

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 6px 20px rgba(0, 0, 0, 0.45);
  }
}

/* ============================================================================
   Sign-in (Cognito) — shared by the launcher and the SimaNotes side panel
   ========================================================================== */

/* Signed-in account, collapsed to one line. The full sign-in form only appears
   when signed out. */
.account-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin-bottom: var(--sp-2);
}

.account-chip-who {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-chip-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ok);
  flex: 0 0 auto;
}

/* The panel's box. Each host page sets its own margin — the side panel and
   the launcher place it differently. */
.auth-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
  box-shadow: var(--shadow-sm);
}

.auth-signedout,
.auth-reset,
.auth-reset-step2,
.auth-newpassword {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.auth-panel input {
  font-size: var(--fs-base);
  padding: var(--sp-2);
}

.auth-reset-title {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-muted);
  margin: 0;
}

.auth-hint {
  font-size: var(--fs-xs);
  color: var(--text-subtle);
  margin: 0;
}

.auth-status {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin: 0;
}

.auth-status.is-error {
  color: var(--danger);
  font-weight: 500;
}

/* ============================================================================
   "Submit a request or issue" — the shared feedback dialog (shared/feedback.ts).
   Lives here rather than in a module sheet because every page hosts it, and a
   PushDocs page that restyles `button` must still render the dialog correctly.
   ========================================================================== */

/* The trigger. Explicit resets so a module sheet that restyles `button`
   (PushDocs still does) cannot turn the footer link into a green pill. */
.feedback-link {
  display: inline-block;
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0;
  font: inherit;
  font-size: var(--fs-xs);
  color: var(--text-subtle) !important;
  text-decoration: underline;
  cursor: pointer;
}

.feedback-link:hover {
  color: var(--accent) !important;
}

.fb-dialog {
  width: min(420px, calc(100vw - 2 * var(--sp-4)));
  max-height: calc(100vh - 2 * var(--sp-4));
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-lg);
}

.fb-dialog::backdrop {
  background: rgba(19, 26, 20, 0.45);
}

.fb-form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-4);
}

.fb-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
}

.fb-title {
  margin: 0;
  font-size: var(--fs-md);
  font-weight: 600;
}

.fb-close {
  background: none;
  border: 0;
  padding: 0 var(--sp-1);
  font-size: var(--fs-lg);
  line-height: 1;
  color: var(--text-subtle);
}

.fb-close:hover:not(:disabled) {
  background: none;
  border-color: transparent;
  color: var(--text);
}

.fb-kinds {
  display: flex;
  gap: var(--sp-1);
  flex-wrap: wrap;
}

.fb-kind {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--fs-sm);
  padding: var(--sp-1) var(--sp-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-pill);
  cursor: pointer;
}

.fb-kind:has(input:checked) {
  background: var(--accent-weak);
  border-color: var(--accent-border);
  color: var(--accent);
}

.fb-kind input {
  margin: 0;
  accent-color: var(--accent);
}

.fb-label {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: calc(-1 * var(--sp-2));
}

.fb-form textarea {
  width: 100%;
  resize: vertical;
  font-size: var(--fs-base);
}

.fb-attach {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

.fb-hint,
.fb-who {
  font-size: var(--fs-xs);
  color: var(--text-subtle);
  margin: 0;
}

.fb-thumbs {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

.fb-thumbs:empty {
  display: none;
}

.fb-thumb {
  position: relative;
  margin: 0;
  width: 84px;
  height: 64px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--surface-3);
}

.fb-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.fb-thumb-remove {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 18px;
  height: 18px;
  padding: 0;
  line-height: 16px;
  font-size: var(--fs-sm);
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  color: var(--text);
}

.fb-thumb-remove:hover:not(:disabled) {
  background: var(--danger-weak);
  border-color: var(--danger-border);
  color: var(--danger);
}

/* The patient-details attestation. Warning-tinted on purpose: it is the one
   line in the dialog the user must actually read. */
.fb-phi {
  display: flex;
  gap: var(--sp-2);
  align-items: flex-start;
  font-size: var(--fs-sm);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--warn-border);
  border-radius: var(--r-sm);
  background: var(--warn-weak);
  color: var(--warn);
  cursor: pointer;
}

.fb-phi input {
  margin: 3px 0 0;
  accent-color: var(--warn);
  flex: 0 0 auto;
}

.fb-phi-why {
  display: block;
  font-size: var(--fs-xs);
  opacity: 0.9;
}

.fb-actions {
  display: flex;
  gap: var(--sp-2);
  justify-content: flex-end;
  flex-wrap: wrap;
}