@zerwiz/ymir 0.1.34 → 0.1.35

package/apps/odrerir/dist/safari-pinned-tab.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+  <g fill="none" stroke="#000000" stroke-width="48" stroke-linecap="square" stroke-linejoin="miter">
+    <path d="M 144 144 L 256 256 L 368 144 M 256 256 V 352" />
+    <path d="M 128 352 H 384" />
+    <path d="M 160 432 H 352" />
+  </g>
+</svg>

package/apps/odrerir/dist/site.webmanifest

@@ -0,0 +1,16 @@
+{
+  "name": "Óðrerir — the Live Hall",
+  "short_name": "Live Hall",
+  "description": "The Ymir fleet's planning glass, carved into the cloth: the tally of the hall, the armed errands, the smiths and the carved ledger. Read live, read-only.",
+  "start_url": "/",
+  "scope": "/",
+  "display": "standalone",
+  "background_color": "#0e0c09",
+  "theme_color": "#0e0c09",
+  "icons": [
+    { "src": "/favicon.svg", "sizes": "any", "type": "image/svg+xml", "purpose": "any" },
+    { "src": "/favicon-192.png", "sizes": "192x192", "type": "image/png" },
+    { "src": "/favicon-512.png", "sizes": "512x512", "type": "image/png" },
+    { "src": "/apple-touch-icon.png", "sizes": "180x180", "type": "image/png" }
+  ]
+}

package/apps/odrerir/dist/styles/cloth.css

