/* The front door's own pages: sign-in, first-time set-up, the waiting pages
 * and the control panel. One small stylesheet, no scripts, light and dark.
 * The colours and the type are the website's (site/src/style.css): warm paper,
 * one black, a bookcloth green for anything you can press, ochre for "not yet". */
:root { color-scheme: light dark; --page: #f5f1e8; --card: #fffdf7; --ink: #1a1915; --ink2: #55524a; --line: #d6cfbd; --accent: #1d5a48; --accent-deep: #154536; --on-accent: #fffdf7; --good: #1d5a48; --warn: #8a5a10; --bad: #a3271f; --wash: #ece6d6; --focus: #c9982f;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif; --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
@media (prefers-color-scheme: dark) { :root { --page: #16150f; --card: #1f1e17; --ink: #f1ede2; --ink2: #b9b4a5; --line: #3a382e; --accent: #7fc4a9; --accent-deep: #9ad6bd; --on-accent: #0f2019; --good: #7fc4a9; --warn: #e3b55a; --bad: #ff9488; --wash: #2a281f; --focus: #e3b55a; } }
* { box-sizing: border-box; }
body { margin: 0; background: var(--page); color: var(--ink); font: 15.5px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; }
main { max-width: 440px; margin: 9vh auto 40px; padding: 0 20px; }
main.wide { max-width: 1040px; margin-top: 32px; }
h1 { font: 500 30px/1.15 var(--serif); margin: 0 0 8px; letter-spacing: -0.01em; }
h2 { font: 600 19px/1.3 var(--serif); margin: 32px 0 10px; }
p { margin: 0 0 12px; } .sub { color: var(--ink2); }
.brand { display: flex; align-items: center; gap: 11px; margin-bottom: 22px; }
.brand svg { width: 32px; height: 32px; flex: none; }
.brand b { display: block; font: 600 17px/1.15 var(--serif); }
.brand i { display: block; font: 600 11px/1.4 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink2); margin-top: 3px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 22px; margin-top: 18px; }
.card.flat { margin-top: 0; }
label { display: block; font-weight: 600; font-size: 13.5px; margin: 14px 0 5px; }
label small, .hint { display: block; font-weight: 400; color: var(--ink2); font-size: 12.5px; }
input[type=text], input[type=email], input[type=password] { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--page); color: var(--ink); font: inherit; }
/* The one box that takes several lines: “Issue several licences” on the control panel. */
textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--page); color: var(--ink); font: inherit; resize: vertical; min-height: 11em; line-height: 1.5; }
input:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
button, .btn { display: inline-block; border: 0; border-radius: 10px; padding: 11px 18px; background: var(--accent); color: var(--on-accent); font: inherit; font-weight: 650; cursor: pointer; text-decoration: none; }
button:hover, .btn:hover { background: var(--accent-deep); }
button.quiet:hover, .btn.quiet:hover { background: var(--line); }
button.full { width: 100%; margin-top: 18px; }
button.quiet, .btn.quiet { background: var(--wash); color: var(--ink); font-weight: 600; padding: 6px 11px; font-size: 13px; }
button.danger { background: var(--bad); color: #fff; }
a { color: var(--accent); text-underline-offset: 3px; }
.note { margin-top: 16px; font-size: 13.5px; color: var(--ink2); }
/* The sign-in page's way in for a first-timer: the licence key, as a button of its own under the form rather than a
 * link in the small print (most people at the page the first time have a key, not a password). */
.first { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-top: 14px; padding: 14px 18px; border: 1px dashed var(--line); border-radius: 14px; }
.first p { margin: 0; font-size: 14px; color: var(--ink2); flex: 1 1 200px; } .first b { color: var(--ink); }
.first .btn { white-space: nowrap; }
.msg { border-radius: 9px; padding: 10px 12px; margin: 14px 0 0; font-size: 14px; border: 1px solid var(--line); background: var(--wash); }
.msg.bad { border-color: var(--bad); color: var(--bad); background: transparent; }
.msg.good { border-color: var(--good); color: var(--good); background: transparent; }
.choice { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; align-items: start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; margin-top: 8px; font-weight: 400; }
.choice input { margin-top: 4px; } .choice b { font-weight: 650; } .choice span { grid-column: 2; color: var(--ink2); font-size: 13px; }
.secret { font: 600 20px/1.3 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: 0.04em; padding: 14px; border: 2px dashed var(--accent); border-radius: 10px; text-align: center; user-select: all; background: var(--page); margin: 12px 0; overflow-wrap: anywhere; }
pre.send { white-space: pre-wrap; font: 13.5px/1.5 ui-monospace, "SF Mono", Menlo, monospace; background: var(--page); border: 1px solid var(--line); border-radius: 9px; padding: 12px; user-select: all; margin: 8px 0 0; }
.spin { width: 34px; height: 34px; border-radius: 50%; border: 4px solid var(--line); border-top-color: var(--accent); animation: turn 0.9s linear infinite; margin: 4px 0 18px; }
@keyframes turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spin { animation: none; } }
header.top { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.tile { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.tile .v { font: 500 28px/1.15 var(--serif); } .tile .l { color: var(--ink2); font-size: 12.5px; }
.tablewrap { background: var(--card); border: 1px solid var(--line); border-radius: 12px; overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th, td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font: 600 11px/1.4 var(--mono); color: var(--ink2); text-transform: uppercase; letter-spacing: 0.1em; }
tr:last-child td { border-bottom: 0; }
td small { display: block; color: var(--ink2); }
.pill { display: inline-block; border-radius: 999px; padding: 1px 9px; font-size: 12px; font-weight: 650; border: 1px solid var(--line); white-space: nowrap; }
.pill.good { color: var(--good); border-color: var(--good); } .pill.warn { color: var(--warn); border-color: var(--warn); } .pill.bad { color: var(--bad); border-color: var(--bad); }
.acts { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .acts form { margin: 0; }
.acts.end { margin-top: 18px; gap: 10px; } .card.flat.gap { margin-top: 12px; } .lede { margin: 14px 0 16px; max-width: 72ch; }
footer.legal { margin-top: 28px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink2); } footer.legal a { color: var(--ink2); }
ul.walls { list-style: none; margin: 0; padding: 0; } ul.walls li { display: grid; grid-template-columns: 104px 1fr; gap: 12px; align-items: baseline; padding: 7px 0; border-bottom: 1px solid var(--line); } ul.walls li:last-child { border-bottom: 0; }
.nw { white-space: nowrap; } td .nw small { white-space: nowrap; }
ul.log { list-style: none; margin: 0; padding: 0; font-size: 13.5px; } ul.log li { padding: 6px 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 150px 1fr; gap: 12px; } ul.log time { color: var(--ink2); }
@media (max-width: 760px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } ul.log li { grid-template-columns: 92px 1fr; } }
/* The Activity page (lib/pages.js, activity): things to press that choose what is shown, two pickers, and tables that
 * become one block for each row on a phone, each fact with its heading in front of it. */
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.chip { display: inline-block; border: 1px solid var(--line); border-radius: 999px; padding: 5px 13px; font-size: 13px; font-weight: 600; color: var(--ink); background: var(--card); text-decoration: none; }
.chip:hover { background: var(--wash); } .chip.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
form.pick { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; margin: 0 0 10px; } form.pick label { margin: 0; }
select { min-width: 0; max-width: 100%; padding: 7px 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--card); color: var(--ink); font: inherit; font-size: 14px; }
select:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.tablewrap.gap, .acts.gap { margin-top: 12px; } .said { margin: 0 0 10px; font-size: 13.5px; } a.went { color: var(--warn); font-weight: 600; }
ul.log.rows span { min-width: 0; overflow-wrap: anywhere; } ul.log.rows small { display: block; color: var(--ink2); } ul.log.rows li:last-child { border-bottom: 0; }
table.stack td b a { color: var(--ink); }
@media (max-width: 760px) {
  table.stack thead { display: none; } table.stack, table.stack tbody, table.stack tr, table.stack td { display: block; }
  table.stack tr { padding: 10px 14px; border-bottom: 1px solid var(--line); } table.stack tr:last-child { border-bottom: 0; }
  table.stack td { border: 0; padding: 2px 0; overflow-wrap: anywhere; } table.stack td[data-l] { position: relative; padding-left: 146px; min-height: 24px; }
  table.stack td[data-l]::before { content: attr(data-l); position: absolute; left: 0; top: 4px; width: 138px; color: var(--ink2); font-size: 12.5px; white-space: nowrap; }
  table.stack td[data-l="Who"] { padding-left: 0; margin-bottom: 4px; } table.stack td[data-l="Who"]::before { content: none; }
  form.pick select { flex: 1 1 100%; }
}
/* The Statistics page (lib/pages.js, statistics): tiles, charts and pictures, all SVG written by the page and placed in
 * parts of a hundred so each is as wide as its card. No script and no style in the page: every colour is set here.
 *
 * The colours. One for each thing counted, the same wherever that thing is shown (its tile, its chart, its bars in a
 * table): customers here, AI Writer's time, sign-ins, books, exports, seats, visits to Puzzle Press, in that order,
 * which is the order they were checked in (each beside the next, for people who see colour differently, on this page's own card colour, in
 * light and in dark). What went wrong, and a seat count that is near or at its limit, wear the colours kept for
 * good / look out / act: never one of the seven. A picture that shows how much of ONE thing (the calendar, the week
 * hour by hour, the way from the list to here) is shades of that thing's own blue, lightest for least (in the dark
 * the other way round: darkest for least). Text is never coloured by what it counts. */
