/*
 * Frissbi design system: the single source of colour, type, shape and motion tokens.
 * Palette from the owner's UI theme note: warm off-white surfaces, an orange -> yellow
 * accent with red-orange depth, charcoal text and soft neutral grays. Light only.
 *
 * Tokens live on :root. Base element styles apply only inside <body class="fr-ui">, so a
 * page changes only when it opts in. Contrast pairs are checked by
 * server/test/themeTokens.test.js; keep every text pairing at WCAG AA or better.
 */

@font-face {
  font-family: "Frissbi Inter";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../assets/fonts/FrissbiInter-latin.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: "Frissbi Inter";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../assets/fonts/FrissbiInter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  color-scheme: light;

  /* Palette from the theme note */
  --fr-orange: #FF6A2B;
  --fr-amber: #FF8A1F;
  --fr-yellow: #FFC233;
  --fr-bg: #FFF8F2;
  --fr-text: #111827;

  /* Accent. Labels on accent fills are always charcoal: white on orange is only 2.86:1. */
  --fr-accent-gradient: linear-gradient(135deg, #FF6A2B, #FF8A1F 50%, #FFC233);
  --fr-accent-gradient-x: linear-gradient(90deg, #FF6A2B, #FF8A1F 55%, #FFC233);
  --fr-on-accent: #111827;
  --fr-accent-tint: #FFF1E8;
  --fr-accent-tint-strong: #FFE2CC;
  --fr-accent-ink: #B4390A;

  /* Surfaces and neutral grays */
  --fr-surface: #FFFFFF;
  --fr-surface-inset: #F9FAFB;
  --fr-gray-50: #F9FAFB;
  --fr-gray-100: #F3F4F6;
  --fr-gray-200: #E5E7EB;
  --fr-gray-300: #D1D5DB;
  --fr-gray-400: #9CA3AF;

  /* Text */
  --fr-text-secondary: #4B5563;
  --fr-text-muted: #5F6673;
  --fr-text-disabled: #9CA3AF;

  /* Borders: charcoal-derived. The strong border is for input outlines (3:1 or better). */
  --fr-border: rgba(17, 24, 39, 0.10);
  --fr-border-hover: rgba(17, 24, 39, 0.18);
  --fr-border-strong: rgba(17, 24, 39, 0.50);

  /* Focus */
  --fr-focus: #B4390A;
  --fr-focus-width: 2px;
  --fr-focus-offset: 2px;

  /* Status: always paired with an icon and a label. No blue "info" colour. */
  --fr-success-ink: #1A7344;
  --fr-success-tint: #EAF6EE;
  --fr-success-border: #A8D5B9;
  --fr-warning-ink: #8A5300;
  --fr-warning-tint: #FFF4D6;
  --fr-warning-border: #F0CF7A;
  --fr-error-ink: #BE123C;
  --fr-error-tint: #FFF0F3;
  --fr-error-border: #F4B4C2;

  --fr-scrim: rgba(17, 24, 39, 0.36);
  --fr-track: rgba(17, 24, 39, 0.05);

  /* Shadows */
  --fr-shadow-xs: 0 1px 2px rgba(17, 24, 39, 0.05);
  --fr-shadow-sm: 0 1px 3px rgba(17, 24, 39, 0.08), 0 1px 2px rgba(17, 24, 39, 0.04);
  --fr-shadow-md: 0 8px 20px -6px rgba(17, 24, 39, 0.12), 0 2px 4px rgba(17, 24, 39, 0.04);
  --fr-shadow-lg: 0 20px 48px -12px rgba(17, 24, 39, 0.22);
  --fr-glow: 0 0 0 4px rgba(255, 138, 31, 0.20), 0 10px 28px -8px rgba(255, 106, 43, 0.45);

  /* Shape */
  /* Rounded, modern edges on one scale: controls 10, cards 14, sheets 18. */
  --fr-radius-xs: 6px;
  --fr-radius-sm: 8px;
  --fr-radius-md: 10px;
  --fr-radius-lg: 14px;
  --fr-radius-xl: 18px;
  --fr-radius-pill: 999px;

  /* Spacing */
  --fr-space-1: 4px;
  --fr-space-1-5: 6px;
  --fr-space-2: 8px;
  --fr-space-3: 12px;
  --fr-space-4: 16px;
  --fr-space-5: 20px;
  --fr-space-6: 24px;
  --fr-space-8: 32px;
  --fr-space-10: 40px;
  --fr-space-12: 48px;

  /* Controls and icons */
  --fr-control-sm: 30px;
  --fr-control-md: 34px;
  --fr-control-lg: 40px;
  --fr-icon-sm: 16px;
  --fr-icon-md: 20px;

  /* Vertical rhythm (see .fr-rhythm below): tight pairs, items in a card, groups and cards, card inset */
  --fr-stack-tight: 4px;
  --fr-stack-item: 8px;
  --fr-stack-group: 12px;
  --fr-card-inset: 16px;

  /* Layout: one gutter and one sheet margin on every surface */
  --fr-gutter: 16px;
  --fr-sheet-margin: 8px;
  --fr-popup-w: 380px;
  --fr-popup-h: 560px;
  --fr-panel-min: 320px;

  /* Type */
  --fr-font-sans: "Frissbi Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --fr-font-display: var(--fr-font-sans);
  --fr-font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* Motion */
  --fr-dur-press: 80ms;
  --fr-dur-fast: 140ms;
  --fr-dur-base: 220ms;
  --fr-dur-slow: 360ms;
  --fr-dur-celebrate: 640ms;
  --fr-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --fr-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --fr-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Layers */
  --fr-z-sticky: 10;
  --fr-z-overlay: 1000;
  --fr-z-modal: 1010;
  --fr-z-toast: 1020;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --fr-dur-fast: 0ms;
    --fr-dur-base: 0ms;
    --fr-dur-slow: 0ms;
    --fr-dur-celebrate: 0ms;
    --fr-ease-spring: var(--fr-ease-standard);
  }
  .fr-ui *, .fr-ui *::before, .fr-ui *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Base (opt-in: <body class="fr-ui">) ---------- */

.fr-ui {
  margin: 0;
  background: var(--fr-bg);
  color: var(--fr-text);
  font-family: var(--fr-font-sans);
  font-size: 14px;
  line-height: 22px;
  letter-spacing: -0.006em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scrollbar-color: rgba(17, 24, 39, 0.24) transparent;
  scrollbar-width: thin;
}
.fr-ui *, .fr-ui *::before, .fr-ui *::after { box-sizing: border-box; }
.fr-ui button, .fr-ui input, .fr-ui select, .fr-ui textarea { font: inherit; color: inherit; }
.fr-ui ::selection { background: var(--fr-accent-tint-strong); color: var(--fr-text); }
.fr-ui :focus-visible {
  outline: var(--fr-focus-width) solid var(--fr-focus);
  outline-offset: var(--fr-focus-offset);
}
.fr-ui input[type="checkbox"], .fr-ui input[type="radio"] { accent-color: var(--fr-accent-ink); }
.fr-ui a { color: var(--fr-text); text-decoration: underline; text-underline-offset: 2px; }
.fr-ui a:hover { color: var(--fr-accent-ink); }

/* ---------- Type roles ---------- */

.fr-eyebrow {
  font-size: 11px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fr-text-muted);
}
.fr-eyebrow--accent { color: var(--fr-accent-ink); }
.fr-caption { font-size: 12.5px; line-height: 18px; letter-spacing: 0; color: var(--fr-text-muted); }
.fr-card-title { font-size: 15px; line-height: 22px; font-weight: 600; letter-spacing: -0.011em; }
.fr-heading { font-size: 17px; line-height: 24px; font-weight: 600; letter-spacing: -0.013em; }
.fr-tabular { font-variant-numeric: tabular-nums; }
.fr-code { font-variant-numeric: tabular-nums slashed-zero; font-feature-settings: "ss02"; }

/* ---------- Icons (Lucide sprite: assets/icons/lucide-sprite.svg) ---------- */

.fr-icon {
  width: var(--fr-icon-sm);
  height: var(--fr-icon-sm);
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.fr-icon--md { width: var(--fr-icon-md); height: var(--fr-icon-md); }
/* An icon inside a line of text, sized to the text. */
.fr-icon--inline { width: 1em; height: 1em; margin-inline-end: 0.2em; vertical-align: -0.125em; }

/* ---------- Buttons ---------- */

.fr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--fr-space-1-5);
  min-height: var(--fr-control-md);
  padding: 0 14px;
  border: 1px solid var(--fr-border-strong);
  border-radius: var(--fr-radius-md);
  background: var(--fr-surface);
  color: var(--fr-text);
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--fr-dur-fast) var(--fr-ease-standard), box-shadow var(--fr-dur-fast) var(--fr-ease-standard), transform var(--fr-dur-press) var(--fr-ease-standard);
}
.fr-btn:hover { background: var(--fr-gray-50); border-color: var(--fr-text-muted); }
.fr-btn:active { transform: translateY(1px); }
.fr-btn:disabled { cursor: not-allowed; color: var(--fr-text-disabled); border-color: var(--fr-gray-200); background: var(--fr-surface); transform: none; }
.fr-btn[aria-busy="true"] { cursor: progress; }

/* One primary per card: gradient fill, charcoal label. The transparent border keeps a
   visible edge in forced-colors mode, where backgrounds are removed. */
.fr-btn--primary {
  border-color: transparent;
  background: var(--fr-accent-gradient);
  color: var(--fr-on-accent);
  font-weight: 600;
  box-shadow: var(--fr-shadow-xs);
}
.fr-btn--primary:hover { background: linear-gradient(rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.12)), var(--fr-accent-gradient); border-color: transparent; }
.fr-btn--primary:active { background: linear-gradient(rgba(17, 24, 39, 0.08), rgba(17, 24, 39, 0.08)), var(--fr-accent-gradient); }
.fr-btn--primary:disabled { background: var(--fr-gray-100); color: var(--fr-text-disabled); box-shadow: none; }

/* Tertiary: a text action. */
.fr-btn--ghost { border-color: transparent; background: transparent; }
.fr-btn--ghost:hover { background: var(--fr-gray-100); border-color: transparent; }

.fr-btn--icon { width: var(--fr-control-md); padding: 0; }
.fr-btn--block { display: flex; width: 100%; }
.fr-btn--block + .fr-btn--block { margin-top: var(--fr-space-2); }

/* ---------- Surfaces and chips ---------- */

.fr-card {
  background: var(--fr-surface);
  border: 1px solid var(--fr-border);
  border-radius: var(--fr-radius-lg);
  box-shadow: var(--fr-shadow-xs);
  padding: var(--fr-space-4);
}
.fr-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--fr-space-1);
  min-height: 24px;
  padding: 0 10px;
  border-radius: var(--fr-radius-pill);
  background: var(--fr-gray-100);
  color: var(--fr-text-secondary);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
}
.fr-chip--accent { background: var(--fr-accent-tint); color: var(--fr-accent-ink); }
.fr-chip--success { background: var(--fr-success-tint); color: var(--fr-success-ink); }
.fr-chip--warning { background: var(--fr-warning-tint); color: var(--fr-warning-ink); }
.fr-chip--error { background: var(--fr-error-tint); color: var(--fr-error-ink); }

/* Empty state: one icon, one sentence, one secondary action. */
.fr-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--fr-space-2);
  min-height: 120px;
  padding: var(--fr-space-4);
  text-align: center;
  color: var(--fr-text-secondary);
}
.fr-empty .fr-icon { width: 24px; height: 24px; color: var(--fr-text-muted); }

/* The hidden attribute must win over component display rules such as .fr-btn's inline-flex. */
.fr-ui [hidden] { display: none !important; }

/* ---------- Form fields ---------- */

.fr-field { display: flex; flex-direction: column; gap: var(--fr-space-1); margin-bottom: var(--fr-space-3); }
.fr-label { font-size: 12px; line-height: 16px; font-weight: 500; color: var(--fr-text-secondary); }
.fr-input {
  min-height: var(--fr-control-lg);
  padding: 0 var(--fr-space-3);
  border: 1px solid var(--fr-border-strong);
  border-radius: var(--fr-radius-md);
  background: var(--fr-surface);
  color: var(--fr-text);
}
.fr-input::placeholder { color: var(--fr-text-muted); }
.fr-input:hover { border-color: var(--fr-text-muted); }
/* Multi-line input: same outline, with room to breathe. */
.fr-textarea { min-height: 88px; padding: var(--fr-space-2) var(--fr-space-3); line-height: 20px; resize: vertical; }

/* ---------- Notices (always an icon plus text) ---------- */

