/* Approved Blueprint shell for the portal. This file intentionally overrides
   app.css without changing any route, form, htmx contract, or pricing behavior. */
:root,
:root[data-theme="dark"] {
  --ground: #f5f7fa;
  --surface: #ffffff;
  --ink: #172033;
  --body: #3f4b5d;
  --muted: #5f6b7a;
  --rule: #d8dee8;
  --rule-soft: #e7ebf0;
  --accent: #175cd3;
  --accent-strong: #123e73;
  --accent-soft: #eaf2ff;
  --computed: #edf4ff;
  --warn: #8a5700;
  --warn-soft: #fff4d6;
  --bad: #a12b2b;
  --bad-soft: #fde8e8;
  --ok: #137333;
  --ok-soft: #e9f6ec;
  --code-bg: #eef2f6;
  --sans: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", Menlo, Consolas, monospace;
  --shadow-sheet: 0 1px 2px rgba(16, 24, 40, .04), 0 5px 16px rgba(16, 24, 40, .045);
  --shadow-action: 0 2px 5px rgba(23, 92, 211, .22);
  color-scheme: light;
}

html { background: var(--ground); scroll-behavior: smooth; }
body { min-width: 320px; background: var(--ground); color: var(--body); font-size: 14px; line-height: 1.5; }
::selection { background: #cfe2ff; color: #102a43; }
:focus-visible { outline: 3px solid rgba(23, 92, 211, .28); outline-offset: 2px; }
button, input, select, textarea { caret-color: var(--accent); }
a { color: var(--accent); }

.shell { grid-template-columns: 236px minmax(0, 1fr); }
.workspace { min-width: 0; }
.rail {
  position: sticky;
  top: 0;
  z-index: 40;
  height: 100vh;
  overflow-y: auto;
  padding: 0;
  border-right: 1px solid var(--rule);
  background: var(--surface);
  scrollbar-width: thin;
  scrollbar-color: #c2cbd7 transparent;
}
.rail-head { display: flex; min-height: 64px; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--rule); padding: 0 16px 0 20px; }
.rail .brand { display: flex; min-width: 0; align-items: center; gap: 11px; padding: 0; color: var(--ink); text-decoration: none; }
.brand-mark { display: grid; width: 32px; height: 32px; flex: 0 0 auto; place-items: center; border: 1px solid var(--accent); background: var(--accent); color: #fff; font-size: 13px; font-weight: 600; box-shadow: 0 1px 3px rgba(23, 92, 211, .18); }
.brand-copy { min-width: 0; }
.brand-copy b { display: block; overflow: hidden; font-size: 15px; font-weight: 600; letter-spacing: -.01em; text-overflow: ellipsis; white-space: nowrap; }
.brand-copy small { display: block; margin-top: 1px; color: var(--muted); font-family: var(--mono); font-size: 8.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
.nav-close, .nav-open { display: none; width: 36px; height: 36px; place-items: center; border: 1px solid var(--rule); background: var(--surface); color: var(--muted); cursor: pointer; }
.nav-close { border-color: transparent; }
.nav-close:hover, .nav-open:hover { border-color: var(--rule); background: #f7f9fb; color: var(--ink); }
.nav-close svg, .nav-open svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.75; }

.rail .period { margin: 16px 12px 4px; border: 1px solid #c9d9f3; background: var(--accent-soft); padding: 9px 11px; }
.rail .period span { display: block; color: var(--muted); font-family: var(--mono); font-size: 8.5px; font-weight: 500; letter-spacing: .13em; text-transform: uppercase; }
.rail .period a { display: block; margin-top: 2px; padding: 0; color: var(--accent-strong); font-family: var(--mono); font-size: 12px; font-weight: 500; }
.rail-section { margin: 20px 0 6px; padding: 0 15px; color: var(--muted); font-family: var(--mono); font-size: 9px; font-weight: 500; letter-spacing: .16em; }
.rail-section:first-of-type { margin-top: 20px; }
.rail > a { display: flex; min-height: 40px; align-items: center; gap: 11px; margin: 1px 12px; padding: 0 11px; border: 1px solid transparent; color: var(--muted); font-size: 13px; font-weight: 500; }
.rail > a svg { width: 17px; height: 17px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.rail > a:hover { background: #f7f9fb; color: var(--ink); }
.rail > a.current { border-color: #c9d9f3; background: var(--accent-soft); box-shadow: inset 2px 0 0 var(--accent); color: var(--accent); font-weight: 600; }
.rail .account { margin: auto 0 0; border-top: 1px solid var(--rule); padding: 15px 20px 16px; }
.rail .account .who { font-size: 12.5px; font-weight: 600; }
.rail .account .row { margin-top: 7px; }
.rail .account a { color: var(--accent); font-size: 12px; font-weight: 500; }

.nav-backdrop { display: none; }
.topbar { position: sticky; top: 0; z-index: 30; display: flex; height: 64px; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--rule); background: rgba(255, 255, 255, .96); padding: 0 32px; backdrop-filter: blur(6px); }
.topbar-copy { min-width: 0; }
.topbar-copy b { display: block; overflow: hidden; color: var(--ink); font-size: 13px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.topbar-copy span { display: block; margin-top: 1px; color: var(--muted); font-family: var(--mono); font-size: 8.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
.topbar-account { display: flex; align-items: center; gap: 10px; }
.topbar-role { border: 1px solid #c9d9f3; background: var(--accent-soft); padding: 3px 8px; color: var(--accent); font-family: var(--mono); font-size: 9px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.topbar-name { max-width: 220px; overflow: hidden; color: var(--muted); font-size: 12px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.content { width: 100%; max-width: 1440px; padding: 36px 40px 64px; }

h1 { font-size: 30px; letter-spacing: -.025em; }
h2 { font-size: 18px; letter-spacing: -.015em; }
h3 { font-size: 15px; }
.sub { color: var(--muted); }
.label { color: var(--muted); font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: .12em; }
code, .mono, .num { font-variant-numeric: tabular-nums; }

.head { padding-bottom: 20px; border-bottom: 1px solid var(--rule); }
.head > div:first-child { min-width: min(100%, 420px); }
.toolbar { gap: 8px; }
.toolbar label { color: var(--muted); font-size: 12px; font-weight: 500; }
.section { margin-top: 36px; }

.summary, .figures, .kpis {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--rule);
  background-color: var(--surface);
  background-image: linear-gradient(rgba(23, 92, 211, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(23, 92, 211, .035) 1px, transparent 1px);
  background-size: 16px 16px;
  box-shadow: var(--shadow-sheet);
}
.summary { gap: 8px 20px; padding: 18px 20px; }
.summary::before, .summary::after { content: ""; position: absolute; width: 18px; height: 18px; pointer-events: none; }
.summary::before { top: 11px; left: 11px; border-top: 1px solid rgba(23, 92, 211, .34); border-left: 1px solid rgba(23, 92, 211, .34); }
.summary::after { right: 11px; bottom: 11px; border-right: 1px solid rgba(23, 92, 211, .34); border-bottom: 1px solid rgba(23, 92, 211, .34); }
.summary .figure { color: var(--accent-strong); font-family: var(--mono); font-size: 24px; font-weight: 600; }
.figures, .kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0; margin: 18px 0 20px; }
.figures div, .kpis div { min-height: 84px; justify-content: center; padding: 16px 20px; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.figures div:last-child, .kpis div:last-child { border-right: 0; }
.figures .num, .kpis .figure { color: var(--ink); font-family: var(--mono); font-size: 20px; font-weight: 600; }

/* A table wider than its wrap scrolls inside it (app.css sets overflow-x);
   these edge shadows only render once there is more to scroll to, because
   the "local" layer travels with the content and cancels the "scroll" layer
   at whichever end is already fully in view. */
.tablewrap {
  border: 1px solid var(--rule); background: var(--surface); box-shadow: var(--shadow-sheet);
  scrollbar-width: thin; scrollbar-color: #c2cbd7 transparent;
  background-image:
    linear-gradient(to right, var(--surface) 30%, rgba(255, 255, 255, 0)),
    linear-gradient(to right, rgba(255, 255, 255, 0), var(--surface) 70%),
    linear-gradient(to right, rgba(16, 24, 40, .16), rgba(16, 24, 40, 0) 100%),
    linear-gradient(to left, rgba(16, 24, 40, .16), rgba(16, 24, 40, 0) 100%);
  background-repeat: no-repeat;
  background-color: var(--surface);
  background-size: 32px 100%, 32px 100%, 12px 100%, 12px 100%;
  background-position: 0 0, 100% 0, 0 0, 100% 0;
  background-attachment: local, local, scroll, scroll;
}
table { background: var(--surface); font-size: 13px; }
th { background: #f8fafc; color: var(--muted); font-family: var(--mono); font-size: 9.5px; font-weight: 600; letter-spacing: .12em; padding: 10px 12px; }
td { padding: 10px 12px; }
tr:nth-child(even) td { background: #fafbfd; }
tr:hover td { background: #f6f9fd; }
tr.total td { border-top: 2px solid var(--ink); }

.btn { min-height: 36px; border-radius: 0; background: var(--surface); font-size: 12.5px; font-weight: 600; padding: 8px 14px; box-shadow: 0 1px 2px rgba(16, 24, 40, .035); }
.btn:hover { border-color: #aeb8c6; background: #f8fafc; }
.btn.primary { border-color: var(--accent); background: var(--accent); color: #fff; box-shadow: var(--shadow-action); }
.btn.primary:hover { border-color: var(--accent-strong); background: var(--accent-strong); }
.btn.quiet { box-shadow: none; }
.btn:disabled { opacity: .48; }
.in { min-height: 38px; border-radius: 0; background: var(--surface); font-size: 13px; }
.in:focus { border-color: var(--accent); outline: none; }
.in.fill { border-color: #b8ddc2; background: var(--ok-soft); }
.in.auto { border-color: #cadcf8; background: var(--computed); }
.in.err { border-color: var(--bad); background: var(--bad-soft); }

.chip, .badge { border-radius: 0; font-size: 11px; }
.chip.ok, .badge.ok { background: var(--ok-soft); color: var(--ok); }
.chip.todo, .badge.warn { background: var(--warn-soft); color: var(--warn); }
.chip.bad, .badge.bad { background: var(--bad-soft); color: var(--bad); }
.chip.wait { background: var(--code-bg); color: var(--muted); }
.badge { border: 1px solid var(--rule-soft); }

.banner, .notice, .empty { border-radius: 0; }
.banner { border: 1px solid #f0b5b5; background: var(--bad-soft); }
.notice { border: 1px solid #ead49b; background: var(--warn-soft); }
.empty { background: var(--surface); border-color: var(--rule); }
.log { border: 1px solid #334155; border-radius: 0; box-shadow: var(--shadow-sheet); }

.cards { gap: 14px; }
.card { border-color: var(--rule); border-radius: 0; padding: 18px 20px; box-shadow: var(--shadow-sheet); }
.card h2:first-child, .card h3:first-child { margin-top: 0; }
details.editor summary { color: var(--accent); }
details.editor form { border: 1px solid var(--rule); border-radius: 0; background: #f8fafc; }
.pills label { border-radius: 0; }
.pills label:has(input:checked) { border-color: var(--accent); background: var(--accent); color: #fff; }
.termrow { border-color: var(--rule); }

.jobs-start { border-color: var(--rule); }
.jobs-actions { gap: 14px; }
.jobs-action { border: 1px solid var(--rule); background: var(--surface); padding: 16px; box-shadow: var(--shadow-sheet); }

.wall { margin-top: 56px; border: 1px solid var(--rule); background-color: var(--surface); background-image: linear-gradient(rgba(23, 92, 211, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(23, 92, 211, .035) 1px, transparent 1px); background-size: 16px 16px; padding: 40px; box-shadow: var(--shadow-sheet); }
.wall::before { content: "GGR BILLING · INTERNAL"; display: block; margin-bottom: 22px; color: var(--muted); font-family: var(--mono); font-size: 9px; font-weight: 600; letter-spacing: .14em; }

/* A screen reader only label: for an input a sighted user reads from a
   neighbouring caption or placeholder instead of its own <label>. */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* The heading row above a section's body: title and caption on the left, one
   summary action or status chip on the right. Shared by the workflow panel
   and the completion checklist. */
.section-heading { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.section-heading h2 { margin: 0; }
.section-heading .sub { margin: 4px 0 0; }

/* The monthly workflow, Month's own numbered stage list: one flat bordered
   panel, each stage a row rather than a card, so seven of them read as one
   sequence and not seven decorative tiles. */
.workflow-panel { border: 1px solid var(--rule); background: var(--surface); padding: 20px 22px 22px; box-shadow: var(--shadow-sheet); }
.workflow-list { display: flex; flex-direction: column; gap: 1px; margin: 0; padding: 0; list-style: none; background: var(--rule-soft); border: 1px solid var(--rule); }
.workflow-step { display: flex; align-items: center; gap: 14px; padding: 12px 16px; background: var(--surface); }
.workflow-step.complete { background: var(--ok-soft); }
.workflow-step.current { background: var(--accent-soft); }
.workflow-step .step-body { flex: 1 1 auto; min-width: 0; }
.workflow-step .step-body a { color: var(--ink); font-size: 13.5px; text-decoration: none; }
.workflow-step .step-body a:hover { color: var(--accent); text-decoration: underline; }
.workflow-step .step-body .sub { display: block; margin-top: 1px; font-size: 12px; }

/* The step number both the workflow list and the job process list share:
   a fixed-width tick, not a decorative badge. */
.step-number { display: grid; flex: 0 0 auto; place-items: center; width: 26px; height: 26px; border: 1px solid var(--rule); background: var(--surface); color: var(--muted); font-family: var(--mono); font-size: 12px; font-weight: 600; }
.workflow-step.complete .step-number { border-color: var(--ok); color: var(--ok); }
.workflow-step.current .step-number { border-color: var(--accent); color: var(--accent); }
.process-step.complete .step-number { border-color: var(--ok); color: var(--ok); }
.process-step.current .step-number { border-color: var(--accent); color: var(--accent); }

/* Run & verify's own numbered sequence: the same row shape as the workflow
   list, but each step is its own bordered action, since it carries a button. */
.process-list { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.jobs-actions.process-list { display: flex; }
.process-step { display: flex; align-items: center; gap: 16px; border: 1px solid var(--rule); background: var(--surface); padding: 14px 16px; box-shadow: var(--shadow-sheet); }
.process-step.complete { background: var(--ok-soft); }
.process-step.current { border-color: var(--accent); background: var(--accent-soft); }
.process-step.blocked { opacity: .58; }
.process-step .step-body { flex: 1 1 auto; min-width: 0; }
.process-step .btn { flex: 0 0 auto; }

/* The label and status chip on one line, above a step's own note -- shared
   by the workflow list rows once expanded and every process step. */
.step-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.step-heading b { font-size: 13.5px; color: var(--ink); }
.step-body .sub { margin: 2px 0 0; }

/* Month's completion checklist: one flat list, a chip per check and a
   Review link that opens the exact page the check reads from. */
.completion-list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; border: 1px solid var(--rule); background: var(--surface); box-shadow: var(--shadow-sheet); }
.completion-item { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-bottom: 1px solid var(--rule-soft); }
.completion-item:last-child { border-bottom: 0; }
.completion-item > div { flex: 1 1 auto; min-width: 0; }
.completion-item b { font-size: 13.5px; color: var(--ink); }
.completion-item .sub { display: block; margin-top: 1px; font-size: 12px; }
.completion-item > a { flex: 0 0 auto; font-size: 12.5px; font-weight: 600; }

/* The close/reopen form under the checklist: reason field and button share
   a row on desktop, stack on mobile via the .actions/.upload pattern. */
.completion-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--rule); }
.completion-form label { font-size: 12px; color: var(--muted); }
.completion-form .in { min-width: 260px; flex: 1 1 320px; }

/* A collapsed section: exceptions, the provider table, workbook import --
   detail that stays out of the way until asked for, never hidden data. */
.disclosure { border: 1px solid var(--rule); background: var(--surface); margin: 20px 0; padding: 0; }
.disclosure > summary { cursor: pointer; list-style: none; padding: 14px 18px; color: var(--ink); font-weight: 600; }
.disclosure > summary::-webkit-details-marker { display: none; }
.disclosure > summary::before { content: "+ "; color: var(--accent); }
.disclosure[open] > summary::before { content: "\2013\0020"; }
.disclosure > summary ~ * { margin-left: 18px; margin-right: 18px; }
.disclosure > summary ~ *:last-child { margin-bottom: 18px; }
.disclosure > summary ~ .tablewrap { margin-left: 0; margin-right: 0; border-left: 0; border-right: 0; }

@media (max-width: 1024px) {
  .shell { grid-template-columns: 1fr; }
  .topbar { padding: 0 20px; }
  .nav-open { display: grid; flex: 0 0 auto; }
  .topbar-copy { margin-right: auto; }
  .rail { position: fixed; inset: 0 auto 0 0; width: 236px; height: 100dvh; transform: none; box-shadow: 10px 0 30px rgba(15, 23, 42, .12); }
  .js .rail { transform: translateX(-102%); transition: transform 200ms cubic-bezier(.16, 1, .3, 1); }
  .js.nav-visible .rail { transform: translateX(0); }
  .nav-close { display: grid; }
  .nav-backdrop { position: fixed; inset: 0; z-index: 35; background: rgba(15, 23, 42, .34); }
  .js.nav-visible .nav-backdrop { display: block; }
  .js.nav-visible { overflow: hidden; }
  .content { max-width: none; padding: 28px 24px 56px; }
}

@media (max-width: 640px) {
  .topbar { height: 60px; padding: 0 14px; }
  .topbar-name { display: none; }
  .content { padding: 24px 16px 48px; }
  h1 { font-size: 26px; }
  .head { gap: 16px; }
  .summary { padding: 16px; }
  .figures, .kpis { grid-template-columns: 1fr; }
  .figures div, .kpis div { min-height: 72px; border-right: 0; }
  .cards { grid-template-columns: 1fr; }
  .card { padding: 16px; }
  .wall { margin: 24px 16px 0; padding: 28px 22px; }
  /* Every tappable control reaches the 44px touch target on a phone. */
  .btn, .in, select.in, input[type="checkbox"].in { min-height: 44px; }
  .nav-open, .nav-close { width: 44px; height: 44px; }
  .rail > a { min-height: 44px; }
  .pills label { min-height: 30px; padding: 6px 12px; }
  .workflow-step, .completion-item { align-items: flex-start; }
  .process-step { flex-wrap: wrap; }
  .process-step .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .rail { transition: none; }
}