@zerwiz/ymir 0.1.34 → 0.1.35

package/apps/odrerir/src/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/src/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/sessrumnir/.github/ISSUE_TEMPLATE/bug_report.yml

@@ -0,0 +1,99 @@
+name: Bug report
+description: Something's broken or behaving wrong
+title: "[Bug]: "
+labels: ["bug"]
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Thanks for taking the time to file a bug. The more detail you give, the faster we can fix it.
+
+  - type: textarea
+    id: what-happened
+    attributes:
+      label: What happened?
+      description: A clear description of what went wrong.
+      placeholder: "When I clicked X, the app did Y, but I expected Z."
+    validations:
+      required: true
+
+  - type: textarea
+    id: reproduce
+    attributes:
+      label: Steps to reproduce
+      description: Tell us how to make the bug happen again.
+      placeholder: |
+        1. Open Sessrúmnir
+        2. Click '...'
+        3. See error
+    validations:
+      required: true
+
+  - type: textarea
+    id: expected
+    attributes:
+      label: What did you expect?
+      description: What should have happened instead?
+    validations:
+      required: true
+
+  - type: dropdown
+    id: os
+    attributes:
+      label: Operating system
+      options:
+        - Linux (AppImage)
+        - macOS (.dmg / .zip)
+        - Windows (portable .exe)
+        - Built from source
+        - Other
+    validations:
+      required: true
+
+  - type: input
+    id: os-version
+    attributes:
+      label: OS version
+      description: "e.g. Ubuntu 24.04, Fedora 40, Windows 11 22H2"
+    validations:
+      required: true
+
+  - type: input
+    id: pi-desktop-version
+    attributes:
+      label: Sessrúmnir version
+      description: "Open Diagnostics and copy the App version line. Example: 0.1.8-alpha"
+    validations:
+      required: true
+
+  - type: input
+    id: pi-version
+    attributes:
+      label: Pi agent version
+      description: "Run `pi --version` in a terminal. If Pi isn't installed, write 'not installed'."
+    validations:
+      required: true
+
+  - type: textarea
+    id: logs
+    attributes:
+      label: Logs or error messages
+      description: |
+        Anything from the DevTools console (View > Toggle DevTools), the terminal you launched the app from, or an on-screen error.
+      render: shell
+
+  - type: textarea
+    id: screenshots
+    attributes:
+      label: Screenshots
+      description: Drag-and-drop images here if they help show the problem.
+
+  - type: checkboxes
+    id: checks
+    attributes:
+      label: Before submitting
+      options:
+        - label: I searched existing issues and didn't find a duplicate.
+          required: true
+        - label: I'm on the latest release listed at https://github.com/FaqFirebase/pi-desktop/releases
+          required: true

package/apps/sessrumnir/.github/ISSUE_TEMPLATE/config.yml

@@ -0,0 +1,8 @@
+blank_issues_enabled: false
+contact_links:
+  - name: Pi coding agent (the underlying CLI)
+    url: https://github.com/earendil-works/pi/issues
+    about: If the bug is in Pi itself (the agent we wrap), report it upstream here.
+  - name: Sessrúmnir releases
+    url: https://github.com/FaqFirebase/pi-desktop/releases
+    about: Grab the latest build before opening a bug.

package/apps/sessrumnir/.github/ISSUE_TEMPLATE/feature_request.yml

