/* Taken from design/System.dc.html (direction C, 2026-09-11; the list parts of 2026-09-24; the whose answer and the search box of 2026-09-25, D25). Values are the sheet's; change the sheet first. */
:root { --bg:#fbfaf7; --card:#ffffff; --line:#e9e6df; --ink:#23303d; --soft:#6f7c88; --chip:#f0eee8;
        --accent:#1f6f5f; --accent-bg:#e4f3ee; --live:#9a5b00; --live-bg:#fff1dc; --hostile:#b3261e; --hostile-bg:#fdecea; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; font-family:"Manrope","Helvetica Neue",sans-serif; font-size:16px; line-height:1.6; color:var(--ink); background:var(--bg); }
a { color:var(--accent); text-decoration:none; } a:hover { text-decoration:underline; }
h1 { font-size:34px; font-weight:700; letter-spacing:-.02em; line-height:1.15; margin:0; }
h2 { font-size:18px; font-weight:700; margin:0 0 4px; }
main { padding:24px clamp(24px,5vw,72px) 56px; display:flex; flex-direction:column; gap:24px; }
.soft { color:var(--soft); } .small { font-size:14px; } .cap { font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--soft); }
.mono { font-family:"DM Mono",ui-monospace,monospace; font-size:15px; font-weight:500; } .break { word-break:break-all; }
.ev { font-family:"DM Mono",ui-monospace,monospace; font-size:13px; font-weight:400; color:var(--soft); }
.nav { display:flex; align-items:center; gap:32px; padding:20px clamp(24px,5vw,72px); }
.nav .brand { display:flex; align-items:center; } .nav .brand img { height:44px; width:auto; display:block; } .nav .links { display:flex; gap:6px; } .nav .links a { color:var(--soft); padding:8px 14px; font-weight:600; border-radius:10px; }
.nav .links a.active { color:var(--ink); background:var(--chip); } .nav .links a:hover { text-decoration:none; color:var(--ink); }
.nav .search { margin-left:auto; } .nav .search .input { width:min(340px,40vw); }
.card { background:var(--card); border:1px solid var(--line); border-radius:16px; box-shadow:0 2px 10px rgba(35,48,61,.05); }
.card.pad { padding:22px 26px; }
.btn { display:inline-flex; align-items:center; justify-content:center; font:inherit; font-size:15px; font-weight:600; padding:10px 18px; border:1px solid var(--line); border-radius:12px; background:#fff; color:var(--ink); cursor:pointer; min-height:44px; white-space:nowrap; text-decoration:none; }
.btn:hover { text-decoration:none; border-color:var(--soft); }
.btn.primary { background:var(--accent); border-color:var(--accent); color:#fff; } .btn.primary[disabled] { opacity:.45; cursor:not-allowed; }
.btn.quiet { border-color:transparent; background:transparent; color:var(--soft); } .btn.quiet:hover { color:var(--hostile); background:var(--hostile-bg); }
.btn.disabled { opacity:.45; } .btn.small { min-height:36px; padding:6px 12px; font-size:14px; }
.input { font:inherit; font-size:15px; padding:10px 16px; border:1px solid var(--line); border-radius:12px; background:#fff; color:var(--ink); min-height:44px; }
.pill { display:inline-block; font-size:13px; font-weight:600; border-radius:999px; padding:4px 12px; white-space:nowrap; text-decoration:none; }
a.pill:hover { text-decoration:none; }
.p-live { background:var(--live-bg); color:var(--live); } .p-ok { background:var(--accent-bg); color:var(--accent); } .p-grey { background:var(--chip); color:var(--soft); }
.p-hostile { background:var(--hostile-bg); color:var(--hostile); } .p-ink { background:var(--ink); color:#fff; }
.page-head { display:flex; flex-direction:column; gap:6px; } .page-head .head { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.page-head p { margin:0; } .sentence { font-size:17px; }
.filters { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.stack { display:flex; flex-direction:column; gap:14px; }
.two { display:grid; grid-template-columns: repeat(auto-fit, minmax(560px, 1fr)); gap:20px; align-items:start; }   /* a column narrower than 560 px cannot hold the chain drawing: one column then (2026-10-23) */
.sighting { padding:22px 26px; display:grid; grid-template-columns: 1fr 340px; gap:24px; align-items:center; }
.sighting .body { display:flex; flex-direction:column; gap:8px; } .sighting .head { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.sighting .subject { font-size:19px; color:var(--ink); }
.actions { display:flex; flex-direction:column; gap:8px; align-items:stretch; } .actions .row { display:flex; gap:8px; } .actions .row > * { flex:1; }
.actions form { display:contents; } .actions .row form { display:flex; flex:1; } .actions .row form .btn { flex:1; }
.row { display:flex; gap:8px; align-items:center; }
.topline { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.decide { display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }   /* one row (2026-10-23): the whose question, then the acts at the right */
.decide .acts { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-left:auto; }
.decide .actions form.row { display:flex; }
.live { color:var(--live); }
table { border-collapse:collapse; width:100%; }
th { text-align:left; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--soft); padding:8px 12px; border-bottom:1px solid var(--line); font-weight:600; }
td { padding:10px 12px; border-bottom:1px solid var(--chip); vertical-align:top; font-size:15px; } tr:last-child td { border-bottom:none; }
.hop { display:grid; grid-template-columns: 36px 1fr 220px; gap:12px; align-items:start; padding:10px 0; border-bottom:1px solid var(--chip); } .hop:last-child { border-bottom:none; }
.num { width:28px; height:28px; border-radius:999px; background:var(--chip); color:var(--soft); font-size:13px; font-weight:700; display:flex; align-items:center; justify-content:center; }
.capture { display:grid; grid-template-columns: 200px 1fr; gap:14px; align-items:start; padding:12px 0; border-top:1px solid var(--chip); } .capture:first-of-type { border-top:none; } .capture.step { margin-left:24px; border-top:1px dashed var(--chip); }
.shot { width:200px; height:140px; object-fit:cover; object-position:top; border:1px solid var(--line); border-radius:12px; background:var(--chip); display:block; }
.empty-shot { display:flex; align-items:center; justify-content:center; color:var(--soft); font-size:13px; }
.empty { border:1px dashed var(--line); border-radius:16px; padding:20px; text-align:center; color:var(--soft); }
@media (max-width: 900px) { .sighting { grid-template-columns: 1fr; } .hop { grid-template-columns: 36px 1fr; } .hop .ev { grid-column: 2; } }

/* ---- the parts for a list a person filters (the sheet, 2026-09-24) ---- */
.tabs { display:flex; gap:6px; border-bottom:1px solid var(--line); }
.tabs a { display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 18px; font-weight:600; color:var(--soft); border-bottom:2px solid transparent; margin-bottom:-1px; }
.tabs a:hover { text-decoration:none; color:var(--ink); } .tabs a.on { color:var(--ink); border-bottom-color:var(--accent); }
.tabs .n { font-family:"DM Mono",ui-monospace,monospace; font-size:13px; font-weight:400; }
.listing { display:grid; grid-template-columns:248px 1fr; gap:40px; align-items:start; }
.facets { display:flex; flex-direction:column; gap:30px; }
.facet { display:flex; flex-direction:column; gap:2px; } .facet .cap { color:var(--ink); padding:0 12px 8px; margin-bottom:6px; border-bottom:1px solid var(--line); }
.fv { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:44px; padding:0 12px; border-radius:10px; font-size:15px; font-weight:500; color:var(--ink); }
.fv:hover { text-decoration:none; background:var(--chip); } .fv .n { font-family:"DM Mono",ui-monospace,monospace; font-size:13px; color:var(--soft); }
.fv.on { background:var(--accent-bg); color:var(--accent); font-weight:600; } .fv.on .n { color:var(--accent); }
.check { width:20px; height:20px; border:1.5px solid #cfcabf; border-radius:6px; background:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; color:#fff; }
.check.on { background:var(--accent); border-color:var(--accent); }
td.pick, th.pick { width:44px; padding-left:16px; padding-right:0; } td.pick input, th.pick input { width:20px; height:20px; accent-color:var(--accent); cursor:pointer; vertical-align:middle; }
.why { font-size:13px; color:var(--soft); margin-top:2px; }
.kind { display:inline-block; font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--soft); margin-right:8px; }
table.list td { padding:11px 12px; } tr.row-line { cursor:pointer; } tr.row-line:hover td { background:var(--bg); } tr.row-line:has(input:checked) td { background:#f6fbf9; }
td.caret, th.caret { width:44px; padding:6px 4px; text-align:center; } td.caret .btn { min-height:36px; padding:4px 8px; font-size:14px; } a.name { color:var(--ink); } a.name:hover { color:var(--accent); }
tr.row-line.open td { background:var(--bg); border-bottom:none; }
tr.detail > td { padding:0 12px 22px 12px; background:var(--bg); }
.open-card { padding:22px 26px; display:grid; grid-template-columns:1fr 380px; gap:28px; box-shadow:none; }
.selbar { padding:12px 20px; display:flex; align-items:center; gap:14px; border-color:var(--accent); box-shadow:none; margin-bottom:14px; } .selbar[hidden] { display:none; }
td.nw, th.nw { white-space:nowrap; } .count { font-family:"DM Mono",ui-monospace,monospace; font-size:14px; }
.dot { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:8px; } .dot.ours { background:var(--accent); } .dot.theirs { background:var(--hostile); }
.row.wrap { flex-wrap:wrap; } .input.small { min-height:40px; padding:6px 12px; }
/* ---- the whose answer (D25): four buttons, none primary; then the pill and a change link ---- */
.whose { display:flex; flex-direction:column; gap:8px; } .answers > .row { display:flex; gap:6px; flex-wrap:wrap; align-items:flex-start; }   /* the two frequent answers stay together; on a narrow card only Other… drops to a second line */ .answers .btn { padding:8px 12px; white-space:nowrap; }
.answers .other { position:relative; } .answers .other summary { list-style:none; cursor:pointer; } .answers .other summary::-webkit-details-marker { display:none; }
.answers .other[open] > .row { position:absolute; top:46px; left:0; background:var(--card); border:1px solid var(--line); border-radius:14px; box-shadow:0 8px 24px rgba(35,48,61,.10); padding:8px; z-index:10; flex-wrap:wrap; }
form.no { display:flex; justify-content:flex-end; margin:0; }
.whose .got { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
/* ---- the search box in the bar: the one way in ---- */
.nav .right { margin-left:auto; display:flex; align-items:center; gap:18px; min-width:0; flex:1 1 auto; justify-content:flex-end; } .nav .right a.ours { font-weight:700; color:var(--soft); padding:8px 14px; border-radius:10px; }
.nav .right a.ours.active { color:var(--ink); background:var(--chip); } .nav .right a.ours:hover { text-decoration:none; color:var(--ink); }
.nav .search { position:relative; margin-left:0; flex:0 1 380px; min-width:150px; } .nav .search .input { width:100%; }
.drop { position:absolute; top:52px; right:0; width:min(560px,90vw); z-index:5; background:var(--card); border:1px solid var(--line); border-radius:16px; box-shadow:0 8px 28px rgba(35,48,61,.12); padding:8px; display:none; }
.drop.on { display:block; }
.cand { display:flex; align-items:center; gap:12px; min-height:48px; padding:6px 12px; border-radius:10px; font-size:15px; color:var(--ink); }
.cand:hover { background:var(--bg); text-decoration:none; } .cand .name { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.drop .add { padding:10px 12px 8px; display:flex; flex-direction:column; gap:10px; border-top:1px solid var(--chip); margin-top:6px; }
.drop .ways { display:flex; gap:8px; align-items:center; } .drop .ways .close { margin-left:auto; }
.drop .form { display:none; gap:8px; align-items:center; } .drop .form.on { display:flex; } .drop .form .input { min-height:40px; padding:6px 12px; font-size:14px; } .drop .form input[name=note], .drop .form input[name=why] { flex:1; }
.brand-card { display:grid; grid-template-columns:1fr 1fr; gap:32px; }
@media (max-width: 1000px) { .listing { grid-template-columns:1fr; } .open-card { grid-template-columns:1fr; } .brand-card { grid-template-columns:1fr; } }
/* ---- D26: the chips above the table, the row as values, the parts of Today (the sheet, 2026-09-25) ---- */
.listing.one { grid-template-columns:1fr; }
.chips { display:flex; gap:8px; flex-wrap:wrap; align-items:center; } .chip { position:relative; }
.chip > .btn { min-height:40px; padding:6px 14px; font-size:14px; gap:8px; } .chip > .btn .n { font-family:"DM Mono",ui-monospace,monospace; font-size:12px; font-weight:400; color:var(--soft); }
.chip.on > .btn { background:var(--accent-bg); border-color:var(--accent); color:var(--accent); }
.chip .menu { position:absolute; top:46px; left:0; min-width:240px; z-index:5; background:var(--card); border:1px solid var(--line); border-radius:12px; box-shadow:0 8px 28px rgba(35,48,61,.12); padding:6px; display:none; }
.chip .menu.open { display:block; } .chip .menu .fv { min-height:40px; }
.title-line { font-size:13px; color:var(--soft); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:420px; }
.brands { font-size:14px; white-space:nowrap; } .brands b { font-weight:600; } .brands .theirs { color:var(--hostile); } .brands .ours { color:var(--accent); }
.group { display:flex; flex-direction:column; gap:12px; } .group-head { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.group-head h2 { margin:0; } .group-head .n { font-family:"DM Mono",ui-monospace,monospace; font-size:14px; color:var(--soft); }
.item { padding:20px 24px; display:grid; grid-template-columns:1fr 380px; gap:24px; align-items:start; } .item .head { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.new { display:inline-block; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--live); background:var(--live-bg); border-radius:6px; padding:2px 7px; }
.moved { display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; } .card.pad-s { padding:16px 20px; display:flex; flex-direction:column; gap:6px; }
.card.dashed { border-style:dashed; } .ink { color:var(--ink); }
.fact { display:flex; align-items:center; gap:14px; padding:14px 20px; } .fact .big { font-size:22px; font-weight:700; letter-spacing:-.01em; font-family:"DM Mono",ui-monospace,monospace; }
@media (max-width: 1000px) { .item { grid-template-columns:1fr; } .moved { grid-template-columns:1fr; } }

/* Sign in (Login artboard, 2026-10-09, D30): the sheet's input and primary button in one centred card; no bar, no search. */
body.login-page { display:flex; min-height:100vh; align-items:center; justify-content:center; }
main.login { padding:24px; }
.login-card { width:400px; max-width:calc(100vw - 48px); display:flex; flex-direction:column; gap:16px; padding:32px; }
.login-logo { height:44px; width:auto; align-self:flex-start; }
.login-card h1 { font-size:26px; }
.login-card .field { display:flex; flex-direction:column; gap:6px; }
.login-card .input { width:100%; }
.login-card .btn.primary { align-self:stretch; margin-top:4px; }
.login-error { color:var(--hostile); background:var(--hostile-bg); border-radius:12px; padding:10px 14px; font-size:15px; }
.password-card { align-self:flex-start; }
/* the account mark (sheet, 2026-10-09, D30) */
.account { position:relative; display:flex; align-items:center; }
.avatar { width:36px; height:36px; border-radius:50%; background:var(--accent-bg); color:var(--accent); font:inherit; font-size:13px; font-weight:700; letter-spacing:.02em; display:inline-flex; align-items:center; justify-content:center; border:1px solid #cfe6dd; cursor:pointer; padding:0; }
.account .menu { position:absolute; right:0; top:44px; min-width:220px; background:var(--card); border:1px solid var(--line); border-radius:14px; box-shadow:0 8px 24px rgba(35,48,61,.10); padding:8px; display:flex; flex-direction:column; gap:2px; z-index:20; }
.account .menu[hidden] { display:none; }
.account .menu .name { padding:8px 12px 4px; font-weight:600; } .account .menu .login { padding:0 12px 8px; font-size:13px; color:var(--soft); border-bottom:1px solid var(--chip); margin-bottom:4px; }
.account .menu form { margin:0; }
.account .menu a, .account .menu button { display:block; width:100%; text-align:left; font:inherit; font-size:15px; padding:8px 12px; border:0; background:none; color:var(--ink); border-radius:10px; cursor:pointer; }
.account .menu a:hover, .account .menu button:hover { background:var(--chip); text-decoration:none; }
/* the life strip and the history list (sheet, 2026-10-10, D31): the site's state over time, and one row per observation or act */
:root { --strip-live:#e07a5f; --strip-down:#3f9a86; --strip-unseen:#e9e6df; --strip-live-soft:#f3c9bf; --strip-down-soft:#bfe0d8; }
.history-head { display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; margin-bottom:6px; }
.strip { position:relative; height:14px; border-radius:7px; background:var(--chip); margin:30px 0 0; }
.strip .seg { position:absolute; top:0; height:14px; }
.strip .seg.live { background:var(--strip-live); } .strip .seg.down { background:var(--strip-down); } .strip .seg.unseen { background:var(--strip-unseen); }
.strip .seg.live.assumed { background:var(--strip-live-soft); } .strip .seg.down.assumed { background:var(--strip-down-soft); }
.strip .seg:first-child { border-radius:7px 0 0 7px; }
.strip .filed { position:absolute; top:-6px; width:1.5px; height:26px; background:var(--ink); transform:translateX(-1px); }
.strip .filed .lbl { position:absolute; top:-18px; left:50%; transform:translateX(-50%); font-size:11px; font-weight:600; color:var(--ink); white-space:nowrap; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; }
.axis { position:relative; height:26px; margin-bottom:6px; }
.axis .tick { position:absolute; top:0; width:1px; height:6px; background:#d9d5cc; }
.axis .tick span { position:absolute; top:8px; left:50%; transform:translateX(-50%); font-size:11px; color:#8a95a0; font-family:"DM Mono",ui-monospace,monospace; white-space:nowrap; }
.axis .tick:first-child span { transform:none; left:0; } .axis .tick:last-child span { transform:none; left:auto; right:0; }
.legend { display:flex; gap:18px; font-size:12px; color:var(--soft); align-items:center; flex-wrap:wrap; }
.legend i { display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:6px; vertical-align:-1px; }
.legend i.live { background:var(--strip-live); } .legend i.down { background:var(--strip-down); } .legend i.unseen { background:var(--strip-unseen); }
.legend i.live.assumed { background:var(--strip-live-soft); } .legend i.down.assumed { background:var(--strip-down-soft); }
.legend .caption { margin-left:auto; }
.history { display:flex; flex-direction:column; margin-top:14px; }
.history .row { display:grid; grid-template-columns: 96px 44px 1fr; gap:14px; padding:8px 0; border-bottom:1px solid var(--chip); align-items:center; }
.history .row:last-child { border-bottom:none; }
.history .day { font-family:"DM Mono",ui-monospace,monospace; font-size:13px; color:var(--soft); white-space:nowrap; }
.history .dot { width:10px; height:10px; border-radius:50%; background:#c9c4b8; justify-self:center; }
.history .dot.live { background:var(--strip-live); } .history .dot.down { background:var(--strip-down); }
.history .av { width:24px; height:24px; border-radius:50%; background:var(--accent-bg); color:var(--accent); font-size:10px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; border:1px solid #cfe6dd; justify-self:center; }
.history .sq { width:11px; height:11px; border-radius:3px; background:#c9c4b8; justify-self:center; }
.history .what { font-size:15px; } .history .what b { font-weight:600; } .history .what u { text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; }
.history .who { color:var(--soft); font-size:14px; }
.history .gap { color:var(--soft); font-size:13px; padding:6px 0 6px 154px; border-bottom:1px solid var(--chip); }

/* the Campaign screens (2026-10-15 artboards; D39–D43): the sheet's parts added the same day */
.campaigns .next { font-size:16px; }
.dots { display:inline-flex; flex-wrap:wrap; gap:4px; max-width:240px; } .dots i { display:inline-block; width:12px; height:12px; border-radius:50%; }
.p-overdue { background:var(--hostile-bg); color:var(--hostile); } .p-sent { background:var(--live-bg); color:var(--live); }
.kind { font-size:13px; color:var(--soft); font-weight:600; margin-right:8px; }
.j { font-size:14px; } .j.alive { color:var(--live); } .j.gone { color:var(--accent); } .j.unknown { color:var(--soft); }
.chain { padding:16px 22px 8px; } .chain svg { display:block; width:100%; height:auto; }
.next-act { padding:18px 24px; display:flex; align-items:center; gap:18px; border-left:4px solid var(--accent); } .next-act .btn { margin-left:auto; }
.ccard { padding:18px 22px; display:flex; flex-direction:column; gap:10px; } .ccard .head { display:flex; align-items:center; gap:12px; flex-wrap:wrap; } .ccard .title { font-weight:700; font-size:17px; color:var(--ink); }
.ccard.proposed { border:1px dashed #cfe6dd; background:#f7fbf9; } .why { color:var(--soft); font-size:14px; }
.record .row { grid-template-columns: 96px 44px 1fr; } .record .dot { width:10px; height:10px; border-radius:50%; background:#c9c4b8; justify-self:center; }
.field { display:flex; flex-direction:column; gap:6px; padding:12px 0; border-bottom:1px solid var(--chip); } .field:last-child { border-bottom:none; }
.field .lbl { display:flex; align-items:center; gap:12px; } .field .lbl .ink { color:var(--ink); } .field .val { font-size:15px; } .field pre.body { white-space:pre-wrap; font:inherit; margin:0; }
.field .copy { min-height:32px; padding:4px 10px; font-size:13px; }
.steps { display:flex; flex-direction:column; gap:10px; } .steps .s { display:grid; grid-template-columns:28px 1fr; gap:10px; align-items:start; }
.steps .num { width:24px; height:24px; border-radius:50%; background:var(--chip); font-size:12px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; }
.linkbtn { font:inherit; font-size:14px; color:var(--accent); background:none; border:none; padding:0; cursor:pointer; } .linkbtn:hover { text-decoration:underline; }
.live-warn { color:var(--live); }
.av { width:24px; height:24px; border-radius:50%; background:var(--accent-bg); color:var(--accent); font-size:10px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; border:1px solid #cfe6dd; vertical-align:middle; }
.pad-s { padding:14px 20px; }
#osearch { position:relative; } #osearch .drop { left:0; right:0; top:50px; width:auto; }
.chain { position:relative; }
.tip { position:absolute; z-index:6; background:var(--card); border:1px solid var(--line); border-radius:12px; box-shadow:0 8px 28px rgba(35,48,61,.12); padding:8px 12px; display:flex; align-items:center; gap:10px; pointer-events:none; white-space:nowrap; }

/* 2026-10-17, with the sheet: a sortable column header (click to sort, again to reverse; the arrow marks the live one), the fold
   (a line that opens into its detail, closed by default when the detail is long), and the one-line row of the lists */
th a.sort { color:var(--soft); text-decoration:none; } th a.sort:hover, th a.sort.on { color:var(--ink); text-decoration:none; } th a.sort .arrow { font-size:11px; }
details.fold { display:inline; } details.fold > summary { cursor:pointer; color:var(--accent); list-style:none; display:inline; font-weight:600; } details.fold > summary::-webkit-details-marker { display:none; }
details.fold[open] > summary { display:block; margin-bottom:6px; } details.fold > .history, details.fold > .card { margin-top:8px; }
td.one { white-space:nowrap; max-width:300px; overflow:hidden; text-overflow:ellipsis; } td.one .kind:empty { display:none; }
td.leads { white-space:nowrap; max-width:170px; overflow:hidden; text-overflow:ellipsis; } td.filed .pill { white-space:normal; line-height:1.35; }
table.list th { white-space:nowrap; } .listing table.list { table-layout:auto; } .listing table.list[data-cols] { table-layout:fixed; }   /* the columns resizable (2026-10-23): the colgroup's widths hold */
.table-card { overflow-x:auto; }
.listing table.list[data-cols] th a.sort { display:inline-block; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; vertical-align:bottom; }   /* a column narrower than its header word cuts the word with an ellipsis; it never runs into the next header */
.listing table.list[data-cols] td { overflow:hidden; }                                             /* no cell of a resizable table runs into the next (Huijae, 2026-10-23: the whose pill did) */
.listing table.list[data-cols] td.nw { text-overflow:ellipsis; }
.listing table.list[data-cols] td .pill { max-width:100%; overflow:hidden; text-overflow:ellipsis; vertical-align:bottom; }   /* a pill wider than its column is cut with an ellipsis, the whole on hover */                                                                  /* the columns together wider than the window: the card scrolls sideways, the last columns are not cut */
.listing table.list td.pills { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .listing table.list td.pills .pill { margin-right:2px; }   /* a row stays one line (Huijae, 2026-10-23): the pills past the column's edge are cut with an ellipsis, all of them on hover */
.listing table.list td { padding:9px 12px; }
.listing > .stack > .card, .listing.one > .card { overflow-x:auto; }   /* a window narrower than the list: the table scrolls inside its card, the page does not (2026-10-17) */

/* Today as piles in the order of work (D63, 2026-10-16; D65 the same evening): the head carries the thing's name, the count and a
   state in a few words; the run cards a label, the time and the figures; the tiles a label, a count and names */
.lane { display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; margin-top:10px; }
.runcard { padding:14px 20px; display:flex; flex-direction:column; gap:4px; box-shadow:none; }
.runcard .when { font-family:"DM Mono",ui-monospace,monospace; font-size:12px; color:var(--soft); margin-left:8px; letter-spacing:0; text-transform:none; font-weight:400; }
.runcard .figs { display:flex; align-items:baseline; gap:10px; white-space:nowrap; } .runcard .figs .big { font-size:22px; font-weight:700; letter-spacing:-.01em; font-family:"DM Mono",ui-monospace,monospace; }
.moved.five { grid-template-columns:repeat(5, 1fr); }
.tile { padding:14px 18px; display:flex; flex-direction:column; gap:6px; box-shadow:none; min-width:0; }
.tile > div { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; } .tile > div.cap { white-space:normal; }
.tile .cap .n { font-family:"DM Mono",ui-monospace,monospace; font-size:14px; color:var(--ink); margin-left:6px; letter-spacing:0; }
.tile .tag { margin-right:6px; }
.pile { overflow:visible; }
.pile > .head { display:flex; align-items:baseline; gap:12px; padding:14px 22px; min-height:56px; color:var(--ink); text-decoration:none; border-radius:16px; }
.pile > .head:hover { text-decoration:none; background:var(--bg); }
.pile > .head h2 { margin:0; font-size:18px; white-space:nowrap; } .pile > .head .n { font-family:"DM Mono",ui-monospace,monospace; font-size:15px; color:var(--soft); white-space:nowrap; }
.pile > .head .sub { font-size:14px; color:var(--soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.pile > .head .caret { font-size:20px; color:var(--soft); display:inline-block; margin-left:auto; }
.pile.on > .head { border-left:4px solid var(--accent); padding-left:18px; border-bottom:1px solid var(--chip); border-radius:16px 16px 0 0; }
.pile.on > .head .caret { transform:rotate(90deg); }
.pile .body { display:none; position:relative; overflow-x:auto; border-radius:0 0 16px 16px; } .pile.on .body { display:block; }
.pile .body table { width:100%; table-layout:fixed; } .pile .body td { font-size:14px; padding:9px 10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pile td.one { max-width:none; } .pile td.acts, .pile th.acts { text-align:right; overflow:visible; }
.pile .pill { font-size:12px; padding:3px 9px; } .pile .btn.small { padding:6px 10px; }
.pile .answers .other[open] > .row { position:static; margin-top:6px; box-shadow:none; border:none; padding:0; }   /* in a one-line row the two other answers come under the three, not over the next row */
.pile .paging { display:flex; align-items:center; gap:14px; padding:12px 12px 4px; font-size:14px; }
.slots { display:flex; gap:6px; justify-content:flex-end; } .slots > span { display:inline-flex; justify-content:center; width:132px; } .slots form { margin:0; }
@media (max-width: 1000px) { .lane { grid-template-columns:1fr; } .moved.five { grid-template-columns:1fr; } }

/* The parts of 2026-10-16 (D65; the sheet the same day): the tooltip on a word, the tag, resizable columns, the + in the search box */
.tooltip { position:absolute; z-index:30; background:var(--card); color:var(--ink); border:1px solid var(--line); border-radius:10px; box-shadow:0 8px 28px rgba(35,48,61,.12); padding:6px 10px; font-size:13px; font-weight:500; line-height:1.45; max-width:420px; pointer-events:none; display:none; white-space:normal; }
.tag { display:inline-block; font-size:12px; font-weight:600; border-radius:999px; padding:2px 9px; background:var(--chip); color:var(--soft); white-space:nowrap; margin-right:8px; vertical-align:middle; }
th { position:relative; } th.rs { border-right:1px solid var(--line); }                                  /* the divider that says "this border moves" */
.rz { position:absolute; right:-5px; top:0; bottom:0; width:10px; cursor:col-resize; z-index:2; }
.rz::after { content:""; position:absolute; left:4px; top:6px; bottom:6px; width:2px; border-radius:1px; background:transparent; }
.rz:hover::after, .rz.on::after { background:var(--accent); }
.rz.fixed { cursor:not-allowed; } .rz.fixed:hover::after { background:#cfcabf; }                         /* the border at the acts column: it does not move, and says so */
.guide { position:absolute; top:0; bottom:0; width:0; border-left:1px dashed var(--accent); pointer-events:none; z-index:3; }
.nav .search .input { padding-right:44px; }
.nav .search .plus { position:absolute; right:6px; top:50%; transform:translateY(-50%); width:32px; height:32px; border-radius:10px; border:1px solid var(--line); background:var(--chip); color:var(--ink); font:inherit; font-size:20px; line-height:1; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; padding:0; }
.nav .search .plus:hover { background:var(--accent-bg); color:var(--accent); border-color:var(--accent); }
/* 2026-10-22: the order of recipients said in a word; the road on the Sighting page; a count inside a pill */
.first-word { font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:#1f6f5f; margin-left:6px; }
.chain.road { position:relative; margin:4px 0 14px; }
.ad { margin:4px 0 12px; padding:12px 16px; border:1px solid var(--line); border-radius:12px; background:var(--chip); }   /* the sponsored result a sighting came in by (D76, 2026-11-04) */
.ad .ad-title { font-weight:600; font-size:16px; margin-top:6px; }
.ad .ad-desc { font-size:14px; margin:2px 0 8px; }
.ad .served { display:inline-block; max-width:380px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; vertical-align:bottom; }
.pill .n { font-family:"DM Mono", ui-monospace, monospace; font-size:12px; font-weight:500; opacity:.85; }
.unchanged { margin-top:4px; }
details.more > summary { cursor:pointer; color:#1f6f5f; font-weight:600; padding:12px 0 8px; list-style:none; }
details.more > summary::-webkit-details-marker { display:none; }
details.more > summary::after { content:" ›"; }
/* the Sighting page of 2026-10-23 (D72): the grounds band, the ask pill, the file card's one-line rows, Captures in two columns */
.head .brands { font-size:15px; margin-left:2px; } .head .brands b { font-weight:600; }
.shared { margin:4px 0 10px; } .shared .kind { margin-right:6px; }
.file-card { padding:0 0 4px; display:block; overflow:hidden; } .file-card table { margin:0; }
.file-card td { vertical-align:middle; padding-top:12px; padding-bottom:12px; } .file-card td.n { width:130px; padding-left:18px; } .file-card td.state { width:200px; } .file-card td.act { width:120px; padding-right:18px; text-align:right; }
.grounds-band { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:12px 18px; background:var(--chip); border-bottom:1px solid var(--line); }
.grounds-band .cap { color:var(--ink); margin-right:8px; } .grounds-band .who { margin-left:auto; }
.pill.p-ask { background:#fff; border:1px solid #cfcabf; color:var(--soft); }
details.ask { display:inline-block; position:relative; } details.ask > summary { list-style:none; cursor:pointer; display:inline-block; } details.ask > summary::-webkit-details-marker { display:none; }
details.ask > .pop { position:absolute; top:38px; left:0; z-index:6; background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:0 8px 28px rgba(35,48,61,.12); padding:10px 12px; display:flex; gap:8px; align-items:center; white-space:nowrap; }
details.ask > .pop form.row { display:flex; gap:8px; } .btn.small { min-height:34px; padding:4px 12px; font-size:14px; }
.captures-two { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:28px; align-items:start; }
.captures-two .capture { grid-template-columns:300px 1fr; border-top:none; } .captures-two .shot { width:300px; height:190px; }
.cap-line { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:7px 0; border-top:1px solid var(--chip); font-size:14px; } .cap-line .links { margin-left:auto; }
@media (max-width:1200px) { .captures-two { grid-template-columns:1fr; } }   /* the card and its lines need 1200 px side by side */
.cap-line .links.soft { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:60%; }
/* the chain's addresses one line each, four before the fold (2026-10-23) */
.hop-line { display:grid; grid-template-columns:28px 160px 126px minmax(0,1fr) 128px; gap:10px; align-items:center; padding:8px 0; border-bottom:1px solid var(--chip); font-size:14px; }   /* the address column shows the path; the whole address on hover and as the link */
.hop-line > * { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .hop-line .num { font-family:"DM Mono",ui-monospace,monospace; font-size:12px; color:var(--soft); } .hop-line .host, .hop-line .url, .hop-line .who { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hop-line .url { color:var(--soft); text-decoration:none; } .hop-line .url:hover { color:var(--accent); } .hop-line .who { text-align:right; }
details.fold.hops > summary { display:block; padding:8px 0 2px; } details.fold.hops[open] > summary { margin-bottom:0; }
@media (max-width:1000px) { .hop-line { grid-template-columns:28px 1fr 110px; } .hop-line .url, .hop-line .who { display:none; } }
/* a fold says what it will do in its state (2026-10-23): "show all n" while closed, "show the first four" while open */
details.fold > summary .open, details.more > summary .open { display:none; } details.fold[open] > summary .closed, details.more[open] > summary .closed { display:none; }
details.fold[open] > summary .open, details.more[open] > summary .open { display:inline; }
/* 2026-10-23, night: a fold's summary sits at the bottom while open and says "show less"; the open-site shortcut; the answer window in two lines; a window may open to the left */
details.fold.hops[open], details.more[open] { display:flex; flex-direction:column; } details.fold.hops[open] > summary, details.more[open] > summary { order:99; }
.open-site { font-size:15px; font-weight:600; color:var(--soft); text-decoration:none; padding:2px 8px; border:1px solid var(--line); border-radius:8px; line-height:1.2; } .open-site:hover { color:var(--accent); text-decoration:none; }
details.ask > .pop.stack { flex-direction:column; align-items:flex-start; gap:8px; } details.ask.right > .pop { left:auto; right:0; }
.decide details.ask[open] > summary.btn.quiet { background:transparent; color:var(--ink); border-color:var(--line); }   /* the open Not a problem keeps the quiet button's face */
/* the Campaigns screens of 2026-10-23 (D73): the band of what the record holds since a draft was built */
.band { display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:12px 18px; background:#fff1dc; border:1px solid #f1d9b0; border-radius:12px; font-size:15px; margin-top:6px; }
.band form { margin:0; }
/* the Sightings list on a wide screen (Huijae, 2026-10-23): the site column keeps its default, the caret column takes the room; a complaint pill is two lines at most */
.listing table.list[data-cols] td.filed .pill { white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; line-height:1.35; }
.listing table.list[data-cols] td.caret { text-align:right; }
/* Ours as four cards (Huijae, 2026-10-23 night): four across on a wide screen, two on a laptop, one on a narrow window */
.ours-grid { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:20px; align-items:start; }
@media (max-width:1300px) { .ours-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (max-width:760px) { .ours-grid { grid-template-columns:1fr; } }
.ours-card .group-head { margin-bottom:6px; }
.ours-card .entry { padding:9px 0; border-bottom:1px solid var(--chip); cursor:pointer; } .ours-card .entry:last-child { border-bottom:none; } .ours-card .entry:hover { background:var(--bg); }   /* "entry", not "item": .item is Today's two-column part */
.ours-card .entry .name { min-width:0; overflow-wrap:anywhere; }
.ours-card .entry .also { margin-top:2px; overflow-wrap:anywhere; }   /* the other host names pointing at the Site (2026-10-23) */ .ours-card .entry .note { margin-top:2px; }
.ours-card .entry.open { cursor:default; background:transparent; }

/* the file line and the window with a text (the sheet's parts of 23 October, late; the Complaint page of 2026-10-27) */
.file-line { display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:6px 0; }
.file-line .name { font-family:"DM Mono",ui-monospace,monospace; font-size:14px; overflow-wrap:anywhere; }
.file-line .meta { color:var(--soft); font-size:14px; }
.file-line .acts { margin-left:auto; display:flex; gap:8px; }
textarea.input { min-height:200px; width:100%; font:inherit; font-size:14px; line-height:1.5; resize:vertical; }
details.ask > .pop form.stack { display:flex; flex-direction:column; align-items:stretch; }
details.ask > .pop input[type=file] { font-size:13px; }
@media (min-width: 900px) { .complaint-two { grid-template-columns: minmax(0, 1fr) minmax(360px, 440px); } }   /* the Complaint page: the act keeps its column down to a narrow window; the text column gives (2026-10-27) */
.help { max-width: 860px; font-size:15px; line-height:1.65; } .help h1 { font-size:22px; margin:0 0 10px; } .help h2 { font-size:18px; margin:26px 0 8px; } .help h3 { font-size:16px; margin:18px 0 6px; }
.help p { margin:0 0 12px; } .help ul { margin:0 0 12px 20px; } .help code { font-family:"DM Mono",ui-monospace,monospace; font-size:13px; background:var(--chip); padding:1px 5px; border-radius:6px; }   /* the help page (2026-10-27) */
details.raw { display:inline; } details.raw > summary { display:inline; cursor:pointer; list-style:none; } details.raw > summary::-webkit-details-marker { display:none; }   /* the program's own files, folded (2026-10-27) */
details.ask.wide > .pop { left:auto; right:0; }   /* a wide window opens leftwards from its button, so it stays on the screen in the right column (2026-10-27, the usability test) */
td > details.raw { display:block; } td > details.raw > summary { display:inline-block; }   /* the recipients with no route, folded in their table (2026-10-27) */
/* 2026-11-04 (D75): a list that would run past the screen scrolls inside ten lines (440 px); a shadow at an edge says more lies beyond it; a fold's "show less" stays under the box */
.scrolls-inside { max-height:440px; overflow-y:auto; background:linear-gradient(#fff 30%, rgba(255,255,255,0)) top / 100% 28px no-repeat local, linear-gradient(rgba(255,255,255,0), #fff 70%) bottom / 100% 28px no-repeat local, radial-gradient(farthest-side at 50% 0, rgba(35,48,61,.16), rgba(35,48,61,0)) top / 100% 12px no-repeat scroll, radial-gradient(farthest-side at 50% 100%, rgba(35,48,61,.16), rgba(35,48,61,0)) bottom / 100% 12px no-repeat scroll; }