/* Play by hand's dashboard. Ash Warden's look (parchment and moss, after Maple Washer) for a light system, and the
   same moss by night for a dark one. Fraunces for headings, Inter Tight for text, JetBrains Mono for names and times,
   all three served from `fonts/` (SIL Open Font License): nothing loads from outside. */
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 300 700; font-display: swap; src: url("fonts/fraunces-v38.woff2") format("woff2"); }
@font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("fonts/inter-tight-v9.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("fonts/jetbrains-mono-v24.woff2") format("woff2"); }
:root {
  --bg: #f5f1e8;
  --panel: #fffdf8;
  --glass: rgb(255 253 248 / .74);
  --top: rgb(245 241 232 / .88);
  --glow: rgb(224 190 135 / .14);
  --raise: #f7f0e5;
  --ink: #151914;
  --ink-2: #3f4b40;
  --muted: #5c6159;
  --line: #e4dacb;
  --edge: #cbbca7;
  --field-hover: #8d8172;
  --accent: #0f5536;
  --accent-hover: #093e27;
  --accent-ink: #fffdf8;
  --accent-soft: #edf3e9;
  --button: #ecc77d;  /* honey by day, brass by night, with dark text */
  --button-hover: #e3b965;
  --button-ink: #1a1408;
  --maple: #c9301a;
  --warn: #8a6316;
  --warn-soft: #f6ecd6;
  --bad: #a52314;
  --info: #3d5a8a;
  --info-soft: #e6ebf3;
  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Inter Tight", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  --r: 12px;
  --shadow: 0 1px 2px rgb(65 48 28 / .04), 0 14px 36px rgb(65 48 28 / .06);
  color-scheme: light;
}
/* Dark: by the system's setting unless the toggle chose light, or by the toggle. The same tokens twice. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #121511;
    --panel: #1a1e19;
    --glass: rgb(26 30 25 / .78);
    --top: rgb(18 21 17 / .86);
    --glow: rgb(124 199 154 / .06);
    --raise: #222820;
    --ink: #ece6d8;
    --ink-2: #c9cfc2;
    --muted: #9aa094;
    --line: #283026;
    --edge: #3a4337;
    --field-hover: #66705f;
    --accent: #7cc79a;
    --accent-hover: #9ad8b2;
    --accent-ink: #0d1a12;
    --accent-soft: #1a2b20;
    --button: #d6a75e;
    --button-hover: #e2b875;
    --button-ink: #1a1408;
    --maple: #ec6a50;
    --warn: #ddb15e;
    --warn-soft: #2f2716;
    --bad: #f08470;
    --info: #93b3e6;
    --info-soft: #1c2534;
    --shadow: 0 1px 2px rgb(0 0 0 / .3), 0 14px 36px rgb(0 0 0 / .25);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #121511;
  --panel: #1a1e19;
  --glass: rgb(26 30 25 / .78);
  --top: rgb(18 21 17 / .86);
  --glow: rgb(124 199 154 / .06);
  --raise: #222820;
  --ink: #ece6d8;
  --ink-2: #c9cfc2;
  --muted: #9aa094;
  --line: #283026;
  --edge: #3a4337;
  --field-hover: #66705f;
  --accent: #7cc79a;
  --accent-hover: #9ad8b2;
  --accent-ink: #0d1a12;
  --accent-soft: #1a2b20;
  --button: #d6a75e;
  --button-hover: #e2b875;
  --button-ink: #1a1408;
  --maple: #ec6a50;
  --warn: #ddb15e;
  --warn-soft: #2f2716;
  --bad: #f08470;
  --info: #93b3e6;
  --info-soft: #1c2534;
  --shadow: 0 1px 2px rgb(0 0 0 / .3), 0 14px 36px rgb(0 0 0 / .25);
  color-scheme: dark;
}

* { box-sizing: border-box; }
body {
  margin: 0; color: var(--ink); font-family: var(--font-body); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased;
  background-color: var(--bg);
  background-image: radial-gradient(ellipse 70% 45% at 68% -10%, var(--glow), transparent), url("grain.svg");
  min-height: 100vh;
}
::selection { background: rgb(201 48 26 / .16); }
button { font: inherit; color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 600; text-wrap: balance; }
h2, h3, .brand h1 { font-family: var(--font-display); font-variation-settings: "opsz" 90, "SOFT" 70; font-weight: 450; letter-spacing: -.02em; }
h2 { font-size: 1.85rem; line-height: 1.1; }
h3 { font-size: 1.12rem; line-height: 1.25; letter-spacing: -.01em; }
p { margin: 0; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
code, .mono { font-family: var(--font-mono); font-size: .84em; }
.muted { color: var(--muted); }
.small { font-size: .86rem; }
form { display: inline; margin: 0; }

/* Top bar */
.top { display: flex; flex-wrap: wrap; gap: 6px 22px; align-items: center; padding: 10px 24px; border-bottom: 1px solid var(--line); background: var(--top); backdrop-filter: blur(8px); position: sticky; top: 0; z-index: 5; }
.brand { display: flex; align-items: baseline; gap: 10px; color: var(--ink); }
.brand:hover { text-decoration: none; }
.brand h1 { font-size: 1.45rem; font-weight: 400; font-variation-settings: "opsz" 144, "SOFT" 100; }
.brand .em-w { font-weight: 300; color: var(--maple); }
.links { display: flex; gap: 18px; }
.links a { color: var(--muted); font-weight: 500; padding: 4px 0; }
.links a:hover { color: var(--ink); text-decoration: none; }
.links a[aria-current="page"] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--maple); }
.who { margin-left: auto; display: flex; align-items: center; gap: 10px; }

