:root {
  --bg: #f7f7f5; --card: #ffffff; --ink: #33312e; --muted: #6b6862; --line: #e4e2dd; --accent: #33312e;
  --shadow: 0 1px 2px rgba(0,0,0,.05), 0 4px 14px rgba(0,0,0,.05);
  color-scheme: light;
}
/* dark: chosen with the toggle, or the device setting when nothing has been chosen */
:root[data-theme="dark"] {
  --bg: #17171a; --card: #222226; --ink: #ecebe8; --muted: #a3a09a; --line: #34343a; --accent: #ecebe8;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 4px 14px rgba(0,0,0,.25);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #17171a; --card: #222226; --ink: #ecebe8; --muted: #a3a09a; --line: #34343a; --accent: #ecebe8;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 4px 14px rgba(0,0,0,.25);
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-optical-sizing: auto; }
a { color: inherit; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 16px 64px; }
.loading { padding: 40px; color: var(--muted); }

header.top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 36px 0 24px; }
.brand { display: flex; align-items: center; gap: 14px; }
.jbr { width: clamp(54px, 8vw, 68px); height: auto; aspect-ratio: 1; display: block; flex: none; }
/* the JBR logo: dark ink in light mode, light ink in dark mode */
.jbr-ink { fill: #1c1c1c; }
.jbr-ring { stroke: #1c1c1c; }
:root[data-theme="dark"] .jbr-ink { fill: #ececec; }
:root[data-theme="dark"] .jbr-ring { stroke: #ececec; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .jbr-ink { fill: #ececec; }
  :root:not([data-theme="light"]) .jbr-ring { stroke: #ececec; }
}
h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 700; margin: 0; letter-spacing: -.5px; }
.subtitle { color: var(--muted); margin: 0; font-size: 1.05rem; }

h2 { font-size: 1.15rem; font-weight: 600; margin: 32px 0 12px; display: flex; align-items: center; gap: 8px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }

.subject { position: relative; display: block; text-decoration: none; background: var(--card); border-radius: 14px; overflow: hidden;
  box-shadow: var(--shadow); border: 1px solid var(--line); transition: transform .12s ease; }
.subject:hover { transform: translateY(-2px); }
.subject .band { height: 92px; background: var(--c); display: flex; align-items: center; padding: 0 18px; background-size: cover; background-position: center; }
.subject .logo { font-weight: 700; font-size: 2rem; color: #fff; letter-spacing: -1px; text-shadow: 0 1px 6px rgba(0,0,0,.25); }
.subject .body { padding: 12px 16px 14px; }
.subject .name { font-weight: 600; }
.subject .stats { color: var(--muted); font-size: .85rem; margin-top: 2px; }
.subject.off { opacity: .55; pointer-events: none; }

.card { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
  box-shadow: var(--shadow); text-decoration: none; }
.card img { width: 100%; height: 140px; object-fit: cover; display: block; background: var(--line); }
.grid.links { align-items: start; }
/* useful links: a picture shows as a small icon beside the name, not a banner */
.grid.links .card { flex-direction: row; align-items: center; }
.grid.links .card img { width: 28px; height: 28px; flex: none; object-fit: contain; border-radius: 7px; margin-left: 14px; background: transparent; }
.grid.links .card img + .body { padding-left: 10px; }
.card .body { padding: 12px 14px; }
.card .title { font-weight: 600; }
footer { color: var(--muted); font-size: .8rem; margin-top: 48px; }

/* ---- light / dark toggle: a sun that folds into a moon ---- */
.theme-toggle { --size: 40px; width: var(--size); height: var(--size); flex: none; border-radius: 50%; border: 1px solid var(--line);
  background: var(--card); color: var(--ink); cursor: pointer; display: grid; place-items: center; padding: 0;
  box-shadow: var(--shadow); transition: transform .25s ease, border-color .25s ease; -webkit-tap-highlight-color: transparent; }
.theme-toggle:hover { transform: rotate(-12deg) scale(1.06); border-color: var(--muted); }
.theme-toggle:active { transform: scale(.92); }
.theme-toggle:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.theme-toggle svg { width: 24px; height: 24px; overflow: visible; }
.sun-core { transition: r .5s cubic-bezier(.34, 1.56, .64, 1); }
.moon-cut { transition: cx .5s cubic-bezier(.34, 1.56, .64, 1), cy .5s cubic-bezier(.34, 1.56, .64, 1); }
.sun-rays { transform-origin: 12px 12px; transition: transform .5s cubic-bezier(.34, 1.56, .64, 1), opacity .3s ease; }
.sun-moon { transition: transform .6s cubic-bezier(.34, 1.56, .64, 1); }
[data-mode="dark"] .sun-core { r: 9; }
[data-mode="dark"] .moon-cut { cx: 17; cy: 7; }
[data-mode="dark"] .sun-rays { transform: rotate(-90deg) scale(0); opacity: 0; }
[data-mode="dark"] .sun-moon { transform: rotate(40deg); }
.stars circle { opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(0); transition: opacity .3s ease, transform .4s cubic-bezier(.34, 1.56, .64, 1); }
[data-mode="dark"] .stars circle { opacity: 1; transform: scale(1); }
[data-mode="dark"] .stars circle:nth-child(2) { transition-delay: .12s; }
[data-mode="dark"] .stars circle:nth-child(3) { transition-delay: .22s; }

/* the new theme spreads out in a circle from the button (browsers with view transitions) */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
/* elsewhere colours simply fade */
body, .subject, .card, .theme-toggle { transition: background-color .35s ease, color .35s ease, border-color .35s ease; }
@media (prefers-reduced-motion: reduce) {
  .theme-toggle, .sun-core, .moon-cut, .sun-rays, .sun-moon, .stars circle, body, .subject, .card { transition: none !important; }
}

/* ---- sign-in page ---- */
.login { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }
.login-card { width: min(360px, 100%); background: var(--card); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow);
  padding: 28px 24px 22px; display: flex; flex-direction: column; gap: 14px; }
.login-logo { width: 72px; height: 72px; align-self: center; }
.login-card h1 { font-size: 1.4rem; text-align: center; margin: 0 0 4px; letter-spacing: -.3px; }
.login-card label { display: flex; flex-direction: column; gap: 6px; font-size: .9rem; font-weight: 600; }
.login-card input { font: inherit; font-weight: 400; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--bg); color: var(--ink); }
.login-card input:focus { outline: 2px solid var(--ink); outline-offset: 1px; }
.login-card button { font: inherit; font-weight: 600; padding: 11px; border-radius: 10px; border: 0; background: var(--ink); color: var(--bg); cursor: pointer; }
.login-card button:disabled { opacity: .6; cursor: default; }
.login-error { color: #d33c3c; font-size: .9rem; margin: 0; min-height: 1.2em; }
.login-sub { text-align: center; color: var(--muted); margin: -6px 0 4px; font-size: .95rem; }
.login-switch { text-align: center; font-size: .9rem; margin: 0; color: var(--muted); }
.login-switch a { color: var(--ink); font-weight: 600; }
.login-about { color: var(--muted); font-size: .78rem; text-align: center; margin: 0; padding-top: 10px; border-top: 1px solid var(--line); line-height: 1.45; }
.login-note { color: var(--muted); font-size: .8rem; text-align: center; margin: 0; }
.login-agree, .login-legal { color: var(--muted); font-size: .78rem; text-align: center; margin: 0; }
.login-legal { margin-top: 4px; }
footer p { margin: 0 0 8px; }

/* ---- signed-in bar on the home page ---- */
.top-actions { display: flex; align-items: center; gap: 10px; }
.top-links { display: grid; grid-auto-flow: column; grid-auto-columns: 152px; gap: 10px; margin-left: auto; }
.top-links .btn-quiet { white-space: nowrap; }
/* phones and small tablets: your name and light/dark stay up top; Your progress and Revision planner get a row of their own */
@media (max-width: 860px) {
  header.top { flex-wrap: wrap; row-gap: 14px; padding-top: 24px; }
  .brand { flex: 1 1 0; min-width: 0; }
  .top-links { order: 3; flex-basis: 100%; margin-left: 0; grid-auto-columns: minmax(0, 1fr); }
}
/* every pill button and chip in a header is the same height, so a row of them lines up */
.btn-quiet { font: inherit; font-size: .9rem; padding: 0 14px; height: 40px; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; border: 1px solid var(--line); background: var(--card);
  color: var(--ink); cursor: pointer; text-decoration: none; box-shadow: var(--shadow); }
.btn-quiet:hover { border-color: var(--muted); }

/* your name in the top right; hover (or tap) for the menu */
.user { position: relative; }
.user-chip { display: flex; align-items: center; gap: 8px; font: inherit; font-size: .9rem; font-weight: 600; color: var(--ink);
  background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px 4px 4px; cursor: pointer;
  box-shadow: var(--shadow); max-width: 220px; height: 40px; box-sizing: border-box; }
.user-chip:hover, .user.open .user-chip { border-color: var(--muted); }
.user-av { width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: var(--bg); display: grid; place-items: center;
  font-size: .8rem; font-weight: 700; flex: none; }
.user-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-chev { width: 12px; height: 12px; flex: none; color: var(--muted); transition: transform .2s; }
.user.open .user-chev { transform: rotate(180deg); }
.user-chip.pop { animation: chip-pop .6s cubic-bezier(.3,1.6,.5,1); }
@keyframes chip-pop { 0% { transform: scale(1); } 40% { transform: scale(1.08); } 100% { transform: scale(1); } }
/* padding-top bridges the gap so the menu stays open while the pointer moves down to it */
.user-pop { position: absolute; right: 0; top: 100%; padding-top: 8px; z-index: 20; opacity: 0; visibility: hidden;
  transform: translateY(-4px); transition: opacity .15s, transform .15s, visibility 0s .15s; }
.user.open .user-pop { opacity: 1; visibility: visible; transform: none; transition: opacity .15s, transform .15s; }
@media (hover: hover) {
  .user:not(.shut):hover .user-pop { opacity: 1; visibility: visible; transform: none; transition: opacity .15s, transform .15s; }
}
.user-card { min-width: 220px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.14);
  padding: 6px; display: flex; flex-direction: column; }
.user-head { padding: 8px 10px 10px; border-bottom: 1px solid var(--line); margin-bottom: 4px; display: flex; flex-direction: column; gap: 2px; }
.user-head b { overflow: hidden; text-overflow: ellipsis; }
.user-head span { font-size: .78rem; color: var(--muted); }
.user-card a, .user-card button { font: inherit; font-size: .9rem; text-align: left; padding: 9px 10px; border-radius: 8px; border: 0;
  background: none; color: var(--ink); cursor: pointer; text-decoration: none; }
.user-card a:hover, .user-card button:hover, .user-card a:focus-visible, .user-card button:focus-visible { background: var(--bg); outline: none; }
.user-card .danger { color: #d33c3c; }

/* change password / delete account */
.acct-dlg { border: 1px solid var(--line); border-radius: 14px; background: var(--card); color: var(--ink); padding: 22px;
  width: min(380px, calc(100vw - 32px)); box-shadow: 0 20px 50px rgba(0,0,0,.25); }
.acct-dlg::backdrop { background: rgba(0,0,0,.4); }
.acct-dlg form { display: flex; flex-direction: column; gap: 12px; }
.acct-dlg h3 { margin: 0; font-size: 1.15rem; }
.acct-dlg p { margin: 0; color: var(--muted); font-size: .9rem; line-height: 1.45; }
.acct-dlg label { display: flex; flex-direction: column; gap: 6px; font-size: .85rem; font-weight: 600; }
.acct-dlg input { font: inherit; font-weight: 400; padding: 9px 11px; border-radius: 9px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); }
.acct-dlg input:focus { outline: 2px solid var(--ink); outline-offset: 1px; }
.acct-dlg .acct-err { color: #d33c3c; min-height: 1.2em; }
.acct-btns { display: flex; justify-content: flex-end; gap: 8px; }
.acct-btns button { font: inherit; font-size: .9rem; padding: 9px 14px; border-radius: 9px; border: 1px solid var(--line); background: var(--card);
  color: var(--ink); cursor: pointer; }
.acct-btns .acct-go { background: var(--ink); color: var(--bg); border-color: var(--ink); font-weight: 600; }
.acct-btns .acct-go.danger { background: #d33c3c; border-color: #d33c3c; color: #fff; }
.acct-btns button:disabled { opacity: .6; cursor: default; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--ink); color: var(--bg); padding: 10px 16px;
  border-radius: 999px; font-size: .9rem; box-shadow: var(--shadow); z-index: 60; transition: opacity .4s; }
.toast.out { opacity: 0; }

/* "Hello, name" after signing in */
.hello { position: fixed; inset: 0; z-index: 50; background: var(--bg); display: grid; place-items: center; cursor: pointer; transition: opacity .4s; }
.hello.fade { opacity: 0; }
.hello-line { font-size: clamp(2rem, 7vw, 3.4rem); font-weight: 700; letter-spacing: -.5px; display: flex; align-items: center; gap: .3em;
  padding: 0 16px; max-width: 100vw; white-space: nowrap; }
.hello-wave { display: inline-block; transform-origin: 70% 80%; }
.hello-name { font-weight: 700; }

@media (max-width: 640px) {
  .admin-link { display: none; }  /* it's in the menu under your name instead */
  .user-chip { max-width: 140px; }
  header.top { align-items: center; }
}
@media (max-width: 420px) {
  .user-name { display: none; }  /* the initial is enough on a small phone */
  .user-chip { padding-right: 8px; }
}

/* ---- admin console ---- */
.admin .tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--line); margin-bottom: 18px; flex-wrap: wrap; }
.admin .tabs button { font: inherit; padding: 10px 16px; border: 0; background: none; color: var(--muted); cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -1px; }
.admin .tabs button.on { color: var(--ink); border-bottom-color: var(--ink); font-weight: 600; }
.admin h2 { margin-top: 26px; }
.admin .notice { min-height: 1.4em; margin: 0 0 8px; font-size: .9rem; color: var(--muted); }
.admin .notice.err { color: #d33c3c; }
.admin .box { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px; margin-bottom: 12px; box-shadow: var(--shadow); }
.admin .row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 6px 0; }
.admin input[type=text], .admin input[type=url], .admin input[type=password], .admin select, .ask-in {
  font: inherit; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); min-width: 0; }
