/* Last Cape — the island canon's DESIGN.md. One typeface, two inks, one marker. */
:root {
  --paper: #f3efe6; --ink: #1c1b18; --faint: #7a7468; --rule: #c9c2b3;
  --marker: #e2542a; --sea: #2f6e78; --up: #2e7d4f; --down: #b3341f; --warn: #b7860b;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}
@media (prefers-color-scheme: dark) {
  :root { --paper: #151515; --ink: #e9e4d8; --faint: #8f887a; --rule: #3a3833;
          --marker: #ff6a3d; --sea: #5fa3ad; --up: #5fbf7f; --down: #ff6a3d; --warn: #e0b040; }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }                        /* hidden means hidden, whatever display a class gives */
html { background: var(--paper); }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  color: var(--ink); font: 16px/1.5 var(--mono); font-variant-numeric: tabular-nums; }
a { color: var(--sea); }

/* masthead */
.masthead { display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 16px 24px; border-bottom: 1px solid var(--ink); }
.masthead .brand { color: var(--ink); text-decoration: none; font-weight: 700; text-transform: uppercase; letter-spacing: .12em;
  display: inline-flex; flex-direction: column; align-items: stretch; gap: 0; font-size: 24px; line-height: 1.05; }
.masthead .brand b { font-weight: 700; margin-right: -.12em; }   /* the trailing letter-space after CAPE's E trimmed: the box ends where the E does */
.masthead .brand .isle { display: flex; justify-content: space-between; font-weight: 300; letter-spacing: 0; color: var(--faint); opacity: .8; font-size: .46em; margin-top: -1px; margin-left: .14em; margin-right: 0; }   /* the whole line a bearing to the right, by the owner's eye on his screen: the I under the L */   /* the island's name spread exactly from the L of LAST to the E of CAPE */
.masthead .brand .isle i { font-style: normal; }
.masthead .brand .star { font-size: 1.25em; vertical-align: .02em; letter-spacing: 0; margin: 0 .12em; line-height: 0; color: var(--marker); }   /* the red star between the words: a separator, not the subject */
.masthead nav.pages { display: flex; align-items: center; gap: 24px; font-size: 12px; text-transform: uppercase; letter-spacing: .12em; }
.masthead nav.pages a { display: inline-flex; align-items: center; gap: 8px; padding: 4px 0; }
.masthead nav.pages .fa-solid { font-size: 13px; width: 16px; text-align: center; }
.masthead nav { display: flex; justify-content: flex-end; gap: 16px; align-items: center; font-size: 14px; }
.masthead .who { color: var(--faint); }
@media (max-width: 720px) { .masthead { flex-wrap: wrap; padding: 12px 16px; } .masthead nav.pages { flex-wrap: wrap; gap: 4px 16px; min-width: 0; } }   /* a phone: the sections wrap onto a second line instead of pushing the page sideways */

/* page */
main { flex: 1; width: min(960px, 100% - 32px); margin: 24px auto;
  display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; align-content: start; }
footer { padding: 16px 24px; border-top: 1px solid var(--rule); color: var(--faint); font-size: 12px;
  text-transform: uppercase; letter-spacing: .12em; }

/* panels */
.panel { grid-column: span 12; position: relative; border: 1px solid var(--ink); padding: 32px 24px 24px; min-width: 0; }
.panel.notice { border-style: dashed; }
.span-4 { grid-column: span 4; } .span-6 { grid-column: span 6; } .span-8 { grid-column: span 8; } .span-12 { grid-column: span 12; }
@media (max-width: 720px) { .span-4, .span-6, .span-8 { grid-column: span 12; } }

.stamp { display: inline-block; margin: 0; font-size: 12px; font-weight: 700; line-height: 1;
  text-transform: uppercase; letter-spacing: .12em; }
.panel > .stamp:first-child { position: absolute; top: -7px; left: 16px; padding: 0 8px; background: var(--paper); }
.stamp.live { color: var(--marker); }
.stamp.off { color: var(--faint); }
/* the plant's state stamps: green when energy comes in or is kept, red when it drains or runs short, faint when nothing moves */
.stamp.good { color: var(--up); }
.stamp.bad { color: var(--down); }
.stamp.warn { color: var(--warn); }
.said { margin: 0 0 20px; }
.role-switch { display: flex; gap: 0; margin: 8px 0 4px; }                 /* the workshop's keeper or owner (18 Sep 2026, the owner) */
.role-switch button { margin: 0; flex: 1 1 0; min-width: 0; background: var(--paper); color: var(--ink); display: grid; grid-template-columns: auto 1fr; column-gap: 8px; row-gap: 2px; align-items: baseline; justify-items: start; text-align: left; }
.role-switch button + button { border-left: 0; }
.role-switch { position: relative; }
.role-switch .slide { position: absolute; top: 0; bottom: 0; left: 0; width: 50%; background: var(--ink); z-index: 0; pointer-events: none;
  transition: transform .4s cubic-bezier(.2, .7, .2, 1); }                /* the ink slides to the mode chosen (18 Sep 2026, the owner) */
.role-switch .slide.right { transform: translateX(100%); }
.role-switch button { position: relative; z-index: 1; background: transparent; transition: color .4s; }
.role-switch button.on { background: transparent; color: var(--paper); }
.role-switch button.on .unit { color: var(--paper); opacity: .8; }
.role-switch .unit { grid-column: 2; font-size: 10px; letter-spacing: .02em; white-space: nowrap; }
@media (max-width: 600px) { .role-switch .unit { white-space: normal; } }   /* on a phone the hours and the lift may take two lines */     /* the hours and the lift on one line */
.role-switch button:disabled { cursor: default; }
.role-switch button.on:disabled { opacity: 1; }                            /* the role it offers reads full, the other waits for Monday */
.role-switch button:not(.on):disabled:hover { background: transparent; color: var(--ink); }
.stamp .pulse { font-style: normal; animation: breathe 3.6s ease-in-out infinite; }   /* the state's dot, breathing slowly (17 Sep 2026, the owner) */
@keyframes breathe { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .stamp .pulse { animation: none; } }                                           /* a sentence the page says, with room under it */
.repair-box button { margin-top: 4px; }                               /* the order sits close under what asks for it */
.repair-box p { margin: 0 0 4px; }
.soc.cond { position: relative; }                                     /* the condition bar, with the out-of-order line on it (17 Sep 2026, the owner) */
.soc.cond i.w { position: relative; z-index: 1; }                      /* the fill covers the danger stripes until the condition falls into them */
.soc.cond .zone { position: absolute; left: 0; top: 0; bottom: 0; z-index: 2; pointer-events: none; opacity: .45;
  background: repeating-linear-gradient(135deg, #fff 0 1px, transparent 1px 5px); mix-blend-mode: exclusion; }
.soc.cond .zone { border-right: 1px solid var(--ink); }               /* the line where it stops working, the bar's own grey */
.soc.cond.bad i.w { background: var(--down); }
.soc.fills i.w { animation: fill 1.2s cubic-bezier(.2, .7, .2, 1) .15s both; }         /* a building's bars fill from nothing and stop where they stand (18 Sep 2026, the owner) */
.soc.fills.then i.w, .soc.fills.dl-450 i.w { animation-delay: .45s; }      /* the second a moment after the first, while it still runs */
.soc.fills.dl-750 i.w { animation-delay: .75s; } .soc.fills.dl-1050 i.w { animation-delay: 1.05s; } .soc.fills.dl-1350 i.w { animation-delay: 1.35s; }   /* a third, fourth, fifth unit, each a moment later */
@keyframes fill { from { width: 0; } }
@media (prefers-reduced-motion: reduce) { .soc.fills i.w { animation: none; } }
.soc.cond .mark { position: absolute; top: 50%; transform: translateY(-50%); margin-left: 6px; font-size: 10px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--down); white-space: nowrap; pointer-events: none; }
@media (max-width: 520px) { .soc.cond .mark { display: none; } }

h1 { margin: 0 0 8px; font-size: 22px; font-weight: 700; }
p { margin: 0 0 16px; } p:last-child { margin-bottom: 0; }
.faint { color: var(--faint); }
.error { color: var(--marker); }
.big { font-size: 32px; line-height: 1.1; }
.unit { color: var(--faint); font-size: 14px; }

/* ledger: dotted-leader key/value list */
.ledger { margin: 0; display: grid; grid-template-columns: fit-content(45%) minmax(12px, 1fr) fit-content(50%); gap: 4px 8px; }
.ledger.build { grid-template-columns: auto minmax(12px, 1fr) auto; }   /* the key sizes to its content, so a build's name, progress and ready time hold one line on a wide screen */
.wind-arrow { display: inline-block; font-size: 11px; color: var(--faint); margin-right: 3px; }   /* rotates to the wind: fa-arrow-up points north, turned to where the wind comes from */
.ledger dt { min-width: 0; overflow-wrap: anywhere; }
.ledger dt { color: var(--faint); }
.ledger dt::after { content: ""; }
.ledger .leader { align-self: start; height: 18px; border-bottom: 1px dotted var(--rule); }
.ledger dd { margin: 0; min-width: 0; }

/* forms */
label { display: block; margin: 16px 0 0; font-size: 12px; text-transform: uppercase;
  letter-spacing: .12em; color: var(--faint); }
input { display: block; width: 100%; margin-top: 8px; padding: 8px 12px; border: 1px solid var(--ink);
  border-radius: 0; background: var(--paper); color: var(--ink); font: 16px var(--mono); }
input:focus, button:focus-visible { outline: 2px solid var(--marker); outline-offset: 2px; }
button { margin-top: 24px; padding: 8px 16px; border: 1px solid var(--ink); border-radius: 0;
  background: var(--ink); color: var(--paper); font: 700 14px var(--mono); text-transform: uppercase;
  letter-spacing: .12em; cursor: pointer; }
button:hover { background: var(--paper); color: var(--ink); }
button.ghost { background: none; color: var(--ink); }
button.ghost:hover { background: var(--ink); color: var(--paper); }
button.marker { background: var(--marker); border-color: var(--marker); color: var(--paper); }
button.marker:hover { background: var(--paper); color: var(--marker); }
button.link { margin: 0; padding: 0; border: 0; background: none; color: var(--ink);
  font: 14px var(--mono); text-transform: none; letter-spacing: 0; text-decoration: underline; }
button.link:hover { color: var(--marker); background: none; }

/* login sheet */
.sheet { grid-column: 4 / span 6; margin-top: 48px; }
@media (max-width: 720px) { .sheet { grid-column: span 12; margin-top: 16px; } }

/* photographs: printed, not glossy */
.hero { margin: 0; padding: 24px 0 0; }
.hero img { display: block; width: 100%; height: auto; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink);
  filter: saturate(.8) contrast(1.05); }
.hero figcaption { padding: 8px 16px 12px; color: var(--faint); font-size: 12px; text-transform: uppercase; letter-spacing: .12em; }
figure.panel.hero { padding: 0; }                                   /* the picture fills the frame edge to edge; the caption under it */
figure.panel.hero.portrait img { width: 100%; }
.accounts td strong a, .app-head strong a { color: var(--ink); text-decoration: none; border-bottom: 1px dotted var(--faint); }
figure.panel.hero img { border: 0; border-bottom: 1px solid var(--ink); display: block; width: 100%; height: auto; }   /* the rule under the picture stays */

/* welcome header and notices */
.welcome { grid-column: span 12; padding: 24px 0 8px; }
.welcome h1 { font-size: 32px; line-height: 1.15; margin: 0 0 8px; }
.welcome p { margin: 0; }
.welcome p.crumb { margin: 0 0 32px; }                            /* the crumb stands off the title (the owner's call) */
.welcome .coords { margin: -4px 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .12em; color: var(--faint); }
.coords a, a.coords { color: inherit; text-decoration: none; }   /* the address links to OpenStreetMap and looks as it did as plain text (the owner's call) */
.notices { list-style: none; margin: 0; padding: 0; }
.notices li { padding: 8px 0; border-top: 1px dotted var(--rule); }
.notices li:first-child { border-top: 0; padding-top: 0; }
.notices li .faint { display: inline-block; min-width: 6ch; }
.masthead a.who { color: var(--faint); text-decoration: none; }
.masthead a.who:hover { color: var(--marker); }
.masthead a.who.on { color: var(--ink); border-bottom: 1px solid var(--ink); }
.news { color: var(--marker); }
.ledger dd { text-align: right; overflow-wrap: anywhere; }

/* weather box */
.wx-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 8px; font-size: 12px; }
.wx-head .faint { text-transform: uppercase; letter-spacing: .12em; }
#wx .big { margin-bottom: 16px; }
#wx .big .unit + .unit { margin-left: 8px; }
.wx-foot { margin-top: 16px; font-size: 12px; }

/* section pages */
.crumb { margin: 0 0 32px; font-size: 12px; text-transform: uppercase; letter-spacing: .12em; color: var(--faint); }   /* room between the crumb and the title (the owner's call) */
.crumb a { color: var(--faint); text-decoration: none; }
.crumb a:hover { color: var(--marker); }
.masthead a.who.on { color: var(--ink); }
a.index-card { display: block; color: var(--ink); text-decoration: none; }
a.index-card:hover { border-color: var(--marker); }
a.index-card:hover .stamp:first-child { color: var(--marker); }
a.index-card h3 { margin: 0 0 8px; font-size: 22px; }

/* fact sheet body */
.prose h1, .prose h2:not(.stamp), .prose h3 { font-size: 16px; font-weight: 700; margin: 24px 0 8px; text-transform: uppercase; letter-spacing: .08em; }
.prose p, .prose ul, .prose ol { margin: 0 0 16px; }
.prose table { width: 100%; border-collapse: collapse; font-size: 14px; margin: 0 0 16px; }
.prose td, .prose th { overflow-wrap: anywhere; }
.prose th, .prose td { text-align: left; vertical-align: top; padding: 4px 8px 4px 0; border-bottom: 1px dotted var(--rule); }
.prose th { font-size: 12px; text-transform: uppercase; letter-spacing: .12em; color: var(--faint); font-weight: 400; }
.prose td:first-child { color: var(--faint); }
.prose code { font-size: 14px; border: 1px solid var(--rule); padding: 0 4px; }
.prose a { color: var(--sea); }

/* meters: ink bar in a 1px box, percent of rated */
.meter { margin: 0 0 16px; display: grid; gap: 6px; }
.meter-row { display: grid; grid-template-columns: 6ch 1fr 9ch; gap: 8px; align-items: center; font-size: 14px; }
.meter-row > span:first-child { color: var(--faint); }
.meter .bar { display: block; height: 10px; border: 1px solid var(--ink); }
.meter .bar i { display: block; height: 100%; background: var(--ink); }
.meter .val { text-align: right; }

/* state of charge: wind solid, solar hatched */
.soc { display: flex; height: 14px; border: 1px solid var(--ink); margin: 0 0 8px; }
.soc i, .soc-key i { display: block; height: 100%; }
.soc .w, .soc-key .w { background: var(--ink); }
.soc .s, .soc-key .s { background: repeating-linear-gradient(135deg, var(--ink) 0 2px, transparent 2px 5px); }
.soc-key { display: flex; gap: 16px; margin: 0 0 16px; font-size: 12px; color: var(--faint); text-transform: uppercase; letter-spacing: .12em; }
.soc-key span { display: inline-flex; align-items: center; gap: 6px; }
.soc-key i { width: 14px; height: 10px; border: 1px solid var(--ink); }
.ledger dt a { color: var(--faint); text-decoration: none; border-bottom: 1px dotted var(--faint); }
.ledger dt a:hover, .ledger dd a:hover { color: var(--marker); }
.ledger dd a { color: var(--ink); text-decoration: none; border-bottom: 1px dotted var(--faint); }

/* level bars for water and heat stores */
.level-label { display: flex; justify-content: space-between; align-items: baseline; margin: 16px 0 6px; font-size: 14px; }
.level-label a { color: var(--ink); text-decoration: none; border-bottom: 1px dotted var(--faint); }
.level-label a:hover { color: var(--marker); }
.level { display: flex; height: 14px; border: 1px solid var(--ink); margin: 0 0 8px; }
.level i { display: block; height: 100%; background: var(--ink); }
.level i.s { background: repeating-linear-gradient(135deg, var(--ink) 0 2px, transparent 2px 5px); }

/* usage groups */
.group-head { display: flex; justify-content: space-between; align-items: baseline; margin: 16px 0 4px; padding-bottom: 4px; border-bottom: 1px solid var(--rule); }
.group-head:first-of-type { margin-top: 0; }

/* notepad: the pad is the card. Status sits inside the top edge; the textarea fills the rest. */
.notepad { display: flex; flex-direction: column; padding: 24px 0 0; min-height: 70vh; }
.notepad .wx-head { padding: 0 16px 8px; margin: 0; }
.notepad textarea { flex: 1; display: block; width: 100%; min-height: 50vh; margin: 0; padding: 16px; resize: none;
  border: 0; border-top: 1px solid var(--ink); background: var(--paper); color: var(--ink); font: 14px/1.5 var(--mono); }
.notepad textarea:focus { outline: none; box-shadow: inset 0 0 0 2px var(--marker); }
.versions li a { color: var(--ink); text-decoration: none; border-bottom: 1px dotted var(--faint); }
.versions li a:hover { color: var(--marker); }

/* outlook charts: monochrome, identity by texture and direct label, one axis per chart */
.fc-charts { margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--rule); }
.fc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
@media (max-width: 720px) { .fc-grid { grid-template-columns: 1fr; } }
.chart-title { margin: 8px 0 4px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; }
.chart { margin: 0 0 8px; position: relative; }
.fc-svg { width: 100%; height: auto; display: block; font: 12px var(--mono); }
.fc-svg .grid { stroke: var(--rule); stroke-width: 1; stroke-dasharray: 1 3; }
.fc-svg .grid.day { stroke-dasharray: none; }
.fc-svg .axis { stroke: var(--ink); stroke-width: 1; }
.fc-svg .tick { fill: var(--faint); }
.fc-svg .lbl { fill: var(--ink); paint-order: stroke; stroke: var(--paper); stroke-width: 3px; }
.fc-svg .hatch-bar { fill: var(--ink); }
.fc-svg .gen { fill: url(#hatch); fill-opacity: .45; stroke: none; }
.fc-svg .gen-line { fill: none; stroke: var(--ink); stroke-width: 1; stroke-opacity: .6; }
.fc-svg .night { fill: var(--ink); fill-opacity: .05; }
.fc-svg .now { stroke: var(--marker); stroke-width: 1; stroke-dasharray: 2 2; }
.fc-svg .load { fill: none; stroke: var(--ink); stroke-width: 2; }
.fc-svg .soc-line { fill: none; stroke: var(--ink); stroke-width: 2; }
.fc-svg .dot { fill: var(--paper); stroke: var(--marker); stroke-width: 2; }
.fc-svg .rule { stroke: var(--faint); stroke-width: 1; stroke-dasharray: 4 3; }
.fc-svg .band { fill: var(--marker); fill-opacity: .08; }
.fc-svg .cross { stroke: var(--marker); stroke-width: 1; }
.fc-tip { position: absolute; top: 8px; padding: 6px 8px; border: 1px solid var(--ink); background: var(--paper); font-size: 12px; line-height: 1.4; pointer-events: none; white-space: nowrap; }
.soc-key i.ln { width: 14px; height: 0; border: 0; border-top: 2px solid var(--ink); }
.soc-key i.nt { background: var(--ink); opacity: .12; }
.measures li { padding: 6px 0; }
.chart-note { font-size: 12px; margin-top: 8px; }
.fc-table { margin-top: 16px; } .fc-table summary { cursor: pointer; }
.fc-table table { margin-top: 8px; }
table.accounts th { font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--faint); font-weight: 400; text-align: left; padding: 2px 8px 6px 0; border-bottom: 1px solid var(--ink); }
table.accounts td { padding: 4px 8px 4px 0; border-bottom: 1px dotted var(--rule); font-size: 14px; }
table.accounts td.num { text-align: right; white-space: nowrap; }

/* accounts page */
table.accounts tfoot td { font-weight: 700; border-top: 1px solid var(--ink); border-bottom: 0; padding-top: 8px; }
table.accounts tr.pending td { font-style: italic; }
table.accounts tfoot tr.faint-row td { font-weight: 400; color: var(--faint); border-top: 0; padding-top: 4px; }
table.accounts td a { color: var(--ink); text-decoration: none; border-bottom: 1px dotted var(--faint); }
table.accounts td a:hover { color: var(--marker); }

/* sailing list */
table.ships tr.past td { color: var(--faint); }
table.ships tr.next td { font-weight: 700; }
table.ships tr.next td:first-child::before { content: "\25B8 "; color: var(--marker); }
.welcome p a { color: var(--ink); text-decoration: none; border-bottom: 1px dotted var(--faint); }

/* nothing may leave its card: wide tables scroll inside it */
.fc-table, .accounts-wrap { max-width: 100%; overflow-x: auto; }
.accounts-wrap table { min-width: 560px; }

/* island status stamps above the title */
.status-line { margin: 0 0 8px; display: flex; gap: 16px; flex-wrap: wrap; }
.status-line a { text-decoration: none; }
.span-5 { grid-column: span 5; } .span-7 { grid-column: span 7; }
@media (max-width: 720px) { .span-5, .span-7 { grid-column: span 12; } }

/* lastcape: sticky masthead and footer bar, balance on the right */
.masthead { position: sticky; top: 0; z-index: 10; background: var(--paper); }
footer.bar { position: sticky; bottom: 0; z-index: 10; background: var(--paper); border-top: 1px solid var(--ink);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: baseline; gap: 16px;
  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }                /* the notch's bottom inset (15 Sep 2026) */
footer.bar .clock { text-align: center; font-variant-numeric: tabular-nums; }
footer.bar .right { text-align: right; }
footer.bar .left { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }   /* the name with its bubble, the speaker under them (15 Sep 2026) */
footer.bar .left .me { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }   /* the name and its bubble, one piece */
footer.bar .left .me .chat-menu { margin-left: 0; }
body { min-height: 100dvh; }                                                     /* the footer at the foot however short the page: dvh follows the phone's toolbars (15 Sep 2026) */
.masthead { padding-top: calc(12px + env(safe-area-inset-top, 0px)); }
@media (max-width: 480px) { footer.bar { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 8px; } footer.bar .clock { grid-column: 1 / -1; order: 3; text-align: left; font-size: 11px; } }   /* the narrowest phones: the clock and the rights go on a line of their own under the rest */
/* the burger: on a phone the sections fold behind it (15 Sep 2026) */
.masthead .burger { display: none; font: inherit; background: none; border: 1px solid var(--rule); border-radius: 3px; color: var(--ink); padding: 6px 10px; cursor: pointer; }
@media (max-width: 720px) {
  .masthead .burger { display: inline-flex; align-items: center; }
  .masthead nav.pages { display: none; }
  .masthead nav.pages.open { display: flex; flex-direction: column; align-items: stretch; width: 100%; gap: 8px; padding-top: 8px; }
  .masthead nav.pages.open .menu .menu-body { position: static; min-width: 0; box-shadow: none; border: 0; padding: 4px 0 4px 24px; }
}
/* the user menu: the name in the footer's corner opens a small panel upward with log out in it */
.menu summary { list-style: none; cursor: pointer; color: var(--faint); display: inline-block; }
.menu summary::-webkit-details-marker { display: none; }
.menu summary:hover, .menu[open] summary { color: var(--ink); }
.menu .caret { font-size: 8px; vertical-align: 2px; margin-left: 4px; }
.menu .fa-solid { font-size: 12px; margin-right: 2px; }
.menu[open] .caret { display: inline-block; transform: rotate(180deg); }
.menu .menu-body { position: absolute; left: 0; bottom: calc(100% + 8px); min-width: 160px; padding: 8px 12px;
  border: 1px solid var(--ink); background: var(--paper); text-transform: none; letter-spacing: 0; font-size: 14px; }
.menu .menu-body button.link { color: var(--ink); }
.menu .menu-body button.link:hover { color: var(--marker); }

/* the people's messenger: a speech bubble in the footer with an unread badge, a drawer of messages upward */
.chat-menu { position: relative; display: inline-block; margin-left: 10px; vertical-align: -3px; }   /* to the right of the player's name, a touch lower (15 Sep 2026) */
.chat-menu > summary { position: relative; display: inline-block; }
.chat-menu > summary .fa-comment { font-size: 14px; margin-right: 0; }
.chat-menu > summary .news { position: absolute; top: -7px; left: 9px; min-width: 14px; height: 14px; padding: 0 3px; box-sizing: border-box;
  border-radius: 7px; background: var(--marker); color: var(--paper); font-size: 10px; line-height: 14px; text-align: center; }
.chat-menu .chat-body { left: 0; right: auto; width: 340px; max-width: 84vw; max-height: 60vh; overflow-y: auto; padding: 12px 14px; }
.chat-head { margin: 0 0 8px; font-size: 11px; text-transform: uppercase; letter-spacing: .14em; color: var(--faint); }
.chat-msg { display: flex; gap: 10px; padding: 10px 0; border-top: 1px solid var(--rule); }
.chat-msg:first-of-type { border-top: 0; }
.chat-face { width: 36px; height: 36px; flex: 0 0 36px; object-fit: cover; border: 1px solid var(--rule); border-radius: 50%; }
.chat-face.none { display: inline-flex; align-items: center; justify-content: center; color: var(--faint); }
.chat-text { min-width: 0; }
.chat-who { margin: 0 0 3px; font-size: 12px; }
.chat-who a { color: var(--ink); text-decoration: none; font-weight: 700; }
.chat-time { color: var(--faint); font-size: 11px; margin-left: 4px; }
.chat-say { margin: 0; font-size: 13px; line-height: 1.4; }
.chat-msg.new .chat-say { position: relative; }
.chat-msg.new .chat-who a::before { content: "\25CF"; color: var(--marker); font-size: 8px; vertical-align: 2px; margin-right: 5px; }
.chat-acts { display: flex; align-items: center; gap: 14px; margin: 6px 0 0; }
.chat-link { font-size: 12px; color: var(--marker); text-decoration: none; }
.chat-link:hover { text-decoration: underline; }
.chat-got { font-size: 12px; color: var(--faint); }
.chat-got:hover { color: var(--ink); }
.chat-count { color: var(--faint); }
.chat-empty { margin: 4px 0; font-size: 13px; }

/* the ordering page's category cards: the marks of what is inside, faint, above the groups */
.index-card .card-marks { margin: 0 0 8px; color: var(--faint); font-size: 18px; letter-spacing: 6px; line-height: 1; min-height: 18px; }
.index-card .stamp.good, .index-card .stamp.off { letter-spacing: .04em; }

/* a price the settlement's own buildings have cut: what it was, struck, and by how much */
.unit.cut { color: var(--up); }
dd.was { text-decoration: line-through; text-decoration-color: var(--rule); }
dd.was .unit { text-decoration: none; color: var(--up); }

/* a name the player gave a person, a house or a machine: beside the id, never instead of it */
.given { font-weight: 400; }
.given::before { content: "\00b7\00a0"; color: var(--faint); }   /* HSE.2 - The Stone House: the id first, since that is what the diary and the wear book use */
form.naming { grid-column: 1 / -1; display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin: 0 0 16px; }
form.naming label { display: flex; flex-direction: column; gap: 4px; }
form.naming input { width: 22ch; max-width: 100%; }

/* a panel's grouping switch: how the table under it is arranged, the masthead's own marking */
.by { margin: 0 0 12px; font-size: 12px; text-transform: uppercase; letter-spacing: .12em; color: var(--faint); }
.by a { color: var(--faint); text-decoration: none; margin-left: 12px; border-bottom: 1px solid transparent; padding-bottom: 2px; }
.by a:hover { color: var(--marker); }
.by a.on { color: var(--ink); border-bottom: 1px solid var(--ink); }

/* the masthead's three groups (11 Sep 2026): each opens its sections downward on the user menu's
   mechanism — paper, one ink rule, no shadow, no dimming; the shell closes it on a click elsewhere
   or Escape. The group holding the page shown, and its own line within, read in ink and underlined. */
.masthead nav.pages > a { border-bottom: 1px solid transparent; }   /* the envelope keeps the groups' baseline; .who.on paints the rule in ink */
.masthead nav.pages .menu { position: relative; }
.masthead nav.pages .menu > summary { display: inline-flex; align-items: center; gap: 8px; padding: 4px 0; color: var(--faint);
  border-bottom: 1px solid transparent; }                                   /* the rule is there unseen, so marking the group on does not lift the row a pixel */
.masthead nav.pages .menu > summary:hover, .masthead nav.pages .menu[open] > summary { color: var(--ink); }
.masthead nav.pages .menu.on > summary { color: var(--ink); border-bottom: 1px solid var(--ink); }
.masthead nav.pages .menu .caret { margin-left: 0; }
.masthead nav.pages .menu .fa-solid { margin-right: 0; }
.masthead nav.pages .menu .menu-body { top: calc(100% + 8px); bottom: auto; min-width: 200px;
  display: flex; flex-direction: column; gap: 12px; font-size: 12px; text-transform: uppercase; letter-spacing: .12em; }
.masthead nav.pages .menu:last-child .menu-body { left: auto; right: 0; }   /* the last group opens back into the page, not off its edge */
@media (max-width: 480px) { .masthead nav.pages .menu > summary .fa-solid { display: none; } }   /* a phone: the three words alone, one row; the sections inside keep their marks */
@media (max-width: 480px) { .masthead nav.pages { gap: 4px 12px; } .masthead nav.pages .inbox .word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }   /* the envelope alone; the word stays for a screen reader */ }
/* the balance: the sum on top, the last tick's income and costs per hour in a small line under it */
footer.bar .balance { display: inline-flex; flex-direction: column; align-items: flex-end; line-height: 1.25; color: var(--ink); font-size: 16px; font-weight: 700; letter-spacing: 0; text-transform: none; }
footer.bar .balance .tick { font-size: 12px; font-weight: 700; letter-spacing: 0; font-variant-numeric: tabular-nums; }
footer.bar .balance .tick .up { color: var(--up); } footer.bar .balance .tick .down { color: var(--down); margin-left: 8px; }

