/* ============================================================================
   vantage-document.css — canonical client-facing DOCUMENT viewer primitives.

   One concept, one source (Rule G-1). Every page that renders a signable
   customer document — the proposal/contract (proposal.html) and the change
   order (co.html) — consumes THESE rules. Do not re-declare any component
   category below in a page <style> block; a page may add only genuinely
   page-specific layout (option selectors, annotation/flag UI, print/export).

   These class names were already treated as shared vocabulary by the theme
   layer (vantage-theme.css styles .area-block / .pnav-* for light mode) while
   their base rules lived only in proposal.html. This file is that missing base.

   Load order: after vantage-ui.css / vantage-buttons.css / vantage-theme.css /
   vantage-facelift.css, BEFORE the page's own <style> block.
   ========================================================================== */

:root {
  --section-max: 900px;
  --content-ml: max(210px, calc(50vw - 345px)); /* centers the 900px block in viewport-minus-nav space */
  --pnav-w: 210px;
  --proposal-chrome-h: 0px;
}

/* ── Document action bar (chrome itself is the canonical .v-preview-bar) ── */
.action-bar-logo { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.action-bar-logo img { height: 34px; width: auto; }
.action-bar-title { font-size: 13px; font-weight: 300; color: var(--gold-light); }
.action-bar-title strong { color: var(--gold); }
.action-bar-right { display: flex; align-items: center; gap: 10px; }

/* ── Document status pill ──
   Labels are Title Case, set by the page's status map. Never lowercase the
   raw enum into the pill — `changes_requested` is not customer-facing copy. */
.status-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; border-radius: 20px; font-size: 10px; letter-spacing: 0.01em;
}
.status-pill .dot { width: 7px; height: 7px; border-radius: 50%; }
.s-draft     { background: rgba(150,150,150,0.12); color: #aaa; border: 1px solid #555; }
.s-draft .dot { background: #777; }
.s-submitted { background: rgba(243,156,18,0.12); color: #f39c12; border: 1px solid rgba(243,156,18,0.4); }
.s-submitted .dot { background: #f39c12; }
.s-accepted  { background: rgba(46,204,113,0.12); color: #2ecc71; border: 1px solid rgba(46,204,113,0.4); }
.s-accepted .dot { background: #2ecc71; }
.s-changes   { background: rgba(230,126,34,0.12); color: #e67e22; border: 1px solid rgba(230,126,34,0.4); }
.s-changes .dot { background: #e67e22; }
.s-declined  { background: rgba(192,57,43,0.12); color: #ff8a8a; border: 1px solid rgba(192,57,43,0.4); }
.s-declined .dot { background: #ff8a8a; }
.s-expired   { background: rgba(127,140,141,0.12); color: #95a5a6; border: 1px solid rgba(127,140,141,0.4); }
.s-expired .dot { background: #95a5a6; }

/* ── Cover ── */
.cover {
  min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  border-bottom: 1px solid var(--v-border); position: relative;
  /* Clip the decorative corner arcs (::before/::after) so they don't spill
     past the edges and create a phantom horizontal scrollbar. */
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 20%, rgba(var(--gold-rgb),0.07) 0%, transparent 65%),
              linear-gradient(180deg, var(--v-theme-canvas, var(--bg)) 0%, var(--bg) 60%, var(--bg-mid) 100%);
  /* Clear the fixed .v-preview-bar (56px, vantage-facelift.css) INSIDE the
     cover rather than on the content wrapper. body.v-preview-shell reserves
     no height for that bar, so the tenant logo sat underneath it in client
     mode. Offsetting the wrapper instead reintroduces the empty strip Nate
     removed — the strip shows the page canvas, whereas this padding is
     filled by the cover's own gradient, so the content simply starts lower
     with no visible band. (2026-07-28)
     --proposal-chrome-h is any EXTRA fixed band the page stacks under that bar
     (the snapshot/revision banner). It is added here for the same reason and
     must never be applied to #proposal-content. (2026-08-03) */
  padding: calc(56px + 24px + var(--proposal-chrome-h, 0px)) 40px 80px;
}
/* Decorative corner arcs */
.cover::before {
  content: ''; position: absolute; bottom: -120px; right: -120px;
  width: 500px; height: 500px; border-radius: 50%;
  border: 1px solid rgba(var(--gold-rgb),0.06); pointer-events: none;
}
.cover::after {
  content: ''; position: absolute; top: -60px; left: -60px;
  width: 320px; height: 320px; border-radius: 50%;
  border: 1px solid rgba(var(--gold-rgb),0.05); pointer-events: none;
}
/* Logo + brand block */
.cover-brand {
  display: flex; flex-direction: column; align-items: center;
  margin-bottom: 56px;
}
.cover-brand-logo { width: clamp(72px, 10vw, 110px); height: auto; margin-bottom: 20px; }
.cover-brand-name {
  font-family: var(--font-body);
  font-size: clamp(24px, 4vw, 42px); font-weight: 300;
  color: var(--gold); letter-spacing: 2px; text-align: center; line-height: 1.2;
}
.cover-brand-tagline { margin-top: 10px; text-align: center; }
.cover-brand-rule {
  width: 80px; height: 1px; background: rgba(var(--gold-rgb),0.35); margin: 20px auto 0;
}
/* Client info */
.cover-content-half {
  display: flex; flex-direction: column; align-items: center;
  width: 100%; max-width: 580px; position: relative;
}
.cover-for { margin-bottom: 12px; }
.cover-client-name { font-size: clamp(32px, 5vw, 56px); font-weight: 300; color: var(--gold); text-align: center; margin-bottom: 8px; font-family: var(--font-body); }
.cover-client-attn { text-align: center; color: var(--gold-dim-text, var(--gold-dim)); font-size: 14px; margin-bottom: 8px; }
.cover-gc { text-align: center; margin-top: 14px; }
.cover-gc-label { font-size: 10px; letter-spacing: 0.01em; color: var(--gold-dim-text, var(--gold-dim)); margin-bottom: 4px; }
.cover-gc-name { font-size: 16px; color: var(--gold-light); }
.cover-expiry { margin-top: 8px; font-size: 11px; color: var(--gold-dim-text, var(--gold-dim)); }
.cover-expiry.is-expired { color: var(--red); }
.cover-client-info { text-align: center; color: var(--gold-dim-text, var(--gold-dim)); font-size: 14px; line-height: 2; margin-bottom: 48px; }
.cover-divider { width: 60px; height: 1px; background: var(--gold-dim); margin: 32px auto; }
.cover-property { text-align: center; }
.cover-property-label { margin-bottom: 8px; }
.cover-property-address { font-size: 16px; color: var(--gold-light); }
.cover-meta { margin-top: 60px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0; }
.cover-proposal-num { margin-bottom: 6px; }
.cover-ssi-name { font-size: 14px; color: var(--gold); font-weight: 400; margin-top: 8px; }
.cover-license { margin-top: 4px; }
.cover-scroll-hint {
  margin-top: 32px;
  display: flex; flex-direction: column; align-items: center; gap: 6px; animation: bounce 2s infinite;
}
@keyframes bounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(6px); } }

/* Document identity band — the headline that names WHAT this document is
   (e.g. "Change Order #1"). The proposal's identity is carried by the client
   name; a change order needs its own, because "CO1" alone is not a sentence. */
.cover-doc-kicker {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 16px; border-radius: 999px; margin-bottom: 18px;
  border: 1px solid rgba(var(--gold-rgb),0.45); background: rgba(var(--gold-rgb),0.07);
  font-size: 12px; letter-spacing: 1.5px; color: var(--gold);
}
.cover-doc-code { font-size: clamp(26px, 4vw, 40px); font-weight: 300; color: var(--gold-light); font-family: var(--font-body); letter-spacing: 1px; text-align: center; }
.cover-doc-title { font-size: clamp(16px, 2.4vw, 22px); color: var(--gold-light); text-align: center; max-width: 620px; margin: 10px auto 0; line-height: 1.45; }

/* ── Section layout ── */
.section { padding: 40px 40px; border-bottom: none; scroll-margin-top: 72px; }
.section-inner {
  max-width: var(--section-max); margin: 0 auto;
  background: linear-gradient(180deg, rgba(var(--gold-rgb),0.03), transparent 120px), var(--bg-mid);
  border: 1px solid rgba(var(--gold-dim-rgb),0.4);
  border-radius: 12px; padding: 40px 48px;
}
.section-title { font-size: 32px; font-weight: 300; color: var(--gold); margin-bottom: 32px; font-family: var(--font-body); }

/* When nav is present: push section-inner out of the nav's shadow.
   Subtract the 40px left padding that .section adds so the visual center
   lines up with the cover and about-section (which have no side padding). */
body.has-proposal-nav .section-inner {
  margin-left: calc(var(--content-ml) - 40px);
}
/* Area outer wrap — same centering as section-inner but no card background (area-block provides its own) */
.area-section-content {
  max-width: var(--section-max); margin: 0 auto;
}
body.has-proposal-nav .area-section-content {
  margin-left: calc(var(--content-ml) - 40px);
}
/* Cover: shift flex-centered content into the space right of the nav */
body.has-proposal-nav .cover {
  padding-left: calc(var(--pnav-w) + 40px);
  padding-right: 40px;
}
/* About/Company Summary: shift the inner content block (not the full-width gold bars) */
body.has-proposal-nav .about-inner {
  margin-left: var(--content-ml);
  margin-right: auto;
}
/* Actions block: center the 600px inner within the same 900px content region
   the sections occupy, so its center lines up with the cover/about/sections. */
body.has-proposal-nav .proposal-actions-inner {
  margin-left: calc(var(--content-ml) - 40px + (var(--section-max) - 600px) / 2);
  margin-right: auto;
}
/* Spaces & Systems header — compact card with the section eyebrow + title.
   Area cards sit below it with their own borders. */
.areas-header-section { padding-top: 24px; padding-bottom: 0; }
.areas-header-section .section-inner { padding: 24px 48px 20px; }
.area-outer-section { padding-top: 8px; padding-bottom: 8px; }

/* ── Document sidebar nav ── */
.proposal-nav {
  /* Sits below the 56px utility band AND below any extra document chrome the
     page has reserved (--proposal-chrome-h — the snapshot banner). Without the
     second term the nav's first label renders underneath that banner. */
  position: fixed; top: calc(56px + var(--proposal-chrome-h, 0px)); left: 0; bottom: 0; width: var(--pnav-w); z-index: 150;
  background: var(--bg-mid); backdrop-filter: blur(12px);   /* same surface as the builder's .sidebar */
  border-right: 1px solid var(--v-border); overflow-y: auto;
  padding: 16px 0 60px;
  transform: translateX(-100%); transition: transform 0.3s ease;
}
.proposal-nav.visible { transform: translateX(0); }
/* When a shell is present, slide the document's own action bar + section nav to
   the RIGHT of it — matching how Design sits beside the shell. Gated on the shell
   class so admin/full-bleed use (no shell) and anonymous share-link viewers (no
   shell at all) are unaffected. The --content-ml floor is bumped so content still
   clears the section nav.

   There used to be a second branch here for body.vpn-shell, the retired
   vantage-portal-nav rail: a hardcoded 240px offset, because that rail could not
   collapse. Both audiences now mount the SAME shell, so body.vsb-on covers staff
   and customers alike — and the document chrome follows the rail's collapse
   instead of being pinned to a width that no longer describes it. */
@media (min-width: 1025px) and (hover: hover) and (pointer: fine) {
  /* The shell offsets flowing content via body padding-left, which flips between
     --sb-w (expanded) and --sb-cw (collapsed, via body.sb-off). The fixed action
     bar + section nav must follow BOTH states, and the centering correction uses
     whichever width is active. */
  body.vsb-on { --content-ml: max(230px, calc(50vw - var(--sb-w) / 2 - 345px)); }
  body.vsb-on .action-bar   { left: var(--sb-w); transition: left var(--sb-dur, .22s) var(--sb-ease, ease); }
  body.vsb-on .proposal-nav { left: var(--sb-w); transition: transform .3s ease, left var(--sb-dur, .22s) var(--sb-ease, ease); }
  body.vsb-on .snapshot-banner { left: var(--sb-w); transition: left var(--sb-dur, .22s) var(--sb-ease, ease); }
  body.vsb-on.sb-off { --content-ml: max(230px, calc(50vw - var(--sb-cw) / 2 - 345px)); }
  body.vsb-on.sb-off .action-bar,
  body.vsb-on.sb-off .snapshot-banner,
  body.vsb-on.sb-off .proposal-nav { left: var(--sb-cw); }
}
.pnav-label { padding: 0 14px; margin: 14px 0 4px; display: block; }
.pnav-btn {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 9px 14px; background: none; border: none; border-left: 2px solid transparent;
  color: rgba(var(--gold-light-rgb),0.55); font-family: var(--font); font-size: 12px;
  cursor: pointer; text-align: left; transition: all 0.15s; letter-spacing: 0.2px;
}
.pnav-btn:hover { color: var(--gold-light); background: rgba(var(--gold-rgb),0.05); }
.pnav-btn.active { color: var(--gold); border-left-color: var(--gold); background: rgba(var(--gold-rgb),0.07); }
.pnav-area {
  display: flex; align-items: center; gap: 7px; width: 100%;
  padding: 6px 14px 6px 26px; background: none; border: none; border-left: 2px solid transparent;
  color: var(--gold-dim-text, var(--gold-dim)); font-family: var(--font); font-size: 11px;
  cursor: pointer; text-align: left; transition: all 0.15s;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pnav-area:hover { color: var(--gold-light); background: rgba(var(--gold-rgb),0.04); }
.pnav-area.active { color: var(--gold); border-left-color: var(--gold-dim); }
.pnav-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; opacity: 0.6; }
.pnav-dot.optioned { background: #4a9fc4; opacity: 1; }
.pnav-dot.add    { background: var(--green); opacity: 1; }
.pnav-dot.modify { background: var(--yellow, #f39c12); opacity: 1; }
.pnav-dot.remove { background: #ff8a8a; opacity: 1; }
.pnav-divider { border: none; border-top: 1px solid rgba(var(--gold-dim-rgb),0.3); margin: 8px 14px; }
/* Centered twice over: the box itself is centered in the rail (auto inline
   margins), and every line inside it is center-justified. */
.pnav-total {
  margin: 16px auto 0; width: calc(100% - 28px); padding: 10px 14px;
  border: 1px solid var(--v-border); border-radius: 6px; background: var(--gold-fill);
  text-align: center;
}
.pnav-total-label { margin-bottom: 3px; text-align: center; }
.pnav-total-value { font-size: 16px; font-weight: 300; color: var(--gold); text-align: center; }
.pnav-total-value.positive { color: var(--green); }
.pnav-total-value.negative { color: #ff8a8a; }
/* Mobile: nav becomes a slide-in drawer, hidden until toggled */
@media (max-width: 1120px) {
  .proposal-nav { display: block; } /* kept in DOM; transform hides it */
  body.has-proposal-nav .section-inner { margin-left: auto !important; }
  body.has-proposal-nav .area-section-content { margin-left: auto !important; }
  body.has-proposal-nav .cover { padding-left: 40px !important; padding-right: 40px !important; }
  body.has-proposal-nav .about-inner { margin-left: auto !important; }
  body.has-proposal-nav .proposal-actions-inner { margin-left: auto !important; }
}

/* Mobile nav FAB — chrome comes from the canonical .v-fab (vantage-ui.css).
   C34: consumers own PLACEMENT only, so this rule sets position/visibility
   and nothing else. */
.pnav-fab {
  display: none;
  position: fixed;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  right: 20px;
  z-index: 500;
  -webkit-tap-highlight-color: transparent;
}
@media (max-width: 1120px) { .pnav-fab { display: inline-flex; } }

/* ── Tap-outside overlay ── */
.pnav-overlay {
  display: none; position: fixed; inset: 0; z-index: 140;
  background: rgba(10,20,20,0.55); backdrop-filter: blur(2px);
}
.pnav-overlay.open { display: block; }

/* ── Areas / document cards ── */
.areas-header { margin-bottom: 24px; }
.area-block {
  margin-bottom: 20px; scroll-margin-top: 72px;
  background: linear-gradient(160deg, var(--bg-light) 0%, rgba(var(--bg-mid-rgb),0.97) 100%);
  border: 1px solid rgba(var(--gold-dim-rgb),0.3);
  border-top: 2px solid rgba(var(--gold-rgb),0.22);
  border-radius: 12px; padding: 28px 32px 24px;
  box-shadow: 0 6px 28px rgba(0,0,0,0.28), 0 1px 4px rgba(0,0,0,0.18);
}
.area-header-row {
  display: flex; align-items: center; gap: 16px; margin-bottom: 8px;
  padding-bottom: 16px; border-bottom: 1px solid rgba(var(--gold-dim-rgb),0.3);
}
.area-number { width: 30px; height: 30px; border-radius: 5px; border: 1px solid rgba(var(--gold-rgb),0.4); background: rgba(var(--gold-rgb),0.06); display: flex; align-items: center; justify-content: center; font-size: 11px; letter-spacing: 0.5px; color: var(--gold); flex-shrink: 0; }
.area-name-col { display: flex; flex-direction: column; gap: 2px; }
.area-floor-label { opacity: 0.6; }
.area-name { font-size: 22px; font-weight: 300; color: var(--gold); font-family: var(--font-body); letter-spacing: 0.3px; }
.area-type-badge { font-size: 8px; letter-spacing: 0.01em; padding: 3px 9px; border-radius: 3px; background: rgba(var(--gold-rgb),0.05); border: 1px solid rgba(var(--gold-dim-rgb),0.4); color: rgba(var(--gold-dim-rgb),0.85); margin-left: auto; }

/* ── Line-item table ── */
.items-table { width: 100%; border-collapse: collapse; margin-bottom: 0; }
.items-table th {
  font-size: 8px; letter-spacing: 3px; text-transform: uppercase; color: var(--gold-dim-text, var(--gold-dim));
  padding: 6px 14px; text-align: left; vertical-align: middle;
  border-bottom: 1px solid rgba(var(--gold-dim-rgb),0.25);
  opacity: 0.7;
}
.items-table th.right { text-align: right; }
.items-table td { padding: 9px 14px; border-bottom: 1px solid rgba(var(--gold-dim-rgb),0.1); vertical-align: middle; }
.items-table tr:last-child td { border-bottom: none; }
.items-table tbody tr { transition: background 0.15s ease; }
.items-table tbody tr:hover { background: rgba(var(--gold-rgb),0.04); }
/* The table itself and its first cell stay `visible` so a thumbnail's hover-zoom
   can escape the cell. The WRAPPER scrolls, so a wide document table never
   widens the page — a horizontal body scrollbar on a customer document is a bug,
   not a layout. */
.items-table, .items-table td:first-child { overflow: visible; }
.items-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.items-table-wrap::-webkit-scrollbar { height: 0; display: none; }

.area-total-row {
  display: flex; justify-content: flex-end; align-items: center; gap: 20px;
  padding: 16px 14px 4px; background: transparent; border-top: 1px solid rgba(var(--gold-dim-rgb),0.18); margin-top: 10px;
}

/* ── Financial summary card ── */
.fin-card { background: transparent; border: none; padding: 0; }
.fin-line { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid rgba(var(--gold-dim-rgb),0.3); font-size: 14px; }
.fin-line:last-child { border-bottom: none; }
.fin-line-label { color: var(--gold-dim-text, var(--gold-dim)); }
.fin-line-value { color: var(--gold-light); }
.fin-line.subtotal { font-size: 15px; }
.fin-line.subtotal .fin-line-label, .fin-line.subtotal .fin-line-value { color: var(--gold-light); }
.fin-line.total { font-size: 22px; padding-top: 20px; border-top: 2px solid var(--gold-dim); border-bottom: none; }
.fin-line.total .fin-line-label, .fin-line.total .fin-line-value { color: var(--gold); }
.fin-options-note { font-size: 12px; color: var(--gold-dim-text, var(--gold-dim)); margin-bottom: 24px; padding: 12px 16px; background: var(--gold-fill); border-radius: 6px; border-left: 3px solid var(--gold-dim); }
/* Signed money movement — a change order's buckets are deltas, not balances. */
.fin-line-value.positive { color: var(--green); }
.fin-line-value.negative { color: #ff8a8a; }

/* ── Document actions ── */
.proposal-actions {
  padding: 60px 40px; text-align: center;
  background: var(--bg-mid); border-top: 1px solid var(--v-border);
}
.proposal-actions-inner { max-width: 600px; margin: 0 auto; }
.proposal-actions-title { font-size: 24px; font-weight: 300; color: var(--gold); margin-bottom: 8px; font-family: var(--font-body); }
.proposal-actions-sub { font-size: 13px; color: var(--gold-dim-text, var(--gold-dim)); margin-bottom: 36px; line-height: 1.6; }
.action-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ── Shared narrow-viewport behavior ── */
@media (max-width: 700px) {
  /* Same clearance contract as the desktop rule above — the 80px covers the
     fixed utility bar, --proposal-chrome-h covers any extra fixed band under
     it. Dropping the term here would tuck the cover under the snapshot banner
     on phones. */
  .cover { padding: calc(80px + var(--proposal-chrome-h, 0px)) 16px 40px; }
  .cover-brand { margin-bottom: 24px; }
  .cover-meta { gap: 20px; }
  .section { padding: 20px 8px; }
  .section-inner { padding: 16px 8px; }
  .section-title { font-size: 24px; margin-bottom: 16px; }
  .area-block { padding: 18px 12px 16px; }
  .area-header-row { gap: 10px; padding-bottom: 12px; }
  .area-name { font-size: 19px; }
  .action-btns { flex-direction: column; }
  .action-btns > button { width: 100%; }
}