/* KAEDIX Platform - UX 2.0.

   Tokens from the KAEDIX brand system; the visual language matches the Hub
   (docs/design, direction 1d with the 1b icon set): DM Sans throughout, an
   off-white ground, charcoal chrome, opaque cards with hairline borders, and
   Tiger reserved for the primary action, the required marker and focus.
   Nothing else is orange.

   Mobile-first on purpose. The Streamlit portal met the phone by overriding
   a desktop DOM after the fact, which is how it shipped 13.5px inputs that
   made iOS Safari zoom on every field. Here the phone sizes ARE the base
   rules: 16px inputs, 44px controls, and desktop is the media query. */

:root {
  --kdx-tiger:#FF671F; --kdx-tiger-200:#FFC4A3; --kdx-tiger-600:#E85A15; --kdx-tiger-700:#C94A0E;
  --kdx-navy:#0A294A; --kdx-charcoal:#2D2D2D; --kdx-iron:#454545; --kdx-graphite:#666666;
  --kdx-ink-50:#FAFAF8; --kdx-ink-100:#F2F1EE; --kdx-ink-200:#E5E3DE;
  --kdx-ink-300:#C9C6BF; --kdx-ink-400:#9A978F; --kdx-white:#FFFFFF;

  /* Semantic layer. Only these are redefined for dark mode, so every rule
     below is written once. */
  --bg:var(--kdx-ink-50); --card:var(--kdx-white);
  --border:var(--kdx-ink-200); --border-strong:var(--kdx-ink-300);
  --fg:var(--kdx-charcoal); --fg-2:var(--kdx-graphite); --fg-3:var(--kdx-ink-400);
  --field:var(--kdx-white); --field-locked:var(--kdx-ink-100);
  --chrome:var(--kdx-charcoal); --chrome-fg:var(--kdx-white);
  --chrome-fg-2:rgba(255,255,255,.62); --chrome-line:rgba(255,255,255,.14);
  --success:#0F5933; --error:#C2262E; --warn:#8A5A14;
  --success-bg:rgba(15,89,51,.07); --error-bg:rgba(194,38,46,.06);
  --warn-bg:rgba(222,153,66,.1); --info-bg:var(--kdx-ink-100);

  --font-sans:'DM Sans',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;
  --font-mono:ui-monospace,'SF Mono',Menlo,monospace;
  --radius:4px; --radius-card:8px;
  --ease:cubic-bezier(.2,.6,.2,1);
  --tap:44px;
}

/* The portal follows the device. There is no in-app toggle, by design: the
   Hub does the same and the two should never disagree on a phone. */
@media (prefers-color-scheme: dark) {
  :root {
    --bg:#1A1A1A; --card:#242424;
    --border:#333331; --border-strong:#454545;
    --fg:#FFFFFF; --fg-2:#A8A5A0; --fg-3:#7C7A76;
    --field:#1F1F1F; --field-locked:#2A2A28;
    --chrome:#242424; --chrome-line:rgba(255,255,255,.1);
    --success:#4CAF7D; --error:#F08A8F; --warn:#E0A758;
    --success-bg:rgba(76,175,125,.1); --error-bg:rgba(240,138,143,.09);
    --warn-bg:rgba(224,167,88,.1); --info-bg:#2A2A28;
  }
}

*,*::before,*::after { box-sizing:border-box; }

body {
  margin:0; background:var(--bg); color:var(--fg);
  font-family:var(--font-sans); font-size:16px; line-height:1.5;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

/* The insets are load-bearing: base.html sets viewport-fit=cover and this
   installs as a standalone PWA, so the ends of the page reach the hardware. */
.wrap {
  max-width:960px; margin:0 auto;
  padding: max(env(safe-area-inset-top), 16px) max(22px, env(safe-area-inset-left))
           calc(28px + env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-right));
}

a { color:var(--fg); }
a:hover { color:var(--kdx-tiger); }

/* ── Header ─────────────────────────────────────────────
   The same header the Hub draws: a spaced kicker, then a serif title with
   a short Tiger rule. The nav is plain text at the kicker's right. */
.top { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:4px 16px; margin:24px 0 10px; }
.kicker { margin:0; font-size:10px; letter-spacing:.35em; text-transform:uppercase; color:var(--fg-2); white-space:nowrap; }
.topnav { display:flex; gap:18px; font-size:13px; margin-left:auto; white-space:nowrap; }
.topnav a { color:var(--fg-2); text-decoration:none; min-height:var(--tap); display:inline-flex; align-items:center; }
.topnav a:hover { color:var(--kdx-tiger); }
.topnav a[aria-current="page"] { color:var(--fg); font-weight:700; }
h1.page::after { content:""; display:block; width:32px; height:2px; margin:12px 0 10px; background:var(--kdx-tiger); }

/* ── Tiles (document picker) ─────────────────────────────
   Hub tiles, carrying a description line because a form is not an app. */
