.header-upload {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 7px;
  padding: 9px 13px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 10px;
  background: #e1b955;
  color: #082c3d;
  font-size: 0.8rem;
  font-weight: 900;
  white-space: nowrap;
  box-shadow: 0 5px 16px rgba(0, 0, 0, 0.16);
}

.header-upload:hover,
.header-upload:focus-visible {
  background: #f0cf75;
  color: #082c3d;
}

.header-upload-compact {
  display: none;
}

.site-header nav {
  min-width: 0;
  align-items: center;
  gap: clamp(0.8rem, 1.35vw, 1.35rem);
}

.site-header nav > a,
.desktop-nav-more summary {
  white-space: nowrap;
}

.desktop-nav-more {
  position: relative;
}

.desktop-nav-more summary {
  cursor: pointer;
  list-style: none;
  color: #d9e7e8;
  font-size: 0.92rem;
}

.desktop-nav-more summary::-webkit-details-marker {
  display: none;
}

.desktop-nav-more summary::after {
  content: " ▾";
  font-size: 0.72rem;
}

.desktop-nav-more[open] summary,
.desktop-nav-more summary:hover,
.desktop-nav-more summary:focus-visible {
  color: #fff;
}

.desktop-nav-more > div {
  position: absolute;
  top: 32px;
  right: 0;
  z-index: 30;
  display: flex;
  width: 220px;
  padding: 8px;
  flex-direction: column;
  border: 1px solid #dce3e4;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 18px 50px rgba(16, 38, 50, 0.16);
}

.desktop-nav-more > div a {
  padding: 10px 12px;
  border-radius: 8px;
  color: #12232f;
  font-weight: 700;
}

.desktop-nav-more > div a:hover,
.desktop-nav-more > div a:focus-visible {
  background: #e6f4f3;
  color: #082c3d;
}

.heading-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
}

.upload-workspace {
  max-width: 980px;
  padding: 30px;
}

.upload-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.upload-grid > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 7px;
}

.upload-grid input,
.upload-grid select,
.upload-grid textarea,
.file-drop input {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.file-drop {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 18px;
  padding: 28px;
  border: 2px dashed #8eb9b9;
  border-radius: 18px;
  background: #f2f9f8;
  cursor: pointer;
}

.file-drop strong {
  color: #082c3d;
  font-size: 1.1rem;
}

.file-drop span,
.intake-notice span {
  color: #61717c;
}

.file-drop input {
  margin-top: 8px;
  background: #fff;
}

.file-drop.drag-active {
  border-color: #007c83;
  background: #dff3f1;
  box-shadow: 0 0 0 4px rgba(0, 124, 131, 0.12);
}

.duplicate-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 22px;
  padding: 18px;
  border: 1px solid #e0bf63;
  border-radius: 12px;
  background: #fff5d8;
}

.duplicate-links p {
  margin: 0;
  color: #61717c;
}

.intake-notice {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 18px;
  padding: 16px 18px;
  border-left: 4px solid #007c83;
  border-radius: 10px;
  background: #e6f4f3;
}

.mapping-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.mapping-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 0.8fr);
  gap: 28px;
  padding: 26px;
}

.source-values h2 {
  margin: 6px 0 18px;
}

.source-values dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 16px;
}

.source-values dl div,
.linked-line {
  padding: 12px;
  border: 1px solid #dce3e4;
  border-radius: 10px;
  background: #f8faf9;
}

.source-values dt {
  color: #61717c;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.source-values dd {
  margin: 4px 0 0;
}

.linked-line {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
}

.linked-line span {
  color: #61717c;
}

.mapping-form {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 20px;
  border-radius: 14px;
  background: #eef6f5;
}

.mapping-form label {
  margin-top: 6px;
  font-size: 0.82rem;
  font-weight: 800;
}

.mapping-form input,
.mapping-form select,
.mapping-form textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #c9d4d7;
  border-radius: 10px;
  background: #fff;
}

.mapping-form .button {
  margin-top: 10px;
}

