/* =====================================================================
 * Jackson Enterprises theme
 *
 * style.css is the design system shared with Tech Efficient's own portal and
 * is kept byte-for-byte so it can be re-copied when that one improves. This
 * file loads after it and changes only tokens: the look is black, white and
 * graphite, with one red.
 *
 * Where the red goes, and where it deliberately does not:
 *   - primary buttons, the brand mark, the active item in the dark rail, the
 *     Scan button, the last point of a sparkline
 *   - NOT links, focus rings, checkboxes or chart bars. On a maintenance
 *     screen red already means "overdue"; if every link and ring were red
 *     too, overdue would stop standing out. Those are ink-colored instead.
 *
 * Palette taken from barrett-jackson.com's own stylesheets (logo red
 * #D71920, backgrounds #121217 and #282833). No logo is used anywhere.
 * =================================================================== */

@font-face {
  font-family: "Inter var";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/InterVariable.woff2") format("woff2");
}

:root {
  --brand:         #d71920;
  --brand-hover:   #b5121b;
  --brand-soft:    #fdecec;
  --brand-ink:     #a80f17;   /* red text on white: 7.4:1 */

  --bg:           #f4f4f6;
  --panel:        #ffffff;
  --panel-soft:   #f8f8fa;
  --panel-inset:  #efeff3;
  --bg-soft:      #f5f5f8;
  --line:         #e4e4ea;
  --line-soft:    #ededf2;
  --line-strong:  #cfcfd8;

  --ink:          #121217;
  --ink-2:        #2a2a33;
  --ink-muted:    #5e5e6b;
  --ink-faint:    #6c6c79;   /* real small text uses it: 4.5:1 or better on every surface */

  --accent:        #121217;
  --accent-2:      #e5252d;   /* the rail's active marker, on near-black */
  --accent-hover:  #000000;
  --accent-soft:   #efeff3;
  --accent-soft-2: #dedee6;
  --accent-ring:   rgba(18, 18, 23, .16);
  --link:          #121217;
  --link-hover:    #b5121b;
  --accent-fill:       var(--brand);        /* white on it: 5.2:1 */
  --accent-fill-hover: var(--brand-hover);  /* 7.2:1 */
  --accent-ink:        #121217;

  --solid:          #121217;
  --emphasis:       #121217;
  --emphasis-hover: #000000;

  --inverse-bg:   #121217;
  --inverse-line: #121217;

  --rail-bg:        #121217;
  --rail-bg-2:      #1b1b22;
  --rail-line:      #282833;
  --rail-edge:      #000000;
  --rail-ink:       #dedee6;
  --rail-ink-2:     #9c9caa;
  --rail-active-bg: rgba(255, 255, 255, .07);
  --rail-badge-bg:  #d71920;

  --chart-grid:        #ededf2;
  --chart-axis:        #cfcfd8;
  --chart-bar:         #2a2a33;
  --chart-bar-hover:   #121217;
  --chart-bar-partial: #c9c9d3;
  --chart-ref:         #8a8a98;
  --spark:             #c9c9d3;
  --spark-accent:      #d71920;
  --series-1:          #2a2a33;

  /* Height of the phone tab bar, 0 where it is not shown. */
  --tabbar-h: 0px;
}

