/* Customer Portal V2: handoff-inspired presentation, with live portal data only. */
:root { --bg:#f2f0e9; --surface:#fffef9; --ink:#171a16; --muted:#62665d; --line:#cbc9bf; --brand:#d4ff3f; --brand-hover:#b9e52a; --brand-ink:#171a16; --lock:#8e3f2f; --pad:24px; font-family:Arial,"Helvetica Neue",Helvetica,sans-serif; }
@media (prefers-color-scheme: dark) { :root { --bg:#181a17; --surface:#242722; --ink:#f5f3eb; --muted:#b8bbb0; --line:#55584f; --brand:#d4ff3f; --brand-hover:#e3ff80; --brand-ink:#171a16; --lock:#ffac93; } }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; background:var(--bg); background-image:linear-gradient(90deg,color-mix(in srgb,var(--line) 42%,transparent) 1px,transparent 1px); background-size:84px 84px; color:var(--ink); line-height:1.5; -webkit-font-smoothing:antialiased; }
.skip-link { position:absolute; top:-4rem; left:1rem; z-index:100; padding:.65rem .9rem; background:var(--brand); color:var(--brand-ink); font-weight:800; text-decoration:none; }
.skip-link:focus { top:0; }
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible { outline:3px solid var(--brand); outline-offset:3px; }
.view h1[tabindex="-1"]:focus,.view h2[tabindex="-1"]:focus { outline:3px solid var(--brand); outline-offset:5px; }
.app-shell { display:flex; flex-direction:column; max-width:1200px; min-height:100vh; margin:0 auto; padding:var(--pad); }
header.portal-header { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:12px 16px; background:var(--ink); color:var(--surface); border:1px solid var(--ink); box-shadow:5px 5px 0 var(--brand); }
.brand { display:inline-flex; align-items:center; gap:10px; color:inherit; text-decoration:none; }
.brand-mark { display:inline-grid; place-items:center; width:34px; height:34px; background:var(--brand); color:var(--brand-ink); font-size:.78rem; font-weight:900; letter-spacing:-.06em; }
.brand-text strong { display:block; font-size:1rem; letter-spacing:-.03em; line-height:1; }
.brand-text small { display:block; margin-top:3px; color:color-mix(in srgb,var(--surface) 72%,transparent); font-size:.66rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
nav.portal-nav { display:flex; flex-wrap:wrap; gap:3px 14px; }
nav.portal-nav a { color:inherit; text-decoration:none; font-size:.76rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; }
nav.portal-nav a:hover { color:var(--brand); }
.view { width:100%; max-width:500px; margin:44px auto; }
.view.wide { max-width:100%; }
.card { margin:16px 0; padding:24px; background:var(--surface); border:1px solid var(--ink); border-radius:3px; box-shadow:4px 4px 0 color-mix(in srgb,var(--ink) 17%,transparent); }
.card--empty { text-align:center; }
.card--empty button { display:block; max-width:20rem; margin-inline:auto; }
.view-heading,.section-heading { display:flex; align-items:end; justify-content:space-between; gap:24px; }
.eyebrow { margin:0 0 7px; color:var(--muted); font-size:.69rem; font-weight:900; letter-spacing:.12em; text-transform:uppercase; }
.portal-view-kicker { max-width:42rem; margin:0; color:var(--muted); font-size:.96rem; }
h1,h2 { margin:0 0 10px; color:var(--ink); letter-spacing:-.055em; line-height:1.02; }
h1 { font-size:clamp(2rem,5vw,4.1rem); }
h2 { font-size:clamp(1.2rem,2.5vw,1.75rem); }
.muted { color:var(--muted); font-size:.92rem; }
.button-link,.back-link { color:var(--ink); font-weight:900; text-decoration:none; }
.button-link { display:inline-flex; align-items:center; gap:16px; min-height:44px; padding:10px 14px; background:var(--brand); border:1px solid var(--ink); white-space:nowrap; font-size:.75rem; letter-spacing:.06em; text-transform:uppercase; }
.button-link:hover { background:var(--brand-hover); }
.back-link { display:inline-block; margin:8px 0 14px; font-size:.76rem; letter-spacing:.06em; text-transform:uppercase; }
.status-banner { margin:26px 0 14px; padding:10px 0; border-block:1px solid var(--ink); color:var(--muted); font-size:.72rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
label { display:block; margin:17px 0 6px; font-size:.72rem; font-weight:900; letter-spacing:.07em; text-transform:uppercase; }
input[type="email"],input[type="password"],input[type="number"],input[type="file"],input:not([type]),select,textarea { width:100%; padding:12px; border:1px solid var(--ink); border-radius:0; background:var(--surface); color:var(--ink); font:inherit; }
input:focus,select:focus,textarea:focus { border-color:var(--ink); background:color-mix(in srgb,var(--brand) 17%,var(--surface)); }
button { width:100%; min-height:46px; margin-top:18px; padding:11px 14px; border:1px solid var(--ink); border-radius:0; background:var(--brand); color:var(--brand-ink); cursor:pointer; font:900 .76rem/1 Arial,"Helvetica Neue",Helvetica,sans-serif; letter-spacing:.07em; text-transform:uppercase; transition:transform .15s ease,background-color .15s ease; }
button:hover { background:var(--brand-hover); transform:translate(-2px,-2px); box-shadow:3px 3px 0 var(--ink); }
button.secondary { background:transparent; color:var(--ink); }
button.secondary:hover { background:var(--ink); color:var(--surface); }
.project-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:18px; }
.project-card { position:relative; min-height:100%; margin:0; overflow:hidden; }
.project-thumbnail { display:grid; place-items:center; width:calc(100% + 48px); height:128px; margin:-24px -24px 20px; background:linear-gradient(135deg,var(--brand) 0 42%,var(--ink) 42% 57%,#ff704e 57%); color:var(--surface); font-size:1.45rem; font-weight:900; letter-spacing:-.09em; }
.project-card:nth-child(3n + 2) .project-thumbnail { background:linear-gradient(135deg,#ff704e 0 42%,var(--ink) 42% 57%,var(--brand) 57%); }
.project-card:nth-child(3n) .project-thumbnail { background:linear-gradient(135deg,var(--ink) 0 42%,var(--brand) 42% 57%,#ff704e 57%); }
.project-facts { display:grid; grid-template-columns:minmax(6.8rem,1fr) 1.2fr; gap:6px 12px; margin:20px 0; padding-top:14px; border-top:1px solid var(--line); font-size:.8rem; }
.project-facts dt { color:var(--muted); font-weight:700; }
.project-facts dd { margin:0; overflow-wrap:anywhere; font-weight:800; text-align:right; }
.project-card .row { display:flex; justify-content:space-between; gap:10px; margin:3px 0; font-size:.9rem; }
.badge { display:inline-block; padding:3px 8px; background:var(--line); color:var(--ink); border-radius:999px; font-size:.7rem; font-weight:800; }
.badge.locked { background:color-mix(in srgb,var(--lock) 18%,var(--surface)); color:var(--lock); }
.portal-project-detail { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:0 18px; }
.portal-project-detail > .back-link { grid-column:1 / -1; }
.portal-project-detail > .card { grid-column:span 6; }
.portal-project-detail > .card:nth-of-type(1),.portal-project-detail > .card:nth-of-type(5) { grid-column:1 / -1; }
.metric-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin:20px 0 6px; }
.metric-grid > div { padding:14px; background:color-mix(in srgb,var(--brand) 25%,var(--surface)); border:1px solid var(--ink); }
.metric-grid strong { display:block; overflow-wrap:anywhere; }
.metric-label { display:block; color:var(--muted); font-size:.7rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase; }
.profile-facts { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:20px 0 28px; }
.profile-facts > div { min-width:0; padding:13px; border:1px solid var(--line); background:color-mix(in srgb,var(--brand) 12%,var(--surface)); }
.profile-facts dt { color:var(--muted); font-size:.66rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.profile-facts dd { margin:5px 0 0; overflow-wrap:anywhere; color:var(--ink); font-size:.88rem; font-weight:800; }
.file-folder { padding:12px 0; border-top:1px solid var(--line); }
.file-row { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 0; }
.file-row .name { overflow-wrap:anywhere; }
.file-row .muted { display:block; }
.file-row-controls { display:grid; gap:6px; min-width:12rem; }
.file-row-controls label { margin:0; font-size:.62rem; }
.file-row-controls select { padding:7px; font-size:.78rem; }
.file-review-status { display:inline-block; margin-top:3px; font-size:.72rem; font-weight:800; }
.file-organization { margin-top:22px; padding-top:16px; border-top:1px solid var(--line); }
.file-organization h3 { margin:0; font-size:1rem; }
.file-organization .compact { margin-top:10px; }
button.compact { width:auto; min-width:7.5rem; margin:0; }
.gantt { display:grid; gap:8px; margin-top:14px; }
.gantt-row { display:grid; grid-template-columns:minmax(9rem,1fr) 2fr; gap:12px; align-items:center; padding:12px; border-left:7px solid var(--brand); background:color-mix(in srgb,var(--brand) 12%,var(--surface)); }
.message { max-width:82%; margin:10px 0; padding:11px 13px; border:1px solid var(--ink); background:var(--surface); }
.message--customer { margin-left:auto; background:color-mix(in srgb,var(--brand) 28%,var(--surface)); }
.message-header { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:5px; }
.message-sender { font-size:.72rem; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
.message-time { color:var(--muted); font-size:.75rem; white-space:nowrap; }
.message p { margin:4px 0; overflow-wrap:anywhere; white-space:pre-wrap; }
#pd-messages { display:grid; gap:2px; max-width:760px; margin:16px 0 18px; }
.preview-title { display:block; margin-bottom:8px; }
.portal-preview-thumbnail { display:block; width:100%; max-width:560px; max-height:360px; margin:12px 0; object-fit:contain; border-radius:10px; background:var(--surface-2, #f4f4f4); }
.timeline { list-style:none; padding:0; margin:0; }
.timeline li { display:flex; align-items:baseline; gap:10px; padding:7px 0; }
.timeline .dot { width:10px; height:10px; flex:0 0 auto; background:var(--line); border-radius:50%; }
.timeline li.reached .dot { background:var(--brand); border:1px solid var(--ink); }
.unavailable { padding:18px 16px; border:1px dashed var(--ink); color:var(--muted); background:color-mix(in srgb,var(--brand) 10%,var(--surface)); font-size:.92rem; text-align:center; }
.notice { margin-top:8px; color:var(--muted); font-size:.84rem; }
.notice a { color:var(--ink); font-weight:800; }
.scroll-x { max-width:100%; overflow-x:auto; }
.portal-footer { margin-top:auto; padding:28px 0 4px; border-top:1px solid var(--ink); text-align:center; }
.portal-footer p { margin:0; color:var(--muted); font-size:.77rem; }
@media (max-width:720px) { .app-shell { padding:16px; } header.portal-header { align-items:flex-start; flex-direction:column; } nav.portal-nav a { font-size:.7rem; } .view { margin:30px auto; } .view-heading { align-items:flex-start; flex-direction:column; } .button-link { width:100%; justify-content:space-between; } .portal-project-detail > .card { grid-column:1 / -1; } }
@media (max-width:520px) { .brand-text small { display:none; } .card { padding:18px; } .project-thumbnail { width:calc(100% + 36px); margin:-18px -18px 18px; } .metric-grid,.profile-facts { grid-template-columns:1fr; } .gantt-row { grid-template-columns:1fr; gap:2px; } .file-row { align-items:flex-start; flex-direction:column; } .file-row-controls { width:100%; } button.compact { width:100%; } }
@media (prefers-reduced-motion: reduce) { * { transition-duration:.01ms !important; } }

/* The lime brand ring alone disappears against light cards. Keep keyboard focus
   perceptible in both themes without changing the data-bearing portal views. */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible { outline-color:var(--ink); box-shadow:0 0 0 5px var(--brand); }
.portal-header a:focus-visible,.portal-header button:focus-visible { outline-color:var(--surface); }

/* Customer-only navigation retained from the portal handoff.  These controls
   use the existing project detail data; unavailable product APIs remain
   explicitly unavailable rather than being represented with sample content. */
body.portal-v2[data-theme="light"] { --ink:#14253d; --muted:#58708c; --surface:#ffffff; --canvas:#f2f6fb; --line:#14253d; --brand:#35c9f5; --brand-deep:#027fae; }
body.portal-v2[data-theme="dark"] { --ink:#eaf4ff; --muted:#aac1d8; --surface:#12223a; --canvas:#071423; --line:#9db5cd; --brand:#61dcff; --brand-deep:#36bde5; }
.portal-theme { width:auto; min-height:34px; margin:0 0 0 auto; padding:7px 10px; border-radius:999px; background:var(--surface); color:var(--ink); box-shadow:none; font-size:.7rem; letter-spacing:.04em; text-transform:uppercase; }
.portal-theme:hover,.portal-theme:focus-visible { background:var(--brand); color:#061421; transform:none; }
.project-switcher { max-width:1180px; margin:16px auto 0; padding:13px 0 3px; border-bottom:1px solid var(--line); }
.project-switcher-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 2px 10px; color:var(--muted); font-size:.7rem; font-weight:800; letter-spacing:.11em; text-transform:uppercase; }
.project-switcher-heading a { color:var(--ink); letter-spacing:0; text-transform:none; }
.project-switcher-list { display:flex; gap:9px; padding:0 1px 11px; overflow-x:auto; scrollbar-width:thin; }
.project-switcher-item { display:grid; grid-template-columns:30px minmax(8.5rem,1fr); align-items:center; gap:9px; width:15.5rem; min-width:15.5rem; min-height:58px; margin:0; padding:8px 10px; border:1px solid var(--line); border-radius:0; background:var(--surface); color:var(--ink); box-shadow:none; text-align:left; }
.project-switcher-item--open { grid-template-columns:30px minmax(8.5rem,1fr) 8px; }
.project-switcher-item:hover,.project-switcher-item:focus-visible { background:color-mix(in srgb,var(--brand) 25%,var(--surface)); color:var(--ink); transform:none; }
.project-switcher-mark { display:grid; width:30px; height:30px; place-items:center; border:1px solid var(--ink); background:var(--brand); color:#061421; font-size:.68rem; font-weight:950; letter-spacing:-.06em; }
.project-switcher-copy { min-width:0; }
.project-switcher-copy strong,.project-switcher-copy small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.project-switcher-copy strong { font-size:.78rem; }
.project-switcher-copy small { margin-top:2px; color:var(--muted); font-size:.67rem; font-weight:700; }
.project-switcher-copy .project-unread-count { color:var(--ink); font-weight:900; }
.project-switcher-dot { width:8px; height:8px; border:1px solid var(--ink); border-radius:50%; background:var(--brand); box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 20%,transparent); }
.project-tabs { display:flex; grid-column:1 / -1; gap:6px; padding:0 0 5px; overflow-x:auto; border-bottom:1px solid var(--line); scrollbar-width:thin; }
.project-tabs button { width:auto; min-width:max-content; min-height:34px; margin:0; padding:7px 11px; border:1px solid transparent; border-radius:0; background:transparent; color:var(--muted); box-shadow:none; font-size:.7rem; font-weight:850; letter-spacing:.07em; text-transform:uppercase; }
.project-tabs button:hover,.project-tabs button:focus-visible { background:color-mix(in srgb,var(--brand) 22%,var(--surface)); color:var(--ink); transform:none; }
.project-tabs button[aria-pressed="true"] { border-color:var(--ink); background:var(--brand); color:#061421; }
.project-tab-badge { display:inline-grid; min-width:1.25rem; height:1.25rem; margin-left:6px; padding:0 4px; place-items:center; border-radius:999px; background:var(--brand); color:#061421; font-size:.64rem; font-weight:950; letter-spacing:0; }
.portal-project-detail > #pd-overview { grid-column:1 / -1; }
#pd-estimates .unavailable { margin:18px 0 0; }
@media (max-width:720px) { .portal-theme { margin:2px 0 0; } .project-switcher { margin-top:8px; } .project-switcher-item { width:13.25rem; min-width:13.25rem; } .project-tabs { gap:4px; } .project-tabs button { padding:7px 9px; } }