/* Hic Est - unbleached linen and eight wools: an embroidered strip of scenes with borders, trees and a selvedge label. */
:root {
  --bg: #f4efe3; --panel: #fffcf5; --ink: #2a2017; --muted: #6a5b49; --line: #ded2bc; --soft: #efe6d4;
  --accent: #8e3523; --accent-ink: #ffffff; --link: #7a3a12; --heading: #5b2f17;
  --linen: #eadfc7; --linen-2: #e2d5b8; --band: #e0d0ae; --band-edge: #8a6d48; --thread: #4a3624;
  --w-red: #b4462f; --w-ochre: #c9962f; --w-sage: #6f8a4f; --w-slate: #4f6a86; --w-umber: #6b4a2e; --w-linen: #f3ead6;
  --t-A: #b4462f; --t-B: #4f6a86; --t-C: #6f8a4f; --t-X: #8a7356;
  --chip-on: #f3dcd3; --cap: #3a2a1b; --sel-bg: rgba(142, 53, 35, .10); --sel-edge: #8e3523; --fray: #b4462f;
  --commissioned-bg: #f6e6c8; --commissioned-ink: #6f4708; --contested-bg: #f8ddd5; --contested-ink: #8a2a17; --chronicle-bg: #dfecd5; --chronicle-ink: #2f5a1e;
  --warn-bg: #fbe5df; --warn-ink: #8a2416; --info-bg: #ebeff2; --info-ink: #33495b; --note-bg: #f8efd6;
  --shadow: 0 1px 2px rgba(42,32,23,.06), 0 6px 18px rgba(42,32,23,.07);
}
:root[data-theme="dark"] {
  --bg: #16120d; --panel: #211b14; --ink: #f0e7d8; --muted: #bcab94; --line: #3b3126; --soft: #2a2219;
  --accent: #e3906f; --accent-ink: #2a1208; --link: #f0b48a; --heading: #f1c7a2;
  --linen: #d8cbae; --linen-2: #cdbf9f; --band: #c9b791; --band-edge: #6f5638; --thread: #3e2c1c;
  --w-red: #a8412b; --w-ochre: #b98a28; --w-sage: #627c45; --w-slate: #46617d; --w-umber: #5f4128; --w-linen: #ede2c8;
  --t-A: #e07a5f; --t-B: #8eaed0; --t-C: #a3c27f; --t-X: #c2ab8c;
  --chip-on: #4a2418; --cap: #33251a; --sel-bg: rgba(142, 53, 35, .16); --sel-edge: #8e3523; --fray: #a8412b;
  --commissioned-bg: #47340f; --commissioned-ink: #ffdf9e; --contested-bg: #4d1f15; --contested-ink: #ffc6b6; --chronicle-bg: #223a17; --chronicle-ink: #c8ecb0;
  --warn-bg: #4b1e16; --warn-ink: #ffcabd; --info-bg: #1d2a35; --info-ink: #c9dcec; --note-bg: #3a3020;
  --shadow: 0 1px 2px rgba(0,0,0,.35), 0 6px 18px rgba(0,0,0,.3);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.55 "Avenir Next", "Segoe UI", system-ui, -apple-system, sans-serif; overflow-x: hidden; }
