/* Life in Weeks — styles ported from the "Life in Weeks app" design
   (Weeks and Settings screens). */

/* ---- Fonts -------------------------------------------------------------- */

/* Geist and Geist Mono (SIL Open Font License, see fonts/OFL.txt), served
   with the site. Each file covers one set of characters; the browser only
   downloads the ones the page uses. */

/* Geist, cyrillic-ext */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(fonts/geist-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* Geist, cyrillic */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(fonts/geist-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* Geist, vietnamese */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(fonts/geist-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* Geist, latin-ext */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(fonts/geist-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Geist, latin */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(fonts/geist-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Geist Mono, cyrillic-ext */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url(fonts/geist-mono-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* Geist Mono, cyrillic */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url(fonts/geist-mono-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* Geist Mono, symbols2 */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url(fonts/geist-mono-symbols2.woff2) format('woff2');
  unicode-range: U+2000-2001, U+2004-2008, U+200A, U+23B8-23BD, U+2500-259F;
}
/* Geist Mono, vietnamese */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url(fonts/geist-mono-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* Geist Mono, latin-ext */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url(fonts/geist-mono-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Geist Mono, latin */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url(fonts/geist-mono-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

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

.t-dark {
  --bg: #0F1012;
  --panel: #17181B;
  --text: #ECECE8;
  --ink: #E6E6E1;
  --muted: #9A9BA1;
  --line: #2A2B30;
  --future: #26272C;
  --now: #FFB547;
  --nowA: rgba(255, 181, 71, .5);
  --mark: var(--c-blue);
  --halo: 30%;
  --tint: 35%;
  --c-blue: #6E9BF5;
  --c-violet: #A05DDB;
  --c-pink: #F697CE;
  --c-red: #EB6264;
  --c-green: #46B250;
  --c-teal: #47D6CF;
  --popbg: #ECECE8;
  --poptx: #0F1012;
  --popmu: #55565C;
  --err: #FF8A80;
  color-scheme: dark;
}

.t-light {
  --bg: #F5F5F2;
  --panel: #FFFFFF;
  --text: #18181A;
  --ink: #18181A;
  --muted: #5F5F66;
  --line: #DCDCD6;
  --future: #D3D3CC;
  --now: #E4572E;
  --nowA: rgba(228, 87, 46, .45);
  --mark: var(--c-blue);
  --halo: 25%;
  --tint: 35%;
  --c-blue: #2F6FEB;
  --c-violet: #913FD5;
  --c-pink: #EB64A7;
  --c-red: #B51446;
  --c-green: #078C38;
  --c-teal: #19A9AE;
  --popbg: #18181A;
  --poptx: #F5F5F2;
  --popmu: #B9B9B4;
  --err: #B3261E;
  color-scheme: light;
}

/* Colors for chapters and important weeks (ids from js/colors.js). Each
   class points --mark at its shade for the current theme; anything that
   paints with --mark (a week, a legend swatch, a picker swatch) follows it.
   The shades were checked to stay apart from each other and from the
   lived, ahead and this-week squares in both themes. --tint is how much of
   a chapter's shade shows in its weeks ahead. */
.c-blue { --mark: var(--c-blue); }
.c-violet { --mark: var(--c-violet); }
.c-pink { --mark: var(--c-pink); }
.c-red { --mark: var(--c-red); }
.c-green { --mark: var(--c-green); }
.c-teal { --mark: var(--c-teal); }

/* ---- Base -------------------------------------------------------------- */

[hidden] { display: none !important; }

/* Read by screen readers, not shown. */
.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

html { background: var(--bg); }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Geist', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

.app { min-height: 100vh; box-sizing: border-box; }

.mono,
.eyebrow,
.yl,
.ax,
.statn,
.pop-when,
.pop-ch-when,
.li-meta,
.fmt-size { font-family: 'Geist Mono', ui-monospace, monospace; }

/* ---- Nav --------------------------------------------------------------- */

.nav {
  max-width: 1160px;
  margin: 0 auto;
  padding: 20px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  font-weight: 600;
  font-size: 16px;
}

.nav-end {
  display: flex;
  align-items: center;
  gap: 12px;
}

.tabs {
  display: flex;
  gap: 4px;
}

.nav-sep {
  width: 1px;
  height: 20px;
  background: var(--line);
}

/* Link to the source code on GitHub. */
.source {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 12px;
  border-radius: 8px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}

.source:hover { color: var(--text); }

.source:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 2px;
}

.tab {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 14px;
  border-radius: 8px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}

.tab:hover { color: var(--text); }

.tab[aria-current="page"] {
  background: var(--panel);
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--line);
}

.tab:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 2px;
}

/* ---- Layout ------------------------------------------------------------ */

.main {
  max-width: 1160px;
  margin: 0 auto;
  padding: 32px 24px 72px;
}

.weeks {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* Phones: keep the nav on one line. The GitHub link shows just its icon
   (its aria-label still names it), and gutters narrow to 16px for the nav
   and the page below it alike, so their edges stay lined up. This sits
   after the .nav and .main rules so it overrides them. */
@media (max-width: 520px) {
  .nav { padding: 20px 16px; gap: 8px; }
  .main { padding-left: 16px; padding-right: 16px; }
  .nav-end { gap: 4px; }
  .nav-sep { display: none; }
  .tab { padding: 0 10px; }
  .source { width: 40px; padding: 0; }
  .source-text { display: none; }
}

/* ---- Header ------------------------------------------------------------ */

.hero {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 28px;
}

.hero-text {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.eyebrow {
  margin: 0;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}

.title {
  margin: 0;
  font-size: clamp(34px, 6vw, 46px);
  line-height: 1.04;
  font-weight: 500;
  letter-spacing: -0.025em;
}

.title-sm { font-size: clamp(32px, 6vw, 40px); }

.title-md {
  margin-bottom: 8px;
  font-size: 36px;
  line-height: 1.1;
}

/* Headings take focus when the screen changes; that needs no ring. */
.title:focus { outline: none; }

.sub {
  margin: 0;
  font-size: 15px;
  color: var(--muted);
}

.link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--text);
  font: inherit;
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: 3px;
  cursor: pointer;
}

.link:hover { text-decoration-color: currentColor; }

.link:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 2px;
  border-radius: 2px;
}

.stats {
  display: flex;
  flex-wrap: wrap;
  gap: 36px;
}

.stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 96px;
}

.statn {
  font-size: 30px;
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1;
}

.statl {
  font-size: 12px;
  color: var(--muted);
}

/* ---- Grid -------------------------------------------------------------- */

.grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  padding-left: 30px;
  min-height: 24px;
  align-items: center;
}

.leg {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--muted);
}

.lg {
  width: 10px;
  height: 10px;
  display: block;
  flex: none;
  border-radius: 2px;
}

.lg-lived { background: var(--ink); }
.lg-ahead { background: var(--future); }
.lg-now { background: var(--now); }
.lg-mark { background: var(--mark); }
.lg-past { background: none; box-shadow: inset 0 0 0 1px var(--future); }

.rows {
  display: flex;
  flex-direction: column;
  gap: clamp(4px, .7vw, 9px);
  position: relative;
}

.row {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
}

/* Zero height so the label never makes its row taller than the cells. */
.yl {
  height: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  font-size: 10px;
  color: var(--muted);
  padding-right: 8px;
  line-height: 1;
}

.cells {
  display: grid;
  grid-template-columns: repeat(52, minmax(0, 1fr));
  column-gap: clamp(1px, .28vw, 3px);
}

.ax {
  font-size: 10px;
  color: var(--muted);
  white-space: nowrap;
  line-height: 1;
  padding-bottom: 6px;
}

/* One week. Lived by default; modifiers for ahead, this week, important. */
.w {
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: 2px;
  background: var(--ink);
}

.w.f { background: var(--future); }

.w.n {
  background: var(--now);
  animation: pulse 2.2s ease-out infinite;
}

/* A week in chapters: one stripe per chapter, stacked in lane order (one
   chapter fills the week). Each stripe is its chapter's color, faded for
   weeks ahead so the line between lived and ahead still shows. */
.w.ch {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  cursor: pointer;
}

.w.ch > i {
  flex: 1 1 0;
  background: var(--mark);
}

.w.f.ch > i { background: color-mix(in srgb, var(--mark) var(--tint), var(--future)); }

.w.s {
  background: var(--mark);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mark) var(--halo), transparent);
  transform: scale(1.2);
  cursor: pointer;
  position: relative;
  z-index: 1;
}

