/* ===========================================================================
   Diabeasy — patient portal
   ---------------------------------------------------------------------------
   Who this is for: mostly the son or daughter managing a parent's diabetes
   from another city, on a phone, often on a slow connection. Sometimes the
   patient themselves, 50-70, reading at arm's length.

   The page has one job: answer "is my father getting better or worse?"
   before anything is read. Hence the trend ribbon — the target zone drawn as
   a shaded band with readings plotted across it. Inside the band or outside
   is a shape, not a number.

   Type: Baloo 2 for display and Hind for text — both drawn by Indian Type
   Foundry for Devanagari and Latin together. Patient names, and the whole
   Hindi interface, sit in the same family as the English. IBM Plex Mono for
   values so figures align in columns.

   Palette: indigo for structure (trust without corporate blue), sage for
   in-range, ochre for attention, clay for critical. Deliberately not the
   teal of the admin console — a patient should never feel they wandered
   into a back office.
   =========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700&family=Hind:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  --indigo:      #2c3563;
  --indigo-deep: #1d2447;
  --indigo-soft: #eef0f7;

  --sage:        #4a7c59;
  --sage-bg:     #eaf2ec;
  --ochre:       #a86a1f;
  --ochre-bg:    #fbf2e4;
  --clay:        #a83e32;
  --clay-bg:     #fbecea;

  --bg:          #fafafa;
  --surface:     #ffffff;
  --line:        #e4e5ec;
  --line-soft:   #f0f1f5;

  --text:        #22242e;
  --muted:       #61657a;
  --faint:       #9297a8;

  --r:           10px;
  --r-sm:        6px;
  --shadow:      0 1px 3px rgba(34,36,46,.05), 0 6px 20px rgba(34,36,46,.05);

  --display: 'Baloo 2', system-ui, sans-serif;
  --ui:      'Hind', system-ui, sans-serif;
  --mono:    'IBM Plex Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  font-family: var(--ui);
  font-size: 16px;           /* not 14 — a 60-year-old is reading this */
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--display); font-weight: 600; margin: 0 0 .4rem; line-height: 1.25; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1rem; }

a { color: var(--indigo); }
a:hover { text-decoration: underline; }
:focus-visible { outline: 3px solid var(--indigo); outline-offset: 2px; border-radius: 3px; }

/* ------------------------------------------------------------------ chrome */

