/* =====================================================================
   Design system: "the reviewed document", in Janua Labs dress.

   The product's whole argument is that a named human marked every
   answer before a caller heard it. So the interface is built like a
   document that has been read and annotated: a margin rail carrying
   mono labels, hairline rules, and one loud element, the stamp.

   This file used to carry a note saying it was "deliberately NOT the
   cream + fashion-serif + gold palette", on the grounds that the look
   reads as decorative rather than evidentiary. That note is now wrong
   in one direction and still right in the other, so here is the honest
   version:

   The PALETTE and TYPE are now Janua Labs' own — brass, ivory, black,
   Cormorant Garamond and Jost — because a prospect who clicks through
   from janualabs.com and lands somewhere that looks like a different
   company has been given a reason to doubt before anyone says a word.

   The STRUCTURE does not move. The margin rail, the mono labels, the
   hairline rules and the stamp are what make this read as evidentiary,
   and none of them are colours. Brand the surface; leave the argument
   alone.

   TWO SURFACES, on purpose:
     :root            the light one. Dashboards are read in daylight by
                      staff working through a queue, and dense tables,
                      transcripts and receipts are simply easier to scan
                      on a light ground.
     body.brand-dark  the janualabs.com one, for every page a prospect
                      or caller sees: index, demo, voice.
   Components never name a colour directly; they name a token. That is
   what lets one class flip an entire page.
   ================================================================== */

/* ---------------------------------------------------------------------
   Fonts, self-hosted.

   Lifted from janualabs.com so the two properties are literally the
   same files. Self-hosted rather than pulled from Google Fonts, which
   is what this file used to do: /demo.php is a page where an injured
   person types what happened to them, and a stylesheet that reaches out
   to a third party on load hands that person's IP address to Google for
   nothing. On a product sold on defensibility that is a bad trade for a
   webfont.

   AVAILABLE WEIGHTS ARE 300 ONLY (Cormorant) AND 300/400/500 (Jost).
   Ask for 600 anywhere and the browser fakes it by smearing the
   outlines, which on a display serif looks exactly as bad as it sounds.
   Headings are 300 throughout on purpose.
   ------------------------------------------------------------------ */
