/* Fonts are part of the site (no outside service): Archivo Narrow (OFL) and Special Elite (Apache 2.0). */
@font-face { font-family: "Archivo Narrow"; src: url("fonts/archivo-narrow.woff") format("woff"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Archivo Narrow"; src: url("fonts/archivo-narrow-300.woff") format("woff"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Special Elite"; src: url("fonts/special-elite.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
/* Waybill Desk theme: railroad green header band, warm paper page, manila car cards. */
:root {
  --bg: #ECEFE9; --card: #FFFFFF; --text: #1B2420; --muted: #5E6A63; --line: #D3D9D2;
  --band: #1F4A37; --band-2: #2A5E47; --band-text: #FFFFFF; --band-sub: #CFE2D6;
  --green: #1F6B4A; --green-soft: #E0EEE5; --amber: #8A4A00; --amber-soft: #F8E3C4;
  --blue: #0B4FA8; --blue-soft: #E1ECFB; --grey-soft: #E6E9E4; --red: #B3261E;
  --manila: #F3E7C6; --manila-text: #2B2414; --manila-sub: #5B4C26; --shadow: 0 1px 2px rgba(20,40,30,0.08);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0F1D17; --card: #1A2B23; --text: #EEF3EF; --muted: #A3B3AA; --line: #2E4238;
    --band: #173A2B; --band-2: #1F4A37; --band-text: #FFFFFF; --band-sub: #A9C9B6;
    --green: #5FC690; --green-soft: #1E3F30; --amber: #F2B26B; --amber-soft: #3D2C17;
    --blue: #8DBBF3; --blue-soft: #1B2D45; --grey-soft: #263A30; --red: #FF7B71;
    --manila: #4B402A; --manila-text: #F5EAC9; --manila-sub: #D9C79A; --shadow: none;
  }
}
* { box-sizing: border-box; }
html { background: var(--band); }
body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--text);
       font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", system-ui, sans-serif; font-size: 17px; }
main { max-width: 640px; margin: 0 auto; padding: 16px 16px 48px; }
a { color: var(--green); }

/* Header band */
.band { background: var(--band); color: var(--band-text);
        border-bottom: 4px solid #C8A04A; }
.band-inner { max-width: 640px; margin: 0 auto; padding: 10px 16px 18px; }
.logo { padding: 6px 0 2px; }
.logo img { display: block; width: 100%; max-width: 420px; height: auto; margin: 0 auto; filter: drop-shadow(0 3px 6px rgba(0,0,0,.35)); }
.band-tall .logo img { max-width: 480px; margin-bottom: 18px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.band-tall .band-inner { padding: 48px 16px 28px; }
.band h1 { font-size: 32px; font-weight: 700; letter-spacing: -0.5px; margin: 2px 0 0; color: var(--band-text); }
.band-sub { color: var(--band-sub); font-size: 15px; margin: 4px 0 0; }
.eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--band-sub); }
.band-top { display: flex; justify-content: space-between; align-items: center; min-height: 44px; }
.band a { color: var(--band-text); text-decoration: none; }
.band .back { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; font-size: 17px; }
.band .link { font-size: 15px; color: var(--band-sub); min-height: 44px; display: inline-flex; align-items: center; }

/* Sections and cards */
h2 { font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); margin: 24px 16px 8px; }
h2:first-child { margin-top: 4px; }
.card { background: var(--card); border-radius: 12px; padding: 14px 16px; margin-bottom: 14px; box-shadow: var(--shadow); }
.mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; }
.small { font-size: 14px; color: var(--muted); }
.big { font-size: 21px; font-weight: 700; }
.error { color: var(--red); font-weight: 600; }

/* Lists of cars */
.list { list-style: none; margin: 0; padding: 0 0 0 16px; background: var(--card); border-radius: 12px; box-shadow: var(--shadow); }
.list li { border-bottom: 0.5px solid var(--line); }
.list li:last-child { border-bottom: 0; }
.list a, .list .row { display: flex; align-items: center; justify-content: space-between; gap: 12px;
                      min-height: 56px; padding: 8px 16px 8px 0; color: var(--text); text-decoration: none; }
.list .mark { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-weight: 600; }
.chev { color: var(--muted); font-size: 20px; }

