/* Colours, type and spacing taken from design-reference/. */
@font-face { font-family: 'Libre Baskerville'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/fonts/LibreBaskerville.woff2) format('woff2'); }
@font-face { font-family: 'Libre Baskerville'; font-style: italic; font-weight: 400; font-display: swap; src: url(/fonts/LibreBaskerville-italic.woff2) format('woff2'); }
@font-face { font-family: 'Rubik'; font-style: normal; font-weight: 400 600; font-display: swap; src: url(/fonts/Rubik.woff2) format('woff2'); }

:root {
  --bg: #f6f2ea; --surface: #fff; --surface-head: #fbf9f4; --hover: #fbf7ef; --tint: #f3ece2;
  --ink: #241b12; --ink-2: #4d4338; --muted: #7a6f62; --subtle: #9a8f80; --faint: #c9bda8;
  --brown: #54281a; --brown-dark: #3f1d12;
  --line: #e3d6c1; --line-strong: #d9cdb8; --rule: #efe7d8;
  --green: #2e382d; --green-bg: #e6ebe3;
  --amber: #8a5a2b; --amber-bg: #f3e9d9; --tan: #bf9c73;
  --grey-bg: #ece7dd; --grey-ink: #6f6659;
  --required: #a0522d;
  --serif: 'Libre Baskerville', serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); font-family: Rubik, system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
body { font-size: 14px; line-height: 1.4; min-height: 100vh; display: flex; flex-direction: column; }
a { color: var(--brown); text-decoration: none; }
a:hover { color: var(--ink); }
button, input, textarea, select { font-family: inherit; }

/* Header */
.site-header { display: flex; align-items: center; gap: 28px; padding: 0 28px; height: 52px; background: var(--surface); border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); }
.brand .logo { color: var(--brown); }
.brand-name { font-family: var(--serif); font-size: 14px; letter-spacing: .04em; }
.site-nav { display: flex; gap: 22px; font-size: 13px; font-weight: 500; }
.site-nav a { color: var(--muted); padding: 16px 0 14px; }
.site-nav a.active { color: var(--ink); border-bottom: 2px solid var(--brown); }
.header-right { margin-left: auto; display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); }
.avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--brown); color: #fff; display: grid; place-items: center; font-size: 12px; font-weight: 600; }
.avatar:hover { color: #fff; background: var(--brown-dark); }

/* Page */
.page { width: 100%; max-width: 1120px; margin: 0 auto; padding: 28px 28px 60px; display: flex; flex-direction: column; gap: 22px; }
.page-title { margin: 0; font-family: var(--serif); font-size: 26px; font-weight: 700; line-height: 1.2; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.section-title { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--brown); }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; }
.card-pad { padding: 14px 16px; }
.muted { color: var(--muted); }
.subtle { color: var(--subtle); }