.admin .grow { flex: 1 1 200px; }
.admin label.lbl { font-size: .8rem; color: var(--muted); display: flex; flex-direction: column; gap: 4px; flex: 1 1 200px; }
.admin .thumb { width: 64px; height: 40px; object-fit: cover; border-radius: 6px; background: var(--line); }
.admin button.small, .admin .btn-main, .ask .btn-main { font: inherit; font-size: .85rem; padding: 7px 12px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--card); color: var(--ink); cursor: pointer; }
.admin .btn-main, .ask .btn-main { background: var(--ink); color: var(--bg); border-color: var(--ink); font-weight: 600; }
.admin button.danger { color: #d33c3c; }
.admin button:disabled { opacity: .5; cursor: default; }
.admin .savebar { position: sticky; bottom: 0; background: var(--bg); padding: 12px 0; border-top: 1px solid var(--line); display: flex; gap: 8px; flex-wrap: wrap; }
.admin table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.admin th, .admin td { text-align: left; padding: 9px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.admin th { color: var(--muted); font-weight: 600; font-size: .8rem; }
.admin .muted { color: var(--muted); font-size: .8rem; }
.admin .tablewrap { max-width: 100%; }
/* phones: each row of an admin table is a card, with each value's column name before it */
@media (max-width: 640px) {
  .admin table thead { display: none; }
  .admin table, .admin tbody, .admin tr, .admin td { display: block; width: 100%; }
  .admin tr { border: 1px solid var(--line); border-radius: 10px; background: var(--card); padding: 8px 12px; margin-bottom: 10px; }
  .admin td { border: 0; padding: 3px 0; overflow-wrap: anywhere; }
  .admin td[data-label]::before { content: attr(data-label) ": "; color: var(--muted); font-size: .8rem; }
  .admin td:empty { display: none; }
}
.u-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin: 14px 0 6px; }
.u-tiles div { border: 1px solid var(--line); border-radius: 12px; background: var(--card); padding: 12px 14px; }
.u-tiles b { display: block; font-size: 1.6rem; line-height: 1.1; }
.u-tiles span { color: var(--muted); font-size: .82rem; }
.u-bar { display: inline-block; height: 8px; width: calc(var(--w) * .6); max-width: 60%; min-width: 2px; background: var(--ink); opacity: .7; border-radius: 4px; margin-right: 8px; vertical-align: middle; }
.ask { border: 1px solid var(--line); border-radius: 14px; background: var(--card); color: var(--ink); padding: 18px; width: min(380px, 92vw); }
.ask::backdrop { background: rgba(0, 0, 0, .45); }
.ask-in { width: 100%; box-sizing: border-box; margin: 6px 0 14px; }
.ask-btns { display: flex; gap: 8px; justify-content: flex-end; }

/* shown to admins while maintenance mode is on */
.maint-bar { background: var(--ink); color: var(--bg); text-align: center; font-size: .88rem; padding: 9px 16px; }
.maint-bar a { color: inherit; font-weight: 600; }

/* admin console: maintenance switch in the header */
.quick-maint.on { background: #d33c3c; border-color: #d33c3c; color: #fff; }
/* admin console on a phone: its buttons go on a row under the title instead of over it */
@media (max-width: 600px) { .admin header.top .top-actions { order: 3; flex-basis: 100%; flex-wrap: wrap; } }
.quick-maint:disabled { opacity: .7; cursor: default; }

/* loading animation: a hook lowers blocks onto a stack (top one in the site colour) */
.ld { display: grid; place-items: center; align-content: center; gap: 14px; min-height: 60vh; color: var(--ld-text, #6b6862); font-family: Inter, system-ui, sans-serif; font-size: .95rem; }
.ld-art { width: 72px; height: auto; overflow: visible; }
.ld { --ld-a-left: var(--ld-accent, #17a398); --ld-a-top: color-mix(in srgb, var(--ld-a-left) 65%, #fff); --ld-a-right: color-mix(in srgb, var(--ld-a-left) 78%, #000); }
.ld-cable { stroke: #6b737a; stroke-width: 1.4; fill: #6b737a; }
.ld-b2, .ld-b3 { animation: ld-drop 3s cubic-bezier(.3,.7,.4,1) infinite both; }
.ld-b3 { animation-name: ld-drop3; }
.ld-b2 .ld-cable { animation: ld-let 3s infinite both; }
.ld-b3 .ld-cable { animation: ld-let3 3s infinite both; }
@keyframes ld-drop { 0% { transform: translateY(-70px); opacity: 0; } 8% { opacity: 1; } 28% { transform: translateY(0); } 31% { transform: translateY(-3px); } 34%, 84% { transform: none; opacity: 1; } 96%, 100% { transform: none; opacity: 0; } }
@keyframes ld-drop3 { 0%, 36% { transform: translateY(-70px); opacity: 0; } 42% { opacity: 1; } 62% { transform: translateY(0); } 65% { transform: translateY(-3px); } 68%, 84% { transform: none; opacity: 1; } 96%, 100% { transform: none; opacity: 0; } }
@keyframes ld-let { 0%, 30% { opacity: 1; } 36%, 100% { opacity: 0; } }
@keyframes ld-let3 { 0%, 64% { opacity: 1; } 70%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ld-b2, .ld-b3, .ld-b2 .ld-cable, .ld-b3 .ld-cable { animation: none; } .ld-cable { opacity: 0; } }
:root[data-theme="dark"] .ld { --ld-text: #a3a09a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ld { --ld-text: #a3a09a; } }

/* ---- revision planner (planner.html) ---- */
.pl-back { display: inline-block; font-size: .85rem; color: var(--muted); text-decoration: none; margin-bottom: 6px; }
.pl-back:hover { color: var(--ink); }
.pl-btn { font: inherit; font-size: .9rem; font-weight: 600; padding: 9px 15px; border-radius: 10px; border: 1px solid var(--ink); background: var(--ink); color: var(--bg); cursor: pointer; }
.pl-btn:hover { opacity: .9; }
.pl-btn:disabled { opacity: .5; cursor: default; }
.pl-btn.ghost { background: var(--card); color: var(--ink); border-color: var(--line); }
.pl-btn.ghost:hover { border-color: var(--muted); opacity: 1; }
.pl-btn:focus-visible, .pl-go:focus-visible, .linkish:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.linkish { font: inherit; background: none; border: 0; padding: 0; color: var(--ink); text-decoration: underline; cursor: pointer; }
.pl-top { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.pl-busy { color: var(--muted); font-size: .9rem; grid-column: 1 / -1; }
.pl-busy:empty { display: none; }
.pl-btn { display: inline-flex; align-items: center; justify-content: center; text-align: center; min-height: 40px; box-sizing: border-box; line-height: 1.2; }
.pl-empty { color: var(--muted); background: var(--card); border: 1px dashed var(--line); border-radius: 12px; padding: 16px; margin: 0; line-height: 1.5; }
.pl-note { color: var(--muted); font-size: .85rem; line-height: 1.45; margin: 0 0 10px; }
.pl-evs, .pl-sets { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap: 14px; align-items: start; }
.pl-evact .pl-btn { white-space: nowrap; }
.pl-ev, .pl-set { background: var(--card); border: 1px solid var(--line); border-top: 4px solid var(--c); border-radius: 12px; padding: 14px 16px; box-shadow: var(--shadow); }
.pl-ev.past { opacity: .7; }
.pl-evtop { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: .8rem; color: var(--muted); }
.pl-badge { background: color-mix(in srgb, var(--c) 14%, transparent); color: var(--ink); border-radius: 999px; padding: 2px 9px; font-weight: 600; }
.pl-when { margin-left: auto; }
.pl-when b { color: var(--ink); font-weight: 600; }
.pl-ev h3, .pl-set h3 { margin: 8px 0 10px; font-size: 1.05rem; }
.pl-ready { display: flex; align-items: center; gap: 10px; font-size: .8rem; color: var(--muted); margin-bottom: 10px; }
.pl-bar { flex: 0 0 90px; height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.pl-bar i { display: block; height: 100%; background: var(--c); border-radius: 3px; }
.pl-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }
.pl-chip { font-size: .75rem; text-decoration: none; padding: 3px 8px; border-radius: 7px; border: 1px solid var(--line); color: var(--ink); background: var(--bg); }
.pl-chip:hover { border-color: var(--ink); }
.pl-more { font-size: .75rem; color: var(--muted); padding: 3px 2px; }
.pl-evact { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 6px; }
.pl-evact .pl-btn { font-size: .82rem; padding: 6px 10px; min-height: 36px; }
.pl-evact > .pl-note { grid-column: 1 / -1; margin: 0; }
.pl-match .pl-btn { width: 100%; }
.pl-plan .pl-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; }
.pl-set-row { display: flex; flex-wrap: wrap; gap: 12px; font-size: .85rem; color: var(--muted); }
.pl-set-row select, .pl-form select, .pl-form input[type=date], .pl-form input[name=title], .pl-form textarea {
  font: inherit; font-size: .9rem; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); margin-left: 6px; }
.pl-days { display: grid; gap: 10px; }
.pl-day { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; }
.pl-day.today { border-color: var(--ink); }
.pl-dh { font-weight: 600; font-size: .9rem; margin-bottom: 4px; }
.pl-day ul { list-style: none; margin: 0; padding: 0; }
.pl-s { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid var(--line); }
.pl-s:first-child { border-top: 0; }
.pl-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--c); flex: none; margin: 0 3px; }
.pl-st { flex: 1; min-width: 0; font-size: .8rem; color: var(--muted); line-height: 1.35; }
.pl-st b { display: block; font-size: .9rem; color: var(--ink); font-weight: 600; }
.pl-min { font-size: .75rem; color: var(--muted); white-space: nowrap; }
.pl-go { font: inherit; font-size: .8rem; font-weight: 600; padding: 0 8px; height: 32px; width: 108px; flex: none; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); text-decoration: none; cursor: pointer; white-space: nowrap; }
.pl-min { width: 48px; text-align: right; flex: none; }
.pl-go:hover { border-color: var(--ink); }
.pl-weeks { font-size: .85rem; justify-self: start; color: var(--muted); }
.pl-qs { margin: 0 0 12px; padding-left: 22px; font-size: .85rem; }
.pl-qs li { padding: 4px 0; border-bottom: 1px solid var(--line); }
.pl-qs li.ok a { text-decoration: line-through; color: var(--muted); }
.pl-qs li.ok::marker { color: #2E8A47; }
.pl-qs a { color: var(--ink); font-weight: 600; }
.pl-mk { color: var(--muted); margin-left: 8px; font-size: .78rem; }
.pl-tp { display: block; color: var(--muted); font-size: .76rem; }
.pl-why { display: block; color: var(--muted); font-size: .76rem; line-height: 1.35; margin-top: 1px; }
.pl-why b { color: var(--ink); font-weight: 600; }
.pl-why b::after { content: ' ·'; color: var(--muted); font-weight: 400; }
.pl-rv { display: inline-block; margin-left: 8px; font-size: .7rem; font-weight: 600; padding: 1px 7px; border-radius: 999px; background: color-mix(in srgb, #C8372D 13%, transparent); color: #A52A22; }
.pl-ai { margin-left: auto; font-size: .7rem; font-weight: 600; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); }
.pl-unc { font-size: .8rem; color: var(--muted); margin: -4px 0 10px; }
.pl-unc summary { cursor: pointer; }
.pl-unc ul { margin: 6px 0 0; padding-left: 20px; }
.pl-dialog { border: 1px solid var(--line); border-radius: 14px; background: var(--card); color: var(--ink); padding: 20px 22px; width: min(680px, calc(100vw - 24px)); max-height: calc(100vh - 32px); }
.pl-dialog::backdrop { background: rgba(0,0,0,.45); }
.pl-form { display: flex; flex-direction: column; gap: 12px; }
.pl-form h2 { margin: 0; }
.pl-form fieldset { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin: 0; }
.pl-form legend { font-weight: 600; font-size: .9rem; padding: 0 4px; }
.pl-form fieldset > p { margin: 0 0 8px; color: var(--muted); font-size: .85rem; }
.pl-row { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; }
.pl-row > label, .pl-wide { font-size: .85rem; font-weight: 600; display: flex; align-items: center; }
.pl-wide input { flex: 1; }
.pl-form textarea { width: 100%; margin: 8px 0 0; resize: vertical; }
.pl-types { display: flex; flex-wrap: wrap; gap: 6px; }
.pl-types input { position: absolute; opacity: 0; }
.pl-types span { display: inline-block; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); font-size: .85rem; cursor: pointer; }
.pl-types input:checked + span { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.pl-types input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
.pl-topics { max-height: 36vh; overflow: auto; }
.pl-tbar { font-size: .8rem; color: var(--muted); margin-bottom: 6px; }
.pl-area { margin-bottom: 8px; }
.pl-ah { font-size: .8rem; font-weight: 600; color: var(--muted); margin: 4px 0; }
.pl-area label { display: block; font-size: .85rem; padding: 2px 0; }
.pl-area input, .pl-also input { accent-color: var(--ink); }
.pl-also { font-size: .9rem; }
.pl-lines { margin: 6px 0 0; padding-left: 22px; max-height: 26vh; overflow: auto; font-size: .8rem; }
.pl-lines li { display: flex; gap: 8px; align-items: center; justify-content: space-between; padding: 3px 0; border-bottom: 1px solid var(--line); }
.pl-lines li span { flex: 1; min-width: 0; }
.pl-lines li select { max-width: 45%; font-size: .78rem; padding: 3px 4px; margin: 0; }
.pl-lines li.miss span { color: var(--muted); }
.pl-lines li.unsure span::after { content: " ?"; font-weight: 700; color: #B8741A; }
.pl-err { color: #C8372D; font-size: .85rem; margin: 0; min-height: 1px; }
.pl-actions { display: flex; justify-content: flex-end; gap: 8px; }
@media (max-width: 560px) {
  .pl-top { grid-template-columns: 1fr 1fr; }
  .pl-evs, .pl-sets { grid-template-columns: 1fr; }
  .pl-min { display: none; }
  .pl-dialog { padding: 16px; }
}


/* ---- progress over time (charts.js, progress-page.js) ---- */
.pc-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 4px 0 14px; }
.pc-ranges { display: inline-grid; grid-template-columns: repeat(4, 86px); border: 1px solid var(--line); border-radius: 999px; overflow: hidden; height: 36px; box-sizing: border-box; }
.pc-ranges button { font: inherit; font-size: .82rem; padding: 0 6px; border: 0; background: transparent; color: var(--ink); cursor: pointer; }
.pc-ranges button + button { border-left: 1px solid var(--line); }
.pc-ranges button.on { background: var(--ink); color: var(--bg); }
.pc-pick { font: inherit; font-size: .82rem; padding: 0 10px; height: 36px; width: 200px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink); max-width: 100%; }
@media (max-width: 560px) { .pc-tools { display: grid; } .pc-ranges { grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; } .pc-pick { width: 100%; } }
.pc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); gap: 12px; }
.pc-card { margin: 0; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px 8px; background: var(--card); color: var(--ink); min-width: 0; }
.pc-card svg { overflow: visible; }
.pc-empty b { display: block; margin-bottom: 4px; }
.pc-empty p { margin: 0; color: var(--muted); font-size: .88rem; }
.pc-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: .75rem; color: var(--muted); margin-top: 6px; }
.pc-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.pc-save { font: inherit; font-size: .75rem; background: none; border: 0; padding: 6px 0 2px; color: var(--muted); text-decoration: underline; cursor: pointer; }
.pg-log { margin-top: 22px; }
.pg-log table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.pg-log th, .pg-log td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--line); }
@media (max-width: 480px) { .pg-log table { font-size: .78rem; } .pg-log th, .pg-log td { padding: 6px 4px; } }
.pg-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 7px; }