.tile-grid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; }
.tile {
  position:relative; display:flex; flex-direction:column; justify-content:space-between; gap:14px;
  min-height:150px; padding:18px; background:var(--card); border:1px solid var(--border);
  border-radius:6px; color:var(--fg); text-decoration:none;
  transition:box-shadow 200ms var(--ease), background 120ms var(--ease);
}
.tile:hover { box-shadow:0 12px 32px rgba(45,45,45,.08), 0 4px 10px rgba(45,45,45,.05); color:var(--fg); }
.tile:active { background:var(--info-bg); }
.tile:focus-visible { outline:2px solid var(--kdx-tiger); outline-offset:2px; }
.tile-icon { width:44px; height:44px; flex:none; }
.tile-icon .accent { stroke:var(--kdx-tiger); }
.tile-text { display:flex; flex-direction:column; gap:3px; }
.tile-label { font-weight:700; font-size:14px; line-height:1.3; }
.tile-desc { font-size:12.5px; color:var(--fg-2); line-height:1.4; text-wrap:pretty; }
.tile-soon { cursor:default; }
.tile-soon:hover { box-shadow:none; }
.tile-soon .tile-icon, .tile-soon .tile-label, .tile-soon .tile-desc { opacity:.38; }
.tile-badge {
  position:absolute; top:14px; right:14px; font-size:9px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--fg-2); border:1px solid var(--border); border-radius:999px; padding:3px 8px;
}
@media (min-width:700px) {
  .top { margin-top:40px; }
  .tile-grid { grid-template-columns:repeat(auto-fill, minmax(200px,1fr)); gap:16px; }
  .tile { min-height:190px; padding:24px; }
  .tile-icon { width:56px; height:56px; }
  .tile-label { font-size:16px; }
  .tile-desc { font-size:13px; }
}

/* ── Type ──────────────────────────────────────────────── */
.eyebrow {
  font-size:10px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--fg-3); margin:26px 2px 10px;
}
.eyebrow-sub { color:var(--fg-2); letter-spacing:.12em; margin:12px 2px 4px; }
.sub-hint { color:var(--fg-3); font-size:13px; font-style:italic; margin:0 2px 10px; max-width:60ch; text-wrap:pretty; }
h1.page { font-family:'DM Serif Display',Georgia,serif; font-weight:400; font-size:28px; line-height:1.2; letter-spacing:0; margin:0 0 6px; text-wrap:pretty; }
p.lede { color:var(--fg-2); font-size:14px; margin:0; max-width:60ch; text-wrap:pretty; }

/* ── Cards / rows ──────────────────────────────────────── */
.card {
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius-card); padding:18px; margin-bottom:14px;
}

.doc-card {
  display:flex; align-items:center; gap:14px; min-height:var(--tap);
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius-card); padding:14px 16px; margin-bottom:8px;
  color:inherit; text-decoration:none;
  transition:border-color 200ms var(--ease), background 120ms var(--ease);
}
.doc-card:hover { border-color:var(--border-strong); color:inherit; }
.doc-card:active { background:var(--info-bg); }
.doc-card:focus-visible { outline:2px solid var(--kdx-tiger); outline-offset:2px; }
.doc-card[aria-disabled="true"] { background:transparent; pointer-events:none; }
.doc-mark {
  width:36px; height:36px; flex:none; border-radius:var(--radius);
  background:var(--info-bg); color:var(--fg-2);
  font-size:14px; font-weight:700; letter-spacing:.02em;
  display:flex; align-items:center; justify-content:center;
}
.doc-card[aria-disabled="true"] .doc-mark { color:var(--fg-3); }
/* These are spans inside a span, so they need to be told to stack; left
   inline they read as one run-on sentence. */
.doc-name { display:block; font-weight:600; font-size:15px; line-height:1.35; letter-spacing:-.01em; }
.doc-desc { display:block; font-size:13px; color:var(--fg-2); margin-top:3px; text-wrap:pretty; }
.doc-card > span:not([class]) { min-width:0; flex:1 1 auto; }
.doc-chev { margin-left:auto; color:var(--fg-3); font-size:20px; line-height:1; }
/* An unavailable type says so in a chip rather than by looking broken. */
.doc-pill {
  margin-left:auto; flex:none; font-size:9.5px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--fg-3);
  border:1px solid var(--border-strong); border-radius:999px;
  padding:4px 9px; white-space:nowrap;
}

/* ── Form sections ─────────────────────────────────────── */
/* Numbered groups: a change order runs to seven sections, and an operator
   scrolling one on a phone needs to know where they are in it. */
.group {
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius-card); margin-bottom:12px;
}
.group-head {
  display:flex; align-items:baseline; gap:10px;
  padding:14px 18px; border-bottom:1px solid var(--border);
}
.group-n { font-size:11px; font-weight:700; color:var(--fg-3); font-variant-numeric:tabular-nums; }
.group-t { font-size:13px; font-weight:700; letter-spacing:.02em; }
.group-body { padding:16px 18px 4px; }

/* ── Fields ────────────────────────────────────────────── */
.field { margin-bottom:16px; }
.field label.lbl {
  display:block; font-size:11px; font-weight:700; letter-spacing:.07em;
  text-transform:uppercase; color:var(--fg-2); margin-bottom:6px;
}
.field .help { font-size:12.5px; color:var(--fg-2); margin-top:6px; text-wrap:pretty; }
.req { color:var(--kdx-tiger); margin-left:3px; }