/* An important week in a chapter: a gap of background around it, so it
   stands out from the chapter even in the same color. */
.w.s.within {
  box-shadow: 0 0 0 1.5px var(--bg), 0 0 0 3px color-mix(in srgb, var(--mark) var(--halo), var(--bg));
}

/* The week you were born: a ring in the this-week color, with a gap of
   background so the week keeps its own color inside (lived, its chapters'
   stripes, or an important week's color). A ring rather than another color, so it can't be mistaken
   for an important week. */
:root { --born-ring: 0 0 0 1.5px var(--bg), 0 0 0 3px var(--now); }

.w.b {
  box-shadow: var(--born-ring);
  animation: none;
  cursor: pointer;
  position: relative;
  z-index: 2;
}

/* A week past the end of the span, shown only where something is saved or
   this week has gone beyond it: an outline, so it reads as "beyond" rather
   than "ahead". */
.w.beyond {
  background: none;
  box-shadow: inset 0 0 0 1px var(--future);
}

.w.beyond.ch > i { opacity: .5; }

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 var(--nowA); }
  70% { box-shadow: 0 0 0 7px rgba(0, 0, 0, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); }
}

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

/* Popover for important weeks. */
.pop {
  position: absolute;
  z-index: 5;
  width: 240px;
  box-sizing: border-box;
  padding: 12px 14px;
  background: var(--popbg);
  color: var(--poptx);
  border-radius: 10px;
  pointer-events: none;
  transform: translate(-50%, calc(-100% - 14px));
  box-shadow: 0 10px 28px rgba(0, 0, 0, .25);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pop-when {
  font-size: 11px;
  color: var(--popmu);
}

.pop-title {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

/* The chapters a week is in: a bar of the chapter's color, its name and
   its dates. */
.pop-chapters {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}

.pop-ch {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-left: 10px;
  border-left: 3px solid var(--mark);
}

.pop-ch-name {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.pop-ch-when {
  font-size: 11px;
  color: var(--popmu);
}

.pop-a {
  position: absolute;
  bottom: -5px;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  background: var(--popbg);
  transform: rotate(45deg);
}

/* ---- Share pictures ---------------------------------------------------- */

/* One button per picture format: four across, two on phones. */
.formats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.fmt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 14px 8px 12px;
  border: 0;
  border-radius: 10px;
  background: var(--bg);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--text);
  font: inherit;
  text-align: center;
  cursor: pointer;
}

.fmt:hover:not(:disabled) { background: var(--line); }

.fmt:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 2px;
}