@font-face { font-family:'Cormorant Garamond'; src:url(fonts/cormorant-garamond-latin-300-normal.woff2) format('woff2'); font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:'Cormorant Garamond'; src:url(fonts/cormorant-garamond-latin-300-italic.woff2) format('woff2'); font-weight:300; font-style:italic; font-display:swap; }
@font-face { font-family:'Jost'; src:url(fonts/jost-latin-300-normal.woff2) format('woff2'); font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:'Jost'; src:url(fonts/jost-latin-400-normal.woff2) format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Jost'; src:url(fonts/jost-latin-500-normal.woff2) format('woff2'); font-weight:500; font-style:normal; font-display:swap; }

:root {
  /* --- Janua Labs brand constants -----------------------------------
     These do NOT change between surfaces. They are the brand. */
  --brand-black:  #050505;
  --brand-black2: #0E0D0B;
  --ivory:        #FCEFD3;
  --ivory-dim:    #B5AA96;
  --brass:        #C8A05E;   /* rules, marks, decoration */
  --brass-dim:    #6E5527;
  --sand:         #EFE7D6;

  /* Brass is not readable as small text on a light ground — 2.4:1 at
     #C8A05E. This is the same hue taken down far enough to use for
     words, so nothing on a light page has to choose between brand and
     legibility. */
  --brass-ink:    #7A5C22;

  /* --- Light surface: the dashboard --------------------------------- */
  --ink:        #141210;
  --ink-2:      #57503F;
  --mute:       #8A8069;
  --paper:      #F2EBDD;   /* their sand, lifted so tables stay crisp */
  --panel:      #FFFDF7;
  --panel-2:    #FAF5E9;   /* panel headers, hover rows */
  --tint:       #E9E0CC;   /* filled bands, assistant bubbles */
  --rule:       #D8CDB6;
  --rule-soft:  #E8DFCB;

  /* --- The states the whole product turns on ------------------------
     Kept, not rebranded. These carry MEANING in receipts and stamps,
     and meaning is not a thing to restyle. Retuned only enough to sit
     properly on a warm ground.

     One rule worth keeping: --brass never appears inside a stamp.
     Brass and --amber are both gold, and if brass is allowed to fill a
     chip, "pending" stops being distinguishable from decoration. Brass
     is structure; amber is status. */
  --seal:       #1D5647;   /* approved, cleared, of record */
  --seal-bg:    #E4EFE9;
  --stamp:      #A8321C;   /* needs review, flagged, not permitted */
  --stamp-bg:   #F9E7E1;
  --amber:      #8A6212;   /* pending, in motion */
  --amber-bg:   #F6EDD6;

  --display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --body:    'Jost', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  /* No mono in the Janua Labs set, and the margin labels need one — it
     is half of what makes this look reviewed rather than designed. A
     system stack keeps the page free of another download. */
  --data:    ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, Consolas, monospace;

  --rail: 148px;      /* width of the margin annotation rail */
  --maxw: 1120px;
}

/* ---------------------------------------------------------------------
   The dark surface: everything a prospect or a caller sees.

   Tokens only. Not one component rule is repeated here, which is the
   entire reason this is nine lines of colour rather than a second
   stylesheet to keep in sync.

   The three status colours are lifted rather than inverted. Dropping
   #1D5647 onto black gives roughly 1.6:1 — the word "Approved" would be
   legible only to someone who already knew what it said.
   ------------------------------------------------------------------ */
body.brand-dark {
  --ink:        #FCEFD3;
  --ink-2:      #B5AA96;
  --mute:       #8B8271;
  --paper:      #050505;
  --panel:      #0E0D0B;
  --panel-2:    #131110;
  --tint:       #0E0D0B;
  --rule:       #241F18;
  --rule-soft:  #1A1611;

  --seal:       #7FC3A6;
  --seal-bg:    #0F2620;
  --stamp:      #E38A6B;
  --stamp-bg:   #2B1611;
  --amber:      #D9B36A;
  --amber-bg:   #241D0F;

  --brass-ink:  #C8A05E;   /* on black the brand brass reads fine */
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

/* ---------------------------------------------------------------------
   Type scale
   ------------------------------------------------------------------ */
h1, h2, h3, h4 {
  font-family: var(--display);
  /* 300 because that is the only Cormorant weight loaded. It is also
     the right one: this face is drawn for display sizes and gains its
     authority from the width of the page around it, not from weight. */
  font-weight: 300;
  letter-spacing: 0;
  line-height: 1.1;
  margin: 0;
  text-wrap: balance;
}
/* Cormorant sets small — its cap height is low for its point size — so
   the scale is lifted a step against the old Spectral values. */
h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); }
h2 { font-size: clamp(1.75rem, 3.4vw, 2.5rem); }
h3 { font-size: 1.3rem; line-height: 1.25; }

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

/* The margin label. Every structural marker in this design is one of
   these, because a mono label in a margin is what review looks like. */
.rail-label {
  font-family: var(--data);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--mute);
}

.lede {
  font-size: 1.09rem;
  color: var(--ink-2);
  max-width: 60ch;
}

.mono { font-family: var(--data); font-size: 0.86em; }

/* ---------------------------------------------------------------------
   The signature element: the stamp.
   One loud thing. Everything else on the page stays quiet.
   ------------------------------------------------------------------ */
.stamp {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-family: var(--data);
  font-size: 0.63rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 0.32em 0.62em;
  border: 1.5px solid currentColor;
  border-radius: 2px;
  white-space: nowrap;
  line-height: 1.25;
}
.stamp--seal   { color: var(--seal);  background: var(--seal-bg); }
.stamp--flag   { color: var(--stamp); background: var(--stamp-bg); }
.stamp--amber  { color: var(--amber); background: var(--amber-bg); }
.stamp--quiet  { color: var(--mute);  background: transparent; border-color: var(--rule); }

