/* Luxe Reception Hub: Forest v2 canonical tokens on top of the shared hub stylesheet,
   plus the softphone, voicemail, call log and contacts components. No em/en dashes in copy. */
:root {
  --canvas:#F7F8F6; --canvas-2:#F3F5F2;
  --panel:#FFFFFF; --panel-2:#FFFFFF;
  --line:#EAECE8; --line-2:#DFE3DC;
  --bg-page:#F7F8F6; --bg-card:#FFFFFF; --bg-soft:#F3F5F2; --bg-hover:#F1F3EF;
  --hero-grad:linear-gradient(160deg, #EEF2EF, #FFFFFF 65%);
  --canvas-glow:radial-gradient(1100px 560px at 88% -12%, rgba(27,77,71,.05), transparent 60%);
}
/* The shared stylesheet gives .btn an explicit display, which beats the browser's [hidden]
   rule, so hidden buttons (Disconnect, Answer, keypad) stayed visible. Force it. */
[hidden] { display:none !important; }

/* ---------- sign-in page ----------
   Two panels: a forest brand side that says what this is, and a calm white sign-in side.
   ⚠ Nothing on this page may name the client practices or their numbers. It is reachable by
   anyone who has the URL, and the client relationship is not public. */
.auth-body { margin:0; background:var(--bg-page); }
.auth { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); min-height:100vh; }

.auth-brand { background:linear-gradient(165deg, #1F5C54 0%, #173F3A 55%, #12312D 100%);
  color:#fff; display:flex; align-items:center; padding:56px 6vw; position:relative; overflow:hidden; }
.auth-brand::after { content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(680px 420px at 88% -10%, rgba(127,174,164,.28), transparent 68%),
             radial-gradient(520px 380px at -10% 108%, rgba(245,200,66,.10), transparent 62%); }
.auth-brand-in { position:relative; z-index:1; max-width:440px; }
/* Owl on a light tile. The flat owl mark is dark, so it needs a light plate to read on the
   forest panel, the same treatment the sidebar uses.
   ⚠ Do NOT swap in owl-glass-*.png: those files are ~4% opaque, effectively blank, both in
   G:\My Drive\arma-brand\ and as served from talent.armasourcing.com. */
.auth-owl { display:flex; align-items:center; justify-content:center; width:62px; height:62px;
  margin-bottom:26px; border-radius:18px; background:rgba(255,255,255,.95);
  box-shadow:0 10px 26px -10px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.9); }
.auth-owl img { width:38px; height:38px; display:block; }
.auth-brand h1 { font-size:34px; line-height:1.1; font-weight:800; letter-spacing:-.025em; margin:0 0 12px; color:#fff; }
.auth-tag { font-size:15px; line-height:1.6; color:rgba(255,255,255,.76); margin:0 0 32px; max-width:38ch; }
.auth-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:16px; }
.auth-list li { display:flex; gap:13px; align-items:flex-start; }
.auth-list .ai { flex:0 0 auto; width:32px; height:32px; border-radius:10px; display:grid; place-items:center;
  font-size:14px; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.14); }
.auth-list b { display:block; font-size:14px; font-weight:700; color:#fff; margin-bottom:2px; }
.auth-list span span, .auth-list li > span:last-child { font-size:13px; line-height:1.55; color:rgba(255,255,255,.66); }
.auth-foot { margin:38px 0 0; font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.42); }

.auth-panel { display:flex; align-items:center; justify-content:center; padding:56px 32px; background:var(--bg-card); }
.auth-card { width:100%; max-width:352px; }
.auth-card h2 { font-size:24px; font-weight:800; letter-spacing:-.02em; margin:0 0 8px; color:var(--ink); }
.auth-sub { font-size:14px; line-height:1.6; color:var(--ink-dim); margin:0 0 26px; }
.auth-wide { width:100%; justify-content:center; }

/* Google's guidance is a white button carrying their mark, so it is deliberately not the
   forest primary. It is still the main action here. */
.btn.gsi { width:100%; justify-content:center; gap:11px; background:#fff; color:#1F1F1F;
  border:1px solid var(--line-2); box-shadow:var(--sh); font-size:14.5px; font-weight:600;
  padding:13px 18px; border-radius:12px; white-space:nowrap; }
