:root {
  color-scheme: light;
  --fog: #f2f5f4;
  --paper: #fbfcfb;
  --ink: #142b33;
  --ink-soft: #52656b;
  --line: #cbd5d4;
  --jade: #167c68;
  --jade-dark: #0f5d50;
  --mint: #dff6f0;
  --amber: #d9851b;
  --amber-soft: #fff0d7;
  --critical: #b42337;
  --critical-soft: #fde7ea;
  --white: #ffffff;
  font-family: "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }

html { background: var(--fog); scroll-behavior: smooth; }

body { margin: 0; color: var(--ink); background: var(--fog); }

a { color: inherit; text-underline-offset: .2em; }
a:hover { color: var(--jade-dark); }

button, input { font: inherit; }

:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; }

.skip-link {
  position: fixed;
  z-index: 100;
  top: .75rem;
  left: .75rem;
  padding: .65rem 1rem;
  color: var(--white);
  background: var(--ink);
  transform: translateY(-180%);
}
.skip-link:focus { transform: translateY(0); }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.eyebrow, .section-number, .mono, .rail-meta, .brand small {
  font-family: "Bahnschrift SemiCondensed", "Arial Narrow", sans-serif;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.eyebrow, .section-number { margin: 0 0 .5rem; font-size: .75rem; font-weight: 700; color: var(--jade); }
.muted { color: var(--ink-soft); }

.login-page {
  min-height: 100vh;
  background:
    linear-gradient(90deg, transparent 49.9%, rgba(20,43,51,.09) 50%, transparent 50.1%),
    linear-gradient(var(--fog), var(--fog));
}

.login-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(22rem, .9fr);
  align-items: stretch;
}

.login-intro, .login-panel { padding: clamp(2rem, 7vw, 7rem); display: flex; flex-direction: column; justify-content: center; }
.login-intro { max-width: 54rem; }
.login-intro h1 { margin: 0; max-width: 9ch; font: 700 clamp(3.5rem, 9vw, 8rem)/.84 "Bahnschrift SemiCondensed", sans-serif; letter-spacing: -.05em; text-transform: uppercase; }
.login-intro > p:not(.eyebrow) { max-width: 35rem; margin: 2rem 0; font-size: clamp(1rem, 2vw, 1.3rem); line-height: 1.55; color: var(--ink-soft); }

