/* Health 1.5: the health log as a timeline with bubbles, vaccination tiles, the family vaccination table and paper
   records. Colours come from the theme's tokens only, so every theme (and dark mode) draws them in its own way. */

/* the colour of each kind of line, the same everywhere */
.hk-vaccination{--hk:var(--k4)}
.hk-visit{--hk:var(--k1)}
.hk-document{--hk:var(--k3)}
.hk-medication{--hk:var(--k5)}
.hk-hospital{--hk:var(--k2)}

/* ---- the switch between timeline and list, the add menu */
.hl-view{margin-left:auto}
.hl-add .menu-pop{min-width:210px}
#healthlog .sheet-h .t{display:flex;gap:6px;flex-wrap:wrap;align-items:center}

/* ---- filter chips by kind */
.hl-filter{display:flex;flex-wrap:wrap;gap:6px}
.hl-filter button{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--surface);color:var(--fg);
  padding:5px 11px;border-radius:999px;font-size:.82rem;font-weight:600;cursor:pointer}
.hl-filter button i{width:9px;height:9px;border-radius:50%;background:var(--hk,var(--muted))}
.hl-filter button small{color:var(--faint);font-weight:600}
.hl-filter button[aria-pressed="true"]{background:var(--fg);border-color:var(--fg);color:var(--bg)}
.hl-filter button[aria-pressed="true"] small{color:inherit;opacity:.75}

/* ---- the compact year axis: one column per year, its height the number of lines that year */
.hl-years{display:flex;align-items:flex-end;gap:2px;overflow-x:auto;padding:6px 14px 2px;scrollbar-width:thin}
.hl-years button span{white-space:nowrap}
.hl-years button{flex:1 1 0;min-width:7px;max-width:46px;display:grid;justify-items:center;gap:3px;border:0;background:none;padding:0;cursor:pointer;color:var(--faint);
  font-size:.66rem;font-variant-numeric:tabular-nums}
.hl-years button b{display:block;width:100%;min-height:3px;border-radius:4px 4px 1px 1px;background:color-mix(in srgb,var(--accent) 35%,transparent)}
.hl-years button.none b{background:var(--line)}
.hl-years button:hover b,.hl-years button[aria-pressed="true"] b{background:var(--accent)}
.hl-years button[aria-pressed="true"]{color:var(--fg);font-weight:700}
.hl-years button.dec span{color:var(--muted)}
.hl-years button:not(.dec) span{visibility:hidden}
.hl-years button:hover span,.hl-years button[aria-pressed="true"] span{visibility:visible}

/* ---- the timeline: a line down the middle, the year on it, bubbles on both sides (on the right on phones) */
.htl{list-style:none;margin:6px 0 0;padding:0;position:relative;display:grid;gap:10px}
.htl::before{content:"";position:absolute;top:6px;bottom:6px;left:calc(50% - 1px);width:2px;background:var(--line);border-radius:2px}
.htl .yr{position:relative;display:flex;justify-content:center;padding:6px 0}
.htl .yr span{position:relative;background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:3px 12px;font-weight:750;
  font-family:var(--f-display);font-size:.9rem;font-variant-numeric:tabular-nums}
.htl .hb{position:relative;display:grid;grid-template-columns:1fr 36px 1fr;align-items:center}
.htl .hb .dot{grid-column:2;justify-self:center;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--hk);
  color:var(--k-fg);box-shadow:0 0 0 4px var(--bg);z-index:1}
.htl .hb .dot svg.i{width:15px;height:15px}
.htl .hb .bub{grid-row:1;position:relative;text-align:left;border:1px solid var(--line);background:var(--surface);color:var(--fg);border-radius:16px;
  padding:10px 13px;display:grid;gap:3px;cursor:pointer;min-width:0;font:inherit;box-shadow:var(--shadow-lg);
  border-left:4px solid var(--hk)}
.htl .hb.l .bub{grid-column:1;margin-right:8px}
.htl .hb.r .bub{grid-column:3;margin-left:8px}
.htl .hb .bub:hover{border-color:color-mix(in srgb,var(--hk) 60%,var(--line));border-left-color:var(--hk)}
.htl .hb .bub:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.htl .hb.open .bub,.htl .hb .bub.open{background:var(--accent-soft)}
.htl .bub .when{display:grid;gap:2px;justify-items:start;font-size:.75rem;color:var(--muted);font-weight:650;flex-wrap:wrap}
.htl .bub .when .kd{color:var(--hk);text-transform:uppercase;letter-spacing:.04em;font-size:.68rem;font-weight:750}
.htl .bub b{font-weight:680;overflow-wrap:anywhere;line-height:1.3}
.htl .bub .sub{font-size:.8rem;color:var(--muted);overflow-wrap:anywhere}
.htl .bub .clip{position:absolute;top:-9px;right:10px;display:inline-flex;align-items:center;gap:3px;background:var(--fg);color:var(--bg);
  border-radius:999px;padding:2px 7px 2px 5px;font-size:.7rem;font-weight:700}
