/* ============================================================
   LutraHome — base styles
   Responsive: mobile → tablet → desktop → TV/widescreen
   ============================================================ */

/* ---------- Self-hosted Ubuntu font ---------- */
@font-face {
  font-family: "Ubuntu";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/ubuntu-400.woff2") format("woff2");
}
@font-face {
  font-family: "Ubuntu";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/ubuntu-500.woff2") format("woff2");
}
@font-face {
  font-family: "Ubuntu";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/ubuntu-700.woff2") format("woff2");
}

/* Any component rule that sets `display` would otherwise override the
   browser's built-in [hidden] → display:none, leaving a "hidden" element on
   screen. That once made the delete-account modal impossible to dismiss. */
[hidden] { display: none !important; }

:root {
  /* Brand palette — clean dark gray + white */
  --navy: #2b2d31;         /* top bar / dark surfaces */
  --navy-2: #35383d;
  --rose-bg: #f6f7f8;      /* page background (light gray → white) */
  --rose-bg-2: #eef0f2;
  --pink: #565b62;         /* mid-gray accent (buttons, active states) */
  --pink-dark: #33363b;    /* darker gray accent (text accents, hovers) */
  --ink: #1f2124;          /* near-black text */
  --ink-soft: #6b7076;     /* muted text */
  --card: #ffffff;
  --line: #e4e6e9;
  --shadow: 0 10px 30px rgba(20, 22, 25, 0.08);
  --shadow-sm: 0 4px 14px rgba(20, 22, 25, 0.06);

  --radius: 16px;
  --radius-sm: 10px;
  --radius-pill: 999px;

  --header-h: 58px;
  --maxw: 1280px;

  --input-bg: #ffffff;       /* form controls / small surfaces */
  --chart-line: #33363b;     /* trend chart line + markers */
  --chart-fill: rgba(51, 54, 59, 0.09);

  --font: "Ubuntu", "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
}

/* ---------- Dark theme ---------- */
:root[data-theme="dark"] {
  --navy: #0e1013;
  --navy-2: #171a1f;
  --rose-bg: #15171b;
  --rose-bg-2: #1b1e23;
  --pink: #4b5058;
  --pink-dark: #7b828c;
  --ink: #e7e9ec;
  --ink-soft: #9aa1a9;
  --card: #22262c;
  --line: #333941;
  --input-bg: #2a2f36;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  --shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.32);
  --chart-line: #cbd0d6;
  --chart-fill: rgba(203, 208, 214, 0.10);
}
:root[data-theme="dark"] .widget,
:root[data-theme="dark"] .empty-state,
:root[data-theme="dark"] .settings-panels,
:root[data-theme="dark"] .settings-tabs,
:root[data-theme="dark"] .article,
:root[data-theme="dark"] .note-item,
:root[data-theme="dark"] .auth-card,
:root[data-theme="dark"] .feed-chip { border: 1px solid var(--line); }

/* Otter logo */
.otter { display: inline-block; vertical-align: middle; }
.brand-otter { width: 30px; height: 30px; }
.hero-otter {
  width: clamp(96px, 15vw, 148px);
  height: auto;
  filter: drop-shadow(0 10px 20px rgba(20, 22, 25, 0.18));
}
.foot-otter { width: 18px; height: 18px; vertical-align: -4px; }

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: linear-gradient(180deg, var(--rose-bg) 0%, var(--rose-bg-2) 100%);
  background-attachment: fixed;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; }

/* Form controls follow the theme (prevents white boxes in dark mode) */
input[type="text"], input[type="number"], input[type="email"], input[type="tel"],
input[type="password"], input[type="search"], input[type="date"], textarea, select {
  background: var(--input-bg);
  color: var(--ink);
}
::placeholder { color: var(--ink-soft); opacity: 1; }