@@ -0,0 +1,46 @@
+name: Feature request
+description: Suggest a new feature or improvement
+title: "[Feature]: "
+labels: ["enhancement"]
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Thanks for the suggestion. Help us understand the problem first — that's usually where the best solutions come from.
+
+  - type: textarea
+    id: problem
+    attributes:
+      label: What problem does this solve?
+      description: What are you trying to do that's awkward or impossible today?
+      placeholder: "When I'm doing X, I have to manually do Y every time, and it would be much faster if..."
+    validations:
+      required: true
+
+  - type: textarea
+    id: solution
+    attributes:
+      label: What would you like to see?
+      description: A clear description of the feature or change you want.
+    validations:
+      required: true
+
+  - type: textarea
+    id: alternatives
+    attributes:
+      label: Alternatives you've considered
+      description: Other approaches you've thought about, or workarounds you're using now.
+
+  - type: textarea
+    id: extra
+    attributes:
+      label: Anything else?
+      description: Mockups, links to similar features in other apps, etc.
+
+  - type: checkboxes
+    id: checks
+    attributes:
+      label: Before submitting
+      options:
+        - label: I searched existing issues and didn't find a duplicate.
+          required: true

package/apps/sessrumnir/.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,56 @@
+<!--
+Thanks for contributing to Sessrúmnir!
+
+Before you open this PR, please read CONTRIBUTING.md:
+https://github.com/FaqFirebase/pi-desktop/blob/master/CONTRIBUTING.md
+
+Two things people miss most often:
+1. PRs must target the `Dev` branch, not `master`.
+2. Commit messages follow Conventional Commits: <type>(<scope>): <subject>
+-->
+
+## Summary
+
+<!-- What does this PR do, and why? A few sentences is fine. -->
+
+## Related issues
+
+<!-- Link issues this PR addresses, e.g. "Closes #123". Write "None" if there isn't one. -->
+
+## Type of change
+
+<!-- Check all that apply. -->
+
+- [ ] `feat` — New feature
+- [ ] `fix` — Bug fix
+- [ ] `docs` — Documentation
+- [ ] `refactor` — Code restructuring (no behavior change)
+- [ ] `test` — Adding or updating tests
+- [ ] `chore` — Build process, dependencies, tooling
+- [ ] `perf` — Performance improvement
+- [ ] `style` — Formatting (no code change)
+
+## How was this tested?
+
+<!--
+Describe how you verified the change: manual steps in the app,
+new/updated tests, platforms tested (Linux/Windows), etc.
+-->
+
+## Screenshots
+
+<!-- For UI changes, add before/after screenshots. Delete this section otherwise. -->
+
+## Checklist
+
+- [ ] This PR targets the `Dev` branch (not `master`)
+- [ ] `npm run typecheck` passes
+- [ ] `npm run lint` passes
+- [ ] `npx tsx --test` passes
+- [ ] `npm run build` succeeds
+- [ ] The app launches and works (`npm run dev`) with no regressions
+- [ ] Tests added or updated for changed modules (colocated `*.test.ts`)
+- [ ] Electron security posture preserved (context isolation, IPC through preload bridge, validated payloads)
+- [ ] Commit messages follow [Conventional Commits](https://www.conventionalcommits.org/)
+- [ ] If AI-assisted, the agent was pointed at [`AGENTS.md`](https://github.com/FaqFirebase/pi-desktop/blob/master/AGENTS.md) and its Final Delivery Checklist
+- [ ] I have read and agree to the [CLA](https://github.com/FaqFirebase/pi-desktop/blob/master/CLA.md)

package/apps/sessrumnir/.github/SUPPORT.md

@@ -0,0 +1,18 @@
+# Support
+
+## Response times
+
+Issues are monitored on weekdays. Weekend issues are not handled unless urgent (crash on launch, data loss, security).
+
+If your issue is urgent, label it **urgent** and briefly explain why in the description.
+
+## Before opening an issue
+
+- Check the [existing issues](https://github.com/FaqFirebase/pi-desktop/issues) for duplicates.
+- Make sure you are on the [latest release](https://github.com/FaqFirebase/pi-desktop/releases).
+- If the problem is in the Pi agent itself (not the GUI), report it [upstream](https://github.com/earendil-works/pi/issues).
+
+## Links
+
+- [Releases](https://github.com/FaqFirebase/pi-desktop/releases)
+- [Pi agent issues](https://github.com/earendil-works/pi/issues)