:root { --s1: #2a78d6; --s2: #eb6834; --s3: #1baf7a; --s4: #eda100; --s5: #e87ba4; --s6: #008300; --s7: #4a3aa7; --st-good: #0ca30c; --st-warn: #fab219; --st-crit: #d03b3b;
  --q1: #cde2fb; --q2: #9ec5f4; --q3: #6da7ec; --q4: #3987e5; --q5: #1c5cab; --n-lo: #0d366b; --n-hi: #ffffff; }
@media (prefers-color-scheme: dark) { :root { --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500; --s5: #d55181; --s6: #008300; --s7: #9085e9;
  --q1: #0d366b; --q2: #184f95; --q3: #256abf; --q4: #3987e5; --q5: #86b6ef; --n-lo: #dbe9fb; --n-hi: #0b1f3d; } }
.c-here { --c: var(--s1); } .c-run { --c: var(--s2); } .c-signIns { --c: var(--s3); } .c-books { --c: var(--s4); } .c-exports { --c: var(--s5); } .c-most { --c: var(--s6); } .c-visits { --c: var(--s7); } .c-bad { --c: var(--st-crit); }
/* At a glance: a tile for each thing counted. Its colour along the top, its picture, its figure, how that stands beside the period before, and the period as one line. */
.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.kpi { min-width: 0; display: flex; flex-direction: column; overflow: hidden; background: var(--card); border: 1px solid var(--line); border-top: 3px solid var(--c); border-radius: 12px; padding: 12px 16px 0; }
.kh { display: flex; align-items: center; gap: 9px; min-height: 34px; } .kh b { font: 600 11px/1.4 var(--mono); color: var(--ink2); text-transform: uppercase; letter-spacing: 0.1em; }
.ki { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 9px; color: var(--c); background: var(--wash); background: color-mix(in srgb, var(--c) 16%, transparent); }
.ic { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } svg.gauge { flex: none; }
.kpi .v { font: 500 29px/1.2 var(--serif); margin-top: 8px; } .kpi .v i, .fig .v i { font: 400 15.5px/1.2 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--ink2); }
.kd { font-size: 12.5px; line-height: 1.4; color: var(--ink2); min-height: 2.8em; margin-top: 3px; } .kd.up { color: var(--good); } .kd.down { color: var(--bad); }
svg.spark { display: block; width: calc(100% + 32px); margin: auto -16px 0; } .spark .wash, .curve .wash { fill: var(--c); fill-opacity: 0.15; }
.spark .line, .curve .line { fill: none; stroke: var(--c); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
/* A card for each chart or picture. */
.figs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.fig, .viz { margin: 0; min-width: 0; display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px 10px; } .viz.wide { grid-column: 1 / -1; }
.fig figcaption b, .viz figcaption b { display: flex; align-items: center; gap: 7px; font: 600 11px/1.4 var(--mono); color: var(--ink2); text-transform: uppercase; letter-spacing: 0.1em; }
.sw { flex: none; display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--c, var(--accent)); }
.fig .v { display: block; font: 500 28px/1.2 var(--serif); margin-top: 2px; }
.fig figcaption small, .viz figcaption small { display: block; color: var(--ink2); font-size: 12.5px; margin-top: 3px; }
/* A chart over the period: three lines with their figures beside them, a bar each or a line through, and what each stands for above it when it is pointed at. */
.plot { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; margin-top: auto; padding-top: 6px; }
.plot .y { display: flex; flex-direction: column; justify-content: space-between; height: 108px; margin-top: 14px; font: 11px/12px system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--ink2); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.plot .y span { display: block; min-height: 12px; } .plot .y.week { height: 120px; margin-top: 22px; text-align: left; } .plot .y.week.cal { height: 102px; margin-top: 20px; }
svg.chart { display: block; overflow: visible; } svg.chart text { font: 11px system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; fill: var(--ink2); }
svg.chart .grid { stroke: var(--line); stroke-width: 1; shape-rendering: crispEdges; } svg.chart .limit { stroke: var(--ink2); stroke-width: 1; stroke-dasharray: 5 4; shape-rendering: crispEdges; }
svg.chart .bar { fill: var(--c, var(--accent)); } svg.chart .bar.full { fill: var(--st-crit); } svg.chart .under { fill: var(--card); } svg.chart .hit { fill: transparent; }
svg.chart .b:hover .hit { fill: var(--ink); fill-opacity: 0.07; } svg.chart .b:hover .bar { fill-opacity: 0.72; }
svg.chart .curve { pointer-events: none; } svg.chart .dot { display: none; fill: var(--c); stroke: var(--card); stroke-width: 2; } svg.chart .b:hover .dot { display: inline; }
svg.chart .tip { display: none; fill: var(--ink); font-weight: 600; } svg.chart .b:hover .tip { display: inline; }
/* The pictures in shades: the calendar and the week hour by hour. (A day from before the log began is an empty outline.) */
.cell.q0 { fill: var(--wash); } .cell.q1 { fill: var(--q1); } .cell.q2 { fill: var(--q2); } .cell.q3 { fill: var(--q3); } .cell.q4 { fill: var(--q4); } .cell.q5 { fill: var(--q5); }
.cell.qx { fill: none; stroke: var(--line); stroke-width: 1; } svg.chart .b:hover .cell { stroke: var(--ink); stroke-width: 1.5; }
svg.chart text.n { font-weight: 600; pointer-events: none; } svg.chart text.n1, svg.chart text.n2, svg.chart text.n3 { fill: var(--n-lo); } svg.chart text.n4 { fill: #ffffff; } svg.chart text.n5 { fill: var(--n-hi); }
svg.chart.wall { margin-top: 8px; }
.scale { display: flex; align-items: center; justify-content: flex-end; gap: 4px; margin: 6px 0 0; font-size: 11.5px; color: var(--ink2); }
.scale i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; } .scale i:first-of-type { margin-left: 3px; } .scale i:last-of-type { margin-right: 3px; }
.scale .q0 { background: var(--wash); } .scale .q1 { background: var(--q1); } .scale .q2 { background: var(--q2); } .scale .q3 { background: var(--q3); } .scale .q4 { background: var(--q4); } .scale .q5 { background: var(--q5); }
/* Rings: everyone on the list in one, each in a part of it; and how full the seats are. */
.split { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 20px; margin-top: 10px; } svg.donut { flex: none; }
.donut .track, .gauge .track { fill: none; stroke: var(--wash); stroke-width: 16; } .seg { fill: none; stroke-width: 16; } .gauge .track, .gauge .seg { stroke-width: 22; }
.seg.d1 { stroke: var(--s1); } .seg.d2 { stroke: var(--s2); } .seg.d3 { stroke: var(--s3); } .seg.d4 { stroke: var(--s4); } .seg.ok { stroke: var(--st-good); } .seg.warn { stroke: var(--st-warn); } .seg.crit { stroke: var(--st-crit); }
.donut .big { font: 500 27px var(--serif); fill: var(--ink); } .donut .lab { font: 11px system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; fill: var(--ink2); }
ul.key { flex: 1 1 190px; list-style: none; margin: 0; padding: 0; font-size: 13.5px; } ul.key li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--line); } ul.key li:last-child { border-bottom: 0; }
.sw.d1 { background: var(--s1); } .sw.d2 { background: var(--s2); } .sw.d3 { background: var(--s3); } .sw.d4 { background: var(--s4); }
/* Bars lying on their side: who uses it most, what went wrong, the way from the list to here. Each with its name before it and its figure after. */
.rows { display: grid; gap: 9px; margin-top: 12px; font-size: 13.5px; } .rows .row { display: grid; grid-template-columns: minmax(0, 38%) minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.rows .rl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rows .rl a { color: var(--ink); } #viz-wrong .rl, .funnel .rl { white-space: normal; line-height: 1.3; }
.rows .rv { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; min-width: 2ch; } .rows .rv small { color: var(--ink2); margin-left: 7px; }
svg.hbar { display: block; } .hbar .trk { fill: var(--wash); } .hbar .val { fill: var(--c, var(--accent)); }
.funnel .f1 { --c: var(--q3); } .funnel .f2 { --c: var(--q4); } .funnel .f3 { --c: var(--q5); } .said2 { margin: 12px 0 0; font-size: 12.5px; color: var(--ink2); }
/* In the table of each customer: the days they were here, and their share of everyone's time. */
svg.strip { display: block; margin-top: 4px; } svg.strip rect { fill: var(--s1); } svg.strip line { stroke: var(--line); stroke-width: 1; shape-rendering: crispEdges; }
.meter { display: block; width: 96px; margin-top: 5px; } .meter svg.hbar { height: 6px; }
details.figures { margin-top: 12px; } details.figures summary { cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--accent); width: fit-content; padding: 4px 0; }
details.figures summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; } details.figures .tablewrap { margin-top: 8px; max-height: 420px; overflow-y: auto; } details.figures td, details.figures th { padding: 6px 14px; }
.card.one { margin: 4px 0 0; } .card.one .name { margin: 0 0 8px; } .card.one .name b { font: 600 19px/1.3 var(--serif); } .card.one .name small { display: block; color: var(--ink2); font-size: 13.5px; }
ul.walls.facts li > span:first-child { color: var(--ink2); font-size: 13.5px; } ul.walls.facts small { display: block; color: var(--ink2); }
@media (max-width: 760px) { .figs { grid-template-columns: minmax(0, 1fr); } .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kpi { padding: 10px 12px 0; } .kpi .v { font-size: 22px; } .kpi .v i { font-size: 13px; }
  svg.spark { width: calc(100% + 24px); margin: auto -12px 0; } table.stack td.nw, table.stack td.nw small { white-space: normal; } .rows .row { grid-template-columns: minmax(0, 42%) minmax(0, 1fr) auto; } }
