/* CaliRecord landing preview, v2: one page, two states. body.empty = the box is the page;
   body.searched = the box lives in the header and results take the page. Self contained on
   purpose: must not inherit the app shell, and must be deletable in one folder.
   .new + data-tag mark what is proposed; visible only when body.annot (the Preview panel). */
/* Palette from the current calirecord.com: gold #f2c14e, navy #14213d / #0f2f5c, warm off-white #f6f3ea.
   Dark is the DEFAULT here (theme.js); light is the viewer's choice. Gold reads as text only on dark, so
   the light theme uses the site's gold-ink for accents and keeps gold for the button fill. */
:root[data-theme=light]{
  --bg:#f6f3ea; --ink:#14213d; --muted:#5b6270; --line:#e2ddd0; --card:#fffdf8;
  --accent:#8a6100; --gold:#f2c14e; --gold-ink:#14213d; --navy:#0f2f5c;
  --new:#12855a; --newbg:#12855a14; --warn:#8a5a00;
  --edge:radial-gradient(900px 500px at 0% 0%, #f2c14e12, transparent 60%);   /* light: the faint gold only; a navy radial read as a stain on off-white */
}
:root, :root[data-theme=dark]{
  --bg:#0e1522; --ink:#f1f3f7; --muted:#9aa5b8; --line:#243046; --card:#141c2b;
  --accent:#f2c14e; --gold:#f2c14e; --gold-ink:#14213d; --navy:#0f2f5c;
  --new:#43c493; --newbg:#43c4931c; --warn:#e0a53a;
  --edge:radial-gradient(1000px 600px at 0% 0%, #f2c14e1f, transparent 60%), radial-gradient(1000px 600px at 100% 100%, #2d5aa018, transparent 60%);
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--edge),var(--bg);color:var(--ink);font:16.5px/1.55 var(--sans);-webkit-font-smoothing:antialiased;
  display:flex;flex-direction:column;min-height:100vh}
a{color:inherit}
p{margin:0}
.muted{color:var(--muted)}

/* ---- header ---- */
/* z-index in BOTH states: the hero below is optically lifted and must never paint over the nav */
#top{display:flex;align-items:center;gap:22px;padding:16px 28px;border-bottom:1px solid transparent;position:relative;z-index:6}
body.searched #top{border-bottom-color:var(--line);position:sticky;top:0;background:var(--bg);z-index:5}
.brand{font-family:var(--serif);font-size:19px;font-weight:600;text-decoration:none;display:inline-flex;gap:2px;align-items:baseline;white-space:nowrap}
.brand .dot{color:var(--accent)}
#navslot{flex:1;min-width:0;display:flex;justify-content:center}
#top nav{display:flex;gap:22px;font-size:15.5px;margin-left:auto}
#top nav a{text-decoration:none;color:var(--muted)}
#top nav a:hover{color:var(--ink)}
#top nav a.signin{color:var(--accent);font-weight:600}
#top nav .who{color:var(--muted);font-size:13px;max-width:24ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#top nav a.signout{color:var(--muted)}
#top nav a.dash{color:var(--accent);font-weight:600}
/* the account pill: the colour IS the state. Signed out it is Google's sign-in blue, a borrowed colour
   that everyone reads as "door"; signed in it is our gold, the page's own action colour, so it joins the
   page instead of standing apart from it. The two never appear together. */
/* .pill is also the result rows' status badge (11px), so the nav pill states its own type. Google's
   header, measured: links 13px, button 14px/500, padding 10x12, radius 100px, min-height 40, #0b57d0.
   Ours keeps the same ratio one size up: links 15.5, button 16.5/500. */
#top nav a.pill{font:500 16.5px/1 var(--sans);border-radius:100px;padding:10px 20px;min-height:40px;display:inline-flex;align-items:center;text-decoration:none}
#top nav a.pill.signin{background:#0b57d0;color:#fff}
#top nav a.pill.signin:hover{background:#0842a0;color:#fff}
#top nav a.pill.dash{background:var(--gold);color:var(--gold-ink)}
#top nav a.pill.dash:hover{filter:brightness(1.08);color:var(--gold-ink)}
#theme{border:1px solid var(--line);background:var(--card);color:var(--muted);border-radius:50%;width:26px;height:26px;font-size:13px;line-height:1;cursor:pointer;padding:0}
#theme:hover{color:var(--ink);border-color:var(--ink)}
#top nav{align-items:center}

/* ---- the one search box, in either slot ---- */
.searchbar{display:flex;width:100%;max-width:780px;border:1.5px solid var(--line);border-radius:11px;overflow:hidden;background:var(--card)}
.searchbar input{flex:1;border:0;background:transparent;color:var(--ink);font:19px var(--sans);padding:18px 22px;outline:none;min-width:0}
.searchbar button{border:0;background:var(--gold);color:var(--gold-ink);font:600 18px var(--sans);padding:0 30px;cursor:pointer}
.searchbar button:hover{filter:brightness(1.1)}
#navslot .searchbar{max-width:560px;border-radius:9px}
#navslot .searchbar input{padding:9px 14px;font-size:15px}
#navslot .searchbar button{padding:0 16px;font-size:14px}

/* ---- state A: hero ---- */
main{flex:1;display:flex;flex-direction:column}
#hero{display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 24px;
  flex:1;justify-content:center;padding-bottom:12vh}   /* lifts the optical centre without overlapping the header */