.compact-form,
.review-stack,
.review-stack form {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.compact-form input,
.review-stack input {
  min-width: 190px;
  padding: 8px 9px;
  border: 1px solid #c9d4d7;
  border-radius: 8px;
}

.review-stack {
  min-width: 230px;
}

.control-evidence {
  margin-top: 12px;
  padding: 10px;
  border: 1px solid #dce3e4;
  border-radius: 9px;
  background: #f8faf9;
}

.control-evidence summary {
  cursor: pointer;
  font-weight: 800;
}

.control-evidence strong,
.control-evidence code,
.control-evidence a {
  display: block;
  margin-top: 7px;
  overflow-wrap: anywhere;
}

.master-form-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.master-form {
  margin: 0;
  padding: 18px;
}

.master-form summary {
  cursor: pointer;
  color: #082c3d;
  font-weight: 900;
}

.master-form[open] summary {
  margin-bottom: 14px;
}

.audit-list > div > span:nth-child(2) {
  min-width: 0;
}

.audit-list code {
  max-width: 45%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 1280px) {
  .site-header nav {
    display: none;
  }

  .site-header .mobile-nav {
    display: block;
    margin-left: 0;
  }

  .header-upload {
    margin-left: auto;
  }
}

@media (max-width: 720px) {
  .heading-actions {
    justify-content: flex-start;
  }

  .upload-workspace {
    padding: 20px;
  }

  .upload-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .mapping-card,
  .source-values dl,
  .master-form-grid {
    grid-template-columns: 1fr;
  }

  .brand > span:last-child {
    display: none;
  }

  .header-upload {
    padding: 8px 10px;
  }

  .header-upload-wide {
    display: none;
  }

  .header-upload-compact {
    display: inline;
  }
}

@media (max-width: 1050px) and (min-width: 721px) {
  .master-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.compact-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  color: #43545c;
  font-size: 0.76rem;
  font-weight: 800;
}

.compact-field input,
.compact-field select {
  width: 100%;
  margin-top: 1px;
}

@media (max-width: 760px) {
  .table-panel {
    overflow: visible;
  }

  .table-wrap {
    overflow-x: visible;
  }

  .stacked-table,
  .stacked-table tbody,
  .stacked-table tr,
  .stacked-table td {
    display: block;
    width: 100%;
    min-width: 0;
  }

  .stacked-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .stacked-table tbody {
    padding: 0 14px 14px;
  }

  .stacked-table tbody tr {
    margin-top: 14px;
    border: 1px solid #dce3e4;
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
  }

  .stacked-table td {
    display: grid;
    grid-template-columns: minmax(8.5rem, 36%) minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    padding: 12px 14px;
    border-top: 1px solid #e7ecec;
    overflow-wrap: anywhere;
  }

  .stacked-table td:first-child {
    border-top: 0;
  }

  .stacked-table td::before {
    content: attr(data-label);
    color: #43545c;
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }

  .stacked-table td[colspan] {
    display: block;
  }

  .stacked-table td[colspan]::before {
    content: none;
  }

  .stacked-table .compact-form {
    min-width: 0;
  }
}

@media (max-width: 430px) {
  .stacked-table td {
    grid-template-columns: 1fr;
    gap: 5px;
  }
}

.next-action-card,
.confirmation-history,
.category-register,
.affected-weeks {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 26px;
}

.next-action-card {
  border: 2px solid #007c83;
  background: linear-gradient(135deg, #e6f4f3, #fff);
}

.next-action-card h2,
.readiness-workspace h2,
.guided-form-panel h2,
.confirmation-history h2,
.category-register h2,
.affected-weeks h2 {
  margin: 4px 0 8px;
}

.readiness-workspace {
  margin-bottom: 28px;
}

.readiness-workspace > .panel-heading {
  margin-bottom: 12px;
}

.readiness-section {
  margin-bottom: 10px;
  overflow: hidden;
}

.readiness-section summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 18px 20px;
  cursor: pointer;
  list-style: none;
}

.readiness-section summary::-webkit-details-marker {
  display: none;
}

.readiness-section summary span:nth-child(2) {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.readiness-section summary small {
  margin-top: 3px;
  color: #61717c;
}

.readiness-icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 50%;
  background: #fff1cf;
  color: #8a5a00;
  font-weight: 900;
}

.readiness-section.ready .readiness-icon {
  background: #e1f3e8;
  color: #176b3a;
}

.readiness-status {
  color: #8a5a00;
  font-size: 0.76rem;
  font-weight: 900;
  text-transform: uppercase;
}

.readiness-section.ready .readiness-status {
  color: #176b3a;
}

.readiness-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 0 20px 20px 68px;
  border-top: 1px solid #e7ecec;
}

