/* Licia — the shell's preferences (backlog P3-02, SD-38 / SD-39 / TWM-85).

   Loaded after app.css and expediente.css, in their layers. Two things, both
   scoped by `data-shell` on <html> (the app and the bare shell; the public
   pages are shared and cached, and stay light):

   1. The dark palette is a token swap and nothing else. Every value below is
      in Docs/design/system.md §2.1.1 with its measured contrast, and
      tests/test_shell_prefs.py recomputes each pair from this file. The two
      blocks -- the person's «Oscuro» and the system's dark preference when
      the person chose nothing -- must hold the same declarations; the test
      compares them. The swap is symmetric on purpose: `--white` is the sheet
      *and* the text on a filled button, `--field` the button *and* the link,
      so a light mint field under dark text keeps every pairing the light
      palette made.
   2. The rail: from 901 px the sidebar folds to its icons (`data-rail`), the
      words stay in the accessibility tree, and every menu that opened beside
      the sidebar follows `--side-w`. */

@layer tokens {
  :root[data-shell][data-theme="oscuro"] {
    color-scheme: dark;
    --ink: #ECEAE4;
    --ink-2: #C8C5BE;
    --white: #1D2023;
    --paper: #131517;
    --grey: #272B2F;
    --field: #8ED3BA;
    --field-deep: #6FBFA2;
    --field-2: #A9E2CD;
    --muted-on-field: #1F3A31;
    --line-on-field: rgba(19, 21, 23, 0.24);
    --line: #34383D;
    --line-strong: #7A7F86;
    --muted: #A29E96;
    --mark: #6B5A14;
    --mark-soft: #3D3412;
    --senal: #FF7A5C;
    --senal-ink: #FF9F86;
    --go: #6CD39E;
    --go-bg: #12301F;
    --nogo: #FF9D94;
    --nogo-bg: #3B1714;
    --review: #EBC55A;
    --review-bg: #352A0B;
    --scrim: rgba(0, 0, 0, 0.6);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 1px 2px rgba(0, 0, 0, 0.4), 0 18px 48px -18px rgba(0, 0, 0, 0.7);
    --shadow-lg: 0 2px 4px rgba(0, 0, 0, 0.4), 0 40px 80px -30px rgba(0, 0, 0, 0.75);
  }
  :root[data-shell][data-theme="claro"] { color-scheme: light; }
}

@media (prefers-color-scheme: dark) {
  @layer tokens {
    :root[data-shell]:not([data-theme]) {
      color-scheme: dark;
      --ink: #ECEAE4;
      --ink-2: #C8C5BE;
      --white: #1D2023;
      --paper: #131517;
      --grey: #272B2F;
      --field: #8ED3BA;
      --field-deep: #6FBFA2;
      --field-2: #A9E2CD;
      --muted-on-field: #1F3A31;
      --line-on-field: rgba(19, 21, 23, 0.24);
      --line: #34383D;
      --line-strong: #7A7F86;
      --muted: #A29E96;
      --mark: #6B5A14;
      --mark-soft: #3D3412;
      --senal: #FF7A5C;
      --senal-ink: #FF9F86;
      --go: #6CD39E;
      --go-bg: #12301F;
      --nogo: #FF9D94;
      --nogo-bg: #3B1714;
      --review: #EBC55A;
      --review-bg: #352A0B;
      --scrim: rgba(0, 0, 0, 0.6);
      --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
      --shadow-md: 0 1px 2px rgba(0, 0, 0, 0.4), 0 18px 48px -18px rgba(0, 0, 0, 0.7);
      --shadow-lg: 0 2px 4px rgba(0, 0, 0, 0.4), 0 40px 80px -30px rgba(0, 0, 0, 0.75);
    }
  }
}

/* The few values the two stylesheets wrote as literals outside the tokens
   layer, on surfaces the app shows: the focus ochre (expediente.css), the
   long-read body ink, and the dossier checklist's hand-mixed greens. Each is
   re-pointed at a token, so it follows whichever palette is on. */
