/*
 * LogMeds — web
 *
 * A Liquid Glass look matching the iOS app: a soft drifting colour wash behind
 * translucent, blurred surfaces. Everything is driven by the tokens below, so
 * light and dark are one set of variables apart.
 */

/* ------------------------------------------------------------------ tokens */

:root {
  color-scheme: light dark;

  --tint-blue: #3479e6;
  --tint-teal: #17a2b8;
  --tint-green: #2fa84f;
  --tint-orange: #e8890c;
  --tint-pink: #e0509a;
  --tint-purple: #8250df;
  --tint-red: #d93a3a;
  --tint-indigo: #4a5ae8;

  --accent: var(--tint-blue);

  --ink: #10131a;
  --ink-soft: #5b6472;
  --ink-faint: #8b94a3;

  --ground: #eef1f6;
  --glass: rgba(255, 255, 255, 0.55);
  --glass-strong: rgba(255, 255, 255, 0.72);
  --glass-line: rgba(255, 255, 255, 0.65);
  --glass-shadow: rgba(16, 20, 30, 0.10);

  --radius-card: 26px;
  --radius-tile: 20px;
  --radius-chip: 999px;

  --gap: 16px;
  --pad: 18px;

  --blur: 30px;

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  --font-round: -apple-system, BlinkMacSystemFont, "SF Pro Rounded", "Segoe UI", system-ui, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #f2f5fa;
    --ink-soft: #a4adbd;
    --ink-faint: #737d8e;

    --ground: #0a0c11;
    --glass: rgba(30, 35, 46, 0.55);
    --glass-strong: rgba(38, 44, 57, 0.72);
    --glass-line: rgba(255, 255, 255, 0.10);
    --glass-shadow: rgba(0, 0, 0, 0.45);
  }
}

/* ------------------------------------------------------------------- reset */

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

/* `display` rules on a class beat the hidden attribute's UA default, so make
   hidden win everywhere. */
[hidden] { display: none !important; }

html, body { height: 100%; }

body {
  margin: 0;
  min-height: 100%;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink);
  background: var(--ground);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

h1, h2, h3 { margin: 0; line-height: 1.2; }

/* --------------------------------------------------------- ambient backdrop */

/* Glass needs something with colour and movement underneath, or it reads flat. */
.ambient {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: var(--ground);
}

.ambient span {
  position: absolute;
  width: 46vmax;
  height: 46vmax;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.5;
  will-change: transform;
}

.ambient span:nth-child(1) {
  background: radial-gradient(circle, var(--tint-blue), transparent 68%);
  top: -12vmax; left: -8vmax;
  animation: drift-a 22s ease-in-out infinite alternate;
}

.ambient span:nth-child(2) {
  background: radial-gradient(circle, var(--tint-purple), transparent 68%);
  top: 10vmax; right: -12vmax;
  animation: drift-b 26s ease-in-out infinite alternate;
}

.ambient span:nth-child(3) {
  background: radial-gradient(circle, var(--tint-teal), transparent 68%);
  bottom: -16vmax; left: 22vmax;
  animation: drift-c 30s ease-in-out infinite alternate;
}

@keyframes drift-a { to { transform: translate3d(8vmax, 6vmax, 0) scale(1.15); } }
@keyframes drift-b { to { transform: translate3d(-9vmax, 8vmax, 0) scale(1.1); } }
@keyframes drift-c { to { transform: translate3d(6vmax, -7vmax, 0) scale(1.18); } }

@media (prefers-reduced-motion: reduce) {
  .ambient span { animation: none; }
}

/* ----------------------------------------------------------------- surfaces */

.glass {
  background: var(--glass);
  backdrop-filter: blur(var(--blur)) saturate(180%);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(180%);
  border: 1px solid var(--glass-line);
  border-radius: var(--radius-card);
  box-shadow: 0 8px 30px var(--glass-shadow);
}

.glass-tile {
  background: var(--glass);
  backdrop-filter: blur(var(--blur)) saturate(180%);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(180%);
  border: 1px solid var(--glass-line);
  border-radius: var(--radius-tile);
  box-shadow: 0 4px 18px var(--glass-shadow);
}

.card { padding: var(--pad); }

/* --------------------------------------------------------------- app layout */

.app {
  max-width: 1180px;
  margin: 0 auto;
  padding: 20px 18px 120px;
}

.topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--gap);
  flex-wrap: wrap;
  min-width: 0;
}

.topbar > * { min-width: 0; }

#accountName {
  max-width: 14ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
}

.brand .mark {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(140deg, var(--tint-blue), var(--tint-purple));
  box-shadow: 0 4px 14px rgba(52, 121, 230, 0.4);
}

.topbar-spacer { flex: 1; }

/* ------------------------------------------------------------------ buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 15px;
  border-radius: var(--radius-chip);
  border: 1px solid var(--glass-line);
  background: var(--glass-strong);
  backdrop-filter: blur(var(--blur)) saturate(180%);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(180%);
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.15s ease, filter 0.15s ease;
}

.btn:hover { filter: brightness(1.06); }
.btn:active { transform: scale(0.97); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.btn-primary {
  background: linear-gradient(140deg, var(--accent), color-mix(in srgb, var(--accent) 72%, #000));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 40%, transparent);
}

.btn-danger { color: var(--tint-red); }
.btn-sm { padding: 6px 11px; font-size: 0.82rem; }
.btn[disabled] { opacity: 0.5; pointer-events: none; }

/* -------------------------------------------------------------------- chips */

.chip-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
}
.chip-row::-webkit-scrollbar { display: none; }

.chip {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--radius-chip);
  border: 1px solid var(--glass-line);
  background: var(--glass);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  font-size: 0.87rem;
  font-weight: 600;
  white-space: nowrap;
  transition: transform 0.15s ease;
}

.chip[aria-pressed="true"] {
  background: linear-gradient(140deg, var(--chip-tint, var(--accent)), color-mix(in srgb, var(--chip-tint, var(--accent)) 70%, #000));
  border-color: transparent;
  color: #fff;
}

.chip:active { transform: scale(0.96); }

/* --------------------------------------------------------------------- tabs */

/* A floating glass tab bar, like the app's. */
.tabbar {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 40;
  display: flex;
  gap: 4px;
  padding: 6px;
  border-radius: var(--radius-chip);
  background: var(--glass-strong);
  backdrop-filter: blur(var(--blur)) saturate(200%);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(200%);
  border: 1px solid var(--glass-line);
  box-shadow: 0 10px 34px var(--glass-shadow);
}

.tabbar button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 16px;
  border: 0;
  border-radius: var(--radius-chip);
  background: transparent;
  color: var(--ink-soft);
  font-size: 0.72rem;
  font-weight: 600;
  transition: background 0.2s ease, color 0.2s ease;
}

.tabbar button svg { width: 20px; height: 20px; }

.tabbar button[aria-selected="true"] {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent);
}

/* -------------------------------------------------------------------- panes */

.pane { display: none; }
.pane.is-active { display: block; animation: fade-up 0.32s ease; }

@keyframes fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .pane.is-active { animation: none; }
}

.section {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 22px 4px 10px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink-soft);
}

.section .spacer { flex: 1; }

.section a, .section button.link {
  border: 0;
  background: none;
  padding: 0;
  color: var(--accent);
  font-size: 0.82rem;
  font-weight: 600;
}

/* --------------------------------------------------------------- today hero */

.hero {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}

.ring {
  position: relative;
  width: 116px;
  height: 116px;
  flex: none;
}

.ring svg { transform: rotate(-90deg); }

.ring .track { stroke: color-mix(in srgb, var(--accent) 16%, transparent); }

.ring .value {
  stroke: var(--accent);
  stroke-linecap: round;
  transition: stroke-dashoffset 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent) 45%, transparent));
}

.ring .readout {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
}

.ring .readout strong {
  display: block;
  font-family: var(--font-round);
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1;
}

.ring .readout span {
  font-size: 0.72rem;
  color: var(--ink-soft);
}

.hero-copy { flex: 1; min-width: 200px; }
.hero-copy h2 { font-size: 1.05rem; margin-bottom: 4px; }
.hero-copy p { margin: 0; color: var(--ink-soft); font-size: 0.92rem; }

.streak {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--tint-orange);
}

/* ---------------------------------------------------------------- quick log */

.grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}