.receipt-summary,
.suggestion-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}

.receipt-count,
.suggestion-card {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 18px;
  border: 1px solid #dce3e4;
  border-radius: 14px;
  background: #fff;
}

.receipt-count strong {
  color: #082c3d;
  font-size: 2rem;
}

.receipt-count span,
.suggestion-card span,
.suggestion-card small {
  color: #61717c;
}

.affected-week-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.affected-week-links a {
  display: flex;
  min-width: 210px;
  flex-direction: column;
  padding: 13px 15px;
  border: 1px solid #c9d4d7;
  border-radius: 10px;
  color: #12232f;
}

.affected-week-links span {
  margin-top: 3px;
  color: #61717c;
  font-size: 0.78rem;
}

.guided-form-panel {
  max-width: 980px;
  padding: 26px;
}

.guided-form,
.guided-field {
  display: flex;
  flex-direction: column;
}

.guided-form {
  gap: 12px;
}

.guided-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 18px;
}

.guided-field {
  min-width: 0;
  gap: 6px;
}

.guided-field.full-width {
  grid-column: 1 / -1;
}

.guided-field > label,
.guided-field legend {
  color: #243b47;
  font-size: 0.84rem;
  font-weight: 900;
}

.guided-field input:not([type="checkbox"]):not([type="radio"]),
.guided-field select,
.guided-field textarea {
  width: 100%;
  max-width: 100%;
  padding: 10px 12px;
  border: 1px solid #c9d4d7;
  border-radius: 10px;
  background: #fff;
}

.guided-field.has-error input,
.guided-field.has-error select,
.guided-field.has-error textarea,
.file-drop.has-error {
  border-color: #b42318;
}

.checkbox-field label {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
}

.checkbox-field input {
  width: 22px;
  height: 22px;
  flex: none;
}

.deduction-guidance,
.read-only-callout {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 16px 18px;
  border-left: 4px solid #007c83;
  border-radius: 10px;
  background: #e6f4f3;
}

.read-only-callout.panel {
  padding: 22px;
}

.weekly-cost-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.weekly-cost-grid .guided-form-panel {
  max-width: none;
}

.form-intro {
  margin-bottom: 18px;
}

.category-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.category-chips span {
  padding: 8px 11px;
  border-radius: 999px;
  background: #e6f4f3;
  color: #07515b;
  font-size: 0.78rem;
  font-weight: 800;
}

@media (max-width: 820px) {
  .next-action-card,
  .confirmation-history,
  .category-register,
  .affected-weeks,
  .readiness-body {
    align-items: stretch;
    flex-direction: column;
  }

  .readiness-body {
    padding: 16px 20px 20px;
  }

  .weekly-cost-grid,
  .guided-form-grid {
    grid-template-columns: 1fr;
  }

  .guided-field.full-width {
    grid-column: auto;
  }
}