@@ -0,0 +1,112 @@
+/* ============================================================
+   ÓÐRERIR — the cloth of the hall.
+
+   The Hall does not paint itself. The tokens below are *extracted* from the
+   landing's own :root (src/styles/global.css) by scripts/extract-cloth.mjs — the
+   landing is the reference and this file is re-taken from it. The Hall's build
+   runs `extract-cloth.mjs --check`, so if a token ever drifts from the landing,
+   the Hall fails to build.
+
+   The primitives that follow (the stone surface, the carvings, the rune-led
+   eyebrows, the prose, the reveal) are carried over from the landing's own
+   base, so the two pages are one cloth. The Hall's own chrome comes last.
+   ============================================================ */
+
+/* >>> generated:tokens — extracted from the landing :root (src/styles/global.css) >>> */
+:root{
+  --bg:#0e0c09; --panel:#151209; --panel2:#1a1610; --panel3:#14100b;
+  --line:#2b241a; --line-soft:#221d14;
+  --bone:#cfc3a9; --bone-dim:#9a8f75; --bone-faint:#6b6250;
+  --steel:#96a0a8; --steel-dim:#5f686e;
+  --bronze:#c9973f; --bronze-deep:#7d5f2a;
+  --blood:#7c3a30; --blood-lit:#c2584a;
+  --disp:'Cormorant',serif; --serif:'Newsreader',Georgia,serif;
+  --mono:'IBM Plex Mono',monospace;
+  --run:'Noto Sans Runic','Segoe UI Historic',serif;
+}
+/* <<< generated:tokens <<< */
+
+/* ============ THE BASE — the surface everything is cut into ============ */
+*{box-sizing:border-box;margin:0;padding:0}
+html{scroll-behavior:smooth}
+body{background:var(--bg);color:var(--bone);font-family:var(--serif);-webkit-font-smoothing:antialiased;overflow-x:hidden}
+::selection{background:#57411a;color:#f0e6cd}
+::-webkit-scrollbar{width:10px}
+::-webkit-scrollbar-track{background:#0b0906}
+::-webkit-scrollbar-thumb{background:#2c241a;border:2px solid #0b0906}
+:focus-visible{outline:1px solid var(--bronze);outline-offset:3px}
+a{color:inherit}
+.rn{font-family:var(--run)}
+
+/* stone grain + vignette — the surface everything is cut into */
+body::before{
+  content:'';position:fixed;inset:0;z-index:2000;pointer-events:none;opacity:.055;
+  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
+}
+body::after{content:'';position:fixed;inset:0;z-index:1999;pointer-events:none;box-shadow:inset 0 0 170px 30px rgba(0,0,0,.5)}
+
+/* ============ THE CARVINGS — the landing's own header and prose ============ */
+.shead{position:relative;margin-bottom:3rem}
+.snum{position:absolute;right:-.4rem;top:-3.2rem;font-family:var(--disp);font-weight:700;
+  font-size:clamp(5.5rem,13vw,10rem);line-height:1;color:rgba(207,195,169,.05);pointer-events:none;user-select:none;
+  -webkit-text-stroke:1px rgba(207,195,169,.08)}
+@media(max-width:640px){.snum{font-size:4.5rem;top:-2.2rem}}
+.skicker{font-family:var(--mono);font-size:.58rem;letter-spacing:.42em;color:var(--steel-dim);text-transform:uppercase;margin-bottom:1.1rem}
+.skicker .rn{color:var(--bronze);font-size:.85rem;letter-spacing:0;margin-right:.5em}
+.shead h1,.shead h2{font-family:var(--disp);font-weight:600;font-size:clamp(1.7rem,3.6vw,2.55rem);letter-spacing:.14em;color:var(--bone);
+  text-shadow:0 -1px 0 rgba(0,0,0,.8)}
+.ssub{font-family:var(--mono);font-size:.64rem;letter-spacing:.2em;color:var(--bone-dim);margin-top:.85rem;text-transform:uppercase}
+
+.prose{max-width:66ch;color:var(--bone-dim);font-size:1.05rem;line-height:1.95}
+.prose+.prose{margin-top:1.3rem}
+.prose .nm{font-family:var(--disp);letter-spacing:.07em;color:var(--bone)}
+.prose code{font-family:var(--mono);font-size:.76em;color:var(--steel);background:#171410;border:1px solid var(--line-soft);padding:.08em .45em;border-radius:2px}
+.prose>p:first-of-type::first-letter{font-family:var(--disp);font-size:3.3em;float:left;line-height:.82;padding:.05em .14em 0 0;color:var(--bronze)}
+
+.pull{font-family:var(--disp);font-size:clamp(1.05rem,2vw,1.32rem);letter-spacing:.06em;line-height:1.8;color:var(--bone);
+  border-left:2px solid var(--bronze-deep);padding:.3rem 0 .3rem 1.6rem;margin:2.8rem 0;max-width:58ch}
+.pull small{display:block;font-family:var(--mono);font-size:.56rem;letter-spacing:.3em;color:var(--steel-dim);margin-top:.9rem;text-transform:uppercase}
+
+.carved{background:var(--panel3);border:1px solid var(--line);
+  box-shadow:inset 0 1px 0 rgba(255,244,214,.03),inset 0 -1px 0 rgba(0,0,0,.5),0 2px 16px rgba(0,0,0,.35)}
+
+.frule{display:flex;align-items:center;gap:1.6rem;max-width:1180px;margin:0 auto;padding:0 clamp(1.25rem,4vw,2.5rem)}
+.frule::before,.frule::after{content:'';flex:1;height:1px;background:var(--line-soft)}
+.frule span{font-family:var(--run);font-size:.72rem;letter-spacing:.42em;color:var(--bone-faint);white-space:nowrap}
+/* narrow screens: the futhark may wrap rather than widen the whole deck */
+@media(max-width:640px){
+  .frule{gap:.8rem}
+  .frule span{white-space:normal;text-align:center;font-size:.62rem;letter-spacing:.22em;line-height:1.9}
+}
+
+/* reveal on scroll — the landing's own rhythm */
+.rv{opacity:1;transform:none;transition:opacity .8s ease,transform .8s ease}
+html.js .rv{opacity:0;transform:translateY(20px)}
+html.js .rv.in{opacity:1;transform:none}
+
+/* ============ THE HALL'S OWN CHROME ============ */
+.hall-top{position:fixed;inset:0 0 auto 0;height:48px;display:flex;align-items:center;justify-content:space-between;gap:1rem;
+  padding:0 clamp(1rem,3vw,2rem);z-index:120;background:rgba(13,11,8,.8);backdrop-filter:blur(10px);
+  border-bottom:1px solid var(--line-soft);font-family:var(--mono);font-size:.58rem;letter-spacing:.3em;
+  color:var(--bone-dim);text-transform:uppercase}
+.hall-top>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.hall-top .rn{color:var(--bronze);margin-right:.7em;font-size:.85rem}
+.hall-back{color:var(--bone-dim);text-decoration:none;letter-spacing:.26em;border-bottom:1px solid transparent;
+  white-space:nowrap;flex:none;transition:color .25s,border-color .25s}
+.hall-back:hover{color:var(--bronze);border-bottom-color:var(--bronze-deep)}
+@media(max-width:560px){.hall-top{font-size:.5rem;letter-spacing:.2em}.hall-back{letter-spacing:.18em}}
+
+.hall-wrap{max-width:1180px;margin:0 auto;padding:0 clamp(1.25rem,4vw,2.5rem)}
+main.hall-wrap{padding-top:clamp(4.5rem,9vh,6.5rem)}
+
+.hall-foot{margin-top:5rem;border-top:1px solid var(--line);padding:3.5rem 1.5rem 4.5rem;text-align:center}
+.hall-foot .frule{margin-bottom:3rem}
+.hall-foot-big{font-family:var(--disp);font-size:clamp(1.15rem,2.6vw,1.7rem);letter-spacing:.15em;color:var(--bone);
+  text-shadow:0 -1px 0 rgba(0,0,0,.8)}
+.hall-foot-close{font-family:var(--mono);font-size:.6rem;letter-spacing:.3em;color:var(--steel-dim);line-height:2.3;
+  margin-top:2rem;text-transform:uppercase}
+
+@media (prefers-reduced-motion:reduce){
+  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
+  .rv{opacity:1;transform:none}
+}

package/apps/odrerir/dist/styles/livehall.css

@@ -0,0 +1,278 @@
+/* ============================================================
+   ÓÐRERIR — THE LIVE HALL (the kit)
+   The fleet board's machinery, rebuilt in the carved cloth.
+
+   The board template (the saga-bearings fleet board) is the *function*: tally
+   strip, dealt call stack, options with recommended marks + freeform + queue
+   guard, carved ledger thread rows, stack navigation.
+   Its *look* (paper cards, hard ink shadows, enamel pins, rounded corners) is
+   refused and rebuilt here in stone: squared carved slates with a bevel, a
+   bronze rule and rivets; rune-marked pins in bronze / blood / steel.
+
+   Tokens only. Every colour comes from the cloth (cloth.css, itself extracted
+   from the landing's :root); the bevel constants are named once on #livehall
+   so no call site carries a literal. Everything lives under #livehall, which
+   on this page is <main> itself.
+   ============================================================ */
+
+#livehall{
+  --lh-hi:rgba(255,244,214,.045);          /* inset highlight, the page's idiom */
+  --lh-lo:rgba(0,0,0,.55);                 /* inset shadow, the page's idiom */
+  --lh-shadow:0 2px 14px rgba(0,0,0,.4);
+  --lh-rule:var(--bronze-deep);
+  --lh-rot-a:.9deg;
+  --lh-rot-b:-.7deg;
+}
+
+/* the carved amber, everywhere in the Hall — plain blue is forbidden */
+::selection{background:#57411a;color:#f0e6cd}
+
+.lh-board{display:flex;flex-direction:column;gap:1.5rem;margin-top:2.8rem}
+
+/* the board speaks plainly: this is the apparatus shown, not a write door */
+.lh-note{font-family:var(--mono);font-size:.56rem;letter-spacing:.14em;color:var(--steel-dim);line-height:1.9}
+.lh-note b{color:var(--bone-dim);font-weight:400}
+
+/* ============ THE TALLY OF THE HALL (stat strip) ============ */
+.lh-tally{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:.8rem}
+.lh-stat{position:relative;display:flex;flex-direction:column;gap:.4rem;padding:1rem 1.05rem;min-width:0;
+  background:var(--panel3);border:1px solid var(--line);
+  box-shadow:inset 0 1px 0 var(--lh-hi),inset 0 -1px 0 var(--lh-lo),var(--lh-shadow)}
+.lh-stat::before{content:'';position:absolute;left:.55rem;right:.55rem;top:.5rem;height:1px;
+  background:var(--lh-rule);opacity:.3}
+.lh-stat__num{font-family:var(--mono);font-size:1.5rem;font-weight:500;line-height:1;color:var(--bone);
+  margin-top:.35rem;font-variant-numeric:tabular-nums}
+.lh-stat__label{font-family:var(--mono);font-size:.53rem;letter-spacing:.2em;text-transform:uppercase;color:var(--bone-faint);
+  line-height:1.6}
+.lh-stat--call{border-color:var(--bronze-deep);
+  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--bronze) 14%,transparent),inset 0 1px 0 var(--lh-hi),
+             inset 0 -1px 0 var(--lh-lo),var(--lh-shadow)}
+.lh-stat--call .lh-stat__num{color:var(--bronze)}
+.lh-stat--call .lh-stat__label{color:var(--bone-dim)}
+
+/* the smiths of the hall — names as chips, states as rune-marked pins */
+.lh-smiths{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;font-family:var(--mono);
+  font-size:.58rem;letter-spacing:.14em;color:var(--steel-dim);line-height:2}
+.lh-smiths b{color:var(--bronze);font-weight:400}
+.lh-smith{display:inline-flex;align-items:center;gap:.5rem;padding:.28rem .5rem .26rem;
+  background:var(--panel3);border:1px solid var(--line);box-shadow:inset 0 1px 0 var(--lh-hi)}
+.lh-smith__name{font-family:var(--mono);font-size:.56rem;letter-spacing:.16em;color:var(--bone-dim);white-space:nowrap}
+.lh-smith--inline,.lh-smith-inline{display:inline-flex;align-items:center;gap:.45rem;white-space:nowrap}
+.lh-smith--inline .lh-smith__name,.lh-smith-inline .lh-smith__name{font-size:.55rem;color:var(--steel)}
+.lh-count{font-family:var(--mono);font-size:.58rem;letter-spacing:.1em;color:var(--bone-faint);line-height:1.9}
+
+/* ============ THE COLUMNS + RUNE-LED EYEBROWS ============ */
+.lh-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2rem;align-items:start}
+@media(max-width:900px){.lh-cols{grid-template-columns:minmax(0,1fr);gap:1.6rem}}
+.lh-sec{display:flex;flex-direction:column;gap:.85rem;min-width:0}
+.lh-sec>*{min-width:0}
+.lh-sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem}
+.lh-eyebrow{display:inline-flex;align-items:center;gap:.65em;font-family:var(--mono);font-size:.57rem;
+  letter-spacing:.32em;text-transform:uppercase;color:var(--bone-dim)}
+.lh-eyebrow .rn{color:var(--bronze);font-size:.9rem;letter-spacing:0}
+.lh-sub{font-family:var(--mono);font-size:.55rem;letter-spacing:.14em;color:var(--steel-dim);text-align:right}
+
+/* ============ CARVED SLATES (the card and the ledger bed) ============ */
+.lh-slate{position:relative;background:var(--panel3);border:1px solid var(--line);
+  background-image:radial-gradient(circle at .6rem calc(100% - .6rem),var(--bronze-deep) 0 1.4px,transparent 1.5px),
+                   radial-gradient(circle at calc(100% - .6rem) calc(100% - .6rem),var(--bronze-deep) 0 1.4px,transparent 1.5px);
+  background-repeat:no-repeat;
+  box-shadow:inset 0 1px 0 var(--lh-hi),inset 0 -1px 0 var(--lh-lo),var(--lh-shadow)}
+.lh-slate--warm{background-color:var(--panel)}
+
+/* ============ THE HALL'S CALL (dealt slate pile) ============ */
+.lh-callwrap{display:flex;flex-direction:column;gap:.2rem}
+.lh-call{position:relative;display:grid}
+/* the pile: solid slate faces at slight opposing rotations, thinning as the
+   deal approaches the bottom — two edges, then one, then none */
+.lh-call::before,.lh-call::after{content:'';position:absolute;inset:0;z-index:0;
+  background:var(--panel3);border:1px solid var(--line);
+  box-shadow:inset 0 1px 0 var(--lh-hi),var(--lh-shadow)}
+.lh-call::before{transform:rotate(var(--lh-rot-a)) translate(4px,5px)}
+.lh-call::after{transform:rotate(var(--lh-rot-b)) translate(-3px,9px)}
+.lh-call--penult::after{display:none}
+.lh-call--last::before,.lh-call--last::after,
+.lh-call--empty::before,.lh-call--empty::after{display:none}
+.lh-call>.lh-decision{grid-area:1/1;z-index:1}
+.lh-call>.lh-decision[hidden]{display:none}
+
+.lh-decision{position:relative;display:flex;flex-direction:column;background-color:var(--panel3);
+  border:1px solid var(--line);
+  background-image:radial-gradient(circle at .6rem calc(100% - .6rem),var(--bronze-deep) 0 1.4px,transparent 1.5px),
+                   radial-gradient(circle at calc(100% - .6rem) calc(100% - .6rem),var(--bronze-deep) 0 1.4px,transparent 1.5px);
+  background-repeat:no-repeat;
+  box-shadow:inset 0 1px 0 var(--lh-hi),inset 0 -1px 0 var(--lh-lo),var(--lh-shadow)}
+.lh-decision::before{content:'';position:absolute;left:.85rem;right:.85rem;top:.5rem;height:1px;
+  background:var(--lh-rule);opacity:.4}
+
+.lh-pad{padding:1.35rem 1.4rem 1.15rem;display:flex;flex-direction:column;gap:.9rem;flex:1}
+.lh-top{display:flex;align-items:center;justify-content:space-between;gap:.8rem}
+.lh-repo{font-family:var(--mono);font-size:.53rem;letter-spacing:.2em;text-transform:uppercase;
+  color:var(--bone-faint);white-space:nowrap}
+.lh-title{margin:0;font-family:var(--disp);font-weight:600;font-size:1.28rem;letter-spacing:.07em;
+  color:var(--bone);line-height:1.3}
+.lh-detail{margin:0;font-size:.95rem;color:var(--bone-dim);line-height:1.65}
+.lh-link{font-family:var(--mono);font-size:.62rem;color:var(--bronze);display:block;overflow:hidden;
+  text-overflow:ellipsis;white-space:nowrap}
+.lh-link:hover{text-decoration:underline}
+
+/* about / decide — the scannable context rows, cut like the inscriptions */
+.lh-ctx{display:flex;flex-direction:column;gap:.4rem}
+.lh-ctx__row{display:grid;grid-template-columns:5rem minmax(0,1fr);gap:.7rem;align-items:baseline}
+.lh-ctx__k{font-family:var(--mono);font-size:.53rem;letter-spacing:.24em;text-transform:uppercase;
+  color:var(--bronze);opacity:.9;white-space:nowrap}
+.lh-ctx__v{font-size:.92rem;color:var(--bone-dim);line-height:1.6;min-width:0}
+@media(max-width:520px){.lh-ctx__row{grid-template-columns:4rem minmax(0,1fr)}}
+
+/* ============ THE FORM: choices, marks, freeform, queue ============ */
+.lh-form{display:flex;flex-direction:column;gap:.85rem;flex:1 1 auto}
+.lh-opts{display:flex;flex-direction:column;gap:.5rem}
+.lh-opt{display:flex;align-items:flex-start;gap:.7rem;padding:.6rem .8rem;cursor:pointer;
+  background:var(--panel);border:1px solid var(--line-soft);
+  transition:border-color .2s,background .2s,box-shadow .2s}
+.lh-opt:hover{border-color:var(--bronze-deep)}
+/* the controls are carved too: squared, riveted, bronze-cored — no native
+   white chrome on the stone */
+.lh-opt input[type=radio]{appearance:none;-webkit-appearance:none;width:14px;height:14px;flex:none;
+  margin:.3rem 0 0;cursor:pointer;border:1px solid var(--bone-faint);background:var(--panel3);
+  box-shadow:inset 0 1px 0 var(--lh-hi);transition:border-color .2s,background .2s,box-shadow .2s}
+.lh-opt input[type=radio]:hover{border-color:var(--bronze-deep)}
+.lh-opt input[type=radio]:checked{border-color:var(--bronze);background:var(--bronze);
+  box-shadow:inset 0 0 0 3px var(--panel3)}
+.lh-opt__body{min-width:0;flex:1 1 auto}
+.lh-opt__label{display:block;font-family:var(--disp);font-size:1rem;letter-spacing:.05em;color:var(--bone);
+  line-height:1.35}
+.lh-opt__hint{display:block;font-family:var(--mono);font-size:.59rem;color:var(--steel);line-height:1.75;
+  margin-top:.2rem}
+.lh-opt__rec{flex:none;align-self:center;font-family:var(--mono);font-size:.48rem;letter-spacing:.2em;
+  text-transform:uppercase;color:var(--bronze);border:1px solid var(--bronze-deep);
+  padding:.22rem .42rem .18rem;background:color-mix(in srgb,var(--bronze) 10%,transparent)}
+.lh-opt:has(input:checked){border-color:var(--bronze-deep);
+  background:color-mix(in srgb,var(--bronze) 7%,var(--panel));
+  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--bronze) 18%,transparent)}
+.lh-opt:has(input:focus-visible){box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--bronze) 30%,transparent)}
+
+.lh-foot{display:flex;align-items:center;gap:.7rem;margin-top:auto;flex-wrap:wrap}
+.lh-queued{display:none;align-items:center;gap:.45em;font-family:var(--mono);font-size:.5rem;
+  letter-spacing:.2em;text-transform:uppercase;color:var(--bronze);border:1px solid var(--bronze-deep);
+  padding:.34rem .5rem .3rem;background:color-mix(in srgb,var(--bronze) 9%,transparent)}
+.lh-queued .fm-ico,.lh-queued svg{width:1em;height:1em}
+.is-queued .lh-queued{display:inline-flex}
+.lh-limit{display:none;font-family:var(--mono);font-size:.56rem;letter-spacing:.02em;color:var(--blood-lit);
+  line-height:1.6;max-width:30ch}
+.lh-limit.is-visible{display:inline}
+.lh-freeform{width:100%;font-family:var(--mono);font-size:.68rem;color:var(--bone);background:var(--bg);
+  border:1px solid var(--line);padding:.6rem .75rem}
+.lh-freeform::placeholder{color:var(--bone-faint)}
+.lh-freeform:focus{outline:none;border-color:var(--bronze-deep);
+  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--bronze) 18%,transparent)}
+
+/* ============ THE CARVED BUTTON ============ */
+.lh-btn{display:inline-flex;align-items:center;gap:.6em;font-family:var(--mono);font-size:.56rem;
+  letter-spacing:.26em;text-indent:.26em;text-transform:uppercase;color:var(--bone);background:var(--panel2);
+  border:1px solid var(--line);padding:.72rem 1.15rem;cursor:pointer;
+  box-shadow:inset 0 1px 0 var(--lh-hi),inset 0 -1px 0 var(--lh-lo);
+  transition:border-color .25s,color .25s,background .25s,transform .1s}
+.lh-btn .rn{color:var(--bronze);letter-spacing:0;text-indent:0;margin-right:-.15em}
+.lh-btn:hover{border-color:var(--bronze-deep);color:var(--bronze)}
+.lh-btn:active{transform:translateY(1px);
+  box-shadow:inset 0 -1px 0 var(--lh-hi),inset 0 1px 0 var(--lh-lo)}
+.lh-btn[disabled]{opacity:.4;cursor:not-allowed}
+.lh-btn--primary{background:color-mix(in srgb,var(--blood) 22%,var(--panel2));border-color:var(--blood)}
+.lh-btn--primary:hover{border-color:var(--blood-lit);color:var(--bone)}
+.lh-btn--gold{background:color-mix(in srgb,var(--bronze) 13%,var(--panel2));border-color:var(--bronze-deep)}
+.lh-btn--gold:hover{color:var(--bronze)}
+.lh-btn--sm{font-size:.5rem;letter-spacing:.2em;text-indent:.2em;padding:.5rem .8rem}
+.lh-btn--sm .rn{font-size:.8rem}
+
+/* ============ STACK NAVIGATION ============ */
+.lh-stacknav{display:flex;align-items:center;gap:.5rem;margin-top:.7rem}
+.lh-stacknav__count{flex:1 1 auto;font-family:var(--mono);font-size:.55rem;letter-spacing:.18em;
+  text-transform:uppercase;color:var(--steel-dim)}
+.lh-stacknav__btn{display:inline-grid;place-items:center;width:32px;height:32px;cursor:pointer;
+  background:var(--panel3);color:var(--bone-dim);border:1px solid var(--line);
+  box-shadow:inset 0 1px 0 var(--lh-hi),inset 0 -1px 0 var(--lh-lo);
+  transition:border-color .2s,color .2s}
+.lh-stacknav__btn:hover{border-color:var(--bronze-deep);color:var(--bronze)}
+.lh-stacknav__btn[disabled]{opacity:.35;cursor:not-allowed}
+.lh-stacknav__btn svg{width:15px;height:15px}
+.lh-stacknav[hidden]{display:none}
+
+/* ============ THE CARVED LEDGER (thread rows) ============ */
+.lh-rows{display:flex;flex-direction:column}
+.lh-rows--scroll{max-height:380px;overflow-y:auto}
+.lh-rows--scroll::-webkit-scrollbar{width:6px}
+.lh-rows--scroll::-webkit-scrollbar-track{background:transparent}
+.lh-rows--scroll::-webkit-scrollbar-thumb{background:var(--line);border:none}
+.lh-row{display:flex;align-items:center;gap:.8rem;padding:.72rem 1rem;
+  border-top:1px dashed var(--line-soft);min-width:0}
+.lh-row:first-child{border-top:none}
+.lh-row__main{min-width:0;flex:1 1 auto}
+.lh-row__title{font-size:.97rem;color:var(--bone);line-height:1.35;overflow:hidden;text-overflow:ellipsis;
+  white-space:nowrap}
+.lh-row__sub{font-family:var(--mono);font-size:.56rem;letter-spacing:.1em;color:var(--steel-dim);
+  line-height:1.5;margin-top:.22rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.lh-row__id{font-family:var(--mono);font-size:.53rem;letter-spacing:.12em;color:var(--bone-faint);white-space:nowrap}
+.lh-row__pr{font-family:var(--mono);font-size:.58rem;color:var(--bronze);white-space:nowrap}
+.lh-row__pr:hover{text-decoration:underline}
+.lh-row__check{width:24px;height:24px;flex:none;display:grid;place-items:center;color:var(--bronze);
+  background:color-mix(in srgb,var(--bronze) 8%,transparent);border:1px solid var(--bronze-deep)}
+.lh-row__check svg{width:14px;height:14px}
+.lh-morechip{display:inline-flex;align-items:center;gap:.5em;margin:.75rem 1rem .9rem;width:fit-content;
+  font-family:var(--mono);font-size:.53rem;letter-spacing:.16em;text-transform:uppercase;color:var(--steel);
+  border:1px dashed var(--line);padding:.36rem .7rem}
+.lh-empty{padding:1.15rem 1rem;font-family:var(--mono);font-size:.6rem;letter-spacing:.06em;color:var(--steel-dim);
+  line-height:1.9}
+
+/* ============ CHARTED NEXT — the dispatch picker ============ */
+.lh-pick{appearance:none;-webkit-appearance:none;width:15px;height:15px;flex:none;cursor:pointer;margin:0;
+  border:1px solid var(--bone-faint);background:var(--panel3);box-shadow:inset 0 1px 0 var(--lh-hi);
+  transition:border-color .2s,background .2s,box-shadow .2s}
+.lh-pick:hover{border-color:var(--bronze-deep)}
+.lh-pick:checked{border-color:var(--bronze);background:var(--bronze);
+  box-shadow:inset 0 0 0 3.5px var(--panel3)}
+.lh-pick-spacer{width:15px;flex:none}
+.lh-dispatch{display:flex;align-items:center;gap:.8rem;padding:.85rem 1rem;border-top:1px solid var(--line);
+  background:color-mix(in srgb,var(--panel2) 65%,var(--panel3))}
+.lh-dispatch[hidden]{display:none}
+.lh-dispatch__count{flex:1 1 auto;font-family:var(--mono);font-size:.53rem;letter-spacing:.16em;
+  text-transform:uppercase;color:var(--steel-dim);line-height:1.7}
+.lh-dispatch.is-queued .lh-dispatch__count{color:var(--bone-dim)}
+
+/* ============ RUNE-MARKED PINS (status badges) ============ */
+.lh-badge{display:inline-flex;align-items:center;gap:.45em;font-family:var(--mono);font-size:.48rem;
+  line-height:1;padding:.34rem .5rem .3rem;text-transform:uppercase;letter-spacing:.2em;white-space:nowrap;
+  border:1px solid var(--line);color:var(--bone-dim);background:var(--panel3);
+  box-shadow:inset 0 1px 0 var(--lh-hi)}
+.lh-badge::before{content:'';width:3.5px;height:3.5px;flex:none;transform:rotate(45deg);
+  background:currentColor;opacity:.9}
+.lh-badge--online{border-color:var(--bronze-deep);color:var(--bronze)}
+.lh-badge--info{border-color:var(--steel-dim);color:var(--steel)}
+.lh-badge--warn{border-color:var(--bronze-deep);color:var(--bone-dim)}
+.lh-badge--danger{border-color:var(--blood);color:var(--blood-lit)}
+.lh-badge--neutral{color:var(--bone-dim)}
+.lh-badge--solid{border-color:var(--bronze-deep);color:var(--bronze);
+  background:color-mix(in srgb,var(--bronze) 15%,var(--panel3))}
+
+/* ============ PROVENANCE — the glass says when it was read ============ */
+.lh-provenance{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
+  border-top:1px solid var(--line-soft);padding-top:.9rem}
+.lh-asof{font-family:var(--mono);font-size:.53rem;letter-spacing:.18em;text-transform:uppercase;color:var(--bone-faint)}
+.lh-asof.is-live{color:var(--bronze)}
+
+/* narrow screens: let the ledger tell the whole line rather than clip it,
+   and give each chamber its eyebrow above its count */
+@media(max-width:560px){
+  .lh-sec-head{flex-direction:column;align-items:flex-start;gap:.25rem}
+  .lh-sub{text-align:left}
+  .lh-row__title,.lh-row__sub{white-space:normal;overflow:visible}
+  .lh-ctx__row{grid-template-columns:3.6rem minmax(0,1fr)}
+}
+
+/* the section's watermark is a rune, not a numeral: the Live Hall is the board
+   beside the saga, not a fourteenth carving */
+#livehall .snum.rn{font-family:var(--run);font-size:clamp(4.5rem,11vw,8.5rem);letter-spacing:0}
+
+/* the hall draws itself by script; say so plainly where it cannot */
+.lh-nojs{padding:1.1rem 1rem;font-family:var(--mono);font-size:.6rem;letter-spacing:.06em;
+  color:var(--steel-dim);line-height:1.9}

package/apps/odrerir/electron/main.cjs

@@ -0,0 +1,183 @@
+// Óðrerir — Electron shell. The Live Hall as a desktop app.
+//
+// Raises the hall (the Astro board on :4322) if it is down, then opens it in
+// its own native window. The board stays the UI; this is the window around it.
+// One app identity of its own, so it never stacks with Hlidskjalf or Smíðja.
+const { app, BrowserWindow, Menu, shell, screen } = require('electron');
+const { spawn } = require('node:child_process');
+const http = require('node:http');
+const path = require('node:path');
+
+const ROOT = path.resolve(__dirname, '..', '..', '..');
+// A desktop shell is a LOCAL seat: it never wears a tunnel. A non-loopback URL
+// (a *.zerwiz.org hostname, say) is refused, not honoured - Cloudflare has no
+// business inside an Electron window.
+function localOnly(url, fallback) {
+  try {
+    const h = new URL(url).hostname;
+    if (h === '127.0.0.1' || h === 'localhost' || h === '::1') return url;
+  } catch { /* not a URL at all: fall through */ }
+  console.warn('[ymir] refusing a non-local URL for a desktop shell: ' + url);
+  return fallback;
+}
+const HALL = localOnly(process.env.HALL_URL || 'http://127.0.0.1:4322/', 'http://127.0.0.1:4322/');
+
+// One window, one app identity: Óðrerir is its own desktop app so it never
+// stacks in the taskbar and carries its own icon.
+const APP_NAME = 'Ymir · Óðrerir';
+const APP_SLUG = 'ymir-odrerir';
+const ICON = path.join(__dirname, 'icon.png');
+
+app.setName(APP_SLUG);
+if (process.platform === 'linux') {
+  app.setDesktopName(`${APP_SLUG}.desktop`);
+  app.commandLine.appendSwitch('class', APP_SLUG);
+}
+
+let win = null;
+
+// Single instance: a second launch focuses the existing window instead of
+// opening a new one. Must run before app 'ready'.
+if (!app.requestSingleInstanceLock()) {
+  app.quit();
+} else {
+  app.on('second-instance', () => {
+    if (win && !win.isDestroyed()) {
+      if (win.isMinimized()) win.restore();
+      win.focus();
+    }
+  });
+}
+
+function reachable(url) {
+  return new Promise((resolve) => {
+    const req = http.get(url, (res) => {
+      res.resume();
+      resolve(res.statusCode >= 200 && res.statusCode < 500);
+    });
+    req.on('error', () => resolve(false));
+    req.setTimeout(1500, () => {
+      req.destroy();
+      resolve(false);
+    });
+  });
+}
+
+async function ensureHall() {
+  if (await reachable(HALL)) return true;
+  // The hall is raised by the start script's service stanza; if that wasn't
+  // run, ask it to bring every Ymir surface up rather than fight it here.
+  const script = path.join(ROOT, 'scripts', 'start.sh');
+  const child = spawn('bash', [script], { cwd: ROOT, detached: true, stdio: 'ignore' });
+  child.unref();
+  for (let i = 0; i < 40; i += 1) {
+    await new Promise((r) => setTimeout(r, 1000));
+    if (await reachable(HALL)) return true;
+  }
+  return false;
+}
+
+function targetDisplay() {
+  let displays = [];
+  try {
+    displays = screen.getAllDisplays();
+  } catch {
+    return null;
+  }
+  if (!displays.length) return null;
+  const primary = (() => {
+    try {
+      return screen.getPrimaryDisplay();
+    } catch {
+      return displays[0];
+    }
+  })();
+  const want = (process.env.YMIR_DESKTOP_DISPLAY || 'other').toLowerCase();
+  const second = displays.filter((d) => d.id !== primary.id);
+  if ((want === 'other' || want === '') && second.length) return second[0];
+  if (/^\d+$/.test(want)) {
+    const d = displays[Number(want)];
+    if (d) return d;
+  }
+  if (want === 'primary') return primary;
+  return primary;
+}
+
+function centeredBounds(display) {
+  const wantW = 1440;
+  const wantH = 900;
+  if (!display) return { width: wantW, height: wantH };
+  const wa = display.workArea || display.bounds;
+  const w = Math.max(800, Math.min(wantW, wa.width));
+  const h = Math.max(600, Math.min(wantH, wa.height));
+  const x = Math.round(wa.x + (wa.width - w) / 2);
+  const y = Math.round(wa.y + (wa.height - h) / 2);
+  return { width: w, height: h, x, y };
+}
+
+function openWindow(url, title) {
+  // Never stack: reuse the window we already have.
+  if (win && !win.isDestroyed()) { if (win.isMinimized()) win.restore(); win.focus(); return win; }
+  const bounds = centeredBounds(targetDisplay());
+  win = new BrowserWindow({
+    ...bounds,
+    minWidth: 800,
+    minHeight: 600,
+    backgroundColor: '#0e0c09',
+    icon: ICON,
+    title,
+    autoHideMenuBar: false,
+    webPreferences: {
+      contextIsolation: true,
+      nodeIntegration: false,
+    },
+  });
+  win.loadURL(url);
+  win.on('page-title-updated', (e) => e.preventDefault());
+  win.webContents.setWindowOpenHandler(({ url: u }) => {
+    shell.openExternal(u);
+    return { action: 'deny' };
+  });
+  win.on('closed', () => {
+    win = null;
+  });
+  return win;
+}
+
+function buildMenu() {
+  const template = [
+    {
+      label: 'Ymir',
+      submenu: [
+        { label: 'Reload', accelerator: 'CmdOrCtrl+R', click: () => win && win.reload() },
+        { label: 'DevTools', accelerator: 'CmdOrCtrl+Alt+I', click: () => win && win.webContents.toggleDevTools() },
+        { type: 'separator' },
+        { role: 'quit' },
+      ],
+    },
+    {
+      label: 'View',
+      submenu: [
+        { role: 'zoomIn' },
+        { role: 'zoomOut' },
+        { role: 'resetZoom' },
+        { type: 'separator' },
+        { role: 'togglefullscreen' },
+      ],
+    },
+  ];
+  Menu.setApplicationMenu(Menu.buildFromTemplate(template));
+}
+
+app.whenReady().then(async () => {
+  buildMenu();
+  await ensureHall();
+  openWindow(HALL, APP_NAME);
+  app.on('activate', () => {
+    if (BrowserWindow.getAllWindows().length === 0) openWindow(HALL, APP_NAME);
+  });
+});
+
+app.on('window-all-closed', () => {
+  if (process.platform !== 'darwin') app.quit();
+});

package/apps/odrerir/electron/ymir-odrerir.desktop.in

@@ -0,0 +1,12 @@
+[Desktop Entry]
+Type=Application
+Version=1.0
+Name=Ymir · Óðrerir
+GenericName=Ymir Live Hall
+Comment=The Live Hall — Óðrerir, the fleet's carved board
+Exec=bash __YMIR_ROOT__/scripts/electron.sh start --view odrerir
+Icon=__YMIR_ROOT__/apps/odrerir/electron/icon.png
+Terminal=false
+Categories=Development;Utility;
+StartupWMClass=ymir-odrerir
+StartupNotify=true