/* ==========================================================================
   With You — Design System
   ==========================================================================

   One token layer for the whole product. Replaces three competing visual
   languages that were live simultaneously:

     - styles/main.css        deep teal #1e3a3a + gold #d4af37   (the real brand)
     - index.html            #667eea → #764ba2 purple gradient   (generic)
     - the app page          #FF6B6B → #FF8E53 coral             (unrelated)

   The teal/gold is kept. It is distinctive, calm, and adult — and in an Indian
   context it avoids the clinical blue-and-white that reads as institutional.

   ---------------------------------------------------------------------------
   DESIGN PRINCIPLE

   This app gets opened at 2am in a hospital corridor by someone frightened.
   Apple's actual standard is not blur and rounded corners — it is deference:
   the interface recedes so the content carries the weight. Everything below
   follows from that. Quiet by default; emphasis is spent, not sprayed.

   ---------------------------------------------------------------------------
   PERFORMANCE BUDGET — read before adding anything

   Target device is a ₹10–15k Android on patchy 4G, not an iPhone. So Apple's
   *craft* transfers; Apple's *materials* do not:

     - No backdrop-filter. It is GPU-expensive and janks badly on Mali/Adreno
       entry GPUs. Layered opaque surfaces give the same hierarchy for free.
     - No box-shadow on anything that moves or scrolls. Shadows on scrolling
       elements force repaints. Use borders and surface steps instead.
     - Animate only opacity and transform. Both are compositor-only; width,
       height, top and left all trigger layout.
     - Durations 120–240ms. Longer reads as lag on a slow device, not as polish.

   Fonts: the app currently pulls five Inter weights from Google Fonts, roughly
   120KB before first paint on a cold 3G connection. The stack below puts
   system fonts first — Roboto on Android, San Francisco on iOS — which render
   instantly at zero bytes. Inter is kept as an optional refinement, not a
   dependency.
   ========================================================================== */