a { color: var(--link); }
.hidden { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.small { font-size: .88rem; } .muted { color: var(--muted); } .mono { font-family: ui-monospace, Menlo, Consolas, monospace; }
.bar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: .6rem; padding: .55rem 1rem; background: var(--panel); border-bottom: 1px solid var(--line); }
.back { text-decoration: none; color: var(--muted); font-size: .9rem; white-space: nowrap; }
.brand { display: flex; align-items: center; gap: .45rem; flex: 1; min-width: 0; }
.brand strong { font-family: "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif; font-size: 1.12rem; letter-spacing: .04em; white-space: nowrap; }
.logo { width: 28px; height: 28px; flex: none; }
.lg-linen { fill: var(--linen); stroke: var(--band-edge); stroke-width: 1; }
.lg-band { fill: none; stroke: var(--band-edge); stroke-width: .8; }
.lg-bar { fill: none; stroke: var(--w-red); stroke-width: 1; }
.lg-head { fill: var(--w-linen); stroke: var(--thread); stroke-width: .7; }
.lg-fig { fill: var(--w-slate); stroke: var(--thread); stroke-width: .6; }
.lg-tree { fill: none; stroke: var(--w-sage); stroke-width: 1.1; }
.lg-sun { fill: var(--w-ochre); }
.session { display: flex; gap: .4rem; align-items: center; flex-wrap: nowrap; }
.pill { display: inline-flex; align-items: center; justify-content: center; gap: .3rem; border: 1px solid var(--line); background: var(--panel); color: var(--ink); border-radius: 999px; padding: .38rem .9rem; font: inherit; font-size: .88rem; cursor: pointer; text-decoration: none; white-space: nowrap; }
.pill:hover:not(:disabled) { border-color: var(--accent); }
.pill.solid { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.pill.solid:hover:not(:disabled) { filter: brightness(1.07); border-color: var(--accent); color: var(--accent-ink); }
.pill.ghost { background: transparent; cursor: default; }
.pill.big { font-size: 1rem; padding: .6rem 1.3rem; }
.pill.tiny { font-size: .8rem; padding: .22rem .7rem; }
.pill:disabled { opacity: .5; cursor: not-allowed; }
main { max-width: 1100px; margin: 0 auto; padding: 1rem 1rem 2rem; }
.hero { padding: 1.4rem 0 .6rem; }
.kicker { margin: 0 0 .9rem; padding: .55rem .85rem; border-left: 4px solid var(--w-ochre); background: var(--panel); border-radius: 0 10px 10px 0; font-size: .9rem; color: var(--muted); }
h1, h2, h3, h4 { font-family: "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif; color: var(--heading); }
h1 { margin: 0 0 .5rem; font-size: clamp(2.1rem, 6.5vw, 3.3rem); line-height: 1.05; letter-spacing: .03em; }
.h1b { display: block; font-size: .44em; letter-spacing: 0; color: var(--ink); margin-top: .45rem; line-height: 1.3; font-style: italic; }
.lede { max-width: 46rem; margin: 0 0 .9rem; }
.samples { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.chip { border: 1px dashed var(--band-edge); background: var(--panel); color: var(--ink); border-radius: 999px; padding: .3rem .8rem; font: inherit; font-size: .86rem; cursor: pointer; }
.chip.on { border-style: solid; border-color: var(--accent); background: var(--chip-on); font-weight: 600; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 1rem 1.1rem 1.1rem; margin: 1rem 0; box-shadow: var(--shadow); }
.ph { display: flex; align-items: center; gap: .55rem; margin: 0 0 .6rem; font-size: 1.3rem; line-height: 1.2; }
.step-no { display: inline-flex; width: 1.7rem; height: 1.7rem; border-radius: 50%; align-items: center; justify-content: center; background: var(--w-red); color: #fff; font-size: .95rem; font-family: "Avenir Next", system-ui, sans-serif; flex: none; }
.lbl { display: block; font-size: .85rem; font-weight: 600; margin: 0 0 .25rem; color: var(--muted); }
textarea, input[type="text"] { width: 100%; font: inherit; font-size: .95rem; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: .6rem .7rem; }
textarea { resize: vertical; min-height: 7rem; line-height: 1.5; }
textarea:focus, input:focus, select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
textarea.drag { outline: 2px dashed var(--accent); }
.note { background: var(--note-bg); border-radius: 8px; padding: .45rem .65rem; }
.cardrow { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin: .6rem 0 0; }
/* --- The accounts --- */
.accounts { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.account { border: 1px solid var(--line); border-top: 4px solid var(--t-A); border-radius: 10px; padding: .6rem .7rem .7rem; background: var(--panel); }
.account.t-B { border-top-color: var(--t-B); } .account.t-C { border-top-color: var(--t-C); }
.acc-head { display: flex; align-items: center; gap: .45rem; margin-bottom: .45rem; }
.acc-head .lbl { margin: 0; white-space: nowrap; }
.acc-head input { flex: 1; min-width: 0; padding: .35rem .55rem; }
.teller-dot { width: .8rem; height: .8rem; border-radius: 50%; flex: none; background: var(--t-A); }
.teller-dot.t-B { background: var(--t-B); } .teller-dot.t-C { background: var(--t-C); }
/* --- The linen --- */
.verdict-row { display: flex; gap: .7rem; align-items: center; flex-wrap: wrap; margin-bottom: .6rem; }
.verdict-row p { margin: 0; flex: 1 1 16rem; }
.badge { display: inline-block; border-radius: 6px; padding: .22rem .65rem; font-size: .82rem; font-weight: 700; letter-spacing: .02em; background: var(--soft); color: var(--ink); border: 1px solid var(--line); white-space: nowrap; }
.badge.v-commissioned { background: var(--commissioned-bg); color: var(--commissioned-ink); border-color: transparent; }
.badge.v-contested { background: var(--contested-bg); color: var(--contested-ink); border-color: transparent; }
.badge.v-chronicle { background: var(--chronicle-bg); color: var(--chronicle-ink); border-color: transparent; }
.loom-host { overflow-x: auto; overflow-y: hidden; border-radius: 10px; border: 1px solid var(--band-edge); background: var(--linen); -webkit-overflow-scrolling: touch; }
.loom-host:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
.loom { display: block; height: 270px; width: auto; max-width: none; }
.scroll-hint { margin: .35rem 0 0; }
.linen { fill: var(--linen); }
.band { fill: var(--band); }
.band-edge { stroke: var(--band-edge); stroke-width: 1.6; fill: none; }
.couch { stroke: var(--w-red); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 4 2; fill: none; }
.beast { stroke: var(--w-slate); stroke-width: 2.6; fill: none; stroke-linecap: round; stroke-dasharray: 5 2; }
.knot { fill: var(--w-ochre); stroke: var(--thread); stroke-width: 1.2; stroke-dasharray: 3 2; }
.knot-n { font: 700 11px "Avenir Next", system-ui, sans-serif; fill: var(--thread); }
.hem { stroke: var(--band-edge); stroke-width: 2; stroke-dasharray: 6 4; fill: none; }
.bay { cursor: pointer; }
.bay-bg { fill: transparent; stroke: transparent; stroke-width: 2; }
.bay:hover .bay-bg { fill: rgba(255,255,255,.18); }
.bay.on .bay-bg { fill: var(--sel-bg); stroke: var(--sel-edge); stroke-dasharray: 6 3; }
.bay:focus { outline: none; } .bay:focus .bay-bg { stroke: var(--sel-edge); }
.fray { fill: none; stroke: var(--fray); stroke-width: 2; stroke-dasharray: 2 5; }
.fray-q { font: 700 18px Georgia, serif; fill: var(--fray); }
.bay-no { font: italic 11px Georgia, serif; fill: var(--band-edge); }
.cap { font: 600 12.5px "Palatino Linotype", Palatino, Georgia, serif; letter-spacing: 1.4px; fill: var(--cap); }
.st { stroke: var(--thread); stroke-width: 1.4; stroke-dasharray: 4 1.6; stroke-linejoin: round; }
.st-line { stroke: var(--thread); stroke-width: 2.4; stroke-dasharray: 4 1.6; stroke-linecap: round; fill: none; }
.st-line.thick { stroke-width: 3.4; }
.w-red { fill: var(--w-red); } .w-ochre { fill: var(--w-ochre); } .w-sage { fill: var(--w-sage); } .w-slate { fill: var(--w-slate); } .w-umber { fill: var(--w-umber); } .w-linen { fill: var(--w-linen); }
.fig .tunic { fill: var(--w-umber); }
.fig.t-A .tunic { fill: var(--w-red); } .fig.t-B .tunic { fill: var(--w-slate); } .fig.t-C .tunic { fill: var(--w-sage); } .fig.t-X .tunic { fill: var(--w-ochre); }
.fig-name { font: 600 10.5px "Avenir Next", system-ui, sans-serif; fill: var(--cap); }
.trunk { stroke: var(--w-umber); stroke-width: 4; stroke-dasharray: 5 2; fill: none; stroke-linecap: round; }
.branch { stroke: var(--w-sage); stroke-width: 3.2; stroke-dasharray: 4 2; fill: none; stroke-linecap: round; }
.empty-t { font: 600 14px Georgia, serif; letter-spacing: 2px; fill: var(--band-edge); }
.lbl-cloth { fill: var(--w-linen); stroke: var(--band-edge); stroke-width: 1.4; }
.lbl-stitch { fill: none; stroke: var(--band-edge); stroke-width: 1; stroke-dasharray: 3 2; }
.lbl-text { font: 700 10.5px "Avenir Next", system-ui, sans-serif; letter-spacing: 1px; fill: var(--cap); }
.lbl-hic { font: italic 700 11px Georgia, serif; letter-spacing: 1px; fill: var(--w-red); }
.selvedge.v-commissioned .lbl-cloth { fill: #f3dfb4; } .selvedge.v-contested .lbl-cloth { fill: #f2cfc3; } .selvedge.v-chronicle .lbl-cloth { fill: #d6e6c8; }
.loom.rough .motif { opacity: .82; }
.linen-under { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: .9rem; margin-top: .7rem; }
.scene-card { border: 1px solid var(--line); border-left: 4px solid var(--w-ochre); border-radius: 10px; padding: .6rem .8rem; background: var(--bg); min-height: 6rem; }
.sc-head { display: flex; gap: .5rem; align-items: baseline; }
.sc-no { font: italic 600 1rem Georgia, serif; color: var(--muted); flex: none; }
.sc-cap { font-family: "Palatino Linotype", Palatino, Georgia, serif; text-transform: uppercase; letter-spacing: .06em; font-size: .95rem; overflow-wrap: anywhere; }
.sc-gloss { margin: .35rem 0; }
.sc-tags { display: flex; flex-wrap: wrap; gap: .35rem; margin: .3rem 0; }
.motif-tag, .teller-tag, .dispute-tag { display: inline-block; border-radius: 5px; padding: .1rem .5rem; font-size: .8rem; font-weight: 600; border: 1px solid var(--line); background: var(--panel); color: var(--ink); }
.teller-tag { border-left: 4px solid var(--t-A); } .teller-tag.t-B { border-left-color: var(--t-B); } .teller-tag.t-C { border-left-color: var(--t-C); }
.dispute-tag { background: var(--contested-bg); color: var(--contested-ink); border-color: transparent; }
.mini-h { margin: 0 0 .35rem; font-size: 1rem; }
.border-list { margin: 0; padding-left: 1.3rem; font-size: .9rem; }
.border-list li { margin: .2rem 0; }
.border-list li.none { list-style: none; margin-left: -1.3rem; color: var(--muted); }
/* --- Ask, progress --- */
.runrow { display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; margin-top: .6rem; }
.gate { margin: .6rem 0 0; background: var(--note-bg); border-radius: 8px; padding: .5rem .7rem; }
.gate .pill { margin-left: .3rem; }
.steps { list-style: none; padding: 0; margin: .4rem 0; display: grid; gap: .25rem; }
.step { color: var(--muted); font-size: .92rem; }
.step.active { color: var(--ink); font-weight: 600; } .step.done { color: var(--w-sage); }
.step-ic { display: inline-block; width: 1.1rem; font-family: ui-monospace, Menlo, monospace; }
.raw { white-space: pre-wrap; overflow-wrap: anywhere; background: var(--bg); border-radius: 8px; padding: .7rem; font-size: .82rem; max-height: 22rem; overflow: auto; }
/* --- Result --- */
.res-head { display: flex; gap: .7rem; align-items: center; flex-wrap: wrap; }
.res-head h2 { margin: 0; font-size: clamp(1.3rem, 4vw, 1.8rem); line-height: 1.2; overflow-wrap: anywhere; }
.reason { font-size: 1.02rem; margin: .5rem 0 .8rem; }
.result h3 { margin: 1.1rem 0 .45rem; font-size: 1.15rem; }
.result h4 { margin: 0 0 .25rem; font-size: 1rem; }
.disputes { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.disputes li.none { color: var(--muted); }
.dispute { border: 1px solid var(--line); border-radius: 10px; padding: .55rem .7rem; background: var(--bg); }
.dispute .pt { font-weight: 700; margin: 0 0 .4rem; }
.versions { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .5rem; }
.version { border-left: 4px solid var(--t-A); padding: .25rem .6rem; background: var(--panel); border-radius: 0 8px 8px 0; font-size: .92rem; }
.version.t-B { border-left-color: var(--t-B); } .version.t-C { border-left-color: var(--t-C); }
.version b { display: block; font-size: .82rem; color: var(--muted); }
.reading { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .7rem; margin: .4rem 0; }
.rcard { border: 1px solid var(--line); border-radius: 10px; padding: .6rem .75rem; background: var(--bg); }
.rcard.wide { margin: .7rem 0; }
.rcard p, .cause p, .question-box p { margin: 0; }
.none { color: var(--muted); font-style: italic; }
.sub-h { margin: .9rem 0 .4rem !important; }
.causes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.cause { padding: .6rem .75rem; background: var(--bg); position: relative; }
.cause + .cause { border-left: 1px dashed var(--band-edge); }
.cause b { display: block; font-size: .85rem; color: var(--muted); margin-bottom: .2rem; }
.cause.c-long { border-top: 4px solid var(--w-slate); } .cause.c-direct { border-top: 4px solid var(--w-ochre); } .cause.c-spark { border-top: 4px solid var(--w-red); }
.question-box { margin: .7rem 0; padding: .7rem .85rem; border-radius: 10px; border: 2px dashed var(--w-ochre); background: var(--panel); }
.scene-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .45rem; }
.srow { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); gap: .5rem; border: 1px solid var(--line); border-radius: 10px; padding: .45rem .6rem; background: var(--bg); cursor: pointer; }
.srow .rn { font: italic 600 1rem Georgia, serif; color: var(--muted); }
.srow .rc { font-family: "Palatino Linotype", Palatino, Georgia, serif; text-transform: uppercase; letter-spacing: .05em; font-size: .9rem; display: block; overflow-wrap: anywhere; }
.srow p { margin: .15rem 0; font-size: .9rem; }
.recon { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.recon li { border-radius: 8px; padding: .4rem .6rem; font-size: .9rem; }
.recon li.warn { background: var(--warn-bg); color: var(--warn-ink); }
.recon li.info { background: var(--info-bg); color: var(--info-ink); }
.recon li.none { background: var(--soft); color: var(--ink); font-style: normal; }
.exports { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .9rem; }
/* --- Saved, motifs, about --- */
.saved { list-style: none; margin: .7rem 0 0; padding: 0; display: grid; gap: .45rem; }
.saved li.none { color: var(--muted); }
.hrow { display: flex; gap: .6rem; align-items: center; border: 1px solid var(--line); border-radius: 10px; padding: .45rem .6rem; background: var(--bg); }
.hinfo { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.hinfo b { overflow-wrap: anywhere; }
.hbtns { display: flex; gap: .3rem; flex: none; }
.mini { width: 48px; height: 24px; flex: none; }
.mini-l { fill: var(--linen); stroke: var(--band-edge); stroke-width: 1; }
.mini-b { stroke: var(--w-red); stroke-width: 1; stroke-dasharray: 2 1.5; fill: none; }
.mini-tag { fill: var(--w-linen); stroke: var(--band-edge); stroke-width: .8; }
.mini.v-commissioned .mini-tag { fill: var(--w-ochre); } .mini.v-contested .mini-tag { fill: var(--w-red); } .mini.v-chronicle .mini-tag { fill: var(--w-sage); }
.motifs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .6rem; }
.motif-tile { border: 1px solid var(--line); border-radius: 10px; background: var(--linen); padding: .4rem .5rem .5rem; text-align: center; }
.motif-tile svg { width: 100%; height: 76px; display: block; }
.motif-tile b { display: block; color: #3a2a1b; font-family: "Palatino Linotype", Palatino, Georgia, serif; }
.motif-tile span { display: block; font-size: .8rem; color: #5a4a37; line-height: 1.35; }
.foot { max-width: 1100px; margin: 0 auto; padding: 0 1rem 2.5rem; color: var(--muted); font-size: .88rem; }
.toasts { position: fixed; right: 1rem; bottom: 1rem; display: grid; gap: .4rem; z-index: 30; max-width: min(24rem, calc(100vw - 2rem)); }
.toast { background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--w-sage); border-radius: 8px; padding: .55rem .75rem; font-size: .9rem; box-shadow: var(--shadow); transition: opacity .5s; }
.toast.err { border-left-color: var(--w-red); }
.toast.gone { opacity: 0; }
@media (max-width: 760px) {
  .linen-under { grid-template-columns: 1fr; }
  .causes { grid-template-columns: 1fr; }
  .cause + .cause { border-left: 0; border-top: 1px dashed var(--band-edge); }
  .cause.c-direct, .cause.c-spark { border-top-width: 4px; border-top-style: solid; }
  .loom { height: 224px; }
}
@media (max-width: 520px) {
  .bar { padding: .5rem .75rem; gap: .4rem; }
  .back-t { display: none; }
  .brand strong { font-size: 1rem; }
  .session .pill { padding: .32rem .6rem; font-size: .82rem; }
  main { padding: .6rem .75rem 2rem; }
  .panel { padding: .85rem .8rem .9rem; }
  .ph { font-size: 1.15rem; }
}