/* LineFigs — brand theme for the internal build.

   Taken from the real thing: linefigures.com's banner is black, white and a
   brick red, with a harlequin diamond band across the top and the white line-art
   horse head. Colours sampled straight off images/logo.gif, where black, white
   and #912f2d are 80% of the pixels between them.

   Nothing here is shared with Duke's Picks. That is warm black, gold and a
   Playfair serif with pill buttons; this is neutral black, brick red and a
   heavy grotesque with square corners.

   Overlays public/theme.css at build time when AUDIENCE=internal. */

:root {
  --bg:        #0d0d0d;
  --bg-deep:   #000000;
  --bg-raised: #151515;
  --bg-input:  #1c1c1c;

  /* #912f2d is the brand red and it is DARK: about 2.4:1 on this background,
     which is unreadable as text. So it fills, and a lightened version of the
     same hue does the text and the hairlines at 4.5:1. */
  --accent:            #cf5049;
  --accent-soft:       #e58079;
  --accent-rgb:        207, 80, 73;
  --accent-fill:       #912f2d;
  --accent-fill-hover: #a83936;
  --accent-ink:        #ffffff;

  --ink:     #f2f2f2;
  --ink-rgb: 242, 242, 242;

  /* The wordmark is a heavy grotesque, so the headings are too. */
  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --sans:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono:    ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  --display-weight:    700;
  --display-tracking:  -0.02em;
  --display-transform: none;

  --eyebrow-tracking: 0.22em;

  /* The banner is hard-edged blocks and diamonds. Nothing here is rounded. */
  --radius:     3px;
  --radius-sm:  2px;
  --btn-radius: 3px;
}

/* Figures, markers and column names in the mono face, with tabular numerals so
   a column of figures lines up. */
.turn-body code,
.turn-body pre,
.turn-body table { font-family: var(--mono); }
.turn-body table { font-variant-numeric: tabular-nums; }

/* ── The diamond band ─────────────────────────────────────────────────────
   The harlequin strip off the top of the banner, rebuilt in CSS: two 45deg
   gradients offset by half a tile give a row of diamonds. The logo carries its
   own band, so this only runs where the logo does not: across the top of the
   chat, which is otherwise unbranded. */
.chat-head {
  position: relative;
}
.chat-head::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background-color: var(--bg-deep);
  background-image:
    linear-gradient(45deg, var(--accent-fill) 25%, transparent 25%, transparent 75%, var(--accent-fill) 75%),
    linear-gradient(45deg, var(--accent-fill) 25%, transparent 25%, transparent 75%, var(--accent-fill) 75%);
  background-size: 12px 12px;
  background-position: 0 0, 6px 6px;
}

/* The mark is the banner, not a square badge. */
.login-mark {
  width: 202px;
  height: auto;
  max-width: 100%;
  margin: 0 0 22px;
  border-radius: 0;
  /* Hard-edged blocks and line art: let the browser keep the edges. */
  image-rendering: -webkit-optimize-contrast;
}

/* The banner already says LineFigs, so the eyebrow under it is the name twice.
   It stays in the sidebar, where there is no logo. */
.login-card .eyebrow { display: none; }