/* The page */
.main { max-width: 880px; margin: 0 auto; padding: 30px 24px 64px; display: flex; flex-direction: column; gap: 18px; }
.head { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; }
.head .pill { margin-left: auto; }
.lede { color: var(--ink-2); max-width: 62ch; }
.card { background: var(--glass); border: 1px solid var(--edge); border-radius: var(--r); box-shadow: var(--shadow); padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.card.flush { padding: 6px 0 0; overflow: hidden; }
.solo { max-width: 440px; margin: 8vh auto 0; gap: 14px; padding: 26px 28px; }
.solo h2 { font-size: 1.6rem; }
.alone { display: grid; place-items: center; min-height: 55vh; }

/* Pills: quiet words with a tint, only where a state needs one */
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 1px 10px; border-radius: 999px; font-size: .78rem; font-weight: 500; white-space: nowrap; line-height: 1.7; }
.pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.p-warn { background: var(--warn-soft); color: var(--warn); }
.p-info { background: var(--info-soft); color: var(--info); }
.p-acc { background: var(--accent-soft); color: var(--accent); }
.p-plain { background: none; color: var(--muted); padding-inline: 0; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--edge); background: var(--panel); padding: 5px 15px; border-radius: 6px; cursor: pointer; font-weight: 500; font-size: .88rem; color: var(--ink); line-height: 1.4; transition: border-color .15s, background .15s; }
.btn:hover { border-color: var(--field-hover); text-decoration: none; }
.btn.primary { background: var(--button); color: var(--button-ink); border-color: var(--button); font-weight: 600; }
.btn.primary:hover { background: var(--button-hover); border-color: var(--button-hover); }
.btn.ghost { background: none; border-color: transparent; color: var(--muted); }
.btn.ghost:hover { color: var(--ink); background: var(--raise); }
.btn.tiny { padding: 2px 10px; font-size: .8rem; }
.btn.big { padding: 8px 20px; font-size: .95rem; }
.btn.huge { padding: 12px 30px; font-size: 1.08rem; border-radius: 8px; }

/* The theme toggle, top right: the moon in light, the sun in dark */
.theme { padding: 5px 7px; }
.theme svg { display: block; }
.theme .sun { display: none; }
:root[data-theme="dark"] .theme .moon { display: none; }
:root[data-theme="dark"] .theme .sun { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme .moon { display: none; }
  :root:not([data-theme="light"]) .theme .sun { display: block; }
}

