/* Client Portal — INTUS brand language (matches intus-website styles.css):
   Cormorant Garamond display serif + Jost sans, warm paper/stone surfaces,
   ink text, antique-gold accents, bronze-on-gold CTAs, hairline borders. */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Jost:wght@300;400;500;600&display=swap');

:root {
  --paper:#FAF8F4; --stone:#F4F1EC; --stone-2:#ECE7DF;
  --ink:#1A1A1A; --ink-soft:#4D4A44; --muted:#8C867B;
  --line:rgba(26,26,26,.16); --line-soft:rgba(26,26,26,.08);
  --gold:#9A7B3F; --bronze:#5A4322; --green:#2C4A33;
  --ok:#2C4A33; --warn:#9A7B3F; --bad:#8C3B2E;
  --serif:'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans:'Jost', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
}
* { box-sizing: border-box; }
body { margin:0; font-family:var(--sans); font-weight:300; color:var(--ink);
       background:var(--paper); -webkit-font-smoothing:antialiased; }
.wrap { max-width:880px; margin:0 auto; padding:22px 16px 72px; }
.hidden { display:none !important; }
.muted { color:var(--muted); }
.small { font-size:12.5px; }
.card { background:#fff; border:1px solid var(--line-soft); border-radius:10px; padding:26px;
        box-shadow:0 18px 44px -32px rgba(26,26,26,.28); margin-bottom:16px; }
.foot { text-align:center; color:var(--muted); font-size:.7rem; letter-spacing:.18em;
        text-transform:uppercase; margin-top:26px; }

/* ── Sign-in ─────────────────────────────────────────────── */
.login { max-width:530px; margin:6vh auto 0; }
.header-img { display:block; width:calc(100% + 52px); margin:-26px -26px 24px; border-radius:10px 10px 0 0; }
.login h1 { font-family:var(--serif); font-weight:500; font-size:2.1rem; margin:2px 0 10px; line-height:1.1; }
.login p.muted { font-weight:300; line-height:1.65; color:var(--ink-soft); }
.fld { display:flex; flex-direction:column; gap:7px; margin:20px 0 16px; }
.fld > span { font-size:.68rem; letter-spacing:.22em; text-transform:uppercase; color:var(--gold); }
input, select, textarea { font:inherit; font-weight:300; padding:12px 14px; border:1px solid var(--line);
       border-radius:2px; width:100%; background:#fff; color:var(--ink); }
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--gold); }
.primary { display:inline-block; border:none; cursor:pointer; border-radius:2px; padding:14px 28px;
       font-family:var(--sans); font-weight:600; font-size:.76rem; letter-spacing:.13em; text-transform:uppercase;
       color:var(--bronze);
       background:linear-gradient(150deg, rgba(154,123,63,.96) 0%, rgba(154,123,63,.82) 55%, rgba(154,123,63,.66) 100%);
       transition:filter .3s; }
.primary:hover { filter:brightness(1.1); }
.primary:disabled { opacity:.55; }
.link { background:none; border:none; cursor:pointer; padding:4px 0;
        font-family:var(--sans); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
        color:var(--muted); transition:color .3s; }
.link:hover { color:var(--gold); }
.err { color:var(--bad); font-size:13px; min-height:18px; margin:10px 0 0; }
.notice { background:var(--stone); border:1px solid var(--line-soft); color:var(--ink-soft);
          padding:12px 14px; border-radius:2px; font-size:13.5px; }
.sent-banner { display:flex; gap:16px; align-items:flex-start; padding:20px; background:var(--stone);
               border:1px solid var(--line-soft); border-radius:6px; }
.sent-banner .check { width:34px; height:34px; border-radius:50%; background:var(--gold); color:#fff;
                      display:grid; place-items:center; font-size:15px; flex:0 0 auto; }
.sent-banner strong { font-family:var(--serif); font-size:1.15rem; font-weight:600; }

/* ── Top bar ─────────────────────────────────────────────── */
.topbar { display:flex; justify-content:space-between; align-items:center; padding:16px 20px; }
.brand-row { display:flex; gap:13px; align-items:center; }
.logo { width:40px; height:40px; border-radius:6px; }
.brand { font-family:var(--sans); font-weight:500; font-size:.8rem; letter-spacing:.24em;
         text-transform:uppercase; color:var(--ink); }