/* ---- questions that match your list fully (planner) ---- */
.pl-match { margin: 4px 0 10px; }
.pl-mbox:empty { display: none; }
.pl-mbox { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 10px; }
.pl-msum { font-size: .85rem; margin: 0 0 8px; }
.pl-mlines { margin: 10px 0 0; padding-left: 20px; font-size: .85rem; }
.pl-mlines > li { margin-bottom: 10px; }
.pl-mline { display: flex; gap: 10px; align-items: baseline; justify-content: space-between; }
.pl-mline span { font-weight: 600; }
.pl-mline em { font-style: normal; color: var(--muted); font-size: .75rem; white-space: nowrap; }
.pl-mlines ul { margin: 4px 0 0; padding-left: 16px; }
.pl-mlines ul li { padding: 2px 0; }
.pl-mlines ul li.ok a { text-decoration: line-through; color: var(--muted); }
.pl-mlines ul a { color: var(--ink); }
.pl-mlines details summary { cursor: pointer; color: var(--muted); font-size: .8rem; margin-top: 3px; }

/* ---- Privacy Policy and Terms ---- */
.legal main { max-width: 760px; line-height: 1.6; }
.legal a.brand { text-decoration: none; }
.legal .lead { font-size: 1.05rem; }
.legal h2 { font-size: 1.15rem; margin: 30px 0 8px; scroll-margin-top: 16px; }
.legal p, .legal li { font-size: .95rem; }
.legal ul { padding-left: 20px; }
.legal li { margin-bottom: 6px; }
.legal code { font-size: .85rem; background: var(--card); border: 1px solid var(--line); border-radius: 5px; padding: 1px 5px; }
.toc { display: flex; flex-wrap: wrap; gap: 6px 8px; margin: 16px 0 6px; }
.toc a { font-size: .82rem; text-decoration: none; padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); }
.toc a:hover { border-color: var(--muted); }
.legal-table { width: 100%; border-collapse: collapse; font-size: .88rem; margin: 10px 0 14px; }
.legal-table th, .legal-table td { text-align: left; vertical-align: top; padding: 9px 10px; border-bottom: 1px solid var(--line); }
.legal-table th { font-size: .8rem; color: var(--muted); font-weight: 600; }
.legal-table td:first-child { white-space: nowrap; }
/* phones: each row becomes a small card instead of a table that would scroll sideways */
@media (max-width: 640px) {
  .legal-table thead { display: none; }
  .legal-table, .legal-table tbody, .legal-table tr, .legal-table td { display: block; width: 100%; }
  .legal-table tr { border: 1px solid var(--line); border-radius: 10px; background: var(--card); padding: 8px 12px; margin-bottom: 10px; }
  .legal-table td { border: 0; padding: 3px 0; white-space: normal !important; }
  .legal-table td:first-child { font-size: .95rem; }
}
.legal-foot, .site-foot { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.legal-foot { margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--line); }
.site-foot a, .legal-foot a { color: var(--muted); }
.site-foot a:hover, .legal-foot a:hover { color: var(--ink); }