input[type=text],input[type=email],input[type=tel],input[type=date],
input[type=number],input[type=search],select,textarea {
  width:100%; min-height:var(--tap);
  border:1px solid var(--border-strong); border-radius:var(--radius);
  background:var(--field); color:var(--fg);
  font-family:var(--font-sans); font-size:16px; padding:10px 12px;
}
select { appearance:none; -webkit-appearance:none; padding-right:36px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23444' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 18px center; }
textarea { min-height:92px; resize:vertical; line-height:1.5; }
input:focus,select:focus,textarea:focus {
  outline:none; border-color:var(--kdx-tiger);
  box-shadow:0 0 0 2px rgba(255,103,31,.16);
}
input[readonly] { background:var(--field-locked); color:var(--fg-2); }
input::placeholder,textarea::placeholder { color:var(--fg-3); }
input[type=file] {
  border:1px dashed var(--border-strong); border-radius:var(--radius);
  background:transparent; color:var(--fg); font-size:14px; padding:12px;
}
.money-wrap { position:relative; }
.money-wrap span { position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--fg-3); }
.money-wrap input { padding-left:26px; font-variant-numeric:tabular-nums; }
.offer-form input.auto { background:var(--field-locked); color:var(--fg-2); cursor:default; }
.days-wrap { display:flex; align-items:center; gap:8px; }
.days-wrap input { width:5.5rem; font-variant-numeric:tabular-nums; }
.days-wrap span { color:var(--fg-2); }
.parcel { margin:10px 0 18px; padding:14px 16px; background:var(--field-locked); border-radius:var(--radius); }
.parcel dl { display:grid; grid-template-columns:max-content 1fr; gap:4px 12px; margin:0 0 10px; font-size:13px; }
.parcel dt { color:var(--fg-3); }
.parcel dd { margin:0; color:var(--fg-2); }
.agent-card { cursor:pointer; margin:10px 0 18px; padding:14px 16px; background:var(--field-locked); border-radius:var(--radius); font-size:14px; }
.agent-card span { display:block; color:var(--fg-2); font-size:13px; margin-top:2px; }
@media (max-width:1099px) { .offer-preview { display:none; } }

/* The server is still what rejects a bad form; this only puts the reason
   next to the field it belongs to instead of only at the top. */
.field.bad input, .field.bad select, .field.bad textarea {
  border-color:var(--error); background:var(--error-bg);
}
.field-err { font-size:12.5px; font-weight:600; color:var(--error); margin-top:6px; }

/* Trade (CSI): the two manual boxes, revealed under the select when the trade
   is not on the property's list. Indented and ruled so they read as belonging
   to the select above rather than as two more fields in the section. */
/* The manual boxes, revealed under the trade row when the trade is not on the
   property's list. Ruled so they read as belonging to the picker above rather
   than as two more fields in the section. */
.trade-manual { margin-top:2px; padding-left:12px; border-left:2px solid var(--border-strong); }
.trade-manual .field:last-child { margin-bottom:0; }

/* Trade search: a text box over the hidden select, with the matches dropped
   under it. The manual row is set apart so it reads as the way out, not as
   one more trade. */
.trade-combo { position:relative; }
.trade-list {
  position:absolute; z-index:20; left:0; right:0; top:calc(100% + 4px);
  max-height:280px; overflow-y:auto; margin:0; padding:4px 0; list-style:none;
  background:var(--card); border:1px solid var(--border-strong); border-radius:var(--radius);
  box-shadow:0 6px 20px rgba(0,0,0,.12);
}
.trade-list li { padding:9px 12px; font-size:14px; cursor:pointer; }
.trade-list li.on, .trade-list li:hover { background:var(--field-locked); }
.trade-list .trade-manual-row { border-top:1px solid var(--border); font-weight:600; color:var(--kdx-tiger); }

.check {
  display:flex; align-items:center; gap:11px; min-height:var(--tap);
  font-size:15px; cursor:pointer;
}
.check input { width:21px; height:21px; accent-color:var(--kdx-tiger); flex:none; margin:0; }

/* ── Buttons ───────────────────────────────────────────── */
/* Send and Download live in one bar. Download was a corner link before,
   which hid the only way to get a document out without sending it. */
.actions {
  display:flex; flex-direction:column; gap:10px; margin-top:18px; padding:16px;
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius-card);
}
.actions-hint { font-size:12.5px; color:var(--fg-2); order:3; text-align:center; }

.btn-primary, .btn-quiet {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border-radius:var(--radius); font-family:var(--font-sans);
  letter-spacing:.01em; text-decoration:none; cursor:pointer;
  border:1px solid transparent;
  transition:background 120ms var(--ease), border-color 120ms var(--ease);
}
.btn-primary {
  width:100%; min-height:50px; padding:0 20px;
  background:var(--kdx-tiger); color:var(--kdx-white);
  font-size:15px; font-weight:700;
}
.btn-primary:hover { background:var(--kdx-tiger-600); color:var(--kdx-white); }
.btn-primary:active { background:var(--kdx-tiger-700); }
.btn-primary[disabled] { background:var(--border-strong); cursor:default; }

.btn-quiet {
  min-height:var(--tap); padding:0 16px;
  background:transparent; border-color:var(--border-strong); color:var(--fg);
  font-size:14px; font-weight:500;
}
.btn-quiet:hover { border-color:var(--fg-3); color:var(--fg); }

@media (min-width:700px) {
  .actions { flex-direction:row; align-items:center; justify-content:flex-end; }
  .actions .btn-primary { order:2; width:auto; min-height:46px; font-size:14px; }
  .actions .btn-quiet { order:1; }
  .actions-hint { order:0; margin-right:auto; text-align:left; }
}

