/* shared/ui.css — the primitives every application on this host draws with.
 *
 * The shared half of the UI: palette, the bounded window, the header, the tab bar,
 * buttons, badges. An application links this and then adds only what it alone
 * needs. Extractor was borrowing console.css and chat.css to get these, which meant
 * two applications that are meant to be separate shared a stylesheet, and a rule
 * written for a dashboard could silently restyle something else -- console.css
 * defines .warn as a filled BADGE, which put an olive band behind every suggestion
 * in Extractor's template review.
 *
 * Chat and the console still use their own files. This is the shared library they
 * can move onto when it suits, not a change forced on working pages.
 */

/* --- how big the text is ----------------------------------------------------
   Every font-size here is in rem, so all of it is relative to ONE number and
   honors whatever size the reader has set in their browser -- which a px size
   silently overrides.
   
   That also makes a phone a one-line change. The type on this site was drawn for
   a monitor at arm's length and is genuinely small held in a hand, so the root
   grows on a narrow screen and everything measured against it follows. */
:root{font-size:100%}
@media (max-width:40rem){
  :root{font-size:112.5%}          /* 18px rather than 16px */
  /* The strapline is the first thing to go, exactly as it does in Chat -- the
     wordmark identifies the site, the strapline only repeats what the tabs say. */
  .brand small{display:none}
  /* iOS zooms the whole page when a focused field is under 16px, which leaves the
     layout shifted after typing. At the root above, 1rem is comfortably over. */
  input,select,textarea{font-size:1rem}
}

:root{
  --bg:var(--bg);        /* the page behind everything */
  --panel:var(--sunk);     /* a raised surface: header, footer, a field row */
  --card:var(--surface);      /* a card sitting on the page */
  --line:var(--rule);      /* every border, unless it is saying something */
  --line-lit:var(--rule-2);  /* a border that is focused or hovered */
  --ink:var(--ink);       /* body text */
  --dim:var(--muted);       /* secondary text; also the resting color of a tab */
  --dimmer:var(--muted-2);    /* text that is absent rather than quiet */
  --accent:var(--accent);
  --good:var(--good);
  --warn:var(--warn);
  --bad:var(--bad);
}

*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
  font:.9375rem/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
a{color:var(--accent)}
/* Wins over any class that sets display. A class setting `display` beats a bare
   [hidden] on specificity, and the element stays visible while the code that hid
   it is entirely correct. */
[hidden]{display:none !important}
.muted{color:var(--dim)}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}

/* --- the window -------------------------------------------------------------
   A bounded window rather than full-bleed: on a wide monitor, full width puts the
   controls a screen away from what they act on, and lines get too long to read. */
body.chatbody{margin:0;display:flex;align-items:center;justify-content:center;padding:20px;
  min-height:100vh;
  /* dvh, not vh: on mobile 100vh is TALLER than the visible area, which puts a
     bottom-pinned bar below the fold. dvh tracks the toolbars as they come and go. */
  min-height:100dvh}
.app{display:flex;flex-direction:column;width:100%;max-width:900px;
  /* Full height, as Chat is: a fixed cap letterboxes the application on a tall
     screen and the pane inside it is what wanted the space. */
  height:calc(100dvh - 40px);
  background:var(--bg);border:1px solid var(--line);border-radius:14px;overflow:hidden}

.app > header.top{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;
  gap:12px;margin:0;padding:10px 16px;border-bottom:1px solid var(--line)}
/* Matches console.css, so the wordmark is the same weight and spacing in
   every application rather than nearly the same. */
