/* ════════════════════════════════════════════════════════════════════
   ATRIUM. The client side, and only the client side.

   WHY THIS FILE EXISTS AT ALL.

   css/app.css serves the staff CRM and the client portal from one place.
   Three of the class names the new client design needs already live there
   and carry the whole internal app:

     .btn    436 uses across index.html and js/
     .card   194 uses
     .page    35 uses, and it is what gives every CRM page its padding

   Redefining any of those in app.css would resize every button Bianca
   uses, re-border every card, and strip the padding off every page. That
   is the same shape of failure as the CSS rule that removed Overview,
   Pipeline and Operations from the sidebar: one line, outside the area
   being worked on, and no line count would have caught it.

   So every rule in this file is scoped under .atrium. That class is put on
   exactly two elements and nowhere else:

     #client-portal          the signed in client shell, which sits outside
                             #main (index.html) and never renders CRM chrome
     the preview wrapper     built by renderPortalPreview() inside
                             #portal-body, so an admin previewing a client
                             sees the same thing the client sees

   A class rather than #client-portal alone, because the preview builds its
   own copy of the chrome and would otherwise drift out of step with the
   real portal, which is the exact failure the old admin preview had.

   THE ONE RULE FOR THIS FILE: no selector without .atrium in front of it.
   Not one. There is a checker for it in the commit below.

   ────────────────────────────────────────────────────────────────────
   FONT WEIGHTS. index.html loads Barlow at 300, 400, 500 and 600 only.
   700 is NOT loaded for Barlow, only for Barlow Condensed. Adding it to
   the shared font link would change how the CRM's own bold text renders,
   which is outside this work, so nothing here asks for Barlow 700.
   Condensed may use 700 and 800 freely.
   ════════════════════════════════════════════════════════════════════ */

.atrium{
  /* Brand, exact values only. Section 2 of CLAUDE.md. */
  --a-teal:#0B3A39;
  --a-coral:#E87D49;
  --a-cream:#F6F6EE;
  --a-gold:#D0942F;
  --a-yellow:#E4C700;
  --a-black:#000000;
  --a-white:#FFFFFF;

  /* Derived. Opacity against a brand value, or a brand to brand mix.
     Nothing invented. */
  --a-ink:var(--a-teal);
  --a-ink-muted:rgba(11,58,57,.70);
  --a-ink-subtle:rgba(11,58,57,.54);
  --a-hairline:rgba(11,58,57,.10);
  --a-surface-alt:rgba(11,58,57,.04);
  --a-attention:rgba(232,125,73,.10);
  --a-tint-coral:rgba(232,125,73,.12);
  --a-tint-gold:rgba(208,148,47,.12);
  --a-tint-teal:rgba(11,58,57,.08);

  /* Text on teal. */
  --a-on-teal:var(--a-cream);
  --a-on-teal-muted:rgba(246,246,238,.80);
  --a-on-teal-hairline:rgba(246,246,238,.20);

  /* DARKENED TEXT TOKENS, and why they are not the brand values.
     White on #E87D49 is 2.82:1 and fails AA. So does #D0942F on white,
     at 2.64:1. Both are taken down against black, which keeps the hue
     and is still only brand values:
       --a-coral-ink  #904E2D  6.34:1 on white, 5.34:1 on the tint
       --a-gold-ink   #89621F  5.48:1 on white, 4.93:1 on the tint
     The full brand values stay on fills, borders and large shapes,
     where the 3:1 rule applies instead. */
  --a-coral-ink:color-mix(in srgb, var(--a-coral) 62%, var(--a-black));
  --a-gold-ink:color-mix(in srgb, var(--a-gold) 66%, var(--a-black));

  /* Elevation. One radius scale, one shadow. --a-radius-pill exists
     because 12px and 8px cannot make a pill, and badges need one. */
  --a-radius:12px;
  --a-radius-sm:8px;
  --a-radius-pill:999px;
  --a-shadow:0 1px 2px rgba(11,58,57,.06);

  /* Shell. */
  --a-bar:64px;
  --a-max:1720px;
  --a-gutter:32px;
}


/* ════════════════════════════════════════════════════════════════════
   THE SHELL. App bar, nav, page frame, footer.

   The seven nav items are still painted by cpPaint() from CLIENT_TABS,
   as buttons with class .cp-tab. Only their clothes changed here, so the
   tab logic, the badges, the deep links and the admin preview all keep
   working untouched.
   ════════════════════════════════════════════════════════════════════ */

.atrium{
  background:var(--a-cream);
  color:var(--a-ink);
  font-family:'Barlow','Helvetica Neue',Arial,sans-serif;
  font-size:15px;
  line-height:1.5;
  display:flex;
  flex-direction:column;
  min-height:100vh;
}

/* ── app bar ── */
.atrium .a-bar{ background:var(--a-teal); flex:0 0 auto; }
.atrium .a-bar-in{
  max-width:var(--a-max); margin:0 auto; padding:0 var(--a-gutter);
  min-height:var(--a-bar); display:flex; align-items:center; gap:24px;
}
.atrium .a-brand{ flex:0 0 auto; display:flex; align-items:center; text-decoration:none; }
.atrium .a-brand img{ height:26px; width:auto; display:block; }

.atrium .a-bar-right{ margin-left:auto; display:flex; align-items:center; gap:8px; flex:0 0 auto; }

/* ── account menu. A native disclosure, so it needs no script and closes
      on Escape without one. ── */
.atrium .a-account{ position:relative; }
.atrium .a-account > summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; gap:8px;
  padding:4px 8px 4px 4px; border-radius:var(--a-radius-pill);
  color:var(--a-on-teal-muted);
  transition:background .15s ease;
}
.atrium .a-account > summary::-webkit-details-marker{ display:none; }
.atrium .a-account > summary:hover{ background:rgba(246,246,238,.10); }
.atrium .a-account-static{ display:flex; align-items:center; gap:8px;
  padding:4px 8px 4px 4px; color:var(--a-on-teal-muted); }
.atrium .a-avatar{
  width:32px; height:32px; border-radius:var(--a-radius-pill); flex:0 0 auto;
  background:var(--a-cream); color:var(--a-teal);
  display:grid; place-items:center;
  font-size:13px; font-weight:600; letter-spacing:.02em;
}
.atrium .a-who{ display:flex; flex-direction:column; line-height:1.2; text-align:left; }
.atrium .a-who b{ font-size:13px; font-weight:600; color:var(--a-on-teal); }
.atrium .a-who span{ font-size:12px; color:var(--a-on-teal-muted); }
.atrium .a-caret{ width:16px; height:16px; fill:none; stroke:currentColor;
  stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; flex:0 0 auto; }
.atrium .a-menu{
  position:absolute; right:0; top:calc(100% + 6px); z-index:30; min-width:170px;
  background:var(--a-white); border:1px solid var(--a-hairline);
  border-radius:var(--a-radius-sm); box-shadow:0 6px 20px rgba(11,58,57,.14);
  padding:4px;
}
.atrium .a-menu button{
  width:100%; text-align:left; font:inherit; font-size:14px; font-weight:500;
  color:var(--a-ink); background:none; border:0; cursor:pointer;
  padding:9px 12px; border-radius:6px;
}
.atrium .a-menu button:hover{ background:var(--a-surface-alt); }