/* Tags */
.tag { font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.tag-go { background: var(--green-soft); color: var(--green); }
.tag-work { background: var(--amber-soft); color: var(--amber); }
.tag-hold { background: var(--grey-soft); color: var(--muted); }
.tag-away { background: var(--blue-soft); color: var(--blue); }
.loaded { background: #1F6B4A; color: #FFFFFF; }
.empty { background: rgba(0,0,0,0.08); color: var(--manila-text); }

/* Summary chips under the band */
.chips { display: flex; gap: 8px; overflow-x: auto; margin: 0 0 4px; }
.chip { flex: 1 0 auto; background: var(--card); border-radius: 12px; padding: 10px 12px; box-shadow: var(--shadow); text-align: center; min-width: 76px; }
.chip b { display: block; font-size: 22px; }
.chip span { font-size: 12px; color: var(--muted); }

/* Car card */
.carcard { background: var(--manila); color: var(--manila-text); border-radius: 16px; padding: 18px 20px; margin: 0 0 16px;
           box-shadow: 0 2px 6px rgba(60,45,10,0.15); border-top: 6px solid #C8A04A; }
.carcard .label { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; color: var(--manila-sub); }
.carcard h1 { font-family: "Courier New", Courier, monospace; font-size: 34px; margin: 6px 0 0; color: var(--manila-text); }
.carcard .what { color: var(--manila-sub); font-size: 15px; }
.carcard .top { display: flex; justify-content: space-between; align-items: center; }

/* Trip steps */
.steps { margin: 6px 0 0; padding: 0; list-style: none; }
.steps li { display: flex; gap: 12px; }
.rail { display: flex; flex-direction: column; align-items: center; width: 22px; flex-shrink: 0; }
.dot { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--line); background: var(--card); flex-shrink: 0; }
.dot.done { background: var(--green); border-color: var(--green); }
.dot.now { background: #E07B00; border: 5px solid var(--amber-soft); }
.line { flex: 1; width: 2px; min-height: 22px; background: var(--line); }
.line.done { background: var(--green); }
.stepbody { padding-bottom: 14px; }
.stepbody b { font-weight: 600; }

/* Collapsible later trips */
details.card { padding: 0; }
details.card summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center;
                       min-height: 52px; padding: 0 16px; }
details.card summary::-webkit-details-marker { display: none; }
details.card[open] summary .chev { transform: rotate(90deg); }
.trip { padding: 12px 16px; border-top: 0.5px solid var(--line); }
.offnote { display: inline-block; margin-top: 6px; font-size: 13px; font-weight: 600; color: var(--blue);
           background: var(--blue-soft); padding: 3px 9px; border-radius: 999px; }

/* Sign-in */
.signin { display: flex; flex-direction: column; gap: 10px; padding: 18px 16px; }
.signin label { font-weight: 600; }
.signin input[type=password] { font: inherit; font-size: 20px; padding: 12px 14px; border-radius: 10px;
                               border: 1px solid var(--line); background: var(--bg); color: var(--text); }
.btn { font: inherit; font-weight: 600; min-height: 50px; border: 0; border-radius: 12px; background: var(--band); color: #FFFFFF; cursor: pointer; }

/* Cars / Trains tabs in the band */
.tabs { display: flex; gap: 4px; margin: 14px 0 0; background: rgba(0,0,0,0.22); border-radius: 10px; padding: 3px; }
.tabs a { flex: 1; text-align: center; padding: 8px 0; min-height: 36px; border-radius: 8px; font-size: 15px; font-weight: 600; color: var(--band-sub); }
.tabs a.on { background: var(--band-text); color: var(--band); }
.clock { font-variant-numeric: tabular-nums; }

/* Session page */
.btn-wide { width: 100%; margin-top: 8px; }
.btn-quiet { background: var(--grey-soft); color: var(--text); }
.notice { background: var(--green-soft); color: var(--green); font-weight: 600; font-size: 15px; }
.notice-bad { background: #FBE3E1; color: var(--red); }
@media (prefers-color-scheme: dark) { .notice-bad { background: #3E1F1C; } }
.grow { flex: 1; min-width: 0; }
.bar { display: block; height: 4px; border-radius: 2px; background: var(--grey-soft); margin-top: 8px; overflow: hidden; }
.bar span { display: block; height: 100%; background: var(--green); }

/* Switch list */
.moves .row { align-items: center; }
.moves li.is-done .grow { opacity: 0.55; }
.moves li.is-next { box-shadow: inset 4px 0 0 #E07B00; margin-left: -16px; padding-left: 16px; }
.moves a.mark { display: inline; min-height: 0; padding: 0; color: var(--text); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
.act { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 2px 7px; border-radius: 6px; margin-right: 6px; vertical-align: 2px; }
.act-pu { background: var(--blue-soft); color: var(--blue); }
.act-so { background: var(--amber-soft); color: var(--amber); }
.mnote { display: inline-block; margin-top: 4px; font-size: 13px; color: var(--amber); }
.moves form { margin: 0; flex-shrink: 0; }
.mbtn { font: inherit; font-weight: 600; font-size: 16px; min-width: 76px; min-height: 48px; border-radius: 12px; border: 0;
        background: var(--band); color: #FFFFFF; cursor: pointer; }
.mbtn-done { background: var(--green-soft); color: var(--green); display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1; font-size: 18px; }
.mbtn-done small { font-size: 11px; font-weight: 600; color: var(--muted); }
.consist summary b { font-weight: 600; }
.consist-list { list-style: none; margin: 0; padding: 0 0 0 16px; border-top: 0.5px solid var(--line); }
.consist-list li { border-bottom: 0.5px solid var(--line); }
.consist-list li:last-child { border-bottom: 0; }
.consist-list a, .consist-list .caboose { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 48px; padding: 6px 16px 6px 0; color: var(--text); text-decoration: none; }
.consist-list .small { text-align: right; }
.caboose .mark { color: var(--red); }

/* Setup forms */
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
fieldset[disabled] { opacity: 0.6; }
.form fieldset, .form { display: flex; flex-direction: column; gap: 14px; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; }
.field > span { font-size: 14px; font-weight: 600; color: var(--muted); }
.field small, .checks + small { font-size: 13px; color: var(--muted); }
.field input:not([type=checkbox]), .field select, .search {
  font: inherit; font-size: 17px; width: 100%; min-height: 46px; padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--bg); color: var(--text); -webkit-appearance: none; appearance: none; }
.field select { background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 32px; }
.field input:not([type=checkbox]):focus, .field select:focus, .search:focus { outline: 2px solid var(--green); outline-offset: 0; }
.pair { display: flex; gap: 12px; }
.pair > * { flex: 1; }
.checks { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.check { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 6px 12px; border-bottom: 0.5px solid var(--line); background: var(--bg); }
.check:last-child { border-bottom: 0; }
.check input { width: 22px; height: 22px; accent-color: var(--green); flex-shrink: 0; }
.check small { color: var(--muted); }
.search { margin: 12px 0 0; background: var(--card); }
.intro { margin: 4px 4px 12px; }
.warn { color: var(--amber); font-weight: 600; }
.notice-warn { background: var(--amber-soft); color: var(--amber); }
.notice-warn a { color: inherit; }
form.inline { display: inline; margin: 0; }
.btn-small { font: inherit; font-size: 14px; font-weight: 600; min-height: 36px; padding: 0 12px; border-radius: 9px; border: 0;
             background: var(--grey-soft); color: var(--text); cursor: pointer; }
.btn-danger { background: transparent; color: var(--red); border: 1px solid var(--red); }
a.btn-link { display: flex; align-items: center; justify-content: center; text-decoration: none; color: #FFFFFF; }
.list a.addrow { color: var(--green); font-weight: 600; justify-content: flex-start; }
.list li.reorder { display: flex; align-items: center; gap: 8px; padding-right: 10px; }
.list li.reorder > a { flex: 1; min-width: 0; }
.arrows { display: flex; gap: 6px; flex-shrink: 0; }
.btn-arrow { font: inherit; font-size: 17px; width: 40px; height: 40px; border-radius: 10px; border: 0; background: var(--grey-soft); color: var(--text); cursor: pointer; display: inline-block; }
.btn-arrow.off { background: transparent; }
.typehead { display: flex; justify-content: space-between; align-items: baseline; }

.mbtn-wait { opacity: 0.5; }

/* ---------- Car cards and waybills ---------- */
:root { --paper: #F4EBD3; --paper-2: #EADDBB; --paper-line: #C9B88F; --ink: #2B2414; --ink-2: #6B5A33; --stamp: #B3261E; --herald: #1F2A33; }
@media (prefers-color-scheme: dark) {
  :root { --paper: #3E3524; --paper-2: #4A3F2A; --paper-line: #6E5F3E; --ink: #F5EAC9; --ink-2: #D2C08F; --stamp: #FF8A7A; --herald: #0E151B; }
}
.typed, .typed-s, .wb b, .wb span, .mcard-id b { font-family: "Courier New", Courier, ui-monospace, monospace; }
.carart { display: block; flex-shrink: 0; }

/* Where the train is */
.stops { display: flex; align-items: center; gap: 4px; overflow-x: auto; margin: 0 -16px 8px; padding: 2px 16px 6px; }
.stops form { flex-shrink: 0; }
.stop { font: inherit; font-size: 15px; font-weight: 600; border: 1px solid var(--line); background: var(--card); color: var(--text);
        border-radius: 12px; padding: 6px 12px; min-height: 48px; display: flex; flex-direction: column; align-items: flex-start; cursor: pointer; }
.stop small { font-size: 11px; font-weight: 600; color: var(--muted); letter-spacing: .05em; text-transform: uppercase; }
.stop.on { background: var(--band); color: #fff; border-color: var(--band); }
.stop.on small { color: var(--band-sub); }
.stop-arrow { color: var(--muted); font-size: 20px; flex-shrink: 0; }
.hint { background: var(--grey-soft); color: var(--text); font-size: 15px; }

/* Mini car card */
.mcard { background: var(--paper); color: var(--ink); border-radius: 12px; border-top: 4px solid #C8A04A; padding: 10px 12px; margin: 0 0 10px; box-shadow: var(--shadow); }
.mcard.hot { box-shadow: 0 0 0 2px #E07B00; }
.mcard-top { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.mcard-id b { display: block; font-size: 19px; font-weight: 700; }
.mcard-id small { color: var(--ink-2); font-size: 13px; }
.mcard-wb { margin-top: 8px; padding-top: 6px; border-top: 1px dashed var(--paper-line); font-size: 15px; }
.mcard-note { margin-top: 6px; font-size: 14px; }
.mcard-act { margin-top: 8px; }
.mcard-act form { margin: 0; }
.cbtn { font: inherit; font-weight: 600; font-size: 16px; width: 100%; min-height: 46px; border: 0; border-radius: 10px; background: var(--band); color: #fff; cursor: pointer; }
.cbtn-pu { background: var(--blue); }
@media (prefers-color-scheme: dark) { .cbtn-pu { background: #2B5EA8; } }
.boxhead { display: flex; justify-content: space-between; align-items: baseline; margin: 14px 4px 6px; }
.spots { font-size: 13px; color: var(--muted); }
.boxempty { font-size: 14px; color: var(--muted); margin: 0 4px 6px; }
.caboose-card { border: 1px dashed var(--line); border-radius: 12px; padding: 10px 12px; color: var(--red); font-weight: 600; text-align: center; margin-bottom: 10px; }

/* Car card front */
.cc-front { background: var(--paper); color: var(--ink); border-radius: 14px; overflow: hidden; box-shadow: 0 2px 6px rgba(60,45,10,.15); margin-bottom: 14px; }
.cc-head { display: flex; justify-content: space-between; align-items: stretch; border-bottom: 2px solid var(--ink); }
.cc-herald { background: var(--herald); color: #F4EBD3; padding: 10px 14px; display: flex; flex-direction: column; justify-content: center; max-width: 62%; }
.cc-mark { font-family: Georgia, "Times New Roman", serif; font-size: 30px; font-weight: 700; line-height: 1; }
.cc-road { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; margin-top: 4px; opacity: .85; }
.cc-no { padding: 10px 14px; text-align: right; display: flex; flex-direction: column; justify-content: center; }
.cc-no small { font-size: 11px; letter-spacing: .14em; color: var(--ink-2); font-weight: 700; }
.cc-no span { font-family: "Courier New", Courier, monospace; font-size: 22px; font-weight: 700; }
.cc-art { display: flex; justify-content: center; padding: 16px 10px 10px; border-bottom: 1px solid var(--paper-line); }
.cc-art .carart { width: 100%; max-width: 300px; height: auto; }
.cc-grid { display: grid; grid-template-columns: 1fr 1fr; }
.cc-grid > div { padding: 8px 14px; border-bottom: 1px solid var(--paper-line); }
.cc-grid > div:nth-child(odd) { border-right: 1px solid var(--paper-line); }
.cc-grid small, .wb small { display: block; font-size: 10px; font-weight: 700; letter-spacing: .12em; color: var(--ink-2); }
.cc-grid .typed { font-size: 20px; }
.typed-s { font-size: 14px; display: block; }
.cc-status { font-size: 18px; }
.cc-status.is-loaded { color: var(--green); }
.tabs-paper { background: var(--grey-soft); margin: 0 0 12px; }
.tabs-paper a { color: var(--muted); }
.tabs-paper a.on { background: var(--band); color: #fff; }

/* Waybill form */
.wb { background: var(--paper-2); color: var(--ink); border-radius: 8px; border-top: 6px solid var(--stamp); box-shadow: 0 2px 6px rgba(60,45,10,.15); margin-bottom: 14px; overflow: hidden; }
.wb-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 2px solid var(--ink); }
.wb-seal { width: 46px; height: 46px; border-radius: 50%; border: 3px solid var(--ink); display: flex; align-items: center; justify-content: center;
           font-family: Georgia, serif; font-weight: 700; font-size: 13px; flex-shrink: 0; }
.wb-title { flex: 1; min-width: 0; }
.wb-title small { font-size: 11px; letter-spacing: .06em; color: var(--ink); }
.wb-title b { font-family: Georgia, "Times New Roman", serif; color: var(--stamp); font-size: 21px; letter-spacing: .02em; }
.wb-no { text-align: right; }
.wb-no small { font-size: 10px; }
.wb-no span { color: var(--stamp); font-size: 16px; }
.wb-row { display: grid; border-bottom: 1px solid var(--paper-line); }
.wb-row.two { grid-template-columns: 1.4fr 1fr; }
.wb-row.three { grid-template-columns: 1fr 1fr 1fr; }
.wb-row > div { padding: 7px 12px; }
.wb-row > div + div { border-left: 1px solid var(--paper-line); }
.wb-row b { font-size: 20px; }
.wb-row span { font-size: 16px; }
.pre { white-space: pre-line; }
.wb-instr { position: relative; padding: 8px 12px 14px; min-height: 96px; }
.wb-instr small { color: var(--stamp); }
.wb-instr > span { display: block; color: var(--stamp); font-size: 14px; max-width: 62%; }
.wb-stamp { position: absolute; right: 12px; bottom: 12px; transform: rotate(-8deg); border: 3px double var(--stamp); color: var(--stamp);
            border-radius: 6px; padding: 4px 10px; text-align: center; opacity: .9; }
.wb-stamp b { display: block; font-family: Georgia, serif; font-size: 18px; letter-spacing: .08em; }
.wb-stamp span { font-size: 12px; }
.wb-stamp.is-empty { border-color: var(--ink-2); color: var(--ink-2); }

/* Timelines */
.timeline { padding: 10px 14px; }
.tl { display: flex; gap: 12px; align-items: flex-start; position: relative; padding: 6px 0 12px; }
.tl:not(:last-child)::before { content: ""; position: absolute; left: 8px; top: 24px; bottom: -4px; width: 2px; background: var(--line); }
.tl.done:not(:last-child)::before { background: var(--green); }
.tl-dot { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line); background: var(--card); flex-shrink: 0; margin-top: 2px; position: relative; z-index: 1; }
.tl.done .tl-dot { background: var(--green); border-color: var(--green); }
.tl.now .tl-dot { background: #E07B00; border-color: #E07B00; }
.tl.todo b { color: var(--muted); }

/* Roster */
.roster li a { justify-content: flex-start; }
.roster .tag { margin-left: auto; }
.filters { display: flex; gap: 6px; overflow-x: auto; margin: 10px 0 0; }
.filters button { font: inherit; font-size: 14px; font-weight: 600; border: 1px solid var(--line); background: var(--card); color: var(--text); border-radius: 999px; padding: 6px 14px; min-height: 36px; cursor: pointer; flex-shrink: 0; }
.filters button.on { background: var(--band); border-color: var(--band); color: #fff; }
.tabs a { text-decoration: none; }
@media (prefers-color-scheme: dark) {
  .roster .carart, .mcard .carart { background: #CFC6AE; border-radius: 6px; padding: 2px 3px; }
}

/* ---------- Parchment behind the car cards ---------- */
:root { --parch: #EBDDB9; --parch-edge: rgba(120,85,35,.26); --parch-glow: rgba(255,248,225,.5); --grain: .22; }
@media (prefers-color-scheme: dark) { :root { --parch: #2E2819; --parch-edge: rgba(0,0,0,.35); --parch-glow: rgba(120,100,60,.18); } }
body.paper { background-color: var(--parch);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .33 0 0 0 0 .15 0 0 0 .2 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(ellipse at 50% 30%, var(--parch-glow), var(--parch-edge) 100%);
  background-attachment: fixed; }

/* ---------- Town bar ---------- */
.townbar { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.townbar form { margin: 0; }
.townarrow { font: inherit; font-size: 30px; line-height: 1; width: 48px; height: 48px; border-radius: 12px; border: 0; flex-shrink: 0;
             background: rgba(255,255,255,.14); color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.townarrow.off { background: transparent; }
.townname { flex: 1; min-width: 0; text-align: center; position: relative; }
.townname small { display: block; font-size: 12px; color: var(--band-sub); letter-spacing: .04em; }
.townname b { display: block; font-size: 30px; font-weight: 700; letter-spacing: -.3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.townpick { position: absolute; inset: 0; }
.townpick select { width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 16px; }

/* ---------- Stacks of playing cards ---------- */
.undobar { display: flex; justify-content: space-between; align-items: center; gap: 10px; background: rgba(43,36,20,.82); color: #F4EBD3;
           border-radius: 12px; padding: 6px 6px 6px 14px; margin-bottom: 12px; font-size: 15px; }
.undobar form { margin: 0; }
.undolink { font: inherit; font-weight: 700; background: transparent; color: #F2C35B; border: 0; min-height: 40px; padding: 0 12px; cursor: pointer; }
.stackhead { display: flex; justify-content: space-between; font-size: 13px; font-weight: 600; color: #5B4C26; margin: 4px 4px 8px; letter-spacing: .02em; }
@media (prefers-color-scheme: dark) { .stackhead { color: #CDBB8E; } }
.emptystack { text-align: center; color: #6B5A33; padding: 30px 0; font-size: 15px; }
.deck { position: relative; margin: 0 auto; max-width: 380px; }
.pc { position: absolute; left: 0; right: 0; border-radius: 16px; background: #F7EED4; color: #2B2414; border: 1px solid #A8925E;
      box-shadow: 0 -1px 0 rgba(255,255,255,.6) inset, 0 2px 5px rgba(60,40,10,.18); overflow: hidden; cursor: pointer;
      transition: top .28s ease, opacity .2s; }
@media (prefers-color-scheme: dark) { .pc { background: #E9DDBC; } }
.pc.hot { border: 2px solid #E07B00; }
.pc.faded:not(.open) .pc-peek { opacity: .5; }
.pc.faded.open > :not(.pc-act) { opacity: .55; }
.pc-peek { height: 54px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 14px; border-bottom: 1px solid #CDBB8E; }
.pc-mark { font-family: "Courier New", Courier, monospace; font-weight: 700; font-size: 19px; white-space: nowrap; }
.pc-where { font-size: 13px; color: #5B4C26; text-align: right; display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dot { width: 10px; height: 10px; border-radius: 50%; background: #B9A574; flex-shrink: 0; display: inline-block; }
.dot.ok { background: #3B8A2E; }
.pc-road { display: flex; justify-content: space-between; align-items: center; background: #1F2A33; color: #F4EBD3; padding: 8px 14px; }
.pc-road span { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; opacity: .85; }
.pc-road b { font-family: Georgia, "Times New Roman", serif; font-size: 22px; }
.pc-art { display: flex; justify-content: center; padding: 14px 10px 8px; border-bottom: 1px solid #CDBB8E; }
.pc-art .carart { width: 78%; height: auto; }
.pc-f { display: grid; grid-template-columns: 1fr 1fr; }
.pc-f div { padding: 7px 14px; font-size: 14px; border-bottom: 1px solid #CDBB8E; }
.pc-f div:nth-child(odd) { border-right: 1px solid #CDBB8E; }
.pc small { display: block; font-size: 10px; font-weight: 700; letter-spacing: .12em; color: #6B5A33; }
.pc-to { padding: 8px 14px; font-family: "Courier New", Courier, monospace; font-size: 18px; font-weight: 700; color: #A32D2D; }
.pc-to small { font-family: var(--sans, inherit); color: #A32D2D; }
.pc-to span { display: block; font-size: 14px; font-weight: 400; color: #6B5A33; }
.pc-act { position: absolute; left: 14px; right: 14px; bottom: 12px; display: flex; flex-direction: column; gap: 6px; }
.pc-act form { margin: 0; }
.pc-more { text-align: center; font-size: 14px; color: #5B4C26; padding: 6px; }
.notready { font-size: 14px; color: #6B5A33; text-align: center; background: rgba(0,0,0,.06); border-radius: 10px; padding: 9px; }

/* ---------- Your train sheet ---------- */
body.has-sheet main { padding-bottom: 110px; }
.sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: #1F2A26; color: #F4EBD3; border-radius: 18px 18px 0 0;
         transform: translateY(calc(100% - 74px - env(safe-area-inset-bottom))); transition: transform .3s ease; height: 88vh; display: flex; flex-direction: column;
         box-shadow: 0 -4px 18px rgba(0,0,0,.25); max-width: 640px; margin: 0 auto; }
body.sheet-open .sheet { transform: translateY(0); }
.sheet-tab { font: inherit; color: inherit; background: transparent; border: 0; width: 100%; min-height: 74px; padding: 8px 16px calc(10px + env(safe-area-inset-bottom));
             display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 10px; cursor: pointer; }
body.sheet-open .sheet-tab { padding-bottom: 10px; }
.grip { flex-basis: 100%; height: 0; display: flex; justify-content: center; }
.grip::before { content: ""; width: 40px; height: 5px; border-radius: 3px; background: rgba(244,235,211,.4); margin-bottom: 6px; }
.sheet-title { font-size: 16px; }
.sheet-title b { font-weight: 700; }
.badge { background: #E07B00; color: #fff; font-size: 13px; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.sheet-body { flex: 1; overflow-y: auto; padding: 4px 16px 30px; -webkit-overflow-scrolling: touch; }
.sheet .caboose-card { color: #FF9C8F; border-color: rgba(244,235,211,.3); margin-top: 12px; max-width: 380px; margin-left: auto; margin-right: auto; }
.sheet .emptystack { color: #CDBB8E; }
.sheet-shade { position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 40; opacity: 0; pointer-events: none; transition: opacity .3s; }
body.sheet-open .sheet-shade { opacity: 1; pointer-events: auto; }
body.sheet-open { overflow: hidden; }

.pc:not(.open):not(:last-child) > :not(.pc-peek) { visibility: hidden; }

/* Card top strip: car on the left, destination and a small button on the right */
.pc-peek { height: 66px; align-items: center; padding: 0 10px 0 14px; }
.pc-left { display: flex; flex-direction: column; min-width: 0; }
.pc-left small { display: flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 400; letter-spacing: 0; color: #6B5A33; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; min-width: 0; max-width: 58%; }
.pc-right form { margin: 0; }
.pc-dest { font-family: "Courier New", Courier, monospace; font-size: 13px; font-weight: 700; color: #A32D2D; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.minibtn { font: inherit; font-size: 13px; font-weight: 700; min-height: 30px; padding: 0 12px; border-radius: 8px; border: 0; background: #1F4A37; color: #fff; cursor: pointer; }
.minibtn-pu { background: #185FA5; }
.pc-state { font-size: 12px; color: #6B5A33; background: rgba(0,0,0,.07); border-radius: 6px; padding: 3px 8px; white-space: nowrap; }
.pc.faded:not(.open) .pc-peek { opacity: .5; }

.pc-loc { font-size: 12px; color: #5B4C26; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.pc-left small { font-family: inherit; }
.pc-left small.is-dest { font-family: "Courier New", Courier, monospace; font-weight: 700; font-size: 13px; color: #A32D2D; }

/* Train orders sheet shown at the start of a run */
.orders { background: #FBF6E6; color: #2B2414; border-radius: 6px; padding: 16px 18px 18px; margin: 4px auto 16px; max-width: 420px;
          box-shadow: 0 2px 8px rgba(60,40,10,.18); border-top: 6px solid #1F4A37;
          background-image: repeating-linear-gradient(transparent 0 27px, rgba(160,140,90,.18) 27px 28px); }
@media (prefers-color-scheme: dark) { .orders { background-color: #E6DCC0; } }
.orders-head { display: flex; justify-content: space-between; font-size: 11px; font-weight: 700; letter-spacing: .16em; color: #1F4A37; }
.orders-title { font-family: Georgia, "Times New Roman", serif; font-size: 26px; font-weight: 700; letter-spacing: 0; text-transform: none; color: #2B2414; margin: 6px 0 4px; }
.orders-note { font-family: "Courier New", Courier, monospace; font-size: 15px; line-height: 1.45; margin: 0 0 12px; color: #4A3D20; }
.orders-route { list-style: none; margin: 0; padding: 0; }
.orders-route li { display: flex; gap: 12px; position: relative; padding-bottom: 14px; }
.orders-route li:not(:last-child)::before { content: ""; position: absolute; left: 8px; top: 20px; bottom: 0; width: 2px; background: #B9A574; }
.o-dot { width: 18px; height: 18px; border-radius: 50%; border: 2px solid #1F4A37; background: #FBF6E6; flex-shrink: 0; margin-top: 3px; z-index: 1; }
.orders-route li.here .o-dot { background: #E07B00; border-color: #E07B00; }
.orders-route b { font-size: 18px; }
.orders-route small { display: inline; margin-left: 8px; font-size: 12px; color: #6B5A33; letter-spacing: .04em; }
.o-work { display: block; font-family: "Courier New", Courier, monospace; font-size: 15px; font-weight: 700; color: #A32D2D; margin-top: 2px; }
.orders-foot { font-size: 14px; color: #4A3D20; margin: 4px 0 0; border-top: 1px dashed #B9A574; padding-top: 10px; }

/* Re-staging */
.rstrack { padding: 12px 14px; }
.rshead { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.rshead b { font-size: 18px; }
.rshead span { font-size: 13px; color: var(--muted); text-align: right; }
/* Staging yard names stand out; beside each track, the train that will leave from it next */
h2.rsyard { font-family: var(--ui); font-size: 26px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--text);
  margin: 28px 2px 10px; padding-bottom: 6px; border-bottom: 3px solid #C8A04A; }
h2.rsyard:first-of-type { margin-top: 10px; }
.rshead { align-items: center; }
.rshead b { font-size: 20px; }
.rshead .rsnext { display: flex; flex-direction: column; align-items: flex-end; font-size: 15px; font-weight: 600; color: var(--text); }
.rshead .rsnext small { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--green); }
.rsmeter { font-size: 14px; margin: 6px 0 4px; }
.rsmeter .bar { margin-top: 6px; height: 8px; }
.rslabel { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin: 12px 0 4px; }
.rs-off { color: var(--red); }
.rs-move { color: var(--amber); }
.rs-on { color: var(--blue); }
.rslist { list-style: none; margin: 0; padding: 0; }
.rs { display: flex; align-items: center; gap: 10px; padding: 7px 0 7px 8px; border-bottom: 0.5px solid var(--line); }
.rs:last-child { border-bottom: 0; }
.rs.off { box-shadow: inset 4px 0 0 var(--red); }
.rs.move { box-shadow: inset 4px 0 0 #E07B00; }
.rs.on { box-shadow: inset 4px 0 0 var(--blue); }
.toggle { border: 1px solid var(--line); border-radius: 10px; align-items: flex-start; padding: 10px 12px; }
.toggle input { margin-top: 3px; }
.toggle span { display: flex; flex-direction: column; gap: 2px; }
.toggle small { font-size: 13px; color: var(--muted); }
.field input[type=range] { padding: 0; min-height: 30px; border: 0; background: transparent; accent-color: var(--green); -webkit-appearance: auto; appearance: auto; }
.rs .mark { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-weight: 600; }


/* =====================================================================
   1950s railroad look: Archivo Narrow for text, Special Elite (typewriter)
   for car numbers and waybill fields, warm paper colors, layered shadows.
   ===================================================================== */
:root {
  --ui: "Archivo Narrow", "Arial Narrow", system-ui, sans-serif;
  --type: "Special Elite", "Courier New", Courier, monospace;
  --bg: #EFE7D5; --card: #FBF7EC; --text: #2B2414; --muted: #4F4226; --line: #D8C9A2;
  --grey-soft: #E6DCC2; --green-soft: #DDEBDD; --amber-soft: #F6E2B8; --blue-soft: #DCE7F5;
  --shadow: 0 1px 2px rgba(60,40,10,.14), 0 6px 14px rgba(60,40,10,.10);
  --shadow-deep: 0 2px 3px rgba(60,40,10,.20), 0 10px 20px rgba(60,40,10,.14);
  --btn-face: linear-gradient(180deg, #2A5E47, #1B4231);
  --btn-edge: inset 0 1px 0 rgba(255,255,255,.25), 0 2px 0 #12301F, 0 4px 8px rgba(10,30,20,.28);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14211B; --card: #1F2E26; --text: #F1EBDD; --muted: #CBBF9F; --line: #344A3E; --grey-soft: #2B3B32;
    --green-soft: #1E3F30; --amber-soft: #3D2C17; --blue-soft: #1B2D45;
    --shadow: 0 1px 2px rgba(0,0,0,.45), 0 6px 14px rgba(0,0,0,.35);
    --shadow-deep: 0 2px 4px rgba(0,0,0,.5), 0 10px 22px rgba(0,0,0,.4);
    --btn-edge: inset 0 1px 0 rgba(255,255,255,.18), 0 2px 0 #0A1C13, 0 4px 8px rgba(0,0,0,.45);
  }
}
body { font-family: var(--ui); font-size: 18px; letter-spacing: .005em; }
h2 { font-family: var(--ui); font-weight: 700; font-size: 14px; letter-spacing: .12em; color: var(--muted); }
.small { color: var(--muted); font-size: 15px; }

/* Typewriter: car numbers and waybill fields (Special Elite has one weight) */
.mono, .list .mark, .rs .mark, .mark, .typed, .typed-s, .wb b, .wb span, .mcard-id b, .carcard h1, .cc-no span,
.pc-mark, .pc-to, .pc-dest, .pc-left small.is-dest, .orders-note, .o-work, .no b {
  font-family: var(--type); font-weight: 400; letter-spacing: .01em;
}
.pc-mark { font-size: 20px; }
.pc-to { font-size: 19px; }
.o-work { font-size: 16px; }
.orders-note { font-size: 16px; }
.pc-left small.is-dest, .pc-dest { font-size: 15px; }
.typed-s { font-size: 15px; }

/* Headings and lettering that used to be serif: bold narrow capitals */
.cc-mark, .pc-road b, .wb-title b, .wb-stamp b, .orders-title, .wb-seal, .band h1, .townname b, .big {
  font-family: var(--ui); font-weight: 700;
}
.band h1, .townname b { text-transform: uppercase; letter-spacing: .03em; text-shadow: 0 2px 0 rgba(0,0,0,.25); }
.eyebrow, .tabs a, .btn, .cbtn, .minibtn, .mbtn, .stop, .tag, .act, .filters button, .badge, .rslabel, .stackhead, .spots {
  font-family: var(--ui);
}
.wb-title b, .wb-stamp b, .orders-title { text-transform: uppercase; letter-spacing: .04em; }

/* Header band: slight shade and a cast shadow */
.band { background: linear-gradient(180deg, #245540 0%, #193D2D 100%); box-shadow: 0 3px 10px rgba(10,30,20,.35); position: relative; z-index: 5; }
@media (prefers-color-scheme: dark) { .band { background: linear-gradient(180deg, #1C4433, #12301F); } }

/* Tabs: a sunken strip with the selected tab raised */
.tabs { background: rgba(0,0,0,.28); box-shadow: inset 0 2px 4px rgba(0,0,0,.35); }
.tabs a { letter-spacing: .06em; text-transform: uppercase; font-size: 15px; }
.tabs a.on { background: linear-gradient(180deg, #FBF4E2, #EADFC3); color: #1F4A37; box-shadow: 0 1px 3px rgba(0,0,0,.4); }
.tabs-paper { background: var(--grey-soft); box-shadow: inset 0 2px 3px rgba(60,40,10,.18); }
.tabs-paper a { color: var(--muted); }
.tabs-paper a.on { background: var(--btn-face); color: #fff; box-shadow: var(--btn-edge); }

/* Lists and cards lift off the page */
.list, .card, .chip { box-shadow: var(--shadow); border: 1px solid var(--line); }
.cc-front, .wb, .orders, .carcard { box-shadow: var(--shadow-deep); }

/* Buttons look pressable */
.btn, .cbtn, .minibtn, .mbtn:not(.mbtn-done) { background: var(--btn-face); box-shadow: var(--btn-edge); letter-spacing: .04em; }
.btn:active, .cbtn:active, .minibtn:active, .mbtn:active { transform: translateY(1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 0 #12301F; }
.cbtn-pu, .minibtn-pu { background: linear-gradient(180deg, #2B6CB0, #185FA5); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 2px 0 #0E3E70, 0 4px 8px rgba(10,30,60,.25); }
.btn-quiet { background: linear-gradient(180deg, #F7F0DD, #E7DCBF); color: var(--text); box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 2px 0 #C9B88F, 0 3px 6px rgba(60,40,10,.15); }
.btn-danger { background: transparent; box-shadow: none; }
.btn-small, .btn-arrow { background: linear-gradient(180deg, #F7F0DD, #E7DCBF); color: var(--text); box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 1px 0 #C9B88F, 0 2px 4px rgba(60,40,10,.12); }
@media (prefers-color-scheme: dark) {
  .btn-quiet, .btn-small, .btn-arrow { background: linear-gradient(180deg, #33463B, #26372E); color: var(--text); box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 2px 0 #0A1C13; }
}
.townarrow { box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 2px 4px rgba(0,0,0,.3); }

/* Chips, tags and progress bars */
.filters button { box-shadow: 0 1px 2px rgba(60,40,10,.14); background: var(--card); }
.filters button.on { background: var(--btn-face); box-shadow: var(--btn-edge); }
.tag { box-shadow: inset 0 -1px 0 rgba(0,0,0,.12); letter-spacing: .04em; }
.bar { box-shadow: inset 0 1px 2px rgba(0,0,0,.18); }
.bar span { background: linear-gradient(180deg, #2E8A5E, #1F6B4A); }

/* Stacked playing cards: each card shadows the one behind it */
.pc { box-shadow: 0 -1px 0 rgba(255,255,255,.7) inset, 0 2px 4px rgba(60,40,10,.22), 0 8px 14px rgba(60,40,10,.08); }
.pc-left small, .pc-loc, .pc-state, .notready, .pc-more, .pc-where { color: #4A3D20; }
.pc small { color: #5B4C26; }
.cc-grid small, .wb small, .cc-no small { color: var(--ink-2); }

/* Forms */
.field input:not([type=checkbox]), .field select, .search { font-family: var(--ui); font-size: 18px; box-shadow: inset 0 1px 3px rgba(60,40,10,.15); }
.field > span { color: var(--muted); }
.townarrow.off { box-shadow: none; background: transparent; }
.pc.faded:not(.open) .pc-peek { opacity: .62; }
@media (prefers-color-scheme: dark) { .cc-art .carart { background: #CFC6AE; border-radius: 8px; padding: 4px 6px; } }

/* ---- Home screen and the railroad's own name on every page below it ---- */
.band .rrname { font-family: "Archivo Narrow", sans-serif; font-weight: 700; text-transform: uppercase;
  font-size: clamp(28px, 8.6vw, 42px); line-height: 1.02; letter-spacing: .02em; color: #FFFFFF;
  text-shadow: 0 2px 0 rgba(0,0,0,.32); margin: 2px 0 0; overflow-wrap: anywhere; }
.band h1.section { font-size: 16px; letter-spacing: .16em; color: #E8CF8E; text-shadow: none; margin: 8px 0 0; }
.band-home .band-inner { padding: 26px 16px 22px; }
.band-home .logo img { max-width: 520px; }
.home-rr { text-align: center; margin-top: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .14em;
  font-size: 15px; color: #E8CF8E; }
.homemenu { display: grid; gap: 14px; margin-top: 4px; }
.homecard { display: flex; align-items: center; gap: 14px; padding: 16px 14px 16px 16px; min-height: 104px;
  background: var(--card); color: var(--text); text-decoration: none; border-radius: 16px;
  box-shadow: var(--shadow-deep, var(--shadow)); border: 1px solid rgba(120,90,40,.18); }
.homecard:active { transform: translateY(1px); }
.homecard.is-live { border: 2px solid #C9983E; }
.hicon { flex: 0 0 60px; height: 60px; border-radius: 14px; display: grid; place-items: center;
  background: linear-gradient(135deg, #7A541A 0%, #D6AA52 30%, #F6D682 46%, #C9983E 64%, #6E4A16 100%);
  box-shadow: inset 0 0 0 2px #261A0C, 0 2px 4px rgba(0,0,0,.25); }
.hicon svg { width: 40px; height: 40px; fill: #261A0C; stroke: none; }
.hicon svg .ln { fill: none; stroke: #261A0C; stroke-width: 3; stroke-linecap: round; }
.hicon svg .ln.thin { stroke-width: 2.4; }
.hicon svg .cut { fill: #E9C46F; }
.htext { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.htext b { font-size: 22px; text-transform: uppercase; letter-spacing: .03em; line-height: 1.1; }
.htext span { font-size: 15px; }
.htext em { font-style: normal; font-size: 14px; font-weight: 600; color: var(--green); }
.homefoot { text-align: center; margin: 26px 0 0; }
.homefoot a { color: var(--text); font-size: 16px; }

/* ---- Big fast clock on Run a Train ---- */
.fastclock { margin: 2px 0 16px; padding: 14px 16px 12px; border-radius: 18px; text-align: center;
  display: flex; align-items: center; justify-content: center; gap: 16px;
  background: radial-gradient(ellipse at 50% 0%, #2B2216 0%, #15100A 75%); color: #F6E3A8;
  box-shadow: inset 0 0 0 3px #C9983E, inset 0 0 0 5px #3A2A12, 0 6px 16px rgba(40,25,5,.35); }
.fc-face { font-family: "Archivo Narrow", sans-serif; font-weight: 700; font-size: clamp(48px, 17vw, 84px); line-height: 1;
  letter-spacing: .02em; font-variant-numeric: tabular-nums; text-shadow: 0 0 6px rgba(246,200,90,.18), 0 2px 0 #000; }
.fc-meta { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 7px; margin-top: 0;
  font-size: 14px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #E8CF8E; }
.fc-live, .fc-stop { font-size: 12px; padding: 2px 8px; border-radius: 99px; }
.fc-live { background: #2F7A52; color: #FFFFFF; }
.fc-stop { background: #5A4520; color: #F6E3A8; }
.fastclock.is-stopped .fc-face { color: #B9A57A; text-shadow: 0 2px 0 #000; }

/* ---- Crew Call ---- */
.crewlink { display: flex; align-items: center; gap: 12px; color: var(--text); text-decoration: none; border: 2px solid #C9983E; }
.crewme { display: flex; align-items: center; gap: 12px; }
.crewbadge { flex: 0 0 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 20px;
  color: #261A0C; background: linear-gradient(135deg, #D6AA52, #F6D682 45%, #C9983E); box-shadow: inset 0 0 0 2px #261A0C; }
.crewpick { margin-top: 6px; }
.crewpick select { font: inherit; font-size: 15px; min-height: 38px; padding: 4px 8px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--bg); color: var(--text); max-width: 100%; }
.list li.is-mine { background: linear-gradient(90deg, rgba(201,152,62,.18), transparent 70%); }
.mine { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: #261A0C; background: #E8C46A; border-radius: 4px; padding: 1px 6px; margin: 0 0 3px; }
.crewline { font-weight: 600; }
.btn-go { display: inline-flex; align-items: center; text-decoration: none; background: var(--band); color: #FFFFFF; border-radius: 10px; padding: 0 14px; min-height: 40px; font-weight: 600; }
.homecard-small { min-height: 80px; }
.hicon svg .cutln { stroke: #E9C46F; }

/* ---- Operator Help ---- */
.helptoc { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 15px; }
.help h3 { margin: 0 0 8px; font-size: 20px; text-transform: uppercase; letter-spacing: .03em; }
.help p, .help li, .help dd { line-height: 1.45; }
.help p { margin: 0 0 10px; }
.help p:last-child { margin-bottom: 0; }
.help ol, .help ul { margin: 0 0 10px; padding-left: 22px; }
.help li { margin-bottom: 6px; }
.helpdl { display: grid; grid-template-columns: max-content 1fr; gap: 8px 14px; margin: 0; }
.helpdl dt { font-weight: 700; display: flex; align-items: center; gap: 6px; }
.helpdl dd { margin: 0; }
section[id] { scroll-margin-top: 12px; }
.list a.btn-go, a.btn-go { color: #FFFFFF; background: var(--btn-face, var(--band)); box-shadow: var(--btn-edge, none); }
.list .mine { display: table; }

/* ---- Small fast clock in the train screen's header ---- */
.band-top .back, .band-top .link { flex: 1 1 0; }
.band-top .link { justify-content: flex-end; }
.fc-mini { flex: 0 0 auto; margin: 4px 0; display: flex; flex-direction: column; align-items: center; padding: 3px 12px 4px; border-radius: 10px;
  background: radial-gradient(ellipse at 50% 0%, #2B2216 0%, #15100A 75%); color: #F6E3A8;
  box-shadow: inset 0 0 0 2px #C9983E, inset 0 0 0 3px #3A2A12, 0 3px 8px rgba(0,0,0,.35); }
.fc-mini .clock { font-family: "Archivo Narrow", sans-serif; font-weight: 700; font-size: 28px; line-height: 1; letter-spacing: .02em;
  font-variant-numeric: tabular-nums; text-shadow: 0 0 10px rgba(246,200,90,.35), 0 1px 0 #000; }
.fc-mini small { font-size: 9px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #E8CF8E; margin-top: 1px; }

/* Operator Help: light body text so the headings stand out */
.help p, .help li, .help dd { font-weight: 300; }
.help b, .help dt { font-weight: 700; }

/* Train screen: wider fast clock in the top row, train name centered under it */
.band-top .fc-mini { flex: 0 1 46%; min-width: 150px; padding: 4px 14px 5px; }
.band-top .fc-mini .clock { font-size: 34px; }
.band-top .fc-mini small { font-size: 10px; }
.band-top:has(.fc-mini) .back, .band-top:has(.fc-mini) .link { font-size: 15px; }
#runsub { text-align: center; margin-top: 4px; }
/* Home: smaller nameplate, the layout's name as big as the logo or bigger */
.band-home .logo img { max-width: 250px; }
.home-rr { font-size: clamp(30px, 9vw, 42px); line-height: 1.02; letter-spacing: .02em; color: #FFFFFF;
  text-shadow: 0 2px 0 rgba(0,0,0,.32); margin-top: 16px; overflow-wrap: anywhere; }

/* Train screen: the Switch list / Car cards button */
.band-top .viewslot { flex: 1 1 0; display: flex; justify-content: flex-end; }
.band .viewswitch { display: inline-flex; align-items: center; min-height: 36px; padding: 0 11px; border-radius: 9px;
  font-size: 15px; font-weight: 600; color: #FFFFFF; white-space: nowrap;
  border: 1px solid rgba(255,255,255,.75);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 2px 4px rgba(0,0,0,.22); }
.band .viewswitch:active { transform: translateY(1px); box-shadow: inset 0 1px 3px rgba(0,0,0,.3); }

/* AM / PM after the fast clock time */
.ampm { font-size: .72em; margin-left: .2em; letter-spacing: .04em; }
.fastclock .ampm, .fc-mini .ampm { font-size: .4em; margin-left: .15em; letter-spacing: .08em; vertical-align: .15em; }

/* Town tally on the train screen: cars here / ready for pickup / not ready */
.tally { display: grid; grid-template-columns: 1fr 1.3fr 1fr; gap: 8px; margin: 0 0 14px; }
.tally-tile { border-radius: 12px; padding: 8px 6px 7px; text-align: center; background: var(--card);
  border: 1px solid var(--line); box-shadow: 0 2px 3px rgba(60,40,10,.15); }
.tally-tile b { display: block; font-size: 30px; line-height: 1; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.tally-tile span { display: block; font-size: 13px; font-weight: 600; letter-spacing: .04em; color: var(--muted); margin-top: 3px; }
.tally-go { background: linear-gradient(180deg, #2F7A52, #1F5E3E); border-color: #174A30; }
.tally-go b, .tally-go span { color: #FFFFFF; }
.tally-go.is-zero { opacity: .55; }
.tally-no { background: transparent; box-shadow: none; border: 1.5px solid #B9A57A; }
@media (prefers-color-scheme: dark) { .tally-no { border-color: #6F6447; } }
/* Dark mode: the "Cars here" tile matches the car cards, with the light-mode text colors */
@media (prefers-color-scheme: dark) {
  .tally-tile:not(.tally-go):not(.tally-no) { background: #E9DDBC; border-color: #A8925E; }
  .tally-tile:not(.tally-go):not(.tally-no) b { color: #2B2414; }
  .tally-tile:not(.tally-go):not(.tally-no) span { color: #4F4226; }
}
/* The railroad date above the big fast clock */
.fc-date { font-size: 15px; font-weight: 600; letter-spacing: .06em; color: #E8CF8E; margin: 0 0 4px; }
.datehint { margin: -4px 0 12px; }

/* Home: railroad icons on the brass tiles; smaller nameplate, bigger layout name */
.hicon .rricon { width: 50px; height: 50px; object-fit: contain; display: block; }
.band-home .logo img { max-width: 200px; }
.home-rr { font-size: clamp(34px, 10.5vw, 50px); margin-top: 14px; }

/* ---- Car cards on aged card stock (card-paper.jpg) ---- */
.pc, .cc-front {
  background: url("card-paper.jpg") center top / cover no-repeat, #EFE2C2;
  box-shadow: inset 0 0 0 1px rgba(110,75,30,.22), inset 0 0 16px rgba(150,105,45,.30),
              0 2px 4px rgba(60,40,10,.22), 0 8px 14px rgba(60,40,10,.08);
}
.cc-front { --paper-line: rgba(150,120,70,.45); }
@media (prefers-color-scheme: dark) {
  .pc, .cc-front {
    background: linear-gradient(rgba(40,25,5,.10), rgba(40,25,5,.10)), url("card-paper.jpg") center top / cover no-repeat, #E3D3AE;
  }
  /* The car card page keeps dark ink on the light card stock, as in light mode */
  .cc-front { color: #2B2414; --ink: #2B2414; --ink-2: #6B5A33; --stamp: #B3261E; }
}
@media (prefers-color-scheme: dark) {
  .cc-front .cc-art .carart { background: none; padding: 0; }
  .cc-front .cc-status.is-loaded { color: #1F6B4A; }
}

/* ---- Card screens (train, car card): darker table-top behind the cards ---- */
:root { --parch: #ABA28E; --parch-edge: rgba(70,55,25,.22); --parch-glow: rgba(255,255,255,.12); }
@media (prefers-color-scheme: dark) { :root { --parch: #45433B; --parch-edge: rgba(0,0,0,.28); --parch-glow: rgba(255,255,255,.05); } }
body.paper .emptystack { color: #2B2414; }
body.paper .tally-no { border-color: #6F6447; }
body.paper .tally-no b { color: #2B2414; }
body.paper .tally-no span { color: #3E3420; }
body.paper main > h2 { color: #2B2414; }
@media (prefers-color-scheme: dark) {
  body.paper .emptystack { color: #EDE3C8; }
  body.paper .tally-no { border-color: #C9B88F; }
  body.paper .tally-no b { color: #FFFFFF; }
  body.paper .tally-no span { color: #E6DCC2; }
  body.paper main > h2 { color: #E6DCC2; }
}

/* ---- Over the car limit ---- */
.sheet.is-over .sheet-count { color: #FFB27A; font-weight: 700; }
.badge-over { background: #B3261E; }

/* ---- In-app dialog ---- */
.rodialog { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 20px;
  background: rgba(15,12,6,.55); animation: rofade .15s ease-out; }
.rodialog-box { width: 100%; max-width: 360px; border-radius: 18px; padding: 18px 18px 14px; color: #2B2414;
  background: url("card-paper.jpg") center / cover, #EFE2C2;
  box-shadow: inset 0 0 0 1px rgba(110,75,30,.25), inset 0 0 16px rgba(150,105,45,.3), 0 18px 40px rgba(0,0,0,.45);
  border-top: 6px solid #B3261E; }
.rodialog-title { font-size: 22px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; margin: 0 0 6px; }
.rodialog-text { font-size: 17px; line-height: 1.4; margin: 0 0 16px; }
.rodialog-btns { display: flex; gap: 10px; }
.rodialog-btns button { flex: 1; font: inherit; font-weight: 700; font-size: 17px; min-height: 48px; border-radius: 12px; cursor: pointer; }
.rodialog-main { border: 0; color: #FFFFFF; background: var(--btn-face, #1F4A37); box-shadow: var(--btn-edge, 0 2px 4px rgba(0,0,0,.25)); }
.rodialog-alt { border: 1.5px solid #8C7A4E; color: #2B2414; background: rgba(255,255,255,.35); }
@keyframes rofade { from { opacity: 0; } to { opacity: 1; } }

/* Light mode page background: a little darker than the original cream, everywhere except the train screen */
@media (prefers-color-scheme: light) {
  :root { --bg: #E5DBC3; }
  body.paper:not(.trainpage) { background: #DBD1B8; }
  body.trainpage:not(.paper) { background: #EFE7D5; }
}

/* ---- Notices ("Tied down on …", "Saved.", "Session is over" …): paper slip with a railroad-green edge ---- */
.notice { background: #FBF3DC; color: #2B2414; border-left: 5px solid #1F4A37; font-weight: 600; }
.notice a { color: #1F4A37; }
.notice-warn { background: #FBEBCB; color: #5A3600; border-left-color: #C9983E; }
.notice-bad { background: #FBE3E1; color: #8E1F18; border-left-color: #B3261E; }
@media (prefers-color-scheme: dark) {
  .notice { background: #2A2619; color: #F1EBDD; border-left-color: #C9983E; }
  .notice a { color: #E8CF8E; }
  .notice-warn { background: #3A2C14; color: #F6E3A8; border-left-color: #E0A23A; }
  .notice-bad { background: #3E1F1C; color: #FFD2CC; border-left-color: #E2574C; }
}
.notice-warn a, .notice-bad a { color: inherit; }
.notice, .notice-warn, .notice-bad { border-left: 0; }
/* Operator Help: light text in every body section, including the contents links and captions */
.help .card, .help p, .help li, .help dd, .helptoc a, .helpshot figcaption { font-weight: 300; }
.help b, .help strong, .help dt, .help h3 { font-weight: 700; }
/* Operator Help pictures */
.helpshot { margin: 4px 0 14px; }
.helpshot img { display: block; width: 100%; max-width: 360px; height: auto; margin: 0 auto; border-radius: 12px;
  box-shadow: 0 2px 4px rgba(60,40,10,.22), 0 8px 16px rgba(60,40,10,.12); }
.helpshot figcaption { text-align: center; font-size: 14px; margin-top: 8px; color: var(--muted); }
.helpshot { margin: 22px 0 24px; } .helpshot figcaption { margin-top: 12px; }

/* ---- Car Inventory: each place is a big heading that opens to show its cars ---- */
details.grp { margin: 0 0 10px; }
.grp-head { display: flex; align-items: center; gap: 10px; list-style: none; cursor: pointer; padding: 14px 16px; min-height: 60px;
  background: var(--card); border-radius: 14px; box-shadow: var(--shadow-deep, var(--shadow)); border: 1px solid rgba(120,90,40,.18); }
.grp-head::-webkit-details-marker { display: none; }
.grp-name { flex: 1; min-width: 0; font-size: 22px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; line-height: 1.1; color: var(--text); }
.grp-cnt { font-size: 15px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.grp-chev { font-size: 26px; line-height: 1; color: var(--muted); transition: transform .15s; }
details.grp[open] .grp-chev { transform: rotate(90deg); }
details.grp[open] .grp-head { border-radius: 14px 14px 0 0; }
details.grp > .list { border-radius: 0 0 12px 12px; margin-top: -1px; }

/* Car Inventory spacing */
.filters { margin: 10px 0 18px; padding-bottom: 2px; }
.grp-empty { margin: 0; padding: 14px 16px; background: var(--card); border-radius: 0 0 12px 12px; font-size: 15px; color: var(--muted); }

/* Car Inventory: filter buttons and a search button share one row; search opens over the row */
.toolrow { position: relative; display: flex; align-items: center; gap: 6px; margin: 12px 0 18px; }
.toolrow .filters { flex: 1; min-width: 0; margin: 0; gap: 5px; }
.toolrow .filters button { padding: 6px 11px; }
.searchbtn { flex: 0 0 40px; height: 38px; display: grid; place-items: center; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: var(--card); color: var(--text); }
.searchbox { position: absolute; inset: 0; display: none; align-items: center; gap: 6px; }
.toolrow.searching .searchbox { display: flex; }
.toolrow.searching .filters, .toolrow.searching .searchbtn { visibility: hidden; }
.searchbox .search { flex: 1; margin: 0; min-height: 40px; }
.searchclose { flex: 0 0 40px; height: 40px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--text); font-size: 22px; line-height: 1; cursor: pointer; }
@media (max-width: 380px) { .toolrow .filters { gap: 4px; } .toolrow .filters button { padding: 6px 8px; font-size: 13.5px; } .searchbtn { flex-basis: 38px; } }

/* Run a Train: a train with no work this session */
.list li.is-idle b { color: var(--muted); }
.idle-note { font-style: italic; }
.tag-idle { background: transparent; border: 1px dashed var(--muted); color: var(--muted); }

/* ---- Your train drawer on iPhone ----
   Safari's 100vh is taller than what it actually shows, so the drawer is sized to the
   visible screen (dvh) and never comes closer than 90px to the top, leaving room to tap out. */
.sheet { height: 80vh; height: 80dvh; max-height: calc(100vh - 90px); max-height: calc(100dvh - 90px); }
@supports (height: 100dvh) {
  body { min-height: 100dvh; }
}
.sheet { transform: translateY(calc(100% - var(--peek, 74px))); }
body.sheet-open .sheet { transform: translateY(0); }

/* ---- Destination colors on the car cards ---- */
.dest-dot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; margin-right: 6px; vertical-align: -1px;
  box-shadow: 0 0 0 1.5px rgba(0,0,0,.15); flex-shrink: 0; }
.dest-dot-lg { width: 14px; height: 14px; margin-right: 8px; vertical-align: -2px; }
.pc-next { display: flex; justify-content: space-between; align-items: center; padding: 8px 14px;
  background-image: linear-gradient(rgba(255,255,255,.06), rgba(0,0,0,.06)); }
.pc-next span { font-size: 12px; font-weight: 600; letter-spacing: .12em; opacity: .9; }
.pc-next b { font-size: 22px; font-weight: 700; letter-spacing: .02em; }
.pc-rr { text-align: center; font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #5B4C26;
  padding: 2px 14px 8px; border-bottom: 1px solid rgba(150,120,70,.45); }
.colorrow { display: flex; align-items: center; gap: 12px; }
.colorrow input[type=color] { flex: 0 0 56px; width: 56px; height: 44px; padding: 2px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); cursor: pointer; }
.colorrow small { margin: 0; }
.pc-art { border-bottom: 0; padding-bottom: 4px; }

/* Your train tab: title on its own line, counts under it */
.sheet-title { display: flex; flex-direction: column; align-items: flex-start; text-align: left; line-height: 1.15; }
.sheet-title b { font-size: 19px; letter-spacing: .08em; }
.sheet-sub { font-size: 15px; opacity: .92; margin-top: 2px; }

.sheet-title { width: 100%; align-items: center; text-align: center; }
.sheet-sub { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 10px; margin-top: 3px; }

/* ---- Train screen (car cards): the page stays put; only the middle scrolls ---- */
body.trainpage.paper { height: 100vh; height: 100dvh; overflow: hidden; overscroll-behavior: none; }
body.trainpage.paper #app { height: 100vh; height: 100dvh; display: flex; flex-direction: column; }
body.trainpage.paper #app > header { flex: 0 0 auto; }
body.trainpage.paper #app > main { flex: 1 1 auto; width: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  padding-top: 0; padding-bottom: calc(var(--peek, 74px) + 24px); }
/* the count tiles stay at the top while the cards scroll under them */
body.trainpage.paper .tally { position: sticky; top: 0; z-index: 30; margin: 0 -16px 10px; padding: 14px 16px 10px; background: var(--parch); }
/* the drawer tab: a bigger, easier target (tap or swipe up) */
.sheet-tab { min-height: 80px; touch-action: none; }
/* destination dot: never clipped at the left edge */
.pc-loc { padding-left: 3px; padding-top: 2px; padding-bottom: 2px; }
.pc-loc .dest-dot { margin-left: 0; }

/* Layout Settings: clock style with a little clock showing the choice */
.clockstyle { display: flex; align-items: flex-end; gap: 14px; }
.clockstyle .field { flex: 1; min-width: 0; }
.clockpreview { flex: 0 0 auto; margin: 0 0 14px; }
.clockpreview .clock { font-size: 28px; }

.clockstyle { align-items: stretch; }
.clockpreview { display: flex; flex-direction: column; justify-content: center; margin: 0; padding: 4px 16px 6px; min-width: 132px; }
.clockpreview .clock { font-size: 40px; }
.clockpreview small { font-size: 11px; }
.maxrow { display: flex; align-items: center; gap: 12px; }
.maxrow input { flex: 0 0 92px; width: 92px; }
.pluscab { font-size: 18px; font-weight: 600; color: var(--text); }
/* Clock preview: same height as the Clock style box beside it, sitting on the same bottom line */
.clockstyle { align-items: flex-end; }
.clockpreview { box-sizing: border-box; height: 46px; padding: 0 14px; min-width: 112px; flex-direction: row; align-items: center; justify-content: center; gap: 0; }
.clockpreview .clock { font-size: 28px; line-height: 1; }
.clockpreview small { display: none; }

/* ---- Train screen pieces that only show on wide screens ---- */
.band-top .hleft, .band-top .hright { display: contents; }
.band-top .wid, .hdr-tally, .listtitle small, .stopnum, .herebadge { display: none; }
.stopcol { display: block; }

/* ---- Train screen on wide screens (iPad held sideways, laptops) ----
   Phones keep the layout above. From 900px wide:
   header on one row (clock left, town center, counts right), car cards in a grid,
   the Your train drawer full width with its cards in a grid, switch list in columns. */
@media (min-width: 900px) {
  body.trainpage .band-inner { max-width: none; padding: 12px 22px 14px; display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; column-gap: 18px; }
  body.trainpage .band-top { display: contents; }
  body.trainpage .band-top .hleft { display: flex; align-items: center; gap: 14px; grid-column: 1; grid-row: 1; justify-self: start; }
  body.trainpage .band-top .hright { display: flex; align-items: center; gap: 12px; grid-column: 3; grid-row: 1; justify-self: end; }
  body.trainpage .band-top .back, body.trainpage .band-top .viewslot { flex: 0 0 auto; }
  body.trainpage .band-top .back { font-size: 16px; font-weight: 600; white-space: nowrap; }
  body.trainpage .band-top .nar { display: none; }
  body.trainpage .band-top .wid { display: inline; }
  body.trainpage .band-top .fc-mini { flex: 0 0 auto; min-width: 150px; margin: 0; padding: 5px 16px 6px; }
  body.trainpage .band-top .fc-mini .clock { font-size: 38px; }
  body.trainpage .band .viewswitch { min-height: 44px; padding: 0 14px; }

  body.trainpage .townbar { grid-column: 2; grid-row: 1; margin: 0; gap: 14px; justify-content: center; }
  body.trainpage .townname { flex: 0 1 auto; }
  body.trainpage .townname b { font-size: 36px; line-height: 1.05; }
  body.trainpage .townarrow { width: 52px; height: 52px; }

  body.trainpage .listtitle { grid-column: 2; grid-row: 1; text-align: center; }
  body.trainpage .listtitle small { display: block; font-size: 12px; color: var(--band-sub); letter-spacing: .04em; }
  body.trainpage .listtitle h1 { font-size: 36px; line-height: 1.05; margin: 0; }

  /* the two count tiles live in the header; Cars here is left for phones */
  body.trainpage.paper .band .hdr-tally { display: flex; gap: 8px; position: static; margin: 0; padding: 0; background: none; }
  .band .hdr-tally .tally-tile { min-width: 92px; padding: 7px 12px 8px; box-shadow: none; }
  .band .hdr-tally .tally-tile b { font-size: 24px; }
  .band .hdr-tally .tally-tile span { font-size: 11px; letter-spacing: .05em; white-space: nowrap; }
  .band .hdr-tally .tally-go { border: 1px solid rgba(255,255,255,.35); }
  .band .hdr-tally .tally-no { border: 1.5px solid rgba(255,255,255,.55); }
  .band .hdr-tally .tally-no b, .band .hdr-tally .tally-no span { color: #F4EBD3; }
  body.trainpage.paper main .tally { display: none; }

  /* the page itself uses the whole width */
  body.trainpage #app > main, body.trainpage.paper #app > main { max-width: none; padding-left: 22px; padding-right: 22px; padding-top: 18px; }
  body.trainpage main > .card:not(.hint), body.trainpage main > .orders, body.trainpage main > .emptystack { max-width: 720px; margin-left: auto; margin-right: auto; }

  /* car cards: every card whole, in a grid, ready cards first, all the same height */
  .deck { max-width: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; align-items: stretch; }
  .deck .pc { position: relative; top: auto; height: auto; display: flex; flex-direction: column; transition: none; }
  .deck .pc.faded.open > * { opacity: 1; }
  .deck .pc.faded .pc-peek { opacity: .6; }
  .deck .pc .pc-art .carart { width: 70%; }
  .deck .pc .pc-act { position: static; margin-top: auto; padding: 6px 14px 10px; }
  .deck[data-deck=town] .pc:not(.faded) { order: -1; }
  .deck[data-deck=town] .pc .notready { display: none; }   /* the Status line already says it */

  /* Your train: full-width drawer, the same whole cards as in town, set-outs first */
  .sheet { max-width: none; left: 24px; right: 24px; }
  .sheet .deck { padding-top: 6px; }
  .sheet .pc.hot { order: -1; }
  .sheet .caboose-card { max-width: none; }

  /* switch list: one column per stop, the town you're in outlined */
  .stopcols { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 18px; align-items: start; }
  .stopcol { background: rgba(255,255,255,.35); border-radius: 16px; padding: 2px 12px 12px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
  .stopcol.is-here { background: rgba(201,152,62,.16); box-shadow: inset 0 0 0 2px #C9983E; }
  .stopcol h2 { display: flex; align-items: center; gap: 8px; margin: 10px 4px; }
  .stopcol .list { margin: 0; }
  .stopnum { display: inline-flex; width: 22px; height: 22px; border-radius: 50%; background: #1F4A37; color: #FFFFFF; font-size: 12px;
    letter-spacing: 0; align-items: center; justify-content: center; flex-shrink: 0; }
  .herebadge { display: inline-block; margin-left: auto; font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; background: #C9983E; color: #241806; padding: 2px 8px; border-radius: 10px; }
}
@media (min-width: 900px) and (prefers-color-scheme: dark) {
  .stopcol { background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
  .stopcol.is-here { background: rgba(201,152,62,.14); }
}

/* Next stop band: a long place name is cut short with "…" so the band stays one line */
.pc-next { gap: 10px; }
.pc-next span { flex: 0 0 auto; white-space: nowrap; }
.pc-next b { flex: 1 1 auto; min-width: 0; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Switch list: Tie down the train, at the very bottom of the list */
.tierow { margin: 22px 0 8px; text-align: center; }
.tierow .mform { margin: 0; }
.tiebtn { color: #FFFFFF; background: linear-gradient(180deg, #2F7A52, #1F5E3E); border: 1px solid #174A30;
  box-shadow: 0 2px 0 #123B27, 0 4px 8px rgba(0,0,0,.2); font-size: 18px; font-weight: 700; letter-spacing: .02em; min-height: 54px; }
.tiebtn:active { transform: translateY(1px); box-shadow: 0 1px 0 #123B27; }
.tierow .small { margin-top: 8px; }
@media (min-width: 900px) {
  .tierow { max-width: 380px; margin: 26px auto 8px; }
  body.trainpage main > .tiedone { max-width: 720px; }
}

/* ---- Switch list: the route and one town at a time ----
   Phones: every stop's moves in one list, Tie down the train at the bottom.
   Wide screens: the route down the left (tap a town), that town's moves on the right; each side scrolls on its own. */
.slwrap { display: flex; flex-direction: column; }
.slpane { order: 1; }
.slroute { order: 2; }
.slhead, .slstops, .slhint, .slbar { display: none; }
.slstop.is-nowork { display: none; }
.slnone { color: var(--muted); text-align: center; }

@media (min-width: 900px) {
  body.trainpage.listview { height: 100vh; height: 100dvh; overflow: hidden; }
  body.trainpage.listview #app { height: 100vh; height: 100dvh; display: flex; flex-direction: column; }
  body.trainpage.listview #app > header { flex: 0 0 auto; }
  body.trainpage.listview #app > main { flex: 1 1 auto; width: 100%; min-height: 0; display: flex; flex-direction: column; padding-bottom: 0; }
  body.trainpage.listview .slhint-top { display: none; }

  .slwrap { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 22px; }
  .slroute, .slpane { min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding-bottom: 24px; }
  .slroute { order: 0; }

  /* the two titles: Route on the left, the town on the right, same size and weight */
  .slhead, .slname { display: block; text-align: center; line-height: 1.1; }
  .slhead small, .slname small { display: block; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
  .slhead b, .slname b { display: block; font-size: 28px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .slhead { min-height: 52px; display: flex; flex-direction: column; justify-content: center; margin-bottom: 12px; }

  /* the route: a line of stops, tap one to see its moves */
  .slstops { display: block; list-style: none; margin: 0; padding: 8px 0; background: var(--card); border: 1px solid var(--line); border-radius: 16px; }
  .slstops li { position: relative; }
  .slstops li:not(:last-child)::after { content: ""; position: absolute; left: 29px; top: 40px; bottom: -12px; width: 3px; background: #CDBB8E; z-index: 0; }
  .slpick { font: inherit; color: var(--text); background: none; border: 0; width: 100%; text-align: left; cursor: pointer;
    display: flex; align-items: center; gap: 12px; padding: 11px 16px; position: relative; }
  .slpick i { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; border: 3px solid #1F4A37; background: var(--card); z-index: 1;
    display: flex; align-items: center; justify-content: center; font-style: normal; font-size: 12px; font-weight: 700; color: #1F4A37; }
  .slpick b { display: block; font-size: 17px; }
  .slpick small { display: block; font-size: 13px; color: var(--muted); }
  .slpick.is-done i { background: #1F4A37; color: #FFFFFF; }
  .slpick.is-none b, .slpick.is-none small { opacity: .6; }
  .slpick.is-none i { border-color: #A8925E; color: #8C7A4E; }
  .slpick.sel { background: rgba(201,152,62,.22); }
  .slpick.sel i { background: #C9983E; border-color: #8C6A26; color: #241806; }
  .slhint { display: block; margin: 0 4px 12px; text-align: center; }
  .slroute .tierow { max-width: none; margin: 18px 0 0; }
  .slroute .tiedone { margin-top: 18px; }

  /* one town at a time: arrows to step along the route, town name in the middle */
  .slwrap.js .slstop:not(.is-shown) { display: none; }
  .slstop.is-nowork { display: block; }
  .slstop h2 { display: none; }
  .slbar { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
  .slbar .slname { flex: 1 1 auto; min-width: 0; }
  .slbar .townarrow { background: var(--band, #1F4A37); color: #FFFFFF; cursor: pointer; }
  .slbar .townarrow.off { background: transparent; box-shadow: none; }
  .slpane .list { margin-top: 0; }
}
@media (min-width: 900px) and (prefers-color-scheme: dark) {
  .slstops li:not(:last-child)::after { background: #5A5240; }
  .slpick.sel { background: rgba(201,152,62,.18); }
  .slpick i { border-color: #8FBF9F; color: #CFE0D4; }
  .slpick.is-done i { background: #2F7A52; border-color: #8FBF9F; }
  .slbar .townarrow:not(.off) { background: #2F6B4E; }
}
@media (min-width: 900px) {
  .slhead { text-align: left; align-items: flex-start; padding-left: 4px; }
}

/* ---- Off-spot holds ---- */
.minibtn-off { background: linear-gradient(180deg, #D4A84E, #C9983E); color: #241806;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 2px 0 #8C6A26, 0 4px 8px rgba(60,40,10,.2); }
/* warnings on a card: pale red with white text when the industry is full, pale green when a spot opens */
.notready.full { background: #BF7F72; color: #FFFFFF; }
.notready.opened { background: #D5E6D3; color: #1F4A37; }
.act.act-off { background: #F1DDAA; color: #6A4A10; }
@media (min-width: 900px) {
  .deck[data-deck=town] .pc .notready.full, .deck[data-deck=town] .pc .notready.opened { display: block; }
}

/* ---- Car cards: the car's number as tall as the button beside it, the second lines level ---- */
.pc-peek { box-sizing: border-box; height: 66px; padding-top: 6px; padding-bottom: 6px; align-items: stretch; }
.pc-left, .pc-right { justify-content: flex-start; gap: 3px; }
.pc-mark { font-size: 25px; line-height: 32px; height: 32px; }
.pc-right .minibtn, .pc-right .pc-state { height: 32px; min-height: 32px; display: inline-flex; align-items: center; }
.pc-right .pc-state { padding: 0 10px; }
.pc-left small, .pc-loc { line-height: 18px; height: 18px; }

/* ---- Switch list in dark mode: light grey boxes stand out from the dark green page ---- */
@media (prefers-color-scheme: dark) {
  body.listview .list.moves, body.listview .slstops {
    --card: #E4E3DD; --text: #22281F; --muted: #555C52; --line: #C9C8C0;
    background: var(--card); color: var(--text); }
  body.listview .list.moves .small, body.listview .list.moves .mark { color: var(--text); }
  body.listview .list.moves li.is-done .small, body.listview .list.moves li.is-done .mark { color: #7D8277; }
  body.listview .slpick, body.listview .slpick b { color: #22281F; }
  body.listview .slpick small { color: #555C52; }
  body.listview .slpick i { border-color: #1F4A37; color: #1F4A37; background: #E4E3DD; }
  body.listview .slpick.is-done i { background: #1F4A37; color: #FFFFFF; }
  body.listview .slpick.sel { background: rgba(201,152,62,.35); }
  body.listview .slpick.sel i { background: #C9983E; border-color: #8C6A26; color: #241806; }
  body.listview .slstops li:not(:last-child)::after { background: #A9A79D; }
  body.listview .mbtn.mbtn-done { background: #CFE0D2; color: #1F4A37; }
}
body.paper .sheet .emptystack { color: #CDBB8E; }
/* Off-spot warnings: dusty red when the industry is full, sage green when a spot opens; white text on both */
.notready.full { background: #A65A4E; color: #FFFFFF; }
.notready.opened { background: #6E8F6A; color: #FFFFFF; }

/* Card top strip: the car's number and the button beside it are the same height.
   --mk is the number's size; the button is as tall as the number's letters. */
.pc { --mk: 32px; }
.pc-mark { font-size: var(--mk); line-height: 1; height: auto; }
.pc-right .minibtn, .pc-right .pc-state { height: calc(var(--mk) * .74); min-height: 0; padding: 0 11px; font-size: 14px; line-height: 1; }
.pc-left, .pc-right { justify-content: flex-start; gap: 6px; }
.pc-left .pc-mark { margin-top: 3px; }
.pc-left, .pc-right { justify-content: space-between; }
.pc-left small, .pc-loc { margin-bottom: 1px; }
.pc-mark { overflow: hidden; }

/* Card top strip as a grid: the number gets all the width beside the button,
   and the destination on the second line can reach in under the number. */
.pc-peek { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, auto) auto; grid-template-rows: auto auto;
  column-gap: 10px; row-gap: 0; align-content: space-between; }
.pc-left, .pc-right { display: contents; }
.pc-left .pc-mark { grid-column: 1 / 3; grid-row: 1; align-self: start; }
.pc-left small { grid-column: 1; grid-row: 2; align-self: end; }
.pc-right > form, .pc-right > .pc-state, .pc-right > .ostag, .pc-right > .minibtn { grid-column: 3; grid-row: 1; justify-self: end; align-self: start; }
.pc-right .pc-loc { grid-column: 2 / 4; grid-row: 2; justify-self: end; align-self: end; min-width: 0; max-width: 100%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; text-align: right; }
.pc-left small, .pc-right .pc-loc { line-height: 20px; height: 20px; margin: 0; padding-top: 0; padding-bottom: 0; }
/* Car number back to its earlier size; the button stays level with it, a little shorter than before */
.pc { --mk: 25px; }
.pc-right .minibtn, .pc-right .pc-state { height: calc(var(--mk) * .84); font-size: 13px; padding: 0 10px; }
.pc-left .pc-mark { margin-top: 2px; text-overflow: ellipsis; }
.pc-right .minibtn, .pc-right .pc-state { height: calc(var(--mk) * .76); }
.pc-left .pc-mark { margin-top: 4px; }

/* Wide screens: cards keep their playing-card shape (5 wide by 7 tall), about as wide as on a phone */
@media (min-width: 900px) {
  .deck { grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); }
  .deck .pc { aspect-ratio: 5 / 7; max-width: 400px; width: 100%; justify-self: center; }
}
@media (min-width: 900px) { .deck .pc .pc-art .carart { width: 78%; } }
/* Pick up / Set out buttons back to their original size */
.pc-right .minibtn { height: auto; min-height: 30px; padding: 0 12px; font-size: 13px; }
.pc-right .pc-state { height: auto; min-height: 0; padding: 3px 8px; font-size: 12px; }

/* The Rides on / Loading / On hold square is the same size as the Pick up and Set out buttons beside it */
.pc-right .pc-state { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
  height: auto; min-height: 30px; padding: 0 12px; font-family: var(--ui); font-size: 13px; font-weight: 700;
  letter-spacing: .04em; line-height: 1; border-radius: 8px; }

/* ---- Painted car drawings ---- */
.carpic { overflow: visible; }
.carprev { background: #EFE2C2; border: 1px solid #CDBB8E; border-radius: 10px; padding: 14px 12px; display: flex; justify-content: center; }
.carprev .carart { width: 100%; max-width: 360px; height: auto; }
.typepic { display: flex; justify-content: center; background: #EFE2C2; border-radius: 8px; padding: 8px; margin: 8px 0 4px; }
.typepic .carart { width: 100%; max-width: 280px; height: auto; }
.paints { border: 0; margin: 0; padding: 0; min-width: 0; }
.paints legend { padding: 0; margin-bottom: 6px; }
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; }
.sw { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 4px; border: 1.5px solid var(--line); border-radius: 10px;
  font-size: 12px; text-align: center; cursor: pointer; background: var(--card); }
.sw { position: relative; }
.sw input[type=radio] { position: absolute; top: 0; left: 0; width: 1px; height: 1px; min-height: 0; margin: 0; padding: 0; opacity: 0; pointer-events: none; }
.sw i { display: block; width: 100%; height: 26px; border-radius: 6px; border: 1px solid rgba(0,0,0,.3); }
.sw:has(input[type=radio]:checked) { border-color: var(--green); box-shadow: 0 0 0 2px var(--green); }
.sw input[type=color] { width: 100%; height: 26px; padding: 0; border: 1px solid rgba(0,0,0,.3); border-radius: 6px; background: none; min-height: 0; }
.sw-usual i { background-image: linear-gradient(135deg, rgba(255,255,255,.35) 0 20%, transparent 20%); }


/* ---- Step 78: car cards ---- */
/* more room above the car picture */
.pc-art { padding-top: 22px; }
/* top strip: shorter buttons with a smaller arrow, and a shorter strip so the second line sits under the number */
.pc-peek { height: 56px; padding-top: 5px; padding-bottom: 5px; }
.pc-right .minibtn, .pc-right .pc-state { height: 24px; min-height: 24px; padding: 0 10px; font-size: 13px; line-height: 1; border-radius: 7px; }
.minibtn .arr { font-size: .8em; margin-left: 1px; position: relative; top: -.05em; }
.pc-left .pc-mark { margin-top: 1px; }
/* the details grid: car type | length | load, status | waybill, shipper | freight charges */
.pc-f.pc-f3 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.pc-f.pc-f3 > div { border-right: 1px solid #CDBB8E; min-width: 0; overflow-wrap: anywhere; }
.pc-f.pc-f3 > div:nth-child(odd) { border-right: 1px solid #CDBB8E; }
.pc-f.pc-f3 > div.c3 { grid-column: span 2; }
.pc-f.pc-f3 > div.c2 { grid-column: span 3; }
.pc-f.pc-f3 > div.end { border-right: 0; }
/* a little room under the CONSIGNEE label */
.pc-to { padding-top: 12px; }
.pc-to small { margin-bottom: 10px; }
/* bottom of the card: Bad order (quiet khaki) and Full waybill (dark grey border), side by side */
.pc-btns { display: flex; gap: 8px; }
.pc-btns > * { flex: 1 1 0; min-height: 42px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
  font: inherit; font-family: var(--ui); font-weight: 700; font-size: 15px; letter-spacing: .03em; text-decoration: none; cursor: pointer; padding: 0 8px; }
.pc-btns .pc-more { border: 1.25px solid #45484C; color: #2B2414; background: #E8DABA; }
.pc-btns .pc-bo { border: 0; color: #4E4026; background: #D6C399; box-shadow: inset 0 0 0 1px rgba(120,90,40,.14); }
.pc-btns .pc-bo:active { background: #CCB88C; }
/* the bad order form */
.bo-box .rodialog-title { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.bo-box .rodialog-title small { font-family: "Special Elite", "Courier New", monospace; font-size: 18px; text-transform: none; letter-spacing: 0; }
.bo-box .rodialog-text { font-size: 15px; margin-bottom: 10px; }
.bo-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.bo-chips button { font: inherit; font-size: 14px; font-weight: 600; padding: 6px 11px; border-radius: 999px; border: 1.5px solid #8C7A4E;
  background: rgba(255,255,255,.35); color: #2B2414; cursor: pointer; min-height: 34px; }
.bo-chips button.on { background: #4A4D51; border-color: #4A4D51; color: #FFFFFF; }
.bo-box textarea { display: block; width: 100%; min-height: 86px; font: 16px/1.35 "Special Elite", "Courier New", monospace; color: #2B2414;
  padding: 10px 12px; border-radius: 10px; border: 1.5px solid #B9A57A; background: rgba(255,255,255,.55); resize: none; margin: 0 0 6px; box-sizing: border-box; }
.bo-box textarea.need { border-color: #A65A4E; box-shadow: 0 0 0 2px rgba(166,90,78,.25); }
.bo-hint { font-size: 13px; color: #5B4C26; margin: 0 0 14px; }
.bo-box .bo-go { background: linear-gradient(180deg, #5A5D61, #3F4246); box-shadow: 0 2px 0 #26282B; }

/* ---- Car Inventory ---- */
/* the car itself on the row, bigger, no parchment box behind it */
.roster .carart.carpic, .mcard .carart.carpic { background: none; padding: 0; border-radius: 0; width: 110px; height: auto; flex-shrink: 0; }
/* Bad order section */
details.grp.bo .grp-head { box-shadow: inset 5px 0 0 #4A4D51; }
details.grp.bo .grp-cnt .cnt { display: inline-block; min-width: 24px; padding: 1px 7px; border-radius: 999px; background: #4A4D51; color: #FFFFFF; text-align: center; }
.bolist .bo-row { padding: 10px 16px 12px 0; display: block; }
.bolist .bo-top { display: flex; align-items: center; gap: 12px; padding: 0; min-height: 0; color: var(--text); text-decoration: none; }
.tag-bo { background: #4A4D51; color: #FFFFFF; }
.bo-what { margin: 8px 0 2px; font: 16px/1.35 "Special Elite", "Courier New", monospace; color: #2B2414; background: #F3E9CF;
  border-left: 4px solid #4A4D51; padding: 7px 10px; border-radius: 0 8px 8px 0; }
.bo-who { font-size: 13px; color: var(--muted); margin: 4px 0 8px; }
.bo-acts { margin: 0; }
.bo-acts .bo-fix { width: 100%; min-height: 42px; font-size: 15px; }
@media (prefers-color-scheme: dark) { .bo-what { background: #E9DDBC; } }

/* ---- Step 79: car cards ---- */
/* a few more pixels above the car number, and a bigger second line (car type, destination) */
.pc-peek { height: 66px; padding-top: 9px; padding-bottom: 6px; }
.pc-left small, .pc-right .pc-loc { font-size: 15px; line-height: 22px; height: 22px; }
.pc-loc .dest-dot { width: 11px; height: 11px; }
/* the railroad's name under the car picture, larger */
.pc-rr { font-size: 17px; letter-spacing: .12em; }

/* ---- Lists of cars (Car Inventory, re-staging, car setup): the picture as big as the row allows, text to its right ---- */
.roster .carart.carpic, .mcard .carart.carpic, #roster .carart.carpic { width: 136px; height: auto; flex-shrink: 0; background: none; padding: 0; border-radius: 0; }
.rs .carart.carpic { width: 150px; height: auto; flex-shrink: 0; }
#roster li a { justify-content: flex-start; gap: 14px; }
#roster li a .chev, #roster li a .tag { margin-left: auto; }
@media (max-width: 380px) { .roster .carart.carpic, #roster .carart.carpic, .rs .carart.carpic { width: 116px; } }
.roster .mark, #roster .mark, .rs .mark { white-space: nowrap; }
@media (min-width: 700px) { .roster .carart.carpic, #roster .carart.carpic, .rs .carart.carpic { width: 180px; } }


/* Car Inventory: the car's details first, its picture to the right of them, then the status tag */
ul.roster li a .grow, ul.roster .bo-top .grow { order: 1; }
ul.roster li a .carart, ul.roster .bo-top .carart { order: 2; margin-left: auto; }
ul.roster li a .tag, ul.roster .bo-top .tag { order: 3; margin-left: 10px; }
ul.roster li a .tag, ul.roster .bo-top .tag { min-width: 50px; padding-left: 6px; padding-right: 6px; text-align: center; box-sizing: border-box; }
ul.roster li a { gap: 10px; }
ul.roster .carart.carpic { width: 124px; }
@media (max-width: 380px) { ul.roster .carart.carpic { width: 108px; } }
@media (min-width: 700px) { ul.roster .carart.carpic { width: 180px; } }

/* Run a Train: the paper background scrolls up with the car cards instead of staying put */
body.trainpage.paper { background-attachment: scroll; }
/* while a card is measured, show everything in it (closed cards hide their insides) */
.pc.measure > * { visibility: visible !important; }


/* Pick up, Set out and Off spot on the card's top strip: all one width, a little more room before the arrow */
.pc-right .minibtn { width: 104px; min-width: 104px; justify-content: center; display: inline-flex; align-items: center; padding: 0 8px; white-space: nowrap; }
.minibtn .arr { margin-left: 6px; }

/* Bad order button: a darker edge */
.pc-btns .pc-bo { box-shadow: none; border: 1.25px solid #8C7448; }

/* ---- Your train: a floating pill when closed (like iPhone Live Activities); tap or drag up for the full drawer ---- */
body.has-sheet .sheet { transform: translateY(calc(100% + 24px)); }
body.has-sheet.sheet-open .sheet { transform: translateY(0); }
.trainpill { position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 55;
  transform: translateX(-50%); transform-origin: 50% 100%; transition: transform .25s ease, opacity .2s ease;
  display: flex; align-items: center; gap: 12px; padding: 8px 12px 8px 10px; min-height: 56px; max-width: calc(100vw - 24px);
  border: 0; border-radius: 999px; background: #121816; color: #F4EBD3; cursor: pointer; font: inherit; text-align: left;
  box-shadow: 0 8px 22px rgba(0,0,0,.45), 0 0 0 1px rgba(201,160,74,.45); white-space: nowrap; -webkit-tap-highlight-color: transparent; }
.trainpill:active { transform: translateX(-50%) scale(.97); }
.tp-ic { width: 38px; height: 38px; flex: 0 0 38px; border-radius: 50%; background: #2A5E47; color: #F4EBD3;
  display: flex; align-items: center; justify-content: center; box-shadow: inset 0 0 0 1.5px rgba(201,160,74,.6); }
.tp-ic svg { width: 24px; height: 24px; }
.tp-t { display: flex; flex-direction: column; line-height: 1.05; min-width: 0; }
.tp-t b { font-family: var(--ui); font-size: 16px; letter-spacing: .08em; }
.tp-t small { font-size: 13px; color: #CDBB8E; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; }
.tp-cnt { font-family: var(--ui); background: #E07B00; color: #FFFFFF; font-weight: 700; font-size: 15px; border-radius: 999px; padding: 6px 12px; flex-shrink: 0; }
.tp-up { color: #C9A04A; font-size: 22px; line-height: 1; padding: 6px 2px 0; flex-shrink: 0; }
/* open (or being dragged): the pill grows away into the drawer */
body.sheet-open .trainpill, body.sheet-dragging .trainpill { opacity: 0; pointer-events: none; transform: translateX(-50%) scale(1.15, 1.6); }
/* room under the last town card so it can scroll clear of the pill */
body.has-sheet main { padding-bottom: 110px; }

/* ---- Train screen (car cards): the whole page scrolls; only the fast clock row stays at the top ----
   The header is sticky with a negative top (set in train.php), so the town name and the count tiles scroll away. */
body.trainpage.paper { height: auto; min-height: 100vh; min-height: 100dvh; overflow: visible; overscroll-behavior: auto; }
body.trainpage.paper.sheet-open { overflow: hidden; }
body.trainpage.paper #app { height: auto; display: block; }
body.trainpage.paper #app > header { position: sticky; top: calc(-1 * var(--hdrhide, 0px)); z-index: 35; }
body.trainpage.paper #app > main { overflow: visible; }
body.trainpage.paper .tally { position: static; }

/* Your train icon: the front-view locomotive in white, no ring */
.tp-ic { box-shadow: none; }
.tp-ic img { width: 26px; height: 26px; display: block; }

/* wide screens: the pill is in proportion to the bigger screen */
@media (min-width: 900px) {
  .trainpill { min-width: 460px; min-height: 66px; gap: 16px; padding: 9px 16px 9px 12px; justify-content: space-between; }
  .tp-ic { width: 46px; height: 46px; flex-basis: 46px; }
  .tp-ic img { width: 32px; height: 32px; }
  .tp-t { flex: 1 1 auto; }
  .tp-t b { font-size: 19px; }
  .tp-t small { font-size: 15px; }
  .tp-cnt { font-size: 17px; padding: 7px 15px; }
  .tp-up { font-size: 26px; }
}




/* Your train: a full-width bar across the bottom like the first drawer (grab handle, rounded top corners), with the
   current icon / count / chevron row inside. Its dark fill carries on 300 px below the screen edge (::after), so on
   iPhone Safari the space behind the browser's floating toolbar is dark too instead of showing cards. */
.trainpill { left: 0; right: 0; bottom: 0; transform: none; max-width: none; width: 100%;
  border-radius: 22px 22px 0 0; justify-content: center; gap: 12px;
  padding: 22px max(14px, calc(50% - 240px)) calc(12px + env(safe-area-inset-bottom));
  box-shadow: 0 -6px 18px rgba(0,0,0,.35); border-top: 1px solid rgba(201,160,74,.45); }
.trainpill::before { content: ''; position: absolute; top: 8px; left: 50%; width: 40px; height: 5px; margin-left: -20px;
  border-radius: 3px; background: rgba(244,235,211,.35); }
.trainpill::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 300px; background: inherit; pointer-events: none; }
.trainpill .tp-t { flex: 1 1 auto; }
.trainpill:active { transform: translateY(1px); }
body.sheet-open .trainpill, body.sheet-dragging .trainpill { opacity: 0; pointer-events: none; transform: translateY(40%); }
body.has-sheet main { padding-bottom: 110px; }
@media (min-width: 900px) { .trainpill { min-width: 0; border-radius: 26px 26px 0 0; padding-top: 24px; padding-bottom: calc(14px + env(safe-area-inset-bottom)); } }

/* Location screen: the whole header (fast clock and the Working at / town bar) stays at the top; the count tiles and
   the car cards scroll up and slide under its gold bottom line. The tiles sit on the same paper as the cards. */
body.trainpage.paper #app > header { position: sticky; top: 0; z-index: 35; }
body.trainpage.paper .tally { background: transparent; }


/* Full waybill: a deep blue-ink accent (top edge, title, number, special instructions) instead of red;
   the LOADED / EMPTY rubber stamp stays red */
.wb { --wb-accent: #2B4F7E; border-top-color: var(--wb-accent); }
.wb .wb-title b, .wb .wb-no span, .wb .wb-instr small, .wb .wb-instr > span { color: var(--wb-accent); }
.pc-loc .pc-pre { font-weight: 700; color: #6B5A33; letter-spacing: .02em; }

/* Count tiles: the Not ready tile keeps the plain parchment fill it had before the textured background */
body.trainpage.paper main .tally-no { background: var(--parch); }
.custremove { margin: -6px 0 14px; text-align: right; }

/* Full waybill printed on the old card stock (waybill-paper.jpg); a darkened copy of the same paper in dark mode */
.wb { background: #C9B48E url("waybill-paper.jpg") center / cover no-repeat; color: #2B2414;
  --ink: #2B2414; --ink-2: #5B4826; --paper-line: rgba(90,66,30,.35); --stamp: #A3241C;
  border-radius: 10px; box-shadow: 0 2px 4px rgba(40,25,5,.25), 0 10px 22px rgba(40,25,5,.18); }
.wb .wb-head { border-bottom-color: rgba(43,36,20,.75); }
@media (prefers-color-scheme: dark) {
  /* dark mode: the card stock dimmed (a lighter dim than before), cream ink on it */
  .wb { background: #6E5D40 url("waybill-paper-dark.jpg") center / cover no-repeat; color: #F6EBCF;
    --ink: #F6EBCF; --ink-2: #E2D2A8; --paper-line: rgba(246,235,207,.30); --stamp: #FFA394; --wb-accent: #B9D3F5;
    box-shadow: 0 2px 4px rgba(0,0,0,.5), 0 10px 22px rgba(0,0,0,.35); }
  .wb b, .wb span, .wb small { text-shadow: 0 1px 1px rgba(30,20,5,.55); }
  .wb .wb-head { border-bottom-color: rgba(246,235,207,.65); }
  .wb .wb-seal { border-color: #F6EBCF; color: #F6EBCF; }
}



/* Switch list: no orange edge on the next move (it didn't follow the rounded row) */
.moves li.is-next { box-shadow: none; margin-left: 0; padding-left: 0; }

/* ---- Car Inventory edit mode: pick cars, move them to storage together ---- */
.editbtn { font: inherit; font-family: var(--ui); font-weight: 700; font-size: 16px; letter-spacing: .04em; min-height: 40px; padding: 0 16px;
  border-radius: 10px; border: 1.5px solid rgba(255,255,255,.6); background: transparent; color: #FFFFFF; cursor: pointer; }
body.editing .editbtn { background: #F4EBD3; color: #1F4A37; border-color: #F4EBD3; }
.selbox { display: none; width: 28px; height: 28px; flex: 0 0 28px; border-radius: 50%; border: 2px solid #A65A4E; margin-left: 10px; position: relative; }
body.editing .roster li[data-car] .selbox { display: block; }
body.editing .roster li[data-car] .tag { display: none; }
body.editing .roster li:not([data-car]) { opacity: .45; }
body.editing .roster li.sel { background: rgba(179,38,30,.08); }
body.editing .roster li.sel .selbox { background: #B3261E; border-color: #B3261E; }
body.editing .roster li.sel .selbox::after { content: ""; position: absolute; left: 8px; top: 3px; width: 7px; height: 13px;
  border: solid #FFFFFF; border-width: 0 3px 3px 0; transform: rotate(45deg); }
.editbar { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; margin: 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: #121816; color: #F4EBD3; box-shadow: 0 -4px 16px rgba(0,0,0,.35); border-top: 2px solid #C9A04A; }
body.editing .editbar { display: block; }
body.editing main { padding-bottom: 150px; }
.editnote { margin: 0 0 10px; font-size: 14px; color: #CDBB8E; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 640px; margin-left: auto; margin-right: auto; }
.editbtns { display: flex; gap: 10px; max-width: 640px; margin: 0 auto; }
.editbtns .btn { flex: 1; min-height: 48px; }
.btn-store { background: linear-gradient(180deg, #C2392F, #A3241C) !important; color: #FFFFFF; flex: 1.6 !important; }
.btn-store:disabled { opacity: .45; }

ul.roster li a .selbox { order: 4; margin-left: 12px; }

/* Run a Train: the railroad date sits just above the fast clock, larger */
.sessiondate { text-align: center; margin: 4px 0 10px; font-family: var(--ui); font-weight: 700; font-size: 22px; letter-spacing: .02em; color: var(--text); }
.sessiondate small { display: block; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }
/* "Pick your train" heading over the list of trains */
h2.picktrain { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 20px; letter-spacing: .06em;
  color: var(--text); margin: 22px 4px 10px; }
h2.picktrain small { font-size: 13px; letter-spacing: .06em; color: var(--muted); font-weight: 600; }

/* Car card details: a tighter table so the buttons stay on the card */
.pc-f.pc-f3 > div { padding: 4px 12px 5px; font-size: 14px; line-height: 1.2; }
.pc-f.pc-f3 small { margin-bottom: 1px; }
.pc-to { padding: 8px 14px 6px; font-size: 17px; line-height: 1.15; }
.pc-to small { margin-bottom: 4px; }
.pc-to span { font-size: 13px; margin-top: 2px; }
.pc-art { padding-top: 14px; padding-bottom: 2px; }
.pc-rr { padding-bottom: 6px; }
@media (min-width: 900px) { .deck .pc { aspect-ratio: auto; } }
.pc-f.pc-f3 > div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal; }

/* Your train bar: inset a little inside the card edges so some card shows on each side (the open drawer is still full width) */
.trainpill { left: 28px; right: 28px; width: auto; }
@media (min-width: 900px) { .trainpill { left: 44px; right: 44px; } }

/* Your train bar, closed: only as wide as what's in it (icon, YOUR TRAIN / cars, "N to set out", chevron), centered;
   still a tab with rounded top corners and grab handle, its dark fill running down behind Safari's toolbar.
   Opening it brings up the full-width drawer as before. */
.trainpill { left: 50%; right: auto; width: max-content; max-width: calc(100vw - 24px); transform: translateX(-50%);
  justify-content: flex-start; gap: 12px; padding: 22px 16px calc(12px + env(safe-area-inset-bottom)) 12px; }
.trainpill .tp-t { flex: 0 1 auto; }
.trainpill:active { transform: translateX(-50%) translateY(1px); }
body.sheet-open .trainpill, body.sheet-dragging .trainpill { transform: translateX(-50%) translateY(40%); }
@media (min-width: 900px) { .trainpill { left: 50%; right: auto; min-width: 0; gap: 16px; padding: 24px 20px calc(14px + env(safe-area-inset-bottom)) 14px; } }

/* wide screens: a little more room between the count tiles and the Switch list button */
@media (min-width: 900px) { body.trainpage.paper .band .hdr-tally { margin-right: clamp(8px, calc((100vw - 1000px) * .15), 26px); } }

/* Car Inventory: search on its own line under the count tiles, Edit at the far right of that line */
.findrow { display: flex; align-items: center; gap: 10px; margin: 12px 0 0; }
.findbox { position: relative; flex: 1 1 auto; min-width: 0; }
.findbox svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.findbox .search { width: 100%; margin: 0; min-height: 44px; padding-left: 38px; box-sizing: border-box; }
.findrow .editbtn { flex: 0 0 auto; min-height: 44px; border-color: var(--band); background: var(--card); color: var(--band); }
body.editing .findrow .editbtn { background: var(--band); color: #FFFFFF; border-color: var(--band); }
.toolrow .filters { flex: 1; }
@media (prefers-color-scheme: dark) { .findrow .editbtn { color: var(--text); border-color: var(--muted); } }
/* Your train bar with nothing to set out: same width as with "8 to set out" (an invisible copy of that row, no height),
   the icon / YOUR TRAIN / chevron centered in it with no gap left for the badge */
.trainpill.tp-noset { flex-direction: column; align-items: stretch; gap: 0; }
.tp-row { display: flex; align-items: center; justify-content: center; gap: 12px; }
.tp-sizer { height: 0; overflow: hidden; visibility: hidden; }
@media (min-width: 900px) { .tp-row { gap: 16px; } }
/* Car cards: room between the NEXT STOP color bar and the car picture (the cards grow a little to make room) */
.pc-art { padding-top: 26px; padding-bottom: 6px; }

/* Off-layout businesses: the sample-business card, and each "Via …" group folds up (long lists start closed) */
.samplebox p { margin: 6px 0 12px; }
.samplebox .pair form { flex: 1; }
.custgrp > summary { list-style: none; cursor: pointer; display: flex; align-items: center; }
.custgrp > summary::-webkit-details-marker { display: none; }
.custgrp > summary h2 { display: inline-block; margin-right: 8px; }
.custgrp > summary::after { content: '\203A'; font-size: 26px; color: var(--muted); transform: rotate(90deg); transition: transform .15s; }
.custgrp:not([open]) > summary::after { transform: none; }
/* Industry setup: suggested traffic for the kind of business */
.suggest .row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.suggest .gone { opacity: .5; }

/* ---- Add a car from a photo (add-car.php) ---- */
.addcar { max-width: 520px; margin: 0 auto; }
.ac-art { display: flex; justify-content: center; }
.ac-art svg { max-width: 100%; height: auto; }
.ac-drop { border: 2px dashed #B9A777; border-radius: 16px; padding: 22px 18px; text-align: center; background: var(--card); }
.ac-ghost { opacity: .35; margin: 4px 0 12px; }
.ac-drop p { margin: 0; color: var(--muted); font-size: 15px; }
.ac-big { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; box-sizing: border-box; min-height: 58px; border-radius: 14px;
  font-family: var(--ui); font-weight: 700; font-size: 18px; margin-top: 12px; cursor: pointer; }
.ac-go { background: var(--band); color: #FFFFFF; }
.ac-alt { background: var(--card); color: var(--band); box-shadow: inset 0 0 0 2px var(--band); }
.ac-tips { font-size: 14px; color: var(--muted); margin: 16px 4px 0; line-height: 1.45; }
.ac-tips b { color: var(--text); }
.ac-noai { background: rgba(201,160,74,.15); border-radius: 10px; padding: 8px 10px; }
.ac-byhand { display: block; margin: 16px auto 0; background: none; border: 0; color: var(--band); font: inherit; font-weight: 700; font-size: 17px; cursor: pointer; }
.ac-shot { position: relative; border-radius: 14px; overflow: hidden; background: #000; }
.ac-shot img { display: block; width: 100%; }
.ac-scan { position: absolute; left: 0; right: 0; top: 0; height: 3px; background: #E8C25A; box-shadow: 0 0 18px 6px rgba(232,194,90,.7); animation: acscan 1.8s ease-in-out infinite alternate; }
@keyframes acscan { from { top: 8%; } to { top: 92%; } }
.ac-checks { list-style: none; margin: 14px 0 0; padding: 0; }
.ac-checks li { display: flex; gap: 12px; align-items: center; padding: 10px 4px; border-bottom: 1px solid var(--line); font-size: 16px; }
.ac-checks li > span { flex: 1; }
.ac-checks small { display: block; color: var(--muted); font-size: 14px; }
.ac-checks i { width: 24px; height: 24px; flex: 0 0 24px; border-radius: 50%; border: 3px solid #D8CDB0; border-top-color: var(--band); box-sizing: border-box; animation: acspin .9s linear infinite; }
.ac-checks li.done i { animation: none; border: 0; background: #2F7D4F; position: relative; }
.ac-checks li.done i::after { content: ""; position: absolute; left: 8px; top: 4px; width: 6px; height: 11px; border: solid #FFFFFF; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
@keyframes acspin { to { transform: rotate(360deg); } }
.ac-prev { background: url("card-paper.jpg") center / cover; border-radius: 14px; padding: 16px 8px 8px; text-align: center; margin-bottom: 4px; }
.ac-prev small { display: block; font-family: var(--ui); font-weight: 700; font-size: 11px; letter-spacing: .12em; color: #6B5A33; margin-top: 6px; }
#acform .field { margin-top: 12px; }
#acform .pair { margin: 0; }
.ac-len { flex: 0 0 34%; }
.ac-paintrow { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 10px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; }
.ac-paintrow input[type=color] { width: 32px; height: 32px; padding: 0; border: 0; background: none; cursor: pointer; }
.ac-paintrow b { font-weight: 600; font-size: 16px; color: var(--text); }
.ac-note { margin-bottom: 12px; background: rgba(201,160,74,.18); border-radius: 10px; padding: 10px 12px; font-size: 14px; line-height: 1.4; }
.ac-era { margin-top: 14px; background: #F6E3BF; color: #6A3B0E; border-radius: 10px; padding: 10px 12px; font-size: 14px; line-height: 1.4; }
.ac-foot { display: flex; gap: 10px; margin: 18px 0 8px; }
.ac-foot .btn { margin: 0; }
.ac-foot .btn-quiet { flex: 0 0 34%; }
.ac-foot .btn:not(.btn-quiet) { flex: 1; }
@media (prefers-color-scheme: dark) { .ac-era { background: #4A3A1E; color: #F3DFB8; } }
.band .addbtn { display: inline-flex; align-items: center; text-decoration: none; }
a.btn-quiet.btn-link { color: var(--text); margin-top: 10px; }
/* Dark mode: the "Choose from photos" button in light text with a light outline (was dark green on dark), and number
   fields (car length and others) use the browser's dark controls so their up/down arrows show up */
@media (prefers-color-scheme: dark) {
  .ac-alt { background: var(--card); color: #F4EBD3; box-shadow: inset 0 0 0 2px #C9A04A; }
  .ac-byhand { color: #E8CF8E; }
  input[type=number], input[type=color], select { color-scheme: dark; }
}
/* Dark mode, Car Inventory: car rows on a solid warm grey (#959488) with dark ink, like a card under a lamp */
@media (prefers-color-scheme: dark) {
  details.grp > .list.roster, details.grp > .list.roster li, details.grp > .list.roster li a, details.grp > .grp-empty { background: #959488; }
  details.grp > .list.roster li + li { border-top-color: rgba(30,28,20,.22); }
  details.grp > .list.roster { overflow: hidden; border-radius: 0 0 12px 12px; }
  body details.grp > .list.roster li a, body details.grp > .list.roster li .grow, body details.grp > .list.roster li .mark { color: #17140C !important; }
  body details.grp > .list.roster li .small, body details.grp > .grp-empty { color: #2E2A1E !important; }
}
/* Dark mode, Car Inventory and re-staging: every status pill like the Staged one — dark fill, light text */
@media (prefers-color-scheme: dark) {
  ul.roster .tag-go, ul.roster .tag-work, ul.roster .tag-hold, ul.roster .tag-away { background: #263A30; color: #E9E4D4; }
  /* re-staging car rows: the same warm grey with dark lettering as Car Inventory */
  .rslist { background: #959488; border-radius: 10px; overflow: hidden; }
  .rslist .rs { border-bottom-color: rgba(30,28,20,.22); padding-right: 8px; }
  .rslist .rs:last-child { border-bottom: 0; }
  body .rslist .rs .mark { color: #17140C !important; }
  body .rslist .rs .small { color: #2E2A1E !important; }
}
/* Layout Settings › Cars: the two ways to add a car side by side */
.addpair { display: flex; gap: 10px; margin: 0 0 4px; }
.addpair .btn { flex: 1 1 0; min-width: 0; margin: 0; gap: 8px; font-size: 16px; }
a.btn-quiet.btn-link { color: var(--text); }
.addpair a.btn-quiet.btn-link { margin-top: 0; }
.cargrp ul.roster li a .chev { order: 5; margin-left: 10px; }
/* Layout Settings › Cars: text · car picture · a fixed spot for the Stored / Bad order pill (empty for cars in
   service), the same on every row so the pictures line up. No arrow: tapping the row opens the car. */
.cargrp ul.roster li a { gap: 8px; }
.cargrp ul.roster li a > .svcslot { order: 3; flex: 0 0 64px; display: flex; justify-content: flex-end; }
.cargrp ul.roster li a > .svcslot .tag { margin: 0; min-width: 0; padding: 2px 7px; font-size: 11px; }
@media (max-width: 430px) { .cargrp ul.roster .carart.carpic { width: 120px; } }
/* Re-staging: no colored left edge on the car rows (the section label above each list already says take off / move / add) */
.rs.off, .rs.move, .rs.on { box-shadow: none; }
/* Home: Appearance (Automatic / Light / Dark), kept on this phone */
.appearance { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 22px 2px 0; }
.appearance > span { font-size: 15px; font-weight: 600; color: var(--muted); }
.seg { display: inline-flex; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 3px; gap: 2px; }
.seg button { font: inherit; font-family: var(--ui); font-weight: 600; font-size: 15px; border: 0; background: transparent; color: var(--text); padding: 7px 12px; border-radius: 8px; cursor: pointer; }
.seg button.on { background: var(--band); color: #FFFFFF; }
@media (prefers-color-scheme: dark) { .seg button.on { background: #E8CF8E; color: #17140C; } }

/* Wide screens, smaller cards (Oct 13): each card is laid out at phone width (360 px) and scaled down to fit
   4 across, or 5 across from 1150 px (iPad sideways and wider); train.php sets --dcols and --dz to fit the screen.
   Fewer cards keep the same smaller size. PREVIOUS SIZING (to go back, delete this block and the CARD_W lines in
   train.php's layout()): .deck { grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); }
   .deck .pc { max-width: 400px; width: 100%; justify-self: center; } — cards 330–400 px wide, 3 across on an iPad. */
@media (min-width: 900px) {
  .deck { grid-template-columns: repeat(var(--dcols, 4), minmax(0, 1fr)); gap: 16px; }
  .deck .pc { width: 360px; max-width: none; zoom: var(--dz, .6); justify-self: center; align-self: start; }
}
@media (min-width: 1150px) { .deck { --dcols: 5; } }


/* Light mode, every page: the same table-top background as the Run a Train screen (dark mode keeps its own colors) */
@media (prefers-color-scheme: light) {
  :root { --parch: #DBD1B8; --parch-edge: rgba(95,70,30,.24); --parch-glow: rgba(255,252,240,.31); }
  body { background-color: var(--parch);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .33 0 0 0 0 .15 0 0 0 .2 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(ellipse at 50% 30%, var(--parch-glow), var(--parch-edge) 100%);
  background-attachment: fixed; }
}

/* Your train bar as the floating pill (the earlier look), for phones where the docked bar sits too high above Safari's
   floating toolbar (iOS 27). Chosen on the Home screen; appearance.js sets html.pill-float on this phone only. */
html.pill-float .trainpill { left: 50%; right: auto; bottom: calc(18px + env(safe-area-inset-bottom)); width: auto; min-width: 0;
  max-width: calc(100vw - 24px); transform: translateX(-50%); border-radius: 999px; justify-content: center; gap: 12px;
  padding: 8px 12px 8px 10px; min-height: 56px; border-top: 0; box-shadow: 0 8px 22px rgba(0,0,0,.45), 0 0 0 1px rgba(201,160,74,.45); }
html.pill-float .trainpill::before, html.pill-float .trainpill::after { display: none; }
html.pill-float .trainpill:active { transform: translateX(-50%) scale(.97); }
html.pill-float body.sheet-open .trainpill, html.pill-float body.sheet-dragging .trainpill { transform: translateX(-50%) scale(1.15, 1.6); }
/* centered vertically in both states (with and without cars to set out); the chevron has no top offset */
html.pill-float .trainpill { align-items: center; }
html.pill-float .trainpill.tp-noset { flex-direction: row; align-items: center; }
html.pill-float .tp-sizer { display: none; }
html.pill-float .tp-up { padding: 0; line-height: 1; }
@media (min-width: 900px) {
  html.pill-float .trainpill { min-width: 460px; min-height: 66px; gap: 16px; padding: 9px 16px 9px 12px; justify-content: center; border-radius: 999px; }
}

/* ---- Empty car slip card (Oct 14 design): same top as a waybill card, one row of car facts,
   EMPTY CAR, RETURN TO centered in the space left, a grey EMPTY stamp above the buttons ---- */
.pc.pc-empty { display: flex; flex-direction: column; }
.pc-empty > .pc-peek, .pc-empty > .pc-next, .pc-empty > .pc-art, .pc-empty > .pc-rr, .pc-empty > .pc-f { flex: 0 0 auto; }
.pc-f.pc-f3.pc-ef { grid-template-columns: 1.35fr 1fr 1.15fr; }
.pc-f.pc-f3.pc-ef > div { grid-column: auto; }
.pc-eto { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  padding: 8px 14px 70px; color: #2B2414; }
.pc-eto small { font-family: var(--type); font-size: 17px; font-weight: 400; letter-spacing: .04em; color: #2B2414; -webkit-text-stroke: .6px #2B2414; }
.pc-eto b { font-family: var(--type); font-weight: 400; -webkit-text-stroke: .5px #A32D2D; font-size: 26px; line-height: 1.15; margin-top: 6px; color: #A32D2D; }
.pc-eto span { font-family: var(--type); font-size: 17px; margin-top: 4px; color: #4A3D20; }
.pc-estamp { position: absolute; right: 16px; bottom: 64px; transform: rotate(-8deg); pointer-events: none;
  border: 2.5px solid rgba(85,80,70,.5); color: rgba(85,80,70,.6); border-radius: 4px; padding: 0 10px;
  font-family: var(--ui); font-weight: 700; font-size: 22px; letter-spacing: .2em; line-height: 1.35; }
.pc:not(.open):not(:last-child) > .pc-estamp { visibility: hidden; }
@media (min-width: 900px) {
  .deck .pc-empty .pc-eto { padding-bottom: 46px; }
}
/* Empty car slip on the car card page: grey top edge instead of the waybill's red one */
.wb.wb-eslip { border-top-color: #6B665C; }
/* Layout Settings › Empty car returns: one row per reporting mark, its home picked on the right */
.rhead { margin: 18px 0 8px; font-size: 17px; }
.rlist { padding-left: 0; box-shadow: none; background: transparent; }
.rlist li { border-bottom: 0.5px solid var(--line); }
.rrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; }
.rmark { display: flex; flex-direction: column; min-width: 0; }
.rmark .small { font-size: 13px; }
.rrow select { flex: 0 1 52%; min-width: 0; font: inherit; font-size: 15px; min-height: 44px; padding: 0 10px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--bg); color: var(--text); }

/* ---- Light mode (Oct 14): Run a Train uses the dark-mode table-top; Car Inventory / Cars group headings match it ---- */
@media (prefers-color-scheme: light) {
  body.trainpage.paper { --parch: #45433B; --parch-edge: rgba(0,0,0,.28); --parch-glow: rgba(255,255,255,.05); }
  body.trainpage.paper .emptystack { color: #EDE3C8; }
  body.trainpage.paper .tally-no { border-color: #C9B88F; }
  body.trainpage.paper .tally-no b { color: #FFFFFF; }
  body.trainpage.paper .tally-no span { color: #E6DCC2; }
  body.trainpage.paper main > h2 { color: #E6DCC2; }
  .grp-head { background: #45433B; border-color: rgba(0,0,0,.28); }
  .grp-head .grp-name { color: #F1EBDD; }
  .grp-head .grp-cnt, .grp-head .grp-chev { color: #E6DCC2; }
}
/* pill: the text block takes only the room it needs, so everything sits centered in the pill */
html.pill-float .trainpill .tp-t { flex: 0 1 auto; }

/* Empty car returns: each mark on two lines (the mark, then its home town and gateway side by side) */
.rrow { flex-wrap: wrap; align-items: stretch; }
.rmark { flex: 1 0 100%; flex-direction: row; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.rrow input[type=text] { flex: 1 1 0; min-width: 0; font: inherit; font-size: 15px; min-height: 44px; padding: 0 10px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--card); color: var(--text); }
.rrow select { flex: 1 1 0; }

/* ---------------------------------------------------------------- Wide Home screen (Oct 15): desktop / tablet-landscape only */
.homewide { display: none; }
@media (min-width: 1100px) {
  .homenarrow { display: none; }
  .homewide { display: block; }
}
.hw { --hw-bg:transparent; --hw-card:#FBF7EC; --hw-hover:#F3E6BE; --hw-hover-line:#C9983E; --hw-line:#D6CBAE; --hw-text:#1F2420; --hw-muted:#3B3F36;
      --hw-go:#4F6A42; --hw-brass:#7E5A17; --hw-shadow:0 1px 3px rgba(60,45,10,.12); --hw-seg-on:#1F4A37; --hw-seg-on-text:#FFFFFF; --hw-seg-hover:rgba(31,74,55,.08);
      --hw-art:url("home-room-light.png"); --hw-art-op:.5;
      --hw-gold:linear-gradient(135deg,#8C6420 0%,#C99A3E 20%,#F3DC9A 36%,#FFF8DC 43%,#E6C26C 51%,#B08430 70%,#E2C27A 86%,#9C7228 100%);
      background: var(--hw-bg); color: var(--hw-text); min-height: 100vh; font-family: "Archivo Narrow", "Helvetica Neue", sans-serif; }
@media (prefers-color-scheme: dark) {
  .hw { --hw-bg:#0F1D17; --hw-card:#1A2B23; --hw-hover:#25402F; --hw-hover-line:#3D5A4A; --hw-line:#2E4238; --hw-text:#EEF3EF; --hw-muted:#A9B8AF;
        --hw-go:#A3BA95; --hw-brass:#D4B06A; --hw-shadow:none; --hw-seg-on:#E8CF8E; --hw-seg-on-text:#1B1406; --hw-seg-hover:rgba(255,255,255,.06);
        --hw-art:url("home-room-dark.png"); --hw-art-op:.2;
        --hw-gold:linear-gradient(135deg,#8C6420 0%,#C99A3E 20%,#F3DC9A 36%,#FFF8DC 43%,#E6C26C 51%,#B08430 70%,#E2C27A 86%,#9C7228 100%); }
  body:has(.homewide) { background: #0F1D17; }
}
.hw a { color: inherit; text-decoration: none; }
.hw-band { background: linear-gradient(180deg, #245540 0%, #193D2D 100%); border-bottom: 3px solid #C9983E; box-shadow: 0 3px 10px rgba(10,30,20,.35); }
@media (prefers-color-scheme: dark) { .hw-band { background: linear-gradient(180deg, #1C4433, #12301F); } }
.hw-band-in { max-width: 1280px; margin: 0 auto; padding: 18px 40px; display: flex; align-items: center; gap: 22px; }
.hw-band .logo { margin: 0; }
.hw-band .logo img { width: 176px; height: auto; max-width: none; display: block; }
.hw-rr { flex: 1 1 auto; font-size: 36px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: #FFFFFF; text-shadow: 0 2px 0 rgba(0,0,0,.25); }
.hw-tools { display: flex; gap: 10px; align-items: center; }
.hw-ibtn { width: 48px; height: 48px; border-radius: 12px; border: 1px solid transparent; background: transparent; color: #E8CF8E; display: flex; align-items: center; justify-content: center; cursor: default; opacity: .85; }
.hw-ibtn.hw-acct { width: 52px; height: 52px; border-radius: 50%; background: rgba(255,255,255,.08); }
.hw-main { max-width: 1280px; margin: 0 auto; padding: 0 40px 40px; box-sizing: border-box; }
.hw-welcome { position: relative; height: 225px; display: flex; align-items: center; box-sizing: border-box; }
.hw-art { position: absolute; left: 40%; right: -40px; top: 0; bottom: 0; background-image: var(--hw-art); background-size: 780px auto; background-position: left 0 top -175px; background-repeat: no-repeat; opacity: var(--hw-art-op); pointer-events: none;
          -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24%), linear-gradient(180deg, #000 80%, transparent 100%); -webkit-mask-composite: source-in;
          mask-image: linear-gradient(90deg, transparent 0, #000 24%), linear-gradient(180deg, #000 80%, transparent 100%); mask-composite: intersect; }
.hw-welcome-tx { position: relative; }
.hw-welcome h1 { margin: 0; font-size: 40px; font-weight: 700; letter-spacing: .01em; color: var(--hw-text); }
.hw-welcome p { margin: 6px 0 0; font-size: 20px; color: var(--hw-muted); }
.hw-board { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: stretch; }
.hw-sec { background: var(--hw-card); border: 1px solid var(--hw-line); border-radius: 16px; box-shadow: var(--hw-shadow); box-sizing: border-box; transition: background-color .18s ease, border-color .18s ease; }
a.hw-sec:hover { background: var(--hw-hover); border-color: var(--hw-hover-line); }
a.hw-sec:focus-visible { outline: 3px solid var(--hw-brass); outline-offset: 2px; }
.hw-chev { color: var(--hw-brass); font-size: 34px; line-height: 1; transition: transform .18s ease; }
a.hw-sec:hover .hw-chev { transform: translateX(3px); }
.hw-icw { display: block; flex-shrink: 0; /* light mode: dark-brown outline round the gold icons, plus the soft shadow */
          filter: drop-shadow(1px 0 0 #4A3208) drop-shadow(-1px 0 0 #4A3208) drop-shadow(0 1px 0 #4A3208) drop-shadow(0 -1px 0 #4A3208) drop-shadow(0 1px 1px rgba(60,40,5,.35)); }
@media (prefers-color-scheme: dark) { .hw-icw { filter: drop-shadow(0 1px 1px rgba(60,40,5,.35)); } }
.hw-ic { display: block; width: 68px; height: 68px; background: var(--hw-gold); background-size: 240% 240%; background-position: 0% 0%;
         -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; transition: background-position 2s ease; }
a.hw-sec:hover .hw-ic { background-position: 100% 100%; }
.hw-ic-big { width: 100px; height: 100px; }
.hw-ic-locomotive { --m: url("icons/locomotive.png"); }
.hw-ic-conductor-cap { --m: url("icons/conductor-cap.png"); }
.hw-ic-caboose { --m: url("icons/caboose.png"); }
.hw-ic-switch-stand { --m: url("icons/switch-stand.png"); }
.hw-ic-lantern { --m: url("icons/lantern.png"); }
.hw-ic-signal { --m: url("icons/signal.png"); }
.hw-run { padding: 26px 30px; display: flex; align-items: center; gap: 26px; border: 2px solid #C9983E; }
.hw-tx { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.hw-run .hw-tx { gap: 8px; }
.hw-tag, .hw-kick { font-size: 15px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--hw-brass); }
.hw-runh { font-size: 40px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; line-height: 1; }
.hw-runl { font-size: 21px; }
.hw-m { font-size: 17px; color: var(--hw-go); }
.hw-run .hw-m { font-size: 18px; }
.hw-glance { padding: 24px 26px; display: flex; flex-direction: column; gap: 16px; }
.hw-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.hw-stats b { display: block; font-size: 40px; font-weight: 700; line-height: 1; }
.hw-stats span { font-size: 17px; color: var(--hw-muted); }
.hw-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 20px; }
.hw-tile { padding: 22px 24px; display: flex; align-items: center; gap: 18px; }
.hw-tile .hw-tx b { font-size: 27px; font-weight: 700; text-transform: uppercase; }
.hw-d { font-size: 19px; color: var(--hw-muted); }
.hw-tile .hw-chev { font-size: 28px; }
.hw-device { padding: 24px 26px; display: flex; flex-direction: column; gap: 14px; }
.hw-lbl { font-size: 17px; color: var(--hw-muted); }
.hw-lbl + .hw-seg + .hw-lbl { margin-top: 6px; }
.hw-seg { display: flex; gap: 4px; padding: 4px; border-radius: 12px; border: 1px solid var(--hw-line); }
.hw-seg button { flex: 1 1 auto; font: inherit; font-size: 17px; min-height: 44px; padding: 0 14px; border: 0; border-radius: 9px; background: transparent; color: var(--hw-text); cursor: pointer; }
.hw-seg button:hover { background: var(--hw-seg-hover); }
.hw-seg button.on { background: var(--hw-seg-on); color: var(--hw-seg-on-text); font-weight: 700; }
.hw-foot { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--hw-line); display: flex; justify-content: flex-end; font-size: 19px; color: var(--hw-muted); }
.hw-foot a { min-height: 44px; display: flex; align-items: center; }
.hw-foot a:hover { color: var(--hw-text); }

/* ---------------------------------------------------------------- Oct 15, later changes */
/* Re-staging: place name with its car count, and each track's "name - N cars" (no more Now / after meter) */
h2.rsyard { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
h2.rsyard .rsycnt { font-size: 16px; font-weight: 600; letter-spacing: .02em; text-transform: none; color: var(--muted); white-space: nowrap; }
.rstitle { min-width: 0; }
.rstitle i { font-style: normal; font-size: 16px; font-weight: 600; color: var(--muted); }

@media (prefers-color-scheme: light) {
  /* Car lists (Car Inventory, Re-staging, Layout Settings > Cars): a warm neutral a little darker than white,
     and a firmer divider between every car */
  ul.roster, ul.roster > li, .grp-empty, .rslist { background: #E9E2CF; }
  ul.roster > li { border-bottom: 2px solid #A89A76; }
  ul.roster > li:last-child { border-bottom: 0; }
  .rslist { border-radius: 10px; overflow: hidden; }
  .rslist .rs { border-bottom: 2px solid #A89A76; padding-right: 8px; }
  .rslist .rs:last-child { border-bottom: 0; }

  /* Re-staging: the line under each place name in dark green (was gold, lost on the table-top background) */
  h2.rsyard { border-bottom-color: #1F4A37; }
}

/* ---------------------------------------------------------------- Select train rows (step 106) */
.picklist { padding: 0; background: transparent; border: 0; box-shadow: none; border-radius: 0; display: flex; flex-direction: column; gap: 12px; }
.picklist .trrow { --tt: #3F8F5C; --tr-rule: #C9C7BC; background: var(--card); border: 1px solid var(--line); border-left: 6px solid var(--tt); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow); }
.picklist .trrow:last-child, .picklist .trrow { border-bottom: 1px solid var(--line); }
.picklist .tt-local { --tt: #3E6FB5; }
.picklist .tt-mine { --tt: #C4513B; }
.picklist .tt-pass { --tt: #B9831E; }
.picklist .trrow a { display: flex; flex-direction: column; gap: 10px; padding: 12px 12px 12px 12px; min-height: 0; align-items: stretch; }
.tr-head { display: flex; align-items: center; gap: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--tr-rule); }
.tr-title { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.tr-name { font-size: 18px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; line-height: 1.1; }
.tr-body { display: flex; align-items: center; gap: 12px; }
.tr-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.tr-route { font-size: 16px; font-weight: 600; line-height: 1.2; }
.tr-from { font-size: 13px; font-weight: 700; color: #1F4A37; line-height: 1.25; display: flex; align-items: flex-start; gap: 5px; }
.tr-pin { flex: 0 0 15px; margin-top: 1px; }
/* A small square in the tab colour. */
.tr-ic { flex: 0 0 18px; width: 18px; height: 18px; border-radius: 4px; background: var(--tt); }
.tr-called { font-size: 13px; color: var(--muted); line-height: 1.25; }
.tr-extra { font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; padding: 2px 6px; border-radius: 4px; background: #E7DCC0; color: #5A4520; }
.picklist .tt-extra { --tt: #A8925A; }
/* Not called today: the run rules skipped these trains */
details.notcalled { margin-top: 14px; }
details.notcalled > summary { cursor: pointer; list-style: none; font-size: 15px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 8px 0; }
details.notcalled > summary::-webkit-details-marker { display: none; }
details.notcalled > summary::after { content: " \25BE"; }
details.notcalled[open] > summary::after { content: " \25B4"; }
.picklist .trrow.is-skipped { --tt: var(--line); border-style: dashed; border-left-style: solid; opacity: .85; }
.tr-skip { display: flex; flex-direction: column; gap: 4px; padding: 12px; align-items: flex-start; }
.tr-skip .tr-name { font-size: 16px; color: var(--muted); }
.tr-skip .btn-small { margin-top: 6px; }
.tr-from.idle-note { font-weight: 500; color: var(--muted); }
.tr-tiles { flex: 0 0 140px; display: grid; grid-template-columns: 1fr 1fr; background: #EFE9DA; border: 1px solid #DDD3BA; border-radius: 12px; padding: 8px 0; }
.tr-tile { text-align: center; }
.tr-tile + .tr-tile { border-left: 1px solid #D2C7A8; }
.tr-tile b { display: block; font-size: 28px; line-height: 1; }
.tr-tile small { display: block; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #6B5A33; margin-top: 4px; }
.picklist .tag { font-weight: 700; letter-spacing: .06em; text-transform: uppercase; border: .5px solid transparent; box-shadow: none; align-self: flex-start; }
/* Running = green outline, green text; Done = solid green, white text; Ready = tan */
.picklist .tag-work { background: transparent; border-color: #2F7A52; color: #2F7A52; }
.picklist .tag-go { background: #2F7A52; border-color: #2F7A52; color: #FFFFFF; }
.picklist .tag-hold { background: #E7DCC0; color: #5A4520; }
@media (prefers-color-scheme: dark) {
  .picklist .trrow { --tt: #5BC07F; --tr-rule: #3F4A44; }
  .picklist .tt-local { --tt: #6B9BE0; }
  .picklist .tt-mine { --tt: #E5705A; }
  .picklist .tt-pass { --tt: #E5AE4A; }
  .tr-from { color: #899c8f; }
  .tr-tiles { background: #1C2620; border-color: #3C4A3F; }
  .tr-tile + .tr-tile { border-left-color: #3C4A3F; }
  .tr-tile small { color: #BFB48F; }
  .picklist .tag-work { border-color: #899C8F; color: #899C8F; }
  .picklist .tt-extra { --tt: #F4EBD3; }
  .tr-extra { background: #F4EBD3; color: #2B2414; }
  .picklist .tag-go { background: #2F7A52; color: #FFFFFF; }
  .picklist .tag-hold { background: transparent; border-color: #F4EBD3; color: #F4EBD3; }
}

/* ---------------------------------------------------------------- Yardmaster desk (step 108) */
.ym-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 0 12px; }
.ym-tile { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 10px 4px; text-align: center; }
.ym-tile b { display: block; font-size: 28px; line-height: 1; }
.ym-tile small { display: block; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-top: 4px; }
.ym-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding: 4px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; margin-bottom: 14px; }
.ym-tabs a { min-height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 9px; font-size: 14px; font-weight: 600; color: var(--text); text-decoration: none; }
.ym-tabs a.on { background: #C9983E; color: #1B1608; font-weight: 700; }
.ym-yards { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.ym-req { display: block; background: var(--paper); color: var(--ink); border-radius: 10px; border-top: 5px solid var(--stamp); padding: 10px 12px; margin-bottom: 10px; text-decoration: none; box-shadow: var(--shadow); }
.ym-req.is-filled { border-top-color: var(--paper-line); opacity: .8; }
.ym-req .ym-req-top { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.ym-req b { display: block; font-size: 18px; margin-top: 4px; }
.ym-req .ym-req-line { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 6px; font-size: 14px; }
.ym-req .ym-go { font-weight: 700; white-space: nowrap; }
.ym-car { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px; margin-bottom: 10px; display: flex; flex-direction: column; gap: 6px; }
.ym-car.is-best { border: 1.5px solid #C9983E; }
.ym-car-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.ym-car-top b { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 17px; }
.ym-badge { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--muted); color: var(--muted); white-space: nowrap; }
.ym-badge.best { background: #C9983E; border-color: #C9983E; color: #1B1608; }
.ym-badge.foreign { border-color: var(--amber); color: var(--amber); }
.ym-sort { margin-bottom: 14px; }
.ym-sort h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 15px; letter-spacing: .04em; }
.ym-sort .ym-swatch { width: 14px; height: 14px; border-radius: 4px; flex: 0 0 14px; }
.ym-sort li .row { gap: 10px; }
.ym-extra-form { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; margin-top: 8px; }
.ym-extra-form .field { flex: 1 1 120px; margin: 0; }
/* Layout Settings › Trains: when it runs */
fieldset.runrule { border: 0; padding: 0; margin: 0 0 14px; min-width: 0; }
fieldset.runrule legend { font-weight: 600; padding: 0; margin-bottom: 6px; }
.dowpick { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 6px 32px; }
.dowpick label { position: relative; }
.dowpick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.dowpick span { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 36px; border-radius: 18px; border: 1px solid var(--line); font-size: 13px; font-weight: 700; cursor: pointer; }
.dowpick input:checked + span { background: #C9983E; border-color: #C9983E; color: #1B1608; }
.dowpick input:focus-visible + span { outline: 2px solid #C9983E; outline-offset: 2px; }
.rr-opt { display: flex; align-items: center; gap: 12px; min-height: 44px; }
.rr-opt input { width: 20px; height: 20px; margin: 0; flex: 0 0 20px; accent-color: #C9983E; }
fieldset.runrule small { display: block; color: var(--muted); font-size: 13px; }
details.notcalled + .crewlink, .picklist + .crewlink { margin-top: 16px; }
.ym-back { color: var(--text); text-decoration: none; font-weight: 600; }
.ym-make { margin-bottom: 14px; }
.ym-make h3 { margin: 0 0 6px; font-size: 15px; letter-spacing: .04em; display: flex; justify-content: space-between; gap: 8px; }
.ym-make h3 small { color: var(--muted); font-weight: 600; }

/* ---------- Layout Settings › Locations: the line, west to east, drag to reorder ---------- */
.line-end { margin: 2px 6px 6px; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.loclist + .line-end { margin-top: 6px; }
.loclist li.loc { display: flex; align-items: stretch; position: relative; background: var(--card); }
.loclist li.loc > a { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 12px 6px 12px 12px; }
.loc-rail { position: relative; align-self: stretch; flex: 0 0 18px; display: flex; align-items: center; justify-content: center; margin: -12px 0; }
.loc-rail::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--line); }
.loclist li.loc:first-child .loc-rail::before { top: 50%; }
.loclist li.loc:last-child .loc-rail::before { bottom: 50%; }
.loc-dot { position: relative; z-index: 1; width: 16px; height: 16px; border-radius: 50%; background: var(--dc); box-shadow: 0 0 0 3px var(--card); }
.loclist .is-off .loc-dot { background: var(--card); border: 3px solid var(--dc); }
/* A branch hangs off the main line: its dot sits to the right on a short spur. */
.loclist .loc-branch .loc-rail { flex-basis: 40px; justify-content: flex-start; padding-left: 0; }
.loclist .loc-branch .loc-rail::before { left: 9px; }
.loclist .loc-branch .loc-rail::after { content: ''; position: absolute; left: 9px; width: 20px; top: 50%; height: 2px; margin-top: -1px; background: var(--line); }
.loclist .loc-branch .loc-dot { margin-left: 22px; }
.loc-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.loc-kind { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.loc-name { font-size: 18px; font-weight: 700; line-height: 1.15; }
.loc-facts { font-size: 13px; line-height: 1.3; color: var(--muted); }
.loc-grip, .grip-inline { background: var(--muted);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'%3E%3Cg fill='%23000'%3E%3Ccircle cx='3' cy='3' r='1.8'/%3E%3Ccircle cx='9' cy='3' r='1.8'/%3E%3Ccircle cx='3' cy='10' r='1.8'/%3E%3Ccircle cx='9' cy='10' r='1.8'/%3E%3Ccircle cx='3' cy='17' r='1.8'/%3E%3Ccircle cx='9' cy='17' r='1.8'/%3E%3C/g%3E%3C/svg%3E") center / 12px 20px no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'%3E%3Cg fill='%23000'%3E%3Ccircle cx='3' cy='3' r='1.8'/%3E%3Ccircle cx='9' cy='3' r='1.8'/%3E%3Ccircle cx='3' cy='10' r='1.8'/%3E%3Ccircle cx='9' cy='10' r='1.8'/%3E%3Ccircle cx='3' cy='17' r='1.8'/%3E%3Ccircle cx='9' cy='17' r='1.8'/%3E%3C/g%3E%3C/svg%3E") center / 12px 20px no-repeat; }
.loc-grip { flex: 0 0 48px; border: 0; padding: 0; cursor: grab; touch-action: none; -webkit-user-select: none; user-select: none; }
.loc-grip:focus-visible { outline: 2px solid var(--green); outline-offset: -6px; }
.grip-inline { display: inline-block; width: 8px; height: 13px; vertical-align: -2px; -webkit-mask-size: 8px 13px; mask-size: 8px 13px; }
.loclist.is-dragging { -webkit-user-select: none; user-select: none; }
.loclist li.loc.dragging { z-index: 5; box-shadow: 0 10px 28px rgba(0,0,0,.28); border-radius: 12px; }
.loclist li.loc.dragging .loc-grip { cursor: grabbing; background: var(--text); }
.loc-saved { min-height: 1.3em; margin: 6px 6px 0; }
.list.loclist { padding-left: 0; }
.loclist li.loc:first-child { border-radius: 12px 12px 0 0; }
.loclist li.loc:last-child { border-radius: 0 0 12px 12px; }
.loclist li.loc:only-child { border-radius: 12px; }

/* Layout Settings: a toggle that needs something set up first */
.toggle small.req { margin-top: 6px; padding: 7px 10px; border-radius: 8px; background: var(--grey-soft); color: var(--text); font-weight: 600; }
.toggle small.req a { color: inherit; text-decoration: underline; }
.toggle small.req.req-met { padding: 0; background: transparent; color: var(--muted); font-weight: 600; }
.toggle small.req.req-met::before { content: '\2713\00a0'; color: var(--green); }
.toggle.is-blocked b { color: var(--muted); }
.toggle.is-blocked input { opacity: .45; }

/* App Settings: per-device choices */
.as-card { display: flex; flex-direction: column; gap: 0; padding: 0 14px; }
.as-row { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px 0; border-bottom: .5px solid var(--line); }
.as-row:last-child { border-bottom: 0; }
.as-lbl { display: flex; flex-direction: column; gap: 2px; }
.as-lbl small { font-size: 13px; color: var(--muted); line-height: 1.35; }
.as-row .seg { align-self: stretch; }
.as-row .seg button { flex: 1 1 0; }

/* Home: links under the menu (phone) and inside the glance tile (wide) */
.homelinks { text-align: center; margin: 22px 0 0; }
.homelinks a { color: var(--text); font-size: 16px; font-weight: 600; }
.hw-glink { display: flex; align-items: center; justify-content: space-between; min-height: 44px; margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--hw-line); font-size: 18px; font-weight: 600; color: var(--hw-text); }
.hw-glink span { font-size: 26px; color: var(--hw-muted); }

/* ---- Accounts (Stage 1): launch, owner sign in, your layouts, operator join, crew & access, admin ---- */
.acct-band .band-inner { padding-bottom: 16px; }
.acct-titlerow { display: flex; align-items: flex-end; gap: 12px; }
.acct-titles { flex: 1; min-width: 0; }
.acct-band .eyebrow { margin-top: 4px; overflow-wrap: anywhere; }
.acct-band .rrname { font-size: clamp(26px, 7.4vw, 36px); }
.acct-icon { flex: 0 0 44px; opacity: .92; }
.acct-icon .rricon { display: block; }
.acct-main { padding-top: 18px; }
.launch-band .band-inner { padding: 52px 16px 24px; text-align: center; }
.launch-band .logo img { max-width: 300px; margin-bottom: 12px; }
.launch-eyebrow { letter-spacing: .16em; }
.launch-h { font-family: "Archivo Narrow", sans-serif; font-size: 22px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; margin: 8px 4px 14px; }
.launch-foot { text-align: center; margin: 28px 6px 8px; padding-top: 14px; border-top: 1px solid var(--line); }
.acct-form { padding: 18px 16px; }
.acct-check { border: 0; background: transparent; padding: 0; }
.acct-center { text-align: center; }
.acct-new { display: flex; flex-direction: column; gap: 8px; margin-top: 22px; }
.acct-new p { margin: 0; }
.acct-btnlink { display: flex; align-items: center; justify-content: center; text-decoration: none; }
.btn-small.acct-btnlink { display: inline-flex; color: var(--text); }
.acct-verify { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; font-weight: 400; }
.acct-layouts { display: flex; flex-direction: column; gap: 12px; }
.acct-layout { display: flex; flex-direction: column; gap: 10px; color: var(--text); text-decoration: none; margin: 0; border: 1px solid rgba(120,90,40,.18); }
.acct-layout.is-last { border: 2px solid #C9983E; }
.acct-lhead { display: flex; align-items: flex-start; gap: 10px; }
.acct-lname { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.acct-lname small { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.acct-lname b { font-family: "Archivo Narrow", sans-serif; font-size: 20px; letter-spacing: .03em; text-transform: uppercase; overflow-wrap: anywhere; }
.acct-pill { font-size: 11px; font-weight: 700; letter-spacing: .08em; padding: 3px 8px; border-radius: 999px; border: .5px solid var(--muted); color: var(--muted); white-space: nowrap; }
.acct-pill.is-live { border-color: var(--green); color: var(--green); }
.acct-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding-top: 10px; border-top: 1px solid var(--line); text-align: center; }
.acct-stats > span + span { border-left: 1px solid var(--line); }
.acct-stats b { display: block; font-size: 20px; }
.acct-stats small { font-size: 10px; font-weight: 700; letter-spacing: .1em; color: var(--muted); }
.acct-newlayout > summary, .acct-newlayout.is-off { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 56px; border-radius: 14px;
  border: 1.5px dashed var(--line); color: var(--green); font-weight: 700; cursor: pointer; list-style: none; }
.acct-newlayout > summary::-webkit-details-marker { display: none; }
.acct-newlayout[open] > summary { margin-bottom: 12px; }
.acct-newlayout.is-off { color: var(--muted); cursor: default; flex-wrap: wrap; text-align: center; padding: 8px; }
.acct-newlayout.is-off small { font-weight: 400; }
.acct-hint { margin-top: 6px; padding: 14px; border-radius: 12px; background: rgba(201,152,62,.1); border: 1px solid rgba(201,152,62,.35); font-size: 14px; line-height: 1.45; }
.acct-match { display: flex; align-items: center; gap: 12px; border: 1px solid var(--green); background: var(--green-soft); color: var(--text); }
.acct-match svg { color: var(--green); flex: 0 0 22px; }
.acct-match span { display: flex; flex-direction: column; gap: 2px; }
.acct-match small { font-size: 14px; color: var(--muted); }
.acct-names { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.acct-names legend { font-size: 14px; font-weight: 600; color: var(--muted); margin-bottom: 8px; padding: 0; }
.acct-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.acct-chip input { position: absolute; opacity: 0; pointer-events: none; }
.acct-chip span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--line); font-weight: 600; cursor: pointer; }
.acct-chip input:checked + span { border-color: var(--text); background: var(--grey-soft); font-weight: 700; }
.acct-chip input:focus-visible + span { outline: 2px solid var(--green); outline-offset: 2px; }
.field input.acct-code { font-family: "Archivo Narrow", sans-serif; font-weight: 700; font-size: 22px; letter-spacing: .12em; text-transform: uppercase; }
.acct-code-card { display: flex; gap: 14px; align-items: center; }
.acct-qr { flex: 0 0 96px; width: 96px; height: 96px; border-radius: 8px; background: #FFFFFF; padding: 4px; }
.acct-qr svg, .cs-qr svg { display: block; width: 100%; height: 100%; }
.acct-code-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.acct-codeval { font-family: "Archivo Narrow", sans-serif; font-size: 22px; letter-spacing: .1em; overflow-wrap: anywhere; }
.acct-code-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.acct-code-btns form { margin: 0; }
.acct-list .row form { margin: 0; flex-shrink: 0; }
.acct-role { font-size: 10px; font-weight: 700; letter-spacing: .12em; color: var(--muted); }
.acct-invite { padding: 12px 16px 12px 0; }
.acct-invite summary { color: var(--green); font-weight: 600; cursor: pointer; min-height: 32px; display: flex; align-items: center; }
.acct-inline { margin-top: 10px; }
.acct-totals { margin-bottom: 8px; }
.home-who { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: -2px 0 6px; }
.home-who a { font-size: 15px; min-height: 44px; display: inline-flex; align-items: center; color: #E8CF8E; }
.who-chip { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 7px; border-radius: 999px; font-size: 14px; font-weight: 600;
  background: rgba(244,235,211,.1); border: 1px solid rgba(244,235,211,.25); }
.viewonly-tag { font-size: 10px; font-weight: 700; letter-spacing: .12em; padding: 3px 7px; border-radius: 4px; border: .5px solid var(--muted); color: var(--muted); white-space: nowrap; }
.viewonly { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; }
.viewonly svg { flex: 0 0 20px; margin-top: 1px; }
.owner-only { margin: 8px 0 0; font-style: italic; }
a.hw-ibtn { cursor: pointer; }
/* Printable crew sign */
.crewsign { background: #FFFFFF; color: #111111; }
.cs-page { max-width: 560px; margin: 0 auto; padding: 32px 24px; text-align: center; }
.cs-rr { font-family: "Archivo Narrow", sans-serif; font-weight: 700; font-size: 34px; text-transform: uppercase; letter-spacing: .04em; }
.cs-page h1 { font-size: 22px; margin: 6px 0 18px; }
.cs-qr { width: 300px; height: 300px; margin: 0 auto 18px; }
.cs-code { font-family: "Archivo Narrow", sans-serif; font-weight: 700; font-size: 44px; letter-spacing: .1em; margin: 10px 0 18px; }
.cs-small { font-size: 13px; color: #555555; }
@media print { .cs-noprint { display: none; } html, body { background: #FFFFFF; } }