@media (max-width: 900px) {
  /* The top bar holds its 52px below the status bar (app.css, "The phone's edges"). */
  :root { --tabbar-h: 60px; --top-h: calc(52px + env(safe-area-inset-top, 0px)); }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --brand-soft:   rgba(215, 25, 32, .16);
    --brand-ink:    #ff8a8e;

    --bg:           #0c0c10;
    --panel:        #16161c;
    --panel-soft:   #1c1c23;
    --panel-inset:  #23232c;
    --bg-soft:      #1c1c23;
    --line:         #2a2a35;
    --line-soft:    #22222b;
    --line-strong:  #3b3b49;

    --ink:          #ececf1;
    --ink-2:        #c8c8d2;
    --ink-muted:    #9898a6;
    --ink-faint:    #8a8a98;

    --accent:        #ececf1;
    --accent-2:      #e5252d;
    --accent-hover:  #ffffff;
    --accent-soft:   #23232c;
    --accent-soft-2: #30303c;
    --accent-ring:   rgba(236, 236, 241, .22);
    --link:          #ececf1;
    --link-hover:    #ff8a8e;
    --accent-fill:       #d71920;
    --accent-fill-hover: #b5121b;
    --accent-ink:        #ececf1;

    --solid:          #ececf1;
    --emphasis:       #d71920;
    --emphasis-hover: #b5121b;

    --inverse-bg:   #2a2a35;
    --inverse-line: #3b3b49;

    --rail-bg:      #101014;
    --rail-bg-2:    #16161c;
    --rail-line:    #262630;
    --rail-ink:     #dedee6;
    --rail-ink-2:   #9494a2;

    --chart-grid:        #22222b;
    --chart-axis:        #3b3b49;
    --chart-bar:         #c8c8d2;
    --chart-bar-hover:   #ffffff;
    --chart-bar-partial: #3b3b49;
    --chart-ref:         #6e6e7c;
    --spark:             #3b3b49;
    --spark-accent:      #ff5a60;
    --series-1:          #c8c8d2;
  }
}
:root[data-theme="dark"] {
  --brand-soft:   rgba(215, 25, 32, .16);
  --brand-ink:    #ff8a8e;

  --bg:           #0c0c10;
  --panel:        #16161c;
  --panel-soft:   #1c1c23;
  --panel-inset:  #23232c;
  --bg-soft:      #1c1c23;
  --line:         #2a2a35;
  --line-soft:    #22222b;
  --line-strong:  #3b3b49;

  --ink:          #ececf1;
  --ink-2:        #c8c8d2;
  --ink-muted:    #9898a6;
  --ink-faint:    #8a8a98;

  --accent:        #ececf1;
  --accent-2:      #e5252d;
  --accent-hover:  #ffffff;
  --accent-soft:   #23232c;
  --accent-soft-2: #30303c;
  --accent-ring:   rgba(236, 236, 241, .22);
  --link:          #ececf1;
  --link-hover:    #ff8a8e;
  --accent-fill:       #d71920;
  --accent-fill-hover: #b5121b;
  --accent-ink:        #ececf1;

  --solid:          #ececf1;
  --emphasis:       #d71920;
  --emphasis-hover: #b5121b;

  --inverse-bg:   #2a2a35;
  --inverse-line: #3b3b49;

  --rail-bg:      #101014;
  --rail-bg-2:    #16161c;
  --rail-line:    #262630;
  --rail-ink:     #dedee6;
  --rail-ink-2:   #9494a2;

  --chart-grid:        #22222b;
  --chart-axis:        #3b3b49;
  --chart-bar:         #c8c8d2;
  --chart-bar-hover:   #ffffff;
  --chart-bar-partial: #3b3b49;
  --chart-ref:         #6e6e7c;
  --spark:             #3b3b49;
  --spark-accent:      #ff5a60;
  --series-1:          #c8c8d2;
}

/* Links are ink-colored, so the names people click in tables carry weight
   instead of color. Hover turns them the brand red. */
.tbl td a:not(.btn):not(.chip):not(.pill),
.cell-id a { font-weight: 600; }

/* The brand mark is an image: the "B" of Barrett-Jackson's script logo on a
   near-black tile (portal/assets/img/brand-mark.png; see scripts/brand/README.md).
   It is applied here, to the class, so every page that prints a .brand-mark
   gets it with no change to its markup; the letters inside the span stay for
   anything that reads the page without styles. To go back to plain letters,
   delete this block down to "end brand image". */
.brand-mark {
  border-radius: 7px;
  background: #121217 url("/assets/img/brand-mark.png") center / cover no-repeat;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09);
  color: transparent;
  overflow: hidden;
  text-indent: -99px;
  user-select: none;
}
/* The rail's head: the whole script when the rail is open, the mark alone when
   it is collapsed to icons. */
.sidebar-brand { align-items: flex-start; }
.sidebar-brand .brand-mark { display: none; }
.brand-logo { display: block; width: 138px; height: auto; margin: 0 0 5px -3px; }
.sidebar-brand .brand-sub { margin-top: 0; font-size: 9.5px; font-weight: 600; letter-spacing: .055em; text-transform: uppercase; white-space: nowrap; }
@media not all and (max-width: 900px) {
  html[data-rail="compact"] .sidebar-brand .brand-mark { display: inline-grid; }
}
/* Signed-out pages: the script over the card. */
.auth-brand--logo { flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.auth-logo { display: block; width: 216px; max-width: 70vw; height: auto; }
.auth-brand--logo .auth-brand-sub { margin-top: 0; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
/* end brand image */

/* The rail is taller than some windows: it scrolls, and the search box keeps its height. */
.sidebar-search { flex: 0 0 auto; }

/* Section eyebrows in the brand red, small caps: the one place red is text. */
.eyebrow { color: var(--brand-ink); }

/* The tab bar and the Ask button sit over the bottom of the page on phones:
   keep the last row of content clear of both. */
.main { padding-bottom: calc(64px + var(--tabbar-h) + env(safe-area-inset-bottom, 0px)); }