/* The hero stamp is the one place the design raises its voice. */
.stamp--large {
  font-size: 0.78rem;
  padding: 0.5em 0.9em;
  border-width: 2.5px;
  transform: rotate(-2.4deg);
  box-shadow: 0 0 0 3px var(--panel);
}

/* ---------------------------------------------------------------------
   Layout
   ------------------------------------------------------------------ */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }

/* Section built on the margin rail: label on the left, content right. */
.railed { display: grid; grid-template-columns: var(--rail) 1fr; gap: 32px; }
@media (max-width: 860px) {
  .railed { grid-template-columns: 1fr; gap: 12px; }
}

.band { padding: 76px 0; border-top: 1px solid var(--rule); }
.band--tint { background: var(--tint); }

/* An inked band is the brand's own black wherever it appears, rather
   than "whatever --ink happens to be". On the dark surface --ink is
   ivory, and deriving this from it would paint an ivory band on a black
   page with ivory text on top of it. */
.band--ink  { background: var(--brand-black); color: var(--ivory); border-top: none; }
.band--ink h2 { color: var(--ivory); }
.band--ink .lede { color: var(--ivory-dim); }
.band--ink .rail-label { color: var(--brass); }

/* ---------------------------------------------------------------------
   Site header
   ------------------------------------------------------------------ */
/* The header is the brand's black on every page, whatever surface the
   content below it uses. A full black page turned out to be too much
   for pages that are mostly reading — but a dark band across the top is
   where the brand actually lives on janualabs.com anyway, and it gives
   the lockup the black ground its baked-in background requires.

   It reassigns the colour tokens for its own subtree rather than
   restating colours on .brand, .topnav and .btn one at a time. Same
   mechanism as body.brand-dark, scoped to a single element — which is
   why a light page can carry a dark header without one component rule
   being duplicated. */
.topbar {
  --ink:       var(--ivory);
  --ink-2:     var(--ivory-dim);
  --mute:      #8B8271;
  --paper:     var(--brand-black);
  --rule:      var(--brass-dim);
  --rule-soft: #241F18;

  display: flex; align-items: center; gap: 28px;
  padding: 18px 28px;
  border-bottom: 1px solid var(--brass-dim);
  background: var(--brand-black);
  color: var(--ivory);
  position: sticky; top: 0; z-index: 40;
}
/* Inside a black bar the plaque is an invisible rectangle with padding. */
.topbar .brandmark { background: transparent; padding: 0; }
/* Brass on hover, the way the marketing nav underlines its own link. */
.topbar .topnav a:not(.btn):hover { color: var(--brass); border-bottom-color: var(--brass); }
/* The wordmark is set in Jost, not Cormorant. At 1.1rem the serif's
   300 weight goes wispy and a logotype cannot afford to look faint;
   Jost 500 at wide tracking is also how janualabs.com sets it. */
.brand {
  font-family: var(--body);
  font-size: 1.02rem; font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-decoration: none;
  display: flex; align-items: center; gap: 10px;
}
.brand::before {
  content: '';
  width: 11px; height: 11px;
  border: 2px solid var(--brass);
  border-radius: 2px 2px 0 0;   /* an arch, not a square: janua = door */
  flex: none;
}

/* The real lockup, for the places that have room for it. Both PNGs
   ship with the black baked in — no alpha channel — so a logo may only
   ever sit on the brand black. On a light page it goes in a plaque,
   which is why .brandmark carries its own background rather than
   trusting whatever is behind it. */
.brandmark {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand-black);
  border-radius: 3px;
  padding: 10px 14px;
  flex: none;
}
/* Sized by WIDTH, at janualabs.com's own nav values, so the mark is the
   same size on both properties when a prospect clicks between them.
   Height follows the 224x161 aspect — about 80px — which is why the
   header is taller here than a text wordmark would make it. That is
   correct: it is how the marketing site sets it. */