.shares { display: flex; gap: 8px; flex-wrap: wrap; } .shares button { margin-top: 0; }
table.catalogue td { vertical-align: top; padding-top: 8px; padding-bottom: 8px; }
table.catalogue td.group { text-transform: uppercase; letter-spacing: .12em; font-size: 11px; color: var(--faint); padding-top: 11px; white-space: nowrap; }
table.catalogue td.item { min-width: 220px; }
table.catalogue td .unit { font-size: 12px; }
table.accounts td.act { text-align: right; } table.accounts td.act form { display: inline; }
button.small, a.button.small { margin-top: 0; padding: 6px 12px; font-size: 12px; white-space: nowrap; }
@media (max-width: 720px) { button.small, a.button.small { white-space: normal; max-width: 100%; text-align: left; } }
.steps button.small { white-space: normal; max-width: 100%; text-align: left; }   /* a step's order button wraps inside its panel */   /* a phone: a long "Order the kit on …" wraps rather than pushing the page sideways */
a.button { display: inline-block; border: 1px solid var(--ink); color: var(--ink); text-decoration: none; background: none; }
a.button:hover { background: var(--ink); color: var(--paper); }
table.accounts td a.button, .ledger dd a.button, .ledger dt a.button { border: 1px solid var(--ink); }   /* a link that is a button keeps its frame: the tables' and ledgers' dotted link line is for words, not buttons */
form.size { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
form.size input[type=number] { width: 5.5em; font: inherit; padding: 4px 6px; border: 1px solid var(--ink); border-radius: 0; background: var(--paper); color: var(--ink); }
form.size label { font-size: 12px; text-transform: uppercase; letter-spacing: .12em; color: var(--faint); }
.panel.prose table td:first-child { color: var(--faint); white-space: nowrap; padding-right: 16px; }

/* contract slider: a plain ink track and a square thumb */
.slider input[type=range] { width: 100%; margin: 12px 0; padding: 0; border: 0; -webkit-appearance: none; appearance: none; height: 2px; background: var(--ink); outline: none; }
.slider input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; background: var(--paper); border: 2px solid var(--ink); cursor: pointer; }
.slider input[type=range]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 0; background: var(--paper); border: 2px solid var(--ink); cursor: pointer; }
.slider input[type=range]:focus-visible::-webkit-slider-thumb { border-color: var(--marker); }
.slider .big { margin: 4px 0 8px; }