/* ── nav. Restyles the tab buttons cpPaint() already writes. ── */
.atrium .cp-tabwrap{
  position:static; background:none; border-bottom:0; margin-bottom:0;
  flex:1 1 auto; min-width:0;
}
.atrium .cp-tabs{ gap:24px; padding:0; align-items:stretch; }
.atrium .cp-tab{
  min-height:var(--a-bar); padding:0; border:0; border-radius:0;
  border-bottom:2px solid transparent;
  background:none; text-transform:none; letter-spacing:0;
  font-family:'Barlow',sans-serif; font-size:14px; font-weight:500;
  color:var(--a-on-teal-muted);
  transition:color .15s ease;
}
.atrium .cp-tab:hover{ background:none; color:var(--a-on-teal); }
.atrium .cp-tab[aria-selected="true"]{
  background:none; color:var(--a-on-teal); font-weight:600;
  border-bottom-color:var(--a-gold);
}
/* Rule 8 of the brand rules: coral is never placed directly on teal. Gold is
   also the brand's "needs attention" value, so a count in the bar is gold with
   teal numerals and coral stays in the content area meaning overdue. */
.atrium .cp-tab-badge{
  background:var(--a-gold); color:var(--a-teal);
  min-width:20px; height:20px; padding:0 6px; line-height:20px;
  font-size:12px; font-weight:700; border-radius:var(--a-radius-pill);
  font-variant-numeric:tabular-nums;
}
.atrium .cp-tab[aria-selected="true"] .cp-tab-badge{
  background:var(--a-gold); color:var(--a-teal);
}

/* ── page frame ── */
.atrium .a-page{
  flex:1 0 auto;
  max-width:var(--a-max); width:100%; margin:0 auto;
  padding:24px var(--a-gutter) 64px;
}

/* ── footer ── */
.atrium .a-foot{ background:var(--a-teal); flex:0 0 auto; }
.atrium .a-foot-in{
  max-width:var(--a-max); margin:0 auto; padding:24px var(--a-gutter);
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:24px;
  color:var(--a-on-teal-muted); font-size:14px;
}
.atrium .a-foot-in img{ height:20px; width:auto; opacity:.70; }
.atrium .a-foot-in span:nth-child(2){ text-align:center; }
.atrium .a-foot-social{ justify-self:end; }

/* The preview is a panel inside a CRM page, not a whole window, so it must
   not stretch to the viewport or pin a footer. */
#portal-body .atrium{ min-height:0; border-radius:var(--a-radius); overflow:hidden; }
#portal-body .atrium .a-page{ padding-bottom:24px; }

@media (max-width:900px){
  .atrium{ --a-gutter:16px; }
  .atrium .a-bar-in{ flex-wrap:wrap; gap:12px; padding-top:10px; }
  .atrium .cp-tabwrap{ order:3; flex-basis:100%; }
  .atrium .cp-tabs{ gap:18px; overflow-x:auto; }
  .atrium .cp-tab{ min-height:44px; }
  .atrium .a-who{ display:none; }
  .atrium .a-foot-in{ grid-template-columns:1fr; justify-items:center; gap:14px; }
  .atrium .a-foot-social{ justify-self:center; }
}

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

/* ════════════════════════════════════════════════════════════════════
   CONTENT. The grid, the rail, and the pieces Home is built from.
   Everything below is still scoped to .atrium and cannot reach the CRM.
   ════════════════════════════════════════════════════════════════════ */

/* ── the two column grid, and the rail that rides along ── */
.atrium .a-grid{
  display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr);
  gap:32px; align-items:start;
}
.atrium .a-rail{
  display:flex; flex-direction:column; gap:24px; min-width:0;
  position:sticky; top:calc(var(--a-bar) + 24px);
}
#portal-body .atrium .a-rail{ position:static; }

/* ── type ── */
.atrium .a-page-t{ font-size:32px; font-weight:600; line-height:1.15; letter-spacing:-.01em; color:var(--a-ink); }
.atrium .a-h1{ font-size:20px; font-weight:600; line-height:1.3; color:var(--a-ink); }
.atrium .a-h2{ font-size:20px; font-weight:600; line-height:1.3; color:var(--a-ink); }
.atrium .a-h3{ font-size:16px; font-weight:600; line-height:1.35; color:var(--a-ink); }
.atrium .a-meta{ font-size:13px; line-height:1.4; color:var(--a-ink-muted); }
.atrium .a-eyebrow{
  font-family:'Barlow Condensed',sans-serif; font-size:12px; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; color:var(--a-ink-muted);
}
.atrium p{ font-size:15px; line-height:1.5; }

.atrium .a-greet{ padding-bottom:16px; }
.atrium .a-greet p{ margin-top:4px; max-width:64ch; color:var(--a-ink-muted); }
.atrium .a-greet p b{ color:var(--a-ink); font-weight:600; }