.quick {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 15px;
  border-radius: var(--radius-tile);
  border: 1px solid var(--glass-line);
  background:
    linear-gradient(color-mix(in srgb, var(--tile-tint, var(--accent)) 14%, transparent),
                    color-mix(in srgb, var(--tile-tint, var(--accent)) 14%, transparent)),
    var(--glass);
  backdrop-filter: blur(var(--blur)) saturate(180%);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(180%);
  box-shadow: 0 4px 18px var(--glass-shadow);
  text-align: left;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.quick:hover { transform: translateY(-2px); box-shadow: 0 10px 26px var(--glass-shadow); }
.quick:active { transform: scale(0.98); }

.quick .top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--tile-tint, var(--accent));
}

.quick .top svg { width: 22px; height: 22px; }
.quick .count { font-size: 0.78rem; font-weight: 700; color: var(--ink-soft); }
.quick { min-width: 0; }
.quick .med,
.quick .who,
.quick .last { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quick .med { font-weight: 650; font-size: 0.96rem; }
.quick .who { font-size: 0.8rem; color: var(--ink-soft); }
.quick .last { font-size: 0.74rem; color: var(--ink-faint); }
/* A logged dose is de-emphasised, not greyed out — it must stay readable and
   re-tappable, since the same medicine can be taken more than once a day. */
.quick.is-done .med,
.quick.is-done .who { opacity: 0.72; }
.quick.is-done .top { color: var(--tint-green); }

/* --------------------------------------------------------------------- rows */

.rows { display: flex; flex-direction: column; gap: 8px; }

.row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--radius-tile);
  border: 1px solid var(--glass-line);
  background: var(--glass);
  backdrop-filter: blur(var(--blur)) saturate(180%);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(180%);
}

.avatar {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 0.76rem;
  font-weight: 700;
  background: linear-gradient(140deg, var(--who-tint, var(--accent)), color-mix(in srgb, var(--who-tint, var(--accent)) 65%, #000));
}

.row { min-width: 0; }
.row .body { flex: 1; min-width: 0; }
.row .body strong, .row .body span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.row .body strong { display: block; font-size: 0.94rem; font-weight: 650; }
.row .body span { font-size: 0.8rem; color: var(--ink-soft); }
.row .meta { text-align: right; flex: none; }
.row .meta strong { display: block; font-size: 0.94rem; font-variant-numeric: tabular-nums; }
.row .meta span { font-size: 0.78rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }

.day-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 18px 4px 8px;
  font-size: 0.85rem;
  font-weight: 650;
  color: var(--ink-soft);
}
.day-head .total { margin-left: auto; font-weight: 500; color: var(--ink-faint); }

/* ------------------------------------------------------------------- charts */

.chart-card { padding: var(--pad); }
.bars { display: flex; align-items: flex-end; gap: 5px; height: 170px; }

.bars .bar {
  flex: 1;
  min-width: 3px;
  max-width: 22px;
  border-radius: 5px 5px 2px 2px;
  background: linear-gradient(var(--accent), color-mix(in srgb, var(--accent) 35%, transparent));
  transition: height 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.bars .bar[data-empty="1"] { background: color-mix(in srgb, var(--ink-faint) 18%, transparent); }

.axis {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-size: 0.72rem;
  color: var(--ink-faint);
}

.legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 14px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; }
.legend i { width: 10px; height: 10px; border-radius: 3px; }

.stat-list { display: flex; flex-direction: column; gap: 10px; }

.stat {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 15px;
  border-radius: var(--radius-tile);
  border: 1px solid var(--glass-line);
  background: var(--glass);
}

.stat .mini { width: 52px; height: 52px; flex: none; position: relative; }
.stat .mini .pct {
  position: absolute; inset: 0;
  display: grid; place-content: center;
  font-size: 0.74rem; font-weight: 700;
}
.stat .who { flex: 1; }
.stat .who strong { display: block; font-size: 0.92rem; }
.stat .who span { font-size: 0.78rem; color: var(--ink-soft); }

/* -------------------------------------------------------------------- forms */

.field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 12px;
}

.field label { font-size: 0.8rem; font-weight: 600; color: var(--ink-soft); }

.field input,
.field select,
.control {
  width: 100%;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--glass-line);
  background: var(--glass-strong);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.field input:focus,
.field select:focus,
.control:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}

.field-row { display: flex; gap: 10px; }
.field-row > * { flex: 1; }

.note {
  display: flex;
  gap: 9px;
  padding: 12px 14px;
  border-radius: var(--radius-tile);
  background: var(--glass);
  border: 1px solid var(--glass-line);
  font-size: 0.82rem;
  color: var(--ink-soft);
}