/* The accounts */
.grid { width: 100%; border-collapse: collapse; }
.grid th { text-align: left; font-weight: 500; font-size: .75rem; color: var(--muted); padding: 6px 20px 8px; white-space: nowrap; }
.grid td { padding: 11px 20px; vertical-align: middle; box-shadow: inset 0 1px 0 var(--line); }
.grid tbody tr:hover td { background: var(--raise); }
.grid .nm { font-weight: 600; overflow-wrap: anywhere; }
.edit { display: inline-flex; vertical-align: -2px; margin-left: 6px; padding: 2px; border-radius: 4px; color: var(--muted); opacity: .6; }
.edit:hover, .edit:focus-visible { color: var(--ink); background: var(--raise); opacity: 1; }
.grid tbody tr:hover .edit { opacity: 1; }
.grid .pf { font-family: var(--font-mono); font-size: .76rem; color: var(--muted); }
.grid .act { text-align: right; width: 1%; white-space: nowrap; }
.grid .state { white-space: nowrap; }
.grid .on { display: flex; flex-wrap: wrap; gap: 4px 6px; }  /* several people on one account */
.empty { padding: 18px 20px; color: var(--muted); box-shadow: inset 0 1px 0 var(--line); }

/* Lately */
.hist { margin: 0; padding: 0; list-style: none; }
.hist li { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 2px 14px; padding: 9px 0; border-top: 1px solid var(--line); font-size: .9rem; }
.hist li:first-child { border-top: none; padding-top: 0; }
.hist .t { font-family: var(--font-mono); font-size: .8rem; color: var(--muted); padding-top: 2px; }
.hist .why { color: var(--muted); }

/* Set up this PC */
.steps { margin: 0; padding: 0; list-style: none; counter-reset: step; display: flex; flex-direction: column; }
.steps > li { counter-increment: step; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 6px 14px; padding: 14px 0; border-top: 1px solid var(--line); }
.steps > li:first-child { border-top: none; padding-top: 2px; }
.steps > li::before { content: counter(step); font-family: var(--font-display); font-size: 1.05rem; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.steps .body { display: flex; flex-direction: column; gap: 8px; padding-top: 3px; }
.downloads { display: flex; gap: 8px; flex-wrap: wrap; }
.cmd { font-family: var(--font-mono); font-size: .8rem; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; background: var(--raise); border: 1px solid var(--line); border-radius: 8px; padding: 9px 12px; margin: 0; }
/* Edit an account */
.fields { display: flex; flex-direction: column; gap: 14px; }
.field { display: flex; flex-direction: column; gap: 5px; font-weight: 500; font-size: .88rem; color: var(--ink-2); }
.field input { font: inherit; font-weight: 400; font-size: .95rem; color: var(--ink); background: var(--panel); border: 1px solid var(--edge); border-radius: 6px; padding: 7px 11px; }
.field input:hover { border-color: var(--field-hover); }
.field input[name="tag"] { font-family: var(--font-mono); font-size: .9rem; }
.narrow { max-width: 560px; }
.field input::placeholder { color: var(--muted); }
.actions { display: flex; gap: 10px; align-items: center; }
.note { border-left: 2px solid var(--maple); padding: 2px 12px; color: var(--ink-2); }

.foot { color: var(--muted); font-size: .8rem; text-align: center; padding-top: 8px; }

/* A phone: each account on two lines, its state beside its button */
@media (max-width: 600px) {
  .top { padding: 8px 16px; gap: 4px 16px; }
  .brand h1 { font-size: 1.25rem; }
  .main { padding: 20px 16px 48px; gap: 14px; }
  h2 { font-size: 1.5rem; }
  .head .pill { margin-left: 0; white-space: normal; }
  .grid thead { display: none; }
  .grid tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; box-shadow: inset 0 1px 0 var(--line); padding: 10px 16px; gap: 6px 10px; }
  .grid td { box-shadow: none; padding: 0; }
  .grid td:first-child { grid-column: 1 / -1; }
  .grid tbody tr:hover td { background: none; }
  .card.flush { padding-top: 0; }
  .hist li { grid-template-columns: minmax(0, 1fr); }
  .solo { margin-top: 4vh; padding: 22px 20px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }