/* ============================================================================
   Base layer
   ----------------------------------------------------------------------------
   Sensible element defaults built on the tokens. Because the app's views are
   plain semantic HTML, styling elements here lifts every screen — including
   ones that carry no component classes.
   ============================================================================ */

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

  html {
    scroll-behavior: smooth;
    /* Keep in-page anchors clear of the sticky app bar when jumped to. On
       narrow screens the bar is static (see layout.css), so no offset. */
    scroll-padding-top: 64px;
    @media (max-width: 640px) { scroll-padding-top: 0; }
    -webkit-text-size-adjust: 100%;
    /* Thin, token-driven scrollbars (Firefox) */
    scrollbar-width: thin;
    scrollbar-color: var(--border-strong) transparent;
  }

  body {
    margin: 0;
    background: var(--bg-tertiary);
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 1.5;
    /* Native checkboxes and radios pick up the brand accent in both themes. */
    accent-color: var(--accent);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  /* --- Headings ---------------------------------------------------------- */
  /* Hierarchy is built only from the type scale: page title (22), then a quiet
     two-step of body-size (14) and card-title-size (13.5) section headings.
     Weight 500 + spacing carry the hierarchy rather than ever-larger sizes. */
  h1, h2, h3, h4, h5, h6 {
    margin: 0 0 var(--space-3);
    line-height: 1.25;
    letter-spacing: -0.01em;
    font-weight: 500;
    text-wrap: balance;
  }
  h1 { font-size: 22px; }
  h2 { font-size: 14px; margin-top: var(--space-8); }
  h3 { font-size: 13.5px; margin-top: var(--space-5); }
  h4 { font-size: 13.5px; }

  /* First heading in a content region shouldn't push the whole page down. */
  h2:first-child, h3:first-child { margin-top: 0; }

  p { margin: 0 0 var(--space-3); text-wrap: pretty; }

  /* --- Links ------------------------------------------------------------- */
  a {
    color: var(--link);
    text-decoration: none;
    transition: color var(--speed-fast) var(--ease-out);
  }
  a:hover { text-decoration: underline; text-underline-offset: 2px; }

  /* --- Lists ------------------------------------------------------------- */
  ul, ol { margin: 0 0 var(--space-3); padding-left: var(--space-5); }
  li { margin: var(--space-1) 0; }

  /* --- Code -------------------------------------------------------------- */
  code, kbd, samp {
    font-family: var(--font-mono);
    font-size: 0.9em;
  }
  code {
    background: var(--bg-tertiary);
    padding: 0.1rem 0.35rem;
    border-radius: var(--radius-sm);
    border: 0.5px solid var(--border);
    word-break: break-word;
  }

  hr {
    border: none;
    border-top: 0.5px solid var(--border);
    margin: var(--space-6) 0;
  }

  /* --- Disclosure widgets ------------------------------------------------- */
  /* Every <details> in the app is interactive chrome (report accordions,
     methodology notes, drafted summaries); the quiet marker and pointer cursor
     say so without each component re-declaring it. */
  summary { cursor: pointer; }
  summary::marker { color: var(--text-tertiary); }

  /* The revealed content of a just-opened disclosure eases in — the same
     ease-out the rest of the surface uses. Also softens Turbo replacements
     that land inside an open group (streamed answers, settled summaries). */
  details[open] > *:not(summary) { animation: disclose var(--speed) var(--ease-out); }
  @keyframes disclose {
    from { opacity: 0; transform: translateY(-2px); }
  }

  /* --- Tables ------------------------------------------------------------ */
  table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
  }
  th, td {
    text-align: left;
    padding: var(--space-3) var(--space-3);
    border-bottom: 0.5px solid var(--border);
    vertical-align: middle;
  }
  th {
    font-weight: 500;
    font-size: 12.5px;
    color: var(--text-secondary);
  }
  /* A quiet row highlight makes wide, number-dense rows easier to track. */
  tbody tr { transition: background var(--speed-fast) var(--ease-out); }
  tbody tr:hover { background: var(--bg-secondary); }
  tbody tr:last-child td { border-bottom: none; }

  /* --- Form controls ----------------------------------------------------- */
  input, select, textarea, button {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
  }
  input[type="text"], input[type="email"], input[type="password"],
  input[type="search"], input[type="url"], input[type="number"],
  textarea, select {
    background: var(--bg-primary);
    /* Interactive controls carry the stronger hairline (matching buttons) so
       an editable field reads as one at a glance; passive dividers keep the
       quieter --border. */
    border: 0.5px solid var(--border-strong);
    border-radius: var(--radius-sm);
    padding: var(--space-2) var(--space-3);
    max-width: 100%;
    transition: border-color var(--speed-fast) var(--ease-out),
                box-shadow var(--speed-fast) var(--ease-out);
  }
  /* Once a select carries a custom border/background, browsers pin the native
     arrow flush against the right edge and ignore padding around it. Drawing
     our own chevron gives the indicator the same inset as the text. */
  select {
    appearance: none;
    background-image: var(--select-arrow);
    background-repeat: no-repeat;
    background-position: right var(--space-3) center;
    padding-right: calc(var(--space-3) + 10px + var(--space-2));
  }
  textarea { line-height: 1.5; }
  input::placeholder, textarea::placeholder { color: var(--text-tertiary); }

  input[type="text"]:focus, input[type="email"]:focus,
  input[type="password"]:focus, input[type="search"]:focus,
  input[type="url"]:focus, input[type="number"]:focus,
  textarea:focus, select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
  }

  input[aria-invalid="true"], textarea[aria-invalid="true"] {
    border-color: var(--danger-border);
  }
  input[aria-invalid="true"]:focus, textarea[aria-invalid="true"]:focus {
    border-color: var(--danger-text);
    box-shadow: 0 0 0 3px var(--danger-bg);
  }

  input:disabled, select:disabled, textarea:disabled {
    /* background-color, not the shorthand: the shorthand would clear the
       select chevron's background-image. */
    background-color: var(--bg-tertiary);
    color: var(--text-tertiary);
    cursor: not-allowed;
  }

  /* iOS Safari zooms the whole page when focusing a control set below 16px.
     On touch phones the editable controls meet that threshold so tapping into
     a field never shifts the layout. */
  @media (pointer: coarse) and (max-width: 640px) {
    input[type="text"], input[type="email"], input[type="password"],
    input[type="search"], input[type="url"], input[type="number"],
    textarea, select {
      font-size: 16px;
    }
  }

  label { font-weight: 500; }

  fieldset {
    border: 0.5px solid var(--border-strong);
    border-radius: var(--radius-md);
    margin: 0 0 var(--space-3);
    padding: var(--space-4);
  }
  legend {
    font-weight: 500;
    font-size: 12.5px;
    padding: 0 var(--space-2);
    color: var(--text-secondary);
  }

  /* --- Selection & focus ring -------------------------------------------- */
  ::selection { background: var(--accent-soft); color: var(--text-primary); }

  :focus-visible {
    outline: none;
    box-shadow: var(--ring);
    border-radius: var(--radius-sm);
  }

  /* --- WebKit scrollbars ------------------------------------------------- */
  /* Element-level (not body-scoped) so inner scroll regions — cards, table
     wraps, code blocks — get the same thin thumb as the page. A transparent
     border with padding-box clipping insets the thumb from whatever surface
     it rides on, so no track-color assumption is baked in. */
  ::-webkit-scrollbar { width: 11px; height: 11px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: var(--radius-full);
    border: 3px solid transparent;
    background-clip: padding-box;
  }
  ::-webkit-scrollbar-thumb:hover {
    background: var(--text-tertiary);
    background-clip: padding-box;
  }

  /* --- Inline icons (IconsHelper#tabler_icon) ----------------------------- */
  /* Icons ride flex rows (buttons, badges, callouts) without shrinking, and
     sit on the text baseline in plain inline contexts (status lines, links). */
  .tabler-icon { flex: none; vertical-align: -2px; }

  /* Quiet links that lead with an icon (e.g. "+ New prompt") lay the pair out
     on the same small gap the flex containers use. */
  .icon-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
  }

  /* Trailing marker on external links (ApplicationHelper#external_link);
     kept inline so long link text still wraps naturally in prose. */
  .icon-external { margin-left: 2px; }

  /* In-flight spinner (report/status lines). The global reduced-motion rule
     below already stops the spin for users who ask for less motion. */
  .icon-spin { animation: icon-spin 1s linear infinite; }
  @keyframes icon-spin { to { transform: rotate(360deg); } }

  /* --- Motion preference ------------------------------------------------- */
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
      transition-duration: 0.01ms !important;
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
    }
  }
}