@layer components {
  :root[data-shell][data-theme="oscuro"] { --focus: #E6B84A; }
}
@media (prefers-color-scheme: dark) {
  @layer components {
    :root[data-shell]:not([data-theme]) { --focus: #E6B84A; }
  }
}
@layer pages {
  :root[data-shell][data-theme="oscuro"] { --ed-body: var(--ink-2); }
  :root[data-shell][data-theme="oscuro"] .checklist-item.is-checked { background: var(--go-bg); border-color: color-mix(in srgb, var(--go) 35%, var(--line)); }
  :root[data-shell][data-theme="oscuro"] .check-box.unchecked { background: var(--white); border-color: var(--line-strong); }
}
@media (prefers-color-scheme: dark) {
  @layer pages {
    :root[data-shell]:not([data-theme]) { --ed-body: var(--ink-2); }
    :root[data-shell]:not([data-theme]) .checklist-item.is-checked { background: var(--go-bg); border-color: color-mix(in srgb, var(--go) 35%, var(--line)); }
    :root[data-shell]:not([data-theme]) .check-box.unchecked { background: var(--white); border-color: var(--line-strong); }
  }
}
@layer pages {
  /* «Modo claro / oscuro» and the rail's control (the account menu, the
     login card and the bar's top row). */
  .theme-switch { display: flex; gap: var(--space-4); margin: var(--space-8) 0; padding: 0; border: 0; }
  .theme-switch legend { padding: 0; margin-bottom: var(--space-4); color: var(--muted); font-size: var(--text-xs); }
  .theme-switch-options { display: flex; gap: var(--space-4); }
  .theme-switch button { flex: 1; min-height: 32px; padding: 0 var(--space-8); border: 1px solid var(--line); border-radius: var(--radius); background: transparent; color: var(--ink-2); font-size: var(--text-xs); cursor: pointer; }
  .theme-switch button[aria-pressed="true"] { border-color: var(--ink); color: var(--ink); font-weight: 600; }
  .bare .theme-switch { justify-content: center; }
  .rail-toggle { display: none; }
}

/* ---------------------------------------------------------------- the rail */
@media (min-width: 901px) {
  @layer pages {
    .rail-toggle {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 32px;
      height: 32px;
      padding: 0;
      border: 1px solid transparent;
      border-radius: var(--radius);
      background: transparent;
      color: var(--muted);
      cursor: pointer;
    }
    .rail-toggle:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 6%, transparent); }
    .rail-toggle svg { width: 18px; height: 18px; }
    :root[data-rail] .rail-toggle svg { transform: scaleX(-1); }

    :root[data-rail] .app-body { --side-w: 68px; }
    :root[data-rail] .appbar-inner { padding-inline: var(--space-8); }
    :root[data-rail] .appbar-top { flex-direction: column; gap: var(--space-8); padding: 0 0 var(--space-12); }
    :root[data-rail] .appbar-top .topnav-brand { margin-right: 0; }
    :root[data-rail] .appbar .nav-item,
    :root[data-rail] .appbar-search,
    :root[data-rail] .appbar-pill,
    :root[data-rail] .appbar-account-button { position: relative; justify-content: center; padding-inline: 0; }
    :root[data-rail] .appbar .nav-item .nav-count { position: absolute; top: 0; right: 0; margin: 0; min-width: 16px; padding: 0 4px; font-size: 10px; line-height: 16px; }
    :root[data-rail] .appbar .nav-item .nav-lock { position: absolute; bottom: 2px; right: 4px; margin: 0; }
    :root[data-rail] .appbar .nav-lock-plan { display: none; }
    /* The words stay for a screen reader and the tooltip; only the eye loses them. */
    :root[data-rail] .appbar .nav-label,
    :root[data-rail] .appbar-wordmark,
    :root[data-rail] .appbar-pill-name,
    :root[data-rail] .appbar-search > span,
    :root[data-rail] .appbar-account-name {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip: rect(0 0 0 0);
      white-space: nowrap;
    }
    :root[data-rail] .appbar-group { height: 1px; margin: var(--space-12) var(--space-8); padding: 0; overflow: hidden; background: var(--line); color: transparent; }
    :root[data-rail] .appbar-plan { display: none; }
  }
}