/* The control panel's first page (2026-10-13): a licence issued in one step, a customer found, a licence revoked, and
 * the key and the starting password the owner may read again. */
form.issue { margin-top: 14px; } form.issue h2 { margin: 0 0 2px; }
form.issue .row { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) auto; gap: 0 14px; align-items: end; }
form.issue .row button { white-space: nowrap; }
form.issue .ticks { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 12px; } form.issue .ticks label { display: flex; align-items: center; gap: 6px; margin: 0; font-weight: 400; font-size: 14px; } form.issue .ticks input { margin: 0; }
form.issue .hint { margin: 12px 0 0; }
@media (max-width: 700px) { form.issue .row { grid-template-columns: minmax(0, 1fr); } form.issue .row button { margin-top: 16px; } }
form.find { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 10px; } form.find label { margin: 0; }
form.find input[type=text] { width: auto; flex: 0 1 300px; padding: 7px 10px; background: var(--card); }
code.shown { font: 600 12.5px/1.5 var(--mono); letter-spacing: 0.02em; white-space: nowrap; user-select: all; }
td.key { min-width: 150px; max-width: 250px; } td.pw { min-width: 150px; max-width: 210px; }
main.wide.broad { max-width: 1320px; }   /* the first page's table has a column for each thing the owner does there */
button.quiet.warn { background: transparent; color: var(--bad); box-shadow: inset 0 0 0 1px var(--bad); }
button.quiet.warn:hover { background: var(--bad); color: #fff; }
td .acts { min-width: 178px; }   /* room for two of a row's buttons side by side */
/* The customer's account page (lib/pages.js, account; ACCOUNT.md, section 4): who is signed in, in labelled rows; a
 * card for each app; and the bar across its top. A row is its name on the left and what it is on the right, and on
 * a phone the one above the other. */
main.account { max-width: 700px; margin-top: 34px; }
dl.facts { margin: 16px 0 0; padding: 2px 22px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; }
dl.facts > div { display: grid; grid-template-columns: 184px minmax(0, 1fr); gap: 4px 18px; align-items: baseline; padding: 15px 0; border-bottom: 1px solid var(--line); }
dl.facts > div:last-child { border-bottom: 0; }
dl.facts dt { font-weight: 650; font-size: 14px; color: var(--ink2); } dl.facts dd { margin: 0; font-size: 16px; overflow-wrap: anywhere; }
dl.facts dd .big { font: 600 22px/1.2 var(--serif); } dl.facts dd small { display: block; margin-top: 4px; font-size: 13px; color: var(--ink2); }
dl.facts dd .pill { font-size: 13px; padding: 3px 12px; }
ul.free { list-style: none; margin: 8px 0 0; padding: 0; font-size: 13.5px; } ul.free li { padding: 3px 0 3px 20px; position: relative; }
ul.free li::before { content: ""; position: absolute; left: 3px; top: 10px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.btn.second { background: transparent; color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent); padding: 9px 16px; font-size: 14.5px; }
.btn.second:hover { background: var(--accent); color: var(--on-accent); }
.software { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px; }
.app { display: flex; flex-direction: column; gap: 10px; padding: 20px 22px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; }
.app h3 { margin: 0; font: 600 20px/1.25 var(--serif); } .app p { margin: 0; } .app .do { margin-top: 4px; } .app .hint { font-size: 13px; }
.app .state { display: flex; align-items: center; gap: 9px; min-height: 28px; }
.app.locked { background: transparent; border-style: dashed; } .app.locked h3 { color: var(--ink2); }
.app.locked .state b { font: 700 13px/1 var(--mono); letter-spacing: 0.16em; color: var(--ink2); }
svg.lock { flex: none; fill: none; stroke: var(--ink2); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.out { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 26px; } .out form, .out .hint { margin: 0; }
@media (max-width: 560px) { main.account { margin-top: 22px; } dl.facts { padding: 2px 16px; } dl.facts > div { grid-template-columns: minmax(0, 1fr); padding: 12px 0; } .app { padding: 16px 18px; } }
/* The bar across the top (lib/pages.js, bar; ACCOUNT.md, section 6): the same in Puzzle Press, in AI Writer and here.
 * (Its class is "topbar": ".bar" is a bar of a chart on the Statistics page, and ".apps" the tick boxes on the first.)
 * Its colours are the website's eight inks and are the same by day and by night: a rainbow twice the bar's width,
 * the eight twice over, which slides left by half its width every 16 seconds, so where it ends is where it began.
 * It stands still for whoever has asked for less movement. Under 760 px the links fold into "Menu" (a <details>,
 * which opens by itself: there is no script on these pages), and everything is a little lower. Always one line. */
.topbar { position: sticky; top: 0; z-index: 30; box-sizing: content-box; height: 52px; border-bottom: 2px solid #1c1a17; background: #ff5a4f; color: #1c1a17; font: 700 14px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.topbar .rainbow { position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; }
.topbar .rainbow::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 200%; animation: rainbow 16s linear infinite;
  background: linear-gradient(90deg, #ff5a4f 0, #ff9838 6.25%, #ffd83d 12.5%, #4fcf86 18.75%, #33c6dd 25%, #5b8dff 31.25%, #a47bff 37.5%, #ff7ac3 43.75%, #ff5a4f 50%, #ff9838 56.25%, #ffd83d 62.5%, #4fcf86 68.75%, #33c6dd 75%, #5b8dff 81.25%, #a47bff 87.5%, #ff7ac3 93.75%, #ff5a4f 100%); }
@keyframes rainbow { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .topbar .rainbow::before { animation: none; } }
.topbar .in { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 100%; padding: 0 16px; }
.topbar .count { flex: none; height: 34px; padding: 0 15px; border-radius: 999px; background: #1c1a17; color: #fff; line-height: 34px; white-space: nowrap; }
.topbar nav.links { display: flex; gap: 8px; min-width: 0; }
.topbar nav a, .topbar summary { display: block; height: 34px; padding: 0 14px; border: 2px solid #1c1a17; border-radius: 999px; background: #fffdf8; color: #1c1a17; line-height: 30px; text-decoration: none; white-space: nowrap; }
.topbar nav a:hover, .topbar summary:hover, .topbar details[open] summary { background: #ffd83d; }
.topbar nav a:focus-visible, .topbar summary:focus-visible { outline: 3px solid #1c1a17; outline-offset: 2px; }
.topbar details.fold { display: none; position: relative; } .topbar summary { list-style: none; cursor: pointer; } .topbar summary::-webkit-details-marker { display: none; }
.topbar details.fold[open] nav { position: absolute; top: 100%; right: 0; display: grid; gap: 6px; min-width: 210px; margin-top: 9px; padding: 10px; background: #fffdf8; border: 2px solid #1c1a17; border-radius: 16px; }   /* (said of the open one only: shut, the browser itself hides the list, and nothing here may show it) */
@media (max-width: 900px) { .topbar nav.links { gap: 6px; } .topbar nav.links a { padding: 0 11px; } }
@media (max-width: 760px) { .topbar { height: 44px; } .topbar .in { padding: 0 12px; } .topbar nav.links { display: none; } .topbar details.fold { display: block; }
  .topbar .count, .topbar summary { height: 30px; } .topbar .count { line-height: 30px; padding: 0 13px; } .topbar summary { line-height: 26px; } }
/* The control panel's first page: each customer's renders, said under their work, and among the row's buttons the
 * small box that says how many to add. */
input[type=number] { width: 62px; padding: 5px 7px; border: 1px solid var(--line); border-radius: 9px; background: var(--page); color: var(--ink); font: inherit; font-size: 13px; }
td .rn { display: block; width: 126px; margin-top: 8px; white-space: normal; } td.nw .rn small { white-space: normal; } form.add { display: flex; align-items: center; gap: 5px; }   /* (a little wider than the column was, and no more: it folds, and the table still fits its frame) */
/* What a customer can open, ticked in their row of the control panel (only when Puzzle Press is on). */
form.apps { margin: 0; } form.apps .tick { display: flex; align-items: center; gap: 6px; margin: 0 0 3px; font-weight: 400; font-size: 14px; white-space: nowrap; }
form.apps .tick input { margin: 0; } form.apps button { margin-top: 4px; }