.brandmark img { display: block; width: 112px; height: auto; }
@media (max-width: 720px) { .brandmark img { width: 88px; } }

/* The sign-in page has a whole column to itself and no nav competing
   with it, so the lockup gets to behave like the hero one. */
.brandmark--lg img { width: 200px; }
/* On a page that is already black, the plaque would be an invisible
   rectangle with padding. Drop it. */
.brand-dark .brandmark { background: transparent; padding: 0; }
.topnav { display: flex; gap: 22px; margin-left: auto; align-items: center; }

/* :not(.btn) matters more than it looks.
 *
 * ".topnav a" scores (0,1,1) and ".btn" scores (0,1,0), so without the
 * exclusion the nav rule wins the cascade and paints a button's label in
 * --ink-2 on its --ink background: dark grey on near-black, a contrast
 * ratio of about 1.5:1, which is illegible. The hover rule then made it
 * worse, darkening the text further and drawing a stray underline across
 * the button.
 *
 * Excluding buttons here is better than bumping .btn's specificity,
 * because it keeps .btn the single place that decides how a button
 * looks anywhere on the site. The same trap exists on ".side a" in the
 * dashboard shell; there are no buttons in that sidebar today, so it is
 * left alone rather than changed speculatively.
 */
.topnav a:not(.btn) {
  text-decoration: none; color: var(--ink-2); font-size: 0.92rem;
  padding-bottom: 2px; border-bottom: 1.5px solid transparent;
}
.topnav a:not(.btn):hover { color: var(--ink); border-bottom-color: var(--ink); }
@media (max-width: 720px) { .topnav .hide-sm { display: none; } }

/* ---------------------------------------------------------------------
   Buttons
   ------------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--body); font-size: 0.92rem; font-weight: 500;
  padding: 11px 18px;
  border: 1.5px solid var(--ink);
  border-radius: 3px;
  background: var(--ink); color: var(--paper);
  text-decoration: none; cursor: pointer;
  transition: transform .12s ease, background .12s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); }
.btn--seal  { background: var(--seal); border-color: var(--seal); color: #fff; }
.btn--flag  { background: transparent; border-color: var(--stamp); color: var(--stamp); }
.btn--flag:hover { background: var(--stamp); color: #fff; }
.btn--sm { padding: 7px 12px; font-size: 0.82rem; }

.btn:focus-visible, a:focus-visible, button:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2.5px solid var(--seal);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------
   Hero: the specimen.
   Instead of a headline floating over whitespace, the hero shows the
   artifact itself, a transcript with review marks in the margin.
   ------------------------------------------------------------------ */
.hero { padding: 74px 0 66px; }
.hero h1 { max-width: 15ch; }
.hero .lede { margin-top: 22px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

.specimen {
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 4px;
  box-shadow: 0 1px 0 var(--rule-soft), 0 18px 40px -34px rgba(22,24,28,.5);
  overflow: hidden;
}
.specimen-head {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--rule-soft);
  background: var(--panel-2);
}
.specimen-body { padding: 6px 0; }

/* One transcript line, with its review mark in the margin. */
.turn { display: grid; grid-template-columns: 104px 1fr; gap: 14px; padding: 12px 16px; }
.turn + .turn { border-top: 1px dashed var(--rule-soft); }
.turn-mark { text-align: right; padding-top: 2px; }
.turn-who {
  font-family: var(--data); font-size: 0.63rem; font-weight: 600;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--mute);
  display: block; margin-bottom: 6px;
}
.turn-text { font-size: 0.94rem; line-height: 1.55; }
.turn--caller .turn-text { color: var(--ink-2); }
.turn--blocked { background: linear-gradient(90deg, var(--stamp-bg), transparent 70%); }
.turn-src {
  font-family: var(--data); font-size: 0.68rem; color: var(--mute);
  margin-top: 6px; display: block;
}
@media (max-width: 620px) {
  .turn { grid-template-columns: 1fr; }
  .turn-mark { text-align: left; }
}

