/* Pill buttons, everywhere (Dr. Lazar 2026-10-24).

   Every action button in the patient app is a pill: fully
   rounded ends, one radius, --radius-pill. This file is the one place that
   says so. It is linked on both hosts, last on app pages (base.html), from
   _luc_doc_head.html on the new host's standalone pages (intake, signing,
   policies) and on the Ouch form's standalone page. 2026-10-25: it was new-host
   only, so app.lazarspinalcare.com kept the old tall, full-width buttons; Dr.
   Lazar asked for smaller pill buttons there too. Colours and fonts stay each
   host's own.
   Colours and type are unchanged: Lazar blue fills, blue-deep text, Poppins.
   Screen only, so a printed form keeps whatever it had.

   1. Any button with no radius of its own becomes a pill. :where() keeps this
      at zero specificity, so a component that deliberately shapes a control
      (tabs, tiles, cards, the inner keys of a joined group) still wins.
   2. Buttons that set a small radius (10-18px) in their own stylesheet or
      template, listed so they need no per-file edit. `html body` lifts each
      just above the component's own rule; the two links styled inline need
      !important, which is why they are named so narrowly.
   Kept as they are on purpose:
   - the Running late presets and the loud solid one-tap variant of that button (.ep-now without -calm):
     big rounded squares, because a pill throws away corner tap area that a
     driver cannot afford to miss (portal.css explains);
   - choice cards (intake / signing radio and checkbox chips, record kinds),
     inputs, cards, the menu rows, the bottom tab bar and the day tabs;
   - "Sign out" in the top bar, which is a plain link. */
/* Size (Dr. Lazar: "Buttons should not be so tall. Look at the Rivian app"):
   short, wide pills. Shorter again on 2026-10-24: "I don't want them tiny, but
   I don't want a bunch of wasted space either." The same tokens as CHART
   (lsc-chart app/static/chart.css): 32px high (28px compact), 32px on a touch
   screen too (2026-10-25: "App needs to have smaller pill buttons"), never
   taller than 40px; the big ones size to their label instead of spanning the row; the height comes
   from the token, not padding; 0 14px sides (0 12px compact); 14px / 600
   (13px compact) / line-height 1, one line, at least 3x as wide as high.
   Icon-only pills are circles at the same height. */
:root {
  --radius-pill: 999px;
  --pill-h: 32px;
  --pill-h-compact: 28px;
  --pill-h-touch: 32px;
  --pill-h-max: 40px;
  --pill-pad-x: 14px;
  --pill-pad-x-compact: 12px;
  --pill-font: 14px;
  --pill-font-compact: 13px;
  --pill-weight: 600;
  --pill-tracking: .01em;
}
@media (pointer: coarse), (max-width: 480px) {
  :root { --pill-h: var(--pill-h-touch); --pill-h-compact: var(--pill-h-touch); }
}

