/* ============================================================================
   Eclipse Portal — v3 "Corona" refinements. ADDITIVE OVERRIDE SHEET.
   Loaded ONLY on explicit opt-in (?ui=v3, persisted via the ui3 cookie), AFTER
   app-v2.css. Contains no layout-structural rules and no new DOM expectations:
   every selector targets a class that already exists. If this file 404s or is
   removed, the portal renders exactly as it does without it — that is the whole
   point of shipping it as a third sheet rather than editing v2.
   NOTHING here can change behaviour: it is stylesheet-only, zero JS.
   ============================================================================ */

/* ---------- 1. Header banner (engine-rendered plate, assembled in code) ------
   The topbar becomes the one dark surface in the app: it separates chrome from
   data instead of blending into it. Every text/control colour inside is restated
   here, because v2 assumes dark-on-light and the plate inverts that. */
.topbar{
  /* The plate's glow lands on the right, which is exactly where the identity and Sign out sit —
     white-on-amber tested illegible. A scrim gradient rides ON TOP of the image so the right third is
     always dark enough for text, whatever the plate does. The arc stays visible centre-left. */
  background:
    radial-gradient(120% 170% at 92% 50%,rgba(11,14,20,.60) 0%,rgba(11,14,20,.40) 42%,rgba(11,14,20,0) 74%),
    linear-gradient(90deg,rgba(11,14,20,.10) 0%,rgba(11,14,20,0) 26%,rgba(11,14,20,.52) 58%,rgba(11,14,20,.86) 100%),
    #0b0e14 url('/hdr.jpg') right center/cover no-repeat;
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 2px 8px rgba(11,14,20,.28),0 16px 44px rgba(11,14,20,.22);
  backdrop-filter:none;-webkit-backdrop-filter:none;
  color:#fff;
}
.topbar .brand{color:#fff;font-weight:700;letter-spacing:-.015em}
/* the mark is a dark disc with a corona crescent — on a dark plate it needs lift */
.topbar .eclipse{filter:drop-shadow(0 0 7px rgba(244,166,60,.55))}
.topbar .who{color:rgba(255,255,255,.78)}   /* was .62 — vanished where it crossed the bright band */
.topbar .who b,.topbar .ident b{color:#fff}
.topbar .ident .ident-sub{color:rgba(255,255,255,.55)}
/* A DARK translucent fill is inherently safer on a dark plate than a light one: a light fill loses its
   edge exactly where the corona is brightest, which is where this button sits. */
.topbar .iconbtn{background:rgba(0,0,0,.24);border-color:rgba(255,255,255,.34);color:rgba(255,255,255,.95)}
.topbar .iconbtn:hover{background:rgba(0,0,0,.34);border-color:rgba(255,255,255,.46);color:#fff}
.topbar .iconbtn.cta{background:rgba(244,166,60,.22);border-color:rgba(244,166,60,.6);color:#f8c98a}
.topbar .iconbtn.cta:hover{background:var(--corona);color:#231a08}
.topbar .iconbtn.warn{background:rgba(209,67,91,.24);border-color:rgba(209,67,91,.55);color:#f6b3bf}

/* ---------- 2. Numbers sit in columns -------------------------------------
   Proportional figures are why phone and date columns look ragged. One
   declaration turns every numeral in the grid into a fixed-width glyph. */
table.grid{font-variant-numeric:tabular-nums}
table.grid tbody td{font-feature-settings:'tnum' 1}

/* ---------- 3. Masked PII reads as protected, not as broken data -----------
   `***-***-7969` in proportional sans reads like corrupt data. Mono + tabular +
   a tinted ground + a lock makes it legible as a deliberate security posture. */
.masked-v{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:12.5px;font-variant-numeric:tabular-nums;letter-spacing:-.01em;
  color:var(--muted);background:rgba(20,24,33,.055) url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2012%2014%22%3E%3Cpath%20d%3D%22M3.5%205.5V4a2.5%202.5%200%200%201%205%200v1.5%22%20fill%3D%22none%22%20stroke%3D%22%238a92a0%22%20stroke-width%3D%221.35%22%20stroke-linecap%3D%22round%22%2F%3E%3Crect%20x%3D%221.1%22%20y%3D%225.4%22%20width%3D%229.8%22%20height%3D%227.8%22%20rx%3D%221.7%22%20fill%3D%22%238a92a0%22%2F%3E%3Crect%20x%3D%225.35%22%20y%3D%228%22%20width%3D%221.3%22%20height%3D%222.7%22%20rx%3D%220.65%22%20fill%3D%22%23f7f8fb%22%2F%3E%3C%2Fsvg%3E") no-repeat 6px 52%/9px 10.5px;
  border-radius:5px;padding:1px 7px 1px 20px}
/* revealed values are the real thing — drop the protective treatment entirely */
.masked.revealed .masked-v{background:transparent;padding-left:7px;color:var(--text);font-weight:500}
/* Reveal stays quiet until the row is under the cursor: it is the gated exception,
   not the expected action, and 200 loud amber chips per screen is noise. */
table.grid .reveal-btn{background:transparent;border-color:var(--line);color:var(--muted2);
  opacity:.55;transition:opacity .14s ease,background .14s ease,color .14s ease,border-color .14s ease}
table.grid tbody tr:hover .reveal-btn{opacity:1;background:var(--accent-bg);
  border-color:rgba(244,166,60,.5);color:var(--accent-d)}
table.grid .reveal-btn:hover{background:var(--corona);color:#231a08;border-color:var(--corona)}

/* ---------- 4. Company identity: LOUD, but identical on every row ----------
   The colour itself is set inline by companyColor() in app.js, so it is not
   touched here. What is fixed is the GEOMETRY: variable-width rounded pills make
   the column ragged and unscannable. A constant min-width, square-ish radius and
   tracked caps turn it into a rail a rep can read peripherally mid-dial. */
/* Shape everywhere, but the RAIL only in the list. min-width was applied globally in the first cut and
   overflowed the narrower cell in the record's Details grid, clipping the pill at the panel edge — the
   fixed width only earns its keep where there is a column of them to line up. */
.pill.company{border-radius:6px;padding:3px 10px;
  font-size:10.5px;font-weight:700;letter-spacing:.055em;text-transform:uppercase;
  box-shadow:0 1px 2px rgba(20,24,33,.16);vertical-align:middle;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
table.grid .pill.company{min-width:132px;text-align:center}

/* ---------- 5. Status encodes lifecycle by SHAPE, not colour alone ---------
   Eleven statuses rendered as "green or grey" gives the eye nothing to triage
   on. Solid = settled, dashed = in flight, muted = dormant. Reads without colour. */
.pill{border-radius:6px;font-weight:600}
.pill.stage{box-shadow:inset 0 0 0 1px rgba(21,146,90,.28)}
.pill.bad{box-shadow:inset 0 0 0 1px rgba(209,67,91,.30)}
td .pill:not(.company):not(.stage):not(.bad){background:transparent;
  border:1px dashed rgba(20,24,33,.26);color:var(--muted)}

/* ---------- 6. Commit the glass -------------------------------------------
   v2 paints an aurora and then covers it with a near-opaque plane, so the
   premium surface is decoration behind the content rather than part of it. */
table.grid thead th{background:rgba(255,255,255,.42);
  backdrop-filter:blur(14px) saturate(1.35);-webkit-backdrop-filter:blur(14px) saturate(1.35);
  border-bottom:1px solid var(--line);letter-spacing:.055em}
table.grid tbody tr{transition:background .13s cubic-bezier(.2,.7,.3,1),box-shadow .13s ease}
table.grid tbody tr:hover{background:rgba(255,255,255,.66);
  box-shadow:inset 3px 0 0 0 var(--corona)}

/* ---------- 7. Micro-detail ----------------------------------------------- */
::selection{background:rgba(244,166,60,.28)}
.dial-btn{transition:transform .16s cubic-bezier(.2,.7,.3,1),filter .16s ease,background .16s ease}
.dial-btn:active{transform:scale(.96)}
.rechead{letter-spacing:-.015em}
a:focus-visible,button:focus-visible,.iconbtn:focus-visible,.reveal-btn:focus-visible,
.dial-btn:focus-visible{outline:none;box-shadow:var(--ring);border-radius:8px}
@media(prefers-reduced-motion:reduce){
  table.grid tbody tr,.dial-btn,table.grid .reveal-btn{transition:none}
}

/* ---------- 8. Global search (v3) ----------------------------------------
   Lives in the topbar so it is reachable from an open record, not only the list
   rail. Sits on the dark plate, so it is styled for dark rather than glass. */
.gs{position:relative;margin-left:20px;width:min(420px,38vw)}
.gs-in{width:100%;padding:7px 12px 7px 32px;border-radius:10px;font-size:13px;
  color:#fff;background:rgba(255,255,255,.09) no-repeat 10px 50%;
  border:1px solid rgba(255,255,255,.18);
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-opacity%3D%22.55%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%3E%3Ccircle%20cx%3D%226.8%22%20cy%3D%226.8%22%20r%3D%224.6%22%2F%3E%3Cpath%20d%3D%22M10.3%2010.3%2014%2014%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  background-size:13px 13px;transition:background-color .14s ease,border-color .14s ease}
.gs-in::placeholder{color:rgba(255,255,255,.48)}
.gs-in:focus{outline:none;background-color:rgba(255,255,255,.15);
  border-color:rgba(244,166,60,.75);box-shadow:0 0 0 3px rgba(244,166,60,.18)}
.gs-menu{position:absolute;top:calc(100% + 7px);left:0;right:0;z-index:80;
  background:rgba(255,255,255,.94);backdrop-filter:blur(24px) saturate(1.4);
  -webkit-backdrop-filter:blur(24px) saturate(1.4);
  border:1px solid rgba(255,255,255,.75);border-radius:12px;overflow:hidden;
  box-shadow:0 24px 60px rgba(11,14,20,.30),0 2px 8px rgba(11,14,20,.14)}
.gs-menu.hidden{display:none}
.gs-it{display:flex;align-items:center;gap:10px;padding:8px 12px;cursor:pointer;font-size:13px;color:var(--text)}
.gs-it+.gs-it{border-top:1px solid var(--line-2)}
.gs-it.on,.gs-it:hover{background:var(--accent-bg)}
.gs-mod{flex:0 0 62px;font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted2)}
.gs-nm{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gs-co{margin-left:auto;flex:0 0 auto;font-size:10px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--muted);background:var(--chip);border-radius:5px;padding:2px 7px;
  white-space:nowrap;max-width:44%;overflow:hidden;text-overflow:ellipsis}
.gs-none{padding:10px 12px;font-size:12.5px;color:var(--muted2)}
@media(max-width:900px){.gs{display:none}}

/* ---------- 9. Login — the plate behind the card ---------------------------
   The card stays exactly as v2 built it (dark glass); only the ground changes.
   The plate's arc runs through the middle-right, and .auth-wrap centres the
   card, so a radial scrim seats the card on clean dark ground while the arc
   stays visible around it. Without that the card would sit on the brightest
   part of the image — the same mistake the topbar made before QC caught it. */
.auth-wrap{
  background:
    radial-gradient(46% 52% at 50% 50%,rgba(11,14,20,.72) 0%,rgba(11,14,20,.42) 55%,rgba(11,14,20,0) 100%),
    #0b0e14 url('/login.jpg') 58% 74%/cover no-repeat;
}
.auth-card{box-shadow:0 40px 100px rgba(0,0,0,.62),inset 0 1px 0 rgba(255,255,255,.10)}
.auth-card .brand .eclipse{filter:drop-shadow(0 0 8px rgba(244,166,60,.5))}

/* ---------- 10. The mark, as real vector ----------------------------------
   v2 draws it with border-radius + an inset box-shadow crescent. That cannot
   carry the corona ring, and the crescent's offset has to be re-tuned by hand at
   every size (16px in a tab, 26px in the header, 88px on a login card) or the
   geometry drifts. This is the SAME geometry as the favicon already shipped in
   index.html/admin.html, so tab icon, header and login finally share one source
   of truth. Vector iconography is Claude-native by doctrine — not engine work. */
.eclipse{background:transparent url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cdefs%3E%3Cmask%20id%3D%22c%22%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2216%22%20r%3D%2214.2%22%20fill%3D%22%23fff%22%2F%3E%3Ccircle%20cx%3D%227.92%22%20cy%3D%2213.69%22%20r%3D%2214.2%22%20fill%3D%22%23000%22%2F%3E%3C%2Fmask%3E%3C%2Fdefs%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2216%22%20r%3D%2215.3%22%20fill%3D%22none%22%20stroke%3D%22%23f4a63c%22%20stroke-opacity%3D%22.55%22%20stroke-width%3D%221.5%22%2F%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2216%22%20r%3D%2214.2%22%20fill%3D%22%230b0e14%22%2F%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2216%22%20r%3D%2214.2%22%20fill%3D%22%23f4a63c%22%20mask%3D%22url%28%23c%29%22%2F%3E%3C%2Fsvg%3E") center/100% 100% no-repeat;box-shadow:none}

/* ---------- 11. Sticky record chrome must actually be opaque -----------------
   v2 fades .rechead to fully TRANSPARENT at its lower edge and gives .rectabs
   only .5 alpha with a 6px blur. Rows scrolling underneath stay legible through
   both, so the top of a long record reads as garbled overlapping text. Same
   defect class as the login card and the topbar: a translucent surface assuming
   a ground that moves. A sticky header's whole job is to hide what passes under
   it, so it gets near-opacity and a real blur — the glass look is preserved by
   the saturation, not by letting content bleed through. */
.rechead{background:linear-gradient(rgba(252,252,253,.985),rgba(252,252,253,.95) 72%,rgba(252,252,253,.88));
  backdrop-filter:blur(16px) saturate(1.25);-webkit-backdrop-filter:blur(16px) saturate(1.25)}
.rectabs{background:rgba(252,252,253,.94);backdrop-filter:blur(16px) saturate(1.25);
  -webkit-backdrop-filter:blur(16px) saturate(1.25)}

/* ---------- 12. Collapsible left panels ------------------------------------
   Default is expanded, so this changes nothing until a user clicks. Collapsed
   keeps a slim strip holding the reopen control — a hidden panel that cannot be
   reopened is worse than one that is merely wide. */
.relrail,.filters{position:relative}
.railtog{position:sticky;top:0;z-index:3;display:block;margin:0 0 8px auto;
  width:24px;height:24px;padding:0;line-height:22px;text-align:center;cursor:pointer;
  font:inherit;font-size:13px;font-weight:700;color:var(--muted2);
  background:rgba(255,255,255,.72);border:1px solid var(--line);border-radius:7px;
  transition:color .13s ease,background .13s ease,border-color .13s ease}
.railtog:hover{background:#fff;color:var(--accent-d);border-color:rgba(244,166,60,.55)}
.railtog:focus-visible{outline:none;box-shadow:var(--ring)}
/* collapsed: reclaim the width, hide everything but the reopen control */
.reclayout.railoff{grid-template-columns:34px 1fr}
.listwrap.railoff{grid-template-columns:34px 1fr}
.railoff .relrail>*:not(.railtog),.railoff .filters>*:not(.railtog){display:none}
.railoff .relrail,.railoff .filters{padding:14px 5px;overflow:hidden}
.railoff .railtog{margin:0 auto}