/* ---------------------------------------------------------------------
   Two surfaces: the caller's side and the firm's side.

   The single most common misreading of this product is that the caller
   sees the machinery - the confidence scores, the entry numbers, the
   flags. They do not. The caller sees a conversation; the firm sees a
   record; both come from the same moment.

   So the two are shown side by side, deliberately styled to look like
   different KINDS of object. The caller column is soft and rounded like
   a chat. The firm column is ruled and monospaced like a file. The
   contrast is the argument, which is why it is done in the stylesheet
   rather than left to the copy.
   ------------------------------------------------------------------ */
.views { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }
@media (max-width: 900px) { .views { grid-template-columns: 1fr; } }

.view-head { margin-bottom: 12px; }
.view-who {
  font-family: var(--data); font-size: 0.63rem; font-weight: 600;
  letter-spacing: 0.13em; text-transform: uppercase;
  display: block; margin-bottom: 5px;
}
.view--caller .view-who { color: var(--mute); }
.view--firm   .view-who { color: var(--seal); }
.view-sub { font-size: 0.87rem; color: var(--mute); line-height: 1.5; }

/* Caller side: a chat, not a document. */
.view-chat {
  background: var(--panel); border: 1px solid var(--rule);
  border-radius: 12px; padding: 16px; display: flex;
  flex-direction: column; gap: 10px;
}
.view-chat .bubble { max-width: 88%; }

/* Firm side: a file, not a chat. Field label left, value right. */
.view-rec {
  background: var(--panel); border: 1px solid var(--rule);
  border-radius: 4px; overflow: hidden;
}
.rec-row { display: grid; grid-template-columns: 116px 1fr; gap: 12px; padding: 11px 15px; }
.rec-row + .rec-row { border-top: 1px dashed var(--rule-soft); }
.rec-k {
  font-family: var(--data); font-size: 0.63rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--mute); padding-top: 3px;
}
.rec-v { font-size: 0.9rem; line-height: 1.5; }
.rec-note {
  font-family: var(--data); font-size: 0.68rem; color: var(--mute);
  display: block; margin-top: 5px;
}
@media (max-width: 620px) {
  .rec-row { grid-template-columns: 1fr; gap: 4px; }
}

/* The line between the two columns, on wide screens only. */
@media (min-width: 901px) {
  .views .view--firm { padding-left: 26px; border-left: 1px solid var(--rule-soft); }
}

/* ---------------------------------------------------------------------
   Cards, grids
   ------------------------------------------------------------------ */
.grid { display: grid; gap: 18px; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px) { .grid--3 { grid-template-columns: 1fr; } .grid--2 { grid-template-columns: 1fr; } }

.card {
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 22px;
}
.card h3 { margin-bottom: 8px; }
.card p { font-size: 0.93rem; color: var(--ink-2); }
.card--ink { background: var(--brand-black2); border-color: var(--brass-dim); color: var(--ivory-dim); }
.card--ink h3 { color: var(--ivory); }
.card--ink p  { color: var(--ivory-dim); }

/* A step in the approval loop. Numbered, because it genuinely is a
   sequence and the order carries meaning. */
.step { position: relative; padding-left: 46px; }
.step-n {
  position: absolute; left: 0; top: 1px;
  font-family: var(--data); font-size: 0.7rem; font-weight: 600;
  color: var(--seal);
  border: 1.5px solid var(--seal); border-radius: 50%;
  width: 30px; height: 30px;
  display: grid; place-items: center;
}

/* ---------------------------------------------------------------------
   Pricing
   ------------------------------------------------------------------ */