/* ============================ AUTH SCREEN ============================ */
body.locked { overflow: hidden; }
.auth-screen {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: linear-gradient(180deg, var(--rose-bg) 0%, var(--rose-bg-2) 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  overflow-y: auto;
}
.auth-screen[hidden] { display: none; }
.auth-card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: clamp(22px, 4vw, 34px);
  width: 100%;
  max-width: 420px;
}
.auth-brand { text-align: center; margin-bottom: 20px; }
.auth-otter { width: 60px; height: 60px; filter: drop-shadow(0 8px 16px rgba(20, 22, 25, 0.16)); }
.auth-title { font-size: 1.7rem; margin: 8px 0 4px; }
.auth-tag { color: var(--ink-soft); font-size: 0.9rem; margin: 0; line-height: 1.5; }
.auth-form h2 { margin: 0 0 16px; font-size: 1.15rem; }
.auth-form .field { display: block; margin-bottom: 13px; }
.auth-form .field > span { display: block; font-weight: 600; font-size: 0.9rem; margin-bottom: 5px; }
.auth-form input, .auth-form select {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 1rem;
  background: var(--input-bg);
}
.auth-form input:focus, .auth-form select:focus { outline: none; border-color: var(--pink); }
.auth-submit { width: 100%; margin-top: 6px; }
.auth-switch { text-align: center; color: var(--ink-soft); font-size: 0.9rem; margin: 14px 0 0; }
.auth-switch a { color: var(--pink-dark); font-weight: 600; }
.auth-error { color: #d64545; font-size: 0.85rem; font-weight: 600; margin: 0 0 10px; }
.auth-error[hidden] { display: none; }
.auth-demo {
  background: var(--rose-bg-2);
  border: 1px dashed var(--ink-soft);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 0.82rem;
  line-height: 1.5;
  margin-bottom: 14px;
  color: var(--ink-soft);
}
.auth-demo b { color: var(--ink); font-size: 1.15rem; letter-spacing: 3px; }
.auth-demo:empty { display: none; }
.auth-foot { color: var(--ink-soft); font-size: 0.78rem; text-align: center; max-width: 420px; margin: 16px 0 0; line-height: 1.5; }
.auth-foot-error { color: #d64545; font-weight: 600; }
.auth-form .field small { font-weight: 400; color: var(--ink-soft); }
/* Email confirmation-link mode: no code to type */
.auth-form.link-mode .vf-code-only,
.auth-form.link-mode .npw-code-only { display: none; }

/* appearance / theme toggle */
.theme-toggle { display: flex; gap: 6px; margin-bottom: 4px; flex-wrap: wrap; }
.theme-toggle button {
  border: 1.5px solid var(--line);
  background: var(--input-bg);
  color: var(--ink-soft);
  font-family: inherit;
  font-weight: 600;
  font-size: 0.9rem;
  padding: 9px 16px;
  border-radius: var(--radius-pill);
  cursor: pointer;
}
.theme-toggle button:hover { border-color: var(--pink); }
.theme-toggle button.active { background: var(--navy); color: #fff; border-color: var(--navy); }

/* backup & restore */
.backup-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
label.btn { display: inline-flex; align-items: center; cursor: pointer; }

/* account block in settings */
.account-box {
  background: var(--rose-bg);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin-bottom: 12px;
  font-size: 0.92rem;
  line-height: 1.7;
}
.account-box .ab-row { display: flex; justify-content: space-between; gap: 12px; }
.account-box .ab-row span { color: var(--ink-soft); }
.account-box .ab-row b { font-weight: 600; word-break: break-word; text-align: right; }
.account-box .ab-verified { color: #3f9e58; font-weight: 700; }
.account-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* Destructive actions get their own colour so they read as different in kind
   from "Sign out", not just another ghost button next to it. */
.btn-danger { background: #d64545; color: #fff; box-shadow: 0 6px 16px rgba(214, 69, 69, 0.35); }
.btn-danger:hover { background: #b93a3a; }
.btn-danger-ghost { background: transparent; color: #d64545; border: 1.5px solid #d64545; }
.btn-danger-ghost:hover { background: rgba(214, 69, 69, 0.08); }

/* ---------- CONFIRMATION MODAL (account deletion, etc.) ---------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(20, 22, 26, 0.55);
}
.modal-overlay[hidden] { display: none; }
.modal-card {
  background: var(--card);
  color: var(--ink);
  border-radius: var(--radius);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  padding: 24px;
  width: 100%;
  max-width: 420px;
}
.modal-card h2 { margin: 0 0 10px; font-size: 1.15rem; }
.modal-body { margin: 0 0 16px; color: var(--ink-soft); line-height: 1.55; font-size: 0.92rem; }
.modal-body strong { color: #d64545; }
.modal-card .field { margin-bottom: 14px; }
.modal-card .field input {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 1rem;
  background: var(--input-bg);
  color: var(--ink);
}
.modal-card .field input:focus { outline: none; border-color: var(--pink); }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 4px; flex-wrap: wrap; }
.modal-actions .btn { padding: 9px 18px; font-size: 0.9rem; }

/* ============================ HEADER ============================ */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--navy);
  color: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

.topbar-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  min-height: var(--header-h);
  padding: 0 clamp(14px, 3vw, 28px);
  display: flex;
  align-items: center;
  gap: 18px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.2px;
}
.brand-name-a { color: var(--ink); }
.brand-name-b { color: var(--pink-dark); }
.topbar .brand-name-a { color: #fff; }
.topbar .brand-name-b { color: #a8adb3; }

/* Nav */
.mainnav { margin-left: auto; }
.nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: clamp(4px, 1.4vw, 14px);
}
.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  border-radius: var(--radius-pill);
  color: #d7d9e6;
  font-weight: 600;
  font-size: 0.95rem;
  white-space: nowrap;
  transition: color .15s, background .15s;
}
.nav-link:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
.nav-link.active { color: #fff; background: var(--pink); }
.caret { font-size: 0.7em; opacity: 0.85; }

/* Submenus (dropdown on desktop) */
.has-sub { position: relative; }
.subnav {
  list-style: none;
  margin: 0;
  padding: 6px;
  position: absolute;
  top: calc(100% + 6px);
  /* Open inward from the parent's right edge: anchored left:0 this menu ran past
     the window edge and gave the whole page a horizontal scrollbar. */
  left: auto;
  right: 0;
  min-width: 170px;
  max-width: calc(100vw - 24px);
  background: var(--navy-2);
  border-radius: var(--radius-sm);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .15s, transform .15s, visibility .15s;
}
.has-sub:hover > .subnav,
.has-sub:focus-within > .subnav {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav-sublink {
  display: block;
  padding: 9px 12px;
  border-radius: 8px;
  color: #d7d9e6;
  font-weight: 500;
  font-size: 0.92rem;
}
.nav-sublink:hover { background: rgba(255, 255, 255, 0.09); color: #fff; }
.nav-sublink.active { background: var(--pink); color: #fff; }

/* Hamburger */
.hamburger {
  display: none;
  margin-left: auto;
  width: 42px;
  height: 42px;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 9px;
  border-radius: 10px;
}
.hamburger span {
  display: block;
  height: 2.5px;
  background: var(--input-bg);
  border-radius: 2px;
  margin: 4px 0;
  transition: transform .25s, opacity .2s;
}
.hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.nav-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(20, 24, 45, 0.45);
  z-index: 40;
  border: 0;
}

/* ============================ CONTENT ============================ */
.content {
  flex: 1;
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(20px, 4vw, 44px) clamp(14px, 3vw, 28px);
}

/* ---------- HOME ---------- */
.home-hero {
  text-align: center;
  padding: clamp(10px, 3vw, 30px) 0 clamp(18px, 3vw, 30px);
}
.hero-title {
  margin: 10px 0 6px;
  font-size: clamp(1.9rem, 5vw, 3rem);
  letter-spacing: 0.5px;
}
.hero-tag {
  margin: 0 auto;
  max-width: 46ch;
  color: var(--ink-soft);
  font-size: clamp(0.95rem, 2vw, 1.1rem);
}

.home-widgets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: clamp(14px, 2.5vw, 22px);
  margin: clamp(16px, 3vw, 26px) auto 0;
  max-width: 760px;
}

.widget {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: clamp(18px, 3vw, 26px);
}

/* Clock widget */
.widget-clock { text-align: center; }
.clock-time {
  font-size: clamp(2.4rem, 7vw, 3.6rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 1px;
  color: var(--ink);
}
.clock-weekday {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--pink-dark);
  margin-top: 2px;
}
.clock-date { color: var(--ink-soft); margin-top: 2px; }
.clock-week {
  margin-top: 10px;
  display: inline-block;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  background: var(--rose-bg-2);
  color: var(--ink-soft);
  font-size: 0.85rem;
  font-weight: 600;
}

/* Weather widget */
.weather-head { display: flex; align-items: center; gap: 12px; }
.weather-icon { font-size: 2.4rem; line-height: 1; }
.weather-place { font-weight: 700; font-size: 1.05rem; }
.weather-desc { color: var(--ink-soft); font-size: 0.9rem; }
.weather-temp {
  font-size: clamp(2.6rem, 8vw, 3.4rem);
  font-weight: 700;
  margin: 8px 0 2px;
  font-variant-numeric: tabular-nums;
}
.weather-meta {
  display: flex;
  gap: 16px;
  color: var(--ink-soft);
  font-size: 0.9rem;
  margin-bottom: 14px;
}
.weather-settings-link {
  display: block;
  margin-top: 10px;
  color: var(--pink-dark);
  font-size: 0.85rem;
  font-weight: 600;
}
.weather-tomorrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  padding: 10px 12px;
  background: var(--rose-bg);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
}
.weather-tomorrow:empty { display: none; }
.wx-tom-icon { font-size: 1.3rem; }
.wx-tom-label { font-weight: 700; }
.wx-tom-temp { font-weight: 600; font-variant-numeric: tabular-nums; }
.wx-tom-desc { color: var(--ink-soft); margin-left: auto; text-align: right; }

/* Quick links */
.home-quicklinks {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: clamp(20px, 3vw, 30px) auto 0;
}
.quick {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 18px;
  background: var(--card);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
  font-weight: 600;
  color: var(--ink);
  transition: transform .12s, box-shadow .12s;
}
.quick:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.quick span { font-size: 1.15rem; }

/* ---------- GENERIC PAGE ---------- */
.page-head { margin-bottom: clamp(16px, 3vw, 26px); }
.page-title {
  margin: 0 0 6px;
  font-size: clamp(1.5rem, 4vw, 2.1rem);
}
.page-sub { margin: 0; color: var(--ink-soft); }

.empty-state {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: clamp(30px, 6vw, 60px);
  text-align: center;
  color: var(--ink-soft);
}
.empty-icon { font-size: 3rem; margin-bottom: 10px; }
.empty-hint { font-size: 0.9rem; opacity: 0.8; }

/* ---------- BUTTONS ---------- */
.btn {
  border: 0;
  cursor: pointer;
  font-weight: 700;
  font-family: inherit;
  border-radius: var(--radius-pill);
  padding: 11px 22px;
  font-size: 0.95rem;
  transition: transform .1s, box-shadow .15s, background .15s;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--pink); color: #fff; box-shadow: 0 6px 16px rgba(244, 96, 143, 0.35); }
.btn-primary:hover { background: var(--pink-dark); }
.btn-ghost {
  background: transparent;
  color: var(--pink-dark);
  border: 1.5px solid var(--pink);
}
.btn-ghost:hover { background: var(--rose-bg-2); }
.btn-sm { padding: 8px 16px; font-size: 0.85rem; }

/* ---------- NOTES ---------- */
.note-form { display: flex; gap: 10px; margin-bottom: 12px; align-items: flex-start; }
.note-input-wrap { position: relative; flex: 1; }
.note-input {
  width: 100%;
  padding: 12px 46px 12px 16px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 1rem;
  background: var(--input-bg);
  resize: vertical;
  min-height: 44px;
  line-height: 1.4;
}
.note-input:focus { outline: none; border-color: var(--pink); }

/* emoji picker */
.note-emoji-btn {
  position: absolute;
  top: 7px;
  right: 8px;
  border: 0;
  background: transparent;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  padding: 4px;
  border-radius: 8px;
}
.note-emoji-btn:hover { background: var(--rose-bg-2); }
.emoji-pop[hidden] { display: none; }
.emoji-pop {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 30;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 2px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  padding: 8px;
  width: 252px;
  max-width: 86vw;
}
.emoji-item {
  border: 0;
  background: transparent;
  font-size: 1.25rem;
  line-height: 1;
  padding: 7px;
  border-radius: 8px;
  cursor: pointer;
}
.emoji-item:hover { background: var(--rose-bg-2); }

/* toolbar */
.note-tools { display: flex; gap: 10px; margin-bottom: 18px; }
.note-search {
  flex: 1;
  padding: 9px 14px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-pill);
  font-family: inherit;
  font-size: 0.95rem;
  background: var(--input-bg);
}
.note-search:focus { outline: none; border-color: var(--pink); }

/* list */
.note-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.note-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--card);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  padding: 13px 14px;
  border-left: 4px solid transparent;
}
.note-item.c-red   { border-left-color: #d64545; }
.note-item.c-amber { border-left-color: #e0a11c; }
.note-item.c-green { border-left-color: #3f9e58; }
.note-item.c-blue  { border-left-color: #3e7fc1; }
.note-item.is-pinned { background: var(--rose-bg); }
.note-item.is-done .note-text { text-decoration: line-through; opacity: 0.55; }

.note-body { flex: 1; min-width: 0; }
.note-text { word-break: break-word; white-space: pre-wrap; }
.note-time { color: var(--ink-soft); font-size: 0.78rem; margin-top: 4px; }
.note-editor { margin-bottom: 8px; padding-right: 16px; }
.note-edit-actions { display: flex; gap: 8px; }

/* per-note action buttons */
.note-actions { display: flex; gap: 2px; flex-shrink: 0; }
.note-act {
  border: 0;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  font-size: 1.02rem;
  line-height: 1;
  padding: 6px 7px;
  border-radius: 8px;
  filter: grayscale(1);
  opacity: 0.65;
}
.note-act:hover { background: var(--rose-bg-2); opacity: 1; }
.note-act.on { filter: none; opacity: 1; }
.note-act.note-del:hover { color: #d64545; }
.note-done {
  font-size: 1.15rem;
  margin-top: 1px;
  color: var(--ink-soft);
  filter: none;
}
.note-done.on { color: #3f9e58; opacity: 1; }

.note-empty, .note-none { color: var(--ink-soft); text-align: center; padding: 30px 0; list-style: none; }
.note-empty.hidden { display: none; }

@media (max-width: 640px) {
  .note-item { flex-wrap: wrap; }
  .note-actions { margin-left: auto; }
}

/* ---------- HEALTH ---------- */
.health-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 14px;
  margin-bottom: 16px;
}
.health-card {
  border-left: 4px solid transparent;
  text-align: center;
}
.health-card.c-red   { border-left-color: #d64545; }
.health-card.c-amber { border-left-color: #e0a11c; }
.health-card.c-green { border-left-color: #3f9e58; }
.health-card.c-blue  { border-left-color: #3e7fc1; }
.health-label {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--ink-soft);
  margin-bottom: 8px;
}
.health-big {
  font-size: clamp(2.2rem, 6vw, 2.8rem);
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.health-unit { font-size: 0.9rem; font-weight: 600; color: var(--ink-soft); margin-left: 5px; }
.health-pill {
  display: inline-block;
  margin: 8px 0 6px;
  padding: 3px 12px;
  border-radius: var(--radius-pill);
  font-size: 0.82rem;
  font-weight: 700;
  color: #fff;
}
.health-pill.c-red   { background: #d64545; }
.health-pill.c-amber { background: #e0a11c; }
.health-pill.c-green { background: #3f9e58; }
.health-pill.c-blue  { background: #3e7fc1; }
.health-sub { color: var(--ink-soft); font-size: 0.85rem; margin-top: 4px; }

.health-goal { margin-bottom: 16px; }
.health-goal-btns { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 18px; }
.health-goal-btn {
  border: 1.5px solid var(--line);
  background: var(--input-bg);
  color: var(--ink);
  font-family: inherit;
  font-weight: 600;
  font-size: 0.92rem;
  padding: 9px 16px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.health-goal-btn:hover { border-color: var(--pink); }
.health-goal-btn.active { background: var(--navy); color: #fff; border-color: var(--navy); }

.health-intake {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.health-intake-col {
  background: var(--rose-bg);
  border-radius: var(--radius-sm);
  padding: 16px;
  text-align: center;
}
.health-intake-num {
  font-size: clamp(1.8rem, 5vw, 2.3rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.health-intake-cap { color: var(--ink-soft); font-size: 0.85rem; margin-top: 4px; }
.health-goal-note { margin: 16px 0 10px; color: var(--ink-soft); font-size: 0.9rem; }
.health-macros { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.macro {
  text-align: center;
  padding: 12px;
  border-radius: var(--radius-sm);
  background: var(--rose-bg);
  border-top: 3px solid var(--line);
}
.macro b { display: block; font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.macro span { font-size: 0.8rem; color: var(--ink-soft); }
.macro-p { border-top-color: #3e7fc1; }
.macro-c { border-top-color: #e0a11c; }
.macro-f { border-top-color: #d64545; }

/* today's entry */
.health-today { margin-bottom: 16px; }
.health-today-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px 16px;
  margin: 10px 0 14px;
}
.health-today-fields label,
.cal-editor-fields label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink-soft);
}
.health-today-fields input,
.cal-editor-fields input {
  padding: 11px 14px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.health-today-fields input:focus,
.cal-editor-fields input:focus { outline: none; border-color: var(--pink); }
.health-today-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 10px; }
.health-today-burn { font-size: 1.05rem; }
.health-today-burn b { font-variant-numeric: tabular-nums; }

/* health progress chart */
.health-trend { margin-bottom: 16px; }
.trend-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.trend-metric-toggle { display: flex; gap: 4px; }
.trend-metric, .trend-period {
  border: 1.5px solid var(--line);
  background: var(--input-bg);
  color: var(--ink-soft);
  font-family: inherit;
  font-weight: 600;
  font-size: 0.8rem;
  padding: 5px 13px;
  border-radius: var(--radius-pill);
  cursor: pointer;
}
.trend-metric:hover, .trend-period:hover { border-color: var(--pink); }
.trend-metric.active, .trend-period.active { background: var(--navy); color: #fff; border-color: var(--navy); }
.trend-periods { display: flex; gap: 5px; margin: 12px 0 4px; flex-wrap: wrap; }
.trend-stat { display: flex; align-items: baseline; gap: 10px; margin: 4px 0 2px; }
.trend-stat b { font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.trend-delta { font-size: 0.85rem; font-weight: 600; color: var(--ink-soft); }
.trend-plot { position: relative; margin-top: 4px; }
.trend-svg { width: 100%; height: auto; display: block; touch-action: none; overflow: visible; }
.tc-grid { stroke: var(--line); stroke-width: 1; }
.tc-ylab, .tc-xlab { fill: var(--ink-soft); font-size: 11px; font-family: var(--font); }
.tc-ylab { text-anchor: end; }
.tc-area { fill: var(--chart-fill); stroke: none; }
.tc-line { fill: none; stroke: var(--chart-line); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.tc-dot { fill: var(--card); stroke: var(--chart-line); stroke-width: 1.5; }
.tc-last { fill: var(--chart-line); stroke: var(--card); stroke-width: 1.5; }
.tc-cross { stroke: var(--ink-soft); stroke-width: 1; stroke-dasharray: 3 3; }
.tc-hl { fill: var(--chart-line); stroke: var(--card); stroke-width: 2; }
.trend-tip {
  position: absolute;
  top: -4px;
  transform: translateX(-50%);
  background: var(--navy);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 5px 9px;
  border-radius: 8px;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: var(--shadow-sm);
  z-index: 5;
}
.trend-tip b { display: block; font-size: 0.88rem; }
.trend-tip[hidden] { display: none; }
.trend-empty { color: var(--ink-soft); text-align: center; padding: 24px 0; }

/* health calendar */
.health-cal { margin-bottom: 16px; }
.cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 10px 0 12px;
}
.cal-title { font-weight: 700; font-size: 1.05rem; }
.cal-nav {
  border: 1.5px solid var(--line);
  background: var(--input-bg);
  width: 34px; height: 34px;
  border-radius: 50%;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  color: var(--ink);
}
.cal-nav:hover { border-color: var(--pink); background: var(--rose-bg); }
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
}
.cal-dow {
  text-align: center;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  padding-bottom: 2px;
}
.cal-blank { min-height: clamp(46px, 7vw, 64px); }
.cal-day {
  min-height: clamp(46px, 7vw, 64px);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 4px 0;
  background: var(--rose-bg);
  border: 1.5px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  transition: background .12s, border-color .12s;
}
.cal-day:hover { background: var(--rose-bg-2); }
.cal-day.has-entry { background: var(--input-bg); box-shadow: var(--shadow-sm); }
.cal-day.today { border-color: var(--ink-soft); }
.cal-day.selected { border-color: var(--pink); background: var(--rose-bg-2); }
.cal-num { font-size: 0.9rem; font-weight: 600; }
.cal-wt { font-size: 0.66rem; color: var(--ink-soft); line-height: 1; }
.cal-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--pink); }

.cal-editor {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.cal-editor-date { font-weight: 700; margin-bottom: 10px; }
.cal-today-tag {
  font-size: 0.7rem;
  font-weight: 700;
  color: #fff;
  background: var(--pink);
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  vertical-align: middle;
}
.cal-editor-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px 16px;
  margin-bottom: 12px;
}
.cal-editor-actions { display: flex; gap: 8px; }

@media (max-width: 420px) {
  .cal-num { font-size: 0.8rem; }
  .cal-grid { gap: 3px; }
}

/* goal weight + timeline */
.health-goalweight { margin-bottom: 16px; }
.gw-inputs {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 12px 16px;
  margin: 10px 0 4px;
}
.gw-inputs .field { margin-bottom: 8px; }
.gw-result { margin-top: 10px; }
.gw-result p { margin: 0 0 12px; }
.gw-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 10px;
}
.gw-facts > div {
  background: var(--rose-bg);
  border-radius: var(--radius-sm);
  padding: 12px;
  text-align: center;
}
.gw-facts b { display: block; font-size: 1.2rem; font-variant-numeric: tabular-nums; }
.gw-facts span { font-size: 0.78rem; color: var(--ink-soft); }

/* imperial height ft/in inputs */
.ftin { display: flex; gap: 8px; }
.ftin input { width: 100%; }

.health-food { margin-bottom: 16px; }
.health-food ul { margin: 10px 0 0; padding-left: 20px; display: grid; gap: 8px; }
.health-food li { line-height: 1.5; }
.health-disclaimer { color: var(--ink-soft); font-size: 0.8rem; line-height: 1.5; }

/* settings health fields */
.settings-subhead {
  margin: 24px 0 4px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 1.05rem;
}
.field-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0 16px;
}
.field select {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 1rem;
  background: var(--input-bg);
}
.field select:focus { outline: none; border-color: var(--pink); }
.field input[type="number"] {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 1rem;
}
.field input[type="number"]:focus { outline: none; border-color: var(--pink); }

@media (max-width: 480px) {
  .health-intake { grid-template-columns: 1fr; }
}

/* ---------- LIVESCORE ---------- */
.ls-league { margin-bottom: 22px; }
.ls-league-name {
  margin: 0 0 10px;
  font-size: 1.05rem;
  display: flex;
  align-items: center;
  gap: 8px;
}
/* .ls-list column layout is defined with the day tabs further down. */
.ls-match {
  background: var(--card);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  padding: 13px 16px;
}
.ls-match.is-live { box-shadow: var(--shadow-sm), inset 3px 0 0 #d64545; }
.ls-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto;
  align-items: center;
  gap: 12px;
}
.ls-team { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ls-home { text-align: right; }
.ls-away { text-align: left; }
.ls-score {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-align: center;
  min-width: 52px;
}
.ls-badge {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ink-soft);
  background: var(--rose-bg);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
.ls-badge.ls-live { color: #fff; background: #d64545; }
.ls-badge.ls-final { color: var(--ink); }
.ls-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--input-bg);
  animation: ls-pulse 1.2s ease-in-out infinite;
}
@keyframes ls-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
.ls-event .ls-row { grid-template-columns: 1fr auto; }
.ls-event-name { font-weight: 600; }
.ls-hint { color: var(--ink-soft); font-size: 0.85rem; margin-top: 16px; }

/* Day tabs (Yesterday / Today / Tomorrow) */
.ls-daytabs {
  display: flex;
  gap: 4px;
  margin: 0 0 18px;
  padding: 4px;
  background: var(--rose-bg-2);
  border-radius: var(--radius);
}
.ls-daytab {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  border: 0;
  background: none;
  color: var(--ink-soft);
  font-family: inherit;
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  position: relative;
  transition: background 0.15s ease, color 0.15s ease;
}
.ls-daytab:hover { color: var(--ink); }
.ls-daytab.on { background: var(--card); color: var(--ink); box-shadow: var(--shadow-sm); }
.ls-daytab-l { font-weight: 800; font-size: 0.95rem; }
.ls-daytab-d { font-size: 0.72rem; opacity: 0.8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.ls-daytab-n {
  position: absolute;
  top: 5px; right: 8px;
  font-size: 0.66rem;
  font-weight: 800;
  line-height: 1;
  padding: 2px 5px;
  border-radius: var(--radius-pill);
  background: var(--rose-bg);
  color: var(--ink-soft);
}
.ls-daytab.on .ls-daytab-n { background: var(--pink); color: #fff; }
.ls-day-empty { color: var(--ink-soft); font-size: 0.9rem; padding: 4px 0 2px; }
.ls-day .ls-league { margin-top: 18px; }
.ls-day .ls-league:first-of-type { margin-top: 0; }

/* Matches flow into COLUMNS rather than stretching to the full page width — a
   single result row across a wide desktop was mostly empty space. */
.ls-list {
  display: grid;
  /* Wide enough for two full club names plus score and status — narrower than
     this and names like "Brommapojkarna" get ellipsised. */
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 460px), 1fr));
  gap: 10px;
  align-items: start;
}

/* Goals + cards (scorers below the score line) */
.ls-goals {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px 18px;
  margin-top: 11px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.ls-goals-a { text-align: right; }
.ls-ev { font-size: 0.82rem; color: var(--ink-soft); line-height: 1.5; }
.ls-ev-ic { font-size: 0.72rem; margin-right: 5px; }
.ls-goals-a .ls-ev-ic { margin-right: 0; margin-left: 5px; }
.ls-ev-who { color: var(--ink); font-weight: 600; }
.ls-min { color: var(--ink-soft); font-weight: 700; font-variant-numeric: tabular-nums; }

/* Pin-a-match star (Live Results → My Dashboard) */
.ls-row:has(.ls-pin) { grid-template-columns: auto 1fr auto 1fr auto; }
.ls-event .ls-row:has(.ls-pin) { grid-template-columns: auto 1fr auto; }
.ls-pin {
  border: 0;
  background: none;
  cursor: pointer;
  font-size: 1.15rem;
  line-height: 1;
  width: 26px;
  padding: 2px;
  color: var(--ink-soft);
  transition: transform 0.1s ease, color 0.1s ease;
}
.ls-pin:hover { color: var(--pink-dark); transform: scale(1.15); }
.ls-pin.on { color: #e6a400; }

/* Follow-a-team star (sits next to each team name) */
.ls-fav {
  border: 0;
  background: none;
  cursor: pointer;
  font-size: 0.95rem;
  line-height: 1;
  padding: 0 4px;
  color: var(--ink-soft);
  vertical-align: baseline;
  transition: transform 0.1s ease, color 0.1s ease;
}
.ls-home .ls-fav { margin-right: 2px; }
.ls-away .ls-fav { margin-left: 2px; }
.ls-fav:hover { color: var(--pink-dark); transform: scale(1.2); }
.ls-fav.on { color: #e6a400; }
/* A match involving a followed team gets a soft gold accent */
.ls-match.has-fav { box-shadow: var(--shadow-sm), inset 3px 0 0 #e6a400; }
.ls-match.has-fav.is-live { box-shadow: var(--shadow-sm), inset 3px 0 0 #d64545; }

/* Followed-teams bar at the top of Live Results */
.ls-favbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}
.ls-favbar-lbl { font-weight: 700; color: var(--ink-soft); font-size: 0.85rem; margin-right: 2px; }
.ls-favchip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.85rem;
  font-weight: 600;
  background: var(--rose-bg);
  color: var(--ink);
  padding: 4px 6px 4px 12px;
  border-radius: var(--radius-pill);
}
.ls-favchip-x {
  border: 0;
  background: none;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  color: var(--ink-soft);
  padding: 0 4px;
  border-radius: 50%;
}
.ls-favchip-x:hover { color: var(--pink-dark); }

@media (max-width: 560px) {
  .ls-row { grid-template-columns: 1fr auto 1fr; }
  .ls-row:has(.ls-pin) { grid-template-columns: auto 1fr auto 1fr; }
  .ls-badge { grid-column: 1 / -1; justify-self: center; margin-top: 2px; }
  .ls-event .ls-row { grid-template-columns: 1fr; }
  .ls-event .ls-row:has(.ls-pin) { grid-template-columns: auto 1fr; }
  .ls-event .ls-badge { grid-column: auto; }
}

/* ---------- WEATHER PAGE ---------- */
.weather-page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.wx-search { display: flex; gap: 8px; flex-wrap: wrap; }
.wx-search-input {
  padding: 9px 14px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 0.95rem;
  min-width: 160px;
}
.wx-search-input:focus { outline: none; border-color: var(--pink); }

.wx-current {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 100%);
  color: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: clamp(20px, 4vw, 32px);
  margin-bottom: 18px;
}
.wx-current-main { display: flex; align-items: center; gap: 18px; }
.wx-current-icon { font-size: clamp(3rem, 9vw, 4.5rem); line-height: 1; }
.wx-current-temp {
  font-size: clamp(2.8rem, 9vw, 4rem);
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.wx-current-desc { color: #c9cce0; margin-top: 4px; }
.wx-details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 12px;
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.wx-detail { display: flex; flex-direction: column; gap: 3px; }
.wx-detail span { font-size: 0.8rem; color: #b7bad0; }
.wx-detail b { font-size: 1.05rem; }

.wx-block {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: clamp(16px, 3vw, 24px);
  margin-bottom: 18px;
}
.wx-block-title { margin: 0 0 14px; font-size: 1.1rem; }

.wx-hours {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 6px;
  scroll-snap-type: x proximity;
}
.wx-hour {
  flex: 0 0 auto;
  width: 72px;
  text-align: center;
  background: var(--rose-bg);
  border-radius: var(--radius-sm);
  padding: 12px 6px;
  scroll-snap-align: start;
}
.wx-hour-time { font-size: 0.8rem; color: var(--ink-soft); font-weight: 600; }
.wx-hour-icon { font-size: 1.5rem; margin: 6px 0; }
.wx-hour-temp { font-weight: 700; font-variant-numeric: tabular-nums; }
.wx-hour-pop { font-size: 0.72rem; color: var(--pink-dark); margin-top: 3px; min-height: 1em; }

.wx-days { display: grid; gap: 4px; }
.wx-day {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  align-items: center;
  gap: 14px;
  padding: 11px 8px;
  border-radius: var(--radius-sm);
}
.wx-day:nth-child(odd) { background: var(--rose-bg); }
.wx-day-name { font-weight: 600; }
.wx-day-icon { font-size: 1.4rem; }
.wx-day-pop { font-size: 0.8rem; color: var(--pink-dark); min-width: 48px; text-align: right; }
.wx-day-temps { font-variant-numeric: tabular-nums; min-width: 74px; text-align: right; }
.wx-day-temps b { font-weight: 700; }
.wx-day-temps span { color: var(--ink-soft); margin-left: 6px; }

/* ---------- FEED (news/gaming/politics/sport) ---------- */
.feed-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.feed-sources {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}
.feed-chip {
  font-size: 0.8rem;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  background: var(--card);
  color: var(--ink-soft);
  box-shadow: var(--shadow-sm);
  border: 1px solid transparent;
  font-family: inherit;
  cursor: pointer;
}
.feed-chip:hover { color: var(--ink); border-color: var(--line); }
.feed-chip.on { background: var(--pink); color: #fff; border-color: var(--pink); }
.feed-chip-n { opacity: 0.75; font-weight: 800; margin-left: 3px; }
.feed-chips { display: flex; flex-wrap: wrap; gap: 6px; }

/* News toolbar: sort / page size / per-source cap / paywall toggle */
.feed-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
/* Shown when every proxy failed and the list is a saved fallback copy */
.feed-stale {
  margin: 10px 0 0;
  padding: 8px 12px;
  background: rgba(214, 138, 47, 0.12);
  color: #d68a2f;
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
  font-weight: 600;
}
.feed-ctl { display: flex; align-items: center; gap: 6px; font-size: 0.82rem; color: var(--ink-soft); font-weight: 600; }
.feed-ctl select {
  font-family: inherit;
  font-size: 0.82rem;
  color: var(--ink);
  background: var(--input-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 4px 8px;
}
.feed-ctl-check input { width: 16px; height: 16px; accent-color: var(--pink); }
.article-lock { margin-left: 6px; font-size: 0.75rem; }

/* Pager */
.feed-pager {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin-top: 6px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.feed-pageinfo { font-size: 0.82rem; color: var(--ink-soft); font-weight: 600; }
.feed-pager .btn[disabled] { opacity: 0.4; pointer-events: none; }
.feed-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
  gap: 14px;
}
.article {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 16px 18px;
  transition: transform .12s, box-shadow .12s;
}
.article:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.article-src {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--pink-dark);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.article-src .dot { color: var(--ink-soft); font-weight: 400; text-transform: none; letter-spacing: 0; }
.article-title {
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
}
.article:hover .article-title { color: var(--pink-dark); }
.article-desc {
  font-size: 0.88rem;
  color: var(--ink-soft);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.feed-loading, .feed-error, .feed-none {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--ink-soft);
  padding: 40px 20px;
}
.feed-error { color: var(--pink-dark); }
.spinner {
  width: 26px; height: 26px;
  border: 3px solid var(--line);
  border-top-color: var(--pink);
  border-radius: 50%;
  margin: 0 auto 12px;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- SOURCE SETTINGS (dynamic) ---------- */
.src-group { margin-bottom: 22px; }
.src-group h3 {
  margin: 0 0 10px;
  font-size: 1rem;
  display: flex;
  align-items: center;
  gap: 8px;
}
.src-country {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--ink-soft);
  background: var(--rose-bg-2);
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  margin-left: 4px;
}
.src-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 2px 16px;
}

/* ---------- SETTINGS ---------- */
.settings-layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: clamp(16px, 3vw, 28px);
  align-items: start;
}
.settings-tabs {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 8px;
  position: sticky;
  top: calc(var(--header-h) + 16px);
}
.settings-tabs a {
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  color: var(--ink-soft);
}
.settings-tabs a:hover { background: var(--rose-bg-2); color: var(--ink); }
.settings-tabs a.active { background: var(--pink); color: #fff; }

.settings-panels {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: clamp(20px, 4vw, 32px);
}
.settings-panel { display: none; }
.settings-panel.active { display: block; animation: fade .2s ease; }
.settings-panel h2 { margin: 0 0 18px; }

.field { display: block; margin-bottom: 16px; }
.field > span { display: block; font-weight: 600; margin-bottom: 6px; font-size: 0.92rem; }
.field input[type="text"] {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 1rem;
}
.field input:focus { outline: none; border-color: var(--pink); }
.field-hint { color: var(--ink-soft); font-size: 0.88rem; margin: 0 0 16px; }
.check {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  font-weight: 500;
  cursor: pointer;
}
.check input { width: 18px; height: 18px; accent-color: var(--pink); }

/* ---------- FOOTER ---------- */
.site-footer {
  text-align: center;
  padding: 22px 16px 30px;
  color: var(--ink-soft);
  font-size: 0.85rem;
}
/* Buy me a coffee — brand-yellow sponsor button (from Where-sMyBand) */
.coffee-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 12px;
  background: #ffdd00;                 /* Buy Me a Coffee brand yellow */
  color: #14200f;
  border: 1px solid #d9bb00;
  border-radius: var(--radius-pill);
  padding: 9px 16px;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.12s, filter 0.12s;
}
.coffee-btn:hover, .coffee-btn:focus-visible {
  filter: brightness(1.07);
  transform: translateY(-1px);
  outline: none;
}
.coffee-cup { font-size: 1.05rem; line-height: 1; }

.site-footer strong { color: var(--ink); }
.site-footer span { color: var(--pink-dark); font-weight: 700; }
.foot-sep { margin: 0 6px; opacity: 0.5; }
/* Live sync status (footer). Override the generic footer-span colour. */
.site-footer span.sync-status { color: var(--ink-soft); font-weight: 600; }
.site-footer span.sync-status[data-state="ok"] { color: #3f9e58; }
.site-footer span.sync-status[data-state="saving"],
.site-footer span.sync-status[data-state="loading"] { color: var(--ink-soft); }
.site-footer span.sync-status[data-state="err"] { color: #d68a2f; }

/* ---------- TOAST ---------- */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--navy);
  color: #fff;
  padding: 12px 22px;
  border-radius: var(--radius-pill);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  opacity: 0;
  transition: opacity .2s, transform .2s;
  z-index: 100;
  font-weight: 600;
  font-size: 0.9rem;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* Tablet & mobile: hamburger menu */
@media (max-width: 900px) {
  .hamburger { display: block; }

  .mainnav {
    position: fixed;
    top: 0;
    right: 0;
    height: 100dvh;
    width: min(84vw, 340px);
    background: var(--navy);
    margin: 0;
    padding: calc(var(--header-h) + 14px) 16px 24px;
    transform: translateX(100%);
    transition: transform .28s ease;
    overflow-y: auto;
    z-index: 45;
    box-shadow: -12px 0 40px rgba(0, 0, 0, 0.3);
  }
  .mainnav.open { transform: translateX(0); }

  .nav-list { flex-direction: column; align-items: stretch; gap: 4px; }
  .nav-link { justify-content: space-between; font-size: 1.05rem; padding: 13px 14px; }

  /* Submenus become static/expanded on mobile */
  .subnav {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    background: transparent;
    box-shadow: none;
    padding: 0 0 6px 14px;
    display: none;
  }
  .has-sub.expanded > .subnav { display: block; }
  .nav-sublink { padding: 11px 14px; font-size: 1rem; }
}

/* Small phones: settings tabs go horizontal */
@media (max-width: 640px) {
  .settings-layout { grid-template-columns: 1fr; }
  .settings-tabs {
    flex-direction: row;
    position: static;
    overflow-x: auto;
  }
  .settings-tabs a { white-space: nowrap; }
  .note-form { flex-direction: column; }
}

/* TV / very large widescreen: scale up comfortably */
@media (min-width: 1600px) {
  :root { --maxw: 1500px; --header-h: 66px; }
  body { font-size: 18px; }
  .nav-link { font-size: 1.05rem; }
}
@media (min-width: 2200px) {
  :root { --maxw: 1800px; }
  body { font-size: 20px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ============================================================
   MY DASHBOARD — always-on custom board
   ============================================================ */
.dash {
  --dash-accent: #3e7fc1;
  --dash-cols: 3;
  --dash-zoom: 1;
  --dash-gap: 16px;
  --dash-pad: 16px 18px;
  --dash-radius: 16px;
  transition: filter 0.2s ease;
}
/* Chosen font applies to the whole board (set by applyDashStyle). */
.dash[data-font="custom"] .dash-grid { font-family: var(--dash-font); }
/* Custom colours are applied by REDEFINING the theme variables inside the board,
   so every descendant that already uses var(--ink) / var(--ink-soft) picks them
   up — including secondary lines like "Feels 18°", "Tomorrow" and agenda times,
   which is where unreadable washed-out text came from. */
.dash[data-ink="custom"] .dash-grid { --ink: var(--dash-ink); }
.dash[data-muted="custom"] .dash-grid { --ink-soft: var(--dash-ink-soft); }
.dash[data-ink="custom"] .dash-grid { color: var(--ink); }
/* Hide the site footer (logo/title/description) while on the dashboard */
body.dash-mode .site-footer { display: none; }

.dash-bar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 14px;
}
/* Keep the Customize button unobtrusive on the wall; full on hover / while editing */
#dashEditBtn { opacity: 0.5; transition: opacity 0.2s ease; }
#dashEditBtn:hover, .dash.dash-editing #dashEditBtn { opacity: 1; }

/* The chosen column count is a MAXIMUM, never a fixed value: a column may never
   be squeezed below --dash-colmin, so the board sheds columns by itself as the
   window narrows. This is what keeps widget content inside its card instead of
   spilling over neighbours — no width-specific media query can do it reliably,
   because the same pixel width means different things at different zoom levels
   and column counts. */
.dash-grid {
  --dash-colmin: 250px;
  display: grid;
  /* Each track is at least --dash-colmin wide, and at most 1/cols of the row, so
     auto-fit lands on --dash-cols when there's room and fewer when there isn't. */
  grid-template-columns: repeat(auto-fit, minmax(
      min(100%, max(var(--dash-colmin), calc(100% / var(--dash-cols, 3) - var(--dash-gap, 16px)))), 1fr));
  gap: var(--dash-gap, 16px);
  align-items: start;
  zoom: var(--dash-zoom, 1);   /* overall text/size scale */
}
/* Masonry: tight vertical packing so a tall widget doesn't leave the next column empty.
   column-count + column-width together = "at most N columns, each at least this wide". */
.dash[data-layout="masonry"] .dash-grid {
  display: block;
  column-count: var(--dash-cols, 3);
  column-width: var(--dash-colmin, 250px);
  column-gap: var(--dash-gap, 16px);
}
.dash[data-layout="masonry"] .dash-card { break-inside: avoid; margin-bottom: var(--dash-gap, 16px); }
.dash[data-layout="masonry"] .dash-card.dash-wide-span { column-span: all; }  /* "Wide" = full width in masonry */

/* Base card: clean/borderless by default. Card STYLE + shadow come from the .dash data-attrs. */
.dash-card {
  /* user colour → card-style surface → nothing */
  background: var(--dash-card-bg, var(--card-surface, transparent));
  border: 1px solid transparent;
  border-radius: var(--dash-radius, 16px);
  padding: var(--dash-pad, 16px 18px);
  min-height: 60px;
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  /* Containment: a grid/flex item defaults to min-width:auto, which refuses to
     shrink below its content and is the usual reason a widget pokes out over its
     neighbour. Pin it to 0 and make long text wrap rather than push the box wide. */
  min-width: 0;
  overflow-wrap: anywhere;
  /* Lets children size against THIS card's width (cqw) instead of the viewport. */
  container-type: inline-size;
}
/* Same rule for every descendant box that participates in flex/grid layout. */
.dash-card * { min-width: 0; }
/* Media/embeds can't overflow their card. */
.dash-card img, .dash-card svg, .dash-card canvas { max-width: 100%; height: auto; }
/* ---- Card styles ----
   Each style sets --card-surface rather than `background` directly, and the card
   paints var(--dash-card-bg, var(--card-surface, transparent)). That way a colour
   the user picks always wins without needing !important or specificity tricks. */
.dash[data-cardstyle="soft"]   .dash-card { --card-surface: var(--card); }
.dash[data-cardstyle="solid"]  .dash-card { --card-surface: var(--card); border-color: var(--line); }
.dash[data-cardstyle="outline"] .dash-card { border-color: var(--line); }
.dash[data-cardstyle="glass"]  .dash-card {
  --card-surface: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(12px) saturate(1.3);
  -webkit-backdrop-filter: blur(12px) saturate(1.3);
}
:root:not([data-theme="dark"]) .dash[data-cardstyle="glass"] .dash-card { --card-surface: rgba(255, 255, 255, 0.5); border-color: rgba(255, 255, 255, 0.6); }
/* Shadow toggle (applies to styles that have a surface) */
.dash[data-shadow="on"][data-cardstyle="soft"]  .dash-card,
.dash[data-shadow="on"][data-cardstyle="solid"] .dash-card,
.dash[data-shadow="on"][data-cardstyle="glass"] .dash-card { box-shadow: var(--shadow-sm); }

/* Editing: always show an outlined card so sections are easy to see and arrange.
   Sets the surface variable too, so a chosen card colour still wins and you can
   judge it while editing. */
.dash.dash-editing .dash-card {
  --card-surface: var(--card);
  border-color: var(--line);
  border-top: 3px solid var(--dash-accent);
  box-shadow: var(--shadow-sm);
}

/* Live-score rows inside the dashboard: clean in view mode (no white boxes),
   keeping just the live indicator and a faint divider. Full cards while editing. */
.dash .ls-match {
  background: transparent;
  box-shadow: none;
  padding: 7px 0;
}
.dash .ls-match.is-live { box-shadow: inset 3px 0 0 #d64545; padding-left: 11px; }
.dash .ls-match + .ls-match { border-top: 1px solid var(--line); }
.dash.dash-editing .ls-match {
  background: var(--card);
  box-shadow: var(--shadow-sm);
  padding: 13px 16px;
  border-top: 0;
}
.dash.dash-editing .ls-match.is-live { box-shadow: var(--shadow-sm), inset 3px 0 0 #d64545; }
.dash-card-h {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dash-accent);
  margin-bottom: 10px;
}

/* Clock + timer + alarm */
.dash-clock { text-align: center; margin-bottom: 12px; }
.dash-time {
  /* Sized against the CARD, not the viewport: a narrow column on a wide screen
     was rendering a clock far too big for its own card and overflowing it. */
  font-size: clamp(1.6rem, 22cqw, 3.1rem);
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}
/* Fallback for engines without container queries. */
@supports not (container-type: inline-size) {
  .dash-time { font-size: clamp(1.6rem, 5vw, 3.1rem); }
}
.dash-date { color: var(--ink-soft); margin-top: 6px; font-size: 0.95rem; }

/* The timer is its own card now, so it doesn't need its own tinted box inside
   the card — that read as a box within a box when stacked in portrait. */
.dash-timer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;          /* buttons drop to a second line instead of spilling out */
  gap: 8px 10px;
  padding: 0;
  background: transparent;
  border-radius: var(--radius-sm);
  margin-bottom: 0;
}
.dash-timer-disp { font-size: 1.15rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.dash-timer-btns { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
/* Follow the card's text colour rather than fixed theme colours, so these stay
   visible whatever background/ink combination is chosen (they were white-on-white
   on a light theme over a dark background). */
.dash-timer-btns button {
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
  opacity: 0.8;
  border-radius: var(--radius-sm);
  padding: 4px 8px;
  font-size: 0.8rem;
  cursor: pointer;
  font-family: inherit;
}
.dash-timer-btns button:hover { opacity: 1; }
.dash-timer-btns button:hover { border-color: var(--dash-accent); color: var(--dash-accent); }

.dash-alarm {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;          /* time input wraps under the label when narrow */
  gap: 8px 10px;
  font-size: 0.9rem;
  color: var(--ink-soft);
}
.dash-alarm label { display: flex; align-items: center; gap: 6px; cursor: pointer; min-width: 0; }
.dash-alarm input[type="time"] {
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
  border-radius: var(--radius-sm);
  padding: 4px 8px;
  font-family: inherit;
  max-width: 100%;
}

/* Weather */
.dash-wx-main { display: flex; align-items: center; gap: 10px; }
.dash-wx-icon { font-size: 2.2rem; line-height: 1; }
.dash-wx-temp { font-size: 2.2rem; font-weight: 700; line-height: 1; }
.dash-wx-place { font-weight: 600; margin-top: 6px; }
.dash-wx-desc { color: var(--ink-soft); font-size: 0.9rem; margin-top: 2px; }
.dash-wx-tom { color: var(--ink-soft); font-size: 0.85rem; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }

/* News lists */
.dash-news { display: flex; flex-direction: column; }
.dash-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
}
.dash-news .dash-item:last-child { border-bottom: 0; }
.dash-item:hover .dash-item-t { color: var(--dash-accent); }
.dash-item-t { font-size: 0.9rem; font-weight: 600; line-height: 1.3; }
.dash-item-s { font-size: 0.75rem; color: var(--ink-soft); }

/* Live scores inside dashboard */
.dash-live-h {
  font-size: 0.85rem;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--dash-accent);
}
.dash-muted { color: var(--ink-soft); font-size: 0.88rem; padding: 6px 0; }
.dash-stale { color: #d68a2f; font-weight: 600; font-size: 0.78rem; }

/* Customize panel */
.dash-tools {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 18px 20px 20px;
  margin-bottom: 16px;
  /* Never let a control push the panel wider than the page. */
  max-width: 100%;
  overflow-x: clip;
}
.dash-tools * { min-width: 0; }

/* Tab strip — one group of controls at a time keeps the panel short on a tablet */
.dt-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 4px 0 14px;
  padding: 4px;
  background: var(--rose-bg-2);
  border-radius: var(--radius-pill);
}
.dt-tab {
  flex: 1 1 auto;
  border: 0;
  background: none;
  color: var(--ink-soft);
  font: 700 0.85rem var(--font);
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}
.dt-tab:hover { color: var(--ink); }
.dt-tab.on { background: var(--card); color: var(--ink); box-shadow: var(--shadow-sm); }
.dt-panel { animation: dt-fade 0.15s ease; }
@keyframes dt-fade { from { opacity: 0; } to { opacity: 1; } }
.dt-hint {
  margin: 12px 0 0;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--ink-soft);
}
/* One-click readability fixer */
.dt-fixbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.dt-fixbar .dt-hint { margin: 0; flex: 1 1 200px; }
.dt-grid {
  display: grid;
  /* min(100%, …) stops a 190px minimum from overflowing a narrower phone. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 12px 20px;
  margin-bottom: 16px;
}
/* Each control sits in its own soft well: label on top, control below, so a wide
   control can never collide with its own label the way a single flex row did. */
.dt-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 12px;
  padding: 8px 10px;
  background: var(--rose-bg-2);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  transition: border-color 0.15s ease;
}
.dt-row:hover { border-color: var(--line); }
.dt-row > span { font-size: 0.88rem; color: var(--ink-soft); font-weight: 600; }
.dt-row select, .dt-row input[type="range"] {
  font-family: inherit;
  color: var(--ink);
  max-width: 100%;
}
.dt-row input[type="range"] { flex: 1 1 110px; }
.dt-row select {
  border: 1px solid var(--line);
  background: var(--input-bg);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  max-width: 100%;
}
.dt-swatches { display: flex; gap: 6px; }
.dt-sw {
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
}
.dt-sw.on { border-color: var(--ink); box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--ink-soft); }

.dt-sub {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 10px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
/* Hairline that runs out from each section title. */
.dt-sub::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}
.dt-sub:first-child { padding-top: 0; border-top: 0; }

/* Themes + saved layouts */
.dt-themes { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.dt-theme {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
  border-radius: var(--radius-pill); padding: 6px 12px 6px 8px;
  font: 600 0.85rem var(--font); cursor: pointer;
}
.dt-theme:hover { border-color: var(--dash-accent, var(--pink)); }
.dt-theme-dot { width: 14px; height: 14px; border-radius: 50%; }
.dt-saved { gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.dt-saved select { flex: 1 1 140px; min-width: 0; }
/* Theme chips get a subtle lift and a clear selected state. */
.dt-theme { transition: border-color 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease; }
.dt-theme:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.dt-theme-dot { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15); flex: none; }

/* Colour inputs */
input[type="color"] {
  -webkit-appearance: none; appearance: none;
  width: 30px; height: 26px; padding: 0; border: 1px solid var(--line);
  border-radius: var(--radius-sm); background: none; cursor: pointer;
}
input[type="color"]::-webkit-color-swatch-wrapper { padding: 2px; }
input[type="color"]::-webkit-color-swatch { border: none; border-radius: 4px; }
.dt-accent-wrap { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.dt-grad { display: flex; gap: 6px; }
.dt-sound { display: flex; gap: 6px; align-items: center; }
.dt-sound select { min-width: 0; }
.dt-night { flex-wrap: wrap; gap: 6px 8px; justify-content: flex-end; }
.dt-night input[type="time"] {
  border: 1px solid var(--line); background: var(--input-bg); color: var(--ink);
  border-radius: var(--radius-sm); padding: 4px 8px; font-family: inherit;
}
.dt-night input[type="range"] { flex: 1; min-width: 90px; }
.dt-wpick { width: 26px; height: 22px; flex: none; }
.dt-w {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;      /* controls wrap under the name instead of spilling out */
  gap: 6px 10px;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
}
.dt-w:nth-child(odd) { background: var(--rose-bg-2); }
.dt-w > label { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1 1 auto; }
.dt-move { display: flex; gap: 4px; }
.dt-move button {
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  border-radius: var(--radius-sm);
  width: 28px; height: 28px;
  cursor: pointer;
  font-size: 0.85rem;
}
.dt-move button:hover { border-color: var(--dash-accent); color: var(--dash-accent); }

/* Per-section controls (colour + wide) */
.dt-w-ctrls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.dt-colors { display: flex; gap: 4px; }
.dt-mini-sw {
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
}
.dt-mini-sw.on { border-color: var(--ink); }
.dt-mini-auto {
  background: var(--rose-bg-2);
  color: var(--ink-soft);
  font: 700 10px/1 var(--font);
  display: flex; align-items: center; justify-content: center;
}
.dt-wide {
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink-soft);
  border-radius: var(--radius-sm);
  padding: 4px 10px;
  font: 600 0.78rem var(--font);
  cursor: pointer;
}
.dt-wide.on { background: var(--dash-accent); border-color: var(--dash-accent); color: #fff; }
.dt-row input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--dash-accent); }

/* ---- Dashboard theme override (independent of the global theme) ---- */
body.dash-mode[data-dash-theme="light"] {
  --navy: #2b2d31; --navy-2: #35383d; --rose-bg: #f6f7f8; --rose-bg-2: #eef0f2;
  --pink: #565b62; --pink-dark: #33363b; --ink: #1f2124; --ink-soft: #6b7076;
  --card: #ffffff; --line: #e4e6e9; --input-bg: #ffffff;
}
body.dash-mode[data-dash-theme="dark"] {
  --navy: #0e1013; --navy-2: #171a1f; --rose-bg: #15171b; --rose-bg-2: #1b1e23;
  --pink: #4b5058; --pink-dark: #7b828c; --ink: #e7e9ec; --ink-soft: #9aa1a9;
  --card: #22262c; --line: #333941; --input-bg: #2a2f36;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.45); --shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.32);
}

/* ---- Dashboard backgrounds (full-bleed "always-on" feel) ---- */
body.dash-mode[data-dash-bg="slate"]    { background: linear-gradient(160deg, #3b4250 0%, #222831 100%); }
body.dash-mode[data-dash-bg="midnight"] { background: linear-gradient(160deg, #0f2027 0%, #203a43 55%, #2c5364 100%); }
body.dash-mode[data-dash-bg="aurora"]   { background: linear-gradient(160deg, #1d2b64 0%, #3a1c71 55%, #4a569d 100%); }
body.dash-mode[data-dash-bg="sunset"]   { background: linear-gradient(160deg, #ee6c4d 0%, #f2a154 55%, #f6c177 100%); }
body.dash-mode[data-dash-bg="ocean"]    { background: linear-gradient(160deg, #14708f 0%, #2193b0 55%, #6dd5ed 100%); }
/* Mirror: pure black + max-contrast text, for use behind two-way mirror glass */
body.dash-mode[data-dash-bg="mirror"] {
  background: #000;
  --ink: #ffffff; --ink-soft: #c9c9c9; --line: #222; --card: #000;
  --rose-bg: #000; --rose-bg-2: #0b0b0b; --input-bg: #111;
}

/* Responsive: collapse the board on small screens.
   These now lower the column CAP (and the minimum column width) rather than
   hard-setting grid-template-columns — the old rules had no effect at all in
   masonry mode, which is the default, so the board stayed at 3 columns on a
   phone and every widget overflowed its column. */
@media (max-width: 900px) {
  .dash-grid { --dash-cols: 2; --dash-colmin: 220px; }
}
@media (max-width: 560px) {
  .dash-grid { --dash-cols: 1; --dash-colmin: 100%; }
  .dash[data-layout="masonry"] .dash-grid { column-count: 1; column-width: auto; }
}
/* Portrait mount (per-device via the tablet's rotation — never a synced setting):
   stack widgets in one tall column and enlarge the clock for wall readability. */
@media (orientation: portrait) {
  body.dash-mode .dash-grid { --dash-cols: 1; --dash-colmin: 100%; }
  body.dash-mode.dash-mode .dash[data-layout="masonry"] .dash-grid { column-count: 1; column-width: auto; }
  body.dash-mode .dash-time { font-size: clamp(2.6rem, 12vw, 4.4rem); }
}

/* ============================================================
   CALENDAR — shared household appointments
   ============================================================ */
.cal-form {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 16px 18px;
  margin-bottom: 18px;
}
.cal-title-input, .cal-note-input {
  width: 100%;
  border: 1px solid var(--line);
  background: var(--input-bg);
  color: var(--ink);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-family: inherit;
  font-size: 0.95rem;
  margin-bottom: 10px;
}
.cal-title-input:focus, .cal-note-input:focus,
.cal-field input:focus, .cal-field select:focus { outline: none; border-color: var(--pink); }
.cal-form-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.cal-field { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 120px; }
.cal-field > span { font-size: 0.78rem; font-weight: 600; color: var(--ink-soft); }
.cal-field input, .cal-field select {
  border: 1px solid var(--line);
  background: var(--input-bg);
  color: var(--ink);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  font-family: inherit;
}
.cal-form-actions { display: flex; gap: 8px; }

.cal-people {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  margin-bottom: 18px;
}
.cal-people-h {
  width: 100%;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-soft);
}
.cal-person { display: flex; align-items: center; gap: 8px; }
.cal-dot { width: 11px; height: 11px; border-radius: 50%; display: inline-block; flex: none; }
.cal-pname {
  border: 1px solid var(--line);
  background: var(--input-bg);
  color: var(--ink);
  border-radius: var(--radius-sm);
  padding: 5px 8px;
  font-family: inherit;
  width: 120px;
}
.cal-pcolors { display: flex; gap: 4px; }
.cal-sw { width: 18px; height: 18px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; }
.cal-sw.on { border-color: var(--ink); }

.cal-upcoming-h { font-size: 1.05rem; margin: 0 0 12px; }
.cal-day-group { margin-bottom: 16px; }
.cal-day-h {
  font-size: 0.8rem; font-weight: 700; color: var(--pink-dark);
  text-transform: capitalize; margin-bottom: 6px;
}
.cal-item {
  display: flex; align-items: center; gap: 10px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin-bottom: 6px;
}
.cal-time { font-weight: 700; font-variant-numeric: tabular-nums; min-width: 62px; font-size: 0.9rem; }
.cal-item-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cal-item-t { font-weight: 600; }
.cal-item-who { font-size: 0.8rem; color: var(--ink-soft); }
.cal-item-btns { display: flex; gap: 4px; }
.cal-item-btns button {
  border: 1px solid var(--line); background: var(--card); color: var(--ink-soft);
  border-radius: var(--radius-sm); width: 30px; height: 30px; cursor: pointer; font-size: 0.85rem;
}
.cal-item-btns button:hover { border-color: var(--pink); color: var(--ink); }

/* ---- Dashboard Agenda widget (per person, stacked) ---- */
.dash-person + .dash-person { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.dash-person-h {
  display: flex; align-items: center; gap: 7px;
  font-weight: 700; font-size: 0.9rem; margin-bottom: 6px;
}
.dash-appt { display: flex; gap: 10px; padding: 3px 0; font-size: 0.9rem; }
.dash-appt-when { color: var(--ink-soft); font-weight: 600; white-space: nowrap; min-width: 88px; }
.dash-appt-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-appt-none { padding: 2px 0; }

/* ---- Dashboard Today's-fixtures widget ---- */
.dash-fx-league {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--dash-accent); margin: 8px 0 4px;
}
.dash-fx-league:first-child { margin-top: 0; }
.dash-fx { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; font-size: 0.9rem; }
/* The match name absorbs all the shrinking (and ellipsises); the kickoff time is
   never squeezed below its own text, which was clipping it in narrow columns. */
.dash-fx-m { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-fx-t { flex: 0 0 auto; color: var(--ink-soft); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dash-fx-t.is-live { color: #d64545; }

@media (max-width: 560px) {
  .cal-form-row { flex-direction: column; }
  .cal-field { min-width: 0; }
}

/* ---- Dashboard Health-progress widget ---- */
.dash-hgrid { display: flex; gap: 16px; flex-wrap: wrap; }
.dash-hstat { min-width: 62px; }
.dash-hval { font-size: 1.5rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.dash-hlabel { font-size: 0.75rem; color: var(--ink-soft); margin-top: 2px; }
.dash-hsub { color: var(--dash-accent, var(--pink-dark)); font-weight: 700; }
.dash-hgoal { margin-top: 10px; font-size: 0.85rem; color: var(--ink-soft); }

/* ---- Alarm sub-toggle in the Customize widget list ---- */
.dt-w-sub { padding-left: 18px; opacity: 0.9; }
.dt-w-sub .check span { font-size: 0.88rem; color: var(--ink-soft); }

/* ---- New-deploy notice ---- */
.update-bar {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translate(-50%, 140%);
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: calc(100vw - 24px);
  padding: 10px 12px 10px 18px;
  border-radius: var(--radius-pill);
  background: var(--navy-2);
  color: #fff;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.34);
  font-size: 0.9rem;
  font-weight: 600;
  transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.3, 1);
}
.update-bar.show { transform: translate(-50%, 0); }
.update-bar .btn { flex: none; }
.update-x {
  border: 0;
  background: none;
  color: inherit;
  opacity: 0.6;
  font-size: 1.2rem;
  line-height: 1;
  padding: 0 4px;
  cursor: pointer;
}
.update-x:hover { opacity: 1; }

/* Country sub-heading in the league picker */
.src-sub {
  margin: 16px 0 8px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.src-sub:first-of-type { margin-top: 6px; }

.src-health { margin-top: 14px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ============================================================
   NEWS VIEW MODES — list / compact / cards (like a file manager)
   ============================================================ */
.feed-views {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  background: var(--rose-bg-2);
  border-radius: var(--radius-pill);
  margin-left: auto;
}
.feed-view {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 0;
  background: none;
  color: var(--ink-soft);
  font: 700 0.78rem var(--font);
  padding: 5px 10px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  line-height: 1;
}
.feed-view:hover { color: var(--ink); }
.feed-view.on { background: var(--card); color: var(--ink); box-shadow: var(--shadow-sm); }
@media (max-width: 620px) { .feed-view-l { display: none; } }

/* --- List: one headline per row, densest --- */
.feed-list[data-view="list"] {
  display: block;
  border-top: 1px solid var(--line);
}
.feed-list[data-view="list"] .article {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 4px 14px;
  padding: 9px 4px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.feed-list[data-view="list"] .article:hover { background: var(--rose-bg-2); }
.feed-list[data-view="list"] .article-title {
  order: 1;
  font-size: 0.94rem;
  margin: 0;
  min-width: 0;
}
.feed-list[data-view="list"] .article-src {
  order: 2;
  font-size: 0.74rem;
  white-space: nowrap;
  justify-self: end;
}

/* --- Compact: small boxes, title + source only --- */
.feed-list[data-view="compact"] {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
  gap: 10px;
}
.feed-list[data-view="compact"] .article { gap: 5px; padding: 11px 13px; }
.feed-list[data-view="compact"] .article-title { font-size: 0.88rem; line-height: 1.35; }
.feed-list[data-view="compact"] .article-src { font-size: 0.7rem; }

/* --- Cards: the roomy default, keeps the summary --- */
.feed-list[data-view="cards"] {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
  gap: 14px;
}