/* ── Filter pills ──────────────────────────────────────── */
.pills { display:flex; flex-wrap:wrap; gap:8px; margin:22px 0 0; }
.pill {
  display:inline-flex; align-items:center; gap:7px; min-height:34px;
  padding:0 14px; border-radius:999px; border:1px solid var(--border-strong);
  color:var(--fg-2); font-size:13px; font-weight:600; text-decoration:none;
}
.pill:hover { color:var(--fg); border-color:var(--fg-3); }
.pill.on { background:var(--kdx-tiger); border-color:var(--kdx-tiger); color:#fff; }
.pill-n { font-size:11px; font-weight:700; opacity:.7; }

/* ── Status ────────────────────────────────────────────── */
.chip {
  display:inline-flex; align-items:center; gap:6px; border-radius:999px;
  padding:4px 10px 4px 8px; font-size:10.5px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; white-space:nowrap;
  border:1px solid var(--border);
}
.chip::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
.chip.awaiting { background:var(--warn-bg);    color:var(--warn); }
.chip.signed   { background:var(--success-bg); color:var(--success); }
.chip.draft    { background:var(--info-bg);    color:var(--fg-2); }
.chip.error    { background:var(--error-bg);   color:var(--error); }
/* A change request is done when it is submitted: nobody signs it. */
.chip.submitted { background:var(--success-bg); color:var(--success); }
.resend { display:flex; flex-wrap:wrap; gap:4px 14px; margin-top:6px; }
.resend form { display:inline; }
.btn-link { background:none; border:0; padding:0; font:inherit; font-size:12.5px; color:var(--kdx-tiger); cursor:pointer; text-decoration:underline; text-underline-offset:2px; min-height:var(--tap); }
a.sent-title { text-decoration:none; color:inherit; }
a.sent-title:hover { color:var(--kdx-tiger); }
.acct { font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--fg-3); border:1px solid var(--border); border-radius:999px; padding:2px 8px; }
.acct.sandbox { border-style:dashed; }

.note {
  border-radius:var(--radius-card); border:1px solid var(--border);
  padding:14px 16px; font-size:14px; margin-bottom:14px; text-wrap:pretty;
}
.note.error   { background:var(--error-bg);   border-color:var(--error);   color:var(--error); }
.note.success { background:var(--success-bg); border-color:var(--success); color:var(--success); }
.note.warn    { background:var(--warn-bg);    border-color:rgba(222,153,66,.35); color:var(--warn); }
.note.info    { background:var(--info-bg); color:var(--fg-2); }
.note ul { margin:8px 0 0; padding-left:20px; }
.note li { margin-top:3px; }
.note code { font-family:var(--font-mono); font-size:12.5px; }

/* ── Sent list ─────────────────────────────────────────── */
.sent-row {
  display:flex; align-items:center; gap:12px; min-height:var(--tap);
  padding:15px 2px; border-bottom:1px solid var(--border);
  color:inherit; text-decoration:none;
}
.sent-row:last-child { border-bottom:none; }
.sent-row:hover { color:inherit; }
/* Spans again: without display:block the title and the counterparty run
   together into one sentence. */
.sent-row > span:not([class]) { min-width:0; flex:1 1 auto; }
.sent-title { display:block; font-size:14px; font-weight:600; line-height:1.35; overflow-wrap:anywhere; }
.sent-sub { display:block; font-size:12.5px; color:var(--fg-2); margin-top:3px; }
.sent-meta { margin-left:auto; text-align:right; flex:none; }
.sent-date { display:block; font-family:var(--font-mono); font-size:11px;
             color:var(--fg-3); margin-top:6px; white-space:nowrap; }
@media (max-width:699px) {
  /* Badges under the title, not over it. */
  .sent-row { flex-wrap:wrap; }
  .sent-row > span:not([class]) { flex-basis:100%; }
  .sent-meta { margin-left:0; text-align:left; display:flex; align-items:center; gap:8px; }
  .sent-date { margin-top:0; }
}

.result-file { font-family:var(--font-mono); font-size:12px; color:var(--fg-2);
               margin:12px 0 0; word-break:break-all; }

.footnote { text-align:center; color:var(--fg-3); font-size:11.5px;
            letter-spacing:.04em; margin:24px 0 8px; }
.signed-in { display:inline-flex; align-items:center; gap:7px;
             font-size:12.5px; font-weight:600; color:var(--success); }
.signed-in::before { content:""; width:6px; height:6px; border-radius:50%;
                     background:var(--success); }

/* Typeahead */
.combo { position:relative; }
.combo datalist { display:none; }

/* ── Desktop ───────────────────────────────────────────── */
@media (min-width:700px) {
  .wrap { padding:28px 24px 56px; }
  h1.page { font-size:40px; }
  .row { display:grid; grid-template-columns:1fr 1fr; gap:0 16px; }
  .row > .field { min-width:0; }
  input[type=text],input[type=email],input[type=tel],input[type=date],
  input[type=number],input[type=search],select,textarea { font-size:14px; min-height:40px; }
  .check { min-height:36px; font-size:14px; }
  .check input { width:18px; height:18px; }
}

@media (prefers-reduced-motion:reduce) { * { transition:none !important; } }

/* --- Sign in --------------------------------------------------------------
   Measured off the Punch Walk sign-in screenshot (402pt wide iPhone frame,
   1206px at 3x). Values are points from that frame, so the page is the same
   screen, not a resemblance. Dark ground in both themes, like Punch. */
body:has(.login) { background:var(--bg); color:var(--fg); }
.login, .login * { font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Arial,sans-serif; }
body:has(.login) .wrap { padding:0; max-width:none; }
.login {
  width:100%; max-width:402px; margin:0 auto; min-height:100dvh;
  padding:calc(46px + env(safe-area-inset-top)) 25px 40px;
  display:flex; flex-direction:column;
}
.login-eyebrow {
  font-size:12px; line-height:14px; font-weight:700; letter-spacing:.3em;
  text-transform:uppercase; color:#EE6A2E; margin:0;
}
.login-mark { display:block; width:132px; height:132px; margin:102px auto 0; }
.login-title { font-size:28px; line-height:34px; font-weight:700; letter-spacing:-.01em; margin:105px 0 16px; color:var(--fg); }
.login-card {
  display:flex; align-items:center; gap:14px; height:74px; padding:0 15px;
  border:1px solid var(--border-strong); border-radius:8px; color:var(--fg); text-decoration:none;
  background:transparent; transition:background .15s var(--ease);
}
.login-card + .login-card { margin-top:13px; }
.login-card:hover, .login-card:active { background:var(--info-bg); color:var(--fg); text-decoration:none; }
.login-ms { width:26px; height:26px; flex:none; }
.login-card-text { display:flex; flex-direction:column; gap:1px; }
.login-card-title { font-size:18px; line-height:22px; font-weight:600; letter-spacing:-.01em; }
.login-card-sub { font-size:15px; line-height:19px; color:var(--fg-2); }