.brand::after { content:""; display:block; width:26px; height:1px; background:var(--gold); margin-top:4px; }
#who { font-size:.72rem; letter-spacing:.06em; }

/* ── Project picker ──────────────────────────────────────── */
.picker { display:grid; gap:12px; margin-bottom:16px; }
.picker h2 { font-family:var(--serif); font-weight:500; font-size:1.5rem; margin:8px 2px 2px; }
.picker .proj { text-align:left; background:#fff; border:1px solid var(--line-soft); border-radius:10px;
                padding:20px 22px; cursor:pointer; font:inherit; font-weight:300;
                transition:transform .45s var(--ease), box-shadow .45s var(--ease); }
.picker .proj:hover { transform:translateY(-3px); box-shadow:0 24px 48px -30px rgba(26,26,26,.35); }
.picker .proj .t { font-family:var(--serif); font-weight:600; font-size:1.25rem; }

/* ── Project head + tabs ─────────────────────────────────── */
.project-head h1 { font-family:var(--serif); font-weight:500; font-size:1.9rem; margin:0 0 6px; line-height:1.12; }
#p-address { font-weight:300; color:var(--ink-soft); }
.badges { display:flex; gap:12px; align-items:center; margin-top:14px; flex-wrap:wrap; }
.badge { display:inline-block; padding:5px 14px; border-radius:999px; border:1px solid var(--gold);
         font-size:.62rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); }
.badge.completed { border-color:var(--green); color:var(--green); }
.badge.on_hold { border-color:var(--muted); color:var(--muted); }
#p-dates { letter-spacing:.04em; }

.tabs { display:flex; gap:2px; overflow-x:auto; margin:2px 0 16px; padding-bottom:2px; }
.tab { background:none; border:none; border-bottom:1px solid transparent; padding:11px 15px;
       font-family:var(--sans); font-size:.7rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase;
       color:var(--muted); cursor:pointer; white-space:nowrap; transition:color .3s; }
.tab:hover { color:var(--gold); }
.tab.active { color:var(--gold); border-bottom-color:var(--gold); }

/* ── Overview ────────────────────────────────────────────── */
.tabpane h2, .card h2 { font-family:var(--sans); font-size:.72rem; font-weight:500; letter-spacing:.24em;
      text-transform:uppercase; color:var(--gold); margin:0 0 6px; }