.btn.gsi:hover { background:#F7F8F6; border-color:var(--mute); text-decoration:none; }
.btn.gsi svg { flex:0 0 auto; }

.auth-alt { margin-top:26px; border-top:1px solid var(--line); padding-top:18px; }
.auth-alt summary { display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600;
  color:var(--ink-dim); cursor:pointer; list-style:none; }
.auth-alt summary::-webkit-details-marker { display:none; }
.auth-alt summary::marker { content:''; }
.auth-alt summary:hover { color:var(--ink); }
.auth-alt .chev { width:0; height:0; border-left:5px solid currentColor;
  border-top:4px solid transparent; border-bottom:4px solid transparent; transition:transform .15s; }
.auth-alt[open] .chev { transform:rotate(90deg); }
.auth-alt form { margin-top:16px; }
.auth-f { display:block; font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:var(--mute); margin-bottom:6px; }
.auth-alt input[type=email] { width:100%; padding:11px 13px; border-radius:10px; font-size:14px;
  border:1px solid var(--line-2); background:#fff; font-family:inherit; color:var(--ink); }
.auth-alt input[type=email]:focus { border-color:var(--green-500); box-shadow:0 0 0 3px var(--green-soft); outline:none; }

@media (max-width:900px) {
  /* rows, not columns. Without an explicit `auto 1fr` the two sections split the viewport
     50/50 and the brand strip grows a dead gap under its own text. */
  .auth { grid-template-columns:1fr; grid-template-rows:auto 1fr; min-height:100dvh; }
  .auth-brand { padding:34px 24px 30px; align-items:flex-start; }
  .auth-brand-in { max-width:none; }
  .auth-owl { width:46px; height:46px; margin-bottom:16px; }
  .auth-brand h1 { font-size:26px; }
  .auth-tag { font-size:14px; margin-bottom:0; }
  .auth-list, .auth-foot { display:none; }
  .auth-panel { padding:36px 24px 48px; align-items:flex-start; }
  .auth-card { max-width:420px; }
  .auth-card h2 { font-size:22px; }
}

.btn.danger { background:var(--bad); color:#fff; }
.btn.danger:hover { background:#C53A3F; }
.btn.sp-answer { background:var(--good); }
.btn.sp-answer:hover { background:#12813B; }
.pill.info { background:var(--info-soft); color:#1D4ED8; }
.pill.mute { background:var(--bg-soft); color:var(--mute); }

/* stat row on Home */
.stat-row .statnum { font-size:26px; font-weight:700; letter-spacing:-.5px; font-variant-numeric:tabular-nums; margin:6px 0 2px; }
.stat-row .statunit { font-size:13px; font-weight:600; color:var(--mute); }
.stat-row .statcap { font-size:12px; color:var(--ink-dim); }
/* The shared stylesheet later re-declares .launch-grid as a flex row, which made the tiles
   ragged. Re-assert grid on our variant, and stack each tile's name over its line label. */
.launch-grid.two { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; }
.launch-grid.two .launch { flex-direction:column; align-items:flex-start; gap:2px; min-height:64px; justify-content:center; }
.launch-grid.two .l-when { font-size:11px; }

/* softphone */
.sp-layout { gap:16px; }
.sp-card { margin-bottom:16px; }
.sp-lines { display:flex; flex-direction:column; gap:6px; margin:10px 0 14px; }
.sp-line { display:flex; justify-content:space-between; gap:12px; padding:8px 12px; border:1px solid var(--line); border-radius:12px; font-size:13.5px; }
.sp-line-name { font-weight:700; }
.sp-line-num { color:var(--ink-dim); }
.sp-actions { display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-top:8px; }
.sp-hint { font-size:12px; color:var(--mute); line-height:1.5; margin-top:8px; }
.sp-callline { font-size:22px; font-weight:800; letter-spacing:-.02em; margin:10px 0 2px; color:var(--green-700); }
.sp-caller { font-size:18px; color:var(--ink); }
.sp-timer { font-size:13px; color:var(--mute); margin:6px 0 10px; }
#sp-callcard.ringing { border-color:var(--gold); box-shadow:0 0 0 4px var(--gold-soft); animation:sp-pulse 1.2s ease-in-out infinite; }
#sp-callcard.active { border-color:var(--green-500); }
@keyframes sp-pulse { 0%,100% { box-shadow:0 0 0 2px var(--gold-soft);} 50% { box-shadow:0 0 0 8px var(--gold-soft);} }
.sp-keypad { display:grid; grid-template-columns:repeat(3, 56px); gap:8px; margin-top:12px; }
.sp-key { height:44px; border:1px solid var(--line-2); border-radius:10px; background:#fff; font-size:16px; font-weight:700; cursor:pointer; font-family:inherit; }
.sp-key:hover { background:var(--bg-hover); }
.sp-dial { display:flex; gap:10px; margin-top:8px; }
.sp-dial input { flex:1; padding:10px 13px; border-radius:10px; font-size:14px; border:1px solid var(--line-2); font-family:var(--mono); }
.sp-dial input:focus { border-color:var(--green-500); box-shadow:0 0 0 3px var(--green-soft); outline:none; }
.sp-checklist { padding-left:18px; font-size:13.5px; line-height:1.6; color:var(--ink-dim); }
.sp-checklist li { margin:4px 0; }
.sp-recent { display:flex; flex-direction:column; gap:6px; font-size:12.5px; }
.sp-recent .ev { display:flex; gap:10px; padding:6px 0; border-top:1px solid var(--line); }
.sp-recent .ev:first-child { border-top:0; }
.sp-recent .ev .t { color:var(--mute); font-family:var(--mono); min-width:64px; }
.lg-grid { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; }
label.f { display:flex; flex-direction:column; gap:5px; font-size:12px; font-weight:700; color:var(--ink-dim); margin-top:10px; }
label.f input, label.f select { padding:9px 12px; border-radius:10px; font-size:13px; border:1px solid var(--line-2); background:#fff; font-family:inherit; font-weight:500; color:var(--ink); }
label.f input:focus, label.f select:focus { border-color:var(--green-500); box-shadow:0 0 0 3px var(--green-soft); outline:none; }

/* ---------- call flows: legibility fixes ----------
   Inherited from the shared sheet: the "do this" block was --ink-dim on a near-white tint and
   the fill-in blank was a 2px dotted line with no height, so both were close to invisible on a
   laptop screen. She reads these mid-call; nothing here may be low contrast. */
.sc-block.note { color: var(--ink); background: #EFF1EE; border-left-color: var(--mute); font-size: 13.5px; }
.sc-block.branch { color: #7A5B00; }
.sc-block.say { color: #123F39; }
/* A blank is a gap she fills out loud. Make it look like one: a tinted slot, not a hairline. */
.sc-block .blank, .sc-legend .blank {
  display: inline-block; min-width: 74px; height: 1.15em; vertical-align: text-bottom;
  border-bottom: 2px solid var(--green-300); background: var(--green-soft);
  border-radius: 3px 3px 0 0; margin: 0 2px;
}
.sc-legend .blank { min-width: 34px; }

/* ---------- knowledge base: say vs never ----------
   A fact that carries a scripted line has to be readable in the second and a half she has
   while a patient is talking. Prose cannot do that, so the two halves get their own colour,
   their own mark and their own block. Red is the line she must not say, green is the line she
   says instead, and the quotation marks signal "these are the actual words". */
.fact.scripted .f-fact { margin-bottom: 10px; }
.f-block { border-radius: 12px; padding: 10px 13px 11px; margin: 0 0 8px; border: 1px solid transparent; }
.f-block-h {
  display: flex; align-items: center; gap: 7px;
  font-size: 9.5px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase;
  margin-bottom: 5px;
}
.f-mark {
  width: 15px; height: 15px; border-radius: 50%; display: inline-grid; place-items: center;
  font-size: 9px; font-weight: 800; color: #fff; flex: 0 0 auto;
}
.f-block p { font-size: 14px; line-height: 1.55; margin: 3px 0 0; }
.f-block p:first-of-type { margin-top: 0; }

.f-block.never { background: var(--bad-soft); border-color: rgba(229, 72, 77, .22); }
.f-block.never .f-block-h { color: #B42318; }
.f-block.never .f-mark { background: var(--bad); }
.f-block.never p { color: #912018; }

.f-block.say { background: var(--good-soft); border-color: rgba(22, 163, 74, .22); }
.f-block.say .f-block-h { color: #15803D; }
.f-block.say .f-mark { background: var(--good); }
.f-block.say p { color: #14532D; font-weight: 500; }

/* voicemails */
.vm-card { margin-bottom:12px; }
.vm-head { display:flex; gap:12px; align-items:center; flex-wrap:wrap; font-size:13px; }
.vm-line { font-weight:700; }
.vm-from { color:var(--ink-dim); }
.vm-when { color:var(--mute); font-size:12px; margin-left:auto; }
.vm-transcript { margin:10px 0 6px; font-size:14px; line-height:1.6; padding:10px 14px; background:var(--bg-soft); border-radius:12px; }
.vm-note { font-size:12.5px; color:var(--ink-dim); margin-bottom:6px; }
.vm-actions { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:8px; }
.vm-actions input[type=text] { flex:1; min-width:200px; padding:8px 12px; border-radius:10px; font-size:13px; border:1px solid var(--line-2); font-family:inherit; }
.vm-done-row { display:flex; gap:14px; align-items:center; padding:9px 14px; border-top:1px solid var(--line); font-size:13px; flex-wrap:wrap; }
.vm-done-row:first-child { border-top:0; }

/* tables */
.tbl { width:100%; border-collapse:collapse; }
.tbl th { padding:11px 14px; text-align:left; font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.8px; color:var(--mute); background:var(--bg-soft); }
.tbl td { padding:12px 14px; font-size:13px; border-top:1px solid var(--line); font-variant-numeric:tabular-nums; vertical-align:top; }
.tbl tr:hover td { background:var(--bg-hover); }

/* contacts */
.ct-row { display:grid; grid-template-columns:150px 1fr; gap:12px; padding:9px 0; border-top:1px solid var(--line); font-size:13.5px; }
.ct-row:first-of-type { border-top:0; }
.ct-k { font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.8px; color:var(--mute); padding-top:2px; }

@media (max-width:900px) {
  .lg-grid { grid-template-columns:1fr; }
  .ct-row { grid-template-columns:1fr; gap:2px; }
  .sp-keypad { grid-template-columns:repeat(3, 1fr); }
}