/* Industry — the tablet design system (tokens, fonts, primitives; no layout rules).
   Source: docs/plans/vertical-tablet/source/industry-styles.css. Page sheets re-point their own
   token names at the --industry-* values below; nothing else in a page sheet names a colour.
   Fonts: Roboto / Roboto Condensed from @fontsource 5.3.0, SIL OFL 1.1 (licences beside them).
   The handoff's Barlow has no Cyrillic — never swap in a family without a Cyrillic subset. */

@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/industry/fonts/roboto-cyrillic-400-normal.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/industry/fonts/roboto-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/static/industry/fonts/roboto-cyrillic-500-normal.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/static/industry/fonts/roboto-latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/static/industry/fonts/roboto-cyrillic-700-normal.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/static/industry/fonts/roboto-latin-700-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Roboto Condensed";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/static/industry/fonts/roboto-condensed-cyrillic-600-normal.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Roboto Condensed";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/static/industry/fonts/roboto-condensed-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --industry-bg: #f2f2f3;
  --industry-surface: #e9e9ea;
  --industry-text: #1d1f20;
  --industry-accent: #5980a6;

  --industry-accent-100: #eef6ff;
  --industry-accent-200: #d6ebff;
  --industry-accent-300: #b5d9fd;
  --industry-accent-400: #94bce3;
  --industry-accent-500: #749dc4;
  --industry-accent-600: #597ea3;
  --industry-accent-700: #416180;
  --industry-accent-800: #2c455d;
  --industry-accent-900: #1d2d3d;

  --industry-neutral-100: #f5f5f8;
  --industry-neutral-200: #e7e7ea;
  --industry-neutral-300: #d4d4d7;
  --industry-neutral-400: #b7b7ba;
  --industry-neutral-500: #98989b;
  --industry-neutral-600: #7a7a7d;
  --industry-neutral-700: #5d5d60;
  --industry-neutral-800: #424244;
  --industry-neutral-900: #2b2b2d;

  --industry-divider: color-mix(in srgb, #1d1f20 16%, transparent);
  --industry-muted: color-mix(in srgb, #1d1f20 55%, transparent);
  --industry-mark: color-mix(in srgb, #1d1f20 55%, transparent);
  --industry-scrim: rgba(43, 43, 45, 0.5);

  --industry-font-heading: "Roboto Condensed", system-ui, sans-serif;
  --industry-font-body: "Roboto", system-ui, sans-serif;
}

/* Corner marks: a `+` centred on each corner point of a frame, as in the handoff — 5 px of every
   arm outside the frame. A background cannot paint outside its border box, so the marks are the
   frame's `::before`, 6 px larger than its padding box:

     .frame { position: relative; }
     .frame::before { content: ""; position: absolute; inset: -6px;
                      background: var(--industry-marks); pointer-events: none; }

   `-6px` centres the arms on a 1 px border; a frame whose line is an inset box-shadow uses `-5px`.
   The frame keeps its own fill as its background. A box that clips around or at a marked frame
   leaves the arms room with `overflow: clip; overflow-clip-margin: 6px`, never a bare
   `overflow: hidden`. A scroll container never carries marks — its `::before` would scroll and
   grow the scroll range — so the frame is an unscrolled parent of the scroller.
   `.industry-marks` does the same from markup. */
:root {
  --industry-marks:
    linear-gradient(var(--industry-mark), var(--industry-mark)) left 5px top 0 / 1px 11px no-repeat,
    linear-gradient(var(--industry-mark), var(--industry-mark)) left 0 top 5px / 11px 1px no-repeat,
    linear-gradient(var(--industry-mark), var(--industry-mark)) right 5px top 0 / 1px 11px no-repeat,
    linear-gradient(var(--industry-mark), var(--industry-mark)) right 0 top 5px / 11px 1px no-repeat,
    linear-gradient(var(--industry-mark), var(--industry-mark)) left 5px bottom 0 / 1px 11px no-repeat,
    linear-gradient(var(--industry-mark), var(--industry-mark)) left 0 bottom 5px / 11px 1px no-repeat,
    linear-gradient(var(--industry-mark), var(--industry-mark)) right 5px bottom 0 / 1px 11px no-repeat,
    linear-gradient(var(--industry-mark), var(--industry-mark)) right 0 bottom 5px / 11px 1px no-repeat;
}

.industry-marks {
  position: relative;
}

.industry-marks::before {
  content: "";
  position: absolute;
  inset: -6px;
  pointer-events: none;
  background: var(--industry-marks);
}

:focus-visible {
  outline: 2px solid var(--industry-accent);
  outline-offset: 2px;
}

/* Kickers, summary spans, hints and short labels that exist only in the portrait layout.
   The only orientation query this file may hold. */
.portrait-only {
  display: none;
}

@media (orientation: portrait) {
  .portrait-only {
    display: revert;
  }
}