.price { font-family: var(--display); font-size: 2.9rem; font-weight: 300; letter-spacing: -0.02em; }
.price small { font-family: var(--body); font-size: 0.85rem; font-weight: 400; color: var(--mute); letter-spacing: 0; }
.plan-features { list-style: none; margin: 18px 0 0; padding: 0; }
.plan-features li {
  font-size: 0.9rem; color: var(--ink-2);
  padding: 7px 0 7px 22px; position: relative;
  border-top: 1px solid var(--rule-soft);
}
.plan-features li::before {
  content: ''; position: absolute; left: 2px; top: 15px;
  width: 8px; height: 8px; border: 1.5px solid var(--seal); border-radius: 1px;
}
.card--featured { border-color: var(--ink); border-width: 1.5px; }

/* ---------------------------------------------------------------------
   Dashboard shell
   ------------------------------------------------------------------ */
.shell { display: grid; grid-template-columns: 234px 1fr; min-height: 100vh; }
@media (max-width: 900px) { .shell { grid-template-columns: 1fr; } }

/* The sidebar is the brand's black even on the light dashboard. It is
   the one piece of chrome present on every admin page, which makes it
   the right place to carry the lockup, and it gives the logo the black
   ground its baked-in background requires. */
.side {
  background: var(--brand-black); color: var(--ivory-dim);
  padding: 20px 14px; border-right: 1px solid var(--brass-dim);
}
.side .brandmark { margin: 0 0 20px; padding: 0; background: transparent; }
.side .brand { color: var(--ivory); padding: 0 10px 20px; }
.side .brand::before { border-color: var(--brass); }
.side-group { margin-top: 20px; }
.side-group > .rail-label { padding: 0 10px 9px; display: block; color: var(--brass-dim); }
.side a {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 10px; margin-bottom: 2px;
  border-radius: 3px; text-decoration: none;
  color: var(--ivory-dim); font-size: 0.92rem;
}
.side a:hover { background: #17140F; color: var(--ivory); }
/* The current page is marked with brass down the edge rather than a
   lighter fill. On this palette a fill reads as another surface. */
.side a.on {
  background: #17140F; color: var(--ivory);
  box-shadow: inset 2px 0 0 var(--brass);
}
.side .count {
  margin-left: auto;
  font-family: var(--data); font-size: 0.68rem; font-weight: 600;
  padding: 1px 6px; border-radius: 2px;
  background: var(--stamp); color: #fff;
}
.side .count--quiet { background: #241F18; color: var(--ivory-dim); }

.main { min-width: 0; }
.mainbar {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 30px; border-bottom: 1px solid var(--rule); background: var(--panel);
}
.mainbar .who { margin-left: auto; text-align: right; font-size: 0.84rem; line-height: 1.3; }
.mainbar .who small { color: var(--mute); }
.page { padding: 30px; }
.page-head { margin-bottom: 24px; }
.page-head p { color: var(--mute); font-size: 0.94rem; margin-top: 6px; }

/* Metric tiles. Labelled honestly: nothing here rewards auto-clearing. */
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 26px; }
@media (max-width: 1050px) { .tiles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .tiles { grid-template-columns: 1fr; } }
.tile {
  background: var(--panel); border: 1px solid var(--rule);
  border-radius: 4px; padding: 15px 17px;
}
.tile .n {
  font-family: var(--display); font-size: 2.35rem; font-weight: 300;
  letter-spacing: -0.02em; display: block; margin: 4px 0 2px;
}
.tile .sub { font-size: 0.78rem; color: var(--mute); }
.tile--flag { border-color: var(--stamp); }
.tile--flag .n { color: var(--stamp); }

/* Tables */
.table-wrap { background: var(--panel); border: 1px solid var(--rule); border-radius: 4px; overflow: auto; }
table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
thead th {
  font-family: var(--data); font-size: 0.64rem; font-weight: 600;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--mute);
  text-align: left; padding: 11px 14px;
  border-bottom: 1px solid var(--rule); white-space: nowrap;
}
tbody td { padding: 13px 14px; border-bottom: 1px solid var(--rule-soft); vertical-align: top; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--panel-2); }
td .name { font-weight: 500; }
td .meta { font-size: 0.8rem; color: var(--mute); }

