@font-face { font-family: "Zilla Slab"; font-weight: 500; font-display: swap; src: url(/vendor/fonts/zilla-slab-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "Zilla Slab"; font-weight: 700; font-display: swap; src: url(/vendor/fonts/zilla-slab-latin-700-normal.woff2) format("woff2"); }
@font-face { font-family: "Atkinson"; font-weight: 400; font-display: swap; src: url(/vendor/fonts/atkinson-hyperlegible-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Atkinson"; font-weight: 700; font-display: swap; src: url(/vendor/fonts/atkinson-hyperlegible-latin-700-normal.woff2) format("woff2"); }
:root { --paper:#f4efe2; --card:#fffdf6; --ink:#22291f; --soft:#6b6e5f; --rule:#d8d0bb; --overdue:#b5412b; --out:#2b5c8a; --due:#d9a13b; --recent:#6f8f4e; --never:#a9a392; --slab:"Zilla Slab",Georgia,serif; --text:"Atkinson",Verdana,sans-serif; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html,body { height:100%; margin:0; }
body { display:grid; grid-template-columns:372px 1fr; background:var(--paper); color:var(--ink); font:16px/1.4 var(--text); overflow:hidden; }
[data-state=overdue]{--s:var(--overdue)} [data-state=out]{--s:var(--out)} [data-state=due]{--s:var(--due)} [data-state=recent]{--s:var(--recent)} [data-state=never]{--s:var(--never)}
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.ledger { display:flex; flex-direction:column; min-height:0; height:100vh; border-right:2px solid var(--ink); background:var(--paper); z-index:2; }
.masthead { padding:22px 22px 14px; border-bottom:2px solid var(--ink); }
.eyebrow { margin:0; font-size:13px; letter-spacing:.09em; text-transform:uppercase; color:var(--soft); }
h1 { margin:2px 0 4px; font:700 34px/1 var(--slab); letter-spacing:-.01em; }
.tally { margin:0; font-size:15px; color:var(--soft); }
.tools { padding:12px 16px; border-bottom:1px solid var(--rule); }
input,select { width:100%; padding:9px 10px; border:1.5px solid var(--ink); border-radius:2px; background:var(--card); color:var(--ink); font:16px var(--text); }
input:focus-visible,select:focus-visible,button:focus-visible,a:focus-visible { outline:3px solid var(--due); outline-offset:1px; }
.filters { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.chip { display:inline-flex; align-items:center; gap:6px; padding:4px 8px; border:1px solid var(--rule); border-radius:2px; background:transparent; color:var(--ink); font:14px var(--text); cursor:pointer; }
.chip:hover { border-color:var(--ink); } .chip.on { background:var(--ink); border-color:var(--ink); color:var(--card); }
.chip i { width:10px; height:10px; border-radius:50%; } .chip b { font-family:var(--slab); }
.rows { flex:1; min-height:0; overflow-y:auto; margin:0; padding:0; list-style:none; }
.row-link { display:grid; grid-template-columns:50px 1fr auto; align-items:center; gap:10px; padding:9px 16px 9px 12px; border-bottom:1px solid var(--rule); border-left:5px solid var(--s); color:inherit; text-decoration:none; }
.row-link:hover { background:var(--card); } .row-link.on { background:var(--ink); color:var(--card); } .row-link.on .line { color:#cfd0c2; }
.no { font:700 25px/1 var(--slab); text-align:right; font-variant-numeric:tabular-nums; }
.body { display:flex; flex-direction:column; min-width:0; } .title { font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.line { font-size:14px; color:var(--soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dnc-count { min-width:24px; padding:1px 5px; border:1.5px solid var(--overdue); border-radius:2px; color:var(--overdue); font:700 13px var(--slab); text-align:center; } .row-link.on .dnc-count { border-color:#f0b5a8; color:#f0b5a8; }
.none { padding:20px; color:var(--soft); }
.atlas,#map { height:100vh; min-width:0; }
.stamp { min-width:25px; height:25px; padding:0 4px; border:1.5px solid var(--ink); border-radius:2px; background:var(--card); color:var(--ink); font:700 14px/20px var(--slab); cursor:pointer; box-shadow:2px 2px 0 var(--s,#888); }
.stamp:hover,.stamp.on { background:var(--ink); color:var(--card); z-index:5; } .stamp.muted { opacity:.2; }
body.far .stamp.town:not(.on) { display:none; }
.sheet { position:fixed; top:14px; right:14px; bottom:14px; width:460px; overflow-y:auto; padding:0 0 28px; border:2px solid var(--ink); background:var(--card); box-shadow:7px 7px 0 rgba(34,41,31,.35); z-index:3; animation:slip .22s ease-out; }
@keyframes slip { from { transform:translateX(24px); opacity:0; } }
@media (prefers-reduced-motion:reduce) { .sheet { animation:none; } }
.sheet-head { position:relative; display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:center; padding:20px 44px 18px 20px; border-bottom:2px solid var(--ink); border-top:9px solid var(--s); }
.numeral { font:700 66px/.9 var(--slab); letter-spacing:-.03em; } h2 { margin:0 0 3px; font:700 24px/1.1 var(--slab); }
.sub { margin:0; font-size:14px; color:var(--soft); white-space:pre-wrap; }
.close { position:absolute; top:8px; right:8px; width:32px; height:32px; border:0; background:transparent; color:var(--ink); font-size:26px; line-height:1; cursor:pointer; }
.status { display:flex; align-items:center; gap:10px; padding:10px 20px; border-bottom:1px solid var(--rule); } .pill { padding:2px 8px; background:var(--s); color:#fff; font:700 14px var(--slab); } [data-state=due] .pill { color:var(--ink); }
.actions { padding:16px 20px; background:var(--paper); border-bottom:2px solid var(--ink); }
.action { display:grid; gap:9px; } .action h3 { margin:0; } .row { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.holder { display:flex; align-items:baseline; gap:7px; flex-wrap:wrap; } .k,.since { font-size:14px; color:var(--soft); } .holder strong { font:700 21px var(--slab); }
.primary { padding:10px 12px; border:1.5px solid var(--ink); border-radius:2px; background:var(--ink); color:var(--card); font:700 16px var(--text); cursor:pointer; } .primary:hover { background:#3a4535; } .primary:disabled { opacity:.5; cursor:wait; }
.error { margin:0; color:var(--overdue); font-weight:700; }
.sheet section { padding:16px 20px 2px; } h3 { display:flex; justify-content:space-between; margin:0 0 8px; font:700 19px var(--slab); } .count { color:var(--soft); }
.dnc,.history { margin:0; padding:0; list-style:none; } .dnc li { display:flex; justify-content:space-between; gap:12px; padding:6px 0; border-bottom:1px solid var(--rule); } .note { color:var(--soft); font-size:14px; } .empty { margin:0 0 8px; color:var(--soft); }
.history li { padding:9px 0 9px 12px; border-left:3px solid var(--rule); } .history li.current { border-left-color:var(--out); }
.who { font-weight:700; } .tag { margin-left:6px; padding:0 5px; background:var(--paper); font-size:12px; font-weight:400; } .when { font-size:15px; color:var(--soft); }
.lineage { margin-top:4px; padding:3px 7px; background:#efe7d0; font-size:13px; } .doubt { margin-top:4px; padding:3px 7px; background:#f7dfd8; color:#7b2a1b; font-size:13px; }
@media (max-width:820px) { body { grid-template-columns:1fr; grid-template-rows:42vh 1fr; overflow:auto; } .atlas { grid-row:1; } .atlas,#map { height:42vh; } .ledger { grid-row:2; height:auto; border-right:0; border-top:2px solid var(--ink); } .sheet { inset:0; width:auto; border:0; box-shadow:none; } }
.place { padding:0 5px; font-size:12px; white-space:nowrap; } .place.off { background:#f7dfd8; color:#7b2a1b; } .place.near { background:#efe7d0; }
.dnc .right { display:flex; align-items:center; gap:6px; }
.dnc li { display:block; } .line1 { display:flex; align-items:center; gap:8px; } .addr { flex:1; min-width:0; }
.warn { width:auto; max-width:112px; padding:2px 4px; border:1px solid var(--rule); font-size:12px; background:transparent; color:var(--soft); }
.dnc li.severe { margin:0 -8px; padding:7px 8px; background:#2a1512; color:#fff6f0; border-bottom:0; } .dnc li.severe .note { color:#f6c9bb; font-weight:700; } .dnc li.severe .warn { color:#fff6f0; border-color:#f6c9bb; background:#2a1512; }
.dueline { margin:0; font-weight:700; } .dueline.late { color:var(--overdue); }
.links { display:flex; flex-wrap:wrap; gap:4px 14px; font-size:14px; } .links a, .sheet-links a, .sheet-add { color:var(--ink); }
.linkish { padding:0; border:0; background:none; color:var(--ink); font:inherit; font-size:14px; text-decoration:underline; cursor:pointer; } .linkish.edit { margin-left:10px; font-weight:400; color:var(--soft); }
.sheet-links { display:flex; flex-wrap:wrap; gap:6px 18px; padding:10px 20px; border-bottom:1px solid var(--rule); font-size:15px; }
.mapnote { margin:0; padding:10px 20px; border-bottom:1px solid var(--rule); font-size:14px; color:var(--soft); }
.sheet-add { display:inline-block; margin:8px 0; font-size:15px; } .dnc .addr { color:inherit; text-decoration:none; } .dnc .addr:hover { text-decoration:underline; }
.sheet .entry-form { margin:8px 0; padding:10px; background:var(--paper); border:1.5px solid var(--ink); } .sheet .entry-form .field { display:grid; gap:3px; margin:0 0 8px; font-size:14px; font-weight:700; } .sheet .entry-form .field-hint { font-weight:400; color:var(--soft); }
.sheet .entry-form .buttons { display:flex; flex-wrap:wrap; gap:8px; } .sheet .quiet { padding:8px 10px; border:1.5px solid var(--ink); border-radius:2px; background:var(--card); color:var(--ink); font:700 14px var(--text); cursor:pointer; }
body.signin { display:flex; align-items:center; justify-content:center; overflow:auto; } .login { display:grid; gap:10px; width:min(380px,92vw); padding:28px; border:2px solid var(--ink); background:var(--card); box-shadow:7px 7px 0 rgba(34,41,31,.35); } .login label { font-weight:700; }
.colourby { display:flex; align-items:center; gap:8px; margin-top:10px; font-size:14px; color:var(--soft); white-space:nowrap; } .colourby select { padding:4px 6px; font-size:14px; }
.legend { display:flex; flex-wrap:wrap; gap:3px 10px; margin-top:6px; font-size:13px; } .legend span { display:inline-flex; align-items:center; gap:5px; } .legend i { width:10px; height:10px; border-radius:50%; border:1px solid rgba(34,41,31,.4); }