/* ============================================================================
   EDGE SALES OFFICE  |  office.css  |  v1_0
   The presentation design language. EDGE Design Language v1_4 underneath, with
   the type and contrast rules a presentation surface needs on top.

   WHO IS LOOKING AT THIS SCREEN: an advisor and a client, together. Every
   screen here is client facing. There is no internal mode, and that is the
   whole architectural reason the Sales Office is its own site rather than a
   group inside the Advisor Portal: a surface with a client-safe mode and an
   internal mode leaks the day somebody misses a conditional. Here there is
   nothing to leak, so there is no conditional to miss.

   THE THREE VIEWING CONTEXTS IT HAS TO SURVIVE, per Benjamin 19 Aug 2026:
     1. A laptop turned around on a table. Close, but at an angle, and the
        advisor is reaching across to drive it. Hence generous type and hit
        targets no smaller than 40px.
     2. A screen share on a video call. Video compression destroys thin strokes
        and low-contrast greys, so NOTHING here is lighter than --slate on
        white, and no body weight goes below 400.
     3. Printed or exported as a handout. Hence a real print stylesheet at the
        bottom rather than a screenshot.
   It is NOT built for a big room screen. If that changes, the type scale is
   the thing to revisit.

   THE COLOUR RULE THAT IS EASY TO BREAK: coral #fb7e58 is for EDITABLE INPUT
   TEXT ONLY. It is not an accent, not a heading colour, and not a highlight.
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700;800;900&display=swap');

:root{
  --green:#7aac33; --lime:#d0ed65; --cream:#f5f2ec; --slate:#596d7b;
  --dark:#3a4a55;  --border:#dde3e8; --coral:#fb7e58;
  /* THESE TWO ARE THE SITE'S VALUES, not approximations. An earlier draft of
     this file invented --tint:#f7f9f4, which is a green-tinted grey that
     appears nowhere in the brand. buyselledge.com defines both of these and
     this surface now matches it exactly. */
  --tint:#f0f3f5; --green-tint:#f2fce8;
  /* MEASURED, NOT CHOSEN BY EYE. Brand green #7aac33 is 2.42:1 on cream and
     2.67:1 behind white text, both far under the 4.5:1 a small label needs.
     That is invisible on a good monitor and illegible over a compressed video
     share, which is one of the three contexts this surface has to survive. So
     small green text and the green button use this darker green instead:
     5.4:1 on cream, 6.1:1 behind white. It is not a new colour, it is the one
     the Advisor Portal already uses for link text. Brand green stays for
     borders and fills, where contrast rules do not apply. */
  --green-text:#4a6b1c;
  --font:'Poppins', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;

  /* One scale, used everywhere. Sized for a laptop at arm's length across a
     table, which is larger than a desk app and smaller than a room display. */
  --t-body:18px; --t-lede:21px; --t-small:14.5px;
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; font-family:var(--font); font-size:var(--t-body); line-height:1.6;
  color:var(--dark); background:var(--cream); font-weight:400;
}
h1,h2,h3{ margin:0; line-height:1.18; letter-spacing:-0.01em; }
p{ margin:0 0 1em; }
p:last-child{ margin-bottom:0; }
strong{ font-weight:800; }

/* ------------------------------------------------------------------ chrome
   Deliberately plain. A client is looking at this, so the top bar carries the
   firm mark and the screen name and nothing else. No pipeline, no stage, no
   staleness, no client list, no counts. */
/* The 6px lime rule above the header is a signature brand element, copied
   from .site-header on buyselledge.com. It is the fastest way this surface
   reads as EDGE rather than as a generic document. */
.bar{
  background:var(--dark); color:#fff; padding:12px 20px;
  border-top:6px solid var(--lime);
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  position:sticky; top:0; z-index:50;
}
/* THE REAL LOGO, reversed variant, on the dark bar.
   edge-logo-reversed.png is the transparent RGBA artwork the public site uses
   in its own header: the green and lime "e" ring with a WHITE wordmark, so it
   only works on a dark ground. edge-logo.jpg is the dark wordmark variant for
   light grounds, and it is a JPEG with no transparency, so it is used on white
   paper in print and nowhere else. Do not swap them. */