:root {
    /* ---------------------------------------------------------------------
       Brand primitives — raw values. Never reference these directly in
       component CSS; use the semantic tokens below so dark mode is a token
       swap rather than a rewrite.
       --------------------------------------------------------------------- */
    --brand-teal-900: #142929;
    --brand-teal-800: #1e3a3a;   /* primary brand */
    --brand-teal-700: #2d5555;
    --brand-teal-600: #3d6f6f;
    --brand-teal-100: #d8e5e5;
    --brand-teal-050: #eef4f4;

    /* ACCESSIBILITY NOTE — measured, not assumed.
       --brand-gold-500 (#d4af37) is 2.10:1 on white. That fails WCAG AA for
       text by a wide margin. It is 5.80:1 on --brand-teal-800, where it passes.

       So gold is a decorative accent on DARK surfaces only. For gold-coloured
       text on a light surface use --brand-gold-800 (6.23:1), which reads as the
       same colour family while actually being legible. */
    --brand-gold-500: #d4af37;
    --brand-gold-600: #b8952c;
    --brand-gold-800: #7a5c15;   /* the on-light text variant */

    --brand-cream: #f7f5f0;

    --grey-000: #ffffff;
    --grey-050: #f7f8f8;
    --grey-100: #eceff0;
    --grey-200: #dde2e4;
    --grey-400: #97a3a8;
    --grey-600: #5a6c7d;   /* 5.42:1 on white — smallest passing body grey */
    --grey-800: #2c3e50;
    --grey-900: #1a2530;

    /* Status colours, contrast-checked against light surfaces */
    --red-600:    #c0392b;
    --red-050:    #fdedeb;
    --amber-700:  #96620a;
    --amber-050:  #fdf5e6;
    --green-700:  #1e7a4a;
    --green-050:  #e8f6ee;

    /* ---------------------------------------------------------------------
       Semantic tokens — light. These are what components use.
       --------------------------------------------------------------------- */
    --surface-page:      var(--brand-cream);
    --surface-raised:    var(--grey-000);
    --surface-sunken:    var(--grey-050);
    --surface-inverse:   var(--brand-teal-800);
    --surface-selected:  var(--brand-teal-050);

    --border-subtle:     var(--grey-100);
    --border-default:    var(--grey-200);
    --border-strong:     var(--grey-400);

    --text-primary:      var(--grey-800);
    --text-secondary:    var(--grey-600);
    /* Deliberately the same as secondary. The old --color-text-muted (#7f8c8d)
       was 3.48:1 — large-text-only — but was used for body copy throughout.
       Rather than keep an unusable token, tertiary resolves to a legible value.
       If you need de-emphasis, use size or weight, not lower contrast. */
    --text-tertiary:     var(--grey-600);
    --text-on-inverse:   var(--grey-000);
    --text-accent:       var(--brand-gold-800);
    --text-link:         var(--brand-teal-700);

    --accent-primary:    var(--brand-teal-800);
    --accent-on-dark:    var(--brand-gold-500);

    --status-critical-fg: var(--red-600);
    --status-critical-bg: var(--red-050);
    --status-caution-fg:  var(--amber-700);
    --status-caution-bg:  var(--amber-050);
    --status-calm-fg:     var(--green-700);
    --status-calm-bg:     var(--green-050);

    --focus-ring: var(--brand-teal-700);

    /* ---------------------------------------------------------------------
       Type scale — rem-based so Android font-size and iOS Dynamic Type both
       work. The previous CSS had hardcoded `font-size: 24px` in nine places,
       which ignores the system setting entirely. For users in their 50s-70s
       that is the difference between usable and not.

       clamp() lets headings shrink on narrow screens without a media query.
       --------------------------------------------------------------------- */
    --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
                 'Noto Sans', 'Noto Sans Devanagari', 'Inter', system-ui, sans-serif;
    /* Tabular figures keep the recording timer from jittering as digits change. */
    --font-numeric: ui-monospace, 'SF Mono', 'Roboto Mono', monospace;

    --text-xs:   0.8125rem;   /* 13px — metadata only, never body */
    --text-sm:   0.875rem;    /* 14px */
    --text-base: 1rem;        /* 16px — minimum for body. Never go below. */
    --text-lg:   1.125rem;    /* 18px — preferred body size for this audience */
    --text-xl:   1.3125rem;
    --text-2xl:  clamp(1.5rem, 1.3rem + 1vw, 1.75rem);
    --text-3xl:  clamp(1.875rem, 1.5rem + 1.8vw, 2.25rem);

    --leading-tight: 1.25;
    --leading-normal: 1.5;
    --leading-relaxed: 1.65;   /* body default — easier for anxious reading */

    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;

    /* ---------------------------------------------------------------------
       Space — 4px base
       --------------------------------------------------------------------- */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-full: 999px;

    /* Elevation via surface + border, not shadow — see performance budget.
       One shadow token exists for genuinely floating layers (sheets, menus)
       which are not in the scroll path. */
    --shadow-overlay: 0 8px 24px rgba(20, 41, 41, 0.16);

    /* ---------------------------------------------------------------------
       Motion — short, compositor-only, interruptible
       --------------------------------------------------------------------- */
    --duration-instant: 90ms;
    --duration-fast: 140ms;
    --duration-normal: 200ms;
    --ease-out: cubic-bezier(0.2, 0, 0.13, 1);
    --ease-spring: cubic-bezier(0.34, 1.3, 0.64, 1);

    /* Minimum touch target. 44px is Apple's floor and Android's 48dp is close;
       44 is the safe common value. Anything smaller fails real thumbs, and this
       audience includes people with tremor and arthritis. */
    --touch-min: 44px;

    --container-max: 42rem;   /* ~672px. Single-column, phone-first. */
}

/* ==========================================================================
   Dark mode
   ==========================================================================
   Not a nicety here: this app is used at night, in hospitals, next to someone
   trying to sleep. A full-white screen at 3am is a physical imposition.

   Surfaces lift as they come forward (darker page, lighter raised) which is the
   inverse of light mode and the reason semantic tokens exist.
   ========================================================================== */