.fr-notice {
  display: flex;
  align-items: flex-start;
  gap: var(--fr-space-2);
  padding: 10px var(--fr-space-3);
  border: 1px solid var(--fr-border);
  border-radius: var(--fr-radius-md);
  background: var(--fr-surface-inset);
  color: var(--fr-text-secondary);
  font-size: 13px;
  line-height: 20px;
  letter-spacing: 0;
}
.fr-notice .fr-icon { margin-top: 1px; }
.fr-notice--warning { background: var(--fr-warning-tint); border-color: var(--fr-warning-border); color: var(--fr-warning-ink); }
.fr-notice--error { background: var(--fr-error-tint); border-color: var(--fr-error-border); color: var(--fr-error-ink); }

/* ---------- Menu ---------- */

.fr-menu { position: relative; }
.fr-menu-panel {
  position: absolute;
  top: calc(100% + var(--fr-space-1));
  right: 0;
  z-index: var(--fr-z-overlay);
  min-width: 220px;
  padding: var(--fr-space-1-5);
  border: 1px solid var(--fr-border);
  border-radius: var(--fr-radius-lg);
  background: var(--fr-surface);
  box-shadow: var(--fr-shadow-lg);
}
/* A menu opened from a control at the start of a row. */
.fr-menu-panel--start { left: 0; right: auto; }
.fr-menu-note { margin: 0; padding: var(--fr-space-2); font-size: 12px; line-height: 16px; color: var(--fr-text-muted); overflow-wrap: anywhere; }
.fr-menu-item {
  display: flex;
  align-items: center;
  gap: var(--fr-space-2);
  width: 100%;
  min-height: 36px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--fr-radius-sm);
  background: transparent;
  color: var(--fr-text);
  text-align: left;
  cursor: pointer;
}
.fr-menu-item:hover { background: var(--fr-gray-100); }

@media (forced-colors: active) {
  .fr-btn--primary { border-color: ButtonText; }
}

/* Banner for an invalid managed (MDM) server address on full pages (shared/managedGuard.js). */
.fr-managed-banner {
  position: fixed;
  top: var(--fr-space-4);
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  width: min(640px, calc(100% - 2 * var(--fr-gutter)));
  box-shadow: var(--fr-shadow-lg);
}

/* ---------- Vertical rhythm (popup and Smart Tray: <body class="fr-ui fr-rhythm">) ----------
   One spacing scale, so every card and every view reads the same way:
     4px   tight  a title and its own caption (.fr-pair)
     8px   item   each element inside a card, the eyebrow label included
     12px  group  a card's action row or a new group inside it; also the space between cards
     16px  inset  card padding
   Cards lay their contents out as a single column with one gap, so inner blocks carry no
   vertical margins of their own (margins and gaps adding up is what made spacing drift).
   Alignment: views with content are top-aligned, so switching tabs never moves what is
   already in view; a view with a single standalone card (checking, sign-in, unavailable)
   is centered slightly above the middle; the drop bar is anchored to the bottom. */
.fr-rhythm .fr-card { display: flex; flex-direction: column; gap: var(--fr-stack-item); padding: var(--fr-card-inset); }
.fr-rhythm .fr-card > * { margin-top: 0; margin-bottom: 0; }
.fr-rhythm .fr-card > :is(.fr-chip, .fr-btn:not(.fr-btn--block)) { align-self: flex-start; }
/* A card's action row, a form's submit and a new group inside a card sit 12px from what is above. */
.fr-rhythm :is(.fr-card, form, .upload-step) > :is(.tray-actions, .card-actions, .upload-card-actions, .upload-question, .fr-btn:not(.fr-btn--block)):not(:first-child),
.fr-rhythm :is(.fr-card, form, .upload-step) > .fr-field + .fr-btn { margin-top: calc(var(--fr-stack-group) - var(--fr-stack-item)); }
/* Scrolling views fade their content out over the top and bottom 12px (their padding), so a
   card cut off by the edge reads as "more below" rather than as a broken card. At rest
   nothing is faded: the fade covers only the empty padding. */
.fr-rhythm .fr-scroll-fade {
  -webkit-mask-image: linear-gradient(to bottom, transparent, var(--fr-text) var(--fr-stack-group), var(--fr-text) calc(100% - var(--fr-stack-group)), transparent);
  mask-image: linear-gradient(to bottom, transparent, var(--fr-text) var(--fr-stack-group), var(--fr-text) calc(100% - var(--fr-stack-group)), transparent);
}
.fr-rhythm .fr-pair { display: flex; flex-direction: column; gap: var(--fr-stack-tight); min-width: 0; max-width: 100%; }
.fr-rhythm .fr-field { margin-bottom: 0; }