.fin-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)); gap:12px; margin-top:14px; }
.fin { background:var(--stone); border:1px solid var(--line-soft); border-radius:6px; padding:16px 18px; }
.fin .l { font-size:.62rem; color:var(--muted); text-transform:uppercase; letter-spacing:.18em; }
.fin .v { font-family:var(--serif); font-size:1.65rem; font-weight:600; margin-top:4px; color:var(--ink); }
.fin .v.ok { color:var(--green); } .fin .v.warn { color:var(--gold); } .fin .v.bad { color:var(--bad); }
.summary-text { line-height:1.75; margin-top:12px; white-space:pre-wrap; font-weight:300; color:var(--ink-soft); }
.progressbar { height:5px; background:var(--stone-2); border-radius:999px; overflow:hidden; margin-top:16px; }
.progressbar > div { height:100%; background:linear-gradient(90deg, var(--gold), #B8975B); }

/* ── Updates feed ────────────────────────────────────────── */
.update { border-left:1px solid var(--gold); padding-left:18px; margin:0 0 26px; }
.update .d { font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); }
.update h3 { font-family:var(--serif); margin:4px 0 8px; font-size:1.35rem; font-weight:600; }
.update .b { line-height:1.75; white-space:pre-wrap; font-size:14.5px; font-weight:300; color:var(--ink-soft); }
.photos { display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; }
.photos img { width:108px; height:108px; object-fit:cover; border-radius:6px; border:1px solid var(--line-soft);
              cursor:pointer; transition:transform .45s var(--ease); }
.photos img:hover { transform:scale(1.04); }

/* ── Tables ──────────────────────────────────────────────── */
table { width:100%; border-collapse:collapse; font-size:14px; font-weight:300; }
th, td { text-align:left; padding:11px 9px; border-bottom:1px solid var(--line-soft); vertical-align:top; }
thead th { color:var(--muted); font-weight:500; font-size:.62rem; text-transform:uppercase; letter-spacing:.18em; }
td.num, th.num { text-align:right; white-space:nowrap; }
td { color:var(--ink-soft); }
td:first-child { color:var(--ink); }
.table-scroll { overflow-x:auto; }
.status-pill { display:inline-block; padding:3px 11px; border-radius:999px; font-size:.6rem; font-weight:500;
               letter-spacing:.16em; text-transform:uppercase; border:1px solid; }
.status-pill.paid, .status-pill.installed, .status-pill.approved, .status-pill.signed
  { border-color:var(--green); color:var(--green); background:transparent; }
.status-pill.pending, .status-pill.selected { border-color:var(--line); color:var(--ink-soft); background:transparent; }
.status-pill.ordered { border-color:var(--gold); color:var(--gold); background:transparent; }
.status-pill.delivered { border-color:#6B7B6E; color:#6B7B6E; background:transparent; }
.status-pill.overdue { border-color:var(--bad); color:var(--bad); background:transparent; }
a.doc { color:var(--gold); text-decoration:none; border-bottom:1px solid rgba(154,123,63,.35);
        padding-bottom:1px; transition:border-color .3s; }
a.doc:hover { border-bottom-color:var(--gold); }
.cat-head { font-family:var(--serif); font-weight:600; font-size:1.1rem; padding-top:20px; text-transform:capitalize;
            color:var(--ink); }
.thumb { width:46px; height:46px; object-fit:cover; border-radius:4px; border:1px solid var(--line-soft); cursor:pointer; }
.empty { color:var(--muted); font-size:14px; font-weight:300; padding:18px 4px; font-style:italic;
         font-family:var(--serif); font-size:1.05rem; }

/* ── Lightbox ────────────────────────────────────────────── */
.lightbox { position:fixed; inset:0; background:rgba(15,13,10,.88); display:grid; place-items:center;
            z-index:50; cursor:zoom-out; padding:24px; }
.lightbox img { max-width:100%; max-height:100%; border-radius:6px; }

@media (max-width: 560px) {
  .card { padding:18px; }
  .header-img { width:calc(100% + 36px); margin:-18px -18px 16px; }
  .project-head h1 { font-size:1.6rem; }
  /* Top bar: keep the brand on one line, truncate the email. */
  .topbar { padding:14px 16px; gap:8px; }
  .logo { width:34px; height:34px; }
  .brand { font-size:.66rem; letter-spacing:.18em; white-space:nowrap; }
  #who { max-width:52vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .link { white-space:nowrap; }
  /* Financial tiles: two per row instead of a tall single column. */
  .fin-grid { grid-template-columns:repeat(2, 1fr); gap:9px; }
  .fin { padding:12px 13px; }
  .fin .l { font-size:.56rem; letter-spacing:.14em; }
  .fin .v { font-size:1.3rem; }
  /* Tables become stacked cards on phones — no sideways scrolling. */
  .rtable, .rtable tbody, .rtable tr, .rtable td { display:block; width:100%; }
  .rtable thead { display:none; }
  .rtable tr { padding:15px 0; border-bottom:1px solid var(--line-soft); }
  .rtable tr:last-child { border-bottom:none; }
  .rtable td { border:none; padding:3px 0; }
  .rtable td.num { text-align:left; }
  .rtable td:empty { display:none; }
  .rtable td[data-label]::before { content:attr(data-label); display:block; font-size:.56rem;
      letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin-bottom:1px; }
  .rtable td:first-child { font-family:var(--serif); font-size:1.15rem; font-weight:600; color:var(--ink); }
  .rtable .cat-head { border-bottom:none; padding:18px 0 0; }
  .rtable .thumb { width:64px; height:64px; }
  /* All six tabs visible at once on phones: 3×2 grid of pills, no side-scroll. */
  .tabs { display:grid; grid-template-columns:repeat(3, 1fr); gap:7px; overflow:visible; }
  .tab { border:1px solid var(--line-soft); border-radius:2px; background:#fff; padding:11px 2px;
         text-align:center; font-size:.62rem; letter-spacing:.14em; }
  .tab.active { border-color:var(--gold); background:var(--gold); color:#fff; }
}