/* Siegecraft. A night-time realm under siege: mossy stone walls, iron, brass, parchment, wax.
   No raster images: every texture is a gradient or an inline SVG data URI. */
:root{
  /* night stone */
  --bg:#14161d; --stone:#23262e; --stone2:#2d313a; --line:#3a3f4b; --line2:#4a505e;
  --fg:#ecdfc2; --muted:#bdb299; --dim:#8c846f;
  /* brass and wax */
  --gold:#e0bb5e; --gold-d:#a8802c; --gold-dd:#6f5318; --gold-bg:#2a2414;
  --wax:#8e2a20; --wax2:#5e1912; --wax-hi:#a33a2f;
  --accent:var(--gold); --accent-dim:var(--gold-d); --accent-bg:var(--gold-bg);
  /* parchment and its ink */
  --parch:#f1e4c3; --parch2:#e7d4a8; --parch3:#fbf4df; --pink:#2b1f0f; --pink2:#5f4b2c; --pline:#b49a66; --burn:rgba(96,48,12,.42);
  --red:#8f2a1e; --red-bg:#f3d2c6; --green:#35632a; --green-bg:#d9e6c6; --blue:#2c527f; --blue-bg:#d6e0ea;
  /* status pennants: the same colours as the map flags */
  --s-wait:#9a9a9a; --s-work:#e08a1e; --s-done:#5f9a4e; --s-ink:#1b1408;
  /* map: Clay materials (names unchanged, used by map.js) */
  --map-bg:#6fbfe0; --map-bg2:#4f9fc9; --ink:#3a2a14; --ink2:#7a6240; --wall:#f1e8d8; --wall2:#c7b9a4; --roof:#d9634a; --tree:#5fae52; --tree2:#3f8a3c; --road:#f4e6bd;
  --display:"Cinzel","Trajan Pro","Palatino Linotype",Palatino,Georgia,serif;
  --font:"Crimson Pro","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --map-font:"Crimson Pro",Georgia,"Times New Roman",serif;
  /* mossy stone brick: two offset courses, dark mortar, dull moss creeping from the joints */
  --bricks:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='80' viewBox='0 0 160 80'%3E%3Crect width='160' height='80' fill='%23111318'/%3E%3Cg stroke='%23090a0d' stroke-width='1'%3E%3Crect x='1.5' y='1.5' width='77' height='37' rx='3' fill='%232b2f38'/%3E%3Crect x='81.5' y='1.5' width='77' height='37' rx='3' fill='%23262a32'/%3E%3Crect x='-38.5' y='41.5' width='77' height='37' rx='3' fill='%23292c34'/%3E%3Crect x='41.5' y='41.5' width='77' height='37' rx='3' fill='%23303440'/%3E%3Crect x='121.5' y='41.5' width='77' height='37' rx='3' fill='%23292c34'/%3E%3C/g%3E%3Cg fill='%23ffffff' opacity='.035'%3E%3Crect x='4' y='4' width='70' height='4' rx='2'/%3E%3Crect x='44' y='44' width='70' height='4' rx='2'/%3E%3C/g%3E%3Cg fill='%233d5230' opacity='.75'%3E%3Cellipse cx='79' cy='38' rx='12' ry='5'/%3E%3Cellipse cx='70' cy='41' rx='7' ry='3'/%3E%3Cellipse cx='40' cy='79' rx='14' ry='4'/%3E%3Cellipse cx='121' cy='60' rx='3' ry='9'/%3E%3C/g%3E%3Cg fill='%23566b3a' opacity='.6'%3E%3Ccircle cx='84' cy='36' r='3'/%3E%3Ccircle cx='35' cy='77' r='3.5'/%3E%3Ccircle cx='47' cy='78' r='2'/%3E%3Ccircle cx='120' cy='55' r='2.2'/%3E%3Ccircle cx='3' cy='20' r='2'/%3E%3C/g%3E%3C/svg%3E");
  --ivy:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='140' viewBox='0 0 22 140'%3E%3Cpath d='M12 0 C4 20 18 35 10 55 S16 95 9 110 S14 130 12 140' fill='none' stroke='%233b4f2a' stroke-width='2'/%3E%3Cg fill='%234f6b35'%3E%3Cpath d='M10 18 q-9 -4 -8 4 q5 3 8 -4z'/%3E%3Cpath d='M14 40 q9 -5 8 4 q-5 3 -8 -4z'/%3E%3Cpath d='M11 70 q-9 -3 -8 5 q5 2 8 -5z'/%3E%3Cpath d='M13 98 q9 -4 7 5 q-5 2 -7 -5z'/%3E%3Cpath d='M10 124 q-8 -4 -8 4 q5 3 8 -4z'/%3E%3C/g%3E%3Cg fill='%23324426'%3E%3Ccircle cx='15' cy='58' r='2'/%3E%3Ccircle cx='8' cy='86' r='1.6'/%3E%3C/g%3E%3C/svg%3E");
  --chain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='12' viewBox='0 0 28 12'%3E%3Crect x='1.5' y='2.5' width='15' height='7' rx='3.5' fill='none' stroke='%237d828c' stroke-width='2'/%3E%3Cline x1='15' y1='6' x2='27' y2='6' stroke='%235a5f68' stroke-width='3' stroke-linecap='round'/%3E%3Crect x='1.5' y='2.5' width='15' height='7' rx='3.5' fill='none' stroke='%23c8ccd3' stroke-width='.6' opacity='.5'/%3E%3C/svg%3E");
  --horn:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 10.5 L5 10.5 C10 10 15 7 19 3 L21 3 L21 21 L19 21 C15 17 10 14 5 13.5 L2 13.5 Z M5 13.5 L7 19 L9.5 19 L8.3 14' fill='black'/%3E%3C/svg%3E");
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;color:var(--fg);font-family:var(--font);font-size:16px;line-height:1.45;display:flex;flex-direction:column;height:100vh;height:100dvh;overflow:hidden;
  background-color:var(--bg);
  background-image:
    radial-gradient(ellipse 38% 34% at 0% 0%,rgba(255,150,50,.16),transparent 70%),
    radial-gradient(ellipse 38% 34% at 100% 0%,rgba(255,150,50,.14),transparent 70%),
    radial-gradient(ellipse 120% 90% at 50% 45%,transparent 45%,rgba(0,0,0,.6) 100%),
    var(--bricks);
  background-size:auto,auto,auto,160px 80px}