/* Closeout thumbnails. Small enough that a 200-row page stays scannable,
   big enough to tell a cracked tile from a clean one; the full frame is one
   click away. */
.shots { display: flex; gap: 4px; align-items: center; }
.shots img {
  width: 64px; height: 64px; object-fit: cover;
  border-radius: 4px; border: 1px solid rgba(128,128,128,.35);
  background: rgba(128,128,128,.12);
}
.shots img.proof { border-color: rgba(45,160,90,.55); }
@media (max-width: 640px) { .shots img { width: 52px; height: 52px; } }

/* Closeout filter row: four equal columns that collapse on a phone. Each
   label owns its column so the search box lines up with the selects instead
   of sitting inline beside its own text. */
#closeout-filters .row {
  display: grid; gap: 12px 16px; align-items: end;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
#closeout-filters label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }

/* Attachment list: the picked files, in the order they will be appended. */
.filepick { display: flex; flex-direction: column; gap: 8px; }
.filelist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.filelist li {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px; border: 1px solid var(--border-strong);
  border-radius: var(--radius); background: var(--field);
}
.filename { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filesize { color: var(--fg-2); font-size: 13px; flex: none; }
.fileacts { display: flex; gap: 4px; flex: none; }
.fileact {
  width: 30px; min-height: 30px; padding: 0; line-height: 1;
  border: 1px solid var(--border-strong); border-radius: var(--radius);
  background: transparent; color: var(--fg); cursor: pointer; font-size: 14px;
}
.fileact:hover:not(:disabled) { border-color: var(--kdx-tiger); color: var(--kdx-tiger); }
.fileact:disabled { opacity: .3; cursor: default; }
.filehint { margin: 0; color: var(--fg-2); font-size: 13px; }

/* ── Properties (map + cards) ─────────────────────────────── */
.prop-map { height: 320px; border-radius: var(--radius-card); border: 1px solid var(--border); margin: 16px 0; z-index: 0; }
.prop-map-single { height: 220px; }
.prop-card-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: 8px; }
.prop-title { font-size: 15px; margin: 0; }
.prop-title a { text-decoration: none; }
.prop-sub { color: var(--fg-2); font-size: 13px; }
.prop-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px 16px; margin: 0; }
.prop-grid dt { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-3); margin: 0; }
.prop-grid dd { margin: 2px 0 0; font-size: 14px; }
.prop-grid-wide { grid-column: 1 / -1; }
@media (min-width: 700px) {
  .prop-grid { grid-template-columns: repeat(4, minmax(0,1fr)); }
}


/* A draft row carries its own actions. They are a sibling of the row rather
   than a child, because the row is a link and a link cannot contain links --
   and a flex sibling rather than an absolute overlay, which is what the first
   cut was: it landed on top of the status chip and the date. */
.sent-row-wrap {
  display:flex; align-items:center; gap:18px;
  border-bottom:1px solid var(--border);
}
.sent-row-wrap:last-child { border-bottom:none; }
/* The row keeps its own padding and gives up its border to the wrapper, so
   one divider spans the full width instead of stopping short of the actions. */
.sent-row-wrap > .sent-row { flex:1 1 auto; min-width:0; border-bottom:none; }
.sent-actions { flex:none; display:flex; gap:14px; padding-left:2px; }
.sent-actions .btn-link { min-height:0; }

/* Narrow: the actions drop under the row rather than squeezing the date. */
@media (max-width:699px) {
  .sent-row-wrap { flex-wrap:wrap; gap:0; }
  .sent-row-wrap > .sent-row { flex:1 1 100%; padding-bottom:6px; }
  .sent-actions { flex:1 1 100%; padding:0 2px 14px; }
}

/* --- Project Schedule (issue #27) -------------------------------------
   One card per property. The card has to answer "how far along, and what
   is late" before it answers anything else, so the percentage and the
   overdue count carry the weight and the task lists stay quiet underneath.
   Lists are capped at six in the template: KHP008 alone runs 22 overdue,
   and a page that prints all of them is a wall nobody reads. */

.sched-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 18px 20px 16px;
  margin-bottom: 14px;
}

.sched-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.sched-title {
  font-family: var(--font-sans);
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0;
  letter-spacing: .01em;
}

.sched-addr {
  margin: 1px 0 0;
  color: var(--fg-2);
  font-size: .85rem;
}

.sched-pct { text-align: right; line-height: 1.05; flex: none; }

.sched-pct-n {
  display: block;
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--kdx-navy);
  font-variant-numeric: tabular-nums;
}

.sched-pct-n small { font-size: .8rem; font-weight: 500; color: var(--fg-3); }

.sched-pct-l {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--fg-3);
}

.sched-bar {
  height: 4px;
  border-radius: 2px;
  background: var(--kdx-ink-200);
  margin: 12px 0 10px;
  overflow: hidden;
}

.sched-bar > span {
  display: block;
  height: 100%;
  background: var(--kdx-tiger);
  border-radius: 2px;
}

.sched-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  font-size: .78rem;
  color: var(--fg-2);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.sched-span { font-variant-numeric: tabular-nums; }

.sched-stat {
  background: var(--kdx-ink-100);
  border-radius: 999px;
  padding: 2px 9px;
  color: var(--fg-2);
  white-space: nowrap;
}