/* lastcape: how much of the station's need you could supply, one bar per day */
table.sellable td { vertical-align: middle; }
table.sellable .share { display: inline-block; width: 90px; height: 8px; border: 1px solid var(--ink); vertical-align: middle; margin-right: 8px; background: var(--paper); }
table.sellable .share i { display: block; height: 100%; background: var(--ink); }

/* lastcape: the deals table, one promise per day */
table.deals td { vertical-align: middle; }
table.deals form.deal { display: flex; align-items: center; gap: 8px; margin: 0; }
table.deals form.deal input[type=range] { width: 160px; margin: 0; }
table.deals form.deal button { margin: 0; padding: 4px 10px; font-size: 12px; }
/* icon-only buttons (the owner's exception to "always beside a word", 9 Sep 2026): the word lives in title and aria-label */
table.deals form.deal button.icon { padding: 2px 4px; line-height: 1; border: 0; background: none; color: var(--ink); }
table.deals form.deal button.icon:hover { background: none; color: var(--marker); }
table.deals form.deal button.icon:disabled { color: var(--faint); }
table.deals form.deal button.icon .fa-solid { font-size: 15px; }
table.deals td { padding-top: 10px; padding-bottom: 10px; }
table.deals .earn .up { color: var(--up); } table.deals .earn .down { color: var(--down); }
form.standing { margin-top: 16px; }
.options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 860px) { .options { grid-template-columns: 1fr; } }
.option { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--rule); cursor: pointer; background: var(--paper); }
.option:hover { border-color: var(--ink); }
.option.on { border: 2px solid var(--ink); padding: 11px 13px; }
.option input[type=radio] { display: inline-block; width: 22px; height: 22px; margin: 1px 0 0; padding: 0; flex: none; accent-color: var(--marker); cursor: pointer; }
.option-body { display: flex; flex-direction: column; gap: 4px; font-size: 13px; line-height: 1.45; }
.option-body b { font-size: 14px; }
#sale.busy table.deals, #sale.busy form.standing { opacity: .5; transition: opacity .15s; }

/* the outlook table: the day's name with its date in small beneath it */
.deals .when { display: block; font-size: 12px; font-weight: 400; }

/* a note pinned on a panel's top border, opposite the stamp: an "i" beside a word. Click opens a
   pinned sheet (paper, one ink rule, no shadow) with the explanation; elsewhere, × or Escape closes it */
.panel > details.note { position: static; }                        /* the "i" sits in the card's top corner; its sheet opens inside the card, never past the screen */
.panel > details.note > summary { position: absolute; top: 10px; right: 16px; }
.panel > details.note > .note-body { top: 34px; right: 16px; left: auto; width: min(460px, calc(100% - 32px)); }
details.note summary { list-style: none; cursor: pointer; display: inline-block; padding: 0 8px; background: var(--paper);
  font-size: 12px; font-weight: 700; line-height: 1; text-transform: uppercase; letter-spacing: .12em; color: var(--faint); }
details.note summary::-webkit-details-marker { display: none; }
details.note summary:hover, details.note[open] summary { color: var(--ink); }
details.note summary .fa-solid { font-size: 12px; margin-right: 4px; }
details.note .note-body { position: absolute; right: 0; top: calc(100% + 10px); z-index: 20; width: min(460px, calc(100vw - 48px));
  padding: 24px 24px 16px; border: 1px solid var(--ink); background: var(--paper); color: var(--ink);
  font-size: 14px; font-weight: 400; line-height: 1.5; text-transform: none; letter-spacing: 0; text-align: left; }
details.note .note-body > .stamp { position: absolute; top: -7px; left: 16px; padding: 0 8px; background: var(--paper); }
details.note .note-body .close { position: absolute; top: 6px; right: 12px; margin: 0; padding: 0 4px; font-size: 16px; line-height: 1; color: var(--faint); }
details.note .note-body .close:hover { color: var(--marker); }
details.note .note-body p { margin: 0 0 12px; } details.note .note-body p:last-child { margin: 0; }

/* the outlook table fills the Sale panel */
table.deals { width: 100%; }
table.deals td:last-child, table.deals th:last-child { padding-right: 0; }

/* the market strip under the masthead: today's oil and what it makes a kWh worth, on every page */
p.market { margin: 0; padding: 6px 24px; border-bottom: 1px dashed var(--rule); display: flex; flex-wrap: wrap; gap: 4px 20px;
  font-size: 12px; text-transform: uppercase; letter-spacing: .12em; color: var(--faint); font-variant-numeric: tabular-nums; }
p.market b { color: var(--ink); font-weight: 700; }
p.market .fa-solid { font-size: 12px; margin-right: 4px; }
p.market .up, p.market .down { font-size: 9px; vertical-align: 1px; }
p.market .up { color: var(--up); } p.market .down { color: var(--down); }
p.market .mine { margin-left: auto; }   /* the settlement's own market sits at the right end of the strip */
.options .option b .fa-solid { font-size: 12px; margin-right: 6px; }   /* the icon one size under the card's title */
.wx-head .stamp .fa-solid { font-size: 12px; margin-right: 2px; }   /* the sky's one icon, beside its word */
hr.rule { border: 0; border-top: 1px dashed var(--rule); margin: 16px 0; }   /* a secondary division inside a panel */
.ledger dt .fa-solid { font-size: 12px; margin-right: 4px; color: var(--faint); }
.ledger dt .health { margin-left: 6px; font-size: 12px; color: var(--faint); font-variant-numeric: tabular-nums; }
.ledger dt .health.worn { color: var(--ink); }
.ledger dt .health.bad { color: var(--down); }
.ledger dt .health .fa-solid { margin-right: 2px; color: inherit; }

/* a machine's health line: one ink path, the panel's own width, no axes beyond the caption */
figure.health-chart { margin: 8px 0 12px; }
figure.health-chart svg { display: block; width: 100%; height: 120px; border-bottom: 1px solid var(--rule); }
figure.health-chart path { fill: none; stroke: var(--ink); stroke-width: 2; vector-effect: non-scaling-stroke; }
figure.health-chart figcaption { font-size: 12px; margin-top: 4px; }
.ledger dt a { color: var(--ink); text-decoration: none; border-bottom: 1px dotted var(--faint); }
.ledger dt a:hover { color: var(--marker); border-bottom-color: var(--marker); }

/* People: the founder form, applicants as cards, skills as small stamps */
form.founder label, form.advert label, form.offer label { display: inline-block; margin: 8px 16px 0 0; }
form.founder input, form.founder select, form.advert select, form.offer input { margin-left: 6px; }
form.founder button { display: block; }
form.advert, form.offer { margin: 0; }
form.advert button, form.offer button, article.applicant form button { margin-top: 8px; }
.skill { display: inline-block; border: 1px solid var(--rule); padding: 0 6px; margin: 2px 2px 2px 0; font-size: 12px; }
.skill b { font-weight: 700; }
.applicants { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; margin-top: 8px; }
article.applicant { border: 1px solid var(--rule); padding: 12px; min-width: 0; }
article.applicant.done { opacity: 0.6; }
article.applicant p { margin: 4px 0; }
article.applicant .app-head { margin-bottom: 8px; display: flex; align-items: center; gap: 10px; }
article.applicant .app-head img.face { margin: 0; flex: none; }
article.applicant .app-head .app-who { line-height: 1.5; }
article.applicant .app-says { margin: 0 0 8px; font-style: italic; }
.ledger.small { font-size: 12px; margin-top: 8px; }

input.tenths { width: 3.2em; padding: 2px 4px; }
form.alloc button { margin-top: 12px; }

.positions { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 8px; }   /* one task card the full width of its panel, the owner's call */
article.position { border: 1px solid var(--rule); padding: 12px; min-width: 0; }
article.position p { margin: 4px 0; }
/* the assignment: a ruled block under the task's facts — who, hours, how far that covers it, and the button */
form.assign { border-top: 1px solid var(--ink); margin-top: 12px; padding-top: 10px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "head head" "who hours" "bar bar" "note btn"; gap: 8px 24px; align-items: end; }
form.assign .assign-head { grid-area: head; margin: 0; font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--faint); }
form.assign label { display: flex; flex-direction: column; gap: 4px; margin: 0; min-width: 0; }
form.assign label > span:first-child { font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--faint); }
form.assign label.who { grid-area: who; } form.assign label.hours { grid-area: hours; }
form.assign select { max-width: 100%; }
form.assign .hours-row { display: flex; align-items: center; gap: 10px; }
form.assign input[type=range] { flex: 1; min-width: 120px; padding: 0; border: 0; margin: 0; }
form.assign .cover { grid-area: bar; margin: 0; }
form.assign output { grid-area: note; }
form.assign button[type=submit] { grid-area: btn; justify-self: end; }
@media (max-width: 640px) { form.assign { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "who" "hours" "bar" "note" "btn"; } }
form.standing-form .standing-note { grid-area: note; margin: 0; }     /* the Market's standing offer: what it does, in words, beside its button */
form.standing-form label.hours { gap: 6px; }
form.standing-form + form.inline button { margin: 6px 0 0; }
input:disabled, select:disabled { color: var(--faint); border-color: var(--faint); opacity: .6; }   /* a box that does not count now looks it */
.market-note { margin: 12px 0 0; }
.market-tabs { display: flex; gap: 0; margin: 4px 0 14px; border-bottom: 1px solid var(--ink); }   /* the Global Market's two sides */
.market-tabs a { padding: 6px 18px 7px; color: var(--faint); text-decoration: none; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; border: 1px solid transparent; border-bottom: 0; margin-bottom: -1px; }
.market-tabs a.on { color: var(--ink); border-color: var(--ink); background: var(--paper); font-weight: 700; }
.market-tabs a:hover { color: var(--ink); }
@media (max-width: 640px) {                                            /* the Buy side on a phone: each line a small card, the button beside it */
  table.catalogue.buy thead { display: none; }
  table.catalogue.buy, table.catalogue.buy tbody { display: block; }
  table.catalogue.buy tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 10px 0; border-bottom: 1px dotted var(--rule); }
  table.catalogue.buy { width: 100%; min-width: 0; }
  table.catalogue.buy td { display: block; padding: 0; border: 0; text-align: left; white-space: normal; min-width: 0; }
  table.catalogue.buy td.coming-none { display: none; }
  table.catalogue.buy td.item { grid-column: 1 / -1; min-width: 0; }
  table.catalogue.buy td.num { text-align: left; }
  table.catalogue.buy td.num br { display: none; }
  table.catalogue.buy td.num .unit, table.catalogue.buy td.num .up, table.catalogue.buy td.num .down { margin-left: 4px; }
  table.catalogue.buy td.act { grid-column: 2; grid-row: 2 / span 4; align-self: center; }
}
.mk-pair { display: flex; }                                           /* the Market's prints: each with its panel on a phone ... */
.mk-pair > figure { flex: 1; margin: 0; }
@media (min-width: 721px) { .mk-p1 { order: 1; } .mk-p2 { order: 2; } .mk-s1 { order: 3; } .mk-s2 { order: 4; } .mk-rest { order: 5; } }   /* ... the two prints above the two panels on a desktop */
form.inline { display: inline; margin: 0; }
form.inline button { margin: 0 0 0 6px; }

.soc.cover { margin-top: 4px; }
.soc.cover .w.full { background: var(--up); }
.soc.cover .w.over { background: var(--marker); }
form.assign output { display: block; margin-top: 2px; }

form.assign .fit { margin-left: 6px; font-size: 12px; }

/* the tables on the people page fill their panel */
table.accounts { width: 100%; border-collapse: collapse; }

/* skill levels as five boxes, filled to the level: texture, not hue */
.skill { border: 0; padding: 0 10px 0 0; }
.skill .lvl { display: inline-block; vertical-align: -1px; margin-left: 4px; font-style: normal; white-space: nowrap; }
.skill .lvl b { display: inline-block; width: 7px; height: 9px; margin-right: 2px; border: 1px solid var(--ink); background: transparent; }
.skill .lvl b.on { background: var(--ink); }
.skill .fa-solid { font-size: 11px; width: 14px; text-align: center; color: var(--faint); }

td.stack .skill { display: block; margin: 2px 0; }

table.accounts th.mid, table.accounts td.mid { text-align: center; }

form.decide label { display: block; margin-top: 12px; }
form.decide input[type=range] { width: 60%; vertical-align: middle; padding: 0; border: 0; }
form.decide output { display: inline-block; margin-left: 8px; }
form.decide button { margin-top: 12px; }

table.accounts tr.house td { padding-top: 14px; border-bottom: 1px solid var(--ink); font-size: 13px; }
table.accounts tr.house .fa-solid { color: var(--faint); margin-right: 4px; }
/* ships: the icon before a name says what kind of vessel — cargo, fishing, research, the coaster */
i.ship-cargo, i.ship-coaster, i.ship-fishing, i.ship-research { margin-right: 2px; opacity: .8; }
form.assign .fit { text-decoration: none; }

/* the steps of a house: clear, order, fit, then */
ol.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
ol.steps li { position: relative; padding: 6px 0 6px 28px; border-bottom: 1px dotted var(--rule); counter-increment: step; }
ol.steps li::before { content: counter(step); position: absolute; left: 0; top: 7px; width: 18px; height: 18px; border: 1px solid var(--ink); font-size: 11px; line-height: 18px; text-align: center; }
ol.steps li.done::before { background: var(--ink); color: var(--paper); }
ol.steps li.now::before { border-width: 2px; }
ol.steps li:last-child { border-bottom: 0; }
.soc.mini { display: inline-flex; width: 90px; height: 9px; margin: 0 0 0 8px; vertical-align: middle; }
/* duties: a task card folds; closed it is one line — the name, the state, the week's bar, who is on it */
.positions { gap: 0; }
article.position, details.position { border: 0; border-bottom: 1px dotted var(--rule); padding: 6px 0; }
details.position[open] { border: 1px solid var(--rule); padding: 10px 12px; margin: 6px 0; }
.positions-head, details.position > summary { display: grid; grid-template-columns: minmax(0, 3fr) 150px 110px minmax(0, 3fr); gap: 8px 16px; align-items: center; }
.positions-head { font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--faint); padding: 2px 0 6px 20px; border-bottom: 1px solid var(--ink); margin-top: 8px; }
.positions-head span:last-child { text-align: right; }
details.position > summary { list-style: none; cursor: pointer; }
details.position > summary::-webkit-details-marker { display: none; }
details.position > summary::before { content: "\25B8"; position: absolute; left: 0; color: var(--faint); }
details.position > summary { position: relative; padding-left: 20px; }
details.position[open] > summary::before { content: "\25BE"; }
details.position > summary .sum-who { text-align: right; }
details.position > .position-body { margin-top: 10px; }
@media (max-width: 640px) { .positions-head, details.position > summary { grid-template-columns: minmax(0, 1fr) auto; } .positions-head span:nth-child(n+3), details.position > summary .sum-bar, details.position > summary .sum-who { display: none; } }