@media screen {
  :where(button, input[type="submit"], input[type="button"], input[type="reset"], a.button, .btn):where(
    :not([role="tab"], [role="menuitem"], [role="option"], [class*="tab"], [class*="tile"], [class*="card"],
         :is([class*="seg"], [class*="split"], [role="tablist"]) > *)) {
    border-radius: var(--radius-pill);
  }

  html body :is(
    .pf-dash-btn, .pf-submit, .pf-btn, .btn-add, button.submit, .pay-who-chip,
    .ep-wiz-choice, .ep-wiz-num, .help-dialog-x, .help-dialog-ok, .quick-menu-toggle
  ) {
    border-radius: var(--radius-pill);
  }
  /* sign_copy.html styles every <button> on the page at 10px (its one button is Print). */
  html body button.noprint { border-radius: var(--radius-pill); }

  /* Styled inline in the template, so only !important reaches them. */
  html body a.btn-cta,
  html body a[href$="/auth/google/start"] { border-radius: var(--radius-pill) !important; }

  /* Size. Text pills: the token height, at least 3x as wide, no vertical
     padding, one line. The
     links among them become inline-flex so the label centres; buttons and
     the flex rows (directions, record upload) centre already. */
  html body :is(
    button[type="submit"], .btn, .pf-dash-btn, .pf-submit, .pf-btn, .btn-add, button.submit,
    .help-dialog-ok, .bubble, .ru-btn, button.noprint
  ):not(.link-btn, .late-preset, .ep-now, .quick-menu-item) {
    height: var(--pill-h); min-height: 0; max-height: var(--pill-h-max); min-width: calc(var(--pill-h) * 3); padding: 0 var(--pill-pad-x);
    font-size: var(--pill-font); font-weight: var(--pill-weight);
    line-height: 1; letter-spacing: var(--pill-tracking); white-space: nowrap;
  }
  html body :is(a.btn, a.pf-dash-btn, a.pf-btn) {
    display: inline-flex; align-items: center; justify-content: center; padding-left: var(--pill-pad-x); padding-right: var(--pill-pad-x);
  }
  /* Size to the label, not the row: "Get directions" under the greeting, and
     "Schedule a visit" (centred by its paragraph) no longer span or fill the screen. */
  html body .bubbles .bubble { flex: 0 1 auto; gap: 0.4rem; box-shadow: none; }
  html body .bubble-directions { border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
  html body .bubble-icon { width: 16px; height: 16px; }
  html body .bubble-label { line-height: 1; }
  html body .schedule-cta .btn { font-size: var(--pill-font); }
  html body .pf-dash-actions { gap: 12px; }
  html body .pf-dash-btn-2 { box-sizing: border-box; }
  /* "Log a symptom or episode" on the home screen: one compact tinted pill. The
     helper line stays for screen readers. The tracker page uses the same class, so it gets the same pill. */
  html body .ep-now-form .ep-now.ep-now-calm {
    display: inline-flex; flex-direction: row; width: auto; min-height: 0; height: var(--pill-h);
    padding: 0 var(--pill-pad-x); border-radius: var(--radius-pill); position: relative;
  }
  html body .ep-now-calm .ep-now-title { font-size: var(--pill-font); font-weight: var(--pill-weight); line-height: 1; letter-spacing: var(--pill-tracking); }
  html body .ep-now-calm .ep-now-sub {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  html body :is(.bubble, .btn, .pf-dash-btn, .pf-btn, .pf-submit, .ep-now-calm, button[type="submit"]):focus-visible {
    outline: 3px solid color-mix(in srgb, var(--accent, #21328A) 55%, transparent); outline-offset: 2px;
  }
  html body .ru-done-actions .btn { display: inline-flex; align-items: center; justify-content: center; }
  html body .schedule-cta .btn { display: inline-flex; align-items: center; justify-content: center; padding-left: var(--pill-pad-x); padding-right: var(--pill-pad-x); }
  html body a.btn-cta, html body a[href$="/auth/google/start"] {
    height: var(--pill-h) !important; padding-top: 0 !important; padding-bottom: 0 !important;
    display: flex !important; align-items: center; justify-content: center;
  }
  /* Icon-only pills: circles at the pill height. */
  html body :is(.quick-call-btn, .quick-menu-toggle) { width: var(--pill-h); height: var(--pill-h); }
}

/* ONE FAMILY (Dr. Lazar 2026-10-25: "I want everything unified looking").
   Every pill is the same box: 32px, 14px / 600, 0 14px, fully round, a 1px border.
   They differ only in colour, from the host's own --accent (Lazar purple on the old
   host, Lazar blue on the new one; the fallbacks serve the standalone pages):
     primary    filled accent, white text   .btn, submit buttons, Start, .pf-btn, .pf-submit
     secondary  outlined accent             Get directions, Open the Ouch form
     calm       accent tint                 Log a symptom or episode
   Running late's amber bubble keeps its own colours but the same box. A plain text
   link next to a pill ("What is it?") is the accent colour at the same 14px. */
@media screen {
  html body :is(
    button[type="submit"], .btn, .pf-dash-btn, .pf-btn, .pf-submit, .btn-add, button.submit,
    .bubble, .ep-now-calm
  ):not(.link-btn, .late-preset, .ep-now, .quick-menu-item),
  html body .ep-now-form .ep-now.ep-now-calm {
    box-sizing: border-box; height: var(--pill-h); min-height: 0; width: auto; margin-top: 0;
    padding: 0 var(--pill-pad-x); border: 1px solid var(--accent, #21328A); border-radius: var(--radius-pill);
    background: var(--accent, #21328A); color: #fff; box-shadow: none;
    font-size: var(--pill-font); font-weight: var(--pill-weight); line-height: 1; letter-spacing: var(--pill-tracking);
    text-decoration: none;
  }
  html body :is(button[type="submit"], .btn, .pf-dash-btn, .pf-btn, .pf-submit):not(.link-btn, .late-preset, .pf-dash-btn-2):hover {
    background: var(--accent-hover, #131E52); border-color: var(--accent-hover, #131E52); color: #fff;
  }
  /* The standalone forms' full-width submit is a pill too. */
  html body .pf-submit { display: inline-flex; align-items: center; justify-content: center; }
  /* secondary: outlined */
  html body :is(a.bubble.bubble-directions, a.pf-dash-btn.pf-dash-btn-2) {
    background: transparent; color: var(--accent, #21328A); border-color: var(--accent, #21328A);
  }
  html body :is(a.bubble.bubble-directions, a.pf-dash-btn.pf-dash-btn-2):hover {
    background: var(--accent-soft, #EAECF7); color: var(--accent, #21328A); border-color: var(--accent, #21328A);
  }
  /* calm: tint */
  html body .ep-now-form .ep-now.ep-now-calm {
    background: var(--accent-soft, #EAECF7); color: var(--accent, #21328A); border-color: var(--accent-soft-border, #DCD7F6);
  }
  html body .ep-now-form .ep-now.ep-now-calm:hover { background: var(--accent-soft-hover, #DFE3F3); }
  /* the plain text link beside a pill */
  html body .pf-dash-actions a:not(.pf-dash-btn) {
    color: var(--accent, #21328A); font-size: var(--pill-font); font-weight: 500; line-height: 1;
  }
}