/* ── blocks ── */
.atrium .a-block{ display:flex; flex-direction:column; gap:12px; margin-bottom:24px; }
.atrium .a-blockhead{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.atrium .a-link{
  font:inherit; font-size:13px; font-weight:600; color:var(--a-ink-muted);
  background:none; border:0; cursor:pointer; padding:0;
  display:inline-flex; align-items:center; gap:4px;
}
.atrium .a-link:hover{ color:var(--a-ink); }
.atrium .a-link .a-ico{ width:14px; height:14px; }

/* ── cards ── */
.atrium .a-card{
  background:var(--a-white); border:1px solid var(--a-hairline);
  border-radius:var(--a-radius); box-shadow:var(--a-shadow);
}
.atrium .a-card-pad{ padding:12px 16px; }
.atrium .a-cardhead{
  padding:12px 16px; border-bottom:1px solid var(--a-hairline);
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.atrium .a-cardfoot{ padding:12px 16px; border-top:1px solid var(--a-hairline); }
.atrium .a-cardfoot button{
  font:inherit; font-size:13px; font-weight:600; color:var(--a-ink);
  background:none; border:0; cursor:pointer; padding:0;
  display:inline-flex; align-items:center; gap:4px;
}
.atrium .a-cardfoot button:hover{ color:var(--a-gold-ink); }
.atrium .a-cardfoot .a-ico{ width:14px; height:14px; }
.atrium .a-empty{ padding:20px 0; text-align:center; color:var(--a-ink-muted); }

/* ── icons ── */
.atrium .a-ico{ width:20px; height:20px; flex:0 0 auto; }

/* ── list row, one component for guides, deliverables, files ── */
.atrium .a-rows{ display:flex; flex-direction:column; }
.atrium .a-row{
  display:flex; align-items:center; gap:12px; min-height:56px; padding:8px 16px;
  border-top:1px solid var(--a-hairline); color:inherit; text-decoration:none;
  transition:background .15s ease;
}
.atrium .a-rows > .a-row:first-child{ border-top:none; }
.atrium a.a-row:hover{ background:var(--a-surface-alt); }
.atrium .a-tile{
  width:32px; height:32px; border-radius:var(--a-radius-sm); flex:0 0 auto;
  background:var(--a-surface-alt); color:var(--a-teal);
  display:grid; place-items:center;
}
.atrium .a-tile .a-ico{ width:18px; height:18px; }
.atrium .a-row-t{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.atrium .a-row-t b{ font-size:15px; font-weight:500; line-height:1.35; }
.atrium .a-row-t span{ font-size:13px; color:var(--a-ink-muted); line-height:1.35; }
.atrium .a-row-e{
  flex:0 0 auto; display:flex; align-items:center; gap:8px;
  font-size:13px; color:var(--a-ink-muted); font-variant-numeric:tabular-nums;
}
.atrium .a-row-e .a-ico{ width:16px; height:16px; color:var(--a-ink-subtle); }

/* ── team ── */
.atrium .a-person{
  display:flex; align-items:center; gap:12px; min-height:56px; padding:8px 16px;
  border-top:1px solid var(--a-hairline);
}
.atrium .a-rows > .a-person:first-child{ border-top:none; }
.atrium .a-av{
  width:36px; height:36px; border-radius:var(--a-radius-pill); flex:0 0 auto;
  background:var(--a-teal); color:var(--a-cream);
  display:grid; place-items:center; font-size:13px; font-weight:600;
}
.atrium .a-person-t{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.atrium .a-person-t b{ font-size:15px; font-weight:500; }
.atrium .a-person-t span{ font-size:13px; color:var(--a-ink-muted); }
.atrium .a-chip{
  display:inline-flex; align-items:center; height:20px; padding:0 8px; flex:0 0 auto;
  border-radius:var(--a-radius-pill); background:var(--a-tint-teal); color:var(--a-ink);
  font-size:12px; font-weight:600;
}

/* ── help card. Teal, and the only dark card in the rail. ── */
.atrium .a-help{
  background:var(--a-teal); border:0; box-shadow:none; padding:24px;
  display:flex; flex-direction:column; gap:12px;
}
.atrium .a-help .a-eyebrow{ font-size:14px; color:var(--a-gold); }
.atrium .a-help .a-h2{ color:var(--a-cream); }
.atrium .a-help p{ color:var(--a-on-teal-muted); }
.atrium .a-help .a-btn{ align-self:stretch; justify-content:center; margin-top:4px; }
.atrium .a-hours{ font-size:13px; color:var(--a-on-teal-muted); }

/* ── buttons ── */
.atrium .a-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:36px; padding:0 16px; border-radius:var(--a-radius-sm);
  font-family:'Barlow',sans-serif; font-size:14px; font-weight:600;
  border:1px solid transparent; cursor:pointer; white-space:nowrap;
  text-decoration:none;
  /* WITHOUT THIS, a variant that sets no background of its own gets the
     browser's default buttonface grey. That is what made "See the agenda"
     unreadable on the teal card: a-btn-onteal sets a border and a colour and
     nothing else, so cream text landed on pale grey. Every other variant
     happened to set its own background and hid the hole. */
  background:transparent;
  transition:background .15s ease,color .15s ease,border-color .15s ease;
}
/* Coral at full strength fails AA behind white text at 2.82:1, so the solid
   button uses the darkened token at 6.34:1. The full value stays on borders
   and tints where the 3:1 rule applies. */
.atrium .a-btn-primary{ background:var(--a-coral-ink); color:var(--a-white); }
.atrium .a-btn-primary:hover{ background:color-mix(in srgb, var(--a-coral) 50%, var(--a-black)); }
.atrium .a-btn-ghost{ background:var(--a-white); border-color:var(--a-hairline); color:var(--a-ink); }
.atrium .a-btn-ghost:hover{ border-color:var(--a-ink-subtle); }
.atrium .a-btn-cream{ background:var(--a-cream); color:var(--a-teal); }
.atrium .a-btn-cream:hover{ background:var(--a-white); }
.atrium .a-btn-onteal{ border-color:var(--a-on-teal-hairline); color:var(--a-on-teal); }
.atrium .a-btn-onteal:hover{ background:rgba(246,246,238,.12); }
.atrium .a-btn[disabled]{ opacity:.5; cursor:not-allowed; }

/* ── needs you ── */
.atrium .a-acts{ display:flex; flex-direction:column; gap:8px; }
.atrium .a-act{
  background:var(--a-attention); border-left:3px solid var(--a-coral);
  border-radius:var(--a-radius); padding:12px 16px;
  display:flex; flex-direction:column; gap:8px;
}
.atrium .a-act-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.atrium .a-act-body{ flex:1 1 300px; min-width:0; }
.atrium .a-act-body p{ margin-top:4px; max-width:60ch; }
.atrium .a-act-btns{ display:flex; gap:8px; flex:0 0 auto; }
.atrium .a-act-foot{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.atrium .a-consequence{
  font-family:'Barlow Condensed',sans-serif; font-size:12px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color:var(--a-coral-ink);
}
.atrium .a-due{ font-size:13px; color:var(--a-ink-muted); }
.atrium .a-due.is-late{ color:var(--a-coral-ink); font-weight:600; }

/* ── pills ── */
.atrium .a-pill{
  display:inline-flex; align-items:center; gap:6px; flex:0 0 auto;
  height:24px; padding:0 10px; border-radius:var(--a-radius-pill);
  font-size:12px; font-weight:600; font-variant-numeric:tabular-nums;
}
.atrium .a-pill-progress{ background:var(--a-tint-gold); color:var(--a-gold-ink); }
.atrium .a-pill-client{ background:var(--a-tint-coral); color:var(--a-coral-ink); }
.atrium .a-pill-complete{ background:var(--a-tint-teal); color:var(--a-ink); }

/* ── projects, framed as one group ── */
.atrium .a-projframe{ display:flex; flex-direction:column; }
.atrium .a-proj{ padding:16px; border-top:1px solid var(--a-hairline); }
.atrium .a-projframe > .a-proj:first-child{ border-top:none; }
.atrium .a-proj-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.atrium .a-proj-head .a-meta{ margin-top:2px; }

/* ── phase tracker, one component at three scales ── */
.atrium .a-track{ display:flex; margin-top:12px; }
.atrium .a-node{ flex:1; min-width:0; position:relative; display:flex; flex-direction:column; align-items:center; }
.atrium .a-rule{ position:absolute; left:-50%; right:50%; background:var(--a-hairline); }
.atrium .a-node:first-child .a-rule{ display:none; }
.atrium .a-node.is-done .a-rule,
.atrium .a-node.is-now .a-rule{ background:var(--a-teal); }
.atrium .a-mark{
  border-radius:var(--a-radius-pill); background:var(--a-white);
  border:1px solid var(--a-hairline); display:grid; place-items:center;
  position:relative; z-index:1; flex:0 0 auto;
}
.atrium .a-node.is-done .a-mark{ background:var(--a-teal); border-color:var(--a-teal); color:var(--a-cream); }
.atrium .a-node.is-now .a-mark{ border:2px solid var(--a-gold); }
.atrium .a-node.is-now .a-mark::after{ content:""; border-radius:var(--a-radius-pill); background:var(--a-gold); }
.atrium .a-lbl{
  font-family:'Barlow Condensed',sans-serif; font-weight:600; font-size:12px;
  letter-spacing:.05em; text-transform:uppercase; text-align:center;
  line-height:1.2; color:var(--a-ink-subtle);
}
.atrium .a-node.is-done .a-lbl{ color:var(--a-ink); }
.atrium .a-node.is-now .a-lbl{ color:var(--a-gold-ink); font-weight:700; }

.atrium .a-track-compact .a-rule{ top:9px; height:2px; }
.atrium .a-track-compact .a-mark{ width:20px; height:20px; }
.atrium .a-track-compact .a-mark .a-ico{ width:12px; height:12px; stroke-width:2.4; }
.atrium .a-track-compact .a-node.is-now .a-mark::after{ width:8px; height:8px; }
.atrium .a-track-compact .a-lbl{ margin-top:4px; }

.atrium .a-track-full .a-rule{ top:13px; height:2px; }
.atrium .a-track-full .a-mark{ width:28px; height:28px; }
.atrium .a-track-full .a-mark .a-ico{ width:16px; height:16px; stroke-width:2.4; }
.atrium .a-track-full .a-node.is-now .a-mark::after{ width:10px; height:10px; }
.atrium .a-track-full .a-lbl{ margin-top:8px; }

/* Six stage names cannot sit side by side on a phone. Below 720px the labels
   give way and the caption underneath carries the same fact in words. */
.atrium .a-trackcap{ display:none; font-size:13px; color:var(--a-ink-muted); margin-top:8px; }

/* ── the weekly update ── */
.atrium .a-upd + .a-upd{ margin-top:16px; padding-top:16px; border-top:1px solid var(--a-hairline); }
.atrium .a-upd-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding-bottom:12px; margin-bottom:12px; border-bottom:1px solid var(--a-hairline);
}
.atrium .a-lede{ margin-top:4px; max-width:64ch; }
.atrium .a-upd-segs{
  display:grid; grid-template-columns:1fr 1fr; gap:16px;
  margin-top:12px; padding-top:12px; border-top:1px solid var(--a-hairline);
}
.atrium .a-upd-segs .a-eyebrow{ display:block; margin-bottom:4px; }
.atrium .a-upd-segs .is-hold .a-eyebrow{ color:var(--a-coral-ink); }

/* ── the one dark card on the page ── */
.atrium .a-util{
  background:var(--a-teal); color:var(--a-on-teal); border-radius:var(--a-radius);
  padding:12px 16px; display:flex; align-items:center; gap:16px; flex-wrap:wrap;
}
.atrium .a-util-tile{
  width:40px; height:40px; border-radius:var(--a-radius-sm); flex:0 0 auto;
  background:rgba(246,246,238,.10); color:var(--a-gold);
  display:grid; place-items:center;
}
.atrium .a-util-t{ flex:1 1 220px; display:flex; flex-direction:column; gap:2px; }
.atrium .a-util-t b{ font-size:16px; font-weight:600; }
.atrium .a-util-t span{ font-size:13px; color:var(--a-on-teal-muted); }

/* ── narrow. Everything that has to change lives here, after the rules it
      overrides, so nothing is lost to the cascade. ── */
@media (max-width:900px){
  .atrium .a-grid{ grid-template-columns:minmax(0,1fr); }
  .atrium .a-rail{ position:static; }
  .atrium .a-page-t{ font-size:26px; }
  .atrium .a-act-top{ flex-direction:column; }
  .atrium .a-act-btns{ width:100%; }
}
@media (max-width:720px){
  .atrium .a-lbl{ display:none; }
  .atrium .a-trackcap{ display:block; }
  .atrium .a-upd-segs{ grid-template-columns:1fr; }
}

/* ════════════════════════════════════════════════════════════════════
   PROJECTS AND PENDING REVIEW. The two tabs that carry decisions.
   ════════════════════════════════════════════════════════════════════ */

.atrium .a-card-body{ padding:16px; }
.atrium .a-projdetail{ margin-bottom:24px; }
.atrium .a-subhead{ margin:20px 0 8px; }
.atrium .a-card-body > .a-subhead:first-child{ margin-top:0; }

/* ── an item: an episode, a video, a delivery. One shape for all three. ── */
.atrium .a-items{ display:flex; flex-direction:column; }
.atrium .a-item{ padding:16px; border-top:1px solid var(--a-hairline); }
.atrium .a-items > .a-item:first-child,
.atrium .a-rows > .a-item:first-child{ border-top:none; }
.atrium .a-item.is-waiting{ background:var(--a-attention); border-left:3px solid var(--a-coral); }
.atrium .a-item > .a-eyebrow{ display:block; color:var(--a-ink-subtle); }
.atrium .a-item .a-h3{ margin-top:2px; }
.atrium .a-item-head{ display:flex; align-items:center; gap:12px; }
.atrium .a-item-btns{ display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
.atrium .a-item-facts{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-top:10px; }

/* ── decide, decided, and the thread that follows ── */
.atrium .a-decide{
  display:flex; gap:8px; flex-wrap:wrap; margin-top:12px;
  padding-top:12px; border-top:1px solid var(--a-hairline);
}
.atrium .a-decided{
  display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:12px;
  padding-top:12px; border-top:1px solid var(--a-hairline);
}
.atrium .a-thread{ margin-top:12px; display:flex; flex-direction:column; gap:8px; }
.atrium .a-note{ background:var(--a-surface-alt); border-radius:var(--a-radius-sm); padding:12px 14px; }
.atrium .a-note-w{ display:flex; align-items:baseline; gap:8px; margin-bottom:4px; }
.atrium .a-note-w b{ font-size:13px; font-weight:600; }
.atrium .a-note-w span{ font-size:13px; color:var(--a-ink-muted); }
.atrium .a-versions{
  margin-top:12px; padding-top:12px; border-top:1px solid var(--a-hairline);
  display:flex; flex-direction:column; gap:8px;
}
.atrium .a-versions > .a-eyebrow{ display:block; }

@media (max-width:720px){
  .atrium .a-item-head{ flex-wrap:wrap; }
  .atrium .a-decide .a-btn{ flex:1 1 auto; }
}

/* ════════════════════════════════════════════════════════════════════
   UPDATES, MEETINGS, REQUESTS, DELIVERABLES.

   One disclosure component carries all three long lists: past meetings,
   the updates archive, and past requests. A client two years in has
   fifty of each, and three different ways of collapsing them is three
   things to keep in step.
   ════════════════════════════════════════════════════════════════════ */

.atrium .a-discs{ display:flex; flex-direction:column; }
.atrium .a-disc{ border-top:1px solid var(--a-hairline); }
.atrium .a-discs > .a-disc:first-child{ border-top:none; }
.atrium .a-disc-hd{
  width:100%; display:flex; align-items:center; gap:12px; text-align:left;
  padding:14px 16px; min-height:56px; background:none; border:0; cursor:pointer;
  font:inherit; color:inherit; transition:background .15s ease;
}
.atrium .a-disc-hd:hover{ background:var(--a-surface-alt); }
.atrium .a-disc-d{
  flex:0 0 108px; font-size:13px; color:var(--a-ink-muted);
  font-variant-numeric:tabular-nums;
}
.atrium .a-disc-s{ flex:1; min-width:0; font-size:15px; font-weight:500; }
.atrium .a-disc-x{ display:flex; color:var(--a-ink-subtle); transition:transform .15s ease; }
.atrium .a-disc-x .a-ico{ width:16px; height:16px; }
.atrium .a-disc[data-open="true"] .a-disc-x{ transform:rotate(90deg); }
.atrium .a-disc-bd{ display:none; padding:0 16px 16px; }
.atrium .a-disc[data-open="true"] .a-disc-bd{ display:block; }
.atrium .a-disc-bd > .a-eyebrow{ display:block; margin-bottom:6px; }

/* We have replied and they have not opened it. */
.atrium .a-unread{
  width:8px; height:8px; border-radius:var(--a-radius-pill);
  background:var(--a-coral); flex:0 0 auto;
  /* A state indicator, so its boundary needs 3:1 under WCAG 1.4.11. Coral on
     white is 2.82. The rim is the darkened coral at 6.34, which carries the
     edge while the fill stays the brand value. */
  border:1px solid var(--a-coral-ink);
}

/* ── meetings ── */
.atrium .a-item.is-next{ background:rgba(208,148,47,.06); border-left:3px solid var(--a-gold); }
.atrium .a-mlinks{ margin-bottom:4px; }
.atrium .a-mblock{ margin-top:12px; }
.atrium .a-mblock .a-eyebrow{ display:block; margin-bottom:6px; }
.atrium .a-mblock ul{ padding-left:18px; display:flex; flex-direction:column; gap:4px; }
.atrium .a-mblock li{ font-size:15px; line-height:1.5; max-width:70ch; }

/* ── filter bar ── */
.atrium .a-filterbar{
  display:flex; gap:8px; flex-wrap:wrap; align-items:center; padding:16px;
  border-bottom:1px solid var(--a-hairline);
}
.atrium .a-filterbar .a-input{ flex:1 1 220px; min-width:180px; }
.atrium .a-filterbar .a-select{ flex:0 1 220px; }
.atrium .a-chipbtn{
  height:38px; padding:0 14px; border-radius:var(--a-radius-sm);
  border:1px solid var(--a-hairline); background:var(--a-white);
  font:inherit; font-size:14px; font-weight:600; color:var(--a-ink-muted);
  cursor:pointer; transition:border-color .15s ease,color .15s ease;
}
.atrium .a-chipbtn:hover{ border-color:var(--a-ink-subtle); color:var(--a-ink); }

/* ── form controls ── */
.atrium .a-fieldgrid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.atrium .a-field{ display:flex; flex-direction:column; gap:4px; margin-bottom:16px; }
.atrium .a-flabel{ font-size:13px; font-weight:600; color:var(--a-ink); }
.atrium .a-hint{ font-size:13px; color:var(--a-ink-muted); }
.atrium .a-input,
.atrium .a-select,
.atrium .a-textarea{
  width:100%; font:inherit; font-size:15px; color:var(--a-ink);
  background:var(--a-white); border:1px solid rgba(11,58,57,.22);
  border-radius:var(--a-radius-sm); padding:9px 12px; min-height:38px;
  transition:border-color .15s ease,box-shadow .15s ease;
}
.atrium .a-input::placeholder,
.atrium .a-textarea::placeholder{ color:var(--a-ink-subtle); }
.atrium .a-input:focus,
.atrium .a-select:focus,
.atrium .a-textarea:focus{
  border-color:var(--a-teal); outline:none; box-shadow:0 0 0 3px rgba(11,58,57,.10);
}
.atrium .a-textarea{ resize:vertical; min-height:104px; line-height:1.5; }
.atrium .a-select{
  appearance:none; padding-right:36px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B3A39' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat:no-repeat; background-position:right 12px center; background-size:18px;
}
.atrium .a-check{ display:flex; align-items:flex-start; gap:8px; font-size:15px; }
.atrium .a-check input{ width:18px; height:18px; margin-top:2px; accent-color:var(--a-teal); flex:0 0 auto; }
.atrium .a-formerr{ font-size:14px; margin-top:8px; }

/* ── deliverables footnote ── */
.atrium .a-notebar{
  padding:12px 16px; border-top:1px solid var(--a-hairline);
  font-size:13px; color:var(--a-ink-muted);
}

.atrium .a-hide-sm{ display:inline; }

@media (max-width:720px){
  .atrium .a-fieldgrid{ grid-template-columns:1fr; }
  .atrium .a-disc-hd{ flex-wrap:wrap; }
  .atrium .a-disc-d{ flex:0 0 100%; }
  .atrium .a-hide-sm{ display:none; }
  .atrium .a-filterbar .a-select,
  .atrium .a-filterbar .a-chipbtn{ flex:1 1 auto; }
}

/* ════════════════════════════════════════════════════════════════════
   PROSE A CLIENT READS

   The weekly update, a delivery description, a request and its reply all
   run through mdRender now, the same renderer the staff side uses, so a
   link Ona types arrives as a link rather than as text to copy out.

   app.css styles .md-body at 13px for a dense staff card. These override
   it for the portal only, because .atrium beats a bare class and this
   file loads second. Nothing here reaches the CRM.
   ════════════════════════════════════════════════════════════════════ */

.atrium .md-body{ font-size:15px; line-height:1.5; color:inherit; }
.atrium .md-body div{ margin-bottom:6px; }
.atrium .md-body div:last-child{ margin-bottom:0; }
.atrium .md-body .md-sp{ height:9px; }

.atrium .md-body ul,
.atrium .md-body ol{ margin:7px 0 7px 20px; padding:0; }
.atrium .md-body li{ margin-bottom:5px; padding-left:2px; }
.atrium .md-body li:last-child{ margin-bottom:0; }
.atrium .md-body ul li::marker{ color:var(--a-ink-subtle); }
.atrium .md-body ol li::marker{ color:var(--a-ink-muted); font-weight:600; }

.atrium .md-body strong,
.atrium .md-body b{ font-weight:600; color:var(--a-ink); }
.atrium .md-body em,
.atrium .md-body i{ font-style:italic; }

.atrium .md-body a{
  color:var(--a-teal);
  text-decoration:underline;
  text-decoration-color:rgba(11,58,57,.35);
  text-decoration-thickness:1px;
  text-underline-offset:2px;
  font-weight:500;
}
.atrium .md-body a:hover{ color:var(--a-coral-ink); text-decoration-color:var(--a-coral-ink); }

.atrium .md-body code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  background:var(--a-surface-alt); color:var(--a-teal);
  padding:1px 5px; border-radius:4px; font-size:.92em;
}

/* AN @MENTION IS INTERNAL. It is how the team tags each other and it means
   nothing to a client, so it reads as ordinary text here rather than as the
   chip the staff side shows. Not stripped in the markup, because a second
   renderer that strips things is how the two fall out of step. */
.atrium .md-body .mention{ background:none; color:inherit; font-weight:inherit; padding:0; }

/* Inside the teal help card and the dark meeting card, prose takes the
   colours of the card it sits on rather than the page. */
.atrium .a-help .md-body a,
.atrium .a-util .md-body a{ color:var(--a-cream); text-decoration-color:rgba(246,246,238,.5); }
.atrium .a-help .md-body strong,
.atrium .a-util .md-body strong{ color:var(--a-cream); }


/* ════════════════════════════════════════════════════════════════════
   THE SAME iOS ZOOM TRAP THE CRM LOST IN v8-233. Ona, 2026-08-27.

   iOS Safari zooms the page in when a client focuses a field whose
   font-size is under 16px, and it does not zoom back out when they
   leave it. Everything after that reads cut off, the fixed header
   included, because the visual viewport is now smaller than the layout
   viewport. That is what made the staff CRM look like it had lost its
   mobile layout, and the portal is one pixel short of the same thing.

   16/15 is a gentle zoom next to the 16/12 the CRM comment box was
   doing, so it looks like a slightly enlarged page rather than a broken
   one. It still traps a client on their phone until they pinch out, and
   a client is far less likely than Ona to know that is what happened.

   Phone only. On a desktop 15px is the deliberate portal size and stays.
   Recorded in ISSUES.md on 2026-08-27 and fixed the same day when Ona
   said to.
   ════════════════════════════════════════════════════════════════════ */
@media (max-width:720px){
  .atrium .a-input,
  .atrium .a-select,
  .atrium .a-textarea{ font-size:16px; }
}

/* ════════════════════════════════════════════════════════════════════
   THE CLIENT'S REPLY BOX (2026-08-28)

   Until now a client could raise a request and read our answer, and that
   was the end of the road. If the answer asked them to go and do
   something there was no way to say it was done, so it came back by
   email, outside the system, and the request sat open with no honest way
   to close it.

   Plain textarea, matching every other form in this portal. The
   formatting toolbar added to the CRM in the same change deliberately
   does not appear here.
   ════════════════════════════════════════════════════════════════════ */

.atrium .a-reply{ margin-top:14px; padding-top:14px; border-top:1px solid var(--a-hairline); }
.atrium .a-reply .a-input{ width:100%; margin-bottom:8px; resize:vertical; min-height:74px; }
.atrium .a-reply .a-btn{ margin-top:2px; }
.atrium .a-reply .a-formerr:empty{ display:none; }

/* ── A NOTE IN THE UPDATES LIST ─────────────────────────────────────────────
   Appended, per the CSS rule in CLAUDE.md. Added 2026-09-10 with migration 134.
   A note and a weekly update sit in one list, so the row has to say which it is
   without a second tab to check. Quiet teal: it is a label, not a warning. */
.atrium .a-tag{ flex-shrink:0; font-family:'Barlow Condensed',sans-serif; font-size:10px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; padding:2px 7px; border-radius:4px; }
.atrium .a-tag-note{ background:rgba(11,58,57,.09); color:#0B3A39; }
@media(max-width:640px){ .atrium .a-tag{ display:none; } }

/* ── HOW ATRIUM WORKS (v8-373) ──────────────────────────────────────────────
   Appended, per the CSS rule in CLAUDE.md. Nothing above is changed.

   NOT scoped to .atrium, on purpose. The panel is added to <body>, so it can
   sit above the app bar and so the same panel serves the client, the admin
   preview and Test the panel on Settings. It therefore names its own colours
   and fonts rather than leaning on the --a- tokens, which only exist inside
   .atrium. Brand palette only. Outfit, with the same fallbacks as --font-ui. */
.a-tour-ov{ position:fixed; inset:0; z-index:9000; background:rgba(0,0,0,.55);
  display:flex; align-items:center; justify-content:center; padding:18px; }
.a-tour{ background:#FFFFFF; border-radius:14px; width:820px; max-width:100%; max-height:calc(100vh - 36px);
  overflow:auto; padding:22px 24px 20px; box-shadow:0 24px 70px rgba(0,0,0,.3);
  font-family:'Outfit','Barlow','Helvetica Neue',Arial,sans-serif; color:#000000; }
.a-tour-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.a-tour-head h2{ margin:0; font-family:inherit; font-size:22px; font-weight:600; color:#0B3A39; line-height:1.25; }
.a-tour-x{ flex-shrink:0; width:36px; height:36px; border:0; border-radius:50%; background:#F6F6EE; cursor:pointer;
  display:flex; align-items:center; justify-content:center; }
.a-tour-x:hover{ background:rgba(11,58,57,.12); }
.a-tour-x svg{ width:16px; height:16px; fill:none; stroke:#0B3A39; stroke-width:2.2; stroke-linecap:round; }
.a-tour-lead{ margin:8px 0 14px; font-size:14.5px; line-height:1.55; color:rgba(0,0,0,.68); }
.a-tour-frame{ position:relative; width:100%; aspect-ratio:16/9; background:#0B3A39; border-radius:10px; overflow:hidden; }
.a-tour-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.a-tour-poster{ display:block; border-radius:10px; overflow:hidden; background:#F6F6EE; }
.a-tour-poster img{ display:block; width:100%; height:auto; }
.a-tour-alt{ margin:10px 0 0; font-size:13px; line-height:1.5; color:rgba(0,0,0,.6); }
.a-tour-alt a{ color:#0B3A39; font-weight:600; }
.a-tour-open{ display:inline-block; background:#E87D49; color:#FFFFFF !important; text-decoration:none; border-radius:8px;
  padding:11px 22px; margin-right:10px; font-size:14px; font-weight:600; }
.a-tour-foot{ display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:16px;
  padding-top:14px; border-top:1px solid rgba(0,0,0,.09); font-size:12.5px; line-height:1.45; color:rgba(0,0,0,.55); }
.a-tour-done{ flex-shrink:0; border:0; border-radius:8px; background:#0B3A39; color:#FFFFFF; cursor:pointer;
  font-family:inherit; font-size:14px; font-weight:600; padding:10px 22px; min-height:44px; }
.a-tour-done:hover{ background:#000000; }
.a-tour-done:focus-visible, .a-tour-x:focus-visible{ outline:2px solid #D0942F; outline-offset:2px; }
@media (max-width:640px){
  .a-tour-ov{ padding:0; align-items:flex-end; }
  .a-tour{ border-radius:14px 14px 0 0; padding:18px 16px calc(16px + env(safe-area-inset-bottom)); max-height:94vh; }
  .a-tour-foot{ flex-direction:column; align-items:stretch; }
}
/* The way back to it, in the help card on every tab. The card is teal, so this
   is cream text; it is a quiet second action under Send a message. */
.atrium .a-help .a-tour-link{ align-self:flex-start; background:none; border:0; padding:6px 0 0; cursor:pointer;
  font-family:'Outfit','Barlow','Helvetica Neue',Arial,sans-serif; font-size:13.5px; font-weight:500;
  color:#F6F6EE; text-decoration:underline; text-underline-offset:3px; min-height:32px; }
.atrium .a-help .a-tour-link:hover{ color:#FFFFFF; }

/* ════════════════════════════════════════════════════════════════════
   2026 DESIGN REFRESH, STAGE 6: THE CLIENT PORTAL. v8-412.
   docs/ATRIUM-DESIGN.md, light first for clients: the dark frame becomes the
   header and footer bands, and every surface a client reads or types into is
   white on a neutral gray page. Same rule as the rest of this file: every
   selector starts with .atrium, so none of it can reach the staff CRM.

   Appended, so the rules above stay readable as history. The token values
   change first, which carries most of it; the components after that set only
   what the tokens cannot.

   CONTRAST. Coral and gold stop being text colours on light. Status is shown
   as a filled pill with black text instead (white on teal), which is also
   what the staff side does. --a-coral-ink and --a-gold-ink stay defined for
   anything still using them.
   ════════════════════════════════════════════════════════════════════ */
.atrium{
  --a-ink:#000000;
  --a-ink-muted:rgba(0,0,0,.65);
  --a-ink-subtle:rgba(0,0,0,.5);
  --a-hairline:rgba(0,0,0,.06);
  --a-surface-alt:rgba(0,0,0,.045);
  --a-attention:rgba(0,0,0,.035);
  --a-tint-teal:rgba(11,58,57,.07);
  --a-radius:22px;
  --a-radius-sm:12px;
  --a-shadow:0 1px 2px rgba(11,58,57,.06),0 14px 34px rgba(11,58,57,.07);
  --a-frame:radial-gradient(700px 500px at 0% 0%, rgba(232,125,73,.22), rgba(232,125,73,0) 60%),
            linear-gradient(170deg, #0B3A39 0%, #000000 85%);
  --a-headline:radial-gradient(300px 200px at 100% 0%, rgba(232,125,73,.35), rgba(232,125,73,0) 70%),
               linear-gradient(130deg, #0B3A39, #000000);
  --a-primary:linear-gradient(120deg, #E87D49, #D0942F);
  --a-display:'Outfit','Helvetica Neue',Arial,sans-serif;
  --a-body:'Manrope','Helvetica Neue',Arial,sans-serif;
  background:linear-gradient(rgba(0,0,0,.045),rgba(0,0,0,.045)),#FFFFFF;
  font-family:var(--a-body);
}

/* ── header and footer bands ── */
.atrium .a-bar,
.atrium .a-foot{ background:#000000; background-image:var(--a-frame); }
.atrium .cp-tabs{ align-items:center; gap:4px; }
.atrium .cp-tab{
  min-height:40px; padding:0 14px; border-bottom:0; border-radius:var(--a-radius-pill);
  font-family:var(--a-body); font-size:14px; font-weight:600;
}
.atrium .cp-tab:hover{ background:rgba(246,246,238,.06); }
.atrium .cp-tab[aria-selected="true"]{ background:rgba(246,246,238,.10); border-bottom:0; }
.atrium .cp-tab-badge,
.atrium .cp-tab[aria-selected="true"] .cp-tab-badge{ background:var(--a-coral); color:#000000; }
.atrium .a-avatar{ background:rgba(246,246,238,.14); color:var(--a-on-teal); }
.atrium .a-menu{ border:0; border-radius:16px; box-shadow:0 14px 34px rgba(0,0,0,.18); padding:6px; }
.atrium .a-menu button{ border-radius:10px; }

/* ── type ── */
.atrium .a-page-t{ font-family:var(--a-display); font-size:36px; letter-spacing:-.02em; }
.atrium .a-h1,
.atrium .a-h2{ font-family:var(--a-display); font-size:21px; }
.atrium .a-h3{ font-family:var(--a-display); }
.atrium .a-eyebrow{
  font-family:var(--a-body); font-size:12px; font-weight:700; letter-spacing:.08em;
  color:rgba(11,58,57,.72);
}
.atrium .a-lbl{ font-family:var(--a-body); font-weight:700; letter-spacing:.04em; }
.atrium .a-node.is-now .a-lbl{ color:var(--a-ink); }
.atrium .a-tag{ font-family:var(--a-body); font-size:11px; letter-spacing:.04em; }

/* ── cards ── */
.atrium .a-card{ border:0; }
.atrium .a-card-pad{ padding:18px 20px; }
.atrium .a-cardhead{ padding:16px 20px; }
.atrium .a-cardfoot{ padding:14px 20px; }
.atrium .a-cardfoot button:hover{ color:var(--a-teal); }
.atrium .a-card-body{ padding:20px; }
.atrium .a-proj,
.atrium .a-item{ padding:18px 20px; }
#portal-body .atrium{ border-radius:var(--a-radius); }

/* The dark cards: the help card in the rail and the utility strip. */
.atrium .a-help,
.atrium .a-util{ background:#000000; background-image:var(--a-headline); }

/* ── buttons ── */
.atrium .a-btn{
  height:40px; padding:0 18px; border-radius:var(--a-radius-pill);
  font-family:var(--a-body); font-size:13px; font-weight:700;
}
.atrium .a-btn-primary{ background:var(--a-primary); color:#000000; font-weight:800; border:0; }
.atrium .a-btn-primary:hover{ background:var(--a-primary); filter:brightness(1.05); }
.atrium .a-btn-ghost{ background:transparent; border:1.5px solid rgba(11,58,57,.35); color:var(--a-teal); }
.atrium .a-btn-ghost:hover{ background:var(--a-tint-teal); border-color:var(--a-teal); }
.atrium .a-btn-cream{ background:#FFFFFF; color:#000000; }
.atrium .a-btn-cream:hover{ background:#FFFFFF; filter:brightness(.96); }
.atrium .a-btn-onteal{ border:1.5px solid var(--a-on-teal-hairline); }
.atrium .a-chipbtn{ height:40px; border:0; border-radius:var(--a-radius-pill); background:var(--a-tint-teal); color:var(--a-teal); font-weight:700; }
.atrium .a-chipbtn:hover{ background:rgba(11,58,57,.13); color:var(--a-teal); }

/* ── needs you, waiting, next meeting: gray with the coloured edge ── */
.atrium .a-act{ border-radius:16px; }
.atrium .a-item.is-next{ background:rgba(0,0,0,.035); }
.atrium .a-consequence{ font-family:var(--a-body); font-size:12px; letter-spacing:.06em; color:#000000; }
.atrium .a-due.is-late{
  display:inline-block; padding:2px 9px; border-radius:var(--a-radius-pill);
  background:var(--a-coral); color:#000000; font-size:12px; font-weight:700;
}
.atrium .a-upd-segs .is-hold .a-eyebrow{ color:#000000; }

/* ── pills: filled, black text, white on teal ── */
.atrium .a-pill{ height:auto; padding:3px 10px; font-family:var(--a-body); font-size:12px; font-weight:700; }
.atrium .a-pill-progress{ background:var(--a-gold); color:#000000; }
.atrium .a-pill-client{ background:var(--a-coral); color:#000000; }
.atrium .a-pill-complete{ background:var(--a-teal); color:#FFFFFF; }

/* ── form fields: gray, borderless, teal focus ring ── */
.atrium .a-input,
.atrium .a-select,
.atrium .a-textarea{
  min-height:44px; padding:10px 14px; border:0; border-radius:var(--a-radius-sm);
  background-color:rgba(0,0,0,.07); font-family:var(--a-body); font-size:15px;
}
.atrium .a-select{ padding-right:40px; }
.atrium .a-input:focus,
.atrium .a-select:focus,
.atrium .a-textarea:focus{ outline:2px solid var(--a-teal); outline-offset:0; box-shadow:none; background-color:#FFFFFF; }
.atrium .a-flabel{ font-family:var(--a-body); font-weight:700; }

/* ── the few shared CRM classes the portal still renders ── */
.atrium .btn{ min-height:40px; padding:0 18px; border:0; border-radius:var(--a-radius-pill); font-family:var(--a-body); font-size:13px; font-weight:700; letter-spacing:0; }
.atrium .btn-sm{ min-height:34px; padding:0 14px; }
.atrium .btn-xs{ min-height:30px; padding:0 11px; font-size:12px; }
.atrium .btn-p{ background:var(--a-primary); color:#000000; }
.atrium .btn-g{ background:var(--a-tint-teal); color:var(--a-teal); }
.atrium .btn-o{ background:transparent; color:var(--a-teal); border:1.5px solid rgba(11,58,57,.35); }
.atrium .card{ border:0; border-radius:var(--a-radius); box-shadow:var(--a-shadow); }
.atrium .bdg{ border-radius:var(--a-radius-pill); font-family:var(--a-body); font-size:11px; font-weight:700; }
.atrium :is(.fi,.fs,.fta){ border:0; border-radius:var(--a-radius-sm); background-color:rgba(0,0,0,.07); font-family:var(--a-body); font-size:15px; min-height:44px; }

@media (max-width:900px){
  .atrium .a-page-t{ font-size:28px; }
  .atrium .cp-tab{ min-height:44px; }
}
@media (max-width:768px){
  /* iOS zooms into anything under 16px. */
  .atrium .a-input,
  .atrium .a-select,
  .atrium .a-textarea,
  .atrium :is(.fi,.fs,.fta){ font-size:16px; }
}

/* ── Header and footer bands, lighter. v8-416.
   Ona, 2026-10-15: the portal's nav bar read as black rather than teal. The
   staff frame gradient runs teal to black over a full-height page; squeezed
   into a 64px band it is mostly the black end. v8-416 then went all the way
   to flat teal, and Ona wanted the gradient back, between the two (v8-417):
   teal on the left with the coral glow, darkening across the bar to a deep
   teal-black on the right, never pure black. ── */
.atrium{
  --a-band:radial-gradient(520px 160px at 0% 0%, rgba(232,125,73,.20), rgba(232,125,73,0) 70%),
           linear-gradient(100deg, rgba(0,0,0,0) 15%, rgba(0,0,0,.6) 100%);
}
.atrium .a-bar,
.atrium .a-foot{ background:#0B3A39; background-image:var(--a-band); }

/* ── Review items on a delivery (migration 174, v8-423) ───────────────── */
.atrium .a-changed{ margin-top:12px; }
.atrium .a-ri-list{ display:flex; flex-direction:column; gap:10px; margin-top:14px; }
.atrium .a-ri{ border:1px solid var(--a-hairline); border-radius:var(--a-radius-sm); padding:12px 14px; background:var(--a-white); }
.atrium .a-ri.is-locked{ background:var(--a-tint-teal); border-color:transparent; }
.atrium .a-ri.is-back{ background:var(--a-tint-coral); border-color:transparent; }
.atrium .a-ri-head{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.atrium .a-ri-n{ font-size:13px; font-weight:600; color:var(--a-ink-subtle); min-width:14px; }
.atrium .a-ri-l{ font-size:14px; font-weight:600; color:var(--a-ink); flex:1 1 auto; }
.atrium .a-ri-ref{ font-size:12px; color:var(--a-ink-muted); background:var(--a-surface-alt); border-radius:var(--a-radius-pill); padding:2px 8px; }
.atrium .a-ri-out{ margin-top:6px; font-size:13px; color:var(--a-ink-muted); display:flex; gap:8px; align-items:baseline; flex-wrap:wrap; }
.atrium .a-ri-lock{ font-size:12px; font-weight:600; color:var(--a-ink); background:var(--a-white); border-radius:var(--a-radius-pill); padding:1px 8px; }
.atrium .a-ri-seg{ display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }
.atrium .a-ri-opt, .atrium .a-ri-choice{
  font:inherit; font-size:13px; cursor:pointer; color:var(--a-ink);
  background:var(--a-white); border:1px solid var(--a-hairline); border-radius:var(--a-radius-sm);
  padding:8px 14px; min-height:44px;
}
.atrium .a-ri-opt.is-on, .atrium .a-ri-choice.is-on{ border-color:var(--a-teal); box-shadow:inset 0 0 0 1px var(--a-teal); background:var(--a-tint-teal); font-weight:600; }
.atrium .a-ri-opt[disabled], .atrium .a-ri-choice[disabled]{ cursor:not-allowed; opacity:.6; }
.atrium .a-ri-choices{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:8px; margin-top:10px; }
.atrium .a-ri-choice{ display:flex; flex-direction:column; align-items:stretch; gap:8px; text-align:left; padding:8px; }
.atrium .a-ri-choice img{ width:100%; aspect-ratio:16/10; object-fit:cover; border-radius:6px; background:var(--a-surface-alt); }
.atrium .a-ri-choice.is-none{ color:var(--a-ink-muted); }
.atrium .a-ri-tl{ display:block; margin-top:10px; margin-bottom:4px; }
.atrium .a-ri .a-input{ width:100%; box-sizing:border-box; }
.atrium .a-ri-foot{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:14px; }
.atrium .a-ri-foot .a-formerr{ flex:1 1 100%; order:3; }
@media (max-width:600px){
  .atrium .a-ri-choices{ grid-template-columns:1fr 1fr; }
  .atrium .a-ri-foot .a-btn{ width:100%; }
}

/* ── Review items, phase two (v8-424) ─────────────────────────────────── */
.atrium .a-ri-changed{ margin:6px 0 0; font-size:13px; line-height:1.5; color:var(--a-ink); background:var(--a-tint-teal); border-radius:6px; padding:6px 10px; }
.atrium .a-dasks{ margin-top:14px; display:flex; flex-direction:column; gap:8px; }
.atrium .a-dask{ display:flex; gap:12px; align-items:center; justify-content:space-between; flex-wrap:wrap;
  border:1px solid var(--a-hairline); border-radius:var(--a-radius-sm); padding:10px 14px; background:var(--a-white); }
.atrium .a-dask.is-done{ background:var(--a-surface-alt); border-color:transparent; }
.atrium .a-dask-t{ display:flex; flex-direction:column; gap:2px; flex:1 1 220px; }
.atrium .a-dask-t b{ font-size:14px; font-weight:600; color:var(--a-ink); }
.atrium .a-dask-b{ display:flex; gap:8px; align-items:center; }
@media (max-width:600px){ .atrium .a-dask-b{ width:100%; } .atrium .a-dask-b .a-btn{ flex:1; } }

/* Review drafts save as they go (176, v8-426) */
.atrium .a-ri-saved{ flex:1 1 200px; }

/* ── The file beside the review (v8-427) ──────────────────────────────── */
.atrium .a-dv-split{ display:grid; grid-template-columns:minmax(0,1.5fr) minmax(320px,1fr); gap:16px; margin-top:14px; align-items:start; }
.atrium .a-dv-tabs{ display:none; }
.atrium .a-dv-view{ position:sticky; top:calc(var(--a-bar) + 12px); display:flex; flex-direction:column; gap:8px; min-width:0; }
.atrium .a-dv-bar{ display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; }
.atrium .a-dv-media{ width:100%; height:calc(100vh - var(--a-bar) - 120px); min-height:480px; border:1px solid var(--a-hairline); border-radius:var(--a-radius-sm); background:var(--a-surface-alt); display:block; }
.atrium video.a-dv-media{ height:auto; min-height:0; max-height:calc(100vh - var(--a-bar) - 120px); background:var(--a-black); }
.atrium .a-dv-help{ margin:0; }
.atrium .a-dv-side{ min-width:0; }
.atrium .a-dv-side > .a-ri-wrap > .a-ri-list:first-child{ margin-top:0; }
@media (max-width:900px){
  .atrium .a-dv-split{ grid-template-columns:1fr; }
  .atrium .a-dv-tabs{ display:flex; gap:6px; }
  .atrium .a-dv-tab{ flex:1; font:inherit; font-size:14px; font-weight:600; min-height:44px; cursor:pointer;
    border:1px solid var(--a-hairline); border-radius:var(--a-radius-sm); background:var(--a-white); color:var(--a-ink); }
  .atrium .a-dv-split[data-tab="review"] .a-dv-tab.is-review,
  .atrium .a-dv-split[data-tab="file"] .a-dv-tab.is-file{ background:var(--a-tint-teal); border-color:var(--a-teal); }
  .atrium .a-dv-split[data-tab="review"] .a-dv-view{ display:none; }
  .atrium .a-dv-split[data-tab="file"] .a-dv-side{ display:none; }
  .atrium .a-dv-view{ position:static; }
  .atrium .a-dv-media{ height:70vh; min-height:360px; }
}