/* the island map (home page): ink on paper, the sea hatched, the settlement's things linked */
.panel.map { padding-bottom: 16px; }
.map-svg { width: 100%; height: auto; display: block; font: 12px var(--mono); border: 1px solid var(--rule); }
.map-svg .sea { fill: url(#sea-hatch); stroke: none; }
.map-svg .sea-bar { fill: var(--sea); fill-opacity: .28; }
.map-svg .coast { fill: none; stroke: var(--ink); stroke-width: 1.2; }
.map-svg .stream, .map-svg .water { fill: none; stroke: var(--sea); stroke-width: 1; }
.map-svg .mole { fill: var(--ink); stroke: var(--ink); stroke-width: 1; }
.map-svg .pt { fill: var(--faint); }
.map-svg .peak { fill: none; stroke: var(--faint); stroke-width: 1; }
.map-svg .water-pt { fill: var(--paper); stroke: var(--sea); stroke-width: 1.5; }
.map-svg .lbl { fill: var(--faint); paint-order: stroke; stroke: var(--paper); stroke-width: 3px; }
.map-svg .lbl.ink { fill: var(--ink); }
.map-svg .ico { font-family: "Font Awesome 7 Pro"; font-weight: 900; fill: var(--ink); }
.map-svg .ico.empty, .map-svg .ico.site { fill: var(--faint); }
.map-svg .ico.waiting { fill: var(--marker); }
.map-svg .site-done { stroke: var(--ink); stroke-width: 2; }
.map-svg a:hover .ico { fill: var(--marker); }
.map-svg .wind { stroke: var(--ink); stroke-width: 1.5; fill: var(--ink); }
.map-svg a { text-decoration: none; }
.map-svg a:hover .lbl { fill: var(--marker); }
.map-svg .inset-paper { fill: var(--paper); }
.map-svg .inset-border { fill: none; stroke: var(--ink); stroke-width: 1; }
.map-svg .frame { fill: none; stroke: var(--marker); stroke-width: 1; }
.map-svg .scale { fill: none; stroke: var(--ink); stroke-width: 1; }
.map-foot { font-size: 12px; margin: 8px 0 0; }

/* the building grid (13 Sep 2026): a stylish, zoomable map dividing the island into squares */
.grid-map { width: 100%; height: 100%; display: block; font: 11px var(--mono); border: 1px solid var(--ink); background: #7ea9c9; touch-action: none; cursor: grab; }
.grid-map.dragging { cursor: grabbing; }
.grid-map .sea { fill: #7ea9c9; stroke: none; }   /* solid blue water, no stripes (13 Sep 2026, the owner's call) */
.grid-map .grid-land { fill: #d7d2c2; stroke: none; }
.grid-map .cell-line { stroke: var(--ink); stroke-width: .4; stroke-opacity: .28; }
.grid-map .cell-build { fill: #2f7d2b; fill-opacity: .5; stroke: none; }
.grid-map .cell-harbour { fill: var(--marker); fill-opacity: .30; stroke: none; }
.grid-map .cell-berth { fill: #14606e; fill-opacity: .6; stroke: none; }   /* the boat berth zone, on the water (13 Sep 2026) */
.grid-map .cell-graze { fill: #a6b03e; fill-opacity: .6; stroke: none; }   /* grazing fields for the livestock, a grass olive (14 Sep 2026) */
.grid-map .cell-water { fill: #7ea9c9; stroke: none; }   /* painted water, matching the sea (an eraser for the berth) */
.grid-map .grid-coast { fill: none; stroke: var(--ink); stroke-width: 1.4; }
.grid-map .grid-stream { fill: none; stroke: var(--sea); stroke-width: 1.1; }
.grid-map .grid-water { fill: var(--sea); fill-opacity: .5; stroke: var(--sea); stroke-width: 1; }
.grid-map .grid-cliff { fill: none; stroke: #6b5b47; stroke-width: 1; stroke-dasharray: 1 2.5; stroke-opacity: .8; }
.grid-map .grid-road { fill: none; stroke: #7a4a25; stroke-width: 1; stroke-linejoin: round; stroke-linecap: round; }
.grid-map .grid-mole { fill: none; stroke: #59636e; stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; }
.grid-map .peak { fill: none; stroke: var(--ink); stroke-width: 1; }
.grid-map .pt { fill: var(--ink); }
.grid-map .lbl { fill: var(--ink); paint-order: stroke; stroke: var(--paper); stroke-width: 3px; }
.grid-map .scale { fill: none; stroke: var(--ink); stroke-width: 1; }
.grid-wrap { position: relative; width: 100%; height: calc(100vh - 210px); min-height: 380px; }
/* the player's map fills the whole space between the header and the footer, edge to edge (13 Sep 2026) */
body.map-full main { width: 100vw; max-width: none; margin: 0; padding: 0; display: flex; }
body.map-full main > section { flex: 1; margin: 0; display: flex; min-width: 0; }
body.map-full .grid-wrap.player { flex: 1; height: auto; min-width: 0; }
.grid-wrap.player .grid-map { border: none; }
.grid-back { position: absolute; top: 10px; left: 10px; z-index: 5; display: inline-flex; align-items: center; gap: 8px; font: 700 13px var(--mono); text-transform: uppercase; letter-spacing: .08em; text-decoration: none; background: var(--paper); border: 1px solid var(--ink); color: var(--ink); padding: 8px 14px; }
.grid-back:hover { background: var(--ink); color: var(--paper); }
.grid-credit { position: absolute; right: 10px; bottom: 8px; z-index: 5; margin: 0; font-size: 11px; max-width: 70%; text-align: right; }   /* the ground and the sound credited on the map page since the map left the noticeboard (15 Sep 2026) */
.grid-map.drawing { cursor: crosshair; }
.grid-map.placing { cursor: pointer; }
.grid-map .cell-hover { fill: var(--marker); fill-opacity: .28; stroke: var(--marker); stroke-width: 1; pointer-events: none; }
.grid-map .placed-glyph .ico { font-family: "Font Awesome 7 Pro"; font-weight: 900; fill: var(--ink); }
.grid-map .boat-glyph .ico { font-family: "Font Awesome 7 Pro"; font-weight: 900; fill: #0f4a55; }
.grid-map .ship-glyph .ico { font-family: "Font Awesome 7 Pro"; font-weight: 900; fill: var(--ink); }
.grid-map .sketch-line { fill: none; stroke: var(--marker); stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; }
.grid-map .sketch-line.mole { stroke: #59636e; }
.grid-map .sketch-dot { fill: var(--paper); stroke: var(--marker); stroke-width: 1.5; cursor: move; }
.grid-tools { position: absolute; top: 10px; left: 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; max-width: calc(100% - 70px); }
.grid-tools.player-tools { left: 50%; transform: translateX(-50%); max-width: calc(100% - 140px); justify-content: center; }   /* the player's only paint: grazing land, clear of the Back link and the zoom (14 Sep 2026) */
.grid-tools .tool { font: 700 12px var(--mono); background: var(--paper); border: 1px solid var(--ink); color: var(--ink); padding: 7px 12px; cursor: pointer; }
.grid-tools .tool:hover { background: var(--ink); color: var(--paper); }
.grid-tools .tool.on, .grid-tools .tool.save { background: var(--marker); color: var(--paper); border-color: var(--marker); }
.grid-tools .tool.save:hover { background: var(--ink); border-color: var(--ink); }
.grid-tools #draw-hint { font-size: 12px; background: var(--paper); padding: 2px 6px; }
.grid-tools .place-set { display: inline-flex; align-items: center; gap: 5px; background: var(--paper); border: 1px solid var(--ink); padding: 4px 8px; }
.grid-tools .place-set .faint { font-size: 12px; }
.grid-tools .place-set .tool { border: 1px solid var(--rule); padding: 5px 9px; }
.grid-tools .place-set .tool.on { border-color: var(--marker); }
.grid-tools .edit-set { display: inline-flex; align-items: center; gap: 5px; background: var(--paper); border: 1px solid var(--ink); padding: 4px 8px; }
.grid-tools .edit-set .faint { font-size: 12px; }
.grid-tools .edit-set .tool { border: 1px solid var(--rule); padding: 5px 9px; }
.grid-tools .edit-set .tool.on { border-color: var(--marker); background: var(--marker); color: var(--paper); }
.grid-map.painting { cursor: crosshair; }
.grid-zoom { position: absolute; top: 10px; right: 10px; display: flex; flex-direction: column; gap: 4px; }
.grid-zoom button { width: 34px; height: 34px; font: 700 18px var(--mono); background: var(--paper); border: 1px solid var(--ink); color: var(--ink); cursor: pointer; line-height: 1; padding: 0; }
.grid-zoom button:hover { background: var(--ink); color: var(--paper); }
.grid-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 12px 0 0; font-size: 13px; }
.grid-legend span { display: inline-flex; align-items: center; gap: 6px; }
.grid-legend i { width: 16px; height: 16px; display: inline-block; border: 1px solid var(--rule); }
.grid-legend i.build { background: #4f7a3a; opacity: .55; }
.grid-legend i.harbour { background: var(--marker); opacity: .55; }
.grid-legend i.berth { background: #14606e; opacity: .7; }
.grid-legend i.land { background: #cdd3c4; }
.grid-legend i.road { border: 0; background: linear-gradient(#7a4a25, #7a4a25) center/100% 3px no-repeat; }
.grid-legend i.mole { border: 0; background: linear-gradient(#59636e, #59636e) center/100% 4px no-repeat; }
.grid-legend i.river { border: 0; background: linear-gradient(var(--sea), var(--sea)) center/100% 2px no-repeat; }
.grid-legend i.cliff { border: 0; background: repeating-linear-gradient(90deg, #6b5b47 0 2px, transparent 2px 5px) center/100% 2px no-repeat; }

/* an identity photo stapled to the form: small, bordered, a print */
img.face { width: 40px; height: 53px; object-fit: cover; border: 1px solid var(--ink); vertical-align: middle; margin: -4px 8px -4px 0;
  filter: saturate(.8) contrast(1.05); }

/* the station's five stages */
ol.stages { list-style: none; padding: 0; counter-reset: none; }
ol.stages li.now { border-left: 2px solid var(--marker); padding-left: 10px; }

/* the station's people */
.staff { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px 16px; }
.staffer { display: flex; gap: 8px; align-items: center; padding: 8px 0; border-top: 1px dotted var(--rule); }
.staffer img.face { margin: 0; flex: none; }

/* the island's sound: one switch in the footer, text first, marker when on */
/* live audio: first in the footer's left cell, set like the user's entry; green when on, beige when off; five dots for the volume */
.sound { margin-right: 16px; color: #b9a67e; white-space: nowrap; line-height: 1; }   /* beige: not playing */
.sound.on { color: var(--up); }                                                  /* green: playing */
.sound button.link .fa-solid { font-size: 15px; width: 18px; margin-right: 0; }
.sound button.link { font: inherit; text-decoration: none; color: inherit; }
.sound button.link .fa-solid { font-size: 12px; margin-right: 2px; width: 12px; text-align: center; }
.sound button.link:hover { color: var(--ink); }
.sound .vol { display: inline-block; vertical-align: -1px; margin-left: 4px; white-space: nowrap; }     /* the five boxes of a skill, for the volume */
.sound .dot { display: inline-block; width: 7px; height: 9px; margin: 0 2px 0 0; padding: 0; color: inherit; border: 1px solid currentColor; background: transparent; cursor: pointer; vertical-align: 0; }   /* colour inherited: the site's buttons are paper on ink */
.sound .dot.lit { background: currentColor; }
.sound .dot:hover { border-color: var(--ink); background: transparent; }
.sound .dot.lit:hover { background: currentColor; }

/* the met station's camera on the home page: a print that changes with the light and the weather */
.cam-frame { position: relative; overflow: hidden; }
figure.panel.hero.cam.span-12 .cam-frame img { aspect-ratio: 2 / 1; object-fit: cover; object-position: 50% 55%; }   /* full width on the noticeboard: a little sky and grass trimmed; narrower, the whole frame */
figure.panel.hero.cam .cam-frame img.next { position: absolute; top: 0; left: 0; opacity: 0; transition: opacity 4s ease; }
figure.panel.hero.cam .cam-frame img.next.shown { opacity: 1; }
.cam-band { position: absolute; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; gap: 12px; padding: 6px 10px;
  background: rgba(0, 0, 0, .58); color: #fff; font-size: 12px; font-weight: 700; line-height: 1.2; letter-spacing: .12em;
  text-transform: uppercase; font-variant-numeric: tabular-nums; white-space: nowrap; }   /* a webcam's own band: whose camera, left; the frame's date and time, right */
.cam-band > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }   /* on the narrowest phones the name gives way, never the time */
.cam-band > .cam-time { flex: none; }
@media (max-width: 720px) { figure.panel.hero.cam.span-12 .cam-frame img { aspect-ratio: 3 / 2; } .cam-band { font-size: 10px; letter-spacing: .06em; padding: 4px 8px; } }

/* ordering supply: the amount on a log slider, priced live (static/quote.js) */
.qty { margin: 0 0 16px; }
.qty-now { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.qty-now .qty-n { font-size: 32px; font-weight: 700; line-height: 1.1; }
.qty-row { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; margin-top: 8px; }
.qty-row button { margin: 0; min-width: 40px; font-size: 18px; padding: 4px 12px; }
.qty-scale { display: flex; justify-content: space-between; margin-top: 2px; }
input[type=range] { -webkit-appearance: none; appearance: none; margin: 0; padding: 0; border: 0; height: 28px; background: transparent; cursor: pointer; }
input[type=range]::-webkit-slider-runnable-track { height: 1px; background: var(--ink); }
input[type=range]::-moz-range-track { height: 1px; background: var(--ink); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: -9px; background: var(--ink); border: 0; border-radius: 0; }
input[type=range]::-moz-range-thumb { width: 18px; height: 18px; background: var(--ink); border: 0; border-radius: 0; }
input[type=range]:focus-visible { outline: 1px dotted var(--ink); outline-offset: 4px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.chips .chip { margin: 0; text-transform: none; font-weight: 400; letter-spacing: 0; }
.chips .chip .unit { color: inherit; opacity: .7; }
.ledger dd.qty-bar { grid-column: 1 / -1; margin: -4px 0 4px; }
.qty-bar .level { margin: 0; height: 8px; }
.level i.over { background: var(--marker); width: 100% !important; }
.q-curve { display: block; width: 100%; height: 140px; margin-top: 12px; border: 1px solid var(--rule); }
.q-curve .q-line { fill: none; stroke: var(--ink); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.q-curve .q-ref { stroke: var(--faint); stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.q-curve .q-over { fill: var(--marker); opacity: .08; }
.q-curve .q-dot { fill: var(--ink); stroke: var(--paper); stroke-width: 2; }
.q-curve .q-dot.over { fill: var(--marker); }
table.ships tr.off td { color: var(--faint); }
.ledger dd.note-row { grid-column: 1 / -1; margin: -2px 0 6px; text-align: left; }
.ledger dt details.note { position: static; display: inline-block; vertical-align: baseline; }   /* an "i" beside a row's name; its sheet opens across the panel under the row, so it never runs off a tablet */
.ledger dt details.note summary { padding: 0 4px; }
.ledger dt details.note .note-body { top: auto; left: 16px; right: 16px; width: auto; margin-top: 10px; color: var(--ink); }
.nowrap { white-space: nowrap; }
.ledger dd.list { grid-column: 2 / -1; }                         /* a list in a ledger row: the leader's room too, each entry on one line */
@media (max-width: 720px) { .ledger dd.list { grid-column: 1 / -1; margin-top: -2px; } }   /* a phone: the whole row under its name */
.ledger hr.ledger-rule { grid-column: 1 / -1; width: 100%; margin: 6px 0; border: 0; border-top: 1px solid transparent; }   /* a line across a ledger, between its parts */

/* the start page (13 Sep 2026, the owner's wish): the opening's picture behind it, very light, gone at
   the top and strongest at the bottom; the panels keep a paper ground so their words stay clean */
.welcome-bg { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .32; filter: saturate(.75);
              background: url("/static/prints/intro-bg.jpg") center 70% / cover no-repeat;
              -webkit-mask-image: linear-gradient(to bottom, transparent 0%, transparent 18%, rgba(0,0,0,.45) 55%, #000 100%);
              mask-image: linear-gradient(to bottom, transparent 0%, transparent 18%, rgba(0,0,0,.45) 55%, #000 100%); }
@media (max-width: 1000px) { .welcome-bg { background-image: url("/static/prints/intro-bg-1000.jpg"); } }
.welcome-bg.docks { background-image: url("/static/prints/cape-town-office.jpg"); background-position: center 45%; }   /* the founding form: the agent's office over the Cape Town docks */
@media (max-width: 1000px) { .welcome-bg.docks { background-image: url("/static/prints/cape-town-office-768.jpg"); } }
.panel.on-print { background: color-mix(in srgb, var(--paper) 88%, transparent); }

/* before login the masthead has one thing: a framed Log in, as on the opening (13 Sep 2026, the owner's call) */
.masthead a.login { color: var(--ink); text-decoration: none; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; line-height: 1;
                    border: 1px solid var(--ink); padding: 7px 13px 7px 14px; }
.masthead a.login:hover, .masthead a.login:focus-visible { background: var(--ink); color: var(--paper); outline: none; }

.panel h2.who-are-you { margin: 18px 0 6px; font-size: 20px; }   /* the founding form's question, above the fields it asks for */

/* the founding form (13 Sep 2026, the owner's call): one question a row, the label left, the answer right */
form.profile { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 14px 24px; align-items: center; margin-top: 14px; }
form.profile .row { display: contents; }
form.profile .row > label, form.profile .row > .label { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); margin: 0; }
form.profile select, form.profile input { width: 16rem; max-width: 100%; margin: 0; box-sizing: border-box; height: 38px; padding: 6px 10px;
                                         font: inherit; color: var(--ink); background: var(--paper); border: 1px solid var(--ink); border-radius: 0; }
form.profile .unit { display: block; margin-top: 3px; }
form.profile button { grid-column: 2; justify-self: start; margin-top: 6px; }
@media (max-width: 520px) { form.profile { grid-template-columns: 1fr; gap: 4px; } form.profile .row > label, form.profile .row > .label { margin-top: 10px; } form.profile button { grid-column: 1; margin-top: 16px; } }
form.profile .choice { display: flex; gap: 28px; min-height: 38px; align-items: center; }
form.profile .choice label { display: inline-flex; align-items: center; gap: 8px; margin: 0; cursor: pointer; font-size: 16px; letter-spacing: normal; text-transform: none; color: var(--ink); }
form.profile .choice input[type=radio] { width: 20px; height: 20px; margin: 0; padding: 0; border: 0; accent-color: var(--marker); cursor: pointer; }
form.profile .age { display: flex; align-items: center; gap: 16px; min-height: 38px; width: 16rem; max-width: 100%; }
form.profile .age input[type=range] { flex: 1; width: auto; height: 28px; padding: 0; border: 0; background: transparent; }
form.profile .age output { min-width: 2.5ch; text-align: right; font-size: 18px; }

/* sliders never get the focus frame (13 Sep 2026, the owner's call): touched with the mouse or a finger they
   stay as they are; moved with the keys, the handle itself turns to marker instead of a frame round it */
input[type=range]:focus, input[type=range]:focus-visible { outline: none; }
input[type=range]:focus-visible::-webkit-slider-thumb { background: var(--marker); }
input[type=range]:focus-visible::-moz-range-thumb { background: var(--marker); }

/* scene 2, the charter (13 Sep 2026, the owner's layout): three tall cards side by side to compare, the ship's
   picture on top, the figures as ledger rows, the price and the way on at the foot of each */
.ship-card { display: flex; flex-direction: column; padding-top: 0; }
.ship-card .ship-pic { position: relative; margin: 0 -24px 16px; }
.ship-card .ship-pic .recommend { position: absolute; left: 12px; top: 12px; background: var(--paper); padding: 4px 8px; }
.ship-card .ship-pic img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.ship-card .ship-name { margin: 0; font-size: 22px; }
.ship-card .what { margin: 2px 0 12px; min-height: 4.5em; }
.ship-card .ledger { margin: 0 0 12px; font-size: 14px; }
.ship-card .words { margin: 0 0 8px; }
.ship-card .odds { margin: 0 0 16px; font-size: 13px; }
.ship-card .price-block { margin-top: auto; border-top: 1px solid var(--rule); padding-top: 14px; }
.ship-card .price-block .big { margin: 0; }
.ship-card .price-block .faint { margin: 2px 0 12px; }
.ship-card.recommended { border-width: 2px; }
@media (max-width: 900px) { .ship-card { grid-column: span 12; } .ship-card .ship-pic img { max-height: 320px; } }   /* stacked: the picture no taller than a phone's third */

/* scene 4, the cargo (13 Sep 2026, the owner's call): a wizard — the steps as a numbered bar, the step on
   the left with its way on at the foot, her hold on the right, kept in view while the step scrolls */
.cargo-steps ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px;
                  font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.cargo-steps li b { display: inline-block; min-width: 20px; margin-right: 8px; padding: 3px 4px; border: 1px solid currentColor; text-align: center; font-weight: 700; letter-spacing: 0; }
.cargo-steps a { color: var(--ink); text-decoration: none; }
.cargo-steps a:hover, .cargo-steps a:focus-visible { color: var(--marker); outline: none; }
.cargo-steps li.current { color: var(--ink); font-weight: 700; }
.cargo-steps li.current b { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.cargo-step .step-title { margin: 0 0 6px; font-size: 22px; }
.cargo-step h3 { margin: 0 0 4px; font-size: 16px; }
.cargo-step .over, .cargo-tally .over { color: var(--down); }
.cargo-line { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 20px; padding: 16px 0; border-top: 1px solid var(--rule); }
.cargo-line.no-pic { grid-template-columns: minmax(0, 1fr); }
.cargo-line img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.cargo-line .faint { font-size: 14px; margin-bottom: 8px; }
.cargo-line .ledger { font-size: 14px; }
@media (max-width: 620px) { .cargo-line { grid-template-columns: minmax(0, 1fr); } }
.cargo-part { padding: 16px 0 8px; border-top: 1px solid var(--rule); }
.cargo-part .big { margin: 4px 0 0; }
.cargo-part .figs, .cargo-pick .figs { margin: 0 0 6px; font-variant-numeric: tabular-nums; }
.cargo-part .faint { font-size: 14px; }
.cargo-picks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 8px; }
@media (max-width: 560px) { .cargo-picks { grid-template-columns: minmax(0, 1fr); } }
.cargo-pick { display: flex; flex-direction: column; border: 1px solid var(--rule); padding: 0 12px 10px; min-width: 0; }
.cargo-pick.on { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.cargo-pick.cannot { opacity: .6; }
.cargo-pick img { display: block; width: calc(100% + 24px); margin: 0 -12px; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.cargo-pick label.pick { display: flex; align-items: center; gap: 10px; margin: 10px 0 4px; font-size: 16px; font-weight: 700; letter-spacing: normal; text-transform: none; color: var(--ink); cursor: pointer; }
.cargo-pick label.pick input { display: inline-block; width: 20px; height: 20px; margin: 0; padding: 0; border: 0; accent-color: var(--marker); cursor: pointer; flex: none; }
.cargo-pick .why { font-size: 13px; margin-bottom: 6px; }
.cargo-pick .slider input[type=range] { margin: 8px 0 10px; }
.cargo-pick .size-line { margin: 0; font-size: 18px; }
.step-foot { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--rule); }
.step-foot .subtotal { margin: 0 0 12px; font-variant-numeric: tabular-nums; }
.step-foot .buttons { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: flex-end; margin: 0; }
.step-foot .buttons button, .step-foot .buttons a.button { margin-top: 0; padding: 8px 16px; font: 700 14px var(--mono); text-transform: uppercase; letter-spacing: .12em; }
.step-foot.pay { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: end; justify-content: space-between; }
.step-foot.pay .big { margin: 0; }
.step-foot.pay .faint { margin: 2px 0 0; }
button[disabled] { opacity: .4; cursor: not-allowed; }
button[disabled]:hover { background: var(--ink); color: var(--paper); }
.cargo-tally { align-self: start; position: sticky; top: 16px; }
.cargo-tally .meter-row { grid-template-columns: 6ch minmax(0, 1fr) max-content; }
.cargo-tally .ledger { font-size: 14px; }
.cargo-tally .ledger dd.money { font-weight: 700; }
.cargo-tally .trades, .cargo-tally .crew { margin: 12px 0 0; font-size: 13px; }
@media (max-width: 720px) { .cargo-tally { position: relative; top: auto; } }   /* stacked: in the flow, and still the stamp's frame */
.table-wrap { overflow-x: auto; }
table.manifest { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
table.manifest th, table.manifest td { padding: 4px 8px 4px 0; text-align: right; vertical-align: top; }
table.manifest th:first-child, table.manifest td:first-child { text-align: left; }
table.manifest thead th { font-size: 12px; font-weight: 400; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); border-bottom: 1px solid var(--ink); }
table.manifest tr.group th { padding-top: 12px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
table.manifest tr.group a { color: var(--ink); text-decoration: none; border-bottom: 1px dotted var(--faint); }
table.manifest tr.group a:hover { color: var(--marker); }
table.manifest tfoot th, table.manifest tfoot td { border-top: 1px solid var(--ink); font-weight: 700; }
table.manifest tfoot tr + tr th, table.manifest tfoot tr + tr td { border-top: 0; font-weight: 400; }
ul.problems { list-style: none; margin: 16px 0 0; padding: 0; }
ul.problems a { color: inherit; }
.ship-card.chosen { border-width: 2px; border-color: var(--marker); }
table.manifest td .faint { white-space: nowrap; }   /* "the Crown's" stays on one line in the price column */

/* the cargo wizard's options (the boat) and count (the containers), and the recommendations (13 Sep 2026, the owner's wishes) */
.cargo-picks.options { grid-template-columns: minmax(0, 1fr); }                 /* the boat: one big card a size, the pictures large */
.cargo-pick.option { flex-direction: row; align-items: stretch; gap: 0; cursor: pointer; padding: 0; }
.cargo-pick.option img { width: 320px; flex: none; margin: 0; align-self: stretch; height: auto; aspect-ratio: auto; object-fit: cover; }
.cargo-pick.option .body { display: flex; flex: 1; flex-direction: column; gap: 4px; padding: 12px 14px; min-width: 0; }
.cargo-pick.option .pick { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; font-size: 17px; font-weight: 700; letter-spacing: normal; text-transform: none; color: var(--ink); }
.cargo-pick.option .pick .nm { flex: none; }
.cargo-pick.option .pick input[type=radio] { width: 20px; height: 20px; margin: 0; accent-color: var(--marker); flex: none; }
.cargo-pick.option .facts { font-size: 13px; margin: 2px 0; }
.cargo-pick.option .over { color: var(--down); font-size: 13px; }
.cargo-pick.option .figs { margin-top: auto; font-variant-numeric: tabular-nums; }
@media (max-width: 620px) { .cargo-pick.option { flex-direction: column; } .cargo-pick.option img { width: 100%; } }
.cargo-extras { margin-top: 12px; display: grid; gap: 8px; }
.cargo-extra { display: flex; gap: 0; align-items: stretch; border: 1px solid var(--rule); cursor: pointer; overflow: hidden; }
.cargo-extra.no-pic { padding: 10px 12px; }
.cargo-extra.on { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.cargo-extra img { width: 200px; flex: none; align-self: stretch; object-fit: cover; }
.cargo-extra .body { display: flex; flex-direction: column; gap: 4px; padding: 10px 14px; min-width: 0; }
.cargo-extra .head { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.cargo-extra input { width: 20px; height: 20px; margin: 0; accent-color: var(--marker); flex: none; }
.cargo-extra .faint { font-size: 13px; }
.cargo-extra .figs { margin-top: auto; font-variant-numeric: tabular-nums; }
@media (max-width: 620px) { .cargo-extra { flex-direction: column; } .cargo-extra img { width: 100%; height: auto; aspect-ratio: 3/2; } }
.rec { margin: 4px 0 0; font-size: 13px; color: var(--marker); letter-spacing: .04em; }
.rec-tag { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--marker); border: 1px solid var(--marker); padding: 1px 6px; margin-left: 6px; white-space: nowrap; }
.rec-note { margin: -4px 0 12px; font-size: 14px; }

/* scene 3, the team (13 Sep 2026, the owner's call): the quay's applicants by trade, choose six */
.founder-card { display: flex; align-items: center; gap: 14px; }
.founder-card .face { width: 46px; height: 61px; object-fit: cover; border: 1px solid var(--ink); }
.recruit-group { padding-top: 30px; }
.recruit-group .stamp .fa-solid { margin-right: 4px; }
.recruits { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.recruit { position: relative; display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: 12px; align-items: start; border: 1px solid var(--rule); padding: 12px; cursor: pointer; }
.recruit:hover { border-color: var(--ink); }
.recruit.shown { cursor: default; }   /* the crew is shown, not chosen (13 Sep 2026): the card does not react */
.recruit.shown:hover { border-color: var(--rule); }
.recruit-bar form { margin: 0; }
.recruit.on { border-color: var(--marker); box-shadow: inset 0 0 0 1px var(--marker); }
.recruit input[type=checkbox] { position: absolute; opacity: 0; width: 0; height: 0; }
.recruit .face { width: 60px; height: 80px; object-fit: cover; border: 1px solid var(--ink); }
.recruit .face.ph { background: var(--rule); display: block; }
.recruit .who b { font-size: 15px; }
.recruit .skills { display: block; margin: 4px 0; line-height: 1.9; }
.recruit .motive { display: block; font-size: 13px; }
.recruit .tick { position: absolute; top: 8px; right: 8px; width: 22px; height: 22px; border: 1px solid var(--ink); display: grid; place-items: center; color: var(--paper); background: var(--paper); }
.recruit .tick .fa-solid { font-size: 12px; opacity: 0; }
.recruit.on .tick { background: var(--marker); border-color: var(--marker); }
.recruit.on .tick .fa-solid { color: var(--paper); opacity: 1; }
.recruit input:disabled ~ .tick { opacity: .35; }
.recruit-bar { position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 16px;
               background: var(--paper); border: 1px solid var(--ink); padding: 12px 18px; margin-top: 4px; }
.recruit-bar .count b { font-size: 20px; }
.recruit-bar .count.enough b { color: var(--up); }
.recruit-bar button { margin: 0; }

/* scene 5, the passage (13 Sep 2026, the owner's call): the map of the South Atlantic, the ship, the ETA */
.voyage .sea-wrap { overflow-x: auto; margin: 0 0 16px; }
.sea { display: block; width: 100%; height: auto; border: 1px solid var(--ink); background: var(--paper); }
.sea .ocean { fill: color-mix(in srgb, var(--ink) 5%, var(--paper)); }
.sea .grid { stroke: var(--rule); stroke-width: 1; stroke-dasharray: 2 4; }
.sea .gl { fill: var(--faint); font: 11px var(--mono); }
.sea .coast { fill: color-mix(in srgb, var(--ink) 12%, var(--paper)); stroke: var(--rule); }
.sea .route { fill: none; stroke: var(--faint); stroke-width: 1.5; stroke-dasharray: 4 5; }
.sea .sailed { fill: none; stroke: var(--marker); stroke-width: 2.5; }
.sea .port circle { fill: var(--ink); }
.sea .port text { fill: var(--ink); font: 700 12px var(--mono); }
.sea .port.dest circle { fill: var(--marker); }
.sea #ship .hull { fill: var(--marker); stroke: var(--paper); stroke-width: 2; }
.sea #ship .wake { stroke: var(--marker); stroke-width: 1.5; opacity: .4; }
.voyage-facts { max-width: 460px; margin-bottom: 16px; }
.voyage-facts #eta { font-weight: 700; }
.voyage-facts #eta.there { color: var(--up); }
.voyage-go { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.voyage-go button { margin: 0; }

.sea .land-label { fill: color-mix(in srgb, var(--ink) 55%, var(--paper)); font: 700 13px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
/* the voyage's sea background (13 Sep 2026, the owner's wish): the open ocean behind the map, a shade more present than the docks */
.welcome-bg.voyage-bg { background-image: url("/static/prints/voyage-bg.jpg"); background-position: center 40%; opacity: .4; }
@media (max-width: 1000px) { .welcome-bg.voyage-bg { background-image: url("/static/prints/voyage-bg-768.jpg"); } }
.voyage-eta { display: flex; align-items: baseline; gap: 12px; margin: 0 0 14px; }
.voyage-eta .lbl { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.voyage-eta .big { font-size: 30px; line-height: 1; font-variant-numeric: tabular-nums; }
.voyage-eta .big.there { color: var(--up); }

/* the founding voyage's chapter cards (13 Sep 2026, the owner's call): a title card over the scene's background */
.chapter { grid-column: span 12; min-height: min(72vh, 620px); display: grid; place-items: center;
           margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); width: 100vw; position: relative; padding: 48px 16px;
           background-size: cover; background-position: center 45%; }
.chapter.docks { background-image: url("/static/prints/cape-town-office.jpg"); }
.chapter.sea { background-image: url("/static/prints/voyage-bg.jpg"); }
.chapter.island { background-image: url("/static/prints/intro-bg.jpg"); }
.chapter::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,20,18,.35), rgba(20,20,18,.55)); }
.chapter-card { position: relative; max-width: 560px; text-align: center; background: color-mix(in srgb, var(--paper) 94%, transparent);
                border: 1px solid var(--ink); padding: 40px 32px; box-shadow: 0 8px 40px rgba(0,0,0,.3);
                animation: chapter-in .9s ease both; }
@keyframes chapter-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.chapter-card .eyebrow { margin: 0 0 10px; font-size: 12px; letter-spacing: .28em; text-transform: uppercase; color: var(--marker); }
.chapter-card h1 { margin: 0 0 16px; font-size: 34px; }
.chapter-card .line { margin: 0 0 28px; font-size: 16px; line-height: 1.5; color: var(--ink); }
.chapter-card .go { display: inline-block; padding: 10px 22px; font: 700 14px var(--mono); text-transform: uppercase; letter-spacing: .12em; }

/* scene 6, arrival (13 Sep 2026, the owner's call): the first lesson in job assignment */
.chapter.arrival { background-image: url("/static/prints/arrival.jpg"); background-position: center 40%; }
.woke { border: 1px solid var(--up); color: var(--up); padding: 10px 14px; letter-spacing: .04em; }
.arr-task { padding-top: 30px; }
.arr-task.done { opacity: .7; }
.arr-task.done .stamp { color: var(--up); }
.arr-task.locked .stamp { color: var(--faint); }
.arr-head h3 { margin: 0 0 4px; font-size: 18px; }
.arr-head .faint { margin: 0 0 12px; }
.arr-hint { margin: 0 0 12px; font-size: 14px; }
.arr-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px; }
.arr-person { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 10px; align-items: center; border: 1px solid var(--rule); padding: 8px 10px; cursor: pointer; position: relative; }
.arr-person input { position: absolute; opacity: 0; }
.arr-person .face { width: 40px; height: 53px; object-fit: cover; border: 1px solid var(--ink); }
.arr-person.on { border-color: var(--marker); box-shadow: inset 0 0 0 1px var(--marker); }
.arr-person:not(.suits) { opacity: .6; }
.arr-person .who b { font-size: 14px; }
.arr-person .skills { line-height: 1.9; font-size: 12px; }
.arr-foot { display: flex; align-items: center; justify-content: flex-end; gap: 14px; margin-top: 14px; }
.arr-foot button { margin: 0; }

/* arrival, single-job view (13 Sep 2026, the owner's call): a picture, a countdown, and only the suited hands */
.arr-pic { display: block; width: 100%; height: auto; aspect-ratio: 3/2; object-fit: cover; margin: 0 0 16px; border: 1px solid var(--ink); }
.arr-working { margin-top: 8px; }
.arr-crew { margin: 0 0 8px; }
.arr-count { margin: 0 0 8px; display: flex; align-items: baseline; gap: 12px; }
.arr-count .lbl { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.arr-count b { font-size: 30px; font-variant-numeric: tabular-nums; }
.arr-bar { height: 8px; border: 1px solid var(--ink); }
.arr-bar i { display: block; height: 100%; background: var(--marker); width: 0; transition: width 1s linear; }
.arr-next { margin-top: 4px; }
.arr-next button { margin: 8px 0 0; }
.arr-person.unfit { opacity: .5; cursor: not-allowed; }
.arr-person.unfit input { cursor: not-allowed; }
.arr-est { margin: 14px 0 0; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.arr-est .lbl { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.arr-est b { font-size: 22px; font-variant-numeric: tabular-nums; }
.name-card { margin-top: 8px; }
.name-form label { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.name-form input { width: 100%; margin: 8px 0 10px; padding: 12px 14px; font: 20px var(--mono); border: 1px solid var(--ink); border-radius: 0; background: var(--paper); color: var(--ink); }
.name-form .faint { margin: 0 0 16px; }
.name-form button { margin: 0; }

/* Livestock on the Global Market's Buy side, and the animal's own page (14 Sep 2026) */
.ls-group { margin: 14px 0 6px; font: 700 13px var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.ls-cards { display: flex; flex-wrap: wrap; gap: 14px; }
.ls-card { flex: 1 1 220px; max-width: 320px; border: 1px solid var(--rule); border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; }
.ls-thumb { display: block; aspect-ratio: 3 / 2; background: color-mix(in srgb, currentColor 8%, transparent); }
.ls-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(.9); }
.ls-noimg { display: flex; align-items: center; justify-content: center; height: 100%; font-size: 40px; color: var(--faint); }
.ls-body { padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; }
.ls-body strong { font-size: 16px; }
.ls-why { color: var(--faint); }
.ls-card .button.ghost { background: transparent; }
.grid-tools .graze-hint { font: 700 12px var(--mono); background: var(--marker); color: var(--paper); padding: 6px 10px; border-radius: 4px; }
.flock-acts { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 10px; }
.flock-acts .unit { font-size: 12px; }
/* work-personality fit thumb (14 Sep 2026): does this week suit them */
.fit-up { color: #3a8a4a; } .fit-down { color: #c4472a; } .fit-ok { color: var(--faint); opacity: .6; }
/* Work Balance line on the person card (14 Sep 2026): workdrive as three boxes, the week's load, and the impact as a word coloured green / neutral / red (.fit-* above) */
/* the nationality flag beside the age: a small passport stamp, thin-bordered to sit in the muted palette */
h1 .flag { display: inline-block; width: 27px; height: 20px; vertical-align: -3px; margin: 0 2px; object-fit: cover;
  border: 1px solid var(--rule); border-radius: 2px; }
/* Happiness as five boxes filled to the score, coloured by band: green glad, neutral middling, red low */
.hap-lvl b.on.h-up { background: #3a8a4a; border-color: #3a8a4a; } .hap-lvl b.on.h-ok { background: var(--faint); border-color: var(--faint); } .hap-lvl b.on.h-down { background: #c4472a; border-color: #c4472a; }
/* the household morale as boxes: green for a lift (+1, +2), red for a drag (-1, -2), one empty box for neutral */
.morale-lvl b.on.mo-up { background: #3a8a4a; border-color: #3a8a4a; } .morale-lvl b.on.mo-down { background: #c4472a; border-color: #c4472a; } .morale-lvl b.on.mo-ok { background: var(--faint); border-color: var(--faint); }
/* the social scale is a match, not a merit: five neutral boxes, the filled one marks where they sit (Extrovert … Loner) */
.social-lvl b { opacity: .55; } .social-lvl b.on.mo-ok { background: var(--faint); border-color: var(--faint); opacity: 1; }
/* the happiness line sits a little larger than the work balance below it */
.hap-line .skill { font-size: 15px; } .hap-line .hap-lvl b { width: 9px; height: 12px; }
.big .big-hap { font-size: 15px; font-weight: 400; margin-left: 10px; white-space: nowrap; }   /* the noticeboard: the settlement's happiness beside the head count, in the person card's dress */
/* the week's movers on the People card (15 Sep 2026): a round face with the arrow of the way their happiness went */
.movers { white-space: nowrap; }
.movers .mover { position: relative; display: inline-block; vertical-align: middle; width: 36px; height: 36px; margin-right: 6px; text-decoration: none; border-bottom: 0; }   /* no dotted link line under a face */
.movers .mover img, .movers .mover .noface { display: block; width: 36px; height: 36px; border-radius: 50%; object-fit: cover; object-position: 50% 15%; border: 1px solid var(--ink); background: var(--rule); }
.movers .mover b { position: absolute; right: -6px; bottom: -3px; font-size: 10px; line-height: 1; padding: 2px; border-radius: 50%; background: var(--paper); }
.movers .unit { vertical-align: middle; }
/* the last thing anyone wrote, quoted at the foot of the People card in place of the links (15 Sep 2026) */
.last-word { display: flex; gap: 10px; align-items: flex-start; margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--rule); font-size: 13px; }
.last-word .chat-face { display: block; }
.ledger dd.hand { display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-end; gap: 2px 6px; }
@media (max-width: 600px) { .ledger dd.hand { flex-wrap: wrap; } }   /* the name and its hours on one line; only a phone wraps them (18 Sep 2026) */
.ledger dd.hand > * { white-space: nowrap; }
.place-it { white-space: nowrap; text-decoration: none; border-bottom: 0 !important; }                 /* a kit's map icon: place it (18 Sep 2026, the owner) */
.place-it.placed { color: var(--faint) !important; }
details.position.unplaced > summary { opacity: .55; }                        /* a kit on Workloads with no square yet: greyed (18 Sep 2026, the owner) */                                /* the face with the name, the hours: each whole, the hours under them on a phone */   /* the face, the name and its hours on one line */
.ledger dd.hand a { display: inline-flex; align-items: center; gap: 8px; border-bottom: 0; }
.ledger dd.hand a .name { border-bottom: 1px dotted var(--faint); }        /* the name's dotted line, not under the face */
a:has(> .chat-face) { text-decoration: none; border-bottom: 0; }        /* a face that links is not underlined, here or on the dashboard */
.ledger .leader.bare { border-bottom: 0; }
.ledger .leader.bare + dd, .ledger dt:has(+ .leader.bare) { align-self: center; }   /* a row with faces: no dotted leader, the key level with them */                 /* the keeper's face, round, before the name (18 Sep 2026, the owner) */
.hand-face { width: 28px; height: 28px; flex: 0 0 28px; object-position: 50% 20%; }
.last-word-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.last-word q { quotes: "\201C" "\201D"; font-style: italic; }
.last-word .unit a { color: inherit; }
/* Homes (14 Sep 2026): each house's balance line, a row per person, the move control per household */
.home-balance { margin: 0 0 12px; } .home-balance .skill { margin-right: 14px; }
table.homes td { vertical-align: top; }
table.homes tr.hh-first td { border-top: 1px solid var(--rule); }
table.homes td.stack { min-width: 170px; } table.homes td.stack .skill { display: block; margin: 1px 0; white-space: nowrap; }
table.homes th { white-space: nowrap; } table.homes td:first-child { min-width: 130px; } table.homes td.unit { font-size: 12px; min-width: 190px; }
table.homes .move-cell { width: 230px; min-width: 210px; }
.move-form { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.move-form select { width: 100%; font-size: 12px; }
.move-why { margin-top: 6px; } .move-why summary { cursor: pointer; }
ul.move-deltas { list-style: none; margin: 4px 0; padding: 0; font-size: 12px; } ul.move-deltas li { margin: 2px 0; }
/* what a person says as you look in (14 Sep 2026): a speech bubble over the portrait and the card */
.says { margin: -4px 0 4px; }
.says-bubble { position: relative; display: inline-block; max-width: 100%; margin: 0; padding: 10px 16px; border: 1px solid var(--ink);
  border-radius: 14px; background: var(--paper); font-size: 16px; font-style: italic; }
.says-bubble::after { content: ""; position: absolute; left: 34px; bottom: -8px; width: 12px; height: 12px; background: var(--paper);
  border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink); transform: rotate(45deg); }
.says.bothered .says-bubble { border-color: #c4472a; } .says.bothered .says-bubble::after { border-color: #c4472a; }
.says-about { margin: 12px 0 0 2px; font-size: 12px; }

/* the hold beside a hand on a standing task (15 Sep 2026): a closed lock is held, an open one released */
button.link.hold { color: var(--ink); }
button.link.faint { opacity: .5; }

/* the developer's notepad (15 Sep 2026 night): the icon beside the speaker, a pad of sheets over the page */
.sound .notepad-btn { font: inherit; color: #b9a67e; margin-left: 10px; text-decoration: none; }   /* beside the volume, on its line */
.sound .notepad-btn .fa-solid { font-size: 15px; width: 18px; margin-right: 0; }
.sound .notepad-btn:hover { color: var(--ink); }
.notepad { position: fixed; left: 0; right: 0; top: var(--masthead-h, 73px); bottom: var(--footer-h, 76px); z-index: 30; display: flex; flex-direction: column; background: var(--paper); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); padding: 0 max(16px, calc((100vw - 1200px) / 2)); }   /* the whole page between the masthead and the footer */
.notepad textarea { font-size: 15px; }
.notepad-head { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-bottom: 1px solid var(--ink); font-size: 12px; }
.notepad-head .tabs { display: flex; flex-wrap: wrap; gap: 4px; flex: 1 1 auto; min-width: 0; }
.notepad-head .tab { font: inherit; font-size: 12px; letter-spacing: .02em; text-transform: none; color: var(--faint); text-decoration: none; border: 1px solid var(--rule); padding: 3px 8px; max-width: none; white-space: nowrap; }   /* the whole title, readable (16 Sep 2026) */
.notepad-head .tab.on { color: var(--ink); border-color: var(--ink); }
.notepad-head .add, .notepad-head .close { font: inherit; color: var(--faint); text-decoration: none; padding: 0 4px; }
.notepad-head .saved { color: var(--faint); font-size: 11px; white-space: nowrap; }
.notepad .title { font: inherit; font-weight: 700; border: 0; border-bottom: 1px solid var(--rule); padding: 6px 10px; background: transparent; color: var(--ink); }
.notepad textarea { flex: 1 1 auto; font: inherit; font-size: 13px; line-height: 1.5; border: 0; padding: 10px; background: transparent; color: var(--ink); resize: none; outline: none; }
.notepad-foot { padding: 4px 8px; border-top: 1px solid var(--rule); font-size: 11px; text-align: right; }
.notepad-foot .del { font: inherit; font-size: 11px; color: var(--faint); text-decoration: none; }
.notepad-foot .del:hover { color: var(--down); }
.grid-map.naming .lbl[data-name] { cursor: move; }
.grid-map.naming .lbl[data-name]:hover { fill: var(--marker); }
.accounts td .who { display: inline-block; vertical-align: middle; }   /* the name and, under it, what you call them, one block beside the face (16 Sep 2026) */
.admin-mark { color: var(--marker); text-decoration: none; font: 700 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; }   /* the admin session's mark in the footer (16 Sep 2026) */
.admin-mark.viewing { color: var(--down); }

/* the keep line on the Store (the Tristan trade, 16 Sep 2026): a small form in the cell, the input marked when the player has set it above the reserve */
.keep-form { display: inline-flex; gap: 4px; align-items: center; margin: 0 0 2px; }
.keep-form input { width: 7ch; font: inherit; font-size: 13px; padding: 2px 4px; text-align: right; }
.keep-form input.set { border-color: var(--marker); }
.keep-form button.small { padding: 3px 8px; font-size: 11px; }
.cols-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 32px; }                 /* the Tristan card: the call on the left, their list on the right (16 Sep 2026) */
@media (max-width: 720px) { .cols-2 { grid-template-columns: 1fr; } }
.accounts tr.group td { padding-top: 14px; font: 700 11px var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--ink); border-bottom: 1px solid var(--ink); }   /* the Store's shelves in the owner's four groups (16 Sep 2026) */
table.shelves td.item { min-width: 220px; }                             /* the Store's lines as the Global Market's buy page has them: the name on one line, the words under it (16 Sep 2026) */
table.shelves td.item .unit { display: block; line-height: 1.3; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }   /* words for a screen reader where the eye gets an icon (16 Sep 2026) */
table.shelves .unit .fa-solid[title] { cursor: help; color: var(--sea); }
table.shelves .held { cursor: help; white-space: nowrap; }                /* held / for sale over the counter / offered on the Global Market (16 Sep 2026, the owner's triple) */
table.shelves .col-icon { color: var(--faint); font-size: 12px; margin-left: 2px; cursor: help; }   /* the Store's Inbound figure, a ship behind the number (16 Sep 2026) */

/* ---- 16 Sep 2026: the templates standardised (RULES.md) — every style block moved here, the inline margins as classes ---- */
.mt-0{margin-top:0}.mt-4{margin-top:4px}.mt-8{margin-top:8px}.mt-10{margin-top:10px}.mt-12{margin-top:12px}.mt-14{margin-top:14px}.mt-16{margin-top:16px}
.mt-20{margin-top:20px}.mt-32{margin-top:32px}.mb-8{margin-bottom:8px}.mb-10{margin-bottom:10px}.m0{margin:0}.pull-up{margin:-8px 0 0}.center{text-align:center}.inline{display:inline}.inline-block{display:inline-block}.gap-r{margin-right:8px}
.fr{float:right}.self-start{align-self:start}pre.trace{font-size:11px;white-space:pre-wrap}.grid-back.second{left:112px}
.m2-tool{display:flex;align-items:center;justify-content:center;height:38px;padding:0 10px;background:var(--paper);border:1px solid var(--ink);color:var(--ink);font:700 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;text-decoration:none}
/* the Farming page: the patches, their bars (moved from farming.html) */
.patches{margin-top:8px}
details.patch{border-bottom:1px solid var(--rule)}
details.patch[open]{border:1px solid var(--rule);padding:10px 12px;margin:6px 0}
.patches-head,details.patch > summary{display:grid;grid-template-columns:minmax(0,3fr) 150px minmax(0,3fr) 140px;gap:8px 16px;align-items:center;padding:8px 0}
.patches-head{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--faint);padding:2px 0 6px 20px;border-bottom:1px solid var(--ink)}
.patches-head span:last-child,details.patch > summary > span:last-child{text-align:right}
details.patch > summary{list-style:none;cursor:pointer}
details.patch > summary::-webkit-details-marker{display:none}
details.patch > summary .sum-name::before{content:"\25B8";display:inline-block;width:20px;color:var(--faint)}
details.patch[open] > summary .sum-name::before{content:"\25BE"}
.gbar{height:10px;border-radius:5px;background:color-mix(in srgb,currentColor 12%,transparent);overflow:hidden}
.gbar > i{display:block;height:100%;border-radius:5px;background:var(--good,#3a7)}
.gbar > i.thin{background:var(--marker)}
.grow{display:grid;grid-template-columns:1fr 5ch;gap:8px;align-items:center;font-size:12px}
.patch-body{padding:8px 0 4px 20px}
.patch-body .ledger{margin-bottom:8px}
@media (max-width:700px){.patches-head{display:none}details.patch > summary{grid-template-columns:1fr 1fr}details.patch > summary > span:last-child{text-align:left}}
/* the Fishery page: the months, the quota bar, the boat's fortnight (moved from fishery.html) */
.mon-strip{display:inline-flex;gap:2px;margin-top:4px}
.mon-strip .mon{width:15px;height:16px;line-height:16px;text-align:center;font-size:10px;border-radius:2px;background:color-mix(in srgb,currentColor 10%,transparent);opacity:.5}
.mon-strip .mon.on{background:var(--good,#3a7);color:#fff;opacity:1}
.kbar{height:10px;border-radius:5px;background:color-mix(in srgb,currentColor 12%,transparent);overflow:hidden;margin:6px 0}
.kbar > i{display:block;height:100%;border-radius:5px;background:var(--good,#3a7)}
.fish-two{display:flex;flex-wrap:wrap;gap:8px 40px}.fish-two > dl{flex:1 1 220px;margin:0}
.boat-out{margin:10px 0 16px}.boat-out h3{margin:0;font-size:15px}
.boat-out .lim{font-size:12px;opacity:.7;margin:2px 0 6px}
.day-row{display:flex;flex-wrap:wrap;gap:4px}
.day-cell{min-width:46px;text-align:center;border-radius:4px;padding:4px 2px;font-size:11px;background:color-mix(in srgb,currentColor 9%,transparent)}
.day-cell.go{background:var(--good,#3a7);color:#fff}
.day-cell .wd{display:block;font-weight:600}.day-cell .hh{display:block;font-size:10px;opacity:.85}
/* the Livestock page: the herd's table, the chips, the buy cards, the land bar (moved from livestock.html) */
.herd-tbl{width:100%;border-collapse:collapse;margin-top:6px}
.herd-tbl th,.herd-tbl td{text-align:left;padding:6px 10px 6px 0;border-bottom:1px solid var(--rule);font-size:14px;vertical-align:middle}
.herd-tbl th{font:700 11px var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--faint);border-bottom:1px solid var(--ink)}
.chip{display:inline-block;font:700 11px var(--mono);text-transform:uppercase;letter-spacing:.04em;padding:2px 7px;border-radius:10px;background:color-mix(in srgb,currentColor 12%,transparent)}
.chip.calf{background:var(--good,#3a7);color:#fff}
.chip.milk{background:#3b7cc4;color:#fff}
.chip.dry{background:color-mix(in srgb,currentColor 16%,transparent)}
.stage{font:700 11px var(--mono);text-transform:uppercase;letter-spacing:.04em;color:var(--faint)}
.buy-group{margin-top:10px}.buy-group > h3{margin:0 0 6px;font-size:14px}
.buy-set{display:flex;flex-wrap:wrap;gap:12px}
.buy-card{flex:1 1 200px;border:1px solid var(--rule);border-radius:8px;padding:12px 14px}
.buy-card h4{margin:0 0 2px;font-size:15px}
.buy-card .price{font:700 17px var(--mono)}
.buy-card button{margin-top:8px}
.buy-card .why{font-size:12px;color:var(--faint);margin:6px 0 0}
.land-bar{height:14px;border-radius:7px;background:color-mix(in srgb,currentColor 12%,transparent);overflow:hidden;margin:8px 0}
.land-bar > i{display:block;height:100%;background:#a6863e}
/* Map 2: the wrap, the labels near (moved from map2.html) */
.m2-wrap{position:relative;width:100%;flex:1;min-width:0;background:#a9c1cf;overflow:hidden}
.m2-wrap svg{position:absolute;inset:0;width:100%;height:100%;display:block;font-family:var(--mono, ui-monospace, monospace);cursor:grab;touch-action:none}
.m2-clabel{opacity:0;transition:opacity .2s}
svg.near .m2-clabel{opacity:1}
.m2-sq.berth rect{fill:none;stroke:#14606e;stroke-dasharray:1 .8}
svg.near .m2-loc{font-size:3px}
.m2-wrap svg.dragging{cursor:grabbing}
.m2-sea{fill:#a9c1cf}
.m2-coast{fill:none;stroke:#2f2a22;stroke-width:0.9;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.m2-contour{fill:none;stroke:#6b5136;stroke-width:0.35;opacity:0.55;vector-effect:non-scaling-stroke}
.m2-contour.heavy{stroke-width:0.7;opacity:0.7}
.m2-clabel{font-size:3.2px;fill:#5a4630;paint-order:stroke;stroke:#e8dfc9;stroke-width:1.2px;stroke-linejoin:round}
.m2-cliff{fill:none;stroke:#4a3b2c;stroke-width:0.9;vector-effect:non-scaling-stroke;stroke-linecap:round}
.m2-hach{fill:none;stroke:#4a3b2c;stroke-width:0.5;vector-effect:non-scaling-stroke;opacity:0.8}
.m2-stream-halo{fill:none;stroke:#e5eef2;stroke-width:2.2;vector-effect:non-scaling-stroke;opacity:0.6;stroke-linecap:round}
.m2-stream{fill:none;stroke:#3f7ca6;stroke-width:0.8;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}
.m2-pond{fill:#8fb4cc;stroke:#3f7ca6;stroke-width:0.6;vector-effect:non-scaling-stroke}
.m2-road-band{fill:none;stroke:#d8c9a8;stroke-linecap:round;stroke-linejoin:round}   /* the gravel, 3.5 m to scale (18 Sep 2026) */
.m2-road-halo{fill:none;stroke:#f3efe6;stroke-width:2.4;vector-effect:non-scaling-stroke;opacity:0.7}
.m2-road{fill:none;stroke:#7a4b22;stroke-width:1;vector-effect:non-scaling-stroke;stroke-dasharray:4 2}
.m2-mole{fill:none;stroke:#2f2a22;stroke-width:2.6;vector-effect:non-scaling-stroke;stroke-linecap:round}
.m2-graze{fill:url(#m2-graze);stroke:#3f6a2e;stroke-width:0.5;vector-effect:non-scaling-stroke;stroke-dasharray:1.5 1}
.m2-peak{fill:#2f2a22}
.m2-hill{font-size:5px;font-weight:700;letter-spacing:.06em;fill:#2f2a22;paint-order:stroke;stroke:#f3efe6;stroke-width:1.6px;stroke-linejoin:round}
.m2-ele{font-size:3.6px;fill:#4a3b2c;paint-order:stroke;stroke:#f3efe6;stroke-width:1.4px}
.m2-pt{fill:#2f2a22}
.m2-loc{font-size:4px;font-style:italic;fill:#2f2a22;paint-order:stroke;stroke:#f3efe6;stroke-width:1.5px;stroke-linejoin:round}
.m2-area{font-size:5.5px;letter-spacing:.18em;text-transform:uppercase;fill:#5a4630;opacity:.9;paint-order:stroke;stroke:#f3efe6;stroke-width:1.4px}
.m2-thing .m2-disc{fill:#f3efe6;stroke:#2f2a22;stroke-width:0.5;vector-effect:non-scaling-stroke}
.m2-thing .ico{font-family:"Font Awesome 7 Pro","Font Awesome 6 Pro","Font Awesome 6 Free";font-weight:900;fill:#2f2a22}
.m2-thing.house .m2-disc{fill:#e2542a}.m2-thing.house .ico{fill:#fff}
.m2-thing.site .m2-disc{fill:#fff;stroke-dasharray:1 .6}
.m2-thing.ship .m2-disc,.m2-thing.boat .m2-disc{fill:#14606e}.m2-thing.ship .ico,.m2-thing.boat .ico{fill:#fff}
.m2-patch rect{fill:#5f8f3f;stroke:#3a2f22;stroke-width:1.1;vector-effect:non-scaling-stroke}
.m2-patch.bare rect{fill:#8a7350}
.m2-patch-leg{fill:#5f8f3f;stroke:#3a2f22;stroke-width:1}
.m2-wake{fill:none;stroke:#f3efe6;stroke-width:0.8;stroke-dasharray:2 2;vector-effect:non-scaling-stroke;opacity:.8}
.m2-tip{position:absolute;pointer-events:none;background:var(--paper);border:1px solid var(--ink);padding:5px 8px;font:12px var(--mono);color:var(--ink);white-space:nowrap;box-shadow:2px 2px 0 var(--rule);z-index:6}
.m2-cartouche rect{fill:#f3efe6;stroke:#2f2a22;stroke-width:1;vector-effect:non-scaling-stroke}
.m2-title{font-size:11px;font-weight:700;letter-spacing:.22em;fill:#2f2a22}
.m2-sub{font-size:5px;letter-spacing:.08em;fill:#5a4630}
.m2-north path{fill:#2f2a22}.m2-north text{font-size:7px;font-weight:700;fill:#2f2a22}
.m2-scale path{stroke:#2f2a22;stroke-width:1;fill:none;vector-effect:non-scaling-stroke}.m2-scale text{font-size:5px;fill:#2f2a22}
.m2-legend rect:first-child{fill:#f3efe6;stroke:#2f2a22;stroke-width:0.8;vector-effect:non-scaling-stroke}.m2-legend text{font-size:4.6px;fill:#2f2a22}
.m2-grid.off{display:none}
.m2-expo.off{display:none}
.m2-expo path{opacity:.55}
.m2-expo-0{fill:#8fb58a}.m2-expo-1{fill:#e6c56a}.m2-expo-2{fill:#e2892a}.m2-expo-3{fill:#c0331f}
.m2-expo-key{position:absolute;left:12px;bottom:34px;background:var(--paper);border:1px solid var(--ink);padding:6px 10px;font-size:12px;display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;max-width:calc(100% - 24px)}
.m2-expo-key[hidden]{display:none}
.m2-expo-key i{display:inline-block;width:12px;height:12px;margin-right:4px;vertical-align:-2px;opacity:.75}
.m2-expo-key i.m2-expo-0{background:#8fb58a}.m2-expo-key i.m2-expo-1{background:#e6c56a}.m2-expo-key i.m2-expo-2{background:#e2892a}.m2-expo-key i.m2-expo-3{background:#c0331f}
.m2-expo-key select{font:inherit}
.m2-expo-note{flex-basis:100%;margin:2px 0 0;max-width:46ch;color:var(--faint,#6b6b6b)}
.m2-grid .m2-cell-line{stroke:#2f2a22;stroke-width:0.25;opacity:.35;vector-effect:non-scaling-stroke}
.m2-grid .m2-cell-build{fill:#2f7d2b;opacity:.28}
.m2-grid .m2-cell-harbour{fill:#e2542a;opacity:.4}
.m2-grid .m2-cell-berth{fill:#14606e;opacity:.4}
.m2-zoom button.on{background:var(--ink);color:var(--paper)}
.m2-sq rect{fill:#f3efe6;stroke:#2f2a22;stroke-width:0.6;vector-effect:non-scaling-stroke}
.m2-sq .ico{font-family:"Font Awesome 7 Pro","Font Awesome 6 Pro","Font Awesome 6 Free";font-weight:900;fill:#2f2a22}
.m2-sq.house rect{fill:#e2542a}.m2-sq.house .ico{fill:#fff}
.m2-sq.site rect{fill:#fff;stroke-dasharray:1 .6}
.m2-sq.ship rect,.m2-sq.boat rect{fill:#14606e}.m2-sq.ship .ico,.m2-sq.boat .ico{fill:#fff}
.m2-sq.ship rect{fill:#2f2a22}
.m2-sq.planned rect{fill:none;stroke-dasharray:1 .8;opacity:.8}.m2-sq.planned .ico{opacity:.55}
.m2-sq.site.building rect{fill:#f2c94c;stroke-dasharray:none}
/* the buildings from above, to scale (18 Sep 2026, the owner: like the Norwegian map, not icons) */
.m2-sq.fpsq rect{fill:transparent;stroke:none;pointer-events:none}   /* a building is grabbed by its own outline, not its square: several share one (18 Sep 2026) */
.fp .fp-body,.fp .fp-ridge{pointer-events:all}
.m2-sq.fpsq:hover .fp-body{stroke-width:1.6}
.fp .fp-body{stroke:#2f2a22;stroke-width:.7;vector-effect:non-scaling-stroke}
.fp-ridge{fill:none;stroke:#4a3a1c;stroke-width:.5;vector-effect:non-scaling-stroke;opacity:.8}
.fp-house .fp-body{fill:#b8862f}   /* every building one colour (18 Sep 2026, the owner); the machines and the field their own */
.fp-work .fp-body{fill:#b8862f}
.fp-glass .fp-body{fill:#b8862f}
.fp-grey .fp-body{fill:#b8862f}
.fp-solar .fp-body{fill:#2b3f6b}
.fp-mast .fp-body{fill:#2f2a22}.fp-mast .fp-ridge{stroke:#2f2a22;stroke-width:1.2;opacity:1}
.fp-field .fp-body{fill:#c9b77a}.fp-field .fp-ridge{stroke:#7a6a3a}
.m2-sq.fpsq.site.building rect{fill:transparent}
.m2-sq.site.building .fp .fp-body{fill:#f2c94c}
.m2-bname{fill:#2f2a22;font-family:var(--mono, ui-monospace, monospace);letter-spacing:.02em;paint-order:stroke;stroke:#fff;stroke-width:3px;stroke-linejoin:round;vector-effect:non-scaling-stroke;pointer-events:none}   /* a building's name on Map 2 */
.m2-sq.planned .fp .fp-body{fill:none;stroke-dasharray:3 2}.m2-sq.planned .fp-ridge{opacity:.4}
.m2-sq.site.building .ico{fill:#2f2a22}   /* a building going up: yellow; planned: the light square above (18 Sep 2026, the owner) */
.m2-sq:hover rect{stroke-width:1.4}
.m2-wrap svg.placing{cursor:pointer}.m2-wrap svg.painting{cursor:crosshair}
.m2-hover{fill:#e2542a;fill-opacity:.35;stroke:#e2542a;stroke-width:0.6;vector-effect:non-scaling-stroke;pointer-events:none}
.m2-paint rect{fill-opacity:.55;stroke:none}
.m2-tools{position:absolute;left:50%;top:16px;transform:translateX(-50%);display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;background:var(--paper);border:1px solid var(--ink);padding:8px 12px;font:12px var(--mono);max-width:calc(100% - 320px)}
.m2-tools .faint{color:var(--faint)}
.m2-tools button{font:700 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;background:var(--paper);border:1px solid var(--ink);color:var(--ink);padding:5px 9px;cursor:pointer}
.m2-tools button.on{background:var(--ink);color:var(--paper)}
.m2-tools .hint{flex-basis:100%;font-size:11px;color:var(--faint)}
.m2-back{position:absolute;left:16px;top:16px;background:var(--paper);border:1px solid var(--ink);padding:8px 12px;font:700 12px var(--mono);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;color:var(--ink)}
.m2-zoom{position:absolute;right:16px;top:16px;display:flex;flex-direction:column;gap:6px}
.m2-zoom button{width:38px;height:38px;background:var(--paper);border:1px solid var(--ink);color:var(--ink);font:700 16px var(--mono);cursor:pointer;line-height:1;padding:0}
.m2-zoom button:hover{background:var(--ink);color:var(--paper)}
.m2-zoom button.wide{width:auto;padding:0 10px;font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.m2-credit{position:absolute;left:16px;bottom:6px;font-size:10px;color:#f3efe6;text-shadow:0 0 3px #2f2a22;margin:0}
/* the admin's tables, the Admin page and the Balance page alike (moved from admin.html) */
.adm{width:100%;border-collapse:collapse;font-size:13px}.adm th,.adm td{text-align:left;padding:6px 8px 6px 0;border-bottom:1px solid var(--rule);vertical-align:top}
.adm th{font:700 11px var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--faint);border-bottom:1px solid var(--ink)}
.adm td.num{text-align:right;white-space:nowrap}.adm form{display:block;margin:0 0 6px;white-space:nowrap}.adm input{width:9ch;font:inherit;font-size:12px;padding:3px 6px}.adm input.wide{width:18ch}.adm td.tools{width:44%}
.adm .old{color:var(--down)}.adm .tools{white-space:nowrap}
.log{font-size:12px}.log td{padding:3px 8px 3px 0}
/* the Balance page: the verdict, the tabs, the gate's chart, the happiness matrix, the weights (moved from admin_balance.html) */
.adm th.num{text-align:right;white-space:nowrap}.adm tr.lens td{padding-top:14px;font:700 11px var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--ink);border-bottom:1px solid var(--ink)}
.adm td.ok{color:var(--up)}.adm td.bad{color:var(--down);font-weight:700}.adm td.none{color:var(--faint)}.adm .moved{color:var(--marker)}
.verdict{font-size:22px;line-height:1.3;margin:6px 0 10px}.verdict.holds{color:var(--up)}.verdict.fails{color:var(--down)}
.tabs a{display:inline-block;padding:4px 10px;border:1px solid var(--ink);text-decoration:none;color:var(--ink);font:700 11px var(--mono);text-transform:uppercase;letter-spacing:.06em;margin-right:6px}.tabs a.on{background:var(--ink);color:var(--paper)}
.runs{font-size:12px}.runs td{padding:3px 8px 3px 0}
.gate-svg{width:100%;height:auto;display:block;font:11px var(--mono);margin:0 0 6px}.gate-svg .grid{stroke:var(--rule);stroke-width:1;stroke-dasharray:1 3}.gate-svg .tick{fill:var(--faint)}.gate-svg .lbl{fill:var(--ink);font-weight:700}
.gate-svg .line{fill:none;stroke:var(--ink);stroke-width:1.5}.gate-svg .line.s1{stroke:var(--faint);stroke-dasharray:3 3}.gate-svg .floor{stroke:var(--down);stroke-width:1;stroke-dasharray:4 3}
.gate-svg .val{fill:var(--ink);paint-order:stroke;stroke:var(--paper);stroke-width:3px}.gate-svg .mark{fill:var(--marker)}.gate-svg .mark.landed{fill:var(--sea)}.gate-svg .mark.leave{fill:var(--down)}.gate-svg .mark.people{fill:var(--up)}
.matrix{width:100%;border-collapse:collapse;font-size:12px;font-variant-numeric:tabular-nums}.matrix th,.matrix td{padding:4px 5px 4px 0;border-bottom:1px solid var(--rule);text-align:right;white-space:nowrap}.matrix th{font:700 10px var(--mono);text-transform:uppercase;letter-spacing:.04em;color:var(--faint);border-bottom:1px solid var(--ink);vertical-align:bottom}
.matrix td:first-child,.matrix th:first-child{text-align:left;white-space:normal;min-width:210px;padding-right:10px}.matrix td:first-child .unit{font-size:11px;line-height:1.3;display:block}.matrix td.c{color:var(--faint)}.matrix td.low{color:var(--down);font-weight:700}.matrix td.mid{color:var(--marker)}.matrix td.mean{font-weight:700;color:var(--ink)}
.matrix td.knob{text-decoration:underline dotted}.matrix .flag{font-size:11px;color:var(--down);white-space:normal;text-align:left;display:block;line-height:1.3}
.weights{display:flex;flex-wrap:wrap;gap:6px 14px;margin:8px 0 12px}.weights label{font-size:11px;color:var(--faint);display:flex;flex-direction:column;gap:2px;white-space:nowrap}.weights input{width:7ch;font:inherit;font-size:13px;padding:3px 6px}.weights label.changed{color:var(--marker)}.weights label .unit{font-size:10px}
.moves{margin:0;padding-left:18px;font-size:13px}.moves li{margin:2px 0}
.forms form{display:inline-block;margin:0 8px 8px 0}

/* the storm badge beside the settlement's name and its card (17 Sep 2026, the owner): yellow a gale, red a storm */
.storm-badge { display: inline-block; vertical-align: middle; margin-left: 12px; padding: 4px 10px; border: 2px solid var(--warn); color: var(--warn);
  font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; line-height: 1.2; white-space: nowrap; }
.storm-badge.storm { border-color: var(--down); color: var(--down); }
.storm-badge.now { background: var(--warn); color: var(--paper); }
.storm-badge.storm.now { background: var(--down); }
.storm-card { border-color: var(--warn); border-width: 2px; }
.storm-card.storm { border-color: var(--down); }
.storm-card > h2.stamp { color: var(--warn); }
.storm-card.storm > h2.stamp { color: var(--down); }
.storm-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 32px; }
@media (max-width: 720px) { .storm-cols { grid-template-columns: 1fr; } .storm-badge { margin: 6px 0 0; display: table; } }

/* the close-up of a square on Map 2 (18 Sep 2026, the owner): place a building in it and turn it */
.fp-edit { position: absolute; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center; background: rgba(243, 239, 230, .55); }
.fp-edit[hidden] { display: none; }
.fp-card { background: var(--paper); border: 1px solid var(--ink); padding: 14px 16px; width: min(420px, 92vw); }
.fp-head { display: flex; justify-content: space-between; align-items: center; margin: 0 0 8px; }
.m2-wrap #fp-svg { position: static; inset: auto; width: 100%; height: auto; display: block; background: #e9f0dc; touch-action: none; cursor: grab; }
#fp-svg .fp-sq { fill: none; stroke: var(--ink); stroke-width: .25; }
#fp-lines path { stroke: var(--rule); stroke-width: .06; }
#fp-svg .fp-body { stroke: var(--ink); stroke-width: .12; vector-effect: none; }
#fp-svg .fp-ridge { stroke-width: .08; vector-effect: none; }
#fp-svg .fp-other { fill: #bdbab2; stroke: #8a877f; stroke-width: .1; }   /* what stands beside it */
#fp-svg .fp-roadband { fill: none; stroke: #d8c9a8; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }   /* the road, 3.5 m */
#fp-lines path.fp-edge { stroke: var(--faint); stroke-width: .1; stroke-dasharray: .6 .6; }
.m2-wrap #fp-svg { overflow: hidden; }
.fp-ctl { display: flex; align-items: center; gap: 8px; margin: 10px 0 4px; }
.fp-ctl input[type=range] { flex: 1; }
.fp-name { margin: 6px 0; } .fp-name input { width: 100%; }

/* Map 2, the finish (18 Sep 2026, the owner: "more professional, easier to play") */
.fp-shadow .fp-body{fill:#2f2a22;opacity:.22;stroke:none}
.m2-sq.planned .fp-shadow,.m2-sq.site.building .fp-shadow{display:none}
.m2-sq.damaged .fp .fp-body{stroke:#c0392b;stroke-width:1.8}
.m2-sq.broken .fp .fp-body{fill:#e7b4a9;stroke:#c0392b;stroke-width:1.8;stroke-dasharray:3 1.5}
.m2-legend-box{position:absolute;right:12px;bottom:62px;z-index:5;background:rgba(243,239,230,.92);border:1px solid var(--ink);padding:6px 9px;font-size:11px;line-height:1.6}
.m2-legend-box span{display:flex;align-items:center;gap:7px}
.m2-legend-box i{display:inline-block;width:14px;height:9px;border:1px solid #2f2a22}
.m2-legend-box i.lg-b{background:#b8862f}.m2-legend-box i.lg-c{background:#f2c94c}.m2-legend-box i.lg-p{background:transparent;border-style:dashed}
.m2-legend-box i.lg-d{background:#b8862f;border:2px solid #c0392b}.m2-legend-box i.lg-x{background:#e7b4a9;border:2px dashed #c0392b}.m2-legend-box i.lg-r{background:#d8c9a8;border:0;height:5px}
.m2-scale-box{position:absolute;right:12px;bottom:34px;z-index:5;font-size:11px;text-align:right}
.m2-scale-box b{display:block;height:6px;border:1px solid #2f2a22;border-top:0;margin-top:2px}
.m2-bar{position:absolute;top:10px;left:50%;transform:translateX(-50%);z-index:12;display:flex;align-items:center;gap:8px;background:var(--paper);border:1px solid var(--ink);padding:6px 10px;font-size:12px;white-space:nowrap}
.m2-bar[hidden]{display:none}
.m2-bar .bad{color:var(--down)}
.m2-fits{fill:#4f7a3a;opacity:.16;pointer-events:none}
.m2-guide{stroke:#e2542a;stroke-width:.08;stroke-dasharray:.6 .4;fill:none}
#fp-svg .fp-ring{fill:none;stroke:#e2542a;stroke-opacity:.18;stroke-linejoin:round;stroke-width:10}   /* 5 m round what stands beside it */
#fp-svg .fp.too-close .fp-body,.m2-sq.too-close .fp .fp-body{fill:#e7b4a9;stroke:#c0392b}
.m2-scale{display:none}   /* the scale is the box that follows the zoom now */
.m2-zoom button .fa-solid{font-size:13px}
/* the close-up and the placing bar keep their size whatever the warning says, so nothing moves under the hand (18 Sep 2026, the owner) */
#fp-hint { min-height: 4.8em; margin: 6px 0 4px; }
.m2-bar #bar-warn { display: inline-block; width: 30ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m2-bar #bar-deg { display: inline-block; width: 4ch; text-align: right; }
/* the wind legend (18 Sep 2026, the owner): its heading, the wind's choice, the colours on one line */
.m2-expo-key { flex-direction: column; align-items: flex-start; gap: 4px; }
.m2-expo-key .m2-expo-head { margin: 0; }
.m2-expo-key .m2-expo-from { margin: 0; }
.m2-expo-key .m2-expo-row { display: flex; gap: 12px; margin: 2px 0 0; white-space: nowrap; }
/* the legends together on the right, readable (18 Sep 2026, the owner) */
.m2-legends { position: absolute; right: 12px; bottom: 62px; z-index: 5; display: flex; flex-direction: column; gap: 8px; align-items: stretch; max-width: calc(100% - 24px); }
.m2-legends .m2-expo-key, .m2-legends .m2-legend-box { position: static; left: auto; right: auto; bottom: auto; max-width: none; }
.m2-legends .m2-legend-box, .m2-legends .m2-expo-key { font-size: 13px; line-height: 1.7; padding: 8px 12px; background: rgba(243, 239, 230, .96); border: 1px solid var(--ink); }
.m2-legends .m2-legend-box i, .m2-legends .m2-expo-key i { width: 16px; height: 11px; }
.m2-legends .m2-expo-head { font-size: 11px; margin: 0 0 2px; }
.m2-legends .m2-expo-row { gap: 14px; }
.m2-legend{display:none}   /* the chart's own legend: its lines are in the one on the right now (18 Sep 2026) */
.m2-legend-box i.lg-contour{border:0;border-top:1px solid #6b5136;height:0;margin-top:4px}
.m2-legend-box i.lg-cliff{border:0;border-top:2px solid #2f2a22;height:4px;background:repeating-linear-gradient(90deg,#2f2a22 0 1px,transparent 1px 4px);background-size:100% 3px;background-repeat:no-repeat;background-position:0 2px}
.m2-legend-box i.lg-stream{border:0;border-top:2px solid #3f7ca6;height:0;margin-top:4px}
.m2-legend-box i.lg-graze{background:#4f7a3a;opacity:.45;border-color:#4f7a3a}
.m2-legend-box i.lg-patch{background:#c9b77a}
.m2-legends, .m2-legends span, .m2-legends label, .m2-legends select, .m2-legends .stamp { color: #1f1b16; opacity: 1; }   /* dark and readable over the map (18 Sep 2026, the owner) */
.m2-legends span { font-weight: 600; }
.m2-legends .m2-expo-head { color: #1f1b16; font-weight: 700; }
.m2-legends .m2-legend-box { display: grid; grid-template-columns: auto auto; column-gap: 18px; }   /* "On the map" in two columns (18 Sep 2026, the owner) */
.m2-legends .m2-legend-box .m2-expo-head { grid-column: 1 / -1; }
#m2-tools { display: none !important; }   /* the old place-and-mark box: placing is from Buildings and the map's own bar now (18 Sep 2026, the owner) */
.m2-bar button.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }   /* which of Mark and Clear is on (18 Sep 2026) */
.m2-legends select { background: #fff; color: #1f1b16; border: 1px solid var(--ink); padding: 2px 6px; font: inherit; font-weight: 600; }   /* the wind's choice, light like the legend (18 Sep 2026) */
.m2-legends select option { background: #fff; color: #1f1b16; }
/* the shadow under the pointer while placing (18 Sep 2026, the owner) */
.m2-ghost { pointer-events: none; }
.m2-ghost path { stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.m2-ghost.good path { fill: rgba(79, 122, 58, .55); stroke: #2f5a24; }
.m2-ghost.bad path { fill: rgba(192, 57, 43, .45); stroke: #c0392b; }
.m2-bar #bar-left, .m2-bar #bar-right { font-size: 22px; line-height: 1; min-width: 44px; height: 36px; padding: 0 8px; }   /* the turning arrows, big enough to hit (18 Sep 2026, the owner) */
.m2-bar { padding: 8px 12px; gap: 10px; }
.m2-bar #bar-name { font-size: 13px; }
.store-budget { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 10px 0 2px; }
.store-budget input { width: 8em; }