.fmt:disabled {
  color: var(--muted);
  cursor: not-allowed;
}

/* The picture's shape, sized by app.js to fit this box. */
.fmt-box {
  width: 36px;
  height: 28px;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fmt-shape {
  box-sizing: border-box;
  border: 1.5px solid currentColor;
  border-radius: 3px;
}

.fmt-name {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.25;
}

.fmt-size {
  font-size: 11px;
  color: var(--muted);
}

@media (max-width: 520px) {
  .formats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.dlg {
  box-sizing: border-box;
  width: min(420px, calc(100vw - 32px));
  max-width: none;
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
  color: var(--text);
  box-shadow: 0 24px 64px rgba(0, 0, 0, .35);
}

.dlg::backdrop { background: rgba(0, 0, 0, .6); }

.dlg-in {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 12px 24px 24px;
}

/* The close button's icon lines up with the content's right edge. */
.dlg-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-right: -14px;
}

.dlg[data-shape="wide"] { width: min(640px, calc(100vw - 32px)); }

/* The preview keeps the picture's shape (--w by --h, set by app.js) at any
   screen size: as wide as the dialog, but no taller than 60% of the screen. */
.shot {
  align-self: center;
  width: min(100%, calc(min(60vh, 520px) * var(--w) / var(--h)));
  width: min(100%, calc(min(60dvh, 520px) * var(--w) / var(--h)));
  aspect-ratio: var(--w) / var(--h);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg);
}

.shot img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  outline: 1px solid var(--line);
  outline-offset: -1px;
}

.shot .lab {
  padding: 0 16px;
  text-align: center;
}

.dlg-actions {
  display: flex;
  gap: 10px;
}

.dlg-actions .btn { flex: 1 1 0; }

/* A dialog that asks a question has no close button above it, so its
   content starts lower. */
.dlg-ask { padding-top: 24px; }

/* ---- Backup ------------------------------------------------------------ */

.backup-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Restoring: the backup and what this browser holds now, one above the other. */
.compare {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.compare-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--bg);
  box-shadow: inset 0 0 0 1px var(--line);
}

.compare dt {
  font-size: 13px;
  color: var(--muted);
}

.compare dd {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
}

@media (max-width: 520px) {
  /* Side by side when they fit, else one per line, full width. */
  .backup-actions .btn { flex: 1 1 auto; }
}

/* Phones: keep the three stats on one line and the tiny cells square. */
@media (max-width: 520px) {
  .stats { gap: 20px; }
  .stat { min-width: 0; }
  .statn { font-size: 24px; }
  .rows { gap: 3px; }
  .cells { column-gap: 1px; }
  .w { border-radius: 1px; }
  :root { --born-ring: 0 0 0 1px var(--bg), 0 0 0 2px var(--now); }
}

/* ---- No birthday yet --------------------------------------------------- */

.setup {
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  text-align: center;
}

.setup-sub {
  margin: 0;
  font-size: 16px;
  color: var(--muted);
}