/* Late is the one thing on this page worth colouring. */
.sched-stat.is-late { background: var(--error-bg); color: var(--error); font-weight: 500; }
.sched-stat.is-stale { background: var(--warn-bg); color: var(--warn); }

.sched-cols {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  padding-top: 13px;
}

.sched-col-h {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--fg-3);
  font-weight: 600;
  margin: 0 0 7px;
}

.sched-list { list-style: none; margin: 0; padding: 0; }

.sched-list li {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 10px;
  padding: 5px 0;
  border-top: 1px solid var(--kdx-ink-100);
  font-size: .82rem;
  line-height: 1.3;
}

.sched-list li:first-child { border-top: 0; }

.sched-task { min-width: 0; overflow-wrap: anywhere; }

.sched-trade {
  grid-column: 1;
  font-size: .72rem;
  color: var(--fg-3);
}

.sched-due {
  grid-row: 1;
  grid-column: 2;
  color: var(--fg-3);
  font-size: .75rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.sched-due.is-late { color: var(--error); }

.sched-empty {
  margin: 7px 0 0;
  font-size: .76rem;
  color: var(--fg-3);
}

/* The cap keeps a card readable; this is what stops it hiding anything. */
.sched-more {
  margin-top: 7px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: .76rem;
  color: var(--kdx-tiger-600);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  min-height: var(--tap);
  line-height: 1.4;
}

.sched-more:hover { color: var(--kdx-tiger-700); }
.sched-more:focus-visible { outline: 2px solid var(--kdx-tiger); outline-offset: 2px; }

.sched-col-n {
  display: inline-block;
  background: var(--kdx-ink-100);
  color: var(--fg-2);
  border-radius: 999px;
  padding: 0 6px;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: 0;
  margin-left: 3px;
  vertical-align: baseline;
}

.sched-stat.is-done { background: var(--success-bg); color: var(--success); }

/* Full list. The body scrolls, not the page behind it, so a 400-row Done
   list is browsable without losing the card you opened it from. */
.sched-dialog {
  width: min(560px, calc(100vw - 32px));
  max-height: min(75vh, 680px);
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-card);
  background: var(--card);
  color: var(--fg);
  overflow: hidden;
}

.sched-dialog::backdrop { background: rgba(10, 41, 74, .38); }

.sched-dialog-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--card);
}

.sched-dialog-kicker {
  margin: 0;
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--fg-3);
}

.sched-dialog-title { margin: 2px 0 0; font-size: 1rem; font-weight: 600; }

.sched-dialog-x {
  border: 0;
  background: none;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--fg-3);
  cursor: pointer;
  padding: 0 4px;
  min-width: var(--tap);
  min-height: var(--tap);
}

.sched-dialog-x:hover { color: var(--fg); }
.sched-dialog-x:focus-visible { outline: 2px solid var(--kdx-tiger); outline-offset: 2px; }

.sched-dialog-body {
  overflow-y: auto;
  max-height: calc(min(75vh, 680px) - 62px);
  padding: 4px 16px 14px;
  overscroll-behavior: contain;
}

@media (max-width: 1040px) {
  .sched-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .sched-cols { grid-template-columns: 1fr; gap: 16px; }
}