.error-box {
  padding: 11px 14px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--tint-red) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--tint-red) 35%, transparent);
  color: var(--tint-red);
  font-size: 0.85rem;
}

/* ------------------------------------------------------------------ filters */

.filters {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  align-items: end;
}

.filters .field { margin: 0; }

.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.column-toggles {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--glass-line);
}

.column-toggles label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  color: var(--ink-soft);
}

/* -------------------------------------------------------------------- table */

.table-wrap {
  overflow-x: auto;
  border-radius: var(--radius-card);
  -webkit-overflow-scrolling: touch;
}

table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }

th, td {
  padding: 11px 13px;
  text-align: left;
  border-bottom: 1px solid var(--glass-line);
  white-space: nowrap;
}

thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--glass-strong);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  font-size: 0.78rem;
  font-weight: 650;
  color: var(--ink-soft);
  cursor: pointer;
  user-select: none;
}

thead th:hover { color: var(--ink); }
tbody tr:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); }
tbody tr:last-child td { border-bottom: 0; }

.arrow { font-size: 0.65rem; color: var(--accent); }
.column-hidden { display: none; }
.no-rows { text-align: center; color: var(--ink-faint); padding: 30px; }
.cell-actions { display: flex; gap: 6px; }
.edit-field { padding: 6px 9px; border-radius: 9px; border: 1px solid var(--glass-line); background: var(--glass-strong); width: 100%; min-width: 90px; }

/* --------------------------------------------------------------- pagination */

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
}

.pagination .btn { min-width: 38px; font-size: 1rem; line-height: 1; }
.pagination .page-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink-soft);
  min-width: 9ch;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------- toasts */

.toasts {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(420px, calc(100% - 32px));
}

.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 15px;
  border-radius: var(--radius-tile);
  background: var(--glass-strong);
  backdrop-filter: blur(var(--blur)) saturate(200%);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(200%);
  border: 1px solid var(--glass-line);
  box-shadow: 0 8px 26px var(--glass-shadow);
  font-size: 0.88rem;
  animation: toast-in 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.toast[data-kind="success"] { color: var(--tint-green); }
.toast[data-kind="error"]   { color: var(--tint-red); }
.toast[data-kind="warning"] { color: var(--tint-orange); }

@keyframes toast-in {
  from { opacity: 0; transform: translateY(-12px); }
  to { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------------ dialogs */

dialog {
  border: 0;
  padding: 0;
  background: transparent;
  max-width: min(480px, calc(100% - 32px));
  width: 100%;
}

dialog::backdrop {
  background: rgba(8, 10, 16, 0.4);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.sheet {
  padding: 22px;
  border-radius: var(--radius-card);
  background: var(--glass-strong);
  backdrop-filter: blur(var(--blur)) saturate(200%);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(200%);
  border: 1px solid var(--glass-line);
  box-shadow: 0 20px 60px var(--glass-shadow);
}

.sheet h2 { margin-bottom: 14px; font-size: 1.1rem; }
.sheet-actions { display: flex; gap: 10px; margin-top: 16px; }
.sheet-actions .btn { flex: 1; }

/* ---------------------------------------------------------------- sign-in */

.signin-wrap {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 24px;
}

/* The form and the explanation sit side by side on a wide screen, and stack on
   a narrow one with the explanation first — it is the more useful of the two
   when you have arrived here without knowing what this is. */
.signin-columns {
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 420px) minmax(0, 380px);
  align-items: start;
  width: 100%;
  max-width: 820px;
}

@media (max-width: 860px) {
  .signin-columns { grid-template-columns: minmax(0, 420px); justify-content: center; }
  .companion { order: -1; }
}

/* --------------------------------------------------------------- companion */

.companion { padding: 24px; }

.companion-badge {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  margin-bottom: 14px;
  color: #fff;
  background: linear-gradient(140deg, var(--tint-indigo), var(--tint-purple));
}

.companion h2 { font-size: 1.05rem; margin-bottom: 8px; }
.companion p { margin: 0 0 16px; color: var(--ink-soft); font-size: 0.9rem; }

.companion-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }

.companion-points li {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  font-size: 0.86rem;
  color: var(--ink-soft);
}

.companion-points svg {
  width: 17px;
  height: 17px;
  flex: none;
  margin-top: 1px;
  color: var(--accent);
}

/* -------------------------------------------------------------- languages */

.language-bar {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 0.82rem;
  color: var(--ink-soft);
}

.lang-select {
  width: auto;
  padding: 7px 11px;
  font-size: 0.85rem;
}

/* ------------------------------------------------------------ field hints */

.field-hint {
  margin: 0;
  font-size: 0.78rem;
  color: var(--ink-soft);
}

.field-hint[data-kind="error"] { color: var(--tint-red); }

.field input.is-invalid {
  border-color: var(--tint-red);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tint-red) 18%, transparent);
}