/* Filter bar */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; align-items: center; }
.filters input[type=search], .filters select, .field input, .field textarea, .field select {
  font-family: var(--body); font-size: 0.9rem;
  padding: 8px 11px; border: 1px solid var(--rule); border-radius: 3px;
  background: var(--panel); color: var(--ink);
}
.filters input[type=search] { min-width: 230px; }
.chip {
  font-family: var(--data); font-size: 0.68rem; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 6px 10px; border: 1px solid var(--rule); border-radius: 3px;
  text-decoration: none; color: var(--ink-2); background: var(--panel);
}
.chip.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* Forms */
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 0.84rem; font-weight: 500; margin-bottom: 5px; }
.field .hint { font-size: 0.8rem; color: var(--mute); margin-top: 5px; }
.field input, .field textarea, .field select { width: 100%; }
.field textarea { min-height: 108px; resize: vertical; line-height: 1.55; font-family: var(--body); }

/* Approval queue item: the most important component in the product. */
.approval {
  background: var(--panel); border: 1px solid var(--rule);
  border-left: 3px solid var(--amber);
  border-radius: 4px; padding: 18px 20px; margin-bottom: 14px;
}
.approval-q { font-family: var(--display); font-size: 1.42rem; font-weight: 300; }
.approval-meta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 8px 0 14px; }
.approval-actions { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; margin-top: 12px; }
.approval-actions .spacer { flex: 1; }

/* Empty states are an invitation, not a shrug. */
.empty {
  background: var(--panel); border: 1px dashed var(--rule);
  border-radius: 4px; padding: 44px 28px; text-align: center;
}
.empty h3 { margin-bottom: 7px; }
.empty p { color: var(--mute); font-size: 0.92rem; max-width: 46ch; margin: 0 auto; }

.notice {
  border-left: 3px solid var(--seal); background: var(--seal-bg);
  padding: 12px 16px; border-radius: 0 3px 3px 0;
  font-size: 0.9rem; margin-bottom: 20px;
}
.notice--flag { border-left-color: var(--stamp); background: var(--stamp-bg); }

/* ---------------------------------------------------------------------
   Chat demo widget
   ------------------------------------------------------------------ */
.chat {
  background: var(--panel); border: 1px solid var(--rule); border-radius: 5px;
  display: flex; flex-direction: column; height: min(600px, 74vh);
  overflow: hidden;
}
.chat-head { padding: 13px 17px; border-bottom: 1px solid var(--rule-soft); background: var(--panel-2); }
.chat-log { flex: 1; overflow-y: auto; padding: 18px; }
.chat-form { display: flex; gap: 9px; padding: 13px; border-top: 1px solid var(--rule-soft); }
.chat-form input { flex: 1; }

.bubble { max-width: 82%; padding: 11px 14px; border-radius: 4px; margin-bottom: 6px; font-size: 0.93rem; line-height: 1.55; }
.bubble--bot  { background: var(--tint); }
.bubble--user { background: var(--ink); color: var(--paper); margin-left: auto; }
.msg { margin-bottom: 16px; display: flex; flex-direction: column; }

/* The receipt under every assistant line. This is the demo's whole
   point: you can see where each answer came from. */
.receipt {
  font-family: var(--data); font-size: 0.66rem; color: var(--mute);
  display: flex; flex-wrap: wrap; align-items: center; gap: 7px;
}
.receipt--flag { color: var(--stamp); }

.typing span {
  display: inline-block; width: 5px; height: 5px; margin-right: 3px;
  background: var(--mute); border-radius: 50%;
  animation: blink 1.3s infinite;
}
.typing span:nth-child(2) { animation-delay: .18s; }
.typing span:nth-child(3) { animation-delay: .36s; }
@keyframes blink { 0%,60%,100% { opacity: .25; } 30% { opacity: 1; } }

.footer {
  border-top: 1px solid var(--rule); padding: 30px 0;
  font-size: 0.84rem; color: var(--mute);
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
}
.footer .brand { font-size: 1rem; text-decoration: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  .stamp--large { transform: none; }
}