h1,h2,h3{font-family:var(--display);font-weight:600;letter-spacing:.03em}
button{font-family:inherit;font-size:inherit;cursor:pointer}
button:disabled{cursor:not-allowed;opacity:.55}
button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
textarea,input,select{font-family:inherit;font-size:inherit;color:var(--pink);background:var(--parch3);border:1px solid var(--pline);border-radius:4px;padding:.45em .6em;min-height:40px;max-width:100%;box-shadow:inset 0 1px 3px rgba(80,50,10,.18);color-scheme:light}
input::placeholder,textarea::placeholder{color:#7d6a4a;font-style:italic}
input,textarea{width:100%}
textarea{min-height:4.2em;resize:vertical;line-height:1.4}
input.unsaved,textarea.unsaved,select.unsaved{border-color:var(--gold-d);box-shadow:0 0 0 1px var(--gold-d)}
input.failed,textarea.failed,select.failed{border-color:var(--red);box-shadow:0 0 0 1px var(--red)}
.wrap{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}

/* header: an iron gatehouse lintel with a chain hung beneath */
.top{position:relative;flex:0 0 auto;padding-top:env(safe-area-inset-top,0px);margin-bottom:12px;z-index:3;
  background:linear-gradient(#262a33,#1a1d24);border-bottom:2px solid #0b0c10;box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 4px 14px rgba(0,0,0,.5)}
.top::after{content:"";position:absolute;left:0;right:0;bottom:-12px;height:12px;background:var(--chain) 0 0/28px 12px repeat-x;pointer-events:none;filter:drop-shadow(0 2px 2px rgba(0,0,0,.6))}
.top .wrap{display:flex;align-items:center;gap:.4em .8em;padding-block:.45em;flex-wrap:wrap}
.brand{display:flex;flex-direction:column;line-height:1.1}
.brand b{font-family:var(--display);color:var(--gold);font-weight:700;font-size:1.12em;letter-spacing:.06em;text-shadow:0 1px 0 #000,0 0 12px rgba(224,187,94,.25)}
.brand small{font-family:var(--font);font-style:italic;color:var(--muted);font-size:.86em;letter-spacing:.04em}
.devline{color:var(--muted);font-style:italic;font-size:.92em}
.status{font-size:.88em;color:#ff9a8a;font-weight:600}
.spacer{flex:1}

/* buttons: brass-bound parchment; the primary one is a wax seal */
.btn{min-height:40px;min-width:40px;padding:.3em .85em;border-radius:5px;border:1px solid var(--gold-d);background:linear-gradient(#f6ebce,#e2cd9c);color:var(--pink);font-size:.95em;font-weight:600;box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 1px 2px rgba(0,0,0,.35)}
.btn:hover:not(:disabled){border-color:var(--gold-dd);background:linear-gradient(#fbf2da,#e8d5a6)}
.btn.o{border:2px solid var(--wax2);border-radius:999px;color:#fbe9c4;padding:.3em 1.05em;font-family:var(--display);font-size:.88em;letter-spacing:.05em;text-shadow:0 1px 0 rgba(0,0,0,.5);
  background:radial-gradient(circle at 35% 30%,var(--wax-hi),var(--wax) 55%,var(--wax2));
  box-shadow:inset 0 0 0 3px rgba(255,220,180,.16),inset 0 -2px 4px rgba(0,0,0,.35),0 2px 3px rgba(0,0,0,.4)}
.btn.o:hover:not(:disabled){background:radial-gradient(circle at 35% 30%,#ad4034,#9a3025 55%,var(--wax2))}
.btn.sm{font-size:.86em;padding:.2em .65em}
.btn.danger{border-color:var(--red);color:var(--red);background:linear-gradient(#fbefe6,#efd6c6)}
.btn.horn::before{content:"";display:inline-block;width:1.15em;height:1.15em;margin-right:.4em;vertical-align:-.18em;background:currentColor;-webkit-mask:var(--horn) center/contain no-repeat;mask:var(--horn) center/contain no-repeat}
.linkbtn{background:none;border:none;color:var(--wax);padding:.5em 0;min-height:40px;text-align:left;font-size:.95em;font-weight:600;text-decoration:underline;text-decoration-color:rgba(142,42,32,.4);text-underline-offset:3px}

/* tags: inked stamps on parchment */
.tag{padding:.05em .45em;border-radius:3px;font-size:.78em;border:1px solid var(--pline);color:var(--pink2);background:var(--parch3);white-space:nowrap;font-family:var(--font)}
.tag.low{background:var(--red-bg);color:var(--red);border-color:#d8a998}
.tag.high{background:var(--green-bg);color:var(--green);border-color:#a9c194}
.tag.f{background:#f0dfa8;color:#5d430c;border-color:var(--gold-d)}
.tag.box{color:var(--blue);border-color:#8aa3c0;background:var(--blue-bg)}
.tag.ok{color:var(--green);border-color:var(--green)}
.tag.u-decon{color:var(--blue);border-color:var(--blue)} .tag.u-recon{color:var(--green);border-color:var(--green)} .tag.u-thought{color:#6a4a0c;border-color:var(--gold-d)}
.row{display:flex;gap:.5em;align-items:center;flex-wrap:wrap}
.mute{color:var(--pink2)} .small{font-size:.86em} .mono{font-family:var(--mono)}

/* layout: dispatches | map | the fortress scroll */
.realm{flex:1;min-height:0;display:grid;grid-template-columns:minmax(250px,310px) minmax(0,1fr) minmax(310px,410px);grid-template-rows:minmax(0,1fr);gap:0}
/* the dispatch column: a dark recess in the wall, ivy creeping down its edge */
.inboxcol{min-width:0;overflow-y:auto;position:relative;background:linear-gradient(rgba(14,16,21,.78),rgba(14,16,21,.86)),transparent;border-right:2px solid #0b0c10;
  background-image:var(--ivy),linear-gradient(rgba(14,16,21,.74),rgba(14,16,21,.84));background-repeat:repeat-y,no-repeat;background-position:right 2px top,0 0;background-size:22px 140px,auto;background-attachment:local,scroll;padding-right:14px}
.mapwrap{padding:.7em;min-width:0;display:flex;flex-direction:column;min-height:0}
.mapframe{background:var(--map-bg);border:6px double var(--gold-d);border-radius:4px;position:relative;overflow:hidden;flex:1;min-height:340px;box-shadow:0 0 0 2px #0b0c10,0 0 0 5px #3a3020,0 10px 30px rgba(0,0,0,.6),inset 0 0 40px rgba(20,40,70,.35)}
.mapframe #map-terrain{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;transform-origin:0 0}
.mapframe svg{position:relative;background:transparent;display:block;width:100%;height:100%;font-family:var(--map-font);touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none}
.mapframe svg.dragging{cursor:grabbing}
.mapframe .fort{cursor:pointer}
.mapframe .fort:hover .castle{filter:brightness(1.06)}
.mapframe .fort.sel .ring{opacity:1}
.mapframe .ring{opacity:0;stroke:var(--wax);stroke-width:3;fill:none;stroke-dasharray:6 5}
.mapframe .flag{transform-box:fill-box;transform-origin:0 50%}
.mapframe .ov{position:absolute;font-family:var(--map-font);color:var(--ink);pointer-events:none}
/* title: a hanging banner with a swallowtail */
.mapframe .ov.title{left:14px;top:0;max-width:calc(100% - 180px);padding:.45em .9em 1.25em;color:#f6e7c3;text-align:center;
  background:linear-gradient(90deg,rgba(0,0,0,.18),transparent 20%,transparent 80%,rgba(0,0,0,.18)),linear-gradient(#9a3326,#6e2219);
  clip-path:polygon(0 0,100% 0,100% 100%,50% calc(100% - .8em),0 100%);
  filter:drop-shadow(0 3px 2px rgba(0,0,0,.4));border-top:4px solid var(--gold-d)}
.mapframe .ov.title b{font-family:var(--display);font-size:1em;letter-spacing:.05em;display:block;color:#f6e7c3;text-shadow:0 1px 0 #000}
.mapframe .ov.title i{font-size:.86em;color:#f6e7c3}
/* zoom: brass buttons */
.mapframe .ov.tools{right:10px;top:8px;display:flex;gap:.35em;pointer-events:auto}
.mapframe .ov.tools button{font-family:var(--display);font-weight:700;color:#2a1c06;border:1.5px solid #5a420f;border-radius:6px;min-width:40px;min-height:40px;padding:.25em .6em;font-size:.9em;
  background:linear-gradient(#f3d888,#c99a3b 55%,#b08530);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 2px 3px rgba(0,0,0,.35);text-shadow:0 1px 0 rgba(255,240,200,.5)}
.mapframe .ov.tools button:active{background:linear-gradient(#c99a3b,#e9c86e)}
.mapframe .ov.hint{right:10px;bottom:8px;font-size:.84em;color:var(--ink);font-style:italic;background:rgba(233,221,192,.7);padding:0 .4em;border-radius:3px}
/* legend: a parchment strip */
.maplegend{display:flex;gap:.4em 1.1em;flex-wrap:wrap;font-family:var(--map-font);color:var(--pink);font-size:.95em;padding:.35em .9em;margin-top:.55em;align-self:flex-start;max-width:100%;
  background:linear-gradient(90deg,var(--parch2),var(--parch) 12%,var(--parch) 88%,var(--parch2));border-top:3px double var(--pline);border-bottom:3px double var(--pline);box-shadow:inset 0 0 10px var(--burn),0 2px 6px rgba(0,0,0,.4)}
.maplegend span{display:inline-flex;align-items:center;gap:.4em}
.maplegend i{width:1em;height:.8em;display:inline-block;border:1px solid var(--ink);clip-path:polygon(0 0,100% 0,72% 50%,100% 100%,0 100%)}
/* the drawer: one long parchment scroll held by an iron band with rivets */
.drawer{min-width:0;display:flex;flex-direction:column;min-height:0;color:var(--pink);border-left:8px solid #2a2d34;
  background:radial-gradient(circle at 4px 30px,#a2a7b0 0 1.6px,#3b3f47 2.2px,transparent 2.8px) 0 0/8px 60px repeat-y border-box,linear-gradient(90deg,#474b55,#25282e) 0 0/8px 100% no-repeat border-box,var(--parch);
  box-shadow:inset 0 0 28px var(--burn),-4px 0 14px rgba(0,0,0,.5)}
.drawer .only-narrow{display:none}
.drawer .dh{padding:.6em .9em .55em;border-bottom:3px double var(--pline);display:flex;align-items:center;gap:.4em;flex-wrap:wrap;flex:0 0 auto;background:linear-gradient(var(--parch2),var(--parch))}
.drawer .dh h2{margin:0;font-size:1.2em;flex:1;min-width:0;color:var(--pink)}
.drawer .dh .eyebrow{flex:0 0 100%;font-family:var(--display);font-size:.72em;letter-spacing:.18em;text-transform:uppercase;color:var(--wax);margin-bottom:-.2em}
.drawer .dh .fname{flex:1 1 10em;min-width:0;width:auto;font-family:var(--display);font-size:1.15em;font-weight:700;color:var(--pink);background:transparent;border-color:transparent;box-shadow:none}
.drawer .dh .fname:focus,.drawer .dh .fname.unsaved,.drawer .dh .fname.failed{background:var(--parch3);border-color:var(--pline)}
.drawer .db{padding:.9em .9em 2em;display:flex;flex-direction:column;gap:.85em;overflow-y:auto;min-height:0;flex:1}
.drawer .db.flush{padding:.4em 0 1em;gap:0}
.drawer .db h2{margin:0;font-size:1em;font-family:var(--mono);font-weight:500;display:flex;align-items:center;gap:.6em;flex-wrap:wrap;word-break:break-all}

/* dispatches: a stack of letters; the unopened ones a sealed pile */
.list-h{padding:.55em .9em;color:var(--gold);display:flex;align-items:center;gap:.5em;position:sticky;top:0;z-index:1;font-size:.9em;font-style:italic;
  background:linear-gradient(#3a2a1a,#2a1d12);border-bottom:2px solid var(--gold-dd);box-shadow:0 3px 8px rgba(0,0,0,.45)}
.list-h .lh-t{display:flex;flex-direction:column;line-height:1.15;font-style:normal}
.list-h .lh-t b{font-family:var(--display);font-size:1.02em;letter-spacing:.04em}
.list-h .lh-t small{color:var(--muted);font-style:italic;font-size:.95em}
.list-sub{margin:.8em .6em .35em;padding:.25em .9em .25em .7em;font-family:var(--display);font-size:.78em;letter-spacing:.12em;text-transform:uppercase;color:#f6e7c3;display:inline-block;
  background:linear-gradient(#4b5263,#353a47);clip-path:polygon(0 0,100% 0,calc(100% - .6em) 50%,100% 100%,0 100%);padding-right:1.4em}
.list-sub.unopened{background:linear-gradient(#9a3326,#6e2219)}
.li{position:relative;width:calc(100% - 1.2em);margin:.4em .6em;text-align:left;border:1px solid var(--pline);border-radius:2px;color:var(--pink);padding:.6em .85em;min-height:44px;cursor:pointer;display:flex;flex-direction:column;gap:.2em;
  background:linear-gradient(175deg,var(--parch3),var(--parch) 60%,var(--parch2));box-shadow:inset 0 0 12px var(--burn),0 2px 4px rgba(0,0,0,.4)}
.li:hover{background:linear-gradient(175deg,#fffaea,var(--parch3) 60%,var(--parch))}
.li.sel{border-color:var(--gold-d);box-shadow:inset 0 0 12px var(--burn),0 0 0 2px var(--gold),0 2px 8px rgba(224,187,94,.35);padding-left:.85em}
.pile .li{box-shadow:inset 0 0 12px var(--burn),3px 3px 0 -1px #d3bd8a,3px 3px 0 0 var(--pline),0 4px 6px rgba(0,0,0,.45);padding-right:2.4em}
.pile .li::after{content:"";position:absolute;right:.6em;top:50%;width:1.3em;height:1.3em;margin-top:-.65em;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,var(--wax-hi),var(--wax) 55%,var(--wax2));box-shadow:0 0 0 2px rgba(142,42,32,.25),inset 0 0 0 2px rgba(255,210,170,.2)}
.li-time{color:var(--pink2);font-size:.82em;display:flex;gap:.4em;align-items:center;flex-wrap:wrap}
.li-sum{font-size:1em}
.detail-empty{color:var(--muted);padding:3em 1em;text-align:center;font-style:italic}
.drawer .detail-empty{color:var(--pink2)}

/* drawer content: parchment cards with burnt edges and a double rule */
.block{position:relative;background:linear-gradient(170deg,var(--parch3),var(--parch) 70%);border:3px double var(--pline);border-radius:3px;padding:.75em .9em;display:flex;flex-direction:column;gap:.5em;min-width:0;box-shadow:inset 0 0 14px var(--burn),0 1px 3px rgba(60,40,10,.25)}
.block::before,.block::after{content:"";position:absolute;bottom:4px;width:8px;height:8px;background:var(--gold-d);transform:rotate(45deg);opacity:.7}
.block::before{left:4px}.block::after{right:4px}
/* banner-shaped section headers */
.block .ttl{align-self:flex-start;font-family:var(--display);font-size:.8em;letter-spacing:.1em;text-transform:uppercase;color:#f6e7c3;display:flex;align-items:center;gap:.5em;flex-wrap:wrap;
  margin:-.2em 0 .1em -1.35em;padding:.3em 1.6em .3em 1.2em;background:linear-gradient(#9a3326,#6e2219);clip-path:polygon(0 0,100% 0,calc(100% - .7em) 50%,100% 100%,0 100%,.45em 50%)}
.unit .ttl{font-family:var(--display);font-size:.95em;font-weight:700;letter-spacing:.05em;color:var(--pink);display:flex;flex-direction:column;gap:0}
.unit .ttl .eb,.ttl .eb{font-family:var(--font);font-style:italic;font-weight:600;font-size:.78em;letter-spacing:.03em;color:var(--wax);text-transform:none}
.block p{margin:0;white-space:pre-wrap;line-height:1.5;word-wrap:break-word}
.block .li{width:100%;margin:.25em 0}
.tags{display:flex;gap:.35em;flex-wrap:wrap}
audio{width:100%;max-width:100%;min-height:40px}
/* status pennants */
.st{min-height:40px;padding:.1em 1.4em .1em .75em;border:none;border-radius:0;font-size:.86em;font-weight:700;color:var(--s-ink);background:var(--s-wait);white-space:nowrap;font-family:var(--display);letter-spacing:.04em;
  clip-path:polygon(0 0,100% 0,calc(100% - .8em) 50%,100% 100%,0 100%);box-shadow:inset 3px 0 0 rgba(0,0,0,.35)}
button.st:hover{filter:brightness(1.08)}
button.st:focus-visible{outline:none;filter:brightness(1.15) drop-shadow(0 0 2px var(--gold))}
span.st{min-height:0;display:inline-block;padding:.05em 1.2em .05em .55em;font-size:.76em;margin-left:.3em;vertical-align:.1em}
.st.working{background:var(--s-work)} .st.soothed{background:var(--s-done)}
/* thoughts: scrolls with rolled ends */
.thought{border:1px solid var(--pline);border-radius:3px;overflow:hidden;position:relative;
  background:linear-gradient(90deg,#c9b07a,var(--parch2) 7px,var(--parch3) 16px,var(--parch3) calc(100% - 16px),var(--parch2) calc(100% - 7px),#c9b07a);box-shadow:inset 0 0 10px var(--burn),0 2px 3px rgba(60,40,10,.3)}
.thought > .th{width:100%;min-height:44px;text-align:left;background:none;border:none;color:var(--pink);padding:.6em 1.1em;display:flex;gap:.6em;align-items:flex-start;line-height:1.35;font-size:1em}
.thought > .th .q{color:var(--wax);font-family:var(--display);font-weight:700;flex:0 0 auto}
.thought > .th .txt{flex:1;min-width:0;font-style:italic}
.thought > .th .meta{display:flex;gap:.3em;flex:0 0 auto;flex-wrap:wrap}
.thought.open > .th{border-bottom:3px double var(--pline);background:rgba(201,176,122,.25)}
.thought .tb{padding:.8em 1.1em;display:flex;flex-direction:column;gap:.9em}
.unit{display:flex;flex-direction:column;gap:.4em}
.unit .q{font-size:.95em;color:var(--pink2);line-height:1.45;font-style:italic}
.note-li{font-size:.95em;border-left:3px solid var(--pline);padding-left:.6em;margin:.2em 0;display:flex;flex-direction:column;gap:.3em}
.note-li .nmeta{font-size:.9em;color:var(--pink2)}
.note-li select{font-size:.95em}
.note-li .why{font-size:.92em;color:var(--pink2);font-style:italic}
.note-li p{margin:0;white-space:pre-wrap}
.wins ul,.enjoy-ul{padding-left:1.1em;margin:.3em 0}
.wins li{font-size:.98em;margin:.25em 0}
.enjoy-ul{padding-left:0;list-style:none}
.enjoy-ul li{display:flex;gap:.5em;align-items:center;margin:.25em 0}
.enjoy-ul li::before{content:"\2766";color:var(--gold-d)}
.enjoy-ul li span{flex:1;min-width:0}

/* toasts: a herald's note */
.toasts{position:fixed;left:16px;right:16px;bottom:max(16px,env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;align-items:center;gap:.4em;z-index:50;pointer-events:none}
.toast{pointer-events:auto;display:flex;align-items:center;gap:.6em;max-width:560px;width:100%;background:linear-gradient(#262a33,#15171d);border:1px solid var(--gold-d);outline:1px solid #0b0c10;color:var(--fg);border-radius:6px;padding:.4em .5em .4em .9em;box-shadow:0 8px 24px rgba(0,0,0,.7),inset 0 0 0 2px rgba(224,187,94,.12);font-size:.98em}
.toast span{flex:1;min-width:0;word-wrap:break-word}

/* a slow flutter on the flags and a faint torch flicker; off for reduced motion */
@media (prefers-reduced-motion:no-preference){
  .mapframe .flag{animation:flutter 3.2s ease-in-out infinite}
  .brand b{animation:torch 5s ease-in-out infinite}
  @keyframes flutter{0%,100%{transform:skewY(0) scaleX(1)}50%{transform:skewY(-6deg) scaleX(.9)}}
  @keyframes torch{0%,100%{text-shadow:0 1px 0 #000,0 0 12px rgba(224,187,94,.25)}50%{text-shadow:0 1px 0 #000,0 0 18px rgba(255,170,70,.4)}}
}

/* ≤1100px: dispatches become a toggle in the drawer */
@media (max-width:1100px){
  .realm{grid-template-columns:minmax(0,1fr) minmax(300px,380px)}
  .inboxcol{display:none}
  .drawer .only-narrow{display:inline-flex;align-items:center}
}
/* ≤900px: one column, map on top, drawer below; the page scrolls */
@media (max-width:900px){
  body{height:auto;overflow:visible;overflow-x:hidden}
  .realm{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto}
  .mapwrap{padding:.6em 16px}
  .mapframe{flex:none;height:62vh}
  .drawer{border-left:none;border-top:8px solid #2a2d34;
    background:radial-gradient(circle at 30px 4px,#a2a7b0 0 1.6px,#3b3f47 2.2px,transparent 2.8px) 0 0/60px 8px repeat-x border-box,linear-gradient(#474b55,#25282e) 0 0/100% 8px no-repeat border-box,var(--parch);
    box-shadow:inset 0 0 28px var(--burn),0 -4px 14px rgba(0,0,0,.5)}
  .drawer .dh,.drawer .db{padding-left:16px;padding-right:16px}
  .drawer .db{overflow:visible}
  textarea,input,select{font-size:16px}
  .mapframe .ov.title{max-width:calc(100% - 165px);font-size:.88em;left:8px}
  .mapframe .ov.hint{display:none}
  .maplegend{font-size:.92em}
}

/* The Herald card */
.herald .hf{display:flex;flex-direction:column;gap:.25em;font-weight:600}
.herald .hf>span:first-child{font-size:.86em;color:var(--pink2)}
.herald select{width:100%}
.herald input[type=time]{flex:1;min-width:0}
.herald .tally{border-top:1px solid var(--pline);padding-top:.4em;color:var(--pink2)}

/* ---- Run 6: Siegecraft drawer actions, siege list, scribe, Herald chips + check-ins, enjoy details, source shouts ---- */
.factions{flex-wrap:wrap;gap:.4em;margin:.1em 0 .6em}
.star{color:var(--gold-d);font-weight:700}
.siegelist{margin-top:.35em}
.siegelist:empty{display:none}
.siegelist .sl-h{font-weight:700}
.siegelist .sl-i{flex-wrap:wrap;gap:.3em}
.siegelist .linkbtn{color:var(--pink)}
.siegelist i{color:var(--pink2)}
.sug{display:flex;flex-wrap:wrap;gap:.3em .6em;align-items:center;justify-content:space-between;font-size:.9em;padding:.35em .6em;margin:.15em 0 .6em;border:1px dashed var(--pline);background:var(--parch3);color:var(--pink)}
.sug>span:first-child{min-width:0;overflow-wrap:anywhere}
.sug .why{font-style:italic;color:var(--pink2)}
.sug .row{gap:.35em;flex-wrap:wrap}
.chips{display:flex;flex-wrap:wrap;gap:.3em}
.chip{min-width:2.8em;min-height:36px;padding:.2em .6em;border:1px solid var(--pline);background:var(--parch3);color:var(--pink2);border-radius:3px;font-weight:600}
.chip.on{background:var(--gold);color:var(--s-ink);border-color:var(--gold-d)}
.chips.unsaved .chip.on{outline:2px dashed var(--gold-d)}
.chips.failed .chip.on{outline:2px solid var(--red)}
.herald input[type=range]{width:100%;max-width:100%}
.herald .hf .row select{flex:1;min-width:0;width:auto}
.ci-h{font-family:var(--display);font-weight:600;margin:.8em 0 .3em;color:var(--pink)}
.ci-card{border:1px solid var(--pline);background:var(--parch3);padding:.4em .6em;margin:.35em 0;color:var(--pink)}
.ci-card p{margin:.3em 0 0}
.ci-pairs{list-style:none;padding:0;margin:.3em 0 0}
.ci-pairs li{display:flex;gap:.5em;align-items:center;margin:.2em 0}
.ci-pairs li>span{min-width:0;overflow-wrap:anywhere}
.face{flex:none}
.face circle:first-child{stroke:var(--s-ink);stroke-width:1.2}
.face.low circle:first-child{fill:#d9634a}
.face.neutral circle:first-child{fill:#e8c34a}
.face.high circle:first-child{fill:#6fae52}
.face.none circle:first-child{fill:#c9bfae}
.face .e{fill:var(--s-ink)}
.face .m{fill:none;stroke:var(--s-ink);stroke-width:1.6;stroke-linecap:round}
.enjoy-ul li.enj{flex-wrap:wrap}
.enj-t{flex:1;min-width:0;text-align:left}
.enj-d{flex-basis:100%}
.enj-d textarea{width:100%}
.shout{border-top:1px dashed var(--pline);padding-top:.4em;margin-top:.4em}