/* Skreen — ink, bone and one signal colour. Square corners, hairline rules, big type. */

@font-face {
  font-family: "Bricolage";
  src: url("fonts/bricolage.woff2") format("woff2-variations"), url("fonts/bricolage.woff2") format("woff2");
  font-weight: 200 800;
  font-stretch: 75% 100%;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("fonts/geist-mono.woff2") format("woff2-variations"), url("fonts/geist-mono.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Fraunces";
  src: url("fonts/fraunces.woff2") format("woff2-variations"), url("fonts/fraunces.woff2") format("woff2");
  font-weight: 100 900; font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("fonts/archivo.woff2") format("woff2-variations"), url("fonts/archivo.woff2") format("woff2");
  font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("fonts/space-grotesk.woff2") format("woff2-variations"), url("fonts/space-grotesk.woff2") format("woff2");
  font-weight: 300 700; font-display: swap;
}
@font-face {
  font-family: "Big Shoulders";
  src: url("fonts/big-shoulders.woff2") format("woff2-variations"), url("fonts/big-shoulders.woff2") format("woff2");
  font-weight: 100 900; font-display: swap;
}

:root {
  --bg: #0e0d0b;
  --ink: #f3eee3;
  --muted: rgba(243, 238, 227, 0.64);
  --faint: rgba(243, 238, 227, 0.38);
  --rule: rgba(243, 238, 227, 0.16);
  --wash: rgba(243, 238, 227, 0.055);
  --accent: #ff5b2e;
  --accent-ink: #1a0a04;
  --sand: #e8c887;
  --display: "Bricolage", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Typeface knobs: --stretch for fonts with a width axis, --scale to even out how wide big numerals run. */
  --stretch: 86%;
  --scale: 1;

  /* Everything scales with the screen, so it reads from across the kitchen. */
  font-size: clamp(11px, min(1.3vw, 2.15vh), 30px);
  color-scheme: dark;
}

/* Typefaces, chosen in Settings. Labels and times stay in the mono face. */
body[data-font="fraunces"]  { --display: "Fraunces", Georgia, "Times New Roman", serif; --stretch: 100%; --scale: 0.9; }
body[data-font="archivo"]   { --display: "Archivo", "Helvetica Neue", Arial, sans-serif; --stretch: 82%; --scale: 0.98; }
body[data-font="space"]     { --display: "Space Grotesk", "Helvetica Neue", Arial, sans-serif; --stretch: 100%; --scale: 0.9; }
body[data-font="shoulders"] { --display: "Big Shoulders", "Arial Narrow", Impact, sans-serif; --stretch: 100%; --scale: 1.2; }

* { box-sizing: border-box; }

html, body {
  margin: 0; height: 100%; overflow: hidden;
  background: var(--bg); color: var(--ink);
  font-family: var(--display);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
[hidden] { display: none !important; }
button, input, select { font: inherit; color: inherit; border-radius: 0; }
button { cursor: pointer; }
.ico { width: 1em; height: 1em; display: block; overflow: visible; }

/* ─── Background ─────────────────────────────────────────────────────────── */

#bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; }
.bg-art {
  position: absolute; inset: -4%;
  transition: opacity 1.5s ease;
  animation: drift 90s ease-in-out infinite alternate;
}
@keyframes drift { to { transform: translate3d(2.5%, -1.5%, 0) scale(1.05); } }

.bg-grain {
  position: absolute; inset: 0; opacity: 0.035; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ─── Layout ─────────────────────────────────────────────────────────────── */

.dash {
  position: relative; z-index: 1;
  height: 100vh; height: 100dvh;
  display: grid;
  grid-template-columns: var(--cols, minmax(0, 1.06fr) minmax(0, 1.3fr) minmax(0, 0.92fr));
  padding: 2rem 2.2rem 2.4rem;
  transition: transform 6s ease-in-out;
}
.lane { min-width: 0; min-height: 0; display: flex; flex-direction: column; padding: 0 1.8rem; border-left: 1px solid var(--rule); container-type: inline-size; }
.lane:first-child { padding-left: 0; border-left: 0; }
.lane:last-child { padding-right: 0; }
.lane.pair { justify-content: space-between; }
.col { min-width: 0; min-height: 0; flex: 1; display: flex; flex-direction: column; }

.col-head {
  display: flex; align-items: baseline; gap: 0.8rem;
  padding: 0.7rem 0 0.8rem; margin-bottom: 0.4rem;
  border-top: 3px solid var(--ink);
  font: 600 0.95rem/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase;
}
.col-head .place { margin-left: auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-weight: 400; letter-spacing: 0.08em; }
.count { margin: -0.3rem 0 -0.3rem auto; padding: 0.2rem 0.55rem; background: var(--ink); color: var(--bg); letter-spacing: 0; }
.count:empty { display: none; }

.scroll {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 2.6rem), transparent);
          mask-image: linear-gradient(to bottom, #000 calc(100% - 2.6rem), transparent);
}
.scroll::-webkit-scrollbar { display: none; }

/* ─── Hero: clock & weather ──────────────────────────────────────────────── */


.clock {
  display: flex; align-items: baseline; gap: 0.5rem; white-space: nowrap;
  font-size: calc(min(10.5rem, 33cqi) * var(--scale)); line-height: 0.86; font-weight: 700; font-stretch: var(--stretch);
  letter-spacing: -0.03em; margin-left: -0.04em;
  font-variant-numeric: tabular-nums; font-variation-settings: "opsz" 96;
}
.colon { display: inline-block; margin: 0 0.045em; transform: translateY(-0.04em); }
.ampm { font: 600 0.2em/1 var(--mono); letter-spacing: 0.04em; color: var(--accent); }
.date { margin-top: 1.2rem; font: 500 1.35rem/1.2 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }

.weather { display: flex; flex-direction: column; gap: 1rem; }
.wx-now { display: flex; align-items: center; gap: 1.1rem; }
.wx-icon { font-size: 4.2rem; flex: none; color: var(--accent); }
.wx-temp { font-size: calc(4.9rem * var(--scale)); line-height: 0.9; font-weight: 700; font-stretch: var(--stretch); letter-spacing: -0.035em; font-variation-settings: "opsz" 96; }
.wx-desc { min-width: 0; }
.wx-cond { font-size: 1.45rem; font-weight: 600; line-height: 1.05; }
.wx-sub { margin-top: 0.35rem; font: 400 1rem/1.5 var(--mono); color: var(--muted); white-space: nowrap; }

.wx-summary { display: flex; align-items: center; gap: 0.6rem; font-size: 1.25rem; font-weight: 500; padding: 0.7rem 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.wx-summary:empty { display: none; }
.wx-summary .ico { font-size: 1.5rem; flex: none; color: var(--accent); }

.wx-hours { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.wx-hours, .wx-days { margin-inline: -0.5rem; }
.wx-hour { display: flex; flex-direction: column; align-items: flex-start; gap: 0.3rem; padding: 0 0.5rem; border-left: 1px solid var(--rule); }
.wx-hour:first-child { border-left: 0; }
.wx-hour .h { font: 500 0.82rem/1 var(--mono); color: var(--muted); text-transform: uppercase; white-space: nowrap; }
.wx-hour .ico { font-size: 1.7rem; }
.wx-hour .t { font-size: 1.25rem; font-weight: 700; }
.wx-hour .pop { font: 600 0.8rem/1 var(--mono); color: var(--accent); min-height: 1em; }

.wx-days { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 3px solid var(--ink); padding-top: 0.8rem; }
.wx-day { display: flex; flex-direction: column; align-items: flex-start; gap: 0.35rem; padding: 0 0.5rem; border-left: 1px solid var(--rule); }
.wx-day:first-child { border-left: 0; }
.wx-day .d { font: 600 0.85rem/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.wx-day .ico { font-size: 2rem; }
.wx-day .hi { display: block; font-size: 1.3rem; font-weight: 700; }
.wx-day .lo { display: block; font-size: 1.05rem; color: var(--faint); font-weight: 500; }
.wx-day .pop { font: 600 0.8rem/1 var(--mono); color: var(--accent); min-height: 1em; }

/* ─── Agenda ─────────────────────────────────────────────────────────────── */

#agenda { padding-bottom: 2rem; }
.day { margin-bottom: 1.4rem; }
.day-head {
  display: flex; align-items: baseline; gap: 0.8rem; margin: 0.9rem 0 0.5rem;
  font: 600 0.9rem/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
}
.day-head .name { color: var(--ink); font-size: 1.05rem; }
.day-head::after { content: ""; flex: 1; height: 1px; background: var(--rule); align-self: center; }

.allday { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 0.6rem; }
.pill {
  display: inline-flex; align-items: center; gap: 0.5rem; max-width: 100%;
  padding: 0.35rem 0.8rem 0.35rem 0.45rem; border: 1px solid var(--rule);
  font: 500 0.9rem/1.2 var(--mono); letter-spacing: 0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pill::before { content: ""; flex: none; width: 0.65rem; height: 0.65rem; background: var(--c); }

.event {
  position: relative; display: grid; grid-template-columns: 7.2rem minmax(0, 1fr); gap: 0.9rem;
  padding: 0.95rem 0.9rem 0.95rem 1.15rem; border-top: 1px solid var(--rule); overflow: hidden;
}
.event:first-of-type { border-top: 0; }
.event::before { content: ""; position: absolute; left: 0; top: 0.95rem; bottom: 0.95rem; width: 0.28rem; background: var(--c); }
.event .start { font: 700 1.4rem/1.1 var(--mono); letter-spacing: -0.03em; white-space: nowrap; }
.event .start small { font-size: 0.6em; font-weight: 500; color: var(--muted); margin-left: 0.2rem; letter-spacing: 0; }
.event .end { font: 400 0.95rem/1.2 var(--mono); color: var(--faint); margin-top: 0.3rem; white-space: nowrap; }
.event .title { font-size: 1.55rem; font-weight: 600; line-height: 1.12; letter-spacing: -0.01em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.event .meta { margin-top: 0.4rem; font: 400 0.95rem/1.3 var(--mono); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.event .meta .ico { display: inline-block; font-size: 1.05em; vertical-align: -0.15em; margin-right: 0.3rem; }

.chip {
  display: inline-block; vertical-align: 0.22em; margin-left: 0.6rem; padding: 0.22rem 0.55rem;
  font: 700 0.78rem/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase;
  border: 1px solid var(--sand); color: var(--sand);
}
.event.now { background: var(--accent); color: var(--accent-ink); border-top-color: transparent; }
.event.now + .event { border-top-color: transparent; }
.event.now::before { background: var(--accent-ink); }
.event.now .start small, .event.now .end, .event.now .meta { color: rgba(26, 10, 4, 0.72); }
.event.now .chip { background: var(--accent-ink); border-color: var(--accent-ink); color: var(--accent); }
.progress { position: absolute; left: 0; bottom: 0; height: 0.28rem; background: var(--accent-ink); }

.day.later .event { padding-top: 0.7rem; padding-bottom: 0.7rem; }
.day.later .event .title { font-size: 1.3rem; -webkit-line-clamp: 1; }
.day.later .event .start { font-size: 1.15rem; }

.empty { display: flex; align-items: center; gap: 0.8rem; padding: 1rem 0; color: var(--muted); font-size: 1.3rem; font-weight: 500; }
.empty .ico { font-size: 1.8rem; color: var(--accent); }

/* ─── To-do ──────────────────────────────────────────────────────────────── */

.tasks { list-style: none; margin: 0; padding: 0 0 2rem; }
.task {
  display: flex; align-items: center; gap: 1rem; padding: 0.9rem 0;
  font-size: 1.5rem; font-weight: 600; line-height: 1.15; letter-spacing: -0.01em; border-top: 1px solid var(--rule);
}
.task:first-child { border-top: 0; }
.task:active { background: var(--wash); }
.task .box {
  flex: none; width: 2rem; height: 2rem; display: grid; place-items: center;
  border: 3px solid var(--ink); transition: background 0.2s;
}
.task .box .ico { font-size: 1.3rem; color: var(--bg); opacity: 0; }
.task .body { min-width: 0; flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 0.45rem; }
.task .label { min-width: 0; overflow-wrap: anywhere; }
.task .ago { flex: none; font: 500 0.8rem/1 var(--mono); color: var(--faint); letter-spacing: 0.06em; }
.task.done { color: var(--faint); font-weight: 500; }
.task.done .box { background: var(--faint); border-color: var(--faint); }
.task.done .box .ico { opacity: 1; }
.task.done .label { text-decoration: line-through; text-decoration-thickness: 0.1em; }
.task.pending .label { opacity: 0.6; }
.task-rule { list-style: none; margin: 0.6rem 0 0.2rem; padding: 0.5rem 0 0; border-top: 3px solid var(--rule); font: 600 0.78rem/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint); }
.task-empty { border: 0 !important; padding: 2.5rem 0; color: var(--muted); font-size: 1.3rem; flex-direction: column; align-items: flex-start; }
.task-empty .ico { font-size: 3rem; color: var(--accent); }

.add-btn {
  display: flex; align-items: center; justify-content: center; gap: 0.6rem;
  margin: 0.6rem 0 0; padding: 1.05rem; border: 0;
  background: var(--ink); color: var(--bg);
  font: 700 1.05rem/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase;
}
.add-btn .ico { font-size: 1.3rem; }
.add-btn:active { background: var(--accent); }

/* ─── Chrome ─────────────────────────────────────────────────────────────── */

.status {
  position: fixed; left: 5rem; bottom: 0.55rem; z-index: 2;
  display: flex; align-items: center; gap: 0.55rem; padding: 0.3rem 0.6rem 0.3rem 0; border: 0; background: none;
  font: 500 0.82rem/1 var(--mono); color: var(--muted); letter-spacing: 0.02em;
}
.status[hidden] { display: none; }
.status .dot { width: 0.55rem; height: 0.55rem; background: var(--sand); flex: none; }
.status.error .dot { background: var(--accent); }
.status u { color: var(--ink); text-underline-offset: 0.25em; }

.gear {
  position: fixed; left: 2.2rem; bottom: 0.2rem; z-index: 2; width: 2rem; height: 2rem;
  border: 1px solid rgba(243, 238, 227, 0.4); background: rgba(0, 0, 0, 0.6); color: rgba(243, 238, 227, 0.9);
  display: grid; place-items: center; font-size: 1.15rem;
}
.gear:active { background: var(--ink); color: var(--bg); }

.toast {
  position: fixed; left: 50%; bottom: 1.8rem; z-index: 60; transform: translate(-50%, 220%); visibility: hidden;
  display: flex; align-items: center; gap: 1.2rem; padding: 0.7rem 0.7rem 0.7rem 1.4rem;
  background: var(--ink); color: var(--bg); font: 500 1rem/1.2 var(--mono); max-width: 80vw;
  transition: transform 0.3s cubic-bezier(0.2, 0.9, 0.3, 1), visibility 0.3s;
}
.toast.show { transform: translate(-50%, 0); visibility: visible; }
.toast button { border: 0; padding: 0.6rem 1.1rem; background: var(--accent); color: var(--accent-ink); font: 700 0.9rem/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; }

/* ─── Sheets ─────────────────────────────────────────────────────────────── */

.sheet {
  width: min(44rem, 92vw); max-height: 92vh; padding: 2rem;
  border: 1px solid var(--ink); border-radius: 0; background: #151311; color: var(--ink);
  box-shadow: 0.7rem 0.7rem 0 rgba(0, 0, 0, 0.5); user-select: text;
}
.sheet::backdrop { background: rgba(0, 0, 0, 0.72); }
.sheet[open] { animation: rise 0.22s ease-out; }
@keyframes rise { from { opacity: 0; transform: translateY(1.2rem); } }
.sheet h3 { margin: 0; font-size: 1.8rem; font-weight: 700; letter-spacing: -0.02em; }
.sheet form { display: flex; flex-direction: column; max-height: calc(92vh - 4rem); }
.sheet-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.2rem; }

.sheet input, .sheet select {
  width: 100%; padding: 0.9rem 1rem; border: 1px solid var(--rule); background: #0c0b0a; font-size: 1.1rem; outline: none;
}
.sheet input:focus, .sheet select:focus { border-color: var(--accent); }
.sheet select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: calc(100% - 1.3rem) 55%, calc(100% - 0.95rem) 55%; background-size: 0.4rem 0.4rem; background-repeat: no-repeat; padding-right: 2.4rem; }
#addInput { font-size: 1.5rem; padding: 1.1rem 1.2rem; }

.add-row { display: flex; gap: 0.7rem; }
.mic { flex: none; width: 4.2rem; border: 1px solid var(--rule); background: #0c0b0a; color: var(--ink); display: grid; place-items: center; font-size: 1.9rem; }
.mic.listening { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.6; } }
.hint { margin: 0.8rem 0 0; color: var(--faint); font: 400 0.9rem/1.3 var(--mono); }

.sheet-actions { display: flex; align-items: center; gap: 0.7rem; margin-top: 1.5rem; flex-wrap: wrap; }
.sheet-actions .btn:first-child { margin-right: auto; }
.btn { border: 1px solid var(--ink); padding: 0.85rem 1.5rem; font: 700 0.95rem/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; background: none; }
.btn.primary { background: var(--ink); color: var(--bg); }
.btn.primary:active { background: var(--accent); border-color: var(--accent); }
.btn.ghost { border-color: var(--rule); }
.btn.ghost:active { background: var(--wash); }
.btn.small { padding: 0.65rem 1rem; font-size: 0.85rem; display: inline-flex; align-items: center; gap: 0.5rem; }
.btn.small .ico { font-size: 1.1rem; }

.settings { width: min(52rem, 94vw); }
.settings-scroll { overflow-y: auto; display: flex; flex-direction: column; gap: 1rem; padding-right: 0.4rem; min-height: 0; }
.group { margin-top: 0.8rem; padding-top: 0.6rem; border-top: 3px solid var(--ink); font: 600 0.85rem/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; }
.group:first-child { margin-top: 0; }
.field { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }
.field > span { font: 500 0.85rem/1.2 var(--mono); color: var(--muted); }
.field em { font-style: normal; color: var(--faint); }
.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.loc-row { display: flex; gap: 0.5rem; }
.loc-current { font: 500 0.9rem/1.2 var(--mono); color: var(--sand); }
.loc-results { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.loc-results button { border: 1px solid var(--rule); background: none; padding: 0.5rem 0.9rem; font: 500 0.9rem/1 var(--mono); }
.test-result { font: 500 0.85rem/1.2 var(--mono); color: var(--muted); margin-right: auto; }

.native-only { display: none; }
body.native .group.native-only { display: block; }
body.native .field-grid.native-only { display: grid; }
body.native .field.native-only { display: flex; }
.group em { font-style: normal; color: var(--faint); letter-spacing: 0.04em; text-transform: none; margin-left: 0.5rem; font-weight: 400; }

/* Google account section */
.checks { display: flex; flex-direction: column; border: 1px solid var(--rule); max-height: 13rem; overflow-y: auto; }
.check { display: flex; align-items: center; gap: 0.8rem; padding: 0.7rem 0.9rem; border-top: 1px solid var(--rule); font: 500 1rem/1.2 var(--mono); }
.check:first-child { border-top: 0; }
.check input { width: 1.3rem; height: 1.3rem; padding: 0; accent-color: var(--accent); flex: none; }
.check i { width: 0.7rem; height: 0.7rem; flex: none; }
.check span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adv { border-top: 1px solid var(--rule); padding-top: 0.8rem; }
.adv summary { cursor: pointer; font: 500 0.85rem/1.4 var(--mono); color: var(--muted); }
.adv summary em { font-style: normal; color: var(--faint); }
.adv[open] { display: flex; flex-direction: column; gap: 1rem; }
.welcome { width: min(36rem, 92vw); }
.welcome h3 { font-size: 2.2rem; margin-bottom: 0.6rem; }
.welcome .lede { font-size: 1.3rem; line-height: 1.35; color: var(--muted); margin: 0 0 1rem; }
.welcome p { font-size: 1.05rem; line-height: 1.5; margin: 0.6rem 0; }

/* To-do item details; a bigger target for the check box */
.task-sheet { width: min(40rem, 92vw); }
.task-sheet h3 { font-size: 1.9rem; line-height: 1.15; margin: 0 0 0.4rem; overflow-wrap: anywhere; }
.task-sheet .tk-title { width: 100%; font: 700 1.9rem/1.15 var(--display, inherit); color: inherit; background: transparent; border: 0; border-bottom: 1px dashed var(--rule); padding: 0 0 0.3rem; margin: 0 0 0.6rem; border-radius: 0; }
.task-sheet .tk-title:focus { outline: 0; border-bottom: 1px solid var(--accent); }
.task-sheet .ev-rows { margin-top: 1rem; }
.ev-row a { color: var(--accent); text-decoration: underline; text-underline-offset: 0.18em; word-break: break-all; }
.task-sheet .sheet-actions .btn:first-child { margin-right: auto; }
.task .box { position: relative; }
.task .box::after { content: ""; position: absolute; inset: -0.8rem; }
.task:not(.task-empty) { cursor: pointer; }

/* Who is it for? */
.whos { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.who-chip {
  max-width: 7.5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: 0.3rem 0.55rem; background: var(--p); color: #140d08;
  font: 700 0.74rem/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase;
}
.who-chip.more { background: var(--wash); color: var(--muted); }
.task.done .who-chip { opacity: 0.4; }
.who { display: flex; align-items: flex-start; gap: 1rem; margin-top: 1rem; }
.who-label { flex: none; padding-top: 0.55rem; font: 600 0.8rem/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.who-pills { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.who-pill {
  display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.6rem 0.95rem; border: 1px solid var(--rule); background: none;
  font: 600 0.95rem/1 var(--mono);
}
.who-pill i { width: 0.65rem; height: 0.65rem; background: var(--p, var(--faint)); }
.who-pill.on { background: var(--p, var(--ink)); border-color: var(--p, var(--ink)); color: #140d08; }
.who-pill.on i { background: #140d08; }
.who-pill:not([data-who]).on { --p: var(--ink); color: var(--bg); }
.who-pill.ghost { border-style: dashed; color: var(--muted); font-weight: 500; }
.who-pill b { font-weight: 700; margin-left: 0.1rem; }
.who-new { display: flex; gap: 0.6rem; margin-top: 0.8rem; }
.who-new input { flex: 1; }
.sv-who { margin-left: 1.4vw; font: 600 0.34em/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); vertical-align: 0.4em; }

/* Event details */
.event-sheet { width: min(40rem, 92vw); position: relative; padding-top: 2.4rem; }
.ev-bar { position: absolute; left: 0; right: 0; top: 0; height: 0.7rem; background: var(--c, var(--accent)); }
.event-sheet h3 { font-size: 2rem; line-height: 1.12; margin: 0 0 1.2rem; overflow-wrap: anywhere; }
.ev-rows { display: flex; flex-direction: column; max-height: 52vh; overflow-y: auto; }
.ev-row { display: grid; grid-template-columns: 6.4rem minmax(0, 1fr); gap: 1rem; padding: 0.85rem 0; border-top: 1px solid var(--rule); }
.ev-row > b { font: 600 0.78rem/1.6 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.ev-row > div { font-size: 1.15rem; line-height: 1.4; overflow-wrap: anywhere; white-space: pre-wrap; }
.ev-row small { display: block; font: 400 0.95rem/1.4 var(--mono); color: var(--muted); }
.ev-row i { display: inline-block; width: 0.7rem; height: 0.7rem; margin-right: 0.5rem; background: var(--c); }
.event, .pill { cursor: pointer; }
.event:active { background: var(--wash); }
.event.now:active { background: #ff7048; }

/* ─── Setup guide ────────────────────────────────────────────────────────── */

.guide { position: fixed; inset: 0; z-index: 50; display: grid; grid-template-columns: 17rem minmax(0, 1fr); background: #0e0d0b; user-select: text; }
.guide[hidden] { display: none; }
.guide-nav { padding: 2rem 1.4rem; border-right: 1px solid var(--rule); display: flex; flex-direction: column; gap: 0.2rem; overflow-y: auto; }
.guide-nav .brand { font-size: 2.2rem; font-weight: 800; font-stretch: var(--stretch); letter-spacing: -0.04em; margin-bottom: 0.2rem; }
.guide-nav .brand i { font-style: normal; color: var(--accent); }
.guide-nav .tag { font: 500 0.75rem/1.3 var(--mono); color: var(--faint); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 1.6rem; }
.guide-nav button { text-align: left; padding: 0.8rem 0.9rem; border: 0; border-left: 3px solid transparent; background: none; font-size: 1.1rem; font-weight: 500; color: var(--muted); }
.guide-nav button .n { font: 500 0.78rem/1 var(--mono); color: var(--faint); margin-right: 0.7rem; }
.guide-nav button.on { color: var(--ink); border-left-color: var(--accent); background: var(--wash); font-weight: 700; }
.guide-body { overflow-y: auto; padding: 2.4rem 3.4rem 5rem; max-width: 56rem; font-size: 1.15rem; line-height: 1.55; }
.guide-body h1 { margin: 0 0 0.4rem; font-size: 3rem; line-height: 1; font-weight: 800; font-stretch: var(--stretch); letter-spacing: -0.035em; }
.guide-body .lede { margin: 0 0 1.8rem; font-size: 1.35rem; color: var(--muted); line-height: 1.4; }
.guide-body h2 { margin: 2rem 0 0.6rem; padding-top: 0.7rem; border-top: 3px solid var(--ink); font: 600 0.9rem/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; }
.guide-body p { margin: 0.6rem 0; }
.guide-body ol { margin: 0.6rem 0; padding: 0; list-style: none; counter-reset: s; }
.guide-body ol > li { counter-increment: s; position: relative; padding: 0.7rem 0 0.7rem 3.2rem; border-top: 1px solid var(--rule); }
.guide-body ol > li::before { content: counter(s); position: absolute; left: 0; top: 0.65rem; width: 2.1rem; height: 2.1rem; display: grid; place-items: center; background: var(--ink); color: var(--bg); font: 700 1rem/1 var(--mono); }
.guide-body ul { margin: 0.6rem 0; padding-left: 1.3rem; }
.guide-body li { margin: 0.25rem 0; }
.guide-body code, .guide-body kbd { font: 500 0.88em/1 var(--mono); padding: 0.15em 0.4em; background: var(--wash); border: 1px solid var(--rule); white-space: nowrap; }
.guide-body b { font-weight: 700; }
.guide-body .note { margin: 1rem 0; padding: 0.9rem 1.1rem; border-left: 4px solid var(--sand); background: var(--wash); color: var(--ink); font-size: 1.05rem; }
.guide-body .note.warn { border-left-color: var(--accent); }
.guide-body .btn { margin: 0.3rem 0.5rem 0.3rem 0; text-decoration: none; display: inline-block; }
.guide-body a { color: var(--ink); }
.guide-body .btn.primary { color: var(--bg); }
.guide-body .swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: 0.7rem; margin: 0.8rem 0; }
.guide-body .sw { height: 5.2rem; border: 1px solid var(--rule); position: relative; }
.guide-body .sw span { position: absolute; left: 0.5rem; bottom: 0.4rem; font: 600 0.75rem/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; }
.guide-body .linkgen { display: grid; gap: 0.6rem; margin: 0.8rem 0; }
.guide-body input { width: 100%; padding: 0.8rem 1rem; border: 1px solid var(--rule); background: #0c0b0a; font: 400 1rem/1.2 var(--mono); outline: none; }
.guide-body .out { word-break: break-all; padding: 0.8rem 1rem; background: #0c0b0a; border: 1px dashed var(--rule); font: 400 0.9rem/1.4 var(--mono); min-height: 3rem; color: var(--muted); }
.guide-close { position: fixed; top: 1.2rem; right: 1.4rem; width: 3.2rem; height: 3.2rem; border: 1px solid var(--ink); background: var(--bg); display: grid; place-items: center; font-size: 1.4rem; }

/* ─── Showcase (the big-screen tour) ─────────────────────────────────────── */

.showcase { position: fixed; inset: 0; z-index: 30; background: #0a0908; animation: fadein 0.9s ease; overflow: hidden; }
.showcase[hidden] { display: none; }
.show-body { position: absolute; inset: 0; }
.sv {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 2.4vh;
  padding: 7vh 6vw; animation: svin 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.sv.out { animation: svout 0.6s ease forwards; }
@keyframes svin { from { opacity: 0; transform: translateY(2.5vh); } }
@keyframes svout { to { opacity: 0; } }
.sv.p1 { align-items: center; text-align: center; }
.sv.p2 { align-items: flex-end; text-align: right; }
.sv .kicker { font: 600 max(1.2rem, 2.2vh)/1 var(--mono); letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent); }

.sv-time .big { font-size: calc(min(35vw, 68vh) * var(--scale)); line-height: 0.8; font-weight: 800; font-stretch: var(--stretch); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; font-variation-settings: "opsz" 96; white-space: nowrap; }
.sv-time .big small { font: 600 0.14em/1 var(--mono); color: var(--accent); letter-spacing: 0.04em; margin-left: 0.15em; }
.sv-time .bigdate { font: 500 max(2rem, 5.2vh)/1.1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }

.sv-weather { flex-direction: row; align-items: center; justify-content: center; gap: 5vw; }
.sv-weather .ico { width: 30vh; height: 30vh; color: var(--accent); flex: none; }
.sv-weather .col2 { display: flex; flex-direction: column; gap: 2vh; min-width: 0; }
.sv-weather .bigtemp { font-size: calc(min(30vw, 48vh) * var(--scale)); line-height: 0.82; font-weight: 800; font-stretch: var(--stretch); letter-spacing: -0.035em; font-variation-settings: "opsz" 96; }
.sv-weather .cond { font-size: max(2.4rem, 7vh); font-weight: 700; letter-spacing: -0.02em; line-height: 1; }
.sv-weather .hl { font: 500 max(1.6rem, 4vh)/1.2 var(--mono); color: var(--muted); }
.sv-weather .rain { display: flex; align-items: center; gap: 1.2vh; font-size: max(1.6rem, 4vh); font-weight: 500; }
.sv-weather .rain .ico { width: 1.2em; height: 1.2em; }
.sv.p1.sv-weather, .sv.p2.sv-weather { justify-content: center; align-items: center; text-align: left; }
.sv.p2.sv-weather { flex-direction: row-reverse; }

.sv-list { gap: 0; text-align: left; }
.sv-list { width: 100%; }
.sv.p1 .sv-list, .sv.p2 .sv-list { width: fit-content; max-width: 100%; }
.sv-list .row { display: flex; align-items: baseline; gap: 3vw; padding: 2.2vh 0; border-top: 2px solid rgba(243, 238, 227, 0.22); width: 100%; }
.sv-list .row:first-of-type { border-top: 0; }
.sv-list .rt { font: 700 max(2.4rem, 7.5vh)/1 var(--mono); letter-spacing: -0.04em; flex: none; min-width: 5.2em; }
.sv-list .rt small { font-size: 0.45em; color: var(--muted); margin-left: 0.2em; letter-spacing: 0; }
.sv-list .rn { font-size: max(2.6rem, 8vh); font-weight: 700; line-height: 1.02; letter-spacing: -0.025em; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sv-list .rn small { display: block; margin-top: 0.8vh; font: 400 0.34em/1.2 var(--mono); color: var(--muted); letter-spacing: 0; }
.sv-list .row.now .rt, .sv-list .row.now .rn { color: var(--accent); }
.sv-list .bullet { width: max(1.8rem, 4.6vh); height: max(1.8rem, 4.6vh); border: 0.5vh solid var(--ink); flex: none; align-self: center; }
.sv-list .empty-big { font-size: max(3rem, 10vh); font-weight: 800; font-stretch: var(--stretch); letter-spacing: -0.03em; line-height: 1; }
.sv-list .more { padding-top: 2.4vh; font: 600 max(1.2rem, 3vh)/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }

.show-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 0.6vh; background: rgba(243, 238, 227, 0.1); }
.show-bar i { display: block; height: 100%; width: 0; background: var(--accent); }

/* ─── Screen refresh (clears faint ghost images) ─────────────────────────── */

.refresh { position: fixed; inset: 0; z-index: 80; background: #000; transition: background-color 2.5s linear; }
.refresh[hidden] { display: none; }

/* ─── Night mode ─────────────────────────────────────────────────────────── */

.night { position: fixed; inset: 0; z-index: 40; background: #000; display: grid; place-items: center; animation: fadein 1.5s ease; }
.night[hidden] { display: none; }
@keyframes fadein { from { opacity: 0; } }
.night-inner { text-align: center; color: #7d7a74; transition: transform 3s ease; }
.night-time { font-size: calc(13rem * var(--scale)); font-weight: 600; font-stretch: var(--stretch); line-height: 0.9; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: #a8a49b; font-variation-settings: "opsz" 96; }
.night-time .ampm { font-size: 0.2em; color: #5f5240; margin-left: 0.4rem; }
.night-date { margin-top: 1.4rem; font: 500 1.5rem/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; }
.night-next { margin-top: 2.2rem; font: 400 1.2rem/1.4 var(--mono); color: #5d5a54; }
.night-next b { color: #8a867e; font-weight: 600; }

/* ─── Portrait ───────────────────────────────────────────────────────────── */

@media (orientation: portrait) {
  :root { font-size: clamp(11px, min(2.1vw, 1.35vh), 30px); }
  .dash { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto minmax(0, 1fr); padding: 1.8rem 1.8rem 2.4rem; }
  .lane.pair { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 2.4rem; padding: 0 0 1.6rem; border-left: 0; }
  .lane.pair .weather { flex: 1; max-width: 34rem; }
  .lane:not(.pair) { padding: 0 1rem; }
  .status { left: 4.6rem; }
  .gear { left: 1.8rem; }
  .guide { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .guide-nav { flex-direction: row; flex-wrap: wrap; padding: 1rem 1.4rem; border-right: 0; border-bottom: 1px solid var(--rule); }
  .guide-nav .brand, .guide-nav .tag { display: none; }
  .guide-body { padding: 1.6rem 1.6rem 5rem; }
}

/* ─── Logo (fixed typeface on purpose: it must not follow the Typeface setting) ─ */
.brand-logo { display: inline-flex; align-items: center; gap: 0.55em; font: 800 1.5rem/1 "Bricolage", "Avenir Next", system-ui, sans-serif; font-stretch: 100%; letter-spacing: -0.03em; text-transform: uppercase; color: inherit; }
.brand-logo .mark { height: 1.05em; width: auto; flex: none; }
.brand-row { margin-bottom: 1.1rem; }
.sheet .brand-row.sm .brand-logo { font-size: 0.95rem; opacity: 0.75; }
.guide-nav .brand-logo { font-size: 1.9rem; margin-bottom: 0.4rem; }
.welcome .brand-logo { font-size: 1.8rem; }
.settings .credit { margin: -0.4rem 0 0.6rem; font: 400 0.8rem/1.4 var(--mono); color: var(--faint); }

/* ─── Layout editor (Settings) ───────────────────────────────────────────── */
.layout-list { display: flex; flex-direction: column; border: 1px solid var(--rule); }
.layout-row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 0.5rem; padding: 0.35rem 0.5rem 0.35rem 0.8rem; border-top: 1px solid var(--rule); }
.layout-row:first-child { border-top: 0; }
.layout-row .check { border-top: 0; padding: 0.5rem 0; font-size: 1.05rem; }
.layout-row.off label { opacity: 0.45; }
.layout-row .btn { min-width: 2.6rem; padding: 0.35rem 0.6rem; }

.plus-card { border: 1px solid var(--rule); padding: 0.9rem 1rem; margin-bottom: 1rem; }
.plus-card p { margin: 0 0 0.8rem; font-size: 1rem; line-height: 1.45; }
.plus-card .adv { margin-top: 0.8rem; }
.plus-card.on { border-color: var(--accent); }
#layoutField.locked .layout-list { opacity: 0.4; pointer-events: none; }

/* ─── Phones (portrait): one column, scrolling ───────────────────────────── */
@media (orientation: portrait) and (max-width: 700px) {
  :root { font-size: 16px; }
  html, body { height: auto; min-height: 100%; overflow-x: hidden; overflow-y: auto; }
  .dash { display: flex; flex-direction: column; height: auto; min-height: 100dvh; padding: 1.4rem 1.1rem 4.6rem; }
  .lane, .lane:not(.pair) { flex: none; padding: 0; border: 0; margin-bottom: 1.8rem; }
  .lane.pair { flex-direction: column; align-items: stretch; gap: 1.6rem; justify-content: flex-start; }
  .lane.pair .weather { max-width: none; flex: none; }
  .col { flex: none; }
  .scroll { overflow: visible; flex: none; -webkit-mask-image: none; mask-image: none; }
  .clock { font-size: min(7.5rem, 30vw); }
  .wx-hour, .wx-day { padding: 0 0.35rem; }
  .wx-hours, .wx-days { margin-inline: -0.35rem; }
  .wx-temp { font-size: 4rem; }
  .sheet { width: 94vw; max-width: 94vw; max-height: 92dvh; }
  .settings-scroll { max-height: 62dvh; }
  .field-grid { grid-template-columns: 1fr; }
  .ev-row { grid-template-columns: 4.6rem minmax(0, 1fr); gap: 0.7rem; }
  .gear { left: 1rem; }
  .status { left: 3.4rem; }
}

/* Skreen+ : the logo with a gold plus, used wherever something is a Plus feature */
.brand-logo.plus .plus-sign { height: 0.78em; width: auto; flex: none; align-self: flex-start; margin: -0.12em 0 0 -0.53em; filter: drop-shadow(0 0 0.35em rgba(232, 200, 135, 0.45)); }
.plus-head { display: flex; align-items: center; }
.plus-head .brand-logo { font-size: 1.9rem; }
.plus-chip { display: inline-flex; vertical-align: middle; margin-left: 0.7rem; }
.plus-chip .brand-logo { font-size: 0.95rem; opacity: 0.9; }

.ics-add { display: grid; grid-template-columns: 1fr 9rem auto; gap: 0.5rem; margin-top: 0.6rem; }
.check .btn { margin-left: auto; }
.credit a { color: var(--accent); }
@media (orientation: portrait) and (max-width: 700px) { .ics-add { grid-template-columns: 1fr; } }

.native-block { display: none; }
body.native .native-block { display: block; }
.acct { border: 1px solid var(--rule); padding: 0.7rem 0.8rem; margin-bottom: 0.8rem; }
.acct-head { display: flex; align-items: center; gap: 0.6rem; }
.acct-head b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; font: 600 0.95rem/1.2 var(--mono); }
.acct-head em { font: 600 0.72rem/1 var(--mono); font-style: normal; letter-spacing: 0.08em; color: var(--accent); text-transform: uppercase; }
.acct-body { margin-top: 0.7rem; }
.acct-body .sub { display: block; margin: 0.6rem 0 0.3rem; font: 500 0.8rem/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.list-tag { display: inline-block; margin-top: 0.35rem; font: 500 0.78rem/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--rule); padding: 0.2rem 0.4rem; }

/* Photos widget (Skreen+) */
.w-photos { flex: 1; min-height: 0; display: flex; }
.photo-frame { position: relative; flex: 1; min-height: 0; overflow: hidden; background: rgba(0, 0, 0, 0.25); }
.pf { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity 2.5s ease; }
.pf.on { opacity: 1; animation: kenburns 40s ease-in-out infinite alternate; }
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.07) translate(-1%, -1%); } }
.pf-note { position: absolute; inset: 0; display: grid; place-items: center; padding: 1.5rem; text-align: center; font: 500 0.95rem/1.4 var(--mono); color: var(--muted); letter-spacing: 0.04em; }
.pf-note:empty { display: none; }
.sv.sv-photos { padding: 0; }
.sv-photo { position: absolute; inset: 0; background-size: cover; background-position: center; }
#photoField.locked { opacity: 0.4; pointer-events: none; }

body.store .updater { display: none !important; }