/* Taxanista — Augusta Rule App
   Palette per 00_resources/branding.md: green + charcoal + white. */

:root {
  --green: #7BC143;
  --green-deep: #489041;
  --green-light: #F1F9EA;
  --charcoal: #2D2D2D;
  --magenta: #A74683;
  --amber: #BA7517;
  --amber-light: #FAEEDA;
  --red: #b91c1c;
  --red-light: #FEE2E2;
  --text: #1a1a1a;
  --text-muted: #6b6b6b;
  --text-hint: #9b9b9b;
  --border: rgba(0,0,0,0.09);
  --border-med: rgba(0,0,0,0.15);
  --surface: #ffffff;
  /* Page Gray from branding.md. Was #f7f6f3, which read as beige next to the
     Accountable Plan app's gray — the two tools now sit on the same background. */
  --bg: #F5F5F5;
  --gray-light: #EDEDED;
  --radius: 10px;
  /* Height of the sticky chrome, republished at runtime by sizeChrome() so the
     document print bar and the lock banner pin below it, not underneath it. */
  --chrome-h: 116px;
  --radius-lg: 14px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  font-size: 15px;
  line-height: 1.55;
}

/* ─── Header ──────────────────────────────────────────────────────────── */
.chrome { position: sticky; top: 0; z-index: 100; background: var(--surface); transition: box-shadow .18s ease; }
.chrome.scrolled { box-shadow: 0 3px 12px rgba(0,0,0,.10); }
.chrome-row { max-width: 1000px; margin: 0 auto; padding: 11px 20px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.chrome-brand { display: flex; align-items: center; gap: 14px; min-width: 0; }
.chrome-brand img { width: 175px; height: auto; display: block; }
.chrome-brand h1 { font-size: 17px; margin: 0; font-weight: 700; color: var(--charcoal); white-space: nowrap; padding-left: 14px; border-left: 1px solid var(--border-med); }
.chrome-tools { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; color: var(--text-muted); }
/* The three file buttons carry meaning in their color, the way the Accountable
   Plan app's do: green writes the file, charcoal opens one, red throws the work
   away. Sizing still comes from .btn-sm; only the fill changes. Scoped to the
   chrome so the neutral .btn-sm used everywhere else in the app is untouched. */
.chrome-tools .btn-sm.act-save { background: var(--green-deep); border-color: var(--green-deep); color: #fff; }
.chrome-tools .btn-sm.act-save:hover { background: #3b7935; }
.chrome-tools .btn-sm.act-open { background: var(--charcoal); border-color: var(--charcoal); color: #fff; }
.chrome-tools .btn-sm.act-open:hover { background: #454545; }
.chrome-tools .btn-sm.act-clear { background: var(--red); border-color: var(--red); color: #fff; }
.chrome-tools .btn-sm.act-clear:hover { background: #991b1b; }
@media (max-width: 820px) {
  .chrome-brand h1 { padding-left: 0; border-left: none; }
  .chrome-tools { margin-left: 0; }
}
.rule { height: 4px; background: var(--green); }

/* ---- Chrome color: white or charcoal ---------------------------------------
   Both are canon — see 00_resources/branding.md. White is brighter and reads
   friendlier, and lets the master logo sit directly on the background. Charcoal
   reads more formal and uses New Logo White.png, the proper knockout of the
   wordmark, never a white chip behind the charcoal wordmark (which is what these
   apps used to do and what branding.md rules out). The person opening the app is
   asked once and the answer is remembered in their browser, so this is a personal
   preference, not a firm-wide switch.
   Everything below is scoped to #chrome. No document, no tab body, and no printed
   page changes with the theme — the chrome is display:none in print either way. */
.savestate { font-size: 12px; color: var(--text-hint); }
.chrome-brand .logo-knockout { display: none; }
.chrome[data-chrome="charcoal"] { background: var(--charcoal); }
.chrome[data-chrome="charcoal"] .chrome-brand .logo-master { display: none; }
.chrome[data-chrome="charcoal"] .chrome-brand .logo-knockout { display: block; }
.chrome[data-chrome="charcoal"] .chrome-brand h1 { color: #fff; border-left-color: rgba(255,255,255,.28); }
.chrome[data-chrome="charcoal"] .chrome-tools { color: #d4d4d4; }
.chrome[data-chrome="charcoal"] .chrome-tools .who,
.chrome[data-chrome="charcoal"] .savestate { color: #f0f0f0; }
.chrome[data-chrome="charcoal"] .tabbar { background: transparent; }
.chrome[data-chrome="charcoal"] .tab { color: #c3c3c3; }
.chrome[data-chrome="charcoal"] .tab:hover { color: #fff; }
.chrome[data-chrome="charcoal"] .tab-n,
.chrome[data-chrome="charcoal"] .tab-c { background: rgba(255,255,255,.15); color: #e2e2e2; }
/* The active tab is marked in white plus the brand green underline. Deep green on
   charcoal is too close in value to read as "selected" from across a room. */
.chrome[data-chrome="charcoal"] .tab.on { color: #fff; border-bottom-color: var(--green); }
.chrome[data-chrome="charcoal"] .tab.on .tab-n { background: var(--green); color: var(--charcoal); }
.chrome[data-chrome="charcoal"] .tabbar-note { color: #c3c3c3; }
/* Open File is charcoal on white, which would vanish on a charcoal bar. */
.chrome[data-chrome="charcoal"] .act-open,
.chrome[data-chrome="charcoal"] button.ghost { background: #575757; border-color: #575757; color: #fff; }
.chrome[data-chrome="charcoal"] .act-open:hover,
.chrome[data-chrome="charcoal"] button.ghost:hover { background: #6a6a6a; }

/* The header button that switches the two. Deliberately the quietest control in
   the chrome: it changes nothing about the plan, only how the app looks. */
.chrome .act-theme, .chrome button.chrome-theme {
  background: transparent; color: var(--text-muted); border: 1px solid var(--border-med);
  font-weight: 600; cursor: pointer;
}
.chrome .act-theme:hover, .chrome button.chrome-theme:hover { background: rgba(0,0,0,.05); color: var(--charcoal); }
.chrome[data-chrome="charcoal"] .act-theme,
.chrome[data-chrome="charcoal"] button.chrome-theme { color: #d4d4d4; border-color: rgba(255,255,255,.32); }
.chrome[data-chrome="charcoal"] .act-theme:hover,
.chrome[data-chrome="charcoal"] button.chrome-theme:hover { background: rgba(255,255,255,.12); color: #fff; }

/* The one-time question. Sits under the chrome, scrolls away with the page. */
.theme-ask { max-width: 1000px; margin: 18px auto 0; padding: 0 20px; }
.theme-ask-inner { background: #fff; border-left: 5px solid var(--green); border-radius: 0 var(--radius) var(--radius) 0;
  padding: 12px 18px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.theme-ask-txt { flex: 1; min-width: 260px; font-size: 13px; line-height: 1.5; }
.theme-ask-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.chrome-theme-hidden { display: none; }
button.theme-pick { background: var(--green-deep); color: #fff; border: none; border-radius: 6px;
  padding: 8px 14px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; }
button.theme-pick:hover { background: var(--green); }
[id] { scroll-margin-top: calc(var(--chrome-h) + 14px); }

/* Hidden, not deleted. The chrome carries exactly ONE green bar — the rule at its
   bottom edge — and this track was a second one directly above it. The number it
   showed is not lost: the same percentage is the badge on the Setup tab. The
   element stays in the DOM because four call sites set its width unconditionally,
   and a cosmetic change should not be able to throw. */
.progress-track { display: none; }
.progress-fill { height: 100%; width: 0; background: var(--green); transition: width .3s ease; }

/* ─── Review bar ───────────────────────────────────────────────────────────
   Shown only while a file someone else sent is open. It has to be impossible to
   miss, because the whole point is that nothing typed in this state is being
   saved. Amber rather than red: this is a mode, not an error. */
.reviewbar { background: var(--amber-light); border-bottom: 1px solid rgba(180,120,20,.3); padding: 10px 22px; }
.reviewbar-inner { max-width: 1120px; margin: 0 auto; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.rb-txt { flex: 1; font-size: 12.5px; line-height: 1.5; color: var(--text); min-width: 260px; }
.rb-txt b { font-weight: 700; }
.rb-txt .rb-sub { display: block; color: var(--text-muted); font-size: 11.5px; margin-top: 2px; }

/* ─── Tab bar ─────────────────────────────────────────────────────────── */
.tabbar { background: var(--surface); }
.tabbar-inner { max-width: 1000px; margin: 0 auto; padding: 0 20px; display: flex; gap: 2px; align-items: center; }
/* Where the plan's status sentence sits. Right-aligned on the tab row so the brand
   row above it does not have to grow a third line to hold it. */
.tabbar-note { margin-left: auto; padding-left: 18px; color: var(--text-muted); font-size: 12px; text-align: right; }
@media (max-width: 900px) { .tabbar-note { display: none; } }
.tab {
  font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; background: none;
  border: none; border-bottom: 2px solid transparent; color: var(--text-muted);
  padding: 12px 15px 10px; display: flex; align-items: center; gap: 8px; transition: .15s; white-space: nowrap;
}
.tab:hover { color: var(--text); }
.tab.on { color: var(--green-deep); border-bottom-color: var(--green-deep); }
.tab-n { width: 19px; height: 19px; border-radius: 5px; background: var(--gray-light); color: var(--text-muted); font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.tab.on .tab-n { background: var(--green-deep); color: #fff; }
.tab-c { font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 10px; background: var(--gray-light); color: var(--text-muted); }
.tab.on .tab-c { background: var(--green-light); color: var(--green-deep); }
@media (max-width: 620px) {
  .tabbar-inner { overflow-x: auto; }
  .tab { padding: 11px 10px 9px; font-size: 13px; }
  .tab-lbl-long { display: none; }
}

/* ─── Log tab extras ──────────────────────────────────────────────────── */
.locked { display: flex; align-items: center; gap: 8px; background: var(--gray-light); border: 1px solid var(--border-med); border-radius: 8px; padding: 8px 11px; font-size: 14px; }
.lock-ico { color: var(--text-hint); font-size: 12px; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.pill { font-size: 10.5px; font-weight: 700; padding: 2px 7px; border-radius: 10px; letter-spacing: .02em; white-space: nowrap; }
.pill.todo { background: var(--gray-light); color: var(--text-muted); }
.pill.part { background: var(--amber-light); color: var(--amber); }
.pill.ok { background: var(--green-light); color: var(--green-deep); }
.ck-mini { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--text-muted); cursor: pointer; white-space: nowrap; }
.ck-mini input { width: 14px; height: 14px; accent-color: var(--green-deep); cursor: pointer; }
.day-card { border: 1px solid var(--border); border-radius: var(--radius); padding: 13px 15px; margin-bottom: 10px; background: var(--surface); }
.day-card.empty { border-style: dashed; background: #FCFCFB; }

/* ─── Signing, lock, and amendment ────────────────────────────────────────
   Deliberately the same shapes and the same state names as the Accountable
   Plan app, so a staffer who has signed one has already learned this one. */
.badge { display: inline-block; padding: 3px 10px; border-radius: 11px; font-size: 11.5px; font-weight: 700; letter-spacing: .02em; }
.badge.draft { background: var(--amber-light); color: var(--amber); }
.badge.partial { background: #e8eef7; color: #2f5c96; }
.badge.signed { background: var(--green-light); color: var(--green-deep); }
.badge.altered { background: var(--red-light); color: var(--red); }
.sigblock { width: 330px; }
.sigpad { height: 56px; border-bottom: 1px solid var(--charcoal); display: flex; align-items: flex-end; padding-bottom: 2px; }
.sigpad img { max-height: 52px; max-width: 320px; }
.sigpad .sigtyped { font-family: "Segoe Script", "Snell Roundhand", "Brush Script MT", cursive; font-size: 30px; color: #12324d; line-height: 1; padding-bottom: 2px; }
.sigpad .sigph { color: #bbb; font-size: 12px; font-style: italic; }
.sigmeta { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-muted); margin-top: 3px; }
.signame { font-size: 12.5px; color: var(--text-muted); margin-top: 4px; }
.sigwho { font-size: 11.5px; color: var(--charcoal); margin-top: 2px; font-weight: 600; }
.sigstamp { font-size: 10.5px; color: var(--text-muted); margin-top: 2px; font-family: ui-monospace, Menlo, Consolas, monospace; word-break: break-all; }
.sigctrl { margin-top: 8px; display: flex; gap: 8px; }
.sigmodal { position: fixed; inset: 0; background: rgba(0,0,0,.5); display: flex; align-items: center; justify-content: center; z-index: 200; }
.sigmodal-inner { background: #fff; border-radius: var(--radius); padding: 22px 24px; width: 540px; max-width: 92vw; max-height: 94vh; overflow-y: auto; box-shadow: 0 8px 30px rgba(0,0,0,.3); }
.sigmodal-inner h3 { margin: 0 0 10px; color: var(--charcoal); font-size: 16px; }
.sigmodal-inner label { display: block; font-weight: 600; margin: 12px 0 4px; font-size: 13px; }
.sigtabs { display: flex; gap: 8px; margin-bottom: 12px; }
.sigtab { background: var(--gray-light); color: var(--charcoal); padding: 8px 18px; font-size: 13.5px; border: 0; border-radius: 7px; cursor: pointer; font-weight: 600; }
.sigtab.on { background: var(--green-deep); color: #fff; }
#sigCanvas { border: 1px dashed #9c9c9c; border-radius: 6px; width: 100%; height: 150px; touch-action: none; background: #fff; cursor: crosshair; }
.sigtypepreview { min-height: 52px; border: 1px dashed #9c9c9c; border-radius: 6px; display: flex; align-items: center; padding: 0 14px; font-family: "Segoe Script", "Snell Roundhand", "Brush Script MT", cursive; font-size: 32px; color: #12324d; }
.consent { background: var(--bg); border: 1px solid var(--border-med); border-radius: 6px; padding: 10px 12px; margin-top: 14px; font-size: 12.5px; color: var(--text-muted); }
.consent label { display: flex; gap: 8px; align-items: flex-start; margin: 0; font-weight: 400; }
.lockbanner { position: sticky; top: var(--chrome-h); z-index: 60; }
.auditwrap { margin-top: 26px; border-top: 2px solid var(--gray-light); padding-top: 12px; }
table.audit { width: 100%; border-collapse: collapse; font-size: 8.5pt; }
table.audit th { background: var(--gray-light); text-align: left; padding: 4px 6px; border: 1px solid #d0d0d0; }
table.audit td { padding: 4px 6px; border: 1px solid #d0d0d0; vertical-align: top; word-break: break-word; }
/* A disabled control should read as settled, not as broken. */
.form-input:disabled, .chip input:disabled + span, .ck input:disabled + span { opacity: .72; cursor: not-allowed; }
.form-input:disabled { background: var(--gray-light); }
.day-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 9px; flex-wrap: wrap; }
.day-n { font-size: 13px; font-weight: 700; color: var(--text-muted); }
.day-tools { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
/* The print strip inside each rental day. The minutes form and the invoice belong
   to one event, so they are printed from that event's own card rather than from a
   single button that dumps the whole year. */
.day-print { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 9px; padding-top: 9px; border-top: 1px dashed var(--border-med); }
.day-print-l { font-size: 11.5px; color: var(--text-hint); font-weight: 500; margin-right: 2px; }
.phase-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 20px 0 8px; flex-wrap: wrap; }
.phase-t { font-size: 14px; font-weight: 700; letter-spacing: -0.01em; }
.phase-w { font-size: 12.5px; color: var(--text-muted); }

main { max-width: 1000px; margin: 0 auto; padding: 26px 20px 80px; }

/* ─── Type ────────────────────────────────────────────────────────────── */
.page-title { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; }
.page-sub { color: var(--text-muted); font-size: 14px; margin-top: 2px; }
.page-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }

/* ─── Buttons ─────────────────────────────────────────────────────────── */
.btn-primary, .btn-ghost, .btn-sm {
  font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  border-radius: var(--radius); border: 1px solid transparent; padding: 10px 18px; transition: .15s;
}
.btn-primary { background: var(--green-deep); color: #fff; }
.btn-primary:hover { background: #3b7935; }
.btn-danger { background: var(--red); }
.btn-danger:hover { background: #991b1b; }
.btn-ghost { background: transparent; color: var(--text-muted); border-color: var(--border-med); }
.btn-ghost:hover { background: var(--gray-light); }
.btn-sm { padding: 7px 13px; font-size: 13px; background: var(--surface); color: var(--text); border-color: var(--border-med); }
.btn-sm:hover { background: var(--gray-light); }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; }

/* ─── Cards ───────────────────────────────────────────────────────────── */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px 20px; margin-bottom: 14px; }
.card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.card-title { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.card-note { font-size: 13px; color: var(--text-muted); margin-bottom: 14px; }
.step-num { width: 24px; height: 24px; border-radius: 6px; background: var(--green-light); color: var(--green-deep); font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* ─── Compact form grid ───────────────────────────────────────────────── */
.grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 10px 14px; }
.f { grid-column: span 4; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.f.w2 { grid-column: span 6; }
.f.w3 { grid-column: span 8; }
.f.full { grid-column: span 12; }
@media (max-width: 760px) { .f, .f.w2, .f.w3 { grid-column: span 12; } }

.form-label, label.form-label { font-size: 12.5px; font-weight: 600; color: var(--text); letter-spacing: -0.005em; }
.form-hint { font-size: 11.5px; color: var(--text-hint); line-height: 1.35; }
.form-input, select.form-input, textarea.form-input {
  font-family: inherit; font-size: 14px; color: var(--text); background: var(--surface);
  border: 1px solid var(--border-med); border-radius: 8px; padding: 8px 10px; width: 100%; transition: .15s;
}
.form-input:focus { outline: none; border-color: var(--green-deep); box-shadow: 0 0 0 3px rgba(72,144,65,.12); }
textarea.form-input { resize: vertical; min-height: 58px; line-height: 1.45; }
select.form-input { cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236b6b6b' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 28px; }
.ripple-tag { font-size: 10px; font-weight: 600; color: var(--green-deep); background: var(--green-light); padding: 1px 6px; border-radius: 4px; letter-spacing: .02em; }
.opt-tag { font-size: 10px; font-weight: 600; color: var(--text-hint); background: #f0f0f0; padding: 1px 6px; border-radius: 4px; letter-spacing: .02em; text-transform: uppercase; }
/* An alert that sits directly under the field that caused it. */
.field-alert { margin-top: 5px; font-size: 12.5px; line-height: 1.45; padding: 7px 10px; border-radius: 6px; border-left: 3px solid var(--amber); background: var(--amber-light); }
.field-alert.stop { border-left-color: var(--red); background: var(--red-light); }
.field-alert.info { border-left-color: var(--green); background: var(--green-light); }
.field-alert b { display: block; }

/* Full-day-equivalent column in the comps table */
.eqv { font-variant-numeric: tabular-nums; font-weight: 600; }
.eqv-m { display: block; font-size: 11px; font-weight: 400; color: var(--text-hint); letter-spacing: -0.005em; }
.eqv-x { color: var(--text-hint); font-weight: 400; }
/* The median, showing its arithmetic. */
.median-math { margin-top: 8px; font-size: 12px; line-height: 1.5; color: var(--text-muted); background: var(--gray-light); border-radius: 8px; padding: 8px 11px; }
.median-math b { color: var(--text); font-variant-numeric: tabular-nums; }
.mm-none { color: var(--text-hint); }

/* Chip-style radio options */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.chip span {
  display: inline-block; font-size: 13px; padding: 6px 12px; border-radius: 20px;
  border: 1px solid var(--border-med); background: var(--surface); cursor: pointer; transition: .12s; user-select: none;
}
.chip input:checked + span { background: var(--green-deep); border-color: var(--green-deep); color: #fff; font-weight: 600; }
.chip input:focus-visible + span { box-shadow: 0 0 0 3px rgba(72,144,65,.2); }

/* Checkbox rows */
.ck { display: flex; align-items: flex-start; gap: 9px; padding: 6px 0; font-size: 13.5px; line-height: 1.45; cursor: pointer; }
.ck input { width: 17px; height: 17px; margin-top: 1px; accent-color: var(--green-deep); flex-shrink: 0; cursor: pointer; }
.ck-note { color: var(--text-muted); font-size: 12.5px; }
/* An unchecked acknowledgment is a required item, and looks like one. */
.ck-req { border-left: 3px solid var(--amber); padding-left: 9px; margin-left: -12px; background: var(--amber-light); border-radius: 0 6px 6px 0; }

/* ─── Callouts ────────────────────────────────────────────────────────── */
.callout { border-left: 4px solid var(--green); background: var(--green-light); padding: 11px 14px; border-radius: 0 8px 8px 0; font-size: 13px; line-height: 1.5; margin: 10px 0; }
.callout.warn { border-left-color: var(--amber); background: var(--amber-light); }
.callout.stop { border-left-color: var(--red); background: var(--red-light); }
.callout strong { display: block; margin-bottom: 2px; }

/* ─── Tables ──────────────────────────────────────────────────────────── */
.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl th { background: var(--charcoal); color: #fff; font-weight: 600; font-size: 11.5px; text-align: left; padding: 7px 9px; letter-spacing: .01em; }
.tbl th:first-child { border-radius: 6px 0 0 0; }
.tbl th:last-child { border-radius: 0 6px 0 0; }
.tbl td { border: 1px solid var(--border); padding: 4px 6px; vertical-align: middle; }
.tbl td .form-input { border: none; padding: 4px 4px; font-size: 13px; background: transparent; }
.tbl td .form-input:focus { box-shadow: none; background: var(--green-light); border-radius: 4px; }
.tbl tbody tr:nth-child(even) td { background: #FBFBFA; }
.row-del { background: none; border: none; color: var(--text-hint); cursor: pointer; font-size: 16px; line-height: 1; padding: 2px 6px; }
.row-del:hover { color: var(--red); }

/* ─── Counters ────────────────────────────────────────────────────────── */
.stats { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 15px; min-width: 112px; }
.stat-v { font-size: 21px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.stat-l { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; margin-top: 1px; }
.stat.ok .stat-v { color: var(--green-deep); }
.stat.warn .stat-v { color: var(--amber); }
.stat.bad .stat-v { color: var(--red); }

/* ─── Dashboard list ──────────────────────────────────────────────────── */
.row-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 16px; margin-bottom: 8px; }
.row-item:hover { border-color: var(--border-med); }
.row-name { font-weight: 600; font-size: 14.5px; }
.row-meta { font-size: 12.5px; color: var(--text-muted); }
.badge { font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 20px; background: var(--gray-light); color: var(--text-muted); }
.badge.done { background: var(--green-light); color: var(--green-deep); }
.badge.blocked { background: var(--red-light); color: var(--red); }

/* ─── Doc list ────────────────────────────────────────────────────────── */
/* Through v8 each document was a pair of stacked boxes — the document, and its own
   drop box for a scan of the signed original — squared off where they met. v9 signs
   everything on screen and has one upload area for the whole package, so a document
   row is a single closed box again. */
.doc-item { display: flex; align-items: flex-start; gap: 12px; padding: 9px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); margin-bottom: 7px; }
.doc-n { font-size: 11px; font-weight: 700; color: var(--text-hint); width: 20px; flex-shrink: 0; padding-top: 2px; }
.doc-t { flex: 1; font-size: 13.5px; font-weight: 500; }
.doc-w { font-size: 11.5px; color: var(--text-hint); font-weight: 400; margin-top: 1px; }
.doc-item .btn-sm { flex-shrink: 0; }
.doc-sig { font-size: 11.5px; line-height: 1.45; margin-top: 5px; font-weight: 400; color: var(--text-muted); }
.doc-sig.need { color: var(--amber); }
.doc-sig.need b { color: var(--amber); }
.doc-sig.none b { color: var(--text-muted); }

/* ─── Upload area and executed-copy list ──────────────────────────────── */
/* No longer welded to the bottom of a document row, so it closes on all four
   corners and carries its own top border. */
.doc-up { border: 1px solid var(--border); border-radius: 8px; background: var(--bg); padding: 9px 12px; margin-bottom: 7px; }
.doc-up.has { background: var(--green-light); border-color: rgba(72,144,65,.25); }
.up-head { display: flex; align-items: center; gap: 10px; justify-content: space-between; }
.up-l { font-size: 12px; color: var(--text-muted); }
.up-l b { color: var(--green-deep); }
.up-hint { color: var(--text-hint); font-size: 11px; }
.up-btn { position: relative; overflow: hidden; cursor: pointer; flex-shrink: 0; padding: 5px 11px; font-size: 12px; }
.up-btn input { position: absolute; inset: 0; opacity: 0; cursor: pointer; font-size: 0; width: 100%; height: 100%; }
.up-row { display: flex; align-items: center; gap: 8px; margin-top: 6px; padding: 5px 8px; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; font-size: 12px; }
.up-ico { flex-shrink: 0; }
.up-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.up-meta { color: var(--text-hint); font-size: 11px; flex-shrink: 0; }
.btn-xs { padding: 3px 9px; font-size: 11px; font-weight: 500; background: var(--surface); color: var(--text); border: 1px solid var(--border-med); border-radius: 6px; cursor: pointer; font-family: inherit; flex-shrink: 0; }
.btn-xs:hover { background: var(--gray-light); }

/* ─── Signing instructions ────────────────────────────────────────────── */
.steps-box { border: 1px solid var(--border-med); border-radius: var(--radius); background: var(--surface); padding: 14px 16px; margin-bottom: 16px; }
.steps-t { font-size: 13.5px; font-weight: 600; margin-bottom: 9px; }
ol.steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
ol.steps li { font-size: 12.5px; line-height: 1.5; color: var(--text-muted); }
ol.steps li b { color: var(--text); }
.steps-note { margin-top: 11px; padding-top: 9px; border-top: 1px solid var(--border); font-size: 11.5px; line-height: 1.5; color: var(--text-hint); }

/* ─── Modals / toast ──────────────────────────────────────────────────── */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.42); display: flex; align-items: center; justify-content: center; z-index: 200; padding: 20px; }
.modal-box { background: var(--surface); border-radius: var(--radius-lg); padding: 26px; max-width: 400px; width: 100%; display: flex; flex-direction: column; gap: 10px; align-items: center; text-align: center; max-height: 90vh; overflow-y: auto; }
.modal-logo { width: 44px; height: 44px; background: var(--charcoal); color: #fff; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-family: Georgia, "Times New Roman", serif; font-size: 22px; }
.modal-title { font-size: 18px; font-weight: 600; }
.modal-sub { font-size: 13.5px; color: var(--text-muted); margin-bottom: 6px; }
.modal-box .form-field { width: 100%; text-align: left; display: flex; flex-direction: column; gap: 3px; }
.modal-box .btn-primary, .modal-box .btn-ghost { width: 100%; }
.link-icon, .danger-icon { width: 48px; height: 48px; background: var(--green-light); color: var(--green-deep); border-radius: 12px; display: flex; align-items: center; justify-content: center; }
.danger-icon { background: var(--red-light); }
.link-box { background: var(--gray-light); border-radius: 8px; padding: 10px; font-size: 12px; word-break: break-all; width: 100%; font-family: ui-monospace, monospace; }
.pin-error { color: var(--red); font-size: 13px; }
.toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%) translateY(80px); background: var(--charcoal); color: #fff; padding: 11px 20px; border-radius: 22px; font-size: 13.5px; opacity: 0; transition: .25s; z-index: 300; pointer-events: none; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.footer { text-align: center; padding: 22px; font-size: 12px; color: var(--text-hint); }

/* ─── Print surface (documents) ───────────────────────────────────────── */
.print-surface { display: none; }
.print-surface.active { display: block; background: var(--bg); padding: 20px 0 60px; }
.sheet {
  background: #fff; width: 8.5in; min-height: 11in; margin: 0 auto 18px; padding: 0.6in 0.7in;
  box-shadow: 0 1px 4px rgba(0,0,0,.12); font-size: 10.5pt; line-height: 1.42; color: #2D2D2D;
}
.sheet + .sheet { page-break-before: always; }
.sheet h1 { font-size: 17pt; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 1px; }
.sheet .sub { font-size: 10pt; color: #666; margin-bottom: 7px; }
.sheet .rule { border-bottom: 2px solid var(--green); margin-bottom: 11px; }
.sheet h2 { font-size: 11.5pt; font-weight: 700; color: var(--green-deep); margin: 13px 0 5px; }
.sheet h3 { font-size: 10.5pt; font-weight: 700; margin: 10px 0 4px; }
.sheet p { margin-bottom: 6px; }
.sheet ol, .sheet ul { margin: 0 0 7px 17px; }
.sheet li { margin-bottom: 4px; }
.sheet .brandbar { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px solid var(--green); padding-bottom: 3px; margin-bottom: 12px; font-size: 8pt; }
.sheet .brandbar b { font-size: 9pt; letter-spacing: .06em; }
.sheet .brandbar span { color: #777; }
.sheet table { width: 100%; border-collapse: collapse; font-size: 9pt; margin: 6px 0 9px; }
.sheet th { background: var(--charcoal); color: #fff; text-align: left; padding: 4px 6px; font-weight: 600; font-size: 8.5pt; }
.sheet td { border: 1px solid #ccc; padding: 3px 6px; height: 17px; }
.sheet tr:nth-child(even) td { background: #FAFAFA; }
.sheet .kv { display: flex; flex-wrap: wrap; gap: 3px 22px; margin-bottom: 8px; font-size: 10pt; }
.sheet .kv div { white-space: nowrap; }
.sheet .kv b { font-weight: 600; }
.sheet .box { border-left: 4px solid var(--green); background: #F4FAEE; padding: 7px 11px; margin: 8px 0; font-size: 9.5pt; }
.sheet .box b { display: block; color: var(--green-deep); }
.sheet .fill { border-bottom: 1px solid #999; display: inline-block; min-width: 150px; }
.sheet .sig { display: flex; gap: 34px; margin-top: 26px; }
.sheet .sig div { flex: 1; border-top: 1px solid #333; padding-top: 3px; font-size: 8.5pt; color: #666; }
.sheet .ck-p { margin-bottom: 3px; font-size: 9.5pt; }
.sheet .ck-p:before { content: "☐  "; }
.sheet .foot { margin-top: 14px; border-top: 1px solid #ddd; padding-top: 4px; font-size: 7.5pt; color: #999; display: flex; justify-content: space-between; }
.sheet .internal { background: #FFF8E7; border: 1px dashed #C9A227; padding: 8px 11px; margin-top: 12px; font-size: 8.5pt; }
.sheet .two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px; }
.print-bar { position: sticky; top: var(--chrome-h); z-index: 90; background: var(--surface); border-bottom: 1px solid var(--border); padding: 9px 20px; display: flex; gap: 8px; align-items: center; justify-content: center; flex-wrap: wrap; }

@media print {
  .no-print, .print-bar, .tabbar, .chrome, .rule { display: none !important; }
  body { background: #fff; }
  main { display: none; }
  .print-surface.active { padding: 0; background: #fff; }
  .sheet { box-shadow: none; margin: 0; width: auto; min-height: 0; padding: 0; }
  @page { size: letter; margin: 0.55in 0.6in; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   HOSTED PORTAL SHELL — staff sign-in, client access code, staff dashboard.
   Everything above this line is the standalone app's stylesheet, unchanged.
   ═══════════════════════════════════════════════════════════════════════════ */
.hidden { display: none !important; }

.loginwrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--bg); padding: 20px; }
.loginbox { background: var(--surface); border-radius: var(--radius-lg); padding: 34px 32px; width: 390px; max-width: 100%; box-shadow: 0 4px 22px rgba(0,0,0,.09); text-align: center; border-top: 4px solid var(--green); }
.loginbox .login-logo { height: 46px; width: auto; margin: 0 auto 6px; display: block; }
.loginbox h1 { font-size: 20px; margin: 10px 0 4px; color: var(--charcoal); }
.loginbox .sub { color: var(--text-muted); font-size: 13.5px; margin-bottom: 18px; line-height: 1.5; }
.loginbox label { display: block; text-align: left; font-size: 12.5px; font-weight: 600; color: var(--text-muted); margin: 12px 0 5px; }
.loginbox .form-input { width: 100%; }
.loginbox .btn-primary { width: 100%; margin-top: 18px; padding: 10px 14px; }
.loginbox .hint { color: var(--text-hint); font-size: 12px; line-height: 1.5; margin-top: 16px; }
.pin-input { text-align: center; font-size: 22px !important; letter-spacing: 10px; }
.login-error { background: var(--red-light); color: var(--red); border-radius: 8px; padding: 9px 12px; font-size: 13px; margin-top: 12px; text-align: left; display: none; }

.dash-top { background: var(--surface); border-bottom: 3px solid var(--green); position: sticky; top: 0; z-index: 50; }
.dash-top-row { max-width: 1120px; margin: 0 auto; padding: 12px 20px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.dash-top-row img { height: 38px; width: auto; }
.dash-top-row h1 { font-size: 17px; color: var(--charcoal); font-weight: 700; }
.dash-top-tools { margin-left: auto; display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-muted); flex-wrap: wrap; }
.role-pill { background: var(--charcoal); color: #fff; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; padding: 3px 8px; border-radius: 10px; }

.dashwrap { max-width: 1120px; margin: 0 auto; padding: 26px 20px 90px; }
.dash-head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
.dash-head h2 { font-size: 21px; color: var(--charcoal); }
.dash-head p { color: var(--text-muted); font-size: 13.5px; margin-top: 3px; }
.dash-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.dash-search { width: 240px; max-width: 100%; }
.dash-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 16px; }
.dash-card { background: var(--surface); border-radius: var(--radius); padding: 16px 18px; box-shadow: 0 1px 3px rgba(0,0,0,.07); cursor: pointer; border: 1px solid var(--border); transition: box-shadow .15s, border-color .15s; }
.dash-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,.10); border-color: var(--green); }
.dash-card h3 { font-size: 15.5px; color: var(--charcoal); margin-bottom: 2px; }
.dc-sub { color: var(--text-muted); font-size: 12.5px; }
.dc-meta { color: var(--text-muted); font-size: 12.5px; margin: 8px 0 6px; }
.dc-warn { color: var(--red); font-weight: 600; }
.dc-bar { height: 5px; background: var(--gray-light); border-radius: 3px; overflow: hidden; margin: 8px 0 10px; }
.dc-bar span { display: block; height: 100%; background: var(--green-deep); }
.dc-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.dc-btns { display: flex; gap: 5px; flex-wrap: wrap; }
.btn-xs.danger { color: var(--red); border-color: rgba(185,28,28,.35); }
.btn-xs.danger:hover { background: var(--red-light); }
.dash-empty { color: var(--text-muted); font-size: 13.5px; padding: 40px 0; text-align: center; grid-column: 1 / -1; }

.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; z-index: 400; padding: 20px; }
.modal-box { background: var(--surface); border-radius: var(--radius-lg); padding: 24px 24px 20px; width: 440px; max-width: 100%; max-height: 92vh; overflow: auto; box-shadow: 0 8px 30px rgba(0,0,0,.25); }
.modal-box h2 { font-size: 17px; color: var(--charcoal); margin-bottom: 4px; }
.modal-box .sub { color: var(--text-muted); font-size: 13px; margin-bottom: 8px; line-height: 1.5; }
.modal-box label { display: block; font-size: 12.5px; font-weight: 600; color: var(--text-muted); margin: 12px 0 5px; }
.modal-box .form-input { width: 100%; }
.modal-box .btn-row { margin-top: 18px; }
.modal-box .opt { font-weight: 400; color: var(--text-hint); }
.credbox { background: var(--green-light); border-radius: 8px; padding: 12px 14px; font-size: 13px; margin-top: 14px; word-break: break-all; line-height: 1.6; }
.credbox b { color: var(--green-deep); }

.remote-note { position: fixed; top: 10px; right: 10px; z-index: 350; background: var(--amber-light); color: var(--amber); border: 1px solid rgba(186,117,23,.3); border-radius: 8px; padding: 8px 12px; font-size: 12.5px; box-shadow: 0 2px 8px rgba(0,0,0,.08); }

@media (max-width: 560px) {
  .dash-search { width: 100%; }
  .dash-actions { width: 100%; }
}
@media print {
  #loginScreen, #pinScreen, #dashScreen, .modal-overlay, .remote-note { display: none !important; }
}