@media (prefers-color-scheme: dark) {
    :root {
        --surface-page:     #0f1a1a;
        --surface-raised:   #162424;
        --surface-sunken:   #0b1414;
        --surface-inverse:  var(--brand-teal-100);
        --surface-selected: #1d3232;

        --border-subtle:    #223434;
        --border-default:   #2d4242;
        --border-strong:    #47605f;

        --text-primary:     #e8eded;
        --text-secondary:   #a9bcbc;
        --text-tertiary:    #a9bcbc;
        --text-on-inverse:  var(--brand-teal-900);
        /* Gold reaches its intended contrast on dark, so the accent finally
           works as text here. */
        --text-accent:      var(--brand-gold-500);
        --text-link:        #7fc4c4;

        --accent-primary:   var(--brand-teal-600);

        --status-critical-fg: #ff8f80;
        --status-critical-bg: #331a17;
        --status-caution-fg:  #e8b866;
        --status-caution-bg:  #33260f;
        --status-calm-fg:     #6fce9b;
        --status-calm-bg:     #10281c;

        --focus-ring: #7fc4c4;
        --shadow-overlay: 0 8px 24px rgba(0, 0, 0, 0.5);
    }
}

/* ==========================================================================
   Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
    /* No font-size override — that would break the user's system text setting,
       which is the whole point of the rem scale above. */
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
    color: var(--text-primary);
    background: var(--surface-page);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Respect notches and home indicators. */
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}

h1, h2, h3, h4 {
    margin: 0;
    line-height: var(--leading-tight);
    font-weight: var(--weight-semibold);
    /* Long Devanagari and compound English words shouldn't overflow on a 320px
       screen. */
    overflow-wrap: break-word;
}
h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }

p { margin: 0 0 var(--space-4); }
p:last-child { margin-bottom: 0; }

a { color: var(--text-link); text-underline-offset: 0.2em; }

/* Visible focus for everyone who uses a keyboard or switch control. There was
   no focus style anywhere in the app before this. */
:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* ==========================================================================
   Primitives
   ========================================================================== */

.ds-container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--space-4);
}

/* --- Button --------------------------------------------------------------- */
.ds-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: var(--touch-min);
    padding: var(--space-3) var(--space-5);
    border: 1px solid transparent;
    border-radius: var(--radius-full);
    font: inherit;
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    cursor: pointer;
    text-decoration: none;
    transition: opacity var(--duration-fast) var(--ease-out),
                transform var(--duration-fast) var(--ease-out);
}
.ds-btn:active { transform: scale(0.98); }
.ds-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

.ds-btn--primary {
    background: var(--accent-primary);
    color: var(--grey-000);
}
.ds-btn--secondary {
    background: var(--surface-raised);
    color: var(--text-primary);
    border-color: var(--border-default);
}
.ds-btn--quiet {
    background: transparent;
    color: var(--text-link);
    padding-inline: var(--space-3);
}

/* --- Card ---------------------------------------------------------------- */
.ds-card {
    background: var(--surface-raised);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
}

/* Tappable card. Full-width, generous, left-aligned — a card is a destination,
   not a chip, and centred text in a tap target reads as decoration. */
.ds-card--action {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    width: 100%;
    min-height: var(--touch-min);
    text-align: left;
    font: inherit;
    color: inherit;
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease-out);
}
.ds-card--action:hover { background: var(--surface-selected); }
.ds-card--action:active { background: var(--surface-selected); }

/* --- Status pill --------------------------------------------------------- */
.ds-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
}
.ds-pill--critical { background: var(--status-critical-bg); color: var(--status-critical-fg); }
.ds-pill--caution  { background: var(--status-caution-bg);  color: var(--status-caution-fg); }
.ds-pill--calm     { background: var(--status-calm-bg);     color: var(--status-calm-fg); }

/* --- Field -------------------------------------------------------------- */
.ds-field { display: block; margin-bottom: var(--space-4); }
.ds-field__label {
    display: block;
    margin-bottom: var(--space-2);
    font-size: var(--text-base);
    font-weight: var(--weight-medium);
}
.ds-field__input {
    width: 100%;
    min-height: var(--touch-min);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--surface-raised);
    color: var(--text-primary);
    /* Must be >=16px or iOS Safari zooms the viewport on focus, which feels
       like a bug to the user and is hard to recover from one-handed. */
    font: inherit;
    font-size: var(--text-base);
}
.ds-field__input:focus { border-color: var(--accent-primary); }
.ds-field__error {
    margin-top: var(--space-2);
    font-size: var(--text-sm);
    color: var(--status-critical-fg);
}

