:root{
  --ink:#241f18; --ink2:#5c503d; --ink3:#8b7d64;
  --linen:#e7dfcd; --paper:#f6f1e4; --line:#c6b99d;
  --brass:#9a7b2f; --ok:#1f7a4d; --bad:#9a2e2e; --merge:#7a3fa8;
  --shadow:0 1px 0 rgba(255,255,255,.6), 0 2px 10px rgba(58,46,28,.16);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--linen); color:var(--ink);
  font:15px/1.45 "Iowan Old Style", Georgia, "Times New Roman", serif;
  -webkit-font-smoothing:antialiased;
  background-image:radial-gradient(circle at 18% 12%, rgba(255,255,255,.55), transparent 55%);
}
body.high-contrast{
  --ink:#000; --ink2:#111; --ink3:#222; --linen:#fff; --paper:#fff; --line:#000;
  --brass:#725500; --ok:#006b35; --bad:#a40000; --merge:#5f2389; --shadow:none;
  background:#fff; background-image:none;
}
.high-contrast .card,.high-contrast #plat,.high-contrast .sheet{border-width:2px}
.high-contrast button{border-color:#000 !important}
.high-contrast .chip{outline:2px solid #000; outline-offset:1px}
button{font:inherit; color:inherit; cursor:pointer}
/* visible focus, for keyboard_navigation */
button:focus-visible, select:focus-visible, .tick:focus-visible{
  outline:3px solid var(--brass); outline-offset:2px}
.minimap:focus-visible{outline:3px solid var(--brass); outline-offset:2px}
button:disabled{cursor:default; opacity:.42}
kbd{font:600 12px ui-monospace,Menlo,Consolas,monospace; background:#fff; border:1px solid var(--line);
  border-bottom-width:2px; border-radius:4px; padding:0 4px}

/* --------------------------------------------------------------- frame */
/* HOUSE LAYOUT: information on the left, the board in the middle, every
   control the player can press on the right. */
.app{
  height:100%; display:grid; gap:10px; padding:10px;
  grid-template-columns:312px minmax(0,1fr) 336px;
  grid-template-rows:auto minmax(0,1fr);
  grid-template-areas:"head head head" "info plat control";
}
.app:fullscreen,.app:-webkit-full-screen{width:100vw; height:100vh; padding:10px; background:var(--linen)}
.head{grid-area:head; display:flex; align-items:baseline; gap:14px; flex-wrap:wrap;
  border-bottom:2px solid var(--ink); padding:0 4px 6px}
.head h1{margin:0; font:700 25px/1 "Iowan Old Style",Georgia,serif; letter-spacing:.02em}
.head .ver{font:600 11px/1 ui-monospace,Menlo,Consolas,monospace; color:var(--ink3);
  border:1px solid var(--line); border-radius:4px; padding:2px 5px; align-self:center}
.head h1 span{color:var(--brass)}
.head .sub{color:var(--ink2); font-size:13px; font-style:italic}
.head .sp{margin-left:auto; display:flex; gap:6px}
.head button{background:var(--paper); border:1px solid var(--line); border-radius:5px; padding:5px 11px;
  box-shadow:var(--shadow); font-size:13px}
.head button:hover:not(:disabled){background:#fff}

#plat{grid-area:plat; position:relative; min-height:0; background:var(--paper);
  border:1px solid var(--line); border-radius:6px; box-shadow:var(--shadow); overflow:hidden}
#board{display:block; width:100%; height:100%; touch-action:none; cursor:crosshair}
#board.canpan{cursor:grab}
#board.panning{cursor:grabbing}

/* ---------------------------------------------------------------- rail */
.rail{min-height:0; overflow-y:auto; display:flex; flex-direction:column; gap:9px; padding-right:2px}
/* a flex column will shrink its children by default, and a card with
   overflow:hidden then CLIPS its own rows rather than overflowing visibly */
.rail>.card{flex:0 0 auto}
.rail.info{grid-area:info}
.rail.control{grid-area:control}
.card{background:var(--paper); border:1px solid var(--line); border-radius:6px; box-shadow:var(--shadow); padding:9px 11px; overflow:hidden}
.card h2{margin:0 0 6px; font:600 11px/1 sans-serif; letter-spacing:.14em; text-transform:uppercase; color:var(--ink3)}
.purseline{display:flex; align-items:baseline; justify-content:space-between; gap:8px}
.purseline b{font:700 25px/1.1 Georgia,serif}
.purseline small{color:var(--ink2); font-size:12px; font-style:italic; text-align:right}
.portfolio{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; margin-top:9px;
  padding-top:7px; border-top:1px dotted var(--line)}
.portfolio span{display:flex; flex-direction:column; gap:1px; color:var(--ink3); font:600 9px/1.2 sans-serif;
  letter-spacing:.06em; text-transform:uppercase; min-width:0}
.portfolio b{color:var(--ink); font:700 12px/1.25 Georgia,serif; letter-spacing:0; text-transform:none;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.portfolio b.ahead{color:var(--ok)}
.portfolio b.behind{color:var(--bad)}
.savestate{margin:7px 0 0; padding-top:6px; border-top:1px dotted var(--line); color:var(--ink3);
  font:600 10px/1.25 ui-monospace,Menlo,Consolas,monospace}
.savestate.ok{color:var(--ok)}
.savestate.bad{color:var(--bad)}
.recordgrid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px}
.recordgrid span{display:flex; flex-direction:column; min-width:0; padding:5px 6px; border-radius:4px;
  background:rgba(154,123,47,.08); color:var(--ink3); font:600 9px/1.2 sans-serif;
  letter-spacing:.06em; text-transform:uppercase}
.recordgrid b{margin-top:2px; color:var(--ink); font:700 14px/1.2 Georgia,serif; letter-spacing:0;
  text-transform:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.recordgrid .best{grid-column:span 2}
.recordlast{margin:6px 1px 0; color:var(--ink2); font-size:10px; font-style:italic}
.recordempty{margin:1px 0; color:var(--ink3); font-size:12px; font-style:italic}
.high-contrast .recordgrid span{border:1px solid #000; background:#fff}
.shortlisthead{display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin-bottom:7px}
.shortlisthead h2{margin:0}
.shortlisthead>span{padding:2px 5px; border:1px solid var(--line); border-radius:999px; color:var(--ink3);
  font:700 9px/1 sans-serif; letter-spacing:.06em; text-transform:uppercase; white-space:nowrap}
.shortlisthead>span.clear{border-color:var(--ok); color:var(--ok)}
.shortlisthead>span.close{border-color:var(--merge); color:var(--merge)}
.shortlistempty{margin:1px 0; color:var(--ink3); font-size:12px; font-style:italic}
.shortlistrows{display:flex; flex-direction:column; gap:5px}
.shortrow{position:relative; display:grid; grid-template-columns:25px 42px minmax(0,1fr); gap:1px 6px;
  overflow:hidden; padding:6px 7px; border:1px solid var(--line); border-radius:5px; background:rgba(255,255,255,.28)}
.shortrow::after{content:""; position:absolute; left:0; bottom:0; width:var(--edge); height:3px; background:var(--tint,#625a4d)}
.shortrow .rank{grid-row:1/span 2; align-self:center; color:var(--ink3); font:700 14px/1 ui-monospace,Menlo,Consolas,monospace}
.shortrow .lot{font:800 13px/1.25 ui-monospace,Menlo,Consolas,monospace}
.shortrow .effect{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:700; font-size:11px}
.shortrow .detail{grid-column:2/-1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  color:var(--ink3); font-size:10px}
.shortlistfoot{margin:6px 1px 0; color:var(--ink3); font-size:10px; font-style:italic}
.high-contrast .shortrow{border-color:#000; background:#fff}.high-contrast .shortrow::after{background:#000}

.viewhead{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:7px}
.viewhead h2{margin:0}
.viewhead output{font:700 12px/1 ui-monospace,Menlo,Consolas,monospace; color:var(--brass)}
.viewbuttons{display:grid; grid-template-columns:42px minmax(76px,1fr) 42px; gap:6px}
.viewbuttons button{height:31px; border:1px solid var(--line); border-radius:5px; background:#fffdf7;
  box-shadow:var(--shadow); font:700 15px/1 sans-serif}
.viewbuttons button:hover:not(:disabled){background:#fff}
.minimap{display:block; width:100%; height:112px; margin-top:7px; border:1px solid var(--line);
  border-radius:5px; background:#efe7d6; cursor:crosshair; touch-action:none}
.minimap.panning{cursor:grabbing}
.high-contrast .minimap{border-width:2px; background:#fff}
.viewcard p{margin:6px 0 0; color:var(--ink3); font-size:11px; font-style:italic}
.contrastbtn{width:100%; margin-top:7px; padding:6px 8px; border:1px solid var(--line); border-radius:5px;
  background:#fffdf7; font-size:11px; font-weight:700}
.contrastbtn[aria-pressed="true"]{background:#000; color:#fff}
.fullscreenbtn{width:100%; margin-top:6px; padding:6px 8px; border:1px solid var(--line); border-radius:5px;
  background:#fffdf7; font-size:11px; font-weight:700}
.fullscreenbtn[aria-pressed="true"]{background:var(--ink); color:var(--paper)}
.overlayhead{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:7px}
.overlayhead h2{margin:0}
.overlayhead kbd{font-size:9px; color:var(--ink3)}
.overlaybuttons{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px}
.overlaybuttons button{min-width:0; padding:6px 4px; border:1px solid var(--line); border-radius:5px;
  background:#fffdf7; font:700 11px/1.1 sans-serif}
.overlaybuttons button[aria-pressed="true"]{background:var(--ink); color:var(--paper); border-color:var(--ink)}
.overlaycard>p{margin:7px 0; color:var(--ink2); font-size:11px; line-height:1.35}
.overlaylegend{display:flex; flex-wrap:wrap; gap:5px 9px; padding-top:6px; border-top:1px dotted var(--line)}
.overlaylegend span{display:inline-flex; align-items:center; gap:3px; color:var(--ink3); font:600 9px/1 sans-serif}
.overlaylegend i{display:inline-grid; place-items:center; width:16px; height:16px; border:2px solid currentColor;
  border-radius:50%; background:#fff; font:800 9px/1 ui-monospace,Menlo,Consolas,monospace; font-style:normal}
.overlaylegend .plain{color:#625a4d}.overlaylegend .found{color:var(--ok)}
.overlaylegend .grow{color:#2b62a8}.overlaylegend .merge{color:var(--merge)}.overlaylegend .dead{color:var(--bad)}
.high-contrast .overlaylegend i{color:#000; border-color:#000}
.adviserhead{display:flex; align-items:baseline; justify-content:space-between; gap:8px}
.adviserhead h2{margin:0}
.adviserhead span{color:var(--ink3); font:600 9px/1 sans-serif; letter-spacing:.09em; text-transform:uppercase}
.adviserhead span.closing{color:var(--ok); font-weight:800}
.adviser p{margin:7px 0; color:var(--ink2); font-size:12px; line-height:1.35}
.adviser p b{color:var(--ink)}
.adviser button{width:100%; border:1px solid var(--brass); border-radius:5px; padding:6px 9px;
  background:rgba(154,123,47,.10); font-size:12px; font-weight:700}
.adviser button:hover{background:rgba(154,123,47,.18)}
.undocard p{margin:7px 0; color:var(--ink2); font-size:12px; line-height:1.35}
.undocard button{width:100%; border:1px solid var(--brass); border-radius:5px; padding:6px 9px;
  background:rgba(154,123,47,.10); font-size:12px; font-weight:700}
.undocard button:hover:not(:disabled){background:rgba(154,123,47,.18)}
.challengecard p{margin:7px 0; color:var(--ink2); font-size:12px; line-height:1.35}
.challengecard button{width:100%; border:1px solid var(--brass); border-radius:5px; padding:6px 9px;
  background:rgba(154,123,47,.08); color:var(--ink); font-weight:700}
.challengecard button:hover:not(:disabled){background:rgba(154,123,47,.18)}

table.ledger{width:100%; table-layout:fixed; border-collapse:collapse; font-size:13px}
table.ledger th:nth-child(1),table.ledger td:nth-child(1){width:31%}
table.ledger th:nth-child(2),table.ledger td:nth-child(2){width:10%}
table.ledger th:nth-child(3),table.ledger td:nth-child(3){width:17%}
table.ledger th:nth-child(4),table.ledger td:nth-child(4){width:12%}
table.ledger th:nth-child(5),table.ledger td:nth-child(5){width:9%}
table.ledger th:nth-child(6),table.ledger td:nth-child(6){width:20%}
table.ledger th{font:600 10px/1 sans-serif; padding-right:4px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink3); text-align:right; padding:0 3px 3px; border-bottom:1px solid var(--line)}
table.ledger th:first-child,table.ledger th:last-child{text-align:left}
table.ledger td{padding:3px; border-bottom:1px dotted var(--line); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
table.ledger td.n{text-align:right; font-variant-numeric:tabular-nums}
table.ledger td.b{font-weight:700}
table.ledger td.lead{font-size:11px; color:var(--ink2)}
table.ledger tr.off td{opacity:.42}
table.ledger tr.own td{background:rgba(154,123,47,.09)}
.synfocus{display:inline-flex; align-items:center; max-width:100%; margin:0; padding:1px 3px;
  border:1px solid transparent; border-radius:4px; background:transparent; font:inherit; text-align:left;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; box-shadow:none}
.outlookcard>p{margin:-1px 0 7px; color:var(--ink3); font-size:11px; font-style:italic}
#outlook{display:flex; flex-direction:column; gap:5px}
.outlookrow{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px 8px; padding:5px 6px;
  border:1px solid rgba(198,185,157,.75); border-radius:5px; background:rgba(255,255,255,.28)}
.outlookrow.hot{border-color:var(--merge); background:rgba(122,63,168,.07)}
.outlookname{display:flex; align-items:center; gap:6px; min-width:0; font-size:12px}
.outlookname b{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.outlookname .chip{flex:0 0 auto}
.outlooksize{font:700 11px/1.3 ui-monospace,Menlo,Consolas,monospace}
.outlookmeta{grid-column:1/-1; display:flex; justify-content:space-between; gap:6px; color:var(--ink2);
  font-size:10px; line-height:1.25}
.outlookmeta .stripmark{color:var(--merge); font-weight:700}
.outlookbar{grid-column:1/-1; height:4px; overflow:hidden; border-radius:3px; background:rgba(139,125,100,.20)}
.outlookbar span{display:block; height:100%; border-radius:3px}
.outlookempty{margin:1px 0; color:var(--ink3); font-size:12px; font-style:italic}
.high-contrast .outlookrow{border-color:#000; background:#fff}
.settlementwatchhead{display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin-bottom:7px}
.settlementwatchhead h2{margin:0}
.settlementwatchhead>span{padding:2px 6px; border:1px solid var(--line); border-radius:999px; color:var(--ink3);
  font:700 9px/1 sans-serif; letter-spacing:.07em; text-transform:uppercase; white-space:nowrap}
.settlementwatchhead>span.callable{border-color:var(--ok); color:var(--ok)}
.settlementwatchhead>span.settled{border-color:var(--brass); color:var(--brass)}
.settlementroutes{display:flex; flex-direction:column; gap:6px}
.finishroute{padding:6px 7px; border:1px solid rgba(198,185,157,.75); border-radius:5px;
  background:rgba(255,255,255,.28)}
.finishroutehead,.finishroutemeta{display:flex; align-items:center; justify-content:space-between; gap:8px}
.finishroutehead{font-size:11px}.finishroutehead b:last-child{font:700 11px/1.2 ui-monospace,Menlo,Consolas,monospace}
.finishroutemeta{margin-top:3px; color:var(--ink3); font-size:10px}
.finishbar{height:4px; margin-top:5px; overflow:hidden; border-radius:3px; background:rgba(139,125,100,.20)}
.finishbar span{display:block; height:100%; border-radius:3px; background:var(--brass)}
.finishforecast{margin:7px 0 0; padding:7px 8px; border-left:4px solid var(--ok);
  background:rgba(42,113,75,.07); color:var(--ink2); font-size:11px; line-height:1.4}
.finishforecast b{color:var(--ink)}
.finishforecast small{display:block; margin-top:3px; color:var(--ink3); font-style:italic}
.closingfield{margin-top:7px; border:1px solid var(--line); border-radius:5px; overflow:hidden;
  background:rgba(255,255,255,.24)}
.closingfieldhead{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:5px 7px;
  border-bottom:1px solid var(--line); background:rgba(154,123,47,.07); font-size:10px}
.closingfieldhead span{color:var(--ink3); font:700 8px/1.2 sans-serif; letter-spacing:.06em; text-transform:uppercase}
.closingfieldrow{display:grid; grid-template-columns:20px minmax(0,1fr) auto; align-items:center; gap:6px;
  padding:4px 7px; border-bottom:1px dotted var(--line)}
.closingfieldrow:last-child{border-bottom:0}.closingfieldrow.you{background:rgba(42,113,75,.08)}
.closingfieldrow .rank{color:var(--ink3); font:700 10px/1.2 ui-monospace,Menlo,Consolas,monospace}
.closingfieldrow .office{display:flex; flex-direction:column; min-width:0; font-size:10px}
.closingfieldrow .office b{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.closingfieldrow .office small{color:var(--ink3); font-size:8px; line-height:1.2}
.closingfieldrow .worth{font:700 9px/1.2 ui-monospace,Menlo,Consolas,monospace}
.exposure{margin-top:7px; padding-top:7px; border-top:1px dotted var(--line)}
.exposurehead{display:flex; justify-content:space-between; gap:8px; font-size:11px}
.exposurehead span{font:700 11px/1.3 ui-monospace,Menlo,Consolas,monospace}
.exposurebar{display:flex; height:6px; margin:5px 0; overflow:hidden; border-radius:4px; background:rgba(139,125,100,.20)}
.exposurebar span{display:block; height:100%}.exposurebar .cash{background:var(--ok)}
.exposurebar .paper{background:var(--brass)}.exposurebar .bonus{background:var(--merge)}
.exposuregrid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px}
.exposuregrid span{display:flex; flex-direction:column; padding:4px 5px; border-radius:4px;
  background:rgba(154,123,47,.07); color:var(--ink3); font:700 8px/1.2 sans-serif; letter-spacing:.06em; text-transform:uppercase}
.exposuregrid b{margin-top:2px; color:var(--ink); font:700 10px/1.2 ui-monospace,Menlo,Consolas,monospace;
  letter-spacing:0; text-transform:none; white-space:nowrap}
.exposuretop{margin:6px 1px 0; color:var(--ink2); font-size:10px; line-height:1.35}
.exposuretop .chip{margin-right:4px}.exposuretop b{color:var(--ink)}
.basketimpact{margin-top:7px; padding:7px 8px; border:1px solid var(--line); border-radius:5px;
  background:rgba(255,255,255,.28)}
.basketimpact.positive{border-color:var(--ok); background:rgba(42,113,75,.07)}
.basketimpacthead{display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:11px}
.basketimpacthead span{color:var(--ink3); font:700 10px/1.2 ui-monospace,Menlo,Consolas,monospace}
.basketimpact.positive .basketimpacthead span{color:var(--ok)}
.basketimpact p{margin:4px 0 0; color:var(--ink2); font-size:10px; line-height:1.35}
.closingscan{margin-top:7px; padding:7px 8px; border:1px solid var(--brass); border-radius:5px;
  background:rgba(154,123,47,.07)}
.closingscanhead{display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:11px}
.closingscanhead span{color:var(--brass); font:700 9px/1.2 sans-serif; letter-spacing:.06em; text-transform:uppercase}
.closingscan p{margin:4px 0 0; color:var(--ink2); font-size:10px; line-height:1.35}
.closingscan p b{color:var(--ink)}
.closingscan small{display:block; margin-top:3px; color:var(--ink3); font-size:9px; font-style:italic; line-height:1.3}
.settlementempty{margin:1px 0; color:var(--ink3); font-size:12px; font-style:italic}
.high-contrast .finishroute{border-color:#000; background:#fff}
.high-contrast .finishforecast{border-color:#000; background:#fff}
.high-contrast .closingfield,.high-contrast .closingfieldhead{border-color:#000; background:#fff}
.high-contrast .closingfieldrow.you{background:#eee}
.high-contrast .exposuregrid span{border:1px solid #000; background:#fff}
.high-contrast .basketimpact{border-color:#000; background:#fff}
.high-contrast .closingscan{border-color:#000; background:#fff}
.siteempty{margin:1px 0; color:var(--ink3); font-size:12px; font-style:italic}
.sitehead{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:6px}
.sitehead>b{font:700 19px/1 ui-monospace,Menlo,Consolas,monospace}
.sitekind{padding:3px 6px; border:1px solid var(--merge); border-radius:999px; color:var(--merge);
  font:700 9px/1 sans-serif; letter-spacing:.08em; text-transform:uppercase}
.sitekind.blocked{border-color:var(--bad); color:var(--bad)}
.sitechains{display:flex; flex-direction:column; gap:4px}
.sitechain{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px 8px; padding:5px 6px;
  border:1px solid var(--line); border-radius:5px; background:rgba(255,255,255,.28)}
.sitechain .name{display:flex; align-items:center; min-width:0; font-size:12px}
.sitechain .name b{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.sitechain .size{font:700 11px/1.3 ui-monospace,Menlo,Consolas,monospace}
.sitechain .meta{grid-column:1/-1; display:flex; justify-content:space-between; gap:6px; color:var(--ink3); font-size:10px}
.sitesummary{margin:7px 0 0; padding:7px 8px; border-left:4px solid var(--merge);
  background:rgba(122,63,168,.07); color:var(--ink2); font-size:11px; line-height:1.4}
.sitesummary.blocked{border-color:var(--bad); background:rgba(154,46,46,.06)}
.sitesummary b{color:var(--ink)}
.high-contrast .sitechain{border-color:#000; background:#fff}
.synfocus:hover:not(:disabled){background:rgba(154,123,47,.10); border-color:var(--line)}
.synfocus[aria-pressed="true"]{background:rgba(154,123,47,.16); border-color:var(--brass); color:var(--ink)}
.synfocus:disabled{opacity:1}
.chip{display:inline-block; width:9px; height:9px; border-radius:2px; margin-right:5px; vertical-align:baseline}
em.safe{display:inline-block; margin-left:4px; font:700 9px/1 sans-serif; color:var(--ok);
  border:1px solid currentColor; border-radius:50%; width:12px; height:12px; text-align:center;
  padding:1px 0 0; font-style:normal}

ul.stand{list-style:none; margin:0; padding:0; font-size:13px}
ul.stand li{display:flex; justify-content:space-between; gap:8px; padding:3px 2px; border-bottom:1px dotted var(--line)}
ul.stand li.you .nm{font-weight:700}
ul.stand li.act{background:rgba(154,123,47,.12)}
ul.stand em{font-style:normal; font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink3)}
ul.stand .v{font-variant-numeric:tabular-nums}

.brow{display:grid; grid-template-columns:auto minmax(0,1fr) auto auto; align-items:center; gap:2px 7px;
  padding:4px 2px; border-bottom:1px dotted var(--line); font-size:13px}
.brow>.chip{grid-column:1; grid-row:1 / span 2}
.brow .bn{grid-column:2; grid-row:1 / span 2; min-width:0; font-weight:600}
.brow .bp{grid-column:3; grid-row:1; text-align:right; font-variant-numeric:tabular-nums}
.brow .bq{grid-column:3; grid-row:2; text-align:right; font-size:11px; color:var(--ink3)}
.brow>.stp{grid-column:4; grid-row:1 / span 2}
.brow .bm{display:block; margin-top:1px; color:var(--ink3); font:500 9px/1.2 sans-serif;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.stp{display:inline-flex; align-items:center; gap:4px}
.stp button{width:22px; height:22px; line-height:1; padding:0; border:1px solid var(--line);
  background:#fff; border-radius:4px}
.stp b{min-width:14px; text-align:center; font-variant-numeric:tabular-nums}
.buyfoot{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:7px; flex-wrap:wrap}
.acts2{display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end}
.buyfoot .tot{font-size:12px; color:var(--ink2); font-variant-numeric:tabular-nums}
.go,#btnBuy,#btnFinish{background:var(--ink); color:var(--paper); border:0; border-radius:5px;
  padding:7px 13px; font-size:13px; box-shadow:var(--shadow)}
#btnFinish{background:var(--brass)}
ul.log{list-style:none; margin:0; padding:0; font-size:12px; color:var(--ink2); max-height:190px; overflow-y:auto}
ul.log li{padding:2px 0; border-bottom:1px dotted var(--line)}

/* -------------------------------------------------- THE ASSAY STRIP */
.strip{padding:9px 11px}
.striphead{display:flex; align-items:baseline; gap:8px; margin-bottom:4px}
.striphead h2{margin:0; font:600 11px/1 sans-serif; letter-spacing:.14em; text-transform:uppercase; color:var(--ink3)}
.striphead .ph{font-weight:700; margin-left:auto; font-size:13px}
.strip .nt{margin:0 0 7px; color:var(--ink2); font-size:11.5px; font-style:italic; line-height:1.35}
#rack{display:grid; grid-template-columns:minmax(0,1fr); gap:6px}
.tick{--tint:var(--ink3); position:relative; text-align:left; background:#fffdf7;
  border:1px solid var(--line); border-left:5px solid var(--tint); border-radius:5px;
  padding:5px 8px 6px; box-shadow:var(--shadow);
  display:grid; column-gap:8px; row-gap:0;
  grid-template-columns:34px minmax(0,1fr);
  grid-template-areas:"lbl hd" "lbl sb" "lbl cs"}
.tick .lbl{grid-area:lbl; align-self:center; text-align:center; font-size:13px !important}
.tick .hd{grid-area:hd} .tick .sb{grid-area:sb} .tick .cs{grid-area:cs}
.tick:hover:not(:disabled){background:#fff; transform:translateY(-1px)}
.tick.sel{outline:2px solid var(--ink); outline-offset:1px}
.tick .lbl{font:700 12px/1 ui-monospace,Menlo,Consolas,monospace; color:var(--ink3); letter-spacing:.06em}
.tick .hd{font-weight:700; font-size:13px; line-height:1.15}
.tick .sb{font-size:11px; color:var(--ink2); line-height:1.25}
.tick .cs{font:600 11px/1.3 ui-monospace,Menlo,Consolas,monospace; color:var(--brass)}
.tick.found{--tint:var(--ok)} .tick.merge{--tint:var(--merge)}
.tick.dead,.tick.sealed{--tint:var(--bad); background:#f3ece2}
.tick.plain{--tint:var(--ink3)}
.empty{margin:6px 2px; color:var(--ink3); font-style:italic; font-size:13px}

/* ------------------------------------------------------------ overlays */
.veil{position:fixed; inset:0; z-index:40; display:flex; align-items:center; justify-content:center;
  background:rgba(36,31,24,.55); padding:16px}
.veil[hidden]{display:none}          /* an author display rule outranks the UA [hidden] rule */
.sheet{background:var(--paper); border:1px solid var(--line); border-radius:8px; padding:20px 22px;
  max-width:560px; width:100%; box-shadow:0 18px 50px rgba(20,16,10,.45); max-height:88vh; overflow:auto}
.sheet h2{margin:0 0 4px; font:700 23px/1.1 Georgia,serif}
.sheet h2 span{color:var(--brass)}
.sheet p{margin:6px 0; font-size:14px; color:var(--ink2)}
.sheet .row{display:flex; gap:14px; flex-wrap:wrap; margin:14px 0 4px}
.sheet label{font:600 10px/1 sans-serif; letter-spacing:.12em; text-transform:uppercase; color:var(--ink3);
  display:block; margin-bottom:4px}
.sheet select{font:inherit; padding:6px 8px; border:1px solid var(--line); border-radius:5px; background:#fff}
.sheet .acts{display:flex; gap:8px; margin-top:16px; flex-wrap:wrap}
.sheet .acts button{background:var(--ink); color:var(--paper); border:0; border-radius:5px; padding:9px 16px}
.sheet .acts button.ghost{background:transparent; color:var(--ink); border:1px solid var(--line)}
.sheet ul{margin:6px 0; padding-left:18px; font-size:13px; color:var(--ink2)}
.sheet ul li{margin:3px 0}
.sbtn{--tint:var(--ink); display:block; width:100%; text-align:left; margin:6px 0; padding:9px 12px;
  background:#fffdf7; border:1px solid var(--line); border-left:5px solid var(--tint); border-radius:5px;
  font-weight:700; box-shadow:var(--shadow)}
.sbtn em{display:block; font-style:normal; font-weight:400; font-size:12px; color:var(--ink2)}
.sbtn.go{background:var(--ink); color:var(--paper); border-color:var(--ink); text-align:center}
.disp{margin:10px 0; border-top:1px solid var(--line)}
.drow{display:grid; grid-template-columns:86px auto 1fr; align-items:center; gap:10px;
  padding:7px 2px; border-bottom:1px dotted var(--line)}
.drow .dl{font-weight:700}
.drow .ds{font-size:12px; color:var(--ink2)}
.tot{font-size:15px !important; color:var(--ink) !important}
.finishsheet{max-width:500px}
.settleprev{list-style:none; margin:12px 0 4px !important; padding:0 !important; border-top:1px solid var(--line)}
.settleprev li{display:grid; grid-template-columns:28px minmax(0,1fr) auto; gap:8px; align-items:center;
  margin:0 !important; padding:7px 4px !important; border-bottom:1px dotted var(--line); font-size:14px}
.settleprev li.you{background:rgba(154,123,47,.12); font-weight:700}
.settleprev .rank{color:var(--ink3); font:600 11px/1 sans-serif; text-align:center}
.settleprev .cash{font-variant-numeric:tabular-nums; font-weight:700}
.resultsheet{max-width:570px}
.resultlead{font-size:16px !important; color:var(--ink) !important}
.resultgrid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; margin:13px 0}
.resultgrid span{display:flex; min-width:0; flex-direction:column; padding:8px; border:1px solid var(--line);
  border-radius:5px; background:rgba(255,255,255,.42); color:var(--ink3); font:600 9px/1.2 sans-serif;
  letter-spacing:.07em; text-transform:uppercase}
.resultgrid b{margin-top:3px; color:var(--ink); font:700 17px/1.1 Georgia,serif; letter-spacing:0; text-transform:none}
.resultmargin{padding:8px 10px; border-left:5px solid var(--brass); background:rgba(154,123,47,.09)}
.resultrecord{margin:8px 0 0; color:var(--ink2); font-size:12px; text-align:center}
@media (max-width:520px){.resultgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}

#toast{position:fixed; left:50%; bottom:18px; transform:translate(-50%,14px); z-index:60;
  background:var(--ink); color:var(--paper); padding:9px 15px; border-radius:6px; font-size:13px;
  opacity:0; pointer-events:none; transition:opacity .18s, transform .18s; max-width:80vw}
#toast.on{opacity:1; transform:translate(-50%,0)}

/* ------------------------------------------------------------- narrow */
@media (max-width:1180px){
  /* below three columns the page SCROLLS. Holding the app to 100% height
     squeezes the auto rows, and any rail with visible overflow then paints
     its cards over the rail beneath it. */
  html,body{height:auto}
  .app{height:auto; min-height:100%}
  .app{grid-template-columns:minmax(0,1fr) 320px;
    grid-template-rows:auto minmax(0,1fr) auto;
    grid-template-areas:"head head" "plat control" "info info"}
  .rail.info{overflow:visible; flex-direction:row; flex-wrap:wrap; align-items:flex-start}
  .rail.info>.card{flex:1 1 240px}
}
@media (max-width:860px){
  html,body{height:auto}
  .app{height:auto; min-height:100%; grid-template-columns:minmax(0,1fr);
    grid-template-rows:auto 44vh auto auto;
    grid-template-areas:"head" "plat" "control" "info"}
  /* the wider query turns the info rail into a wrapping ROW; single column must
     put it back, or its cards lay over the control rail */
  /* align-items:flex-start survives from the wider query and would leave
     these cards sized to their text in a column */
  .rail.info{flex-direction:column; align-items:stretch; overflow:visible}
  .rail.info>.card{flex:0 0 auto}
  .rail.control{overflow:visible}
  #rack{grid-template-columns:repeat(2,minmax(0,1fr))}
  .head h1{font-size:21px}
}
@media (max-width:560px){
  #rack{grid-template-columns:minmax(0,1fr)}
  .app{grid-template-rows:auto 40vh auto auto}
  .portfolio{grid-template-columns:repeat(3,minmax(82px,1fr))}
}

/* reduced_motion: nothing essential moves, and the incidental motion stops */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{transition-duration:0.01ms !important; animation-duration:0.01ms !important;
    animation-iteration-count:1 !important; scroll-behavior:auto !important}
  .tick:hover:not(:disabled){transform:none}
  #toast{transition:none}
}
/* scalable_ui: the layout holds when text is enlarged */
@media (max-width:1180px){ .app{align-content:start} }