body.searched #hero{display:none}
.eyebrow{font:600 14.5px/1 var(--sans);letter-spacing:.15em;text-transform:uppercase;color:var(--accent);margin-bottom:26px}
#rot{font-family:var(--serif);font-weight:600;font-size:clamp(36px,5.6vw,66px);line-height:1.1;letter-spacing:-.015em;margin:0 0 22px;min-height:2.3em;max-width:22ch;cursor:pointer}
#rot-text{color:var(--accent);transition:opacity .28s ease}
#rot-text.out{opacity:0}
#rot:hover #rot-text{text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:6px}
/* the "?" is generated content on the entity text and the cursor is its right border, so no line
   break can ever separate the name, the cursor and the question mark (an inline-block cursor could) */
/* the cursor is a box-shadow, not a border: a border takes layout width and, at the instant a line is
   exactly full, pushed the last word onto the next line until the next letter pulled it back */
#rot-text{box-shadow:3px 0 0 -1px var(--accent);animation:caret 1s steps(1) infinite}
#rot-text::after{content:"?";color:var(--ink)}
@keyframes caret{50%{box-shadow:3px 0 0 -1px transparent}}
@media (prefers-reduced-motion:reduce){#rot-text{animation:none}}
/* the sub is a quiet line under a heavy headline (Suno's ratio): same size and colour as .gateline, lighter weight, narrow */
/* two sentences, two jobs (what anyone can do; what signing in adds), so each sits on its own line. On a phone
   each sentence wraps as a unit and balance keeps its halves even, so no line ends on a single word. */
.sub{font-size:16.5px;font-weight:400;color:var(--muted);max-width:78ch;margin:0 auto 34px;line-height:1.6}
.sub .l{display:inline-block;text-wrap:balance}
#heroslot{width:100%;display:flex;justify-content:center}
.chips{margin-top:14px;font-size:13.5px;color:var(--muted);display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:center}
.chip{border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:20px;padding:5px 13px;font:13px var(--sans);cursor:pointer}
.chip:hover{border-color:var(--accent);color:var(--accent)}
.gateline{margin-top:30px;font-size:16.5px;color:var(--muted);line-height:1.6}

/* ---- state B: results ---- */
#results{display:none;max-width:860px;width:100%;margin:0 auto;padding:18px 24px 60px}
body.searched #results{display:block}
.status{font-size:14px;color:var(--muted);padding:6px 0 12px}
.status.err{color:#c0392b}
.item{border:1px solid var(--line);border-radius:10px;background:var(--card);margin-bottom:8px;scroll-margin-top:76px}
.item:hover{border-color:var(--accent)}
.item.open{border-color:var(--accent)}
.hit{display:flex;gap:14px;align-items:baseline;padding:12px 14px;cursor:pointer;user-select:none}
.item.busy .hit{opacity:.6}
.detail:empty{display:none}
.hit .nm{font-weight:600;flex:1;min-width:0}
.hit .num{font:12.5px var(--mono);color:var(--muted);white-space:nowrap}
.pill{font:600 11px var(--sans);border:1px solid var(--line);border-radius:20px;padding:2px 9px;color:var(--muted);white-space:nowrap}
.pill.ok{border-color:var(--new);color:var(--new)}
.pill.bad{border-color:var(--warn);color:var(--warn)}

.rec{border-top:1px solid var(--line);padding:18px 16px 18px}
.rec .sub{font:13px var(--mono);color:var(--muted);margin-bottom:16px}
.rec section{border-top:1px solid var(--line);padding:15px 0 4px}
.rec section:first-of-type{border-top:none;padding-top:0}
.rec h4{font:600 11.5px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 11px}
.kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:11px 24px;margin:0}
.kv dt{font-size:12px;color:var(--muted)}
.kv dd{margin:0;font-size:14.5px;word-break:break-word}
.orglist{display:flex;flex-direction:column;gap:6px}
.org{display:flex;gap:11px;align-items:baseline;font-size:14.5px}
.org .role{font-size:12px;color:var(--muted)}
.people{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.person{border:1px solid var(--line);border-radius:9px;padding:10px 13px;background:var(--bg)}
.person .pn{font-weight:600;font-size:14.5px}
.person .pr{font-size:12.5px;color:var(--muted);margin-top:2px}
.acct{font-size:12.5px;color:var(--muted);margin:10px 0 0}
.acct a{color:var(--muted)}
.gate{border:1px dashed var(--accent);border-radius:11px;padding:15px 17px;background:color-mix(in srgb,var(--accent) 6%,transparent)}
.gate .count{font-weight:600;font-size:15px;margin-bottom:8px}
.gate .roles{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:13px}
.gate .rolechip{font:12.5px var(--sans);border:1px solid var(--accent);color:var(--accent);border-radius:20px;padding:3px 11px}
.gate button{border:0;background:var(--gold);color:var(--gold-ink);border-radius:8px;padding:9px 17px;font:600 14px var(--sans);cursor:pointer}
.gate .why{font-size:13px;color:var(--muted);margin-top:9px}
.prov{font:12px var(--mono);color:var(--muted);border-top:1px solid var(--line);margin-top:15px;padding-top:11px}
.askrow{margin-top:12px;font-size:13.5px}
.askrow a{color:var(--accent)}

/* ---- footer ---- */
/* the footer hangs from the right edge, under the nav's pill, so the page's two chrome rows share one edge */
footer{display:flex;justify-content:flex-end;gap:20px;flex-wrap:wrap;padding:16px 28px 22px;font-size:14.5px;color:var(--muted);border-top:1px solid var(--line)}
body.empty footer{border-top-color:transparent}
footer nav{display:flex;gap:18px;align-items:center}
footer nav a{color:var(--muted);text-decoration:none;white-space:nowrap}
footer nav a:hover{color:var(--ink)}
footer .mobile-only{display:none}   /* shown on phones after a search, when the header holds only the box */

/* ---- feedback ---- */
#fb{position:fixed;right:20px;bottom:20px;width:min(380px,calc(100vw - 40px));background:var(--card);border:1px solid var(--line);
  border-radius:13px;box-shadow:0 18px 50px #0003;padding:16px;z-index:40}
.fb-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.fb-top button{border:0;background:transparent;color:var(--muted);font-size:16px;cursor:pointer}
.cats{display:flex;gap:6px;flex-wrap:wrap}
.cat{border:1px solid var(--line);background:var(--bg);color:var(--muted);border-radius:20px;padding:5px 11px;font:12.5px var(--sans);cursor:pointer}
.cat.on{border-color:var(--accent);color:var(--accent);font-weight:650}
.cathint{font-size:12.5px;color:var(--muted);margin:8px 0 12px}
#fb textarea,#fb input{width:100%;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink);font:14px var(--sans);padding:10px 12px;outline:none;resize:vertical;margin-bottom:8px}
#fb textarea:focus,#fb input:focus{border-color:var(--accent)}
.fb-actions{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:6px}
.fb-actions .muted{font-size:12px}
.fb-actions button{border:0;background:var(--gold);color:var(--gold-ink);border-radius:8px;padding:9px 17px;font:600 14px var(--sans);cursor:pointer}

/* ---- the shell's lock, undone here ----
   auth.js paints an account bar and LOCKS every page it is on until there is a session (dimmed page,
   sign-in card). Not on the front door: the gate is inside the record, on the people block, where the
   reason to sign in is visible. auth.js still supplies the session, the bearer token and the pill. */
#authbar{display:none!important}
#authgate{display:none!important}
body.cre-locked > *{opacity:1!important;pointer-events:auto!important;user-select:auto!important}

/* ---- small screens: the frame steps down so the pill stays on screen and the question stays a question ---- */
@media (max-width:640px){
  #top{padding:12px 16px;gap:12px}
  #top nav{gap:14px;font-size:14px}
  #top nav a.pill{padding:8px 15px;min-height:34px;font-size:15px}
  .brand{font-size:17px}
  .eyebrow{font-size:11.5px;letter-spacing:.12em;margin-bottom:18px}
  #rot{font-size:clamp(28px,8.6vw,36px);margin-bottom:16px}
  .sub{font-size:14.5px;margin-bottom:24px}
  .searchbar input{font:17px var(--sans);padding:14px 16px}
  .searchbar button{font-size:16px;padding:0 18px}
  .gateline{font-size:14.5px;margin-top:22px}
  footer{padding:14px 16px 20px;font-size:13.5px}
}

/* ---- phones, after a search: the header is the monogram and the box, nothing else ---- */
@media (max-width:640px){
  body.searched #top{padding:10px 12px;gap:10px}
  body.searched .brand > span:not(.dot){display:none}       /* "c." only */
  body.searched #top nav{display:none}                       /* Features, API and the account pill move to the footer */
  body.searched #navslot{flex:1}
  body.searched #navslot .searchbar{max-width:none}
  body.searched footer .mobile-only{display:inline}
  footer a.signin{color:#0b57d0;font-weight:600}
  footer a.dash{color:var(--accent);font-weight:600}
  /* result cards: the name is a row of its own, the tags a second row */
  .hit{flex-wrap:wrap;gap:8px 10px;align-items:center}
  .hit .nm{flex:0 0 100%;font-size:15px;line-height:1.3}
  .hit .num{margin-left:auto;font-size:11.5px}
  .rec{padding:14px 12px 16px}
  .kv{grid-template-columns:1fr 1fr}
}