.appbar {
  background: var(--indigo); color: #fff;
  padding: .6rem 1rem; display: flex; align-items: center; gap: .75rem;
  position: sticky; top: 0; z-index: 40;
}
.appbar .brand { font-family: var(--display); font-weight: 700; font-size: 1.15rem; color: #fff; text-decoration: none; }
.appbar .brand:hover { text-decoration: none; }
.appbar .brand { display: inline-flex; align-items: center; }
.appbar .brand img { display: block; height: 28px; width: auto; }
.appbar .right { margin-left: auto; display: flex; gap: .5rem; align-items: center; }
.appbar a.plain { color: #c6cade; font-size: .9rem; }

/* Family switcher — the growth loop made visible */
.switcher { display: flex; gap: .4rem; overflow-x: auto; padding: .6rem 1rem; background: var(--indigo-deep); }
.switcher::-webkit-scrollbar { display: none; }
.switcher a {
  flex: 0 0 auto; padding: .3rem .8rem; border-radius: 100px;
  font-size: .875rem; font-weight: 500; color: #c6cade;
  background: rgba(255,255,255,.08); text-decoration: none; white-space: nowrap;
}
.switcher a:hover { background: rgba(255,255,255,.16); text-decoration: none; }
.switcher a.on { background: #fff; color: var(--indigo); }
.switcher a.add { background: transparent; border: 1px dashed rgba(255,255,255,.3); }

.tabs { display: flex; gap: .25rem; background: var(--surface); border-bottom: 1px solid var(--line); padding: 0 1rem; overflow-x: auto; }
.tabs a {
  padding: .7rem .8rem; font-size: .9rem; font-weight: 500;
  color: var(--muted); text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap;
}
.tabs a.on { color: var(--indigo); border-bottom-color: var(--indigo); }
.tabs a:hover { text-decoration: none; color: var(--text); }

.page { max-width: 720px; margin: 0 auto; padding: 1.25rem 1rem 5rem; }
.page-head { margin-bottom: 1.25rem; }
.page-head p { color: var(--muted); margin: .1rem 0 0; font-size: .95rem; }

/* ------------------------------------------------------------------ pieces */

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); margin-bottom: 1rem; }
.card > header { padding: .9rem 1.1rem .1rem; }
.card > header h2 { margin: 0; }
.card > header p { margin: .1rem 0 0; color: var(--muted); font-size: .875rem; }
.card .body { padding: 1.1rem; }
.card .foot { padding: .75rem 1.1rem; border-top: 1px solid var(--line-soft); font-size: .875rem; }

.flash { padding: .8rem 1rem; border-radius: var(--r-sm); margin-bottom: 1rem; font-size: .95rem; }
.flash.ok   { background: var(--sage-bg);  color: var(--sage);  }
.flash.err  { background: var(--clay-bg);  color: var(--clay);  }
.flash.warn { background: var(--ochre-bg); color: var(--ochre); }

.btn {
  display: inline-block; font-family: var(--ui); font-size: 1rem; font-weight: 600;
  padding: .6rem 1.1rem; border-radius: var(--r-sm); border: 1px solid var(--line);
  background: var(--surface); color: var(--text); cursor: pointer; text-decoration: none;
}
.btn:hover { background: var(--indigo-soft); text-decoration: none; }
.btn.primary { background: var(--indigo); border-color: var(--indigo); color: #fff; }
.btn.primary:hover { background: var(--indigo-deep); }
.btn.wa { background: #1da851; border-color: #1da851; color: #fff; }
.btn.block { display: block; width: 100%; text-align: center; }

input[type=text], input[type=tel], input[type=date], input[type=file], select, textarea {
  font-family: var(--ui); font-size: 1rem; width: 100%;
  padding: .6rem .7rem; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface);
}
input:focus, select:focus, textarea:focus { border-color: var(--indigo); outline: none; box-shadow: 0 0 0 3px rgba(44,53,99,.12); }
label { display: block; font-size: .875rem; font-weight: 600; color: var(--muted); margin: .8rem 0 .25rem; }

.tag { display: inline-block; font-size: .75rem; font-weight: 600; padding: .15rem .5rem; border-radius: 100px; }
.tag.in       { background: var(--sage-bg);  color: var(--sage); }
.tag.near     { background: var(--ochre-bg); color: var(--ochre); }
.tag.out      { background: var(--ochre-bg); color: var(--ochre); }
.tag.crit     { background: var(--clay-bg);  color: var(--clay); }
.tag.unknown  { background: var(--line-soft);color: var(--muted); }

.empty { text-align: center; padding: 2.5rem 1rem; color: var(--muted); }
.empty strong { display: block; font-family: var(--display); font-size: 1.15rem; color: var(--text); margin-bottom: .3rem; }

/* ======================================================== THE TREND RIBBON */

.trend { padding: .35rem 0 1.1rem; border-bottom: 1px solid var(--line-soft); }
.trend:last-child { border-bottom: 0; padding-bottom: .2rem; }

.trend-head { display: flex; align-items: baseline; gap: .5rem; padding: 0 1.1rem .1rem; }
.trend-head .t { font-family: var(--display); font-weight: 600; font-size: 1rem; }
.trend-head .now { margin-left: auto; font-family: var(--mono); font-weight: 600; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.trend-head .u { font-size: .8rem; color: var(--faint); font-family: var(--ui); }
.trend-note { padding: 0 1.1rem; font-size: .85rem; color: var(--muted); margin: .1rem 0 .3rem; }
.trend-note .better { color: var(--sage); font-weight: 600; }
.trend-note .worse  { color: var(--ochre); font-weight: 600; }

svg.ribbon { display: block; padding: 0 .5rem; }
svg.ribbon .band       { fill: var(--sage-bg); }
svg.ribbon .band-label { fill: var(--sage); font-size: 9px; font-family: 'Hind', sans-serif; font-weight: 600; opacity: .8; }
svg.ribbon .line       { fill: none; stroke: var(--indigo); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
svg.ribbon .dot        { stroke: #fff; stroke-width: 2; }
svg.ribbon .dot.in     { fill: var(--sage); }
svg.ribbon .dot.near   { fill: var(--ochre); }
svg.ribbon .dot.out    { fill: var(--ochre); }
svg.ribbon .dot.crit   { fill: var(--clay); }
svg.ribbon .dot.last   { stroke-width: 3; }
svg.ribbon .val        { font-family: 'IBM Plex Mono', monospace; font-size: 10px; fill: var(--muted); font-weight: 500; }
svg.ribbon .val.now    { fill: var(--text); font-weight: 600; font-size: 11px; }
svg.ribbon .date       { font-family: 'Hind', sans-serif; font-size: 9px; fill: var(--faint); }

.chart-empty { padding: 1rem 1.1rem; color: var(--muted); font-size: .9rem; }

.gauge { position: relative; height: 8px; background: var(--line-soft); border-radius: 100px; margin: .5rem 1.1rem; }
.gauge-band { position: absolute; top: 0; bottom: 0; background: var(--sage-bg); border-radius: 100px; }
.gauge-pin  { position: absolute; top: -3px; width: 3px; height: 14px; background: var(--indigo); border-radius: 2px; }

/* --------------------------------------------------------------- summary */

.summary h3 { font-family: var(--display); font-size: .95rem; margin: 1.1rem 0 .3rem; }
.summary h3:first-child { margin-top: 0; }
.summary ul { margin: 0; padding-left: 1.15rem; }
.summary li { margin-bottom: .3rem; }
.summary .headline { font-family: var(--display); font-size: 1.15rem; font-weight: 600; line-height: 1.35; margin-bottom: .5rem; }
.summary .good  h3 { color: var(--sage); }
.summary .watch h3 { color: var(--ochre); }
.disclaimer { font-size: .8rem; color: var(--muted); background: var(--indigo-soft); padding: .7rem .85rem; border-radius: var(--r-sm); margin-top: 1.25rem; }

/* -------------------------------------------------------------- care gaps */

.gap { display: flex; gap: .8rem; align-items: flex-start; padding: .8rem 0; border-bottom: 1px solid var(--line-soft); }
.gap:last-child { border-bottom: 0; }
.gap .mark { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: .8rem; font-weight: 700; margin-top: .15rem; }
.gap.done    .mark { background: var(--sage-bg);  color: var(--sage); }
.gap.due     .mark { background: var(--ochre-bg); color: var(--ochre); }
.gap.overdue .mark,
.gap.never   .mark { background: var(--clay-bg);  color: var(--clay); }
.gap .t { font-weight: 600; }
.gap .w { font-size: .875rem; color: var(--muted); margin-top: .1rem; }
.gap .when { font-size: .8rem; color: var(--faint); margin-top: .15rem; font-family: var(--mono); }

/* ---------------------------------------------------------------- reports */

.rlist a {
  display: flex; gap: .8rem; align-items: center; padding: .85rem 1.1rem;
  border-bottom: 1px solid var(--line-soft); text-decoration: none; color: var(--text);
}
.rlist a:last-child { border-bottom: 0; }
.rlist a:hover { background: var(--indigo-soft); text-decoration: none; }
.rlist .d { font-weight: 600; }
.rlist .m { font-size: .85rem; color: var(--muted); }
.rlist .chev { margin-left: auto; color: var(--faint); }

/* ------------------------------------------------------------------ login */

.auth { max-width: 380px; margin: 3rem auto; padding: 0 1rem; }
.auth .card .body { padding: 1.5rem; }
.auth h1 { text-align: center; }
.auth h1 img { display: inline-block; height: 44px; width: auto; vertical-align: middle; }
.auth p.sub { text-align: center; color: var(--muted); margin: 0 0 1.25rem; font-size: .95rem; }
.otp { font-family: var(--mono); font-size: 1.6rem; letter-spacing: .4em; text-align: center; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
@media print { .appbar, .switcher, .tabs, .btn { display: none !important; } }