.route-mark, .route-strip { display: flex; align-items: center; gap: .8rem; font: 700 .72rem "Bahnschrift SemiCondensed", sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.route-mark i, .route-strip i { flex: 1; height: 1px; background: var(--jade); position: relative; }
.route-mark i::after, .route-strip i::after { content: ""; position: absolute; right: 0; top: -3px; border: 4px solid transparent; border-left-color: var(--jade); }

.login-panel { background: var(--ink); color: var(--white); }
.login-panel .section-number { color: #7de2cb; }
.login-panel h2 { margin: 0; font: 650 clamp(2rem, 4vw, 3.3rem)/1 "Bahnschrift SemiCondensed", sans-serif; }
.login-panel .muted { color: #b9c8cb; line-height: 1.5; }
.login-panel form { margin-top: 2rem; max-width: 30rem; }
.field { display: grid; gap: .55rem; margin: 1.2rem 0; }
.field label { font-weight: 650; }
.field input { width: 100%; min-height: 3.25rem; border: 1px solid #63777c; border-radius: 0; padding: .8rem 1rem; color: var(--white); background: #1b3942; }
.field input:focus { border-color: #7de2cb; }
.login-panel button { width: 100%; min-height: 3.35rem; margin-top: .5rem; border: 0; padding: .8rem 1rem; display: flex; justify-content: space-between; align-items: center; font-weight: 750; color: var(--ink); background: #7de2cb; cursor: pointer; }
.login-panel button:hover { background: #a0eedc; }
.login-panel button:disabled { cursor: wait; opacity: .65; }
.form-status { min-height: 1.5rem; color: #ffd999; }
.security-note { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid #526970; font-size: .82rem; color: #b9c8cb; }

.workspace-shell { min-height: 100vh; display: grid; grid-template-columns: 14rem minmax(0, 1fr); }
.side-rail { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; padding: 1.5rem 1rem; color: var(--white); background: var(--ink); }
.brand { display: inline-flex; flex-direction: column; width: max-content; margin: 0 0 2.5rem .65rem; text-decoration: none; }
.brand span { font: 750 2rem/1 "Bahnschrift SemiCondensed", sans-serif; letter-spacing: -.04em; }
.brand small { margin-top: .25rem; color: #7de2cb; font-size: .65rem; }
.side-rail nav { display: grid; gap: .2rem; }
.side-rail nav a { display: grid; grid-template-columns: 2rem 1fr; gap: .4rem; padding: .8rem .65rem; text-decoration: none; color: #bfd0d3; border-left: 2px solid transparent; }
.side-rail nav a span { font: 650 .65rem "Bahnschrift SemiCondensed", sans-serif; color: #71878c; }
.side-rail nav a:hover, .side-rail nav a.active, .side-rail nav a[aria-current="page"] { color: var(--white); background: #1b3942; border-left-color: #7de2cb; }
.side-rail nav a.active span { color: #7de2cb; }
.rail-meta { margin-top: auto; display: grid; gap: .4rem; padding: 1rem .65rem 0; border-top: 1px solid #3c555c; font-size: .62rem; color: #8fa4a9; }

.workspace-content { min-width: 0; }
.topbar { min-height: 7rem; display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: 1.4rem clamp(1rem, 4vw, 3.5rem); border-bottom: 1px solid var(--line); background: rgba(251,252,251,.88); }
.topbar h1 { margin: 0; font: 700 clamp(1.9rem, 4vw, 3.2rem)/1 "Bahnschrift SemiCondensed", sans-serif; letter-spacing: -.03em; }
.user-block { display: grid; text-align: right; }
.user-block span { font-weight: 700; }
.user-block small { color: var(--ink-soft); }
.user-actions { display: flex; align-items: center; gap: 1rem; }
.user-actions button { min-height: 2.5rem; padding: .5rem .8rem; border: 1px solid var(--line); color: var(--ink); background: transparent; cursor: pointer; }
.user-actions button:hover { border-color: var(--jade); color: var(--jade-dark); }

.workspace-content main { padding: clamp(1rem, 3vw, 3rem) clamp(1rem, 4vw, 3.5rem) 5rem; }
.control-strip { display: grid; grid-template-columns: minmax(12rem, .7fr) minmax(0, 2.3fr); border: 1px solid var(--line); background: var(--paper); }
.control-label { padding: 1.4rem; border-right: 1px solid var(--line); }
.control-label h2 { max-width: 10ch; margin: 0; font: 680 1.4rem/1.05 "Bahnschrift SemiCondensed", sans-serif; }
.control-strip dl { margin: 0; display: grid; grid-template-columns: repeat(5, minmax(7rem, 1fr)); }
.control-strip dl div { min-height: 7rem; padding: 1.1rem; border-left: 1px solid var(--line); display: flex; flex-direction: column-reverse; justify-content: space-between; }
.control-strip dt { font-size: .78rem; line-height: 1.25; color: var(--ink-soft); }
.control-strip dd { margin: 0; font: 700 2.4rem/1 "Bahnschrift SemiCondensed", sans-serif; }
.control-strip .metric-warning { box-shadow: inset 0 4px 0 var(--amber); background: var(--amber-soft); }
.control-strip .metric-critical { box-shadow: inset 0 4px 0 var(--critical); background: var(--critical-soft); }

.ledger-section { margin-top: 2.5rem; content-visibility: auto; contain-intrinsic-size: auto 28rem; }
.priority-section { content-visibility: visible; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 1.5rem; margin-bottom: .85rem; }
.section-heading h2 { margin: 0; font: 680 clamp(1.5rem, 3vw, 2.25rem)/1 "Bahnschrift SemiCondensed", sans-serif; }
.section-heading > a { font-size: .85rem; font-weight: 700; color: var(--jade-dark); }
.split-ledger { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(19rem, .75fr); gap: 2rem; }

.table-scroll { overflow-x: auto; border-top: 2px solid var(--ink); background: var(--paper); }
table { width: 100%; min-width: 38rem; border-collapse: collapse; font-size: .88rem; }
caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
th, td { padding: .9rem .75rem; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--line); }
thead th { font: 700 .67rem "Bahnschrift SemiCondensed", sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); background: #e8eeec; }
tbody th { font-weight: 650; }
tbody tr:hover { background: #edf8f5; }
.subline { display: block; margin-top: .2rem; font-size: .67rem; color: var(--ink-soft); }
.strong { font-weight: 750; }
.status { display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; font-size: .78rem; }
.status > span { color: var(--jade); font-size: .6rem; }
.status[data-status="open"] > span { color: var(--amber); }
.status[data-status="closed"] > span { color: var(--ink-soft); }
.problem-count { display: inline-flex; align-items: center; gap: .35rem; font-weight: 750; color: var(--critical); }
.problem-count span { width: 1.25rem; height: 1.25rem; display: inline-grid; place-items: center; color: var(--white); background: var(--critical); border-radius: 50%; font-size: .7rem; }
.actions { text-align: right; }
.text-action { border: 0; padding: .3rem 0; white-space: nowrap; font: inherit; font-weight: 700; color: var(--jade-dark); background: transparent; text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }
.amount { font-family: "Bahnschrift SemiCondensed", monospace; font-variant-numeric: tabular-nums; font-weight: 700; text-align: right; }
.empty { padding: 2rem; text-align: center; color: var(--ink-soft); }
.route-strip { padding: .7rem .8rem; color: var(--ink-soft); background: #e8eeec; border-top: 2px solid var(--ink); }
.route-strip + .table-scroll { border-top: 0; }

@media (max-width: 74rem) {
  .control-strip { grid-template-columns: 1fr; }
  .control-label { border-right: 0; border-bottom: 1px solid var(--line); }
  .control-label h2 { max-width: none; }
  .control-strip dl { grid-template-columns: repeat(5, minmax(7rem, 1fr)); overflow-x: auto; }
  .split-ledger { grid-template-columns: 1fr; gap: 0; }
}

@media (max-width: 52rem) {
  .login-shell { grid-template-columns: 1fr; }
  .login-intro { min-height: 44vh; padding-bottom: 2rem; }
  .login-panel { min-height: 56vh; padding-top: 2.5rem; }
  html, .workspace-page { overflow-x: clip; }
  .workspace-shell, .workspace-content, .workspace-content main, .ledger-section, .split-ledger { width: 100%; max-width: 100vw; min-width: 0; }
  .workspace-shell { display: block; }
  .side-rail { position: sticky; z-index: 20; top: 0; width: 100vw; max-width: 100vw; height: auto; padding: .65rem 1rem; flex-direction: row; align-items: center; overflow-x: hidden; }
  .brand { margin: 0 1rem 0 0; flex: 0 0 auto; }
  .brand span { font-size: 1.4rem; }
  .brand small, .rail-meta { display: none; }
  .side-rail nav { display: flex; flex: 1 1 auto; min-width: 0; max-width: calc(100vw - 4.5rem); overflow-x: auto; }
  .side-rail nav a { display: block; flex: 0 0 auto; padding: .65rem .75rem; border-left: 0; border-bottom: 2px solid transparent; white-space: nowrap; }
  .side-rail nav a span { display: none; }
  .side-rail nav a.active { border-left: 0; border-bottom-color: #7de2cb; }
  .topbar { min-height: 6rem; align-items: flex-start; }
  .control-strip, .control-strip dl { width: 100%; max-width: 100%; min-width: 0; }
  .control-strip dl { grid-template-columns: repeat(5, 9rem); }
  .table-scroll { width: 100%; max-width: calc(100vw - 2rem); }
}

@media (max-width: 34rem) {
  .login-intro, .login-panel { padding-inline: 1.25rem; }
  .login-intro h1 { font-size: 3.4rem; }
  .topbar { gap: 1rem; }
  .user-block span { max-width: 9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .user-actions { gap: .5rem; }
  .section-heading { align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --fog: #102329;
    --paper: #162d34;
    --ink: #e7f0ef;
    --ink-soft: #a9babc;
    --line: #385058;
    --jade-dark: #7de2cb;
    --mint: #173f3a;
    --amber-soft: #4a351b;
    --critical-soft: #4b222b;
    --white: #ffffff;
  }
  .topbar { background: rgba(22,45,52,.92); }
  thead th, .route-strip { background: #203a41; }
  tbody tr:hover { background: #193b3a; }
}

/* Staff cabinet sections reuse the existing ledger palette. */
.workspace-header { padding: 1.5rem clamp(1rem, 4vw, 3.5rem); border-bottom: 1px solid var(--line); }
.workspace-header h1 { margin: .5rem 0; font-size: clamp(1.7rem, 4vw, 3rem); overflow-wrap: anywhere; }
.source-notice { padding: 1rem 1.25rem; margin-bottom: 1.5rem; border-left: 3px solid var(--jade); background: var(--white); }
.workspace-filters, .task-form { display: flex; flex-wrap: wrap; align-items: end; gap: .65rem; margin: 1.25rem 0; }
.workspace-filters label, .task-form label { flex-basis: 100%; font-weight: 650; }
.workspace-filters input, .workspace-filters select, .task-form input, .task-form select, .task-form textarea { max-width: 100%; min-width: 0; padding: .75rem; border: 1px solid var(--line); background: var(--white); color: var(--ink); font: inherit; }
.workspace-filters input, .task-form input, .task-form textarea { flex: 1 1 15rem; }
.workspace-filters button, .task-form button, .task-actions > button { padding: .75rem 1rem; background: var(--ink); color: var(--white); border: 0; cursor: pointer; min-height: 44px; }
.record-fields { display: grid; grid-template-columns: repeat(auto-fit,minmax(12rem,1fr)); gap: 1rem; padding: 1rem; }
.record-fields dt { font-size: .85rem; color: var(--ink-soft); }
.record-fields dd { margin: .35rem 0; overflow-wrap: anywhere; }
.pagination { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding: 1rem 0; }
.admin-cards { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,18rem),1fr)); gap: 1rem; }
.admin-cards .ledger-section { padding: 1rem; }
.side-rail nav a { display: block; }
@media (min-width: 52.001rem) {
 .side-rail nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
 .side-rail > .brand, .side-rail > p, .side-rail > #logout { flex: 0 0 auto; }
}
.brand { color: inherit; font-weight: 750; text-decoration: none; }
@media(max-width: 760px) {
 .side-rail > p, .side-rail > .brand { display: none; }
 .side-rail nav { max-width: calc(100vw - 6rem); }
 .side-rail #logout { flex: 0 0 auto; min-height: 44px; }
 .workspace-filters button, .task-form button { flex: 1 1 auto; }
}

@media (prefers-color-scheme: dark) {
 :root { --jade: #7de2cb; }
 .side-rail, .login-panel, .skip-link { background: #142b33; }
 .login-panel button { color: #142b33; }
 .source-notice, .workspace-filters input, .workspace-filters select, .task-form input, .task-form select, .task-form textarea { background: var(--paper); }
 .workspace-filters button, .task-form button, .task-actions > button { background: #1b3942; color: var(--white); }
}
.primary-action { border: 1px solid var(--line, #334155); border-radius: 12px; margin: 12px 0; padding: 16px; }
.primary-action summary { cursor: pointer; font-weight: 650; padding: 4px; }
.primary-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; padding-top: 20px; }
.primary-form label { display: grid; gap: 7px; align-content: start; }
.primary-form input, .primary-form select, .primary-form textarea { width: 100%; min-height: 42px; padding: 10px; border: 1px solid #475569; border-radius: 7px; color: inherit; background: #101a2a; font: inherit; }
.primary-form select[multiple], .primary-form textarea { min-height: 110px; }
.primary-form input[type=checkbox] { width: 20px; min-height: 20px; }
.primary-review { grid-column: 1 / -1; overflow-wrap: anywhere; white-space: pre-wrap; }
.primary-form button { align-self: end; min-height: 44px; }
.primary-form h2, .primary-form h3 { grid-column: 1 / -1; }
.client-messages textarea { display:block; width:100%; min-height:14rem; box-sizing:border-box; padding:1rem; color:var(--ink); background:var(--paper); font:inherit; line-height:1.6; }

/* Quick quote: use readable full-width controls and a separate result. */
#calculator-form { display:flex; flex-wrap:wrap; gap:1rem; align-items:flex-end; max-width:60rem; }
#calculator-form label { display:flex; flex:1 1 15rem; flex-direction:column; align-items:stretch; gap:.5rem; }
#calculator-form input { flex:0 0 auto; width:100%; height:3.25rem; box-sizing:border-box; font-size:1.15rem; }
#calculator-form button { flex:0 0 auto; }
#calculator-result { max-width:60rem; margin:1.5rem 0; padding:1.25rem; border:1px solid #507374; border-radius:.4rem; background:#17353a; line-height:1.7; font-size:1.1rem; }
#calculator-result:empty { display:none; }
#calculator-result::first-line { font-weight:700; }
#calculator-message { display:block; width:100%; max-width:60rem; min-height:13rem; box-sizing:border-box; margin:.6rem 0 1rem; padding:1rem; border:1px solid #507374; border-radius:.4rem; background:#10282e; color:#eff5f4; font:inherit; font-size:1rem; line-height:1.6; resize:vertical; }
#calculator-copy { display:block; padding:.8rem 1.2rem; border:1px solid #507374; border-radius:.25rem; background:#20434a; color:#eff5f4; font:inherit; cursor:pointer; }
#calculator-copy:disabled { opacity:.5; cursor:default; }
@media(max-width:640px) { #calculator-form button { width:100%; } #calculator-result { font-size:1rem; } }

.item-note { white-space: pre-wrap; overflow-wrap: anywhere; }
.workspace-filters fieldset { min-width: 0; display: flex; flex-wrap: wrap; gap: 1rem; }