/* --- Offer Writer: the form beside a live preview of the contract it fills. */
.wrap:has(.offer-split) { max-width:1440px; }
.offer-split { display:grid; grid-template-columns:minmax(0,1fr); gap:24px; align-items:start; }
@media (min-width:1100px) { .offer-split { grid-template-columns:minmax(0,5fr) minmax(0,6fr); } }
.offer-preview { position:sticky; top:16px; border:1px solid var(--border); border-radius:12px; overflow:hidden;
  background:var(--card, #fff); }
.preview-head { display:flex; justify-content:space-between; gap:12px; padding:10px 14px; font-size:13px;
  border-bottom:1px solid var(--border); color:var(--fg-2); }
.preview-state { color:var(--fg-3); text-align:right; }
.offer-preview iframe { display:block; width:100%; height:calc(100vh - 90px); min-height:520px; border:0; background:#fff; }
@media (max-width:1099px) { .offer-preview { position:static; } .offer-preview iframe { height:70vh; } }
.row-3 { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px; }
@media (max-width:640px) { .row-3 { grid-template-columns:1fr; gap:0; } }
.group-note { margin-left:auto; color:var(--fg-3); font-size:12px; text-align:right; }
.check-wrap { display:flex; flex-wrap:wrap; gap:4px 20px; margin-bottom:8px; }
.suggest-wrap { position:relative; }
.suggest { position:absolute; z-index:5; left:0; right:0; margin:4px 0 0; padding:4px 0; list-style:none;
  background:var(--card, #fff); border:1px solid var(--border-strong); border-radius:10px;
  box-shadow:0 8px 24px rgba(0,0,0,.12); max-height:300px; overflow:auto; }
/* Address and listing-agent pick lists share one look: bold name, grey detail, two columns. */
.suggest li, .menu-list li { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px;
  padding:9px 12px; cursor:pointer; font-size:14px; line-height:1.3; }
.suggest li span, .menu-list li span { color:var(--fg-3); margin-left:0; overflow-wrap:anywhere; }
.suggest li strong, .menu-list li strong { color:var(--fg); font-weight:600; overflow-wrap:anywhere; }
.suggest li:hover, .menu-list li:hover, .menu-list li:focus { background:var(--border); }
.facts { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px 16px; margin:12px 0 4px; }
.facts div.wide { grid-column:1 / -1; }
.facts dt { font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--fg-3); margin:0; }
.facts dd { margin:2px 0 0; font-size:14px; color:var(--fg); overflow-wrap:anywhere; }
.terms { margin:0 0 8px; padding-left:18px; font-size:13px; line-height:1.5; color:var(--fg); }
.terms li { margin:3px 0; }
.terms li.quiet { color:var(--fg-3); }
.notify-line { font-size:13px; color:var(--fg-2); margin:16px 2px 0; }
.offer-more { margin-top:8px; }
.offer-more > summary { cursor:pointer; color:var(--fg-2); font-size:14px; padding:6px 0; }
.offer-more > summary:hover { color:var(--fg); }
.offer-more[open] > summary { margin-bottom:10px; }
.row-inline { display:flex; gap:8px; }
.row-pair { display:grid; grid-template-columns:1fr 1fr; gap:0 16px; }
.row-inline input { flex:1; min-width:0; }

/* Offer Writer, after the 2026-10-09 interface review. Same font and palette. */
body:has(.offer-split) .top { min-width:0; }
body:has(.offer-split) .topnav { overflow-x:auto; min-width:0; scrollbar-width:none; }
.offer-form .days-wrap { position:relative; display:block; }
.offer-form .days-wrap input { width:100%; padding-right:52px; }
.offer-form .days-wrap span { position:absolute; right:12px; top:50%; transform:translateY(-50%); color:var(--fg-3); pointer-events:none; }
.offer-form .check-wrap { display:grid; grid-template-columns:1fr; gap:0; }
.offer-form .check-wrap .check { min-height:var(--tap); border-bottom:1px solid var(--border); margin:0; }
.offer-form .check-wrap .check:last-child { border-bottom:0; }
.offer-form .offer-more > summary { padding:12px 0; }
.term-rows { border:1px solid var(--border); border-radius:var(--radius); }
.term-row { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:var(--tap);
  padding:8px 12px; border-bottom:1px solid var(--border); font-size:14px; cursor:pointer; }
.term-row:last-child { border-bottom:0; }
.term-ref { flex:none; width:1.75rem; font:600 11px/1 var(--font-mono); color:var(--fg-3); }
.term-txt { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.term-note { font-size:12px; color:var(--fg-3); text-wrap:pretty; }
.term-row input[type=checkbox] { width:20px; height:20px; flex:none; accent-color:var(--kdx-tiger); }
.term-days { display:flex; align-items:center; gap:6px; color:var(--fg-2); font-size:13px; white-space:nowrap; }
.term-days input { width:4rem; text-align:center; }
.term-row-other { border-bottom:0; padding-bottom:4px; }
.term-other { margin:0; padding:0 14px 14px 52px; }
.term-other textarea { min-height:72px; }
.term-money input { width:8.5rem; }
.actions-send { flex-wrap:wrap; }
.actions-send .row-pair { flex:1 1 100%; order:0; margin-bottom:4px; }

/* Listing agent menu: agent and brokerage in two columns. */
.menu-pick { position:relative; }
.menu-native { position:absolute; opacity:0; pointer-events:none; width:1px; height:1px; }
.menu-btn { width:100%; min-height:var(--tap); text-align:left; cursor:pointer;
  border:1px solid var(--border-strong); border-radius:var(--radius); background:var(--field); color:var(--fg);
  font-family:var(--font-sans); font-size:16px; padding:10px 36px 10px 12px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23444' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 18px center; }
.menu-btn:focus { outline:none; border-color:var(--kdx-tiger); box-shadow:0 0 0 2px rgba(255,103,31,.16); }
.menu-list { position:absolute; z-index:30; left:0; right:0; top:calc(100% + 4px); margin:0; padding:4px 0;
  list-style:none; max-height:min(60vh,420px); overflow:auto; background:var(--field);
  border:1px solid var(--border-strong); border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,.12); }
.menu-list li.menu-add { display:block; border-bottom:1px solid var(--border); color:var(--fg); font-weight:600; }
.menu-list li.menu-none { display:block; color:var(--fg-3); border-bottom:1px solid var(--border); }
.suggest li small, .menu-list li small { display:block; font-size:12px; color:var(--fg-3); opacity:.85; margin-top:1px; }
.lead-check { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--fg-3); cursor:pointer; }
.lead-check input { width:15px; height:15px; margin:0; accent-color:#8a8a85; }
.term-row select { width:auto; max-width:58%; min-height:36px; padding:6px 32px 6px 10px; font-size:14px; }
.term-soon { opacity:.65; cursor:default; }
.soon { font-size:12px; color:var(--fg-3); white-space:nowrap; }
#warranty-plan { padding:12px 14px 4px; border-bottom:1px solid var(--border); background:var(--field-locked); }
#warranty-plan[hidden] { display:none; }
.actions-send .term-rows { flex:1 1 100%; order:1; margin-bottom:4px; }
.actions-send .btn-quiet, .actions-send .btn-primary { order:2; }
.term-rows-pad { margin-bottom:14px; }

/* Native shell (UA token KDXShell/): the sidebar is the nav, so drop the page header. */
.kdx-shell .top { display:none; }

/* ── Field ops: clock, timesheet, mileage, expenses ─────────────────────── */
.fieldtabs { display:flex; gap:4px; overflow-x:auto; margin:6px 0 20px; border-bottom:1px solid var(--border); }
.fieldtabs a {
  position:relative; padding:0 14px; min-height:var(--tap); display:inline-flex; align-items:center;
  gap:6px; font-size:14px; font-weight:500; color:var(--fg-2); text-decoration:none; white-space:nowrap;
  border-bottom:2px solid transparent; margin-bottom:-1px;
}
.fieldtabs a:hover { color:var(--kdx-tiger); }
.fieldtabs a[aria-current="page"] { color:var(--fg); font-weight:700; border-bottom-color:var(--kdx-tiger); }
.fieldtabs .badge {
  min-width:18px; height:18px; padding:0 5px; border-radius:9px; background:var(--kdx-tiger);
  color:#fff; font-size:11px; font-weight:700; display:inline-flex; align-items:center; justify-content:center;
}
.kdx-shell .fieldtabs { display:none; }

.code { font-family:var(--font-mono); font-size:12px; font-weight:600; color:var(--fg-2);
  background:var(--info-bg); border-radius:var(--radius); padding:1px 6px; margin-right:4px; }
.btn-fit { width:auto; min-width:120px; }
.row-actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; margin-top:10px; }
.row-actions form { margin:0; }
.flag { margin:6px 0 0; font-size:13px; color:var(--warn); }
.more summary { cursor:pointer; font-size:13px; font-weight:600; color:var(--fg-2); min-height:var(--tap);
  display:flex; align-items:center; }
details.card.more { padding:6px 16px; }
details.card.more[open] { padding-bottom:16px; }
.more form select, .more form input[type=text] { margin-bottom:8px; }
.field { margin-bottom:12px; }
.field label { display:block; font-size:13px; font-weight:600; color:var(--fg-2); }
.field label input, .field label select { margin-top:4px; font-weight:400; }
.field.check label { display:flex; align-items:center; gap:10px; font-weight:500; color:var(--fg); min-height:var(--tap); }
.field.check input { width:20px; height:20px; accent-color:var(--kdx-tiger); }

.clock-live { border-color:var(--success); }
.clock-state { margin:0 0 8px; }
.clock-where { margin:0; font-size:22px; font-family:'DM Serif Display',Georgia,serif; }
.clock-live .help { margin:4px 0 14px; }
.prop-head { display:flex; justify-content:space-between; align-items:center; gap:14px; }
.prop-head form { margin:0; flex:none; }
.prop .plan { margin:10px 0 0; font-size:14px; }

.weeknav { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:14px 0 6px; }
.weeknav a { min-height:var(--tap); display:inline-flex; align-items:center; padding:0 6px; color:var(--fg-2); text-decoration:none; font-size:14px; }
.week-status { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin:6px 0 14px; }
.tablewrap { overflow-x:auto; margin-bottom:6px; }
table.sheet { width:100%; border-collapse:collapse; background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius-card); font-size:14px; font-variant-numeric:tabular-nums; min-width:560px; }
table.sheet th, table.sheet td { padding:9px 10px; border-bottom:1px solid var(--border); text-align:left; }
table.sheet thead th { font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--fg-3); font-weight:700; }
table.sheet thead th span { font-size:13px; color:var(--fg-2); letter-spacing:0; }
table.sheet .num { text-align:right; }
table.sheet tfoot th, table.sheet tfoot td { border-bottom:0; border-top:2px solid var(--border-strong); font-weight:700; }
table.sheet tbody th { font-family:var(--font-mono); font-size:12.5px; font-weight:600; }
table.sheet .empty { text-align:center; color:var(--fg-3); padding:22px; }
table.sheet.compact { font-size:13px; min-width:0; margin:12px 0; }
table.sheet.compact th, table.sheet.compact td { padding:6px 6px; }

.entry-head, .trip-head { display:flex; justify-content:space-between; align-items:flex-start; gap:14px; }
.entry-hours, .trip-mi { font-size:20px; font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; text-align:right; }
.trip-mi span { font-size:13px; font-weight:500; color:var(--fg-3); }
.splitform .splitrow, .splitrow { display:grid; grid-template-columns:1fr 110px; gap:8px; margin-bottom:8px; }
.splitrow label { display:block; font-size:13px; font-weight:600; color:var(--fg-2); }
.entry.card, .trip.card { padding:14px 16px; margin-bottom:10px; }

.stats { display:grid; grid-template-columns:repeat(2, 1fr); gap:10px; margin:18px 0 8px; }
@media (min-width:700px) { .stats { grid-template-columns:repeat(4, 1fr); } }
.stats > div { background:var(--card); border:1px solid var(--border); border-radius:var(--radius-card); padding:12px 14px; }
.stat-n { display:block; font-size:24px; font-weight:700; font-variant-numeric:tabular-nums; }
.stat-l { display:block; font-size:12px; color:var(--fg-3); }
.links { font-size:13.5px; color:var(--fg-3); margin:0 2px; }
.chips { font-size:14px; }
.trip .route { font-size:14px; color:var(--fg-2); }
.tagrow { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px; }
.tagrow .btn-primary, .tagrow .btn-quiet { min-height:52px; width:100%; font-size:15px; }
.trip.done { opacity:.92; }
.trip.done .tagform { margin-top:4px; display:flex; gap:16px; }
.expensify { margin-top:18px; }
.expensify .help { margin:4px 0 10px; }
.exprow .row-actions { margin-top:8px; }
.expform .btn-primary { margin-top:6px; }
pre.payload { font-family:var(--font-mono); font-size:11.5px; background:var(--info-bg); color:var(--fg-2);
  border-radius:var(--radius); padding:10px; overflow-x:auto; white-space:pre-wrap; word-break:break-word; }
.approve .decide input[type=text] { margin-top:4px; }
/* A phone shows the whole week without sideways scroll: seven day columns fit. */
@media (max-width:520px) {
  table.sheet { min-width:0; font-size:13px; }
  table.sheet th, table.sheet td { padding:8px 3px; }
  table.sheet tbody th, table.sheet tfoot th { padding-left:8px; font-size:11.5px; }
  table.sheet .num:last-child { padding-right:8px; }
  table.sheet thead th { font-size:10px; letter-spacing:.04em; }
}