.bar-logo{
  display:block; height:30px; width:auto; flex:none;
}
.bar-mark{
  font-weight:900; font-size:12.5px; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--lime); white-space:nowrap;
}
.bar-screen{ font-weight:700; font-size:15px; color:#fff; }
.bar-screen:before{ content:""; display:inline-block; width:1px; height:15px;
  background:rgba(255,255,255,0.3); margin-right:14px; vertical-align:-2px; }
.bar-right{ margin-left:auto; display:flex; align-items:center; gap:10px; }

/* 40px minimum on anything tappable, because an advisor drives this by
   reaching across a table, often past the client. */
.btn{
  font-family:inherit; font-weight:700; font-size:14.5px; min-height:40px;
  padding:9px 18px; border-radius:8px; border:1.5px solid transparent;
  cursor:pointer; text-decoration:none; display:inline-flex; align-items:center;
  justify-content:center; gap:8px; white-space:nowrap;
}
.btn-lime{ background:var(--lime); color:var(--dark); }
.btn-lime:hover{ filter:brightness(1.06); }
.btn-green{ background:var(--green-text); color:#fff; }
.btn-green:hover{ filter:brightness(1.06); }
.btn-ghost-dark{ border-color:rgba(255,255,255,0.32); color:#fff; background:none; }
.btn-ghost-dark:hover{ border-color:var(--lime); color:var(--lime); }
.btn-ghost{ border-color:var(--border); color:var(--dark); background:#fff; }
.btn-ghost:hover{ border-color:var(--green); color:var(--green); }
.btn[disabled]{ opacity:0.45; cursor:default; }

/* ------------------------------------------------------------------- hero
   The site's hero treatment: the dark ground with a lime wash off the top
   right and a green wash off the bottom left. Both are radial-gradients at low
   alpha, lifted from .hero on buyselledge.com so the two surfaces agree.

   It prints as plain dark text on white, NOT as a band of dark ink. A handout
   that empties a toner cartridge on decoration is a worse handout. */
.hero{
  background:var(--dark); color:#fff;
  background-image:
    radial-gradient(ellipse 900px 480px at 85% -10%, rgba(208,237,101,0.16), transparent 60%),
    radial-gradient(ellipse 700px 420px at -5% 110%, rgba(122,172,51,0.22), transparent 60%);
}
.hero-inner{ max-width:1000px; margin:0 auto; padding:40px 22px 44px; }
.hero .eyebrow{ color:var(--lime); }
.hero h1{ font-weight:900; font-size:clamp(30px,4.6vw,44px); margin-bottom:16px; }
.hero .lede{ color:rgba(255,255,255,0.88); }
.hero-narrow .hero-inner{ max-width:760px; }

.wrap{ max-width:1000px; margin:0 auto; padding:34px 22px 70px; }
.wrap-narrow{ max-width:760px; }
/* Body content sitting under a hero does not need its own top gap. */
.hero + .wrap{ padding-top:30px; }

/* ------------------------------------------------------------------- blocks */
.eyebrow{
  font-weight:900; font-size:12.5px; letter-spacing:0.15em; text-transform:uppercase;
  color:var(--green-text); margin-bottom:12px;
}
h1.page{ font-weight:900; font-size:clamp(30px,4.6vw,44px); margin-bottom:16px; }
p.lede{ font-size:var(--t-lede); color:var(--dark); max-width:44em; }

.card{
  background:#fff; border:1.5px solid var(--border); border-radius:12px;
  padding:24px 26px; margin-bottom:16px;
}
.card h3{ font-weight:800; font-size:20px; margin-bottom:8px; }
.card-num{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:999px; background:var(--dark);
  color:var(--lime); font-weight:900; font-size:15px; flex:none;
}
.grid{ display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); }

.rule{ height:1.5px; background:var(--border); margin:34px 0; border:none; }
.section-h{
  font-weight:900; font-size:13px; letter-spacing:0.13em; text-transform:uppercase;
  color:var(--slate); margin:34px 0 14px;
}

/* Tables: used for the fee schedule, which is the one place money appears. */
table.t{ width:100%; border-collapse:collapse; font-size:var(--t-body); }
table.t th{
  background:var(--dark); color:#fff; text-align:left; padding:12px 16px;
  font-weight:800; font-size:14px; letter-spacing:0.04em;
}
table.t td{ padding:12px 16px; border:1px solid var(--border); }
table.t tr:nth-child(even) td{ background:var(--tint); }
table.t td:last-child{ font-weight:800; white-space:nowrap; }

/* THE EXAMPLE BLOCK. The fee rule on this surface, in Benjamin's words on
   19 Aug 2026: "we can show fee structure but not fee amounts unless in an
   example." A percentage schedule is structure and may appear anywhere on this
   surface. A DOLLAR FIGURE of what EDGE earns may appear ONLY inside this
   block, which labels itself as an example so nobody in the room mistakes it
   for a quote. Do not style anything else to look like this, and do not put a
   real client's numbers in it. */
.example{
  background:var(--green-tint); border:1.5px solid var(--green); border-left-width:6px;
  border-radius:10px; padding:20px 22px; margin:16px 0;
}
.example-tag{
  font-weight:900; font-size:12px; letter-spacing:0.13em; text-transform:uppercase;
  color:var(--green-text); margin-bottom:10px;
}

/* ---------------------------------------------------------------- the deck
   A mini slide deck, one stage at a time. On screen: one slide, big. On paper:
   every slide, in order, one per page. */
.deck{ max-width:1000px; margin:0 auto; padding:26px 22px 40px; }
.slide{
  background:#fff; border:1.5px solid var(--border); border-radius:14px;
  padding:38px 40px; min-height:min(64vh,560px);
  display:flex; flex-direction:column;
}
.slide-step{
  font-weight:900; font-size:12.5px; letter-spacing:0.15em; text-transform:uppercase;
  color:var(--green-text); margin-bottom:14px;
}
.slide h2{ font-weight:900; font-size:clamp(27px,3.7vw,40px); margin-bottom:20px; }
.slide-what{ font-size:clamp(18px,2vw,21px); line-height:1.62; }
.slide-need{
  margin-top:auto; padding-top:22px; border-top:1.5px solid var(--border);
  font-size:17px;
}
.slide-need b{
  display:block; font-weight:900; font-size:12.5px; letter-spacing:0.13em;
  text-transform:uppercase; color:var(--slate); margin-bottom:7px;
}
.slide.hide{ display:none; }
/* Exists for the printed handout only. See the print block at the bottom. */
.print-logo{ display:none; }
.deck-nav{
  display:flex; align-items:center; gap:12px; margin-top:18px; flex-wrap:wrap;
}
.deck-dots{ display:flex; gap:8px; margin:0 auto; }
.dot{
  width:12px; height:12px; border-radius:999px; background:var(--border);
  border:none; padding:0; cursor:pointer;
}
.dot[aria-current="true"]{ background:var(--green); }
.deck-count{ font-weight:800; font-size:14.5px; color:var(--slate); }

/* -------------------------------------------------------------- sign in gate
   Access is the Firestore rules plus the advisors roster, NOT this screen and
   NOT the address. Google sign-in accepts any Google account, so the gate is
   the read of portal/__access_check that follows it. */
.gate{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:24px; background:var(--dark); color:#fff; text-align:center;
}
.gate-box{ max-width:480px; }
.gate h1{ font-weight:900; font-size:clamp(26px,4vw,36px); margin:16px 0 12px; }
.gate p{ color:rgba(255,255,255,0.86); }
.gate .mono{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:14px;
  background:rgba(0,0,0,0.28); border-radius:6px; padding:3px 8px;
  word-break:break-all;
}

/* ------------------------------------------------------------------- launcher */
.launch-grid{ display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); }
.tile{
  display:block; text-decoration:none; color:inherit; background:#fff;
  border:1.5px solid var(--border); border-radius:12px; padding:24px 24px 22px;
}
/* Hover only where there is somewhere to go. A dimmed tile that lights up
   under the cursor reads as clickable, which is exactly the wrong signal. */
a.tile:hover{ border-color:var(--green); }
.tile h3{ font-weight:800; font-size:20px; margin:12px 0 7px; }
.tile p{ font-size:var(--t-small); color:var(--slate); font-weight:600; }
.tile-icon{ font-size:26px; line-height:1; }
/* A screen that is not built yet says so plainly and cannot be opened. Nothing
   here fakes a destination: the staff portal dims its blocked items the same
   way, and a dead link in front of a client is worse than a visible gap. */
.tile.off{ opacity:0.55; }
.tile-soon{
  display:inline-block; margin-top:10px; font-weight:900; font-size:11px;
  letter-spacing:0.12em; text-transform:uppercase; color:var(--slate);
  border:1.5px solid var(--border); border-radius:999px; padding:4px 11px;
}

/* --------------------------------------------------------------------- print
   The handout. Chrome goes, every slide prints, and colour that costs ink but
   carries no meaning goes with it. */
@media print{
  @page{ margin:14mm; }
  body{ background:#fff; font-size:11.5pt; }
  .bar, .deck-nav, .no-print{ display:none !important; }
  /* The handout gets the DARK logo on white paper, printed once at the top.
     .print-logo is empty markup that only exists in print, which is why it is
     display:none on screen. */
  .print-logo{
    display:block !important; width:34mm; height:auto; margin:0 0 8mm;
  }
  /* A dark ink band does not print. The hero becomes ordinary text. */
  .hero{ background:none !important; color:#000 !important;
    background-image:none !important; }
  .hero-inner{ padding:0 !important; max-width:none !important; }
  .hero .eyebrow{ color:#4a6b1c !important; }
  .hero .lede{ color:#000 !important; }
  .wrap, .deck{ padding:0; max-width:none; }
  .card, .slide, .tile, .example{ border-color:#c8ced3; box-shadow:none;
    break-inside:avoid; page-break-inside:avoid; }
  .slide{ min-height:0; margin-bottom:0; page-break-after:always; break-after:page; }
  .slide:last-child{ page-break-after:auto; break-after:auto; }
  .print-all .slide{ display:flex !important; }
  h1.page{ font-size:24pt; }
  .slide h2{ font-size:19pt; }
  .slide-what{ font-size:12pt; }
  table.t th{ background:#3a4a55 !important; -webkit-print-color-adjust:exact;
    print-color-adjust:exact; }
}

/* Nobody is presenting from a phone, but a laptop can be at any width and an
   advisor may have the browser at half screen. */
@media (max-width:560px){
  :root{ --t-body:16.5px; --t-lede:18.5px; }
  .slide{ padding:26px 22px; }
  .card{ padding:20px; }
}

/* ---------------------------------------------------------- the interviews
   office_interview.js, 8 Sep 2026. Fields the advisor fills while the client
   watches, on the same slide the decks use. Inputs are the ONE place coral
   appears, per the colour rule at the top of this file: the client can see
   which words on the screen are theirs. Every tappable thing is 40px or more,
   because the advisor reaches across a table to drive it. */
.iv-slide{ min-height:0; }
.iv-fields{ display:flex; flex-direction:column; gap:18px; }
.iv-grid{ display:grid; gap:14px 18px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.iv-field{ display:flex; flex-direction:column; gap:7px; }
.iv-label{
  font-weight:900; font-size:12.5px; letter-spacing:0.13em; text-transform:uppercase;
  color:var(--slate);
}
.iv-hint{ font-size:var(--t-small); color:var(--slate); font-weight:600; }
.iv-note{ font-size:var(--t-small); color:var(--slate); font-weight:600; margin-bottom:14px; }
.iv-input{
  width:100%; min-height:46px; padding:10px 13px; font:inherit; font-weight:700;
  color:var(--coral); background:#fff; border:1.5px solid var(--border); border-radius:9px;
}
.iv-input:focus{ outline:none; border-color:var(--green); }
.iv-area{ min-height:110px; line-height:1.5; resize:vertical; }
.iv-filter{ margin-bottom:14px; color:var(--dark); }
.iv-choice{ display:flex; flex-wrap:wrap; gap:8px; }
.iv-choice .btn{ min-height:42px; }
.iv-chips{ display:flex; flex-direction:column; gap:8px; }
.iv-chip-list{ display:flex; flex-wrap:wrap; gap:8px; min-height:24px; }
.iv-chip{
  display:inline-flex; align-items:center; gap:8px; padding:7px 12px;
  border-radius:999px; background:var(--green-tint); border:1.5px solid var(--green);
  font-weight:700; font-size:var(--t-small);
}
.iv-chip-x{
  border:none; background:none; font:inherit; font-weight:900; color:var(--slate);
  cursor:pointer; padding:0 2px; min-width:24px; min-height:24px;
}
.iv-chip-add{ display:flex; gap:8px; align-items:center; }
.iv-chip-add .iv-input{ flex:1; }
.iv-stack-row{ display:flex; flex-direction:column; gap:8px; }
.iv-none{ color:var(--slate); font-weight:600; }
.iv-review{ display:flex; flex-direction:column; border-top:1.5px solid var(--border); }
.iv-review-row{
  display:flex; justify-content:space-between; gap:18px; padding:10px 0;
  border-bottom:1.5px solid var(--border);
}
.iv-review-l{ color:var(--slate); font-weight:700; font-size:var(--t-small); flex:none; }
.iv-review-v{ font-weight:800; text-align:right; }
.iv-q{
  background:#fff; border:1.5px solid var(--border); border-radius:12px;
  padding:18px 20px; margin-bottom:14px; display:flex; flex-direction:column; gap:10px;
}
.iv-q-answered{ border-color:var(--green); }
.iv-q-skipped{ opacity:0.6; }
.iv-q-text{ font-weight:800; font-size:20px; line-height:1.35; }
.iv-status{ font-weight:800; font-size:var(--t-small); color:var(--slate); min-width:70px; text-align:center; }
.iv-status.ok{ color:var(--green-text); }
.iv-status.err{ color:#a83333; }
.iv-error{ color:#a83333; font-weight:700; }
.iv-recent{ display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
a.tile.iv-pick{ cursor:pointer; }
@media print{
  .iv-input{ color:var(--dark); border-color:#c8ced3; }
  .iv-chip-add, .iv-chip-x, .iv-choice .btn-ghost{ display:none !important; }
}