@media (max-width: 520px) {
  .readiness-section summary {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .readiness-status {
    grid-column: 2;
  }
}

/* Week Ribbon: the six-step spine shown wherever a week appears. */
.week-ribbon{display:flex;gap:var(--space-2);flex-wrap:wrap;margin:var(--space-3) 0}
.ribbon-seg{display:inline-flex;align-items:center;gap:var(--space-1);padding:var(--space-1) var(--space-2);border-radius:var(--radius-s);border:1px solid var(--line);background:var(--surface);font-size:.85rem}
.ribbon-dot{width:10px;height:10px;border-radius:50%}
.ribbon-ok .ribbon-dot{background:var(--ok)}
.ribbon-attention .ribbon-dot{background:var(--attention)}
.ribbon-blocked .ribbon-dot{background:var(--blocked)}
.ribbon-ok{border-color:var(--ok)}
.ribbon-attention{border-color:var(--attention)}
.ribbon-blocked{border-color:var(--blocked)}

/* Mega navigation: trigger row owns dark-header colors, panel owns light-surface
   colors. Nothing inherits across that boundary, which is what made the labels
   disappear when a panel opened. */
.mega-nav{display:flex;align-items:center;gap:2px;flex-wrap:wrap}
.mega-nav .nav-top,.mega>summary{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:8px 12px;border-radius:var(--radius-s);color:rgba(255,255,255,.88);text-decoration:none;font-size:.92rem;font-weight:500;transition:background-color 160ms ease,color 160ms ease}
.mega-nav .nav-top:hover,.mega>summary:hover{background:rgba(255,255,255,.12);color:#fff}
.mega-nav .nav-top:focus-visible,.mega>summary:focus-visible{outline:2px solid #fff;outline-offset:2px}
.mega-nav .nav-top[aria-current]{background:rgba(255,255,255,.16);color:#fff}
.mega{position:relative}
.mega>summary{cursor:pointer;list-style:none;white-space:nowrap}
.mega>summary::-webkit-details-marker{display:none}
.mega>summary .chev{transition:transform 160ms cubic-bezier(.23,1,.32,1)}
.mega[open]>summary{background:rgba(255,255,255,.18);color:#fff}
.mega[open]>summary .chev{transform:rotate(180deg)}
.mega-panel{position:absolute;z-index:80;top:calc(100% + 6px);left:0;display:grid;grid-template-columns:repeat(2,minmax(200px,240px));gap:var(--space-4);padding:var(--space-4);background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:var(--radius-m);box-shadow:var(--shadow-2);transform-origin:top left;animation:mega-in 170ms cubic-bezier(.23,1,.32,1)}
.mega:last-of-type .mega-panel{left:auto;right:0;transform-origin:top right}
@keyframes mega-in{from{opacity:0;transform:translateY(-4px) scale(.985)}to{opacity:1;transform:none}}
.mega-panel h3{margin:0 0 6px;font-size:.66rem;text-transform:uppercase;letter-spacing:.09em;color:var(--ink-soft)}
.mega-panel a{display:block;min-height:44px;padding:8px 10px;border-radius:var(--radius-s);text-decoration:none;color:var(--ink);transition:background-color 140ms ease}
.mega-panel a:hover{background:var(--paper)}
.mega-panel a:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.mega-panel a strong{display:block;color:var(--ink);font-size:.92rem;font-weight:600}
.mega-panel a small{display:block;color:var(--ink-soft);font-size:.78rem;line-height:1.35}
.mega-panel a[aria-current]{background:var(--paper);box-shadow:inset 3px 0 0 var(--accent)}
@media (prefers-reduced-motion:reduce){.mega-panel{animation:none}.mega>summary .chev,.mega-panel a{transition:none}}
@media (max-width:980px){
  .mega-panel{position:static;grid-template-columns:1fr;border:0;box-shadow:none;padding:4px 0;margin:0;background:transparent;color:#fff;animation:none}
  .mega-panel h3{color:rgba(255,255,255,.62)}
  .mega-panel a,.mega-panel a strong{color:#fff}
  .mega-panel a small{color:rgba(255,255,255,.72)}
  .mega-panel a:hover,.mega-panel a[aria-current]{background:rgba(255,255,255,.12);box-shadow:none}
}

/* Guide walkthrough */
.guide-block{margin-bottom:var(--space-4)}
.guide-block h2{margin-top:0}
.guide-steps{list-style:none;padding:0;margin:0;display:grid;gap:var(--space-3)}
.guide-steps li{display:grid;gap:var(--space-1);padding:var(--space-3);background:var(--paper);border-radius:var(--radius-m);border-left:3px solid var(--accent)}
.guide-glossary{display:grid;grid-template-columns:minmax(160px,240px) 1fr;gap:var(--space-2) var(--space-4);margin:0}
.guide-glossary dt{font-weight:600}
.guide-glossary dd{margin:0;color:var(--ink-soft)}
@media (max-width:700px){.guide-glossary{grid-template-columns:1fr}.guide-glossary dd{margin-bottom:var(--space-2)}}

/* First-run tour: dark blurred backdrop, spotlight ring, arrowed card. */
body.tour-open{overflow:hidden}
.tour{position:fixed;inset:0;z-index:200}
.tour[hidden]{display:none}
.tour-overlay{position:absolute;inset:0;background:rgba(28,28,26,.58);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.tour-ring{position:fixed;border-radius:var(--radius-m);box-shadow:0 0 0 3px var(--accent),0 0 0 9px rgba(31,111,84,.28);pointer-events:none;transition:top 180ms cubic-bezier(.23,1,.32,1),left 180ms cubic-bezier(.23,1,.32,1),width 180ms,height 180ms}
.tour-hole{position:fixed;border:0;padding:0;background:transparent;border-radius:var(--radius-m);cursor:pointer}
.tour-card{position:fixed;width:min(380px,calc(100vw - 24px));background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:var(--radius-l);box-shadow:var(--shadow-2);padding:var(--space-4);animation:tour-in 200ms cubic-bezier(.23,1,.32,1)}
.tour-card.centered{top:50%;left:50%;transform:translate(-50%,-50%);width:min(440px,calc(100vw - 24px))}
@keyframes tour-in{from{opacity:0;transform:translateY(6px) scale(.98)}to{opacity:1}}
.tour-card.centered{animation:tour-center-in 200ms cubic-bezier(.23,1,.32,1)}
@keyframes tour-center-in{from{opacity:0;transform:translate(-50%,-46%) scale(.98)}to{opacity:1;transform:translate(-50%,-50%)}}
.tour-card::after{content:"";position:absolute;width:12px;height:12px;background:var(--surface);border-left:1px solid var(--line);border-top:1px solid var(--line);transform:rotate(45deg)}
.tour-card.arrow-top::after{top:-7px;left:50%;margin-left:-6px}
.tour-card.arrow-bottom::after{bottom:-7px;left:50%;margin-left:-6px;transform:rotate(225deg)}
.tour-card.centered::after{display:none}
.tour-card-head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);margin-bottom:var(--space-2)}
.tour-progress{margin:0;font-size:.7rem;text-transform:uppercase;letter-spacing:.09em;color:var(--ink-soft)}
.tour-skip{background:none;border:0;padding:6px 8px;color:var(--ink-soft);font-size:.82rem;cursor:pointer;border-radius:var(--radius-s);text-decoration:underline}
.tour-skip:hover{color:var(--ink);background:var(--paper)}
.tour-skip:focus-visible,.tour-card .button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.tour-card h2{margin:0 0 var(--space-2);font-size:1.15rem;line-height:1.25}
.tour-card p#tour-body{margin:0 0 var(--space-4);color:var(--ink-soft);line-height:1.5}
.tour-foot{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3)}
.tour-dots{display:flex;gap:6px;list-style:none;margin:0;padding:0}
.tour-dots li{width:7px;height:7px;border-radius:50%;background:var(--line)}
.tour-dots li.active{background:var(--accent);transform:scale(1.15)}
.tour-buttons{display:flex;gap:var(--space-2);align-items:center}
.tour-card .button{min-height:40px}
@media (max-width:560px){
  .tour-card,.tour-card.centered{top:auto!important;bottom:12px;left:12px!important;right:12px;width:auto;transform:none!important;animation:none}
  .tour-card::after{display:none}
}
@media (prefers-reduced-motion:reduce){
  .tour-card,.tour-card.centered{animation:none}
  .tour-ring{transition:none}
}

/* Tabbed configuration: one job visible at a time instead of a wall of forms. */
.tabset{margin-top:var(--space-4)}
.tablist{display:flex;gap:var(--space-1);flex-wrap:wrap;border-bottom:1px solid var(--line);margin-bottom:var(--space-4);padding-bottom:2px}
.tab{appearance:none;background:none;border:0;border-bottom:2px solid transparent;padding:10px var(--space-3);min-height:44px;font-size:.94rem;font-weight:500;color:var(--ink-soft);cursor:pointer;border-radius:var(--radius-s) var(--radius-s) 0 0;transition:color 140ms ease,background-color 140ms ease,border-color 140ms ease}
.tab:hover{color:var(--ink);background:var(--paper)}
.tab:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.tab[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--accent);font-weight:600}
.tabpanel{animation:tabpanel-in 160ms cubic-bezier(.23,1,.32,1)}
.tabpanel:focus{outline:none}
.tabpanel[hidden]{display:none}
@keyframes tabpanel-in{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
.tabpanel .master-form-grid{grid-template-columns:repeat(auto-fit,minmax(320px,1fr));margin-bottom:var(--space-6)}
.tabpanel .master-form{max-width:none}
@media (prefers-reduced-motion:reduce){.tabpanel{animation:none}.tab{transition:none}}
@media (max-width:700px){.tablist{overflow-x:auto;flex-wrap:nowrap}.tab{white-space:nowrap}}

/* ============================================================
   Week page: step cards. Depth and boundary come from elevation
   and a status spine, not from blur - dense financial tables need
   full contrast, so the frosted treatment stays off the data.
   ============================================================ */
.week-header{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap;margin-bottom:var(--space-3)}
.week-header h1{margin:var(--space-1) 0}
.step-stack{display:grid;gap:var(--space-4);margin:var(--space-4) 0 var(--space-8)}
.step-card{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-l);box-shadow:var(--shadow-1);overflow:hidden;transition:box-shadow 200ms cubic-bezier(.23,1,.32,1),border-color 200ms ease}
.step-card::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:var(--line)}
.step-card[data-step]:hover{box-shadow:var(--shadow-2)}
.step-card:has(.badge-ok)::before{background:var(--ok)}
.step-card:has(.badge-attention)::before{background:var(--attention)}
.step-card:has(.badge-blocked)::before{background:var(--blocked)}
.step-head{display:flex;align-items:flex-start;gap:var(--space-3);padding:var(--space-4);border-bottom:1px solid var(--line)}
.step-index{display:grid;place-items:center;width:30px;height:30px;flex:0 0 auto;border-radius:50%;background:var(--paper);color:var(--ink-soft);font-size:.85rem;font-weight:600;font-variant-numeric:tabular-nums}
.step-title{flex:1 1 auto;min-width:0}
.step-title h2{margin:0;font-size:1.06rem;line-height:1.3}
.step-summary{margin:2px 0 0;color:var(--ink-soft);font-size:.88rem;line-height:1.45}
.step-body{padding:var(--space-4);display:grid;gap:var(--space-3)}
.step-scroll{max-height:640px;overflow-y:auto}
.step-close{border-color:var(--accent)}
.step-refreshed{animation:step-settle 900ms cubic-bezier(.23,1,.32,1)}
@keyframes step-settle{0%{box-shadow:0 0 0 3px rgba(31,111,84,.28)}100%{box-shadow:var(--shadow-1)}}

/* Status vocabulary: green verified, amber action, blue draft. */
.badge{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:999px;font-size:.72rem;font-weight:600;letter-spacing:.02em;white-space:nowrap;border:1px solid transparent}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.badge-ok{color:var(--ok);background:rgba(31,111,84,.10);border-color:rgba(31,111,84,.28)}
.badge-attention{color:var(--attention);background:rgba(138,90,0,.10);border-color:rgba(138,90,0,.28)}
.badge-blocked{color:var(--blocked);background:rgba(163,35,43,.10);border-color:rgba(163,35,43,.28)}
.badge-draft{color:#1c5f8a;background:rgba(28,95,138,.10);border-color:rgba(28,95,138,.26)}
.pill{display:inline-block;padding:3px 9px;border-radius:var(--radius-s);background:var(--paper);border:1px solid var(--line);font-size:.75rem}
.pill-ok{color:var(--ok);border-color:rgba(31,111,84,.3)}

/* Financial tables: tabular numerals, right-aligned money, quiet rules. */
.data-table{width:100%;border-collapse:collapse;font-size:.9rem}
.data-table th{text-align:left;font-size:.7rem;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-soft);font-weight:600;padding:0 var(--space-3) var(--space-2)}
.data-table td{padding:var(--space-2) var(--space-3);border-top:1px solid var(--line);vertical-align:top}
.data-table td small{display:block;color:var(--ink-soft);font-size:.76rem}
.data-table .num,.data-table th.num{text-align:right;font-variant-numeric:tabular-nums lining-nums}
.data-table tbody tr{transition:background-color 140ms ease}
.data-table tbody tr:hover{background:var(--paper)}
.fingerprint{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.76rem;color:var(--ink-soft)}
.empty{color:var(--ink-soft);padding:var(--space-3);text-align:center}

/* Assignment cards: evidence beside the decision. */
.assign-card{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(260px,.85fr);gap:var(--space-4);padding:var(--space-3);border:1px solid var(--line);border-radius:var(--radius-m);background:var(--paper)}
.assign-card h3{margin:0 0 2px;font-size:.98rem}
.assign-form{display:grid;gap:var(--space-2);align-content:start}
.evidence-line{display:block;color:var(--ink-soft);font-size:.76rem}
.notice{margin:var(--space-2) 0 0;padding:var(--space-2) var(--space-3);border-radius:var(--radius-s);background:var(--surface);border-left:3px solid var(--line);font-size:.85rem}
.notice.ok{border-left-color:var(--ok)}
.notice.attention{border-left-color:var(--attention)}
.field{display:grid;gap:4px;margin:0}
.field label{font-size:.8rem;font-weight:600}
.field-error{color:var(--blocked);font-size:.78rem}
.stacked-form{display:grid;gap:var(--space-3);max-width:520px}
.sub-head{margin:var(--space-3) 0 0;font-size:.92rem}
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:var(--space-2)}
.mini-card{padding:var(--space-3);border:1px solid var(--line);border-radius:var(--radius-m);background:var(--paper)}
.mini-card .money{margin:0;font-size:1.05rem;font-weight:650;font-variant-numeric:tabular-nums}

/* Problem cards: the blocker reads first, the fix sits beside it. */
.problem-list{display:grid;gap:var(--space-2)}
.problem-card{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-3);padding:var(--space-3);border-radius:var(--radius-m);border:1px solid var(--line);border-left-width:3px;background:var(--paper);transition:opacity 220ms ease,transform 220ms cubic-bezier(.23,1,.32,1)}
.problem-card.problem-critical{border-left-color:var(--blocked)}
.problem-card.problem-warning{border-left-color:var(--attention)}
.problem-card.problem-done{opacity:.6}
.problem-message{margin:0;font-weight:550}
.blocker-list{margin:0;padding-left:var(--space-4);color:var(--ink-soft);display:grid;gap:4px}
.metric-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--space-3)}
.metric{padding:var(--space-3);border:1px solid var(--line);border-radius:var(--radius-m);background:var(--paper)}
.metric span{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft)}
.metric strong{font-size:1.15rem;font-variant-numeric:tabular-nums}
.button.large{min-height:48px;padding:0 var(--space-6);font-size:1rem}