/* --- Verbatim medical value ---------------------------------------------
   Numbers the AI must never paraphrase — dosages, readings, dates — are shown
   in this treatment so a caregiver can tell at a glance what was quoted from
   the source versus what was summarised. See the AI safety envelope. */
.ds-verbatim {
    font-family: var(--font-numeric);
    font-size: 0.95em;
    padding: 0.1em 0.35em;
    border-radius: var(--radius-sm);
    background: var(--surface-sunken);
    border: 1px solid var(--border-default);
    white-space: nowrap;
}

/* --- Uncertainty marker -------------------------------------------------
   Where the model was not confident. Shown, not hidden: a caregiver deciding
   whether to trust a summary needs to see where it is soft. */
.ds-uncertain {
    border-bottom: 2px dotted var(--status-caution-fg);
    cursor: help;
}

/* --- Skeleton ----------------------------------------------------------- */
.ds-skeleton {
    background: var(--surface-sunken);
    border-radius: var(--radius-sm);
    animation: ds-pulse 1.4s var(--ease-out) infinite;
}
@keyframes ds-pulse { 50% { opacity: 0.45; } }

/* --- Empty state -------------------------------------------------------- */
.ds-empty {
    padding: var(--space-7) var(--space-5);
    text-align: center;
    color: var(--text-secondary);
}
.ds-empty__title {
    margin-bottom: var(--space-2);
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    color: var(--text-primary);
}

/* --- Sheet -------------------------------------------------------------- */
/* Bottom sheet, not a centred modal. Reachable one-handed on a large phone,
   which a centred dialog is not. Replaces the alert() calls. */
.ds-sheet-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(20, 41, 41, 0.5);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    z-index: 1000;
    animation: ds-fade var(--duration-fast) var(--ease-out);
}
.ds-sheet {
    width: 100%;
    max-width: var(--container-max);
    max-height: 85vh;
    overflow-y: auto;
    background: var(--surface-raised);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    padding: var(--space-5);
    padding-bottom: calc(var(--space-5) + env(safe-area-inset-bottom));
    box-shadow: var(--shadow-overlay);
    animation: ds-rise var(--duration-normal) var(--ease-spring);
}
@keyframes ds-fade { from { opacity: 0; } }
@keyframes ds-rise { from { transform: translateY(100%); } }

@media (min-width: 40rem) {
    /* Centre it once there is room, but keep the same component. */
    .ds-sheet-backdrop { align-items: center; }
    .ds-sheet { border-radius: var(--radius-lg); }
}

/* --- Screen-reader only ------------------------------------------------- */
.ds-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;
}

/* Skip link — there was none, so keyboard users traversed the whole nav on
   every page. */
.ds-skip-link {
    position: absolute;
    left: var(--space-4);
    top: -100%;
    z-index: 1100;
    padding: var(--space-3) var(--space-4);
    background: var(--surface-raised);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-overlay);
    transition: top var(--duration-fast) var(--ease-out);
}
.ds-skip-link:focus { top: var(--space-4); }

/* ==========================================================================
   Reduced motion
   ==========================================================================
   Honour the system setting rather than overriding it. Vestibular disorders are
   common, and this is a medical product — some users are on medication that
   makes motion actively unpleasant. Transforms are removed rather than
   shortened, so nothing slides.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 1ms !important;
        scroll-behavior: auto !important;
    }
    .ds-sheet { animation: none; }
    .ds-btn:active { transform: none; }
}

/* ==========================================================================
   Forced colours / high contrast
   ========================================================================== */
@media (forced-colors: active) {
    .ds-card, .ds-field__input, .ds-btn { border: 1px solid ButtonBorder; }
    .ds-pill { border: 1px solid CanvasText; }
}