/* Tables (row style from needs-attention) */
.table { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.table-head, .table-row { display: grid; gap: 16px; align-items: center; padding: 11px 16px; }
.table-head { padding: 7px 16px; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--subtle); border-bottom: 1px solid var(--rule); background: var(--surface-head); }
.table-row { border-top: 1px solid var(--rule); color: var(--ink); }
.table-head + .table-row { border-top: 0; }
.cell-strong { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cell { color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Forms and buttons */
.field { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--muted); }
.input { border: 1px solid var(--line-strong); border-radius: 5px; padding: 7px 10px; font-size: 13px; background: #fff; color: var(--ink); }
.input:focus { outline: 2px solid var(--brown); outline-offset: -1px; }
.required { color: var(--required); }
.btn { border: 0; background: var(--brown); color: #fff; font-size: 13px; font-weight: 500; padding: 8px 14px; border-radius: 5px; cursor: pointer; }
.btn:hover { background: var(--brown-dark); color: #fff; }
.btn-secondary { border: 1px solid var(--line-strong); background: #fff; color: var(--ink-2); font-size: 13px; padding: 7px 12px; border-radius: 5px; cursor: pointer; }
.btn-secondary:hover { background: var(--hover); color: var(--ink-2); }
.btn-link { border: 0; background: transparent; color: var(--muted); font-size: 13px; cursor: pointer; padding: 0; }
.btn-link:hover { color: var(--ink); }
.error-box { font-size: 13px; color: var(--required); background: #fbf1ea; border: 1px solid #ecd3c3; border-radius: 5px; padding: 9px 12px; }
.note-box { font-size: 13px; color: var(--ink-2); background: var(--hover); border-radius: 5px; padding: 9px 12px; }
.pill { font-size: 12px; font-weight: 500; padding: 3px 9px; border-radius: 4px; white-space: nowrap; }
.pill-green { background: var(--green-bg); color: var(--green); }
.pill-amber { background: var(--amber-bg); color: var(--amber); }
.pill-grey { background: var(--grey-bg); color: var(--grey-ink); }

/* Sign-in and invite pages */
.auth-wrap { flex: 1; display: grid; place-items: center; padding: 40px 16px; }
.auth-card { width: 100%; max-width: 380px; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 26px 24px 22px; display: flex; flex-direction: column; gap: 16px; }
.auth-brand { display: flex; align-items: center; gap: 10px; color: var(--brown); }
.auth-card h1 { margin: 0; font-family: var(--serif); font-size: 20px; font-weight: 700; }

/* Team page */
.team-grid { grid-template-columns: minmax(120px, 1fr) minmax(200px, 1.5fr) minmax(170px, 1fr) 170px; }
.invite-form { display: grid; grid-template-columns: 1fr 1.4fr auto; gap: 12px; align-items: end; }
.link-box { display: flex; gap: 8px; align-items: center; }
.link-box .input { flex: 1; font-family: ui-monospace, monospace; font-size: 12px; }

/* Deal page (design-reference/deal-detail.html) */
.page-wide { max-width: 1180px; padding-top: 22px; gap: 18px; }
.back-link { font-size: 13px; color: var(--muted); }
.deal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.deal-address { margin-top: 4px; font-size: 15px; color: var(--ink-2); }
.page-title.is-closed { color: var(--ink-2); }
.deal-address.is-closed { color: var(--muted); }
.deal-head-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.chip { font-size: 12px; font-weight: 500; padding: 4px 10px; border-radius: 4px; white-space: nowrap; }
.chip-tan { background: var(--line); color: var(--brown); }
.chip-green { background: var(--green-bg); color: var(--green); }
.chip-grey { background: var(--grey-bg); color: var(--grey-ink); }
.chip-struck { background: var(--grey-bg); color: var(--grey-ink); text-decoration: line-through; text-decoration-color: #b9ae9c; }
.chip-declined { padding: 3px 10px; border: 1.5px solid var(--green); color: var(--green); background: #fff; }
.chip-amber { background: var(--amber-bg); color: var(--amber); }
.last-activity { font-size: 12px; color: var(--muted); }
.last-activity b { color: var(--brown); font-weight: 600; }
.assign label { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); border: 1px solid var(--line-strong); border-radius: 6px; padding: 5px 8px 5px 10px; background: #fff; }
.assign select { border: 0; background: transparent; font-size: 13px; font-weight: 500; color: var(--ink); padding: 0; cursor: pointer; }

.stage-card { padding: 18px 22px 16px; display: flex; flex-direction: column; gap: 18px; }
.stepper { display: grid; grid-template-columns: repeat(var(--steps), minmax(0, 1fr)); align-items: start; }
.step { display: flex; flex-direction: column; align-items: center; gap: 8px; position: relative; min-width: 0; }
.step-lines { position: absolute; top: 10px; left: 0; right: 0; height: 2px; display: flex; }
.step-lines span { flex: 1; }
.step-dot { position: relative; width: 22px; height: 22px; border-radius: 50%; box-sizing: border-box; display: grid; place-items: center; font-size: 11px; font-weight: 600; }
.step-name { font-size: 12px; text-align: center; line-height: 1.25; padding: 0 4px; text-wrap: balance; }
.step-meta { font-size: 11px; color: var(--subtle); margin-top: -4px; text-align: center; min-height: 13px; }
.action-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; border-top: 1px solid var(--rule); padding-top: 14px; }
.btn-advance { font-size: 14px; padding: 9px 16px; border-radius: 6px; display: inline-flex; align-items: center; gap: 8px; }
.btn-underline { border: 0; background: transparent; color: var(--brown); font-size: 13px; padding: 6px 4px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--faint); }
.outcome-rows { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px 14px; align-items: center; border-top: 1px solid var(--rule); padding-top: 14px; }
.outcome-badge { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; padding: 7px 12px; border-radius: 5px; white-space: nowrap; justify-self: start; }
.outcome-badge .dot { width: 8px; height: 8px; border-radius: 50%; box-sizing: border-box; }
.outcome-green { color: var(--green); background: var(--green-bg); } .outcome-green .dot { background: var(--green); }
.outcome-grey { color: var(--grey-ink); background: var(--grey-bg); } .outcome-grey .dot { background: var(--subtle); }
.outcome-declined { color: var(--green); border: 1.5px solid var(--green); padding: 6px 12px; } .outcome-declined .dot { border: 2px solid var(--green); }
.outcome-amber { color: var(--amber); background: var(--amber-bg); } .outcome-amber .dot { background: var(--tan); }
.outcome-text { font-size: 13px; color: var(--ink-2); }
.outcome-text b { font-weight: 500; }

.deal-columns { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; }
.activity-col, .side-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.note-form { padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.note-form textarea { border: 0; resize: vertical; font-size: 14px; line-height: 1.45; padding: 4px 2px; outline: none; background: transparent; color: var(--ink); min-height: 38px; }
.note-form-foot { display: flex; align-items: center; gap: 8px; border-top: 1px solid var(--rule); padding-top: 8px; }
.note-kinds { display: inline-flex; gap: 4px; font-size: 12px; }
.note-kind input { position: absolute; opacity: 0; pointer-events: none; }
.note-kind span { display: inline-block; border: 1px solid var(--line-strong); background: #fff; color: var(--ink-2); padding: 3px 9px; border-radius: 12px; cursor: pointer; }
.note-kind input:checked + span { border-color: var(--brown); background: var(--tint); color: var(--brown); }
.note-kind input:focus-visible + span { outline: 2px solid var(--brown); outline-offset: 1px; }
.btn-small { margin-left: auto; padding: 6px 12px; }
.log { overflow: hidden; }
.log-row { display: grid; grid-template-columns: 86px 20px minmax(0, 1fr); gap: 0 12px; padding: 12px 16px; border-top: 1px solid var(--rule); align-items: start; }
.log-row:first-child { border-top: 0; }
.log-when { font-size: 12px; color: var(--muted); line-height: 1.5; padding-top: 1px; }
.log-date { font-variant-numeric: tabular-nums; color: var(--ink-2); font-weight: 500; }
.log-icon { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 10px; font-weight: 600; box-sizing: border-box; }
.log-main { min-width: 0; }
.log-title { font-size: 14px; line-height: 1.45; color: var(--ink); }
.log-title.is-note { white-space: pre-wrap; text-wrap: pretty; }
.log-body { font-size: 14px; line-height: 1.5; color: var(--ink-2); margin-top: 3px; text-wrap: pretty; white-space: pre-wrap; }

.side-card { display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.side-head { display: flex; justify-content: space-between; align-items: baseline; }
.side-label { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--subtle); font-weight: 500; }
.side-link { font-size: 12px; }
.side-name { font-weight: 500; font-size: 15px; }
.tabular { font-variant-numeric: tabular-nums; }
.small { font-size: 12px; }
.deal-facts { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 9px 12px; font-size: 13px; align-items: baseline; }
.fact-label { color: var(--subtle); }
.sent-form { display: flex; flex-direction: column; gap: 6px; }
.check { display: flex; align-items: center; gap: 9px; cursor: pointer; color: var(--ink); font-size: 13px; }
.check input { position: absolute; opacity: 0; pointer-events: none; }
.check .box { width: 16px; height: 16px; border-radius: 3px; box-sizing: border-box; display: grid; place-items: center; font-size: 11px; color: transparent; background: #fff; border: 1px solid var(--faint); }
.check input:checked + .box { color: #fff; background: var(--brown); border-color: var(--brown); }
.check input:focus-visible + .box { outline: 2px solid var(--brown); outline-offset: 1px; }
.input-small { padding: 5px 8px; font-size: 12px; margin-left: 25px; }
.other-deal { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; margin: 0 -10px; border-radius: 5px; color: var(--ink); }
.other-deal:hover { background: var(--hover); color: var(--ink); }
.other-deal-top { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; font-weight: 500; }
.other-deal-sub { font-size: 12px; color: var(--muted); }

/* Dialogs (design-reference/close-out-flow.html) */
.overlay { position: fixed; inset: 0; background: rgba(36, 27, 18, .35); display: grid; place-items: center; padding: 20px; z-index: 20; }
.dialog { width: 100%; max-width: 440px; background: #fff; border-radius: 8px; box-shadow: 0 20px 50px rgba(36, 27, 18, .25); padding: 22px 22px 18px; display: flex; flex-direction: column; gap: 16px; }
.dialog-title { font-family: var(--serif); font-size: 18px; font-weight: 700; }
.dialog-sub { font-size: 13px; color: var(--muted); margin-top: 3px; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; border-top: 1px solid var(--rule); padding-top: 14px; }
.dialog-actions .btn-secondary { padding: 8px 14px; }
.dialog-actions .btn { padding: 9px 16px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.check-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: -8px; }

@media (max-width: 860px) {
  .deal-columns { grid-template-columns: minmax(0, 1fr); }
  .page { padding-left: 16px; padding-right: 16px; }
}

/* Close out (design-reference/close-out-flow.html) */
.action-right { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.closeout { position: relative; }
.closeout summary { list-style: none; border: 1px solid var(--line-strong); background: #fff; color: var(--ink-2); font-size: 13px; padding: 7px 12px; border-radius: 6px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.closeout summary::-webkit-details-marker { display: none; }
.closeout summary:hover { background: var(--hover); }
.closeout[open] summary { border-color: var(--brown); background: var(--hover); color: var(--ink); }
.closeout[open] .caret { transform: rotate(180deg); }
.caret { font-size: 10px; color: var(--subtle); display: inline-block; }
.closeout-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 5; background: #fff; border: 1px solid var(--line-strong); border-radius: 6px; box-shadow: 0 8px 24px rgba(36, 27, 18, .12); width: 290px; padding: 6px; display: flex; flex-direction: column; font-size: 13px; }
.closeout-menu a { display: flex; justify-content: space-between; align-items: center; padding: 9px 10px; border-radius: 4px; color: var(--ink); }
.closeout-menu a:hover, .closeout-menu a:focus-visible { background: var(--hover); color: var(--ink); }
.menu-text { display: flex; flex-direction: column; gap: 1px; }
.menu-title { font-weight: 500; }
.menu-sub { font-size: 12px; color: var(--muted); }
.menu-rule { border-top: 1px solid var(--rule); margin: 5px 4px 3px; }
.menu-group { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--subtle); padding: 4px 10px 2px; }
.menu-dot { width: 8px; height: 8px; border-radius: 50%; box-sizing: border-box; flex: none; }
.dot-won { background: var(--green); }
.dot-hold { background: var(--tan); }
.dot-lost { background: var(--subtle); }
.dot-declined { border: 2px solid var(--green); }
.outcome-actions { justify-self: end; display: flex; gap: 8px; align-items: center; white-space: nowrap; }
.muted-link { font-size: 13px; color: var(--muted); }
.btn-outline { border: 1px solid var(--brown); background: #fff; color: var(--brown); font-size: 13px; font-weight: 500; padding: 7px 12px; border-radius: 6px; cursor: pointer; }
.btn-outline:hover { background: var(--hover); }

.dialog .when { display: none; }
.choice-list, .field-stack { display: flex; flex-direction: column; gap: 6px; }
.choice { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line-strong); border-radius: 6px; padding: 10px 12px; font-size: 13px; cursor: pointer; }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice .radio { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--faint); box-sizing: border-box; flex: none; background: #fff; }
.choice-title { font-weight: 500; }
.choice:has(input:checked) { border: 2px solid var(--brown); padding: 9px 11px; background: var(--hover); }
.choice:has(input:checked) .radio { border: 5px solid var(--brown); }
.choice:has(input:focus-visible) { outline: 2px solid var(--brown); outline-offset: 2px; }
.decline-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.choice-declined { padding: 9px 11px; gap: 9px; }
.choice-declined .radio { width: 14px; height: 14px; }
.choice-declined .choice-title { font-weight: 400; }
.choice-declined:has(input:checked) { border-color: var(--green); background: var(--green-bg); padding: 8px 10px; }
.choice-declined:has(input:checked) .radio { border: 4px solid var(--green); }
.choice-declined:has(input:checked) .choice-title { font-weight: 500; }
.span-all { grid-column: 1 / -1; }
.summary { font-size: 13px; color: var(--ink-2); background: var(--hover); border-radius: 5px; padding: 9px 12px; display: flex; flex-direction: column; gap: 5px; }
.summary-line { display: flex; gap: 8px; align-items: center; }
.summary b { font-weight: 600; }
.summary b.won { color: var(--green); }
.summary b.lost { color: var(--grey-ink); }
.summary b.hold { color: var(--amber); }
.summary-lost { background: #f3efe7; }
.summary-declined { background: var(--green-bg); }
.summary-hold { background: var(--amber-bg); }
.dialog-declined { border-top: 4px solid var(--green); }
.btn-lost { background: var(--ink-2); } .btn-lost:hover { background: var(--ink); }
.btn-declined { background: var(--green); } .btn-declined:hover { background: #1f271e; }
.btn-hold { background: var(--amber); } .btn-hold:hover { background: #6f4822; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.presets { display: flex; gap: 6px; flex-wrap: wrap; font-size: 12px; }
.preset { border: 1px solid var(--line-strong); background: #fff; color: var(--ink-2); padding: 4px 10px; border-radius: 12px; cursor: pointer; font-size: 12px; }
.preset.is-on { border-color: var(--amber); background: var(--amber-bg); color: var(--amber); font-weight: 500; }
.input-date { width: 180px; }
textarea.input { line-height: 1.45; resize: vertical; }

/* Forms */
.btn-header { padding: 5px 11px; font-size: 12px; margin-right: 6px; }
.form-page { max-width: 720px; }
.deal-form { display: flex; flex-direction: column; gap: 14px; }
.form-card { padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.span-2 { grid-column: 1 / -1; }
.form-actions { display: flex; justify-content: flex-end; gap: 8px; }
.segmented { display: inline-flex; align-self: flex-start; border: 1px solid var(--line-strong); border-radius: 6px; overflow: hidden; font-size: 13px; font-weight: 500; }
.segmented label + label { border-left: 1px solid var(--line-strong); }
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented span { display: block; padding: 6px 12px; cursor: pointer; background: #fff; color: var(--ink-2); }
.segmented input:checked + span { background: var(--brown); color: #fff; }
.segmented input:disabled + span { color: var(--faint); cursor: not-allowed; }
.segmented input:focus-visible + span { outline: 2px solid var(--brown); outline-offset: -2px; }
.owner-card .when-existing { display: none; }
.owner-card:has(input[name="contact_mode"][value="existing"]:checked) .when-existing { display: block; }
.owner-card:has(input[name="contact_mode"][value="existing"]:checked) .when-new { display: none; }
select.input { appearance: auto; }


/* Needs attention (design-reference/needs-attention.html) */
.attention-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.attention-total { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.total-number { font-family: var(--serif); font-size: 56px; line-height: 1; font-weight: 700; color: var(--brown); }
.total-label { font-family: var(--serif); font-size: 22px; color: var(--ink); }
.total-breakdown { display: flex; gap: 6px; align-items: baseline; font-size: 13px; color: var(--muted); margin-left: 6px; flex-wrap: wrap; }
.breakdown-item { display: inline-flex; gap: 5px; align-items: baseline; }
.breakdown-item b { color: var(--ink); font-weight: 600; }
.breakdown-item .sep { color: var(--faint); margin-left: 6px; }
.segmented-links { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 6px; overflow: hidden; font-size: 13px; font-weight: 500; }
.segmented-links a { padding: 6px 12px; background: #fff; color: var(--ink-2); }
.segmented-links a + a { border-left: 1px solid var(--line-strong); }
.segmented-links a.is-on { background: var(--brown); color: #fff; }
.attention-groups { display: flex; flex-direction: column; gap: 26px; }
.attention-group { display: flex; flex-direction: column; gap: 6px; }
.group-head { display: flex; align-items: baseline; gap: 10px; padding: 0 2px; font-size: 13px; }
.group-hint { font-size: 12px; color: var(--subtle); margin-left: auto; }
.attention-grid { grid-template-columns: minmax(150px, 1.2fr) minmax(190px, 1.6fr) minmax(120px, 1fr) 150px 96px; }
.row-link:hover { background: var(--hover); color: var(--ink); }
.small-cell { font-size: 13px; }
.time-cell { display: flex; flex-direction: column; gap: 3px; }
.time-line { display: flex; align-items: baseline; gap: 6px; }
.time-num { font-variant-numeric: tabular-nums; line-height: 1; white-space: nowrap; }
.time-sub { font-size: 12px; color: var(--muted); white-space: nowrap; }
.bar { display: block; width: 64px; height: 3px; background: var(--rule); border-radius: 2px; overflow: hidden; }
.bar span { display: block; height: 100%; }
.owner-cell { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--ink-2); }
.owner-dot { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 10px; font-weight: 600; color: #fff; flex: none; }
.empty-state { margin-top: 40px; padding: 64px 32px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; }
.empty-state .logo { color: #9ba592; }
.empty-title { font-family: var(--serif); font-size: 22px; margin-top: 8px; }
.empty-state .muted { max-width: 380px; text-wrap: pretty; }
.empty-state .btn-secondary { margin-top: 14px; font-weight: 500; }
@media (min-width: 641px) and (max-width: 860px) {
  .table { overflow-x: auto; }
  .attention-grid { min-width: 760px; }
}

/* List pages */
.counts { display: flex; gap: 6px; align-items: baseline; font-size: 13px; color: var(--muted); margin-top: 6px; flex-wrap: wrap; }
.head-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.list-section { display: flex; flex-direction: column; gap: 6px; }
.list-grid { grid-template-columns: minmax(150px, 1.1fr) minmax(190px, 1.5fr) minmax(140px, 1.1fr) 130px 96px; }
.stage-number { font-size: 11px; font-weight: 600; color: var(--brown); background: #fff; border: 1px solid var(--line-strong); border-radius: 4px; padding: 1px 6px; }
.empty-row { font-size: 13px; color: var(--subtle); padding: 10px 16px; border: 1px dashed var(--line); border-radius: 8px; }
.closed-section summary { list-style: none; cursor: pointer; }
.closed-section summary::-webkit-details-marker { display: none; }
.closed-section[open] .caret { transform: rotate(180deg); }
.closed-section:not([open]) { padding-bottom: 2px; }
@media (min-width: 641px) and (max-width: 860px) { .list-grid { min-width: 760px; } }
.contacts-grid { grid-template-columns: minmax(160px, 1.2fr) minmax(200px, 1.4fr) 150px minmax(180px, 1.2fr); }
.contact-deals-grid { grid-template-columns: minmax(200px, 1.6fr) minmax(140px, 1fr) minmax(120px, .9fr) 96px; }
.contact-notes { font-size: 13px; color: var(--ink-2); white-space: pre-wrap; border-top: 1px solid var(--rule); padding-top: 8px; margin-top: 2px; }
@media (min-width: 641px) and (max-width: 860px) { .contacts-grid, .contact-deals-grid { min-width: 640px; } }

/* Edit and delete */
.btn-outline-quiet { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--ink-2); border: 1px solid var(--line-strong); border-radius: 6px; padding: 5px 11px; background: #fff; }
.btn-outline-quiet:hover { background: var(--hover); color: var(--ink); border-color: var(--faint); }
.danger-zone { flex-direction: row; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 16px; }
.danger-title { color: var(--required); }
.small-text { font-size: 13px; margin-top: 3px; }
.btn-danger-outline { font-size: 13px; font-weight: 500; color: var(--required); border: 1px solid #ddb9a4; border-radius: 5px; padding: 7px 12px; background: #fff; white-space: nowrap; }
.btn-danger-outline:hover { background: #fbf1ea; color: #7f3f22; }
.btn-danger { background: var(--required); } .btn-danger:hover { background: #7f3f22; }
.dialog-danger { border-top: 4px solid var(--required); }
.summary-danger { background: #fbf1ea; }

/* Gmail, phase one: deliberately plain until the panel is designed. */
.gmail-row { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--rule); padding-top: 12px; }
.volume-table { border-collapse: collapse; font-size: 13px; margin: 8px 0; }
.volume-table th, .volume-table td { text-align: left; padding: 3px 12px 3px 0; border-bottom: 1px solid var(--rule); }
.email-plain pre { white-space: pre-wrap; word-break: break-word; font-family: inherit; font-size: 13px; margin: 0 0 12px; }
.email-plain article { border-top: 1px solid var(--line); padding-top: 8px; margin-top: 8px; }
.email-message { border-left: 2px solid var(--line); padding-left: 10px; margin: 8px 0; }

/* What the email says (phase two panel). Sits under the log, above the raw email: reference,
   not the first thing you need. The summary and what happens next are always open; the rest
   folds away so the panel never runs longer than the log it sits under. */
.panel { gap: 0; }
.panel .side-head { margin-bottom: 10px; }
.panel-summary { margin: 0; font-size: 14px; line-height: 1.6; text-wrap: pretty; }
.panel-block { padding-top: 14px; margin-top: 14px; border-top: 1px solid var(--rule); }
.panel-block > .side-label { display: block; margin-bottom: 6px; }
.panel-list { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.55; }
.panel-list li { margin-bottom: 7px; text-wrap: pretty; }
.panel-list li:last-child { margin-bottom: 0; }
.source-link { font-size: 11px; color: var(--subtle); white-space: nowrap; }
.source-link:hover { color: var(--brown); }
/* Whose court the ball is in. */
.whose { font-size: 11px; padding: 1px 6px; border-radius: 9px; background: var(--grey-bg); color: var(--grey-ink); white-space: nowrap; }
.whose-us { background: var(--green-bg); color: var(--green); }
.whose-them { background: var(--amber-bg); color: var(--amber); }
/* Folded sections: a row you can open, not a wall of bullets. */
.panel-folded > details > summary { display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; padding: 2px 0; }
.panel-folded > details > summary::-webkit-details-marker { display: none; }
.panel-folded > details > summary::before { content: '›'; color: var(--faint); font-size: 15px; line-height: 1; transition: transform .12s ease; }
.panel-folded > details[open] > summary::before { transform: rotate(90deg); }
.panel-folded > details > summary:hover .side-label { color: var(--muted); }
.panel-count { font-size: 11px; color: var(--subtle); }
.panel-folded > details[open] > summary { margin-bottom: 8px; }
.panel-folded > details > ul { padding-left: 32px; }
.panel-credentials { background: var(--tint); border-radius: 6px; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.credential-value { font-family: ui-monospace, monospace; font-size: 15px; font-weight: 600; color: var(--brown); }
.credential-source { font-size: 12px; color: var(--muted); text-wrap: pretty; margin-top: 2px; }
.inline-form { display: inline; }
.email-message:target { background: var(--tint); }

/* ─────────────────────────────────────────────────────────────────────────────
   Phones. Breakpoint, gutter and tap-target rules follow Launch Control's
   design-reference/mobile-spec.md, so the two apps feel like one company:
   ≤ 640px, a 16px gutter, 44px minimum on anything you tap, 8px between two
   tappable things, minmax(0, 1fr) on every grid so nothing can push the page
   wider than the screen.

   The screens that matter on a phone are Needs attention between appointments
   and a deal before walking into a meeting. Tables become cards there rather
   than scrolling sideways; the rest is made usable, not beautiful.
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  :root { --header-height: 56px; }

  /* Header: one row, no date — you know what day it is (spec §1). */
  .site-header { height: var(--header-height); gap: 12px; padding: 0 16px; }
  .header-date { display: none; }
  /* The wordmark doesn't fit beside three nav items and the avatar at 375px;
     the mark alone still links home. */
  .brand-name { display: none; }
  .site-nav { gap: 16px; font-size: 13px; min-width: 0; }
  .site-nav a { padding: 19px 0 17px; white-space: nowrap; }
  .avatar { width: 32px; height: 32px; font-size: 13px; }
  /* A 44x44 tap area around small marks, without making them look bigger. */
  .avatar, .brand { position: relative; }
  .avatar::after, .brand::after { content: ''; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); }
  .header-right { gap: 0; }

  .page { padding: 18px 16px 48px; gap: 18px; }
  .page-title { font-size: 22px; }
  .page-head, .attention-head { flex-direction: column; align-items: stretch; gap: 14px; }
  .head-actions { gap: 8px; }
  .head-actions .segmented-links { flex: 1; }
  .segmented-links a { flex: 1; text-align: center; padding: 13px 10px; }
  .btn, .btn-secondary, .btn-outline-quiet { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 10px 16px; font-size: 14px; }
  .back-link { display: inline-flex; align-items: center; min-height: 44px; }

  /* A table row becomes a card: who and where on the left, the number that
     made it urgent top right, stage and owner on the last line (spec §3). */
  .table { overflow: visible; }
  .table-head { display: none; }
  .table-row { grid-template-columns: minmax(0, 1fr) auto; gap: 3px 12px; padding: 12px 14px; align-items: start; }
  .table-row > :nth-child(1) { grid-area: 1 / 1; font-size: 15px; }
  .table-row > :nth-child(2) { grid-area: 2 / 1; font-size: 13px; }
  /* An address or an email wraps on a phone rather than ending in an ellipsis. */
  .table-row .cell-strong, .table-row .cell { white-space: normal; overflow: visible; }
  .table-row > :nth-child(3) { grid-area: 3 / 1; font-size: 12px; }
  .table-row > :nth-child(4) { grid-area: 1 / 2 / span 2 / 3; justify-self: end; text-align: right; }
  .table-row > :nth-child(5) { grid-area: 3 / 2; justify-self: end; }
  .attention-grid, .list-grid, .contacts-grid, .contact-deals-grid, .team-grid { min-width: 0; }
  .time-line { display: flex; align-items: baseline; gap: 6px; justify-content: flex-end; }
  .time-cell { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
  .owner-cell { font-size: 12px; }
  .bar { width: 52px; }
  /* Contacts: name and deal count on line 1, then email, then phone. */
  .contacts-grid > :nth-child(3) { grid-area: 3 / 1; }
  .contacts-grid > :nth-child(4) { grid-area: 1 / 2; justify-self: end; }
  /* Team: name and its action on line 1, address under it, status last. */
  .team-grid > :nth-child(3) { grid-area: 3 / 1; }
  .team-grid > :nth-child(4) { grid-area: 1 / 2; justify-self: end; }
  .group-head { flex-wrap: wrap; gap: 6px 8px; }
  .group-hint { flex-basis: 100%; }

  /* Deal page. */
  .page-wide { padding-top: 16px; }
  .deal-head { gap: 12px; }
  .deal-head-right { width: 100%; gap: 8px; }
  .deal-head-right .last-activity { flex-basis: 100%; }
  .deal-head-right .btn-outline-quiet { flex: 1; }
  .assign { flex: 1; }
  .assign label { min-height: 44px; box-sizing: border-box; padding: 0 8px 0 10px; }
  .assign select { flex: 1; min-width: 0; min-height: 42px; font-size: 15px; }
  .stage-card { padding: 16px 0 14px; gap: 14px; }
  .stage-card > *:not(.stepper) { margin-left: 16px; margin-right: 16px; }
  /* Eight stages can't share 375px. The rail scrolls, one stage per snap point,
     and the page opens on the stage the deal is at. */
  .stepper { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 92px; overflow-x: auto; scroll-snap-type: x proximity; padding: 2px 16px 4px; scrollbar-width: none; }
  .stepper::-webkit-scrollbar { display: none; }
  .step { scroll-snap-align: center; }
  .step-name { font-size: 12px; }
  .action-row { flex-direction: column; align-items: stretch; gap: 10px; }
  .action-row form { display: flex; }
  .btn-advance { width: 100%; justify-content: center; min-height: 48px; font-size: 15px; }
  .btn-underline { min-height: 44px; }
  .action-right { margin-left: 0; justify-content: space-between; gap: 8px; }
  .action-right form, .action-right .btn-link { min-height: 44px; display: inline-flex; align-items: center; }
  .closeout summary { min-height: 44px; box-sizing: border-box; align-items: center; }
  .closeout-menu { width: auto; min-width: 250px; max-width: calc(100vw - 32px); }
  .outcome-rows { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .outcome-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 4px; }

  .deal-columns { gap: 14px; }
  .note-form { padding: 12px 14px; }
  .note-form textarea { font-size: 16px; }            /* 16px or iOS zooms on focus */
  .note-form-foot { flex-wrap: wrap; gap: 8px; }
  .note-kind span { padding: 9px 14px; }
  .btn-small { min-height: 44px; }
  .log-row { grid-template-columns: 20px minmax(0, 1fr); gap: 2px 10px; padding: 12px 14px; }
  .log-when { grid-area: 2 / 2; font-size: 12px; display: flex; gap: 6px; }
  .log-icon { grid-area: 1 / 1; }
  .log-main { grid-area: 1 / 2; }
  .panel .side-head { flex-direction: column; align-items: flex-start; gap: 2px; }
  .panel-list { padding-left: 16px; }
  .panel-folded > details > ul { padding-left: 22px; }
  .source-link { padding: 2px 0; }
  .email-plain pre { font-size: 13px; }
  .email-message { padding-left: 8px; }
  .deal-facts { grid-template-columns: 96px minmax(0, 1fr); }
  /* Links in the side cards are prose links: the spec exempts them from 44px,
     but they get room around them so a thumb can land (spec, tap targets). */
  .side-card a { display: inline-block; padding: 8px 0; }
  .side-head a { display: inline-block; padding: 12px 6px; margin: -12px -6px; }
  .other-deal { padding: 12px 10px; }

  /* Forms: full width, never smaller than the tap minimum, never zooming iOS. */
  .field-row, .check-grid, .form-grid, .invite-form { grid-template-columns: minmax(0, 1fr); }
  .check-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .input, .assign select, select, textarea { font-size: 16px; width: 100%; min-width: 0; box-sizing: border-box; -webkit-appearance: none; appearance: none; }
  .input { min-height: 44px; padding: 10px 12px; }
  .input-small { margin-left: 0; }
  .check { min-height: 44px; }
  .check .box { width: 20px; height: 20px; }
  .link-box { flex-wrap: wrap; }
  .link-box .input { flex-basis: 100%; }

  /* Dialogs sit inside the gutters, and their buttons are full width. */
  .overlay { padding: 16px; align-items: end; }
  .dialog { max-width: calc(100vw - 32px); padding: 18px 16px 16px; }
  .dialog-actions { flex-direction: column-reverse; gap: 8px; }
  /* The outcome preview reads as a sentence, not three flex items stacked. */
  .summary-line { display: block; }
  .summary-line .menu-dot { display: inline-block; margin-right: 8px; vertical-align: middle; }
  .dialog-actions .btn, .dialog-actions .btn-secondary { width: 100%; min-height: 44px; }
  .danger-zone { flex-direction: column; align-items: stretch; }
}

/* ------------------------------------------------------------------ */
/* Listing creator                                                      */

.header-name { white-space: nowrap; }
.slug { font-family: ui-monospace, monospace; font-size: 12px; color: var(--ink-2); background: var(--tint); padding: 2px 6px; border-radius: 4px; }

.listings-grid { grid-template-columns: minmax(150px, 1.4fr) minmax(120px, 1.2fr) minmax(140px, 1.3fr) 80px 120px; }
.listings-grid-plain { grid-template-columns: minmax(150px, 1.6fr) minmax(140px, 1.4fr) 80px 120px; }
.listings-table { overflow-x: auto; }

/* The form: one column of sections, each a card. */
.page-form { max-width: 880px; }
.edit-form { display: flex; flex-direction: column; gap: 18px; }
.form-section { display: flex; flex-direction: column; gap: 14px; padding: 16px 18px 18px; }
.field-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.field-row { display: flex; flex-direction: column; gap: 4px; }
.field-row.is-short { max-width: 240px; }
.field-label { font-size: 12px; color: var(--muted); }
.field-help { margin: 0; font-size: 12px; color: var(--subtle); line-height: 1.45; }
.field-help a { text-decoration: underline; text-underline-offset: 2px; }
.input.is-mono { font-family: ui-monospace, monospace; font-size: 12.5px; }
.input[readonly] { background: var(--tint); color: var(--ink-2); }
textarea.input { line-height: 1.5; resize: vertical; }

/* A problem sits under the box it is about. A block has the weight of the
   required colour; a warning is quieter, because it does not stop anything. */
.field-problem { margin: 2px 0 0; font-size: 12.5px; line-height: 1.45; display: flex; gap: 8px; align-items: baseline; }
.problem-tag { flex: none; font-size: 10.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; padding: 2px 6px; border-radius: 3px; }
.field-problem.is-block { color: var(--required); }
.field-problem.is-block .problem-tag { background: #fbf1ea; color: var(--required); }
.field-problem.is-warn { color: var(--amber); }
.field-problem.is-warn .problem-tag { background: var(--amber-bg); color: var(--amber); }
.field-problem.is-clear { color: var(--green); }
.field-problem.is-clear .problem-tag { background: var(--green-bg); color: var(--green); }
.field-row.is-blocked > label .input { border-color: #d9a88c; }
.field-row.is-warned > label .input { border-color: var(--tan); }

.slug-input { display: flex; align-items: center; gap: 0; }
.slug-fixed { font-family: ui-monospace, monospace; font-size: 12.5px; color: var(--subtle); padding: 0 6px; flex: none; }
.slug-input .input { font-family: ui-monospace, monospace; font-size: 12.5px; flex: 1; min-width: 0; }

.amenity-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.also-found { border-top: 1px solid var(--rule); padding-top: 12px; }
.also-found > summary { cursor: pointer; font-size: 13px; color: var(--brown); padding: 6px 0; }
.also-group { border: 0; margin: 10px 0 0; padding: 0; }
.also-group legend { font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--subtle); padding: 0 0 6px; }
.also-group { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px 12px; }
.also-group legend { grid-column: 1 / -1; }
.check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); padding: 3px 0; }

.bedroom-rows { display: flex; flex-direction: column; gap: 10px; }
.bedroom-row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); gap: 10px; padding: 10px 12px; border: 1px solid var(--rule); border-radius: 6px; background: var(--surface-head); }
.bedroom-row.is-new { background: transparent; border-style: dashed; }
.bedroom-row .field-problem { grid-column: 1 / -1; }

.form-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 12.5px; }
.form-actions .btn:disabled { background: var(--grey-bg); color: var(--grey-ink); cursor: not-allowed; }

/* The photo picker */
.room-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.room-tab { display: flex; flex-direction: column; gap: 2px; border: 1px solid var(--line-strong); border-radius: 6px; padding: 8px 12px; min-height: 44px; justify-content: center; background: #fff; }
.room-tab.is-on { border-color: var(--brown); background: var(--tint); }
.room-tab-name { font-size: 13px; font-weight: 500; color: var(--ink); }
.room-tab-state { font-size: 11px; color: var(--subtle); }
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.photo { margin: 0; }
.photo button { display: block; width: 100%; padding: 0; border: 2px solid transparent; border-radius: 8px; background: var(--surface); cursor: pointer; overflow: hidden; text-align: left; }
.photo button:hover { border-color: var(--tan); }
.photo.is-chosen button { border-color: var(--brown); }
.photo img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: var(--tint); }
.photo-code { display: block; font-family: ui-monospace, monospace; font-size: 10.5px; color: var(--subtle); padding: 5px 8px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.photo-taken { display: block; font-size: 11px; color: var(--amber); padding: 0 8px 6px; }

/* Publish */
.publish-listing { border-top: 1px solid var(--rule); padding-top: 10px; margin-top: 10px; }
.publish-listing-name { font-size: 13px; font-weight: 500; }
.changes { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.change { border: 1px solid var(--rule); border-radius: 6px; padding: 8px 10px; font-size: 12.5px; }
.change-where { color: var(--ink); margin-bottom: 4px; }
.change-from { color: var(--muted); text-decoration: line-through; text-decoration-color: #c9bda8; overflow-wrap: anywhere; }
.change-to { color: var(--green); overflow-wrap: anywhere; }

@media (max-width: 640px) {
  .header-name { display: none; }
  .listings-grid, .listings-grid-plain { min-width: 0; }
  .listings-table { overflow: visible; }
  .field-row.is-short { max-width: none; }
  .amenity-grid { grid-template-columns: minmax(0, 1fr); }
  .also-group { grid-template-columns: minmax(0, 1fr); }
  .bedroom-row { grid-template-columns: minmax(0, 1fr); }
  .form-section { padding: 14px 16px 16px; }
  .form-actions { flex-direction: column; align-items: stretch; }
  .form-actions .btn { width: 100%; }
  .photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .room-tab { flex: 1 1 calc(50% - 4px); }
  .field-problem { font-size: 13px; }
}