.htl .bub .clip svg.i{width:12px;height:12px}
.htl .bub .paper{font-size:.72rem;color:var(--hk);font-weight:650}
.htl .hb.faded{opacity:.55}
.htl-empty{padding:18px 0}
@media (max-width:720px){
  .htl::before{left:13px}
  .htl .yr{justify-content:flex-start}
  .htl .hb{grid-template-columns:28px 1fr}
  .htl .hb .dot{grid-column:1}
  .htl .hb.l .bub,.htl .hb.r .bub{grid-column:2;margin:0 0 0 10px}
}

/* ---- an entry opened from the timeline: its details, then its files */
.hd-facts{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:.9rem;margin:0}
.hd-facts dt{color:var(--muted)}
.hd-facts dd{margin:0;overflow-wrap:anywhere}
.hd-kind{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;font-weight:750;color:var(--hk);text-transform:uppercase;letter-spacing:.04em}
.hd-kind i{width:9px;height:9px;border-radius:50%;background:var(--hk)}
.hd-files{display:grid;gap:10px}
.hd-file{display:grid;gap:6px;border:1px solid var(--line);border-radius:14px;padding:10px;background:var(--surface)}
.hd-file .t{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.hd-file .t .grow{min-width:0;overflow-wrap:anywhere;font-weight:600;font-size:.88rem}
.hd-file img{display:block;max-width:100%;max-height:340px;border-radius:10px;background:var(--surface-2);justify-self:start;object-fit:contain}
.hd-file .ph{display:grid;place-items:center;height:110px;border-radius:10px;background:var(--surface-2);color:var(--faint)}
.hd-file .ph svg.i{width:34px;height:34px}
.hd-src{border-left:3px solid var(--k3);padding:4px 0 4px 10px;font-size:.86rem}
.hd-entries .row{padding:8px 4px}

/* ---- vaccination tiles on a person's page */
.vtiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.vtile{--sc:var(--muted);--ss:var(--surface-2);text-align:left;font:inherit;color:var(--fg);border:1px solid var(--line);background:var(--surface);
  border-radius:18px;padding:14px 15px 13px;display:grid;gap:8px;cursor:pointer;position:relative;overflow:hidden;min-width:0}
.vtile::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:var(--sc)}
.vtile:hover{border-color:color-mix(in srgb,var(--sc) 55%,var(--line))}
.vtile:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.vtile.open{background:var(--accent-soft)}
.vtile .top{display:flex;gap:10px;align-items:flex-start}
.vtile .top .ico{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:var(--ss);color:var(--sc);flex:none}
.vtile .top .ico svg.i{width:17px;height:17px}
.vtile .top b{font-weight:700;line-height:1.25;overflow-wrap:anywhere;min-width:0}
.vtile .top small{display:block;color:var(--faint);font-size:.74rem;font-weight:500;margin-top:2px}
.vtile .facts{display:flex;justify-content:space-between;gap:8px;font-size:.8rem;color:var(--muted);flex-wrap:wrap}
.vtile .facts b{color:var(--fg);font-weight:650}
.vtile .next{font-size:.76rem;color:var(--info)}
.vs{display:inline-flex;align-items:center;gap:5px;font-size:.74rem;font-weight:700;padding:2px 9px;border-radius:999px;background:var(--ss);color:var(--sc);
  white-space:nowrap;justify-self:start}
.vs::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.s-valid{--sc:var(--ok);--ss:var(--ok-soft)}
.s-soon{--sc:var(--warn);--ss:var(--warn-soft)}
.s-expired{--sc:var(--danger);--ss:var(--danger-soft)}
.s-incomplete{--sc:var(--info);--ss:var(--info-soft)}
.s-given{--sc:var(--muted);--ss:var(--surface-2)}
.s-never{--sc:var(--faint);--ss:transparent}
.s-planned{--sc:var(--accent);--ss:var(--accent-soft)}
.vs.s-planned{border:1px dashed currentColor;padding:1px 8px}
.vs.s-never{border:1px solid var(--line)}
.vs.s-never::before{background:none;border:1.5px solid currentColor;width:5px;height:5px}
.vnote{display:flex;gap:10px;align-items:flex-start;font-size:.84rem;color:var(--muted);background:var(--info-soft);border-radius:14px;padding:11px 13px}
.vnote svg.i{color:var(--info);flex:none;margin-top:1px}
.vnote b{color:var(--fg)}