@media (max-width:840px){.assign-card{grid-template-columns:1fr}.step-scroll{max-height:none}}
@media (prefers-reduced-motion:reduce){.step-card,.problem-card,.data-table tbody tr{transition:none}.step-refreshed{animation:none}}

/* ---- Dark mode: OPT-IN ONLY, and deliberately not wired to a toggle yet ----
   An earlier build enabled this from prefers-color-scheme. That was wrong:
   app.css still carries 48 hardcoded colours against 50 token-based ones, so
   flipping the tokens produced dark text on dark surfaces and white panels on a
   near-black page. Until every hardcoded value is converted to a token, dark
   mode only applies when a root data-theme="dark" is set explicitly, which
   nothing does. The light theme is the shipped, verified experience. */
:root[data-theme="dark"]{
  --ink:#ecebe6;--ink-soft:#a3a199;--paper:#16171a;--surface:#1e2024;--line:#31343a;
  --accent:#4ea88a;--ok:#4ea88a;--attention:#d9a441;--blocked:#e0656d;
  --shadow-1:0 1px 2px rgba(0,0,0,.5);--shadow-2:0 8px 24px rgba(0,0,0,.55);
}
:root[data-theme="dark"] body{background:var(--paper);color:var(--ink)}
:root[data-theme="dark"] .badge-ok{background:rgba(78,168,138,.14);border-color:rgba(78,168,138,.36)}
:root[data-theme="dark"] .badge-attention{background:rgba(217,164,65,.14);border-color:rgba(217,164,65,.36)}
:root[data-theme="dark"] .badge-blocked{background:rgba(224,101,109,.14);border-color:rgba(224,101,109,.36)}
:root[data-theme="dark"] .badge-draft{color:#7fb6d9;background:rgba(127,182,217,.13);border-color:rgba(127,182,217,.32)}

/* ============================================================
   Use the screen. Audit tables are dense and wide; a 1480px cap
   left ~200px dead on each side of a large monitor while data
   scrolled inside a narrow column. Prose keeps its own measure so
   the Guide stays readable at any window width.
   ============================================================ */
.page-shell{max-width:min(1780px,100%);padding-left:clamp(18px,2.6vw,52px);padding-right:clamp(18px,2.6vw,52px)}
.guide-block p,.guide-block li,.guide-block dd{max-width:76ch}
.narrow-heading{max-width:820px}
/* Wide screens can hold more metrics per row before wrapping. */
@media (min-width:1500px){
  .metric-grid{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
  .step-body .card-grid{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
}
@media (min-width:1800px){.page-shell{padding-left:56px;padding-right:56px}}