:root {
  --bg: #fbfbf8; --card: #ffffff; --ink: #2a2c28; --muted: #6b6f68; --faint: #a5a89f; --line: #e2e2da; --well: #f2f2ec;
  --accent: #2e7d32; --accent-ink: #ffffff; --you: #e9f2e9; --warn: #b26a00; --warn-tint: #fbf1e2;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #161715; --card: #1f201e; --ink: #dfe1dc; --muted: #9a9e97; --faint: #6d726a; --line: #3d403b; --well: #2b2d29;
          --accent: #7cc47f; --accent-ink: #122912; --you: #2c372b; --warn: #dda45c; --warn-tint: #3d3323; color-scheme: dark; }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink);
       font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
a { color: var(--accent); }
.top { max-width: 1180px; margin: 0 auto; padding: 18px 20px 6px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.brand img { height: 22px; width: auto; display: block; }
.logo-dark { display: none !important; }
.brand .logo-inline { display: block; height: 22px; width: auto; }
@media (prefers-color-scheme: dark) { .logo-light { display: none !important; } .logo-dark { display: block !important; } }
nav { display: flex; gap: 16px; font-size: 14px; }
nav a { color: var(--ink); text-decoration: none; } nav a:hover { color: var(--accent); }
main { max-width: 1180px; margin: 0 auto; padding: 18px 20px 80px; }
/* S1: a page to read keeps the frame; its column is narrower, left-aligned with the logo */
main.narrow > * { max-width: 560px; }
h1 { font-size: 26px; line-height: 1.2; margin: 12px 0 6px; letter-spacing: -0.01em; }
h2 { font-size: 15px; margin: 22px 0 8px; }  /* S7: two heading sizes, the page's and a card's */
p { margin: 0 0 10px; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.warn { color: var(--warn); }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
button, .btn { font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; border: 1px solid var(--accent); border-radius: 8px;
  padding: 7px 14px; background: var(--accent); color: var(--accent-ink); text-decoration: none; display: inline-block; }
button.ghost, .btn.ghost { background: transparent; color: var(--accent); }
button.quiet { background: transparent; border-color: var(--line); color: var(--ink); font-weight: 500; }
button.danger { background: transparent; border-color: var(--warn); color: var(--warn); }
button:disabled { opacity: 0.5; cursor: default; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
input, select, textarea { font: inherit; font-size: 14px; color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 6px 9px; }
textarea { width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; line-height: 1.6; }
label { display: block; font-size: 13px; color: var(--muted); margin: 10px 0 4px; }
/* hidden means hidden: a class that sets display (.stack, .row) would
   otherwise beat the browser's own [hidden] rule and keep it on screen */
[hidden] { display: none !important; }
.row { display: flex; gap: 8px 12px; align-items: center; flex-wrap: wrap; }
.stack { display: grid; gap: 10px; }
.otp { letter-spacing: 0.3em; font-size: 22px; width: 11ch; text-align: center; font-family: ui-monospace, Menlo, monospace; }
.status { font-size: 13px; color: var(--muted); min-height: 1.4em; }
.status.bad { color: var(--warn); }
.status.good { color: var(--accent); font-weight: 600; }

/* plans list */
.plans { display: grid; gap: 8px; }
.plan-row { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); text-decoration: none; color: var(--ink); }
.plan-row small { color: var(--muted); }

/* the builder */
.bhead { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.share { display: grid; gap: 4px; justify-items: end; text-align: right; }
.share .code { font: 700 20px/1 ui-monospace, Menlo, monospace; letter-spacing: 0.12em; }
.tabs { display: flex; gap: 18px; border-bottom: 1px solid var(--line); margin: 16px 0 12px; }
.tabs button { background: none; border: 0; border-radius: 0; color: var(--muted); padding: 6px 0; font-weight: 600; }
.tabs button[aria-selected="true"] { color: var(--ink); border-bottom: 2px solid var(--accent); }
.units { display: grid; gap: 6px; }
.unit { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 6px 10px; align-items: start; padding: 9px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); }
.unit .uname { width: 100%; font-weight: 600; border-color: transparent; background: transparent; padding: 3px 5px; }
.unit .uname:hover, .unit .uname:focus { border-color: var(--line); background: var(--card); }
.unit .dates { display: grid; gap: 4px; justify-items: end; font-size: 12px; color: var(--muted); }
.unit .dates input { font-size: 12px; padding: 3px 6px; }
.unit .del { background: none; border: 0; color: var(--faint); font-size: 16px; padding: 0 4px; }
/* B8: a small pill, only while there's something to save */
.savebar { position: fixed; right: 20px; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 20; display: flex; gap: 10px; align-items: center;
  background: var(--card); border: 1px solid var(--line); border-radius: 99px; padding: 5px 5px 5px 16px; box-shadow: 0 6px 22px rgba(0,0,0,.12); font-size: 13.5px; }
.savebar button { border-radius: 99px; padding: 7px 18px; }
.savebar.clean { display: none; }
.savebar .tell { width: 230px; min-width: 0; border: 1px solid var(--line); border-radius: 99px; padding: 5px 12px; font: inherit; font-size: 13px; background: var(--bg); color: var(--ink); }
@media (max-width: 560px) { .savebar .tell { width: 140px; } }

/* progress */
.prog { display: grid; grid-template-columns: minmax(0, 180px) 1fr 1fr auto; gap: 6px 12px; align-items: center; font-size: 13px; }
.prog .h { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.bar { height: 8px; background: var(--well); border-radius: 3px; overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--accent); }
.n { color: var(--muted); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }

/* 3.2: home, the log, phases */
/* 3.3: the board, as the add-on draws it, and a narrow column beside it */
.wb { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 16px; align-items: start; }
@media (max-width: 860px) {
  .wb { grid-template-columns: 1fr; gap: 12px; }
  /* 3.8.1 (the audit, #7): on a phone, people first: the board, what friends said and the
     way to invite them, then my own panels, my year last. The two columns' boxes step aside
     (their parts are the grid's), and the board is as tall as its rows. */
  .wb > .stack, .wb > .rail { display: contents; }
  .wb [data-m] { min-width: 0; }
  .wb [data-m="board"] { order: 1; min-height: 0; }
  .wb [data-m="feed"] { order: 2; }
  .wb [data-m="friends"] { order: 3; }
  .wb [data-m="due"] { order: 4; }
  .wb [data-m="week"] { order: 5; }
  .wb [data-m="plans"] { order: 6; }
  .wb [data-m="nudge"] { order: 7; }
  .wb [data-m="year"] { order: 8; }
}
.rail { display: grid; gap: 12px; align-content: start; grid-template-columns: minmax(0, 1fr); }  /* a long word never widens the page */
.brd { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px 10px; background: var(--card); display: grid; gap: 8px;
  min-height: 300px; grid-template-rows: auto 1fr auto; }  /* 3.8.0: a short tab doesn't pull the page up; the footer stays at the bottom */
.brd .top2 { display: flex; justify-content: flex-end; margin-bottom: 4px; }
.brd .pills { max-width: 100%; overflow-x: auto; }
.scrollx { overflow-x: auto; }
.brdt { width: 100%; border-collapse: collapse; font-size: 14px; }
.brdt th { text-align: right; font-size: 12.5px; font-weight: 700; color: var(--muted); padding: 4px 8px 8px; white-space: nowrap; }
.brdt th.lt { text-align: left; font-weight: 600; }
.brdt th.on button { color: var(--accent); }
.brdt th button { color: var(--muted); font-weight: 700; font-size: 12.5px; }
.brdt th.sqh { text-align: center; width: 22px; padding: 4px 2px 8px; } .brdt th.sqh.on { color: var(--accent); }
.brdt td { padding: 6px 8px; white-space: nowrap; vertical-align: middle; border-top: 1px solid transparent; }
.brdt td.rk { width: 28px; text-align: center; color: var(--muted); }
.brdt td.nm { width: 100%; max-width: 0; overflow: hidden; text-overflow: ellipsis; }
.brdt td.nm .who { font-size: 15px; }
.brdt td.n { text-align: right; font-variant-numeric: tabular-nums; }
.brdt td.n small { display: block; color: var(--muted); font-size: 11.5px; }
.brdt td.sqc { text-align: center; padding: 9px 2px; }
.brdt tr.you td { background: var(--you); border-top-color: var(--you); }
.brdt tr.you + tr td { border-top-color: var(--you); }  /* no seam under the you row either */
.brdt tr.you td.nm .who { font-weight: 700; }
/* 3.8.2: each crew row's Pip in the emoji's place, in its person's colour and look (sev.js; the add-on's .dc-rsev):
   a 30px drawing in an 18px slot, its body the slot, hanging out of the line so the row keeps its height;
   a little more room before the name than in Anki, so what Pip holds clears it at the site's size */
.rsev { display: inline-block; vertical-align: middle; margin: -9px 6px -5px 0; line-height: 0;
  --sv-a: var(--rs-l); --sv-line: var(--line); --sv-amb: var(--warn); --sv-mut: var(--muted); }
@media (prefers-color-scheme: dark) { .rsev { --sv-a: var(--rs-d); } }
.rsev .sv-slot { position: relative; display: inline-block; vertical-align: middle; }
.rsev .sv-slot > svg { position: absolute; display: block; overflow: visible; }
.brdt tr.dim td { color: var(--muted); }
.brdt .ago { font-size: 12px; font-weight: 700; }
.brdt .ago.fresh { color: var(--accent); } .brdt .ago.hours { color: var(--warn); } .brdt .ago.faded { color: var(--muted); font-weight: 400; }
.brdt .badge, .brdt .note { font-size: 12px; color: var(--muted); }
.brdt .chip { font-size: 12px; color: var(--muted); margin-left: 6px; white-space: nowrap; }
.brdt .chip.live { color: var(--accent); font-weight: 700; }
.brdt .chip.live::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); margin-right: 5px; vertical-align: 1px; }
.brdt .chip.exam { color: var(--warn); font-weight: 700; }
.brdt .bub { display: inline-block; margin-top: 5px; font-size: 12.5px; padding: 3px 10px; border-radius: 99px; background: var(--well); color: var(--muted); max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
/* 3.9.1, board.py's dc-cpill: the cheer, a pill after the name */
.brdt .cpill { display: none; margin-left: 6px; padding: 0 8px; border: 1px solid var(--accent); border-radius: 99px; color: var(--accent);
  font-size: 11px; font-weight: 700; line-height: 17px; white-space: nowrap; vertical-align: 1px; text-decoration: none; }
.brdt td.nm:hover .cpill, .brdt td.nm:focus-within .cpill { display: inline-block; }
.brdt .cpill:hover, .brdt .cpill:focus-visible { background: var(--accent); color: var(--accent-ink); }
.brdt td.nm:hover .who, .brdt td.nm:focus-within .who { display: inline-block; max-width: 56%; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
.brdt tr.you .who { max-width: none; }
.sq { width: 14px; height: 14px; border-radius: 3px; background: var(--well); display: inline-block; } .sq.on { background: var(--accent); }
.cheer-pop { position: absolute; right: 0; z-index: 5; display: flex; gap: 2px; padding: 4px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 6px 18px rgba(0,0,0,0.12); }
.cheer-pop button { font-size: 18px; padding: 2px 5px; }
.brd .foot { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 13px; padding-top: 10px; border-top: 1px solid var(--line); }
.brd .foot button.linkish { font-size: 13px; }
.note-inline { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; font-size: 13px; background: var(--well); border-radius: 8px; padding: 8px 10px; }
.dg { display: grid; gap: 4px; margin-bottom: 10px; }
.dgh { font-size: 13px; }
.dr { display: grid; grid-template-columns: 110px minmax(0, 1fr) 110px; gap: 10px; align-items: center; font-size: 12.5px; }
.dr.me .dn { font-weight: 700; }
.dn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dtrack { position: relative; height: 12px; background: var(--well); border-radius: 3px; overflow: hidden; display: block; }
.dtrack i { position: absolute; left: 0; top: 0; bottom: 0; }
.dtrack .fs, .dkey .fs { background: var(--accent); opacity: 0.35; } .dtrack .fm, .dkey .fm { background: var(--accent); }
.dkey i { display: inline-block; width: 12px; height: 8px; border-radius: 2px; margin: 0 4px 0 10px; }
.dkey i:first-child { margin-left: 0; }
.dtrack .fo, .dkey .fo { background: repeating-linear-gradient(45deg, transparent 0 3px, var(--accent) 3px 4px); opacity: 0.45; }
@media (max-width: 560px) { .brdt .k-time, .brdt .k-retention { display: none; } .dr { grid-template-columns: 80px 1fr 80px; } }
.panel { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: var(--card); display: grid; gap: 8px; }
.panel h4 { margin: 0; font-size: 14px; display: flex; justify-content: space-between; gap: 8px; }
.panel h4 a { text-decoration: none; font-weight: 700; font-size: 12.5px; }
.panel h3 { font-size: 14px; margin: 6px 0 0; }
.sqs { display: inline-flex; gap: 3px; }
.sqs i { width: 12px; height: 12px; border-radius: 2px; background: var(--well); display: inline-block; }
.sqs i.on { background: var(--accent); }
.sqs i.later { opacity: 0.4; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; }
.tiles div { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; display: grid; background: var(--card); }
.tiles b { font-size: 19px; font-variant-numeric: tabular-nums; }
.tiles small { color: var(--muted); font-size: 11.5px; }
.crew { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.crew td { padding: 6px 4px; border-top: 1px solid var(--line); white-space: nowrap; }
.crew td.nm { width: 100%; max-width: 0; overflow: hidden; text-overflow: ellipsis; }
.crew tr.you td { background: var(--you); }
.crew .ok { color: var(--accent); }
.linkish { background: none; border: 0; color: var(--accent); padding: 0; font-weight: 700; cursor: pointer; }
.cheer { background: var(--well); border-radius: 8px; padding: 6px 10px; font-size: 13.5px; }
.pills { justify-self: start; display: inline-flex; border: 1px solid var(--line); border-radius: 99px; overflow: hidden; }
.pills button { background: transparent; color: var(--muted); border: 0; border-radius: 0; font-size: 12.5px; padding: 4px 12px; font-weight: 600; }
.pills button.on { background: var(--accent); color: var(--accent-ink); }
.prow { display: grid; grid-template-columns: minmax(0, 1fr) 90px auto; gap: 10px; align-items: center; font-size: 13px; }
.chart { width: 100%; max-width: 900px; height: auto; display: block; }  /* 3.4 review, N5: the column's width */
.chart .grid { stroke: var(--line); }
.chart .tick { fill: var(--muted); font-size: 10.5px; }
.chart .barm { fill: var(--accent); opacity: 0.85; }
.chart .cap { stroke: var(--ink); stroke-width: 1.5; stroke-dasharray: 5 4; }
.chart .capl, .chart .lab { fill: var(--ink); font-size: 11px; font-weight: 600; }
.chart .ln { fill: none; stroke-width: 2; }
.chart .ln.plan { stroke: var(--muted); stroke-dasharray: 6 5; }
.chart .dot { fill: var(--accent); stroke: var(--card); stroke-width: 2; }
.key { display: flex; gap: 14px; font-size: 12px; color: var(--muted); margin: 4px 0; }
.key i { display: inline-block; width: 16px; vertical-align: middle; margin-right: 6px; }
.key .k-you { height: 8px; width: 8px; border-radius: 50%; background: var(--accent); }
.key .k-plan { border-top: 2px dashed var(--muted); }
.rail .prow { grid-template-columns: 1fr; gap: 4px; margin-bottom: 10px; }
.rail .prow .bar { width: 100%; }
.sqb + .sqb { margin-top: 18px; }
@media (max-width: 560px) {
  .brdt td.nm { white-space: normal; overflow: visible; min-width: 100px; }
  .brdt td, .brdt th { padding-left: 5px; padding-right: 5px; }
  .brdt .bub { white-space: normal; }
}
.wb > * { min-width: 0; }
.brd > * { min-width: 0; }
@media (max-width: 560px) { .brdt .bub { border-radius: 12px; } }

/* 3.3: the plan builder is a calendar */
main.wide { max-width: 1180px; }  /* S1: the same frame as every page */
.bl2 { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 16px; align-items: start; }
.bl2 > * { min-width: 0; }
.side2 > summary { display: none; }
.tree2 { border: 1px solid var(--line); border-radius: 12px; padding: 10px; background: var(--card); display: flex; flex-direction: column; gap: 6px; font-size: 13px; position: sticky; top: 10px; max-height: calc(100vh - 20px); overflow: hidden; }
.tree2 .tlist { flex: 1 1 auto; min-height: 120px; }
.tree2 .thead { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.tree2 input[type=search] { width: 100%; }
.tlist { overflow: auto; display: grid; gap: 1px; align-content: start; min-height: 120px; }
.tn { display: grid; grid-template-columns: 14px 16px minmax(0, 1fr) auto auto; gap: 5px; align-items: center; padding: 3px 4px; border-radius: 6px; cursor: grab; }
.tn:hover { background: var(--well); }
.tn .tw { color: var(--faint); background: none; border: 0; padding: 0; font-size: 11px; font-weight: 400; }
.tn input[type=checkbox] { margin: 0; accent-color: var(--accent); }
.tn .nm { overflow: hidden; }
.tn .nm, .tn .raw { white-space: nowrap; text-overflow: ellipsis; }
.raw { display: block; font: 10.5px/1.3 ui-monospace, Menlo, monospace; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tn small { color: var(--muted); font-variant-numeric: tabular-nums; }
.tn.used .nm { color: var(--faint); }
/* 3.8.0: the plan's own tags, on top of the deck's */
.ptags { display: grid; gap: 2px; padding-bottom: 8px; border-bottom: 1px solid var(--line); flex: 0 0 auto; }
.ptags .ptlist { display: grid; gap: 2px; max-height: min(40vh, 340px); overflow-y: auto; overscroll-behavior: contain; }
.ptags .thead { justify-content: flex-start; flex-wrap: wrap; }
.ptags .psub { overflow-wrap: anywhere; margin-bottom: 4px; }
.ptag { padding: 3px 4px; border-radius: 6px; }
.ptag:hover { background: var(--well); }
.ptag .pt1 { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ptag .pt1 b { color: var(--accent); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ptag .pt1 small { white-space: nowrap; font-variant-numeric: tabular-nums; }
.ptag .pt1 .sp { flex: 1; }
.ptag .ptname { font: inherit; width: 12em; max-width: 100%; }
.ptag .pfrom { overflow-wrap: anywhere; padding-left: 2px; }
.ovl { display: grid; gap: 6px; padding-top: 8px; border-top: 1px solid var(--line); }
.ovl .row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ovl input { min-width: 0; flex: 1 1 10em; }
.aitag { border-top: 1px solid var(--line); padding-top: 8px; display: grid; gap: 4px; }
.aitag p { margin: 0; }
.tn .add, .ptag .add { border: 1px solid var(--line); background: var(--card); color: var(--accent); border-radius: 6px; padding: 0 7px; font-size: 13px; line-height: 20px; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 99px; overflow: hidden; }
.seg button { background: transparent; color: var(--muted); border: 0; border-radius: 0; font-size: 12px; padding: 3px 11px; font-weight: 600; }
.seg button.on { background: var(--accent); color: var(--accent-ink); }
.tree2 .seg { justify-self: start; flex-wrap: wrap; border-radius: 10px; }
.pace2 { border: 1px solid var(--line); border-radius: 12px; background: var(--card); padding: 10px 12px; display: grid; gap: 8px; margin-bottom: 10px; }
.prow2 { display: flex; gap: 8px 18px; align-items: center; flex-wrap: wrap; font-size: 13px; color: var(--muted); }
.prow2 input { font-size: 13px; padding: 3px 6px; }
.wdays { display: inline-flex; gap: 3px; }
.wdays button { width: 26px; height: 26px; padding: 0; border-radius: 6px; font-size: 12px; background: var(--well); color: var(--muted); border-color: var(--line); }
.wdays button.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.pcs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pc { text-align: left; background: var(--bg); color: var(--ink); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; display: grid; gap: 4px; font-weight: 400; }
.pc.on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: var(--card); }
.pc input { font-size: 13px; padding: 3px 6px; }
.pc small { color: var(--muted); }
.caltool2 { display: flex; gap: 8px 10px; align-items: center; flex-wrap: wrap; margin: 6px 0 8px; }
.caltool2 .sp { flex: 1; }
.caltool2 button.quiet { padding: 4px 10px; }
.ctitle { margin-left: 6px; font-size: 16px; }
.hnote { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; background: var(--warn-tint); border-radius: 10px; padding: 8px 12px; font-size: 13px; margin-bottom: 8px; }
.hnote button { padding: 4px 10px; font-size: 13px; }
/* 3.9.2: the reviews a plan's dates bring, under the calendar */
.rnote { display: flex; gap: 4px 12px; align-items: baseline; flex-wrap: wrap; font-size: 13px; margin-top: 10px; }
.rnote .muted { font-size: 12px; font-variant-numeric: tabular-nums; }
.cal2 { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal2 .dh { font-size: 11.5px; font-weight: 700; color: var(--muted); padding: 0 4px; }
.cal2 .d { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 5px; min-height: 92px; display: flex; flex-direction: column; gap: 3px; cursor: pointer; min-width: 0; }
.cal2.week .d { min-height: 260px; }
.cal2 .d.other { opacity: 0.5; }
.cal2 .d.off { background: repeating-linear-gradient(135deg, var(--card), var(--card) 6px, var(--well) 6px, var(--well) 8px); }
.cal2 .d.catchup, .cal2 .d.taper { background: var(--well); }
/* 3.6.5: the box marks the picked day; today keeps a filled date */
.cal2 .d.today .dn2 > span:first-child { background: var(--accent); color: var(--accent-ink); border-radius: 99px; padding: 0 6px; font-weight: 700; }
.cal2 .d.picked { outline: 2px solid var(--accent); outline-offset: 1px; }
.cal2 .d.over { outline: 2px dashed var(--accent); }
.dn2 { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); }
.dn2 b { color: var(--ink); font-variant-numeric: tabular-nums; }
.d.heavy .dn2 b { color: var(--warn); }
.ch { display: flex; justify-content: space-between; gap: 4px; align-items: baseline; width: 100%; text-align: left; font: 11.5px/1.3 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-weight: 600; border: 0; border-radius: 5px; padding: 2px 5px; cursor: grab; color: var(--ink); }
.ch span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 3.8.1: a date's own name above its chips */
.dname { font-size: 11.5px; font-weight: 700; color: var(--ink); padding: 0 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal2.week .dname { white-space: normal; }
.ch small { font-weight: 400; color: var(--muted); font-variant-numeric: tabular-nums; }
.cal2.week .ch span { white-space: normal; }
.ch.ev { border-left: 3px solid var(--accent); }
.c0 { background: #e3f0e3; } .c1 { background: #e2ebf6; } .c2 { background: #efe4f3; } .c3 { background: #f6ecdc; } .c4 { background: #e2f1f0; } .c9 { background: var(--well); }
.single { background: transparent; box-shadow: inset 0 0 0 1px var(--faint); border-style: dashed; }
@media (prefers-color-scheme: dark) {
  .c0 { background: #26372a; } .c1 { background: #253245; } .c2 { background: #36283d; } .c3 { background: #3b3223; } .c4 { background: #203634; }
}
.load { height: 4px; background: var(--well); border-radius: 2px; overflow: hidden; margin-top: auto; }
.load i { display: block; height: 100%; background: var(--accent); }
.load.hi i { background: var(--warn); }
.dayp { border: 1px solid var(--line); border-radius: 12px; background: var(--card); padding: 10px 12px; display: grid; gap: 10px; margin-bottom: 10px; }
.du { display: grid; gap: 6px; padding-top: 8px; border-top: 1px solid var(--line); }
.du .uname { font-weight: 600; max-width: 420px; }
.chips2 { display: flex; flex-wrap: wrap; gap: 5px; }
.ch2 { display: inline-flex; gap: 8px; align-items: center; border-radius: 8px; padding: 4px 6px 4px 9px; font-size: 13px; }
.ch2 .raw { max-width: 260px; }
.ch2 small { color: var(--muted); }
/* 3.8.1: tags a date's name points at */
.sug { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.sug:empty { display: none; }
.sug1 { border: 0; font: inherit; font-size: 12.5px; cursor: pointer; color: var(--ink); padding: 3px 9px; }
.sug1:hover { box-shadow: inset 0 0 0 1px var(--accent); }
.dayp .sug .sug1 { display: inline-flex; width: auto; max-width: 100%; gap: 8px; text-align: left; }
.dayp .sug .sug1 > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch2 .cps { font-size: 12px; font-weight: 600; white-space: nowrap; color: var(--muted); }  /* 3.8.0: Copy search */
.ch2 .cps:hover { color: var(--accent); }
.ch2 .x { background: none; border: 0; color: var(--muted); padding: 0 4px; font-size: 15px; }
/* 3.8.1: All of it / Only SLG 12, on a deck tag's chip */
.ch2 .inpick { font: inherit; font-size: 12px; font-weight: 600; color: var(--muted); background: transparent; border: 1px solid var(--line);
  border-radius: 6px; padding: 1px 4px; max-width: 140px; }
.ch2 .inpick:hover, .ch2 .inpick:focus-visible { color: var(--accent); border-color: var(--accent); }
.linkish { background: none; border: 0; color: var(--accent); padding: 0; font-weight: 600; font-size: 12.5px; }
label.inline { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: 0; }
.splitp { border: 1px solid var(--accent); border-radius: 10px; padding: 10px 12px; display: grid; gap: 8px; }
.opt3 { display: flex; gap: 8px; align-items: flex-start; margin: 0; color: var(--ink); font-size: 14px; }
.opt3.dis { opacity: 0.5; }
.opt3 input[type=number] { font-size: 13px; padding: 2px 6px; }
.opt3 code { font-size: 12px; background: var(--well); padding: 1px 5px; border-radius: 4px; }
.opt3 button { padding: 2px 8px; font-size: 12px; margin-left: 4px; }
@media (max-width: 980px) { .pcs { grid-template-columns: 1fr; } }
@media (max-width: 700px) {
  .bl2 { grid-template-columns: 1fr; }
  .side2 > summary { display: block; cursor: pointer; font-weight: 600; margin-bottom: 8px; }
  .tree2 { position: static; max-height: 60vh; }
  .cal2 { grid-template-columns: 1fr; }
  .cal2 .dh { display: none; }
  .cal2 .d, .cal2.week .d { min-height: 0; }
  .cal2 .d.off:not(:has(.ch)), .cal2 .d.other { display: none; }
}

.calwrap { display: grid; gap: 10px; align-items: start; }
.calwrap.has-day { grid-template-columns: minmax(0, 1fr) 320px; }
.calwrap > * { min-width: 0; }
.calwrap .dayp { position: sticky; top: 10px; margin: 0; max-height: calc(100vh - 90px); overflow: auto; }
.calwrap .opt3 { flex-wrap: wrap; }
.calwrap.has-day .cal2.month .ch small { display: none; }
@media (max-width: 1100px) { .calwrap.has-day { grid-template-columns: 1fr; } .calwrap .dayp { position: static; max-height: none; } }
.dayp > *, .splitp > *, .du > * { min-width: 0; }
.dayp > button.linkish { justify-self: start; }
.dayp { overflow-wrap: anywhere; }
.opt3 > span { min-width: 0; flex: 1; }
.opt3 code { word-break: break-all; }
.calwrap .ch2 { flex-wrap: wrap; max-width: 100%; }
.calwrap .du .uname { width: 100%; }
@media (max-width: 700px) { .tree2 .thead b { display: none; } .tree2 .ptags .thead b { display: inline; } }
.aibox { border: 1px solid var(--line); border-radius: 12px; background: var(--card); padding: 12px 14px; display: grid; gap: 6px; }
.aibox p { margin: 0; }
.aipre { white-space: pre-wrap; max-height: 320px; overflow: auto; background: var(--well); padding: 10px; border-radius: 8px; margin: 8px 0 0; }
.pv { border: 1px solid var(--line); border-radius: 12px; background: var(--card); padding: 10px 12px; display: grid; gap: 6px; }
.pv .warnbox { background: var(--warn-tint); border-radius: 8px; padding: 8px 10px; text-align: left; }  /* 3.8.1: tags still on dates */
.pv .warnbox b { color: var(--warn); }
.pv .warnbox ul { margin: 6px 0; padding-left: 20px; }
.pvrow { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; gap: 10px; font-size: 13.5px; padding: 4px 0; border-bottom: 1px solid var(--line); }
@media (max-width: 700px) { .pvrow { grid-template-columns: 1fr; gap: 2px; } }
/* 3.3: plans together */
.people2 { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 4px; font-size: 13px; }
.who2 { display: inline-flex; align-items: center; gap: 2px; background: var(--well); border-radius: 99px; padding: 2px 10px; }
.who2 .x, .note .x { background: none; border: 0; color: var(--muted); padding: 0 2px 0 4px; font-size: 14px; font-weight: 400; }
.notes { display: grid; gap: 6px; border-top: 1px solid var(--line); padding-top: 8px; }
.note { font-size: 13px; background: var(--well); border-radius: 8px; padding: 5px 8px; display: flex; gap: 4px; align-items: baseline; }
.note span { flex: 1; }
.dn2 .nb { font-size: 11px; margin-left: auto; margin-right: 6px; }
.hist { display: grid; gap: 0; max-width: 720px; }
.hrow { display: grid; grid-template-columns: minmax(0, 1fr) auto 50px; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; align-items: baseline; }
.share .row .code { font-size: 18px; }
.steps { padding-left: 22px; display: grid; gap: 10px; max-width: 620px; } .steps li { line-height: 1.6; } .steps button { padding: 2px 10px; font-size: 13px; }
.btitle { flex: 1 1 320px; min-width: 0; }
.tname { font-family: inherit; font-size: 26px; font-weight: 700; line-height: 1.2; border: 1px solid transparent; background: transparent; padding: 2px 6px; margin: 8px 0 4px -7px; width: 100%; max-width: 900px; color: var(--ink); resize: none; overflow: hidden; display: block; box-sizing: border-box; }
.btitle h1 { overflow-wrap: anywhere; } .tname:hover, .tname:focus { border-color: var(--line); background: var(--card); }
.ch.rv { background: transparent; box-shadow: inset 0 0 0 1.5px var(--warn); color: var(--warn); cursor: pointer; }
.rvbox { display: grid; gap: 4px; border-top: 1px solid var(--line); padding-top: 8px; }
.rvbox select { font-size: 12.5px; padding: 3px 6px; max-width: 130px; }
.ch.warn, .ch2.warn { background: var(--warn-tint); }
.ch2 small.w { color: var(--warn); font-weight: 700; }
/* 3.4: add to calendar */
.calmenu { position: relative; display: inline-block; font-size: 13px; }
.calmenu > summary { list-style: none; cursor: pointer; color: var(--accent); font-weight: 600; }
.calmenu > summary::-webkit-details-marker { display: none; }
.calmenu > summary::after { content: " ▾"; }
.calpop { position: absolute; right: 0; top: 1.8em; z-index: 5; background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12); display: grid; min-width: 220px; padding: 4px 0; text-align: left; }
.calpop a, .calpop button { padding: 7px 14px; text-decoration: none; color: var(--ink); font-size: 13.5px; text-align: left; font-weight: 500; }
.calpop a:hover, .calpop button:hover { background: var(--well); }
main:not(.wide) .calmenu .calpop { left: 0; right: auto; }
.lcmore .calpop, main:not(.wide) .lcmore .calpop { left: auto; right: 0; }  /* a library card's ⋯ sits at its right end */

/* 3.4 review */
.invwho { display: flex; align-items: center; gap: 12px; } .invwho .em { font-size: 34px; line-height: 1; } .invwho h1 { margin: 0; }
.phone-only { display: none; }
@media (max-width: 700px) { .phone-only { display: block; } .wide-only { display: none !important; } }
nav .wide-only { display: inline-flex; gap: 16px; }
nav .navme { display: none; position: relative; white-space: nowrap; }  /* the initial and its ▾ on one line */
@media (max-width: 700px) { nav .navme { display: block; } }
nav .navme summary { list-style: none; width: 26px; height: 26px; border-radius: 50%; background: var(--well); display: grid; place-items: center; font-weight: 700; font-size: 12px; cursor: pointer; }
nav .navme summary::-webkit-details-marker { display: none; }
nav .navme summary::after { content: none; }
nav .navme .calpop { right: 0; left: auto; }
.pdates { display: grid; gap: 4px; margin: 6px 0 4px; max-width: 560px; }
.pdates > div { display: grid; grid-template-columns: 90px minmax(0, 1fr) auto; gap: 10px; padding: 6px 10px; border-radius: 8px; background: var(--well); font-size: 13.5px; }
.pdates small { color: var(--muted); font-variant-numeric: tabular-nums; }
.mailme { border: 1px solid var(--line); border-radius: 10px; padding: 12px; margin: 12px 0; background: var(--card); }
.mailme .row input { flex: 1 1 160px; }
.mailme .status:empty { display: none; }
.codebox { display: grid; gap: 6px; max-width: 560px; }
.codebox label { margin: 0; }
.codebox .row input { flex: 1 1 200px; }
.codeout .res { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; padding: 8px 12px; border-radius: 8px; background: var(--you); font-size: 14px; }
.codeout .res button, .codeout .res a { margin-left: auto; }
.codeout .res.bad { background: var(--warn-tint); color: var(--warn); }
.codeout .res.ok { background: var(--you); }
.friends { margin-top: 10px; }
.todayline { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: baseline; padding: 10px 14px; border-radius: 10px; background: var(--you); margin-bottom: 14px; font-size: 14.5px; }
.plan-row .fol { grid-row: span 2; align-self: center; }

/* the builder, 3.4 review */
.pacefold > summary { list-style: none; cursor: pointer; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); margin-bottom: 10px; display: flex; justify-content: space-between; }
.pacefold > summary::-webkit-details-marker { display: none; }
.pacefold > summary::after { content: "▾"; color: var(--muted); }
.pacefold[open] > summary { margin-bottom: 8px; }
@media (max-width: 700px) {
  .side2 > summary { list-style: none; border: 1px solid var(--accent); border-radius: 10px; padding: 10px 12px; display: flex; gap: 6px; font-weight: 400; }
  .side2 > summary::-webkit-details-marker { display: none; }
  .side2 > summary::after { content: "▸"; margin-left: auto; color: var(--accent); }
  .side2[open] > summary::after { content: "▾"; }
  .savebar { right: 16px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
}
.tree2.flash { outline: 2px solid var(--warn); outline-offset: 2px; }
details.fmt > summary { cursor: pointer; color: var(--muted); }

/* the builder, calmer (B1-B8) */
.bsub { margin: 2px 0 0; }
.sharemenu { position: relative; }
.sharemenu > summary { list-style: none; cursor: pointer; border: 1.5px solid var(--accent); color: var(--accent); border-radius: 8px; padding: 6px 14px; font-weight: 600; font-size: 14px; }
.sharemenu > summary::-webkit-details-marker { display: none; }
.sharemenu > summary::after { content: " ▾"; }
.sharepop { position: absolute; right: 0; top: calc(100% + 6px); width: 320px; max-width: calc(100vw - 32px); z-index: 15; background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 12px 34px rgba(0,0,0,.14); padding: 14px; display: grid; gap: 10px; text-align: left; }
.sharepop .code { font: 700 20px/1 ui-monospace, Menlo, monospace; letter-spacing: 0.1em; }
.sharepop .calmenu .calpop { left: 0; right: auto; }
.lbl { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.pace2 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: 13px; color: var(--muted); }
.pace2 .pi { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pace2 .psep { width: 1px; align-self: stretch; background: var(--line); }
.pace2 input, .pace2 select { font-size: 13px; padding: 3px 6px; }
.pace2 select { font-weight: 600; color: var(--ink); }
.calcard { border: 1px solid var(--line); border-radius: 12px; background: var(--card); padding: 10px 12px 12px; }
.calcard .caltool2:first-child { margin-top: 0; }
.calcard .cal2 .d { background: var(--bg); }
.calcard .cal2 .d.off { background: repeating-linear-gradient(135deg, var(--bg), var(--bg) 6px, var(--well) 6px, var(--well) 8px); }
.calcard .cal2 .d.catchup, .calcard .cal2 .d.taper { background: var(--well); }
.side3 { position: sticky; top: 10px; max-height: calc(100vh - 20px); display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 12px; background: var(--card); overflow: hidden; }
.side3 > .tree2 { border: 0; border-radius: 0; position: static; max-height: none; flex: 1 1 auto; min-height: 0; }
.side3 > .dayp { border: 0; border-radius: 0; margin: 0; overflow: auto; min-height: 0; }
.ptabs { display: flex; border-bottom: 1px solid var(--line); }
.ptab { flex: 1; display: flex; align-items: center; min-width: 0; }
.ptab > button:first-child { flex: 1; background: none; border: 0; border-radius: 0; color: var(--muted); font-weight: 600; font-size: 13px; padding: 10px 12px; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ptab.on { box-shadow: inset 0 -2px 0 var(--accent); }
.ptab.on > button:first-child { color: var(--ink); }
.ptab .x { background: none; border: 0; color: var(--muted); font-size: 15px; padding: 0 10px; }
.adding { background: var(--you); border-radius: 8px; padding: 6px 9px; font-size: 12.5px; }
.tree2 .seg { display: flex; width: 100%; flex-wrap: nowrap; border-radius: 10px; }
.tree2 .seg button { flex: 1; padding: 4px 6px; }
@media (hover: hover) {
  .tn .add { visibility: hidden; }
  .tn:hover .add, .tn .add:focus-visible { visibility: visible; }
}
.dl { display: grid; gap: 3px; margin: 0; }
.addc { display: grid; gap: 4px; }
/* 3.8.0: the plan's lines every week, under the pace */
.every2 { border: 1px solid var(--line); border-radius: 12px; background: var(--card); padding: 10px 12px; display: grid; gap: 8px; margin-bottom: 10px; font-size: 13px; }
.every2 .todo { display: grid; grid-template-columns: auto minmax(0, 1.4fr) auto minmax(0, 1fr) auto; gap: 6px; align-items: center; }
.every2 .todo input, .every2 .todo select { min-width: 0; font-size: 13px; padding: 3px 6px; }
.every2 > .linkish { justify-self: start; }
.ptagsf .ptf { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.ptagsf .ptf1 { display: inline-flex; align-items: baseline; gap: 8px; min-width: 0; overflow-wrap: anywhere; }
.ptagsf .ptf1 b { color: var(--accent); }
.ptagsf .cps { font-size: 12px; font-weight: 600; color: var(--muted); }
.ptagsf .cps:hover { color: var(--accent); }
@media (max-width: 560px) { .every2 .todo { grid-template-columns: auto minmax(0, 1fr) auto; } .every2 .todo .wdays { grid-column: 1 / -1; } .every2 .todo input + .wdays + input { grid-column: 1 / 3; } }
.addc .todo { display: grid; grid-template-columns: auto minmax(0, 1.4fr) minmax(0, 1fr) auto; gap: 6px; align-items: center; }
.addc .todo input, .addc .todo select { min-width: 0; }
@media (max-width: 560px) { .addc .todo { grid-template-columns: auto minmax(0, 1fr) auto; } .addc .todo input + input { grid-column: 2 / 3; } }
.dayp .acts { display: flex; gap: 16px; flex-wrap: wrap; }
.notesw { display: grid; gap: 4px; border-top: 1px solid var(--line); padding-top: 8px; }
.notesw .notes { border-top: 0; padding-top: 0; }
/* anchored on its button's right edge (it sits at the end of the title row);
   only when the header wraps on a phone does it open from the left */
@media (max-width: 420px) { .sharepop { left: 0; right: auto; } }

/* E1: pasting ids */
.addin { flex: 1; resize: vertical; min-height: 34px; font-size: 12.5px; }
.found { background: var(--you); border-radius: 8px; padding: 7px 9px; font-size: 12.5px; display: grid; gap: 4px; }
.found .seg { border-radius: 8px; }

/* E2: print */
.printbar { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; font-size: 13px; }
.printbar input[type=date] { font-size: 13px; padding: 3px 6px; }
.paperwrap { background: var(--well); border-radius: 12px; padding: 20px; overflow-x: auto; }
.printout { background: #ffffff; color: #1f1f1c; max-width: 720px; margin: 0 auto; padding: 32px 36px 36px; box-shadow: 0 6px 24px rgba(0,0,0,.14); font-size: 13px; line-height: 1.4; }
.printout h2 { font-size: 22px; margin: 0; color: #1f1f1c; }
.printout .pm { color: #6b6b64; margin: 2px 0 14px; }
.printout .wk { font-weight: 700; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: #6b6b64; margin: 14px 0 4px; }
.printout table { width: 100%; border-collapse: collapse; }
.printout td { border-top: 1px solid #deded6; padding: 6px; vertical-align: top; color: #1f1f1c; }
.printout tr { break-inside: avoid; }
.printout td.bx { width: 16px; }
.printout td.bx i { display: inline-block; width: 11px; height: 11px; border: 1.3px solid #6b6b64; border-radius: 2px; margin-top: 3px; }
.printout td.dt { width: 88px; white-space: nowrap; font-weight: 600; }
.printout td.n { width: 48px; text-align: right; font-variant-numeric: tabular-nums; color: #6b6b64; }
.printout .t { display: block; font-weight: 600; }
.printout .t.muted { color: #a3a39b; font-weight: 400; }
.printout .src { display: block; color: #3d3d38; }
.printout .src b { font-weight: 600; color: #6b6b64; font-size: 11.5px; }
.printout .nt { display: block; font-style: italic; color: #6b6b64; }
.printout tr.rv td { background: #f6f1e6; }
.printout tr.off td { color: #a3a39b; }
.printout .pfoot { margin-top: 16px; color: #8a8a82; font-size: 11px; }
@media print {
  @page { margin: 14mm; }
  body { background: #fff !important; }
  body * { visibility: hidden; }
  .printout, .printout * { visibility: visible; }
  .printout { position: absolute; left: 0; top: 0; width: 100%; max-width: none; box-shadow: none; padding: 0; }
  .printout tr.rv td { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .savebar { display: none !important; }
}
.found[hidden] { display: none; }
.du .opens { display: block; margin-top: 4px; }

/* F1: events, and the days that prep for them */
.cal2 .ch.evc { background: var(--card); border: 1.5px solid var(--ink); color: var(--ink); display: grid; text-align: left; }
.cal2 .ch.evc small { font-weight: 400; color: var(--muted); }
.cal2 .for { font-size: 11px; color: var(--muted); line-height: 1.2; }
.cal2 .for b { color: var(--ink); font-weight: 600; }
.cal2 .d.lead { box-shadow: inset 0 -3px 0 var(--ink); }
.cal2 .d.hl { outline: 2px solid var(--ink); outline-offset: 1px; }
.evbox { border: 1.5px solid var(--ink); border-radius: 8px; padding: 8px 10px; display: grid; gap: 6px; }
.evbox input { font-weight: 600; }
.evform { display: grid; gap: 6px; background: var(--well); border-radius: 8px; padding: 8px; }
.printout .t.evt { text-transform: uppercase; letter-spacing: .04em; font-size: 12px; }
.printout .fx { font-weight: 400; color: #6b6b64; }
.printout tr.evr td { border-top: 1.5px solid #1f1f1c; }
.cal2 .you { font-size: 11px; color: var(--muted); }
/* 3.5, B: the library */
.filters { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 10px 0 14px; }
.pill { background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: 99px; font-size: 13px; font-weight: 500; padding: 3px 11px; }
.pill.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.lib { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.lc { display: grid; gap: 6px; align-content: start; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); }
.lc .lcname { font-weight: 700; font-size: 15.5px; color: var(--ink); text-decoration: none; }
.lc .lcname:hover { color: var(--accent); }
.lctags { display: flex; flex-wrap: wrap; gap: 4px; }
.lctags span { background: var(--well); color: var(--muted); border-radius: 99px; padding: 1px 8px; font-size: 12px; }
.lc .row .btn, .lc .row button { padding: 5px 12px; font-size: 13px; }
.copyform { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; }
.copyform .status { margin: 0; }
.libnote { padding: 10px 12px; border-radius: 8px; background: var(--well); display: grid; gap: 6px; }
.libnote.out { background: var(--warn-tint); }
.hint { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 14px; align-items: center; padding: 9px 12px; border-radius: 8px; background: var(--warn-tint); font-size: 14px; }
.hint .row { gap: 14px; }
/* 3.5, C3: the class poster */
.printout.poster { display: grid; justify-items: center; text-align: center; gap: 10px; padding: 40px 32px; }
.printout.poster h2 { font-size: 34px; line-height: 1.15; margin: 0; }
.printout.poster .qr { width: 300px; height: 300px; }
.printout.poster .qr svg { width: 100%; height: 100%; display: block; }
.printout.poster .pcode { font: 700 34px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .12em; margin: 4px 0; }
.printout.poster .psteps { text-align: left; font-size: 16px; line-height: 1.6; margin: 6px 0; }
@media print { .printout.poster { min-height: 90vh; align-content: center; } }
button[hidden] { display: none; }
.lc .copyform button { padding: 5px 12px; font-size: 13px; }
/* 3.5, X: the admin's page */
.atiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; margin: 12px 0 14px; }
.at { border: 1px solid var(--line); border-radius: 10px; background: var(--card); padding: 10px 12px; display: grid; gap: 2px; }
.at > small:first-child { color: var(--muted); font-size: 12.5px; }
.at > b { font-size: 21px; font-variant-numeric: tabular-nums; }
.spark { width: 150px; height: 34px; display: block; }
.spark .sl { fill: none; stroke: var(--accent); stroke-width: 1.6; }
.spark .sd { fill: var(--accent); }
.agrid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
.agrid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
@media (max-width: 900px) { .agrid3, .agrid2 { grid-template-columns: 1fr; } }
.hbars { display: grid; grid-template-columns: max-content 1fr max-content; gap: 6px 10px; align-items: center; font-size: 13px; }
.hbars .hb { height: 9px; background: var(--well); border-radius: 99px; overflow: hidden; }
.hbars .hb i { display: block; height: 100%; background: var(--accent); border-radius: 99px; }
.hbars .hb i.g { background: var(--faint); }
.hbars b { font-variant-numeric: tabular-nums; text-align: right; }
.stackbar { display: flex; height: 16px; border-radius: 5px; overflow: hidden; background: var(--well); }
.stackbar i, .legend i { display: block; }
.stackbar .a, .legend .a { background: var(--accent); }
.stackbar .b, .legend .b { background: var(--faint); }
.stackbar .c, .legend .c { background: var(--well); }
.legend { display: grid; gap: 3px; font-size: 13px; }
.legend span { display: flex; gap: 7px; align-items: center; }
.legend i { width: 10px; height: 10px; border-radius: 2px; border: 1px solid var(--line); }
.mini3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mini3 div { border: 1px solid var(--line); border-radius: 8px; padding: 6px 9px; display: grid; }
.mini3 b { font-size: 18px; font-variant-numeric: tabular-nums; }
.mini3 small { color: var(--muted); font-size: 12px; }
.nlist { display: grid; }
.nrow { display: grid; grid-template-columns: 1fr auto auto; gap: 4px 12px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); font-size: 14px; }
.nrow > div { display: grid; }
.state { font-size: 11.5px; font-weight: 600; border-radius: 99px; padding: 1px 8px; background: var(--well); color: var(--muted); }
.state.showing { background: var(--you); color: var(--accent); }
/* 3.5, H: the home */
.tstrip { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin: 4px 0 14px; }
.ts:only-child { max-width: 300px; }  /* one tile keeps a tile's width */
.ts { border: 1px solid var(--line); border-radius: 10px; background: var(--card); padding: 10px 12px; display: grid; gap: 2px; align-content: start; font-size: 13.5px; }
.ts.on { background: var(--you); border-color: transparent; }
.ts > small:first-child { text-transform: uppercase; letter-spacing: .05em; font-size: 11px; font-weight: 700; color: var(--muted); }
.ts > b { font-size: 20px; }
.feed .fi { display: grid; grid-template-columns: 20px 1fr; gap: 8px; font-size: 13.5px; padding-top: 8px; border-top: 1px solid var(--line); }
.feed .fi > div { display: grid; gap: 2px; justify-items: start; min-width: 0; overflow-wrap: anywhere; }
.feed .fi .ic { text-align: center; }
.feed .fi .ic .rsev { margin: -2px 0 0; }  /* 3.8.22: a crewmate's Pip in the icon's place */
.feed .fi b .rsev { margin: -9px 7px -5px 0; }
.heatwrap { overflow-x: auto; display: grid; gap: 6px; }
.heat { display: grid; grid-template-columns: 28px max-content; grid-template-rows: auto auto; gap: 2px 4px; font-size: 10.5px; color: var(--muted); }
.heat .hm { grid-column: 2; display: grid; grid-template-columns: repeat(53, 10px); gap: 2px; }
.heat .hm span { white-space: nowrap; }
.heat .hd { grid-row: 2; display: grid; grid-template-rows: repeat(7, 10px); gap: 2px; }
.heat .hd span:nth-child(1) { grid-row: 1; } .heat .hd span:nth-child(2) { grid-row: 3; } .heat .hd span:nth-child(3) { grid-row: 5; }
.heat .hg { grid-row: 2; grid-column: 2; display: grid; grid-template-rows: repeat(7, 10px); grid-auto-flow: column; grid-auto-columns: 10px; gap: 2px; }
.heat i, .hk i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; background: var(--well); }
.heat i.fut { background: transparent; }
.heat i.pre, .hk i.pre { background: transparent; border: 1px dashed var(--line); }
/* 3.5.0: shades of my accent, whichever it is */
.heat i.l1, .hk i.l1 { background: color-mix(in srgb, var(--accent) 28%, var(--well)); } .heat i.l2, .hk i.l2 { background: color-mix(in srgb, var(--accent) 52%, var(--well)); }
.heat i.l3, .hk i.l3 { background: color-mix(in srgb, var(--accent) 76%, var(--well)); } .heat i.l4, .hk i.l4 { background: var(--accent); }
.heat i.now { outline: 1.5px solid var(--ink); outline-offset: 0; }
.hk { font-size: 11.5px; color: var(--muted); display: flex; align-items: center; gap: 3px; }
/* 3.5, L: the log */
.chart .barp { fill: var(--faint); opacity: 0.7; }
.chart .ln.seen { stroke: var(--accent); }
.chart .ln.open { stroke: var(--faint); }
.key .k-prev { height: 8px; width: 12px; background: var(--faint); border-radius: 2px; }
.key .k-now { height: 8px; width: 12px; background: var(--accent); border-radius: 2px; }
.key .k-seen { border-top: 2px solid var(--accent); }
.key .k-open { border-top: 2px solid var(--faint); }
.mini2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mini2 div { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; display: grid; }
.mini2 b { font-size: 19px; font-variant-numeric: tabular-nums; }
.mini2 small { color: var(--muted); font-size: 12px; }
.daytab { width: 100%; }
.daytab tr.off td { color: var(--faint); }
details summary { cursor: pointer; color: var(--accent); font-weight: 600; }
.agrid3, .agrid2 { align-items: start; }
.agrid3 .panel, .agrid2 .panel { align-content: start; }
.heatwrap .hk { position: sticky; left: 0; }
.daytab th { font-size: 12px; color: var(--muted); font-weight: 600; text-align: right; padding: 4px 4px 6px 14px; }
.daytab th.nm { text-align: left; padding-left: 4px; }
.daytab td.n { padding-left: 14px; }
.heatwrap .hk { width: max-content; }
@media (max-width: 700px) { .tstrip { grid-template-columns: 1fr 1fr; } .ts > b { font-size: 17px; } }
.panel h4 { flex-wrap: wrap; align-items: center; }
.atiles { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.spark { width: 100%; max-width: 150px; }

/* the admin's account lookup */
.people .hits { display: grid; }
.people .hit { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; text-align: left; background: none; border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: 7px 4px; color: var(--ink); font-weight: 400; width: 100%; }
.people .hit.on { background: var(--well); border-radius: 8px; border-top-color: transparent; }
.people .person { display: grid; gap: 12px; border-top: 1px solid var(--line); padding-top: 12px; }
.people .who { display: flex; gap: 12px; align-items: center; }
.people .who .em { font-size: 28px; }
.people .who b { font-size: 17px; }
.people .kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 5px 16px; font-size: 14px; margin: 0; }
.people .kv dt { color: var(--muted); }
.people .kv dd { margin: 0; overflow-wrap: anywhere; }
.people .plist { display: grid; gap: 4px; font-size: 14px; }
.people .plist > div { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 4px; }
.people .madetag { font-size: 11px; font-weight: 700; border-radius: 5px; padding: 1px 6px; background: var(--well); color: var(--accent); }
.people .confirm { border: 1.5px solid var(--warn); border-radius: 10px; padding: 10px 12px; display: grid; gap: 8px; font-size: 14px; }
.people .confirm label { display: grid; gap: 4px; }
.people .confirm[hidden] { display: none; }
.people .row { flex-wrap: wrap; }

/* 3.6: squad bingo's pool on /admin */
.bcard { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; max-width: 560px; }
.bcell { border: 1px solid var(--line); border-radius: 9px; padding: 8px 6px; display: grid; justify-items: center; gap: 2px; text-align: center; font-size: 13px; }
.bcell span { font-size: 20px; }
.bcell small { color: var(--muted); font-size: 11.5px; }
.bcell.mid { border-color: var(--warn, #b26a00); }
.blist { display: grid; }
.bitem { border-top: 1px solid var(--line); padding: 7px 0; }
.bitem.off { opacity: .55; }
.bline { display: grid; grid-template-columns: 28px 1fr auto; gap: 8px; align-items: start; }
.bline .bic { font-size: 18px; }
.bline > div { min-width: 0; overflow-wrap: anywhere; }
.bedit { display: grid; gap: 6px; padding: 6px 0; }
.brow { display: grid; grid-template-columns: 110px 1fr; gap: 8px; align-items: center; font-size: 13px; }
.brow > span { color: var(--muted); }
@media (max-width: 560px) { .brow { grid-template-columns: 1fr; gap: 2px; } }
.brow input[type="checkbox"] { justify-self: start; }
/* 3.6.5, P6: the footer's Feedback, and the admin's Feedback panel */
.appfoot { max-width: 1180px; margin: 0 auto; padding: 0 20px 28px; font-size: 13px; }
.appfoot a { color: var(--muted); }
.fb { display: grid; gap: 8px; }
.fb .item { border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px; display: grid; gap: 4px; background: var(--card); }
.fb .item.new { border-color: var(--accent); }
.fb .meta { display: flex; gap: 10px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.fb .meta b { color: var(--ink); }
.fb .acts { display: flex; gap: 14px; flex-wrap: wrap; }
.fb textarea { font-family: inherit; }
.fb [hidden] { display: none; }

/* The admin: a sidebar of pages and one set of gaps
   (16px between boxes, 12px inside them) */
.ashell { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 24px; align-items: start; margin-top: 8px; }
.aside { position: sticky; top: 12px; display: grid; gap: 2px; }
.aside button { background: transparent; border: 0; border-radius: 8px; color: var(--ink); font-weight: 500; text-align: left; padding: 8px 12px; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.aside button:hover { background: var(--well); }
.aside button.on { background: var(--you); color: var(--accent); font-weight: 700; }
.aside .ct { font-style: normal; background: var(--warn); color: var(--card); border-radius: 99px; padding: 0 7px; font-size: 11px; font-weight: 700; }
.amain { min-width: 0; }
.apage { display: grid; gap: 16px; align-content: start; }
.apage[hidden] { display: none; }
.apage h2 { margin: 0; }
.apage > .panel, .apage .agrid2 .panel, .apage .agrid3 .panel { padding: 14px 16px; gap: 12px; }
.apage .agrid2, .apage .agrid3 { gap: 16px; margin-bottom: 0; }
.apage .people .person { gap: 16px; padding-top: 16px; }
.people .box { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; display: grid; gap: 12px; align-content: start; }
.people .box h4 { margin: 0; font-size: 14px; display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; align-items: baseline; }
.people .box .stack { display: grid; gap: 6px; }
.people .box .stack > button { justify-self: start; }
.people .box .sep { border-top: 1px solid var(--line); padding-top: 12px; display: grid; gap: 8px; }
.people .box .sep > button { justify-self: start; }
.people .box textarea { font-family: inherit; font-size: 14px; }
.people [hidden] { display: none !important; }
.alog { display: grid; font-size: 13.5px; }
.alog > div { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 8px 0; border-top: 1px solid var(--line); }
.people .mrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; align-items: center; border-top: 1px solid var(--line); padding: 6px 0; }
.people .mrow .confirm { grid-column: 1 / -1; }
.people .mrow .acts { display: flex; gap: 14px; }
.linkish.warn { color: var(--warn); }
.bigcode { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 22px; letter-spacing: .08em; background: var(--you); color: var(--accent); border-radius: 8px; padding: 6px 14px; justify-self: start; }
.nrow2 { display: grid; grid-template-columns: 88px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 9px 0; border-top: 1px solid var(--line); font-size: 14px; }
.pill { font-size: 11.5px; font-weight: 700; border-radius: 6px; padding: 2px 8px; background: var(--well); justify-self: start; }
.pill.w { background: var(--warn-tint); color: var(--warn); }
@media (max-width: 760px) {
  .ashell { grid-template-columns: 1fr; gap: 12px; }
  .aside { position: static; display: flex; flex-wrap: wrap; gap: 4px; }
  .aside button { padding: 6px 10px; }
}

.apage .linkish { font-size: inherit; }

/* the board, closer to the add-on's (board.py) */
.brdt .ago.it { font-style: italic; }
.brdt .bub .plan { display: inline-block; width: 34px; height: 5px; border-radius: 3px; background: var(--line); vertical-align: 1px; margin-right: 5px; overflow: hidden; }
.brdt .bub .plan i { display: block; height: 100%; background: var(--accent); }
.brd .foot .fl { display: flex; gap: 12px; align-items: center; position: relative; }
.brd .foot .ico { font-size: 15px; color: var(--muted); font-weight: 400; }
.pillw { font: inherit; font-size: 12px; font-weight: 700; color: var(--warn); background: transparent; border: 0; padding: 1px 0; }  /* 3.8.0: board.py's footer, one pill */
.crew-pop { left: 0; right: auto; bottom: 26px; flex-direction: column; align-items: stretch; min-width: 150px; }
.crew-pop button { font-size: 13px !important; text-align: left; padding: 5px 9px !important; }
.crew-pop .hd { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); padding: 6px 9px 2px; }
.solo { border: 1px dashed var(--line); border-radius: 10px; padding: 12px 14px; display: grid; gap: 8px; margin-top: 6px; }
.solo .codepill { background: var(--well); border-radius: 6px; padding: 3px 9px; font-weight: 700; }
.sqsw { display: flex; gap: 14px; justify-content: flex-start; flex-wrap: wrap; font-size: 13px; margin-bottom: 6px; padding: 0 8px; }  /* 3.8.0, B: starts where the corner's words do */
.sqsw .linkish { color: var(--muted); font-weight: 600; border-radius: 0; padding-bottom: 3px; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sqsw .linkish.on { color: var(--ink); text-decoration: none; box-shadow: inset 0 -2px var(--accent); }  /* board.py .dc-sw, 3.8.0 */ .sqsw .linkish.add { color: var(--accent); }
.sqline { text-align: center; font-size: 13px; margin-top: 8px; } .sqline .linkish { font-size: 13px; }
.sqwk { margin: 4px 0 0; }  /* 3.8.0: the squad's week, totals only */
/* 3.8.0, head row B (board.py .dc-corner): Crew's views, and a squad's names, in the
   table's top-left corner; what was there goes under the table. Decks: a line of its own */
.brdt th.corner { text-align: left; white-space: normal; font-weight: 400; }
.brdt th.corner .sqsw { justify-content: flex-start; gap: 4px 14px; margin: 0; padding: 0; font-size: 13px; }
.brdt th.corner .sqsw .linkish { font-size: 13px; font-weight: 600; }
.brdt th.corner .sqsw .linkish.on { color: var(--ink); } .brdt th.corner .sqsw .linkish.add { color: var(--accent); }
.pline { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; margin-bottom: 6px; padding: 0 8px; }
.pline .sqsw { justify-content: flex-start; margin: 0; padding: 0; }
.pline .dkey { margin-left: auto; font-size: 12px; color: var(--muted); }
p.sum { text-align: left; margin: 6px 0 0; padding: 0 8px; }
/* 3.8.0: a plan's squad on the Squads tab: who showed up, its bingo, then its questions */
.psq { display: grid; gap: 12px; text-align: left; max-width: 680px; margin: 0 auto; }
.psq > * { min-width: 0; }
.bgcard { border: 1.5px solid var(--accent); border-radius: 10px; padding: 9px 12px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; font-size: 12.5px; margin-bottom: 10px; }
.bgcard .bgt { display: grid; gap: 1px; flex: 1 1 180px; min-width: 0; }
.bgmini { display: grid; grid-template-columns: repeat(3, 9px); gap: 2px; flex: none; }
.bgmini i { width: 9px; height: 9px; border-radius: 2px; background: var(--line); }
.bgmini i.on { background: var(--accent); } .bgmini i.m { background: var(--warn); }
.dgh { text-align: center; font-size: 14px; }
.dr { grid-template-columns: 110px minmax(0, 1fr) 150px; }
.dr .dn { text-align: right; }
.dr .n { text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); display: grid; }
.dr .n .dd { color: var(--accent); font-weight: 700; font-size: 11.5px; }
.dleg { text-align: center; }
/* share cards (K5): the sheet a card is made in; the card wears its own colours */
.sc-dlg { border: 1px solid var(--line); border-radius: 14px; background: var(--card); color: var(--ink); padding: 0; width: min(760px, calc(100vw - 32px)); max-height: calc(100vh - 32px); }
.sc-dlg::backdrop { background: rgba(0, 0, 0, .45); }
.sc-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.sc-body { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 18px; padding: 16px; align-items: start; }
.sc-pic { display: grid; place-items: center; background: var(--well); border-radius: 10px; padding: 14px; }
.sc-canvas { width: 100%; max-width: 340px; max-height: 60vh; height: auto; border-radius: 10px; box-shadow: 0 6px 22px rgba(0, 0, 0, .18); object-fit: contain; }
.sc-side { display: grid; gap: 10px; font-size: 14px; }
.sc-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.sc-side label.sc-row { margin: 0; font-size: 14px; font-weight: 400; color: var(--ink); cursor: pointer; }
.sc-row.off, .sc-side label.sc-row.off { color: var(--muted); cursor: default; }
.sc-row input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--accent); }
.sc-side .row { gap: 8px; margin-top: 4px; }
.done-line { background: var(--you); border-radius: 8px; padding: 8px 12px; }
@media (max-width: 640px) { .sc-body { grid-template-columns: minmax(0, 1fr); } .sc-canvas { max-height: 46vh; } }
/* K6: the year, small, in December */
.ynudge { background: var(--you); border-color: transparent; }
.ymini { display: grid; grid-template-rows: repeat(7, 4px); grid-auto-flow: column; grid-auto-columns: 4px; gap: 1px; overflow: hidden; }
.ymini i { background: var(--well); border-radius: 1px; } .ymini i.out { background: transparent; }
.ymini i.l1 { background: color-mix(in srgb, var(--accent) 28%, var(--well)); } .ymini i.l2 { background: color-mix(in srgb, var(--accent) 52%, var(--well)); }
.ymini i.l3 { background: color-mix(in srgb, var(--accent) 76%, var(--well)); } .ymini i.l4 { background: var(--accent); }
/* F1: an account's crew in admin */
.people .crow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 6px 0; border-top: 1px solid var(--line); }
.people .crow .confirm { grid-column: 1 / -1; }
.people .linkish.warn { color: var(--warn); }
/* Q3: long-quiet friends, folded */
.brdt tr.qh { display: none; } .brdt.qopen tr.qh { display: table-row; }
.brdt tr.qfold td { text-align: left; }

/* S2: one footer, everywhere */
.footin { border-top: 1px solid var(--line); padding-top: 14px; display: flex; gap: 8px 18px; flex-wrap: wrap; align-items: baseline; justify-content: space-between; }
.footin .fbrand b { font-weight: 700; color: var(--ink); }
.footin .flinks { display: flex; gap: 4px 8px; flex-wrap: wrap; align-items: baseline; }
.footin .flinks a { text-decoration: none; } .footin .flinks a:hover { color: var(--accent); }
.footin .dot { color: var(--faint); }
/* S3: a title, one line, one main button on the title's line */
.phead { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px 16px; flex-wrap: wrap; margin-bottom: 8px; }
.phead > div { min-width: 0; } .phead h1 { margin-bottom: 4px; } .phead p { margin: 0; }
/* S5: the steps in a card */
.stepcard { margin: 14px 0; } .stepcard ol.steps { margin: 6px 0 0; }
/* S6: Account */
.accwho { display: flex; gap: 12px; align-items: center; } .accwho .em { font-size: 34px; line-height: 1; }
.accwho .em .rsev { zoom: 2; margin: 0 2px 0 6px; }  /* 3.8.22: my Pip, the emoji's size */
.panel.acc { margin-top: 12px; } .panel.acc .row { gap: 8px 14px; }
/* S4: a library card's ⋯ */
.lcmore > summary::after { content: none; }
.lcmore summary { list-style: none; cursor: pointer; padding: 2px 8px; border-radius: 6px; color: var(--muted); font-weight: 700; }
.lcmore summary::-webkit-details-marker { display: none; }
.lcmore .calpop { right: 0; left: auto; display: grid; gap: 4px; }
.linkish.warn { color: var(--warn); }

/* Due, in the home rail: today's dates and my own to-dos, read here, ticked in Anki */
.panel.due { display: grid; gap: 6px; }
.panel.due .duer { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; gap: 8px; align-items: start; font-size: 13px; }
.panel.due .duer > span { display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.panel.due .duel { display: block; color: var(--muted); }
.panel.due .duel .dbx { display: inline-block; vertical-align: -1px; margin: 0 5px 0 0; }
.panel.due .dbx { box-sizing: border-box; width: 12px; height: 12px; border: 1.5px solid var(--faint, #a8a8a0); border-radius: 3px; margin-top: 3px; flex: none; }
.panel.due .dbx.auto { border-style: dashed; }
.panel.due .dbx.on { background: var(--accent); border: 1.5px solid var(--accent); }

/* the year's squares: the day under the pointer (or the one tapped) says its numbers */
.heatbox { display: grid; gap: 6px; }
.heat .hg i { cursor: pointer; }
.heat .hg i.sel, .heat .hg i:hover { outline: 2px solid var(--ink); outline-offset: 0; }
.hread { font-size: 12.5px; color: var(--muted); min-height: 1.4em; }
.hread b { color: var(--ink); font-weight: 600; }
/* 3.7.1: the share sheet's row of years, All time last */
.sc-years { display: flex; gap: 5px; flex-wrap: wrap; }
.sc-years button { font-size: 12px; font-weight: 600; padding: 2px 10px; border-radius: 99px; border: 1px solid var(--line); background: transparent; color: var(--muted); }
.sc-years button.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.sc-years button.all { border-style: dashed; }
.sc-years button.all.on { border-style: solid; }
/* 3.7.1: ‹ year › on a year's squares; the All time tile; the Log's insights */
.yrstep { display: inline-flex; align-items: center; gap: 2px; margin-left: 8px; font-weight: 600; }
.yrstep b { font-weight: 600; min-width: 4.5em; text-align: center; color: var(--muted); }
.yrstep button { font-size: 16px; padding: 0 6px; }
.yrstep button[disabled] { opacity: .3; cursor: default; }
button.alltime { display: grid; gap: 2px; justify-items: start; text-align: left; width: 100%; margin-top: 14px; padding: 12px 14px;
  background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: 12px; font-weight: 400; }
button.alltime b { font-size: 22px; } button.alltime small { color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.insights { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; margin-top: 12px; }
.icard { border: 1px solid var(--line); border-radius: 12px; background: var(--card); padding: 12px 14px; display: grid; gap: 6px; align-content: start; }
.icard h5 { margin: 0; font-size: 13px; color: var(--muted); font-weight: 600; }
.icard .ibig { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }
.icard .ibig small { font-size: 12.5px; color: var(--muted); font-weight: 500; margin-left: 6px; }
.icard svg.ichart { width: 100%; height: auto; display: block; overflow: visible; }
.icard svg .g { stroke: var(--line); stroke-width: 1; }
.icard svg .l { fill: none; stroke: var(--accent); stroke-width: 2; }
.icard svg circle { fill: var(--card); stroke: var(--accent); stroke-width: 2; }
.icard svg .b { fill: var(--accent); }
.icard svg g:hover .b { fill: var(--ink); }
.icard svg .hit { fill: transparent; }
.icard svg text { fill: var(--muted); font-size: 10px; }

/* 3.7.1, D2: Account › Your data */
.ydata { display: grid; gap: 2px; margin-bottom: 10px; }
.drow { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 8px 0; border-bottom: 1px solid var(--line); }
.drow > div:first-child { flex: 1 1 260px; min-width: 0; }
.drow p { margin: 2px 0 0; }
.drow.ask { background: var(--well, transparent); border-radius: 10px; padding: 10px 12px; border: 0; }

/* 3.7.3: a plan's team */
.postnote { background: var(--well); border-radius: 10px; padding: 9px 12px; font-size: 14px; display: flex; gap: 10px;
  align-items: baseline; flex-wrap: wrap; margin: 6px 0 2px; }
.faces { display: flex; flex-wrap: wrap; gap: 10px 16px; }
.face { display: grid; justify-items: center; gap: 2px; font-size: 12.5px; min-width: 48px; }
.face .e { font-size: 24px; line-height: 28px; }
.face b { max-width: 72px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.face.away { opacity: .38; }
.tq { border-top: 1px solid var(--line); padding: 10px 0 4px; display: grid; gap: 4px; font-size: 14px; overflow-wrap: anywhere; }
.tq .t { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.tq .t .m { margin-left: auto; color: var(--muted); font-size: 12.5px; display: flex; gap: 14px; align-items: baseline; }
.tq .rep { border-left: 2px solid var(--line); padding-left: 10px; font-size: 13.5px; color: var(--muted); }
.tq .rep b { color: var(--ink); }
.tq .rep .ok { color: var(--accent); font-weight: 700; }
.tq .rep button { margin-left: 8px; }
.tq .card { color: var(--muted); font-size: 12.5px; }
.ask3 { display: flex; gap: 8px; }
.ask3 input { flex: 1; min-width: 0; }
button.linkish.quiet2 { color: var(--muted); font-weight: 500; }
.bgrow { display: flex; gap: 12px; align-items: center; }
.bggrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.bggrid > div { border: 1px solid var(--line); border-radius: 8px; padding: 5px; display: grid; gap: 1px; font-size: 11px; text-align: center; }
.bggrid > div.on { border-color: var(--accent); background: var(--well); }
.bggrid b { font-size: 11.5px; } .bggrid small { color: var(--muted); font-size: 10.5px; }
.panel > .status:empty { display: none; }

/* plan load (trial, admin only): seen / open / still suspended */
.pload { display: grid; gap: 10px; margin-top: 10px; text-align: left; }
.ltoday { border: 1.5px solid var(--accent); border-radius: 10px; padding: 10px 12px; display: grid; gap: 3px; font-size: 13.5px; background: var(--card); }
.ltoday .h { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.lnav { gap: 6px; align-items: center; flex-wrap: wrap; }
.lnav button { padding: 2px 10px; font-size: 13px; }
.lkey { margin-left: auto; display: flex; gap: 12px; font-size: 12px; color: var(--muted); flex-wrap: wrap; }
.lkey i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 5px; }
.lbar { display: flex; gap: 2px; height: 5px; border-radius: 3px; overflow: hidden; margin-top: 3px; }
.lbar.wide { height: 7px; }
.lbar i, .lkey i { display: block; }
.lkey i { display: inline-block; }
.lbar .s, .lkey .s { background: #c9cbc2; }
.lbar .o, .lkey .o { background: var(--accent); }
/* not open yet is the normal state of a date ahead: a tint of the same green, never the warning colour */
.lbar .p, .lkey .p { background: color-mix(in srgb, var(--accent) 28%, var(--card)); }
.lchart .o { fill: var(--accent); } .lchart .p { fill: color-mix(in srgb, var(--accent) 28%, var(--card)); }
.lnow { font-size: 13.5px; } .lnow b { font-size: 16px; }
.lweek { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.lday { all: unset; box-sizing: border-box; cursor: pointer; border: 1px solid var(--line); border-radius: 8px; padding: 5px 6px; min-height: 78px; background: var(--card); display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--ink); min-width: 0; }
.lday.t { border: 2px solid var(--accent); }
.lday.pk { box-shadow: inset 0 0 0 2px var(--accent); }
.lday:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.lu { background: var(--well); border-radius: 5px; padding: 3px 5px; display: grid; min-width: 0; }
.lu .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lu small { color: var(--muted); font-size: 11px; }
.lu.early { background: var(--card); box-shadow: inset 0 0 0 1px var(--accent); }
.lu.mv { background: transparent; border: 1px dashed var(--accent); }
.lfoot { display: block; margin-top: auto; }
.lfoot.ltop { margin-top: 0; width: 100%; height: 6px; flex: none; align-self: stretch; }
.lfoot.ltop .lbar { margin-top: 0; }
.lday .lbar { height: 6px; }
.ldet { border: 1px solid var(--line); border-radius: 10px; background: var(--card); padding: 10px 12px; display: grid; gap: 8px; font-size: 13.5px; }
/* a date in the details: its name with its bar on the right, level with it (to the week's scale), then the numbers */
.lrow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(90px, 200px); gap: 2px 14px; align-items: center; }
.lrow .lfoot { margin-top: 0; grid-column: 2; grid-row: 1; }
.lrow > span:first-child { grid-column: 1; grid-row: 1; }
.lrow .nums { grid-column: 1 / -1; }
.lrow .lbar { margin-top: 0; }
.lrow .nums { font-variant-numeric: tabular-nums; }
.ldet .ok { color: var(--accent); }
.lahead { display: grid; gap: 4px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .lbar .s, :root:not([data-theme="light"]) .lkey .s { background: #4c4f49; } }
:root[data-theme="dark"] .lbar .s, :root[data-theme="dark"] .lkey .s { background: #4c4f49; }
@media (max-width: 560px) { .lweek { grid-template-columns: 1fr; } .lday { min-height: 0; grid-template-columns: 56px minmax(0, 1fr); } .lday > .lu { grid-column: 2; } .lkey { margin-left: 0; } }
/* the builder's day panel: a tag's row fits the panel (its name and raw tag cut
   with …, Split and × whole), so nothing is wider than the panel and it never
   scrolls sideways (a sideways scroll hid the panel's left edge) */
.dayp { overflow-x: hidden; }
.dayp .ch2 { display: flex; flex-wrap: nowrap; width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; }
.dayp .ch2 > span:first-child { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal; }
.dayp .ch2 .raw { display: block; max-width: 100%; }
.dayp .ch2 > small, .dayp .ch2 > button { flex: none; white-space: nowrap; overflow-wrap: normal; }
/* 3.8.1: a chip with All of it / Only SLG 12 keeps its name whole on the first line, the controls under it */
.dayp .ch2:has(.inpick) { flex-wrap: wrap; row-gap: 2px; }
.dayp .ch2:has(.inpick) > span:first-child { flex-basis: 100%; }
.dayp .ch2 > .inpick { flex: 0 1 auto; min-width: 0; margin-left: auto; }
.ltops, .ltodo { display: grid; gap: 2px; grid-column: 1 / -1; font-size: 12.5px; }
.lrow > small.muted:last-child { grid-column: 1 / -1; }
.lu small { font-size: 12px; } .lu.late small { color: var(--warn); }
/* plan load: a date's bar is its size (faint) filled with what it asks that day */
/* the pale part: cards seen, or in your Anki, by that day; the solid part: what the day asks */
.abar { display: block; height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--accent) 22%, var(--card)); overflow: hidden; }
.lbartop { display: block; min-height: 6px; }
.abar i { display: block; height: 100%; background: var(--accent); border-radius: 3px; }
.abar.late i { background: var(--warn); }
.lrow .abar { margin-top: 0; height: 8px; }
.lkey { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.lkey i { display: inline-block; width: 14px; height: 6px; border-radius: 3px; margin-right: 5px; vertical-align: middle; }
.lkey .kn { background: var(--accent); } .lkey .kc { background: color-mix(in srgb, var(--accent) 22%, var(--card)); }
.ini { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--you); color: var(--accent); font-size: 11px; font-weight: 700; line-height: 1; vertical-align: middle; }
.face .e .ini { width: 28px; height: 28px; font-size: 14px; }
/* 3.8.21: a plan squad's faces are Pips (the rows' own, a size up) */
.face .e .rsev { margin: 4px 0 0; zoom: 1.35; }
.feed .ic .ini { width: 24px; height: 24px; font-size: 12px; }
.accwho .em .ini { width: 40px; height: 40px; font-size: 18px; }

/* 3.8.0: motion (motion.js): studying now breathes; the board's ↻ turns while it fetches */
.chip.live::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; margin-right: 5px; vertical-align: 1px; }
@keyframes dcbreathe { from { opacity: .4; transform: scale(.85); } to { opacity: 1; transform: scale(1); } }
@keyframes dcspin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: no-preference) {
  .chip.live::before { animation: dcbreathe 2.4s ease-in-out 7 alternate; }  /* 3.9.1 (Sam's pick D): a few pulses, then lit */
  .brd .foot .dc-spin { display: inline-block; animation: dcspin .8s linear infinite; }
}

/* 3.8.0: a follower's how-its-cards-open, at their own pace */
.pacebox { margin: 4px 0 10px; display: grid; gap: 4px; justify-items: start; }
.pacebox label { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; max-width: 100%; }
.pacebox select { font: inherit; font-size: 13px; padding: 2px 6px; max-width: 100%; }

/* the builder: a plan tag's ×, the dates it's on before it goes */
.ptag .ptdrop { display: grid; gap: 4px; margin: 4px 2px 2px; padding: 6px 8px; border-radius: 8px; background: var(--warn-tint); text-align: left; overflow-wrap: anywhere; }
.ptag .ptdrop .row { display: flex; gap: 14px; }
/* when the author's Anki last sent the deck's tags */
.tree2 .asof { display: block; margin-top: -2px; }
/* Undo, beside Save while there's something to undo; on a phone the bar keeps to the screen */
.savebar button.undo { padding: 7px 14px; }
@media (max-width: 560px) {
  .savebar { max-width: calc(100vw - 32px); box-sizing: border-box; padding-left: 12px; gap: 6px; }
  .savebar .status { min-width: 0; line-height: 1.2; }
  .savebar .tell { width: auto; flex: 0 1 140px; min-width: 64px; }
  .savebar button.undo { padding: 7px 11px; }
}
/* a plan tag's row: its size shrinks before its buttons do (the × stays in reach) */
.ptags .ptlist { grid-template-columns: minmax(0, 1fr); }
.ptag { min-width: 0; }
.ptag .pt1 small { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ptag .pt1 button { flex: none; }
/* /p/CODE signed in: Follow, then where its cards go */
.followbox { margin: 14px 0; max-width: 640px; }
.followbox p { margin: 0; }
.followbox .row { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
/* 3.8.1 (plans, round three) */
/* first steps on an empty plan: 1 Tick · 2 Fill · 3 Save · 4 Share, the one to do now bold */
.firststeps { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 10px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); font-size: 13.5px; color: var(--muted); }
.firststeps li { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.firststeps .n { display: inline-grid; place-items: center; width: 20px; height: 20px; flex: none; border-radius: 50%; border: 1px solid var(--line); font-size: 11.5px; font-weight: 700; }
.firststeps li.now { color: var(--ink); }
.firststeps li.now .n { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.firststeps li.done .n { border-color: var(--accent); color: var(--accent); }
/* a note for followers on a tag: ⓘ on its chip; its words under the chip in the day panel */
.ri { font-style: normal; font-weight: 400; }
.cal2 .ch .ri { color: var(--muted); }
.chips2 .rmk { flex-basis: 100%; display: flex; gap: 6px; align-items: baseline; min-width: 0; margin: -1px 0 3px 9px; color: var(--muted); overflow-wrap: anywhere; text-align: left; }
.chips2 .rmk .ri { color: var(--accent); }
.chips2 .rmk.edit { align-items: center; margin-left: 0; }
.chips2 .rmk.edit input { flex: 1 1 auto; min-width: 0; font-size: 13px; padding: 4px 8px; }
/* a tag's extras: 64 + 22 extra, With extras / Without */
.ch2 .xtra { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ch2 .xtra .seg button { font-size: 11.5px; padding: 1px 8px; }
.dayp .ch2:has(.xtra) { flex-wrap: wrap; row-gap: 2px; }
.dayp .ch2:has(.xtra) > span:first-child { flex-basis: 100%; }
.dayp .ch2 > .xtra { flex: 0 1 auto; min-width: 0; }
.dayp .ch2:has(.inpick) > .x, .dayp .ch2:has(.xtra) > .x { margin-left: auto; }  /* wrapped: the × at the row's end */
/* a date's picked cards, open in the day panel: every label, whole */
.dayp .ch2.single > span:first-child, .dayp .ch2.single .raw { white-space: normal; overflow-wrap: anywhere; }
/* notes on single cards, by ID and number */
.cnotes summary { cursor: pointer; }
.cnotes[open] summary { margin-bottom: 6px; }
.cnote { display: grid; grid-template-columns: minmax(0, 14em) minmax(0, 1fr) auto; gap: 4px 10px; align-items: baseline; padding: 4px 0; border-top: 1px solid var(--line); text-align: left; }
.cnote .mono { overflow-wrap: anywhere; color: var(--muted); }
.cnote .x { background: none; border: 0; color: var(--muted); padding: 0 4px; font-size: 15px; }
@media (max-width: 560px) { .cnote { grid-template-columns: minmax(0, 1fr) auto; } .cnote .mono { grid-column: 1 / -1; } }
/* Settings' co-authors: invited, waiting; Hand it to; offered, Take back */
.coas { display: grid; gap: 6px; }
.coa { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; padding: 6px 10px; border-radius: 8px; background: var(--well); font-size: 14px; color: var(--ink); }
.coa .sp { flex: 1; }
.coa.offer { background: var(--you); }
.who2.wait { background: transparent; border: 1px dashed var(--line); color: var(--muted); }
/* Home: asked to co-write a plan, or offered one */
.pinvs { display: grid; gap: 8px; }
.pinv { display: grid; gap: 6px; padding: 8px 10px; border-radius: 10px; background: var(--you); overflow-wrap: anywhere; }
.pinv .row { gap: 8px; }
.pinv button { padding: 4px 14px; font-size: 13px; }
.pinv .status:empty, .coas .status:empty { display: none; }
/* the poster: where to get the deck, its address on paper */
.printout.poster .pdeck { font-size: 15px; margin: 0; overflow-wrap: anywhere; }
.printout.poster .pdeck a { color: #2e7d32; }
.printout.poster .purl { color: #6b6b64; }