.recaptcha-note {
  margin: 14px 0 0;
  text-align: center;
  font-size: 0.72rem;
  color: var(--ink-faint);
}

.recaptcha-note a { color: inherit; }

.signin {
  width: min(420px, 100%);
  padding: 30px 26px;
}

.signin .logo {
  width: 74px;
  height: 74px;
  margin: 0 auto 16px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(140deg, var(--tint-blue), var(--tint-purple));
  box-shadow: 0 10px 28px rgba(52, 121, 230, 0.45);
}

.signin h1 { text-align: center; font-size: 1.6rem; margin-bottom: 6px; }
.signin .tagline { text-align: center; color: var(--ink-soft); margin: 0 0 22px; font-size: 0.92rem; }
.signin .switch { display: block; width: 100%; margin-top: 14px; text-align: center; background: none; border: 0; color: var(--accent); font-size: 0.88rem; font-weight: 600; }

/* --------------------------------------------------------------- empties */

.empty {
  text-align: center;
  padding: 34px 20px;
  color: var(--ink-soft);
}
.empty svg { width: 38px; height: 38px; opacity: 0.5; margin-bottom: 10px; }
.empty strong { display: block; font-size: 1rem; color: var(--ink); margin-bottom: 4px; }
.empty p { margin: 0; font-size: 0.88rem; }

.skeleton {
  border-radius: var(--radius-tile);
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--ink-faint) 12%, transparent),
    color-mix(in srgb, var(--ink-faint) 22%, transparent),
    color-mix(in srgb, var(--ink-faint) 12%, transparent));
  background-size: 200% 100%;
  animation: shimmer 1.3s linear infinite;
  height: 64px;
}

@keyframes shimmer { to { background-position: -200% 0; } }

/* ------------------------------------------------------------------- mobile */

