/* Audiadis design system adapted to a touch app: its identity (colours, fonts), not its document rules.
   Contrast (WCAG 2.1): ink on amber 6.9:1, ink on white 13.2:1, --ink-2 on white 7.2:1, --ink-3 on white
   5.4:1 / on --bg 4.9:1 / on --amber-tint 4.9:1, white on --blue 6.9:1, white on --red 5.3:1, amber on
   --studio 6.9:1, --studio-text-2 on --studio 6.9:1. Amber is never text on a light surface. */

@font-face { font-family: "Bariol"; src: url("../assets/fonts/Bariol_Regular.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Bariol"; src: url("../assets/fonts/Bariol_Bold.otf") format("opentype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Archia"; src: url("../assets/fonts/Archia-Medium.otf") format("opentype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Archia"; src: url("../assets/fonts/Archia-SemiBold.otf") format("opentype"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Archia"; src: url("../assets/fonts/Archia-Bold.otf") format("opentype"); font-weight: 700; font-style: normal; font-display: swap; }
/* Knile: the announcement's own words and the user's quoted words only. */
@font-face { font-family: "Knile"; src: url("../assets/fonts/Knile-Regular.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Knile"; src: url("../assets/fonts/Knile-Regular-Italic.otf") format("opentype"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Knile"; src: url("../assets/fonts/Knile-SemiBold.otf") format("opentype"); font-weight: 600; font-style: normal; font-display: swap; }

:root {
  color-scheme: light;

  /* Amber Sound 40: fills and accents only (primary action, active states, progress, the waveform). */
  --amber: #FFAB00;
  --amber-press: #F29D00;
  --amber-soft: #FFE3A3;
  --amber-tint: #FFF3D6;        /* filled cases, selected rows */
  --amber-wash: #FFF9EC;        /* hover of amber-tinted blocks */
  --amber-line: #B37400;        /* outline on the tint */
  --amber-text: #7A5000;        /* text on the tint (6.4:1) */

  /* Blue Grey ramp, from Blue Grey 90 (#263238) to Blue Grey 05 (#ECEFF1). */
  --ink: #263238;
  --ink-2: #455A64;
  --ink-3: #546E7A;
  --ink-4: #78909C;             /* borders and icons only, never body text */
  --line: #CFD8DC;
  --line-soft: #E3E8EB;
  --surface: #ECEFF1;
  --bg: #F3F5F6;                /* app background */
  --paper: #FFFFFF;

  /* The studio: where sound plays or is produced (Blue Grey 90, deepened). */
  --studio: #263238;
  --studio-deep: #1A2327;
  --studio-raise: #32424A;
  --studio-line: rgba(255, 255, 255, .12);
  --studio-text: #FFFFFF;
  --studio-text-2: #B0BEC5;

  /* Blue Screen 40: information announcements, links, focus. */
  --blue: #2B5B95;
  --blue-press: #234C7E;
  --blue-tint: #E7EEF7;
  --blue-soft: #C9D8EC;

  /* Red Scent 40: destructive actions and the "on air" light. */
  --red: #D01950;
  --red-press: #B01242;
  --red-tint: #FBE8EE;

  /* Alerts: base colours for icons and fills, darker shades for text. */
  --ok: #2ECC71;
  --ok-text: #1B7F46;
  --ok-tint: #E4F7EC;
  --warn: #F1C40F;
  --warn-text: #7D6608;
  --err-text: #B03A2E;
  --err-tint: #FDECEA;

  --focus: #2B5B95;

  --font-ui: "Bariol", "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-title: "Archia", "Bariol", "Helvetica Neue", Arial, sans-serif;
  --font-editorial: "Knile", Georgia, "Times New Roman", serif;

  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 20px;
  --r-xl: 26px;
  --r-pill: 999px;

  --gutter: 16px;
  --tap: 48px;
  --col: 680px;                 /* the work column of a flow */
  --col-cases: 300px;
  --maxw: 1180px;
  --appbar-h: 60px;
  --tabbar-h: 64px;
  --rail-w: 92px;
  --sidebar-w: 256px;

  --shadow-1: 0 1px 2px rgba(38, 50, 56, .06), 0 1px 3px rgba(38, 50, 56, .05);
  --shadow-2: 0 1px 2px rgba(38, 50, 56, .05), 0 6px 20px rgba(38, 50, 56, .08);
  --shadow-3: 0 18px 48px rgba(38, 50, 56, .22), 0 4px 12px rgba(38, 50, 56, .10);
  --shadow-amber: 0 6px 18px rgba(242, 157, 0, .32);
  --shadow-studio: 0 14px 36px rgba(26, 35, 39, .28), 0 2px 6px rgba(26, 35, 39, .18);

  --ease-out: cubic-bezier(.2, .9, .3, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --t-fast: .12s;
  --t-base: .2s;
  --t-slow: .32s;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 17px/1.45 var(--font-ui);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { display: block; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }
a { color: var(--blue); }
[hidden] { display: none !important; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
/* Headings receive focus from script when a screen or panel opens: no ring on them. */
[tabindex="-1"]:focus { outline: none; }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}