/* email addresses: the extra rows on the sign-in page, the "check your email" page and the reminder on the home page */
.login-card [hidden] { display: none !important; }
.login-card { min-width: 0; }
.login-card input, .login-card select { width: 100%; min-width: 0; box-sizing: border-box; }
.login-hint, .verify-text { margin: 0; font-size: .9rem; color: var(--muted); text-align: center; line-height: 1.45; }
.verify-text b { color: var(--ink); overflow-wrap: anywhere; }
.login-forgot { margin: -4px 0 0; text-align: center; font-size: .85rem; }
.login-forgot a, .verify-links a { color: var(--ink); }
.login-card select { font: inherit; font-weight: 400; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--bg); color: var(--ink); }
.f-code input, .v-code input { font-size: 1.35rem; letter-spacing: .3em; text-align: center; font-variant-numeric: tabular-nums; }
.verify-links { line-height: 1.8; }
.verify-links a.wait { color: var(--muted); pointer-events: none; text-decoration: none; }
.em-ok { color: #23824a; font-weight: 600; white-space: nowrap; }
:root[data-theme="dark"] .em-ok { color: #6fcf8a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .em-ok { color: #6fcf8a; } }
.email-nudge { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 24px; padding: 12px 14px; background: var(--card);
  border: 1px solid var(--line); border-left: 4px solid #17A398; border-radius: 12px; font-size: .92rem; }
.email-nudge span { flex: 1 1 260px; }
@media (max-width: 480px) { .email-nudge .btn-quiet { flex: 1 1 0; } }

/* admin console: the Inbox tab (emails to contact@ and what the assistant did) */
.in-tag { display: inline-block; font-size: .78rem; font-weight: 600; border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
.in-ok { background: #e6f4ea; color: #23824a; } .in-you { background: #fdeee0; color: #a85a12; } .in-muted { background: var(--bg); color: var(--muted); }
:root[data-theme="dark"] .in-ok { background: #1d3325; color: #6fcf8a; } :root[data-theme="dark"] .in-you { background: #3a2a1a; color: #f0b072; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .in-ok { background: #1d3325; color: #6fcf8a; } :root:not([data-theme="light"]) .in-you { background: #3a2a1a; color: #f0b072; } }
.in-mail p { margin: 0 0 8px; } .in-mail h3 { font-size: .95rem; margin: 14px 0 6px; }
.in-text { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; font-size: .9rem; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin: 0 0 8px; max-height: 360px; overflow: auto; }
.in-more { margin: 10px 0; }