@media (max-width: 640px) {
  .app { padding: 14px 12px 110px; }
  .brand { font-size: 1rem; }
  #accountName { display: none; }
  .topbar { gap: 8px; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .hero-copy { min-width: 100%; }
  :root { --pad: 15px; --gap: 13px; }
  .hero { gap: 16px; }
  .ring { width: 96px; height: 96px; }
  .tabbar button { padding: 7px 12px; }
  .tabbar button span { font-size: 0.66rem; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}

@media (max-width: 420px) {
  .tabbar { left: 12px; right: 12px; transform: none; justify-content: space-between; }
  .tabbar button { flex: 1; padding: 7px 4px; }
}

/* -------------------------------------------------------------------- print */

/* Printing is a real feature here — a medication record for a doctor. Strip the
   interface down to the table and let the page size be chosen at print time. */

body[data-print-size="a4"]           { --print-size: A4 portrait; }
body[data-print-size="4x6"]          { --print-size: 4in 6in; }
body[data-print-size="a4-landscape"] { --print-size: A4 landscape; }

@page { size: var(--print-size); margin: 10mm; }

@media print {
  .ambient, .tabbar, .topbar, .toasts, .filters, .toolbar,
  .column-toggles, .no-print, dialog { display: none !important; }

  body { background: #fff; color: #000; }
  .app { max-width: none; padding: 0; }
  .pane { display: none !important; }
  .pane.is-active { display: block !important; }

  .glass, .glass-tile, .card {
    background: #fff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
  }

  table { font-size: 10pt; }
  th, td { border-bottom: 1px solid #ccc; padding: 4px 6px; }
  thead th { background: #f0f0f0 !important; color: #000; }
  .cell-actions, .col-actions { display: none !important; }
  tbody tr { break-inside: avoid; }

  /* The "simple" layout: fewer columns, larger type, for handing over. */
  body[data-print-mode="simple"] table { font-size: 13pt; width: 100%; }
  body[data-print-mode="simple"] th,
  body[data-print-mode="simple"] td { padding: 7px 9px; }
  body[data-print-mode="simple"] .col-id,
  body[data-print-mode="simple"] .col-amount { width: 8%; }
  body[data-print-mode="simple"] .col-taken { width: 24%; }
  body[data-print-mode="simple"] .col-name { width: 18%; }
  body[data-print-mode="simple"] .col-medication,
  body[data-print-mode="simple"] .col-dosage { width: 21%; }
}

/* Visually hidden, still read aloud. */
.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;
}

/* One scheduled dose. Mirrors the app's rows: state on the left, the action
   on the right, and overdue carried in colour rather than only in words. */
.slot {
  display: flex;
  align-items: center;
  gap: 12px;
}

.slot .slot-time {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  min-width: 52px;
}

.slot.is-overdue { --row-tint: var(--tint-orange, #f59e0b); }
.slot.is-overdue .slot-time { color: var(--tint-orange, #f59e0b); }
.slot.is-taken { opacity: .62; }

.slot .slot-body { flex: 1 1 auto; min-width: 0; }
.slot .slot-name { font-weight: 600; }
.slot .slot-sub {
  font-size: .82rem;
  color: var(--ink-soft);
}

.slot .slot-action { flex: 0 0 auto; }
.slot .slot-done {
  color: var(--tint-green, #16a34a);
  font-weight: 600;
  font-size: .85rem;
}

/* The time on a taken slot is the moment it was actually recorded, not the
   moment it was due, so it is tinted to say it means something different. */
.slot .slot-time.is-actual { color: var(--tint-green, #16a34a); }

.sheet-actions .sheet-spacer { flex: 1; }

/* ----------------------------------------------------------- blood pressure */

/* Latest reading on Today. The number carries the colour, because that is what
   is read first and what says whether anything needs attention. */
.pressure-card {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.pressure-card .pressure-value {
  font-size: 2rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.pressure-card .pressure-meta { flex: 1 1 160px; min-width: 0; }
.pressure-card .pressure-meta .pressure-category { font-weight: 650; font-size: .85rem; }
.pressure-card .pressure-meta .pressure-when,
.pressure-card .pressure-meta .pressure-note {
  font-size: .8rem;
  color: var(--ink-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pressure-card .pressure-actions {
  display: flex;
  gap: 8px;
  flex: 0 0 auto;
  margin-left: auto;
}
.pressure-card .pressure-empty { color: var(--ink-soft); font-size: .9rem; }

/* One reading in the list. The colour bar reads down a long list without
   adding another word to every row. */
.pressure-row { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.pressure-row .pressure-bar {
  flex: 0 0 auto;
  width: 5px;
  height: 34px;
  border-radius: 3px;
  background: var(--pressure-tint, var(--tint-green));
}
.pressure-row .pressure-body { flex: 1 1 auto; min-width: 0; }
.pressure-row .pressure-reading {
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}
.pressure-row .pressure-sub {
  font-size: .8rem;
  color: var(--ink-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pressure-row .pressure-tag {
  flex: 0 0 auto;
  font-size: .75rem;
  font-weight: 700;
  color: var(--pressure-tint, var(--tint-green));
}

/* Systolic and diastolic as two lines, so the gap between them is visible
   rather than inferred. Plain SVG: the page loads no charting library. */
.pressure-chart { width: 100%; height: auto; display: block; }
.pressure-chart .grid-line { stroke: var(--ink-soft); stroke-opacity: .18; stroke-width: 1; }
.pressure-chart .axis-label { fill: var(--ink-soft); font-size: 9px; }
.pressure-chart .line-systolic { fill: none; stroke: var(--tint-red); stroke-width: 2; }
.pressure-chart .line-diastolic { fill: none; stroke: #3b82f6; stroke-width: 2; }
.pressure-chart .dot-systolic { fill: var(--tint-red); }
.pressure-chart .dot-diastolic { fill: #3b82f6; }

.pressure-legend {
  display: flex;
  gap: 14px;
  margin-top: 10px;
  font-size: .8rem;
  color: var(--ink-soft);
}
.pressure-legend .swatch {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-right: 5px;
}
.pressure-legend .swatch.systolic { background: var(--tint-red); }
.pressure-legend .swatch.diastolic { background: #3b82f6; }

.pressure-empty-state {
  color: var(--ink-soft);
  font-size: .9rem;
  text-align: center;
  padding: 18px 0;
}