/* the doses of one vaccine, in a panel */
.vdoses{list-style:none;margin:0;padding:0 0 0 18px;position:relative;display:grid;gap:10px}
.vdoses::before{content:"";position:absolute;left:5px;top:6px;bottom:6px;width:2px;background:var(--line)}
.vdoses li{position:relative;display:grid;gap:2px;font-size:.88rem}
.vdoses li::before{content:"";position:absolute;left:-17px;top:5px;width:10px;height:10px;border-radius:50%;background:var(--k4);box-shadow:0 0 0 3px var(--bg)}
.vdoses li.planned::before{background:var(--bg);border:2px solid var(--info);width:6px;height:6px}
.vdoses li .muted{font-size:.8rem}
.vdoses li .files{display:flex;gap:6px;flex-wrap:wrap;margin-top:2px}
.vrule{display:grid;gap:10px;border:1px solid var(--line);border-radius:14px;padding:12px}
.vrule .t{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

/* ---- the family table: people across, vaccines down */
.vx-on{display:flex;gap:12px 16px;align-items:center;flex-wrap:wrap;border:1px solid var(--line);background:var(--surface);border-radius:18px;padding:14px 16px}
.vx-on .grow{flex:1 1 220px;min-width:0}
.vx-on .grow b{display:block;font-family:var(--f-display);font-size:1.02rem}
.vx-on .grow span{font-size:.84rem;color:var(--muted)}
.vx-on input[type=date]{width:auto}
.vx-legend{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.vx-legend .spacer{flex:1}
.vx-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:16px;background:var(--surface)}
.vx{border-collapse:separate;border-spacing:0;width:100%;min-width:560px;font-size:.86rem}
.vx th,.vx td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.vx thead th{font-weight:650;color:var(--muted);background:var(--surface-2);position:sticky;top:0}
.vx thead th .who{display:inline-flex;gap:8px;align-items:center;color:var(--fg)}
.vx thead th .av{width:26px;height:26px;font-size:.7rem}
.vx th.v{position:sticky;left:0;background:var(--surface);z-index:1;min-width:170px;max-width:240px}
.vx thead th.v{background:var(--surface-2);z-index:2}
.vx th.v b{display:block;font-weight:650;color:var(--fg)}
.vx th.v small{color:var(--faint);font-weight:500;font-size:.76rem}
.vx tr.g th{background:var(--surface-2);color:var(--muted);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;font-weight:700;padding:7px 12px}
.vx td button{display:grid;gap:3px;border:0;background:none;padding:0;font:inherit;color:inherit;text-align:left;cursor:pointer;width:100%}
.vx td button:hover .vs{filter:brightness(.97);text-decoration:underline}
.vx td small{color:var(--muted);font-size:.76rem}
.vx tr:last-child td,.vx tr:last-child th{border-bottom:0}

/* ---- a new paper record: where the scan comes from, what it is, the entries on it */
.pr-steps{display:grid;gap:18px}
.pr-step h3{font-size:.95rem;font-weight:700;display:flex;gap:8px;align-items:center;margin:0 0 8px}
.pr-step h3 .n{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--fg);color:var(--bg);font-size:.75rem}
.pr-pick{display:grid;gap:6px;max-height:260px;overflow:auto}
.pr-pick label{display:flex;gap:10px;align-items:center;border:1px solid var(--line);border-radius:12px;padding:8px 10px;cursor:pointer;background:var(--surface)}
.pr-pick label:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}
.pr-pick label .grow{min-width:0;overflow-wrap:anywhere;font-size:.86rem}
.pr-pick label .grow small{display:block;color:var(--muted)}
.pr-lines{display:grid;gap:8px}
.pr-line{display:grid;grid-template-columns:130px minmax(0,2fr) 140px minmax(0,1fr) 64px 34px;gap:6px;align-items:center}
.pr-line .input{min-width:0}
.pr-head{font-size:.74rem;color:var(--muted);font-weight:650}
@media (max-width:720px){
  .pr-line{grid-template-columns:1fr 1fr;padding:8px;border:1px solid var(--line);border-radius:12px}
  .pr-line [name="e_title"]{grid-column:1/-1}
  .pr-head{display:none}
}
.vx th{text-transform:none;letter-spacing:normal}
.vx thead th,.vx th.v{font-size:.86rem}
.vx tr.g th{text-transform:uppercase;letter-spacing:.06em}
.vx-on .chip[aria-pressed="true"],#vxtable .chip[aria-pressed="true"]{background:var(--fg);border-color:var(--fg);color:var(--bg)}
.vx-on .ico{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;flex:none}
@media (max-width:520px){.vx th.v{min-width:128px;max-width:150px}.vx th,.vx td{padding:9px 9px}}
/* long vaccine names wrap inside the sticky first column instead of running over the first person's cells */
.vx th.v{overflow:hidden}
.vx th.v,.vx th.v b{white-space:normal;overflow-wrap:anywhere}