.brand{font-weight:700;letter-spacing:.3px;color:var(--ink)}
.brand a{color:var(--ink);text-decoration:none}
.brand a:hover{color:var(--accent)}
.brand small{color:var(--dim);font-weight:400}
.who{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
/* The address is context, not a headline — it should not compete with the controls. */
.who .email{color:var(--dim);font-size:.8125rem;
  max-width:min(38vw,280px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* --- tabs -------------------------------------------------------------------
   Marked by the rule beneath, not by a filled block: this is navigation, and a
   tab that looks like a button invites being pressed repeatedly. */
.tabs{flex:0 0 auto;display:flex;align-items:center;gap:4px;padding:0 12px;
  border-bottom:1px solid var(--line);background:var(--panel)}
.tabgap{flex:1 1 auto}
.tab{appearance:none;background:none;border:0;border-bottom:2px solid transparent;
  color:var(--dim);font:inherit;font-size:.875rem;padding:11px 14px 9px;cursor:pointer}
.tab:hover{color:var(--ink)}
.tab.on{color:var(--ink);border-bottom-color:var(--accent)}
.tab:focus-visible{outline:2px solid var(--line-lit);outline-offset:-2px}

/* --- controls ---------------------------------------------------------------
   .primary is a real style here. It was being written in markup across the site
   with nothing defining it, so the button a page most wanted you to press looked
   exactly like the ones beside it. */
.btn{background:var(--control);color:var(--ink);border:1px solid var(--line-lit);border-radius:8px;
  padding:7px 12px;cursor:pointer;font-size:.8125rem;font-family:inherit;text-decoration:none;
  display:inline-block;line-height:1.4}
.btn:hover{background:var(--rule-3)}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn.primary{background:var(--primary);border-color:var(--primary-edge);color:var(--ink-strong);font-weight:600}
.btn.primary:hover{background:var(--primary-hot)}
.btn.danger{background:var(--bad-soft);border-color:var(--bad-edge);color:var(--bad)}
.btn.tiny{padding:3px 8px;font-size:.71875rem}

.badge{display:inline-block;padding:2px 10px;border-radius:999px;font-size:.75rem;font-weight:600;
  border:1px solid var(--line);color:var(--dim)}

.card{background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:18px 20px;margin-bottom:16px}

/* --- the wordmark -----------------------------------------------------------
   The same mark the front door wears. A sign-in page is where someone decides
   whether they are in the right place, and three unbranded pages asking for a
   Google account is exactly the shape of a phishing page. Lifted from index.css
   so all four render identically. */
.moving-gradient {
  margin: 0;
  font-size: clamp(2.5rem, 12vw, 5rem);   /* was fixed 5rem: it overflowed a phone */
  font-weight: 900;
  letter-spacing: -2px;
  cursor: pointer;

  background: var(--wordmark);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;

  --speed: 5s;
  animation: shiftGradient var(--speed) linear infinite;
  transition: transform .3s ease, filter .3s ease, background .5s ease;
}

.moving-gradient:hover {
  transform: scale(1.05);
  filter: drop-shadow(0 0 15px var(--wordmark-glow));
  --speed: 1.5s;
  background: var(--wordmark-hover);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
}

@keyframes shiftGradient {
  0%   { background-position: 0% center; }
  100% { background-position: 200% center; }
}

@media (prefers-reduced-motion:reduce){
  .moving-gradient{animation:none;transition:none}
  .moving-gradient:hover{transform:none}
}

/* --- the sign-in ------------------------------------------------------------
   Its own page rather than the site's front door, so it says what THIS is and
   offers one way in. */
.app.signin{align-items:center;justify-content:center;height:auto;min-height:0}
.signinbox{max-width:440px;margin:auto;padding:40px 28px;text-align:center}
.signinbox h1{margin:0 0 10px;font-size:1.625rem;color:var(--ink);letter-spacing:-.01em}
.signinbox .lead{margin:0 0 22px;color:var(--muted);font-size:.90625rem;line-height:1.55}
.signinbox .muted{margin:16px 0 0;font-size:.78125rem;line-height:1.5}
/* console.css underlines a bare <a>; this is a button and should not read as a link. */
.btn.big{display:inline-block;padding:10px 20px;font-size:.9375rem;text-decoration:none}
.signinerror{margin:0 0 16px;padding:9px 12px;border:1px solid var(--bad-edge);border-radius:8px;
  color:var(--bad);font-size:.84375rem;background:var(--bad-soft)}

@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms !important}}

/* The mark on a sign-in page is smaller than on the front door, where it is the
   whole page. clamp so it still fits a narrow phone. */
.signinbox .mark{margin:0 0 .75rem}
.signinbox .moving-gradient{display:inline-block;font-size:clamp(1.6rem,8vw,2.2rem)}