.setup .link { font-size: 15px; }

/* ---- Settings ---------------------------------------------------------- */

.settings {
  max-width: 592px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 24px;
  border-radius: 14px;
  background: var(--panel);
  border: 1px solid var(--line);
}

.card-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
}

/* Segmented control: the theme picker. */
.seg {
  display: inline-flex;
  align-self: flex-start;
  gap: 4px;
  padding: 4px;
  border-radius: 10px;
  background: var(--bg);
  border: 1px solid var(--line);
}

.segb {
  height: 36px;
  padding: 0 16px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
}

.segb:hover { color: var(--text); }

.segb[aria-pressed="true"] {
  background: var(--text);
  color: var(--bg);
}

.add-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-end;
}

.field-date { flex: 1 1 160px; }
.field-what { flex: 2 1 220px; }
.field-from,
.field-to { flex: 1 1 140px; }
.field-name { flex: 2 1 200px; }

/* Color picker: a row of swatch radios on a line of its own, with Add
   beside it where there is room (below it on phones). */
.field-color {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.field-color .lab {
  padding: 0;
  margin-bottom: 6px;
}

/* Pulled left so the first swatch lines up with the label above it. */
.swatches {
  display: flex;
  margin-left: -10px;
}

/* 44px to tap (a little less on the narrowest phones, so the six stay on
   one line); the swatch inside is smaller. */
.sw {
  position: relative;
  flex: 0 1 44px;
  min-width: 36px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.sw input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.sw-dot {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: var(--mark);
}

.sw:hover .sw-dot { transform: scale(1.08); }

.sw input:checked + .sw-dot {
  box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--text);
}

.sw input:focus-visible + .sw-dot {
  outline: 2px solid var(--text);
  outline-offset: 6px;
}

@media (forced-colors: active) {
  .sw input:checked + .sw-dot { outline: 3px solid CanvasText; outline-offset: 2px; }
}

.list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-top: 1px solid var(--line);
}

.li-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.li-label {
  font-size: 15px;
  font-weight: 500;
  overflow-wrap: anywhere;
}

.li-meta {
  font-size: 12px;
  color: var(--muted);
}

/* Edit and remove buttons on each chapter and important week. */
.x {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.x-edit { margin-left: auto; }

.x:hover {
  color: var(--text);
  background: var(--line);
}

/* About: the author's photo, name and blog, and the credit to Wait But Why. */
.me {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Initials in a circle, with the photo laid over them when it loads. */
.me-pic {
  position: relative;
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--future);
  color: var(--text);
  font-size: 17px;
  font-weight: 600;
}

.me-pic img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.me-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
}

.me-name {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
}

.me-bio {
  margin: 14px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
}

/* Written as me[at]… so it is not an easy catch for address harvesters. */
.me-mail {
  color: var(--text);
  white-space: nowrap;
}

.credit {
  margin: 0;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}

.settings-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px 24px;
  padding-top: 8px;
}

.settings-foot .btn { margin-left: auto; }

/* ---- Form controls ----------------------------------------------------- */

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.lab {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}

.in {
  box-sizing: border-box;
  width: 100%;
  height: 44px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--text);
  font: inherit;
  font-size: 15px;
}

.in:focus {
  outline: 2px solid var(--text);
  outline-offset: 1px;
}

/* iOS Safari draws date inputs as a native control that ignores
   box-sizing, so the padding pushes it past its field, and it centres the
   date. Drop the native look and start the date where text inputs start. */
.in[type="date"] {
  -webkit-appearance: none;
  appearance: none;
  min-width: 0;
}

.in::-webkit-date-and-time-value {
  margin: 0;
  text-align: left;
}

/* A button, or a link that looks like one. */
.btn {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: 8px;
  background: var(--text);
  color: var(--bg);
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  flex: 0 0 auto;
}

.btn:hover { opacity: .88; }

.btn:disabled {
  opacity: .4;
  cursor: not-allowed;
}

/* Secondary: outlined, like the selected tab. */
.btn-2 {
  background: var(--panel);
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--line);
}

.btn-2:hover {
  opacity: 1;
  background: var(--line);
}

.btn:focus-visible,
.segb:focus-visible,
.x:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 2px;
}

.err {
  margin: 0;
  font-size: 13px;
  color: var(--err);
}

.note {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}

/* Life span: country, whose life expectancy, or a number of your own. */
.span-form {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-end;
}

.field-country { flex: 2 1 220px; }
.field-sex { flex: 1 1 220px; }
.field-custom { flex: 1 1 140px; }

select.in {
  appearance: none;
  padding-right: 36px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 19px) 19px, calc(100% - 14px) 19px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}