/* Looks — alternative skins for the whole app (Settings → Look, or ?look=atlas).

   A look only changes how things are drawn: colours, type, corners, borders,
   shadows. Every view, button and feature stays exactly as it is, because a
   look is nothing more than token overrides on :root plus a handful of
   component touches below. No look = the original "Paper" style.

   Set by the inline script in index.html (localStorage "look", or ?look= in
   the address, which is remembered) and by the Look select (shell.js).

   Each look defines its light palette on :root[data-look=x] and its dark one
   under [data-theme=dark] / prefers-color-scheme, the same split style.css
   uses, so the light/dark/system setting keeps working inside every look.
   "Night" is dark by design and ignores the setting.

   ⚠️ Gender colours (--masc/--fem/--neut/--verb) are the app's teaching
   colours: every look keeps them distinct and readable on its own --card. */

/* ===================================================================
   ATLAS — cut paper: cream sheets, navy ink, a red accent (the Reel covers)
   =================================================================== */
:root[data-look="atlas"] {
  --bg: #f3ead8;
  --panel: #ebdfc6;
  --card: #fbf6ec;
  --border: #d3c3a3;
  --text: #1e2a47;
  --muted: #5b6380;
  --accent: #b0302a;
  --accent-soft: #f6e1d9;
  --masc: #1f4fb8;
  --fem: #b0302a;
  --neut: #8a5a00;
  --verb: #1d6b4a;
  --on-accent: #ffffff;
  --shadow: 0 1px 0 rgba(60, 40, 10, 0.08), 0 6px 16px -6px rgba(60, 40, 10, 0.22);
  --shadow-pop: 0 2px 0 rgba(60, 40, 10, 0.08), 0 14px 28px -10px rgba(60, 40, 10, 0.32);
  --look-radius: 6px;
  --look-head: "Iowan Old Style", "Palatino", Georgia, serif;
}
:root[data-look="atlas"][data-theme="dark"] {
  --bg: #1a1713; --panel: #211d18; --card: #2a2520; --border: #4d4436;
  --text: #f0e7d5; --muted: #b3a68c; --accent: #ec7a6c; --accent-soft: #3a2421;
  --masc: #8fb1f5; --fem: #f08a80; --neut: #e8b25c; --verb: #6fcf9f; --on-accent: #1a1713;
  --shadow: 0 1px 0 rgba(0, 0, 0, 0.4), 0 6px 16px -6px rgba(0, 0, 0, 0.5);
}
@media (prefers-color-scheme: dark) {
  :root[data-look="atlas"]:not([data-theme="light"]) {
    --bg: #1a1713; --panel: #211d18; --card: #2a2520; --border: #4d4436;
    --text: #f0e7d5; --muted: #b3a68c; --accent: #ec7a6c; --accent-soft: #3a2421;
    --masc: #8fb1f5; --fem: #f08a80; --neut: #e8b25c; --verb: #6fcf9f; --on-accent: #1a1713;
    --shadow: 0 1px 0 rgba(0, 0, 0, 0.4), 0 6px 16px -6px rgba(0, 0, 0, 0.5);
  }
}
:root[data-look="atlas"] body { background-image: var(--x-grain); }
:root[data-look="atlas"] .rail { background-image: var(--x-grain); border-right: 2px solid var(--text); }
:root[data-look="atlas"] .brand-name { font-family: var(--look-head); font-size: 22px; }
:root[data-look="atlas"] .brand-tag { color: var(--accent); text-transform: uppercase; letter-spacing: 0.12em; font-size: 9.5px; }

/* ===================================================================
   PRESS — a printed broadsheet: white paper, black ink, hairlines, no curves
   =================================================================== */
:root[data-look="press"] {
  --bg: #fcfcfa;
  --panel: #fcfcfa;
  --card: #ffffff;
  --border: #1a1a1a;
  --text: #111111;
  --muted: #5c5c5c;
  --accent: #c21d1d;
  --accent-soft: #fbeaea;
  --masc: #1846b8;
  --fem: #c21d1d;
  --neut: #8a5300;
  --verb: #0d6b3f;
  --on-accent: #ffffff;
  --shadow: none;
  --shadow-pop: 0 0 0 1px #111, 6px 6px 0 rgba(0, 0, 0, 0.12);
  --look-radius: 0px;
  --look-head: "Didot", "Bodoni 72", "Times New Roman", serif;
  --serif: "Charter", "Iowan Old Style", Georgia, serif;
}
:root[data-look="press"][data-theme="dark"] {
  --bg: #0e0e0e; --panel: #0e0e0e; --card: #141414; --border: #e8e8e8;
  --text: #f2f2f2; --muted: #a8a8a8; --accent: #ff6b5e; --accent-soft: #2a1513;
  --masc: #8fb1ff; --fem: #ff8a80; --neut: #f0b85c; --verb: #6fd8a4; --on-accent: #0e0e0e;
  --shadow-pop: 0 0 0 1px #eee, 6px 6px 0 rgba(255, 255, 255, 0.08);
}
@media (prefers-color-scheme: dark) {
  :root[data-look="press"]:not([data-theme="light"]) {
    --bg: #0e0e0e; --panel: #0e0e0e; --card: #141414; --border: #e8e8e8;
    --text: #f2f2f2; --muted: #a8a8a8; --accent: #ff6b5e; --accent-soft: #2a1513;
    --masc: #8fb1ff; --fem: #ff8a80; --neut: #f0b85c; --verb: #6fd8a4; --on-accent: #0e0e0e;
    --shadow-pop: 0 0 0 1px #eee, 6px 6px 0 rgba(255, 255, 255, 0.08);
  }
}
:root[data-look="press"] .rail { border-right: 3px double var(--border); }
:root[data-look="press"] .brand-name { font-family: var(--look-head); font-size: 28px; font-weight: 700; letter-spacing: -0.02em; }
:root[data-look="press"] .brand-tag { font-style: italic; font-family: var(--serif); font-size: 12px; }
:root[data-look="press"] .rail-item.active { background: var(--text); color: var(--bg); }
:root[data-look="press"] .rail-switch { background: none; border: 1px solid var(--border); }
:root[data-look="press"] .rail-switch-btn.active { background: var(--text); color: var(--bg); }
:root[data-look="press"] .main h1,
:root[data-look="press"] .main h2 { border-bottom: 1px solid var(--border); padding-bottom: 6px; }
:root[data-look="press"] .pkg-card,
:root[data-look="press"] .pl-card { border-left-width: 6px; }
:root[data-look="press"] .primary-btn,
:root[data-look="press"] .ghost-btn,
:root[data-look="press"] .lib-cat,
:root[data-look="press"] .chip { text-transform: uppercase; letter-spacing: 0.06em; font-size: 12.5px; }

/* ===================================================================
   POP — chunky and playful: thick outlines, hard offset shadows, rounded type
   =================================================================== */
:root[data-look="pop"] {
  --bg: #fff6e0;
  --panel: #ffe9b8;
  --card: #ffffff;
  --border: #1b1b1b;
  --text: #1b1b1b;
  --muted: #4f4a40;
  --accent: #6a3df5;
  --accent-soft: #ece5ff;
  --masc: #2456e0;
  --fem: #d62f5b;
  --neut: #a35c00;
  --verb: #0b8257;
  --on-accent: #ffffff;
  --shadow: 3px 3px 0 #1b1b1b;
  --shadow-pop: 6px 6px 0 #1b1b1b;
  --look-radius: 16px;
  --look-head: ui-rounded, "SF Pro Rounded", "Nunito", "Avenir Next", sans-serif;
  --look-border: 2px;
}
:root[data-look="pop"][data-theme="dark"] {
  --bg: #17131f; --panel: #211a2e; --card: #2a2238; --border: #f3eadb;
  --text: #f7f0e3; --muted: #c5b9a6; --accent: #b6a1ff; --accent-soft: #33284d;
  --masc: #93b4ff; --fem: #ff8fae; --neut: #ffc163; --verb: #6be3ad; --on-accent: #17131f;
  --shadow: 3px 3px 0 #f3eadb; --shadow-pop: 6px 6px 0 #f3eadb;
}
@media (prefers-color-scheme: dark) {
  :root[data-look="pop"]:not([data-theme="light"]) {
    --bg: #17131f; --panel: #211a2e; --card: #2a2238; --border: #f3eadb;
    --text: #f7f0e3; --muted: #c5b9a6; --accent: #b6a1ff; --accent-soft: #33284d;
    --masc: #93b4ff; --fem: #ff8fae; --neut: #ffc163; --verb: #6be3ad; --on-accent: #17131f;
    --shadow: 3px 3px 0 #f3eadb; --shadow-pop: 6px 6px 0 #f3eadb;
  }
}
:root[data-look="pop"] body { font-family: var(--look-head); }
:root[data-look="pop"] .rail { border-right: var(--look-border) solid var(--border); }
:root[data-look="pop"] .brand-name { font-size: 24px; font-weight: 800; color: var(--accent); }
:root[data-look="pop"] .card,
:root[data-look="pop"] .wotd-card,
:root[data-look="pop"] .td-words-card,
:root[data-look="pop"] .lib-today,
:root[data-look="pop"] .sheet-card,
:root[data-look="pop"] .fc-card,
:root[data-look="pop"] .round-btn,
:root[data-look="pop"] .pkg-card,
:root[data-look="pop"] .pl-card,
:root[data-look="pop"] .lang-btn,
:root[data-look="pop"] .ghost-btn,
:root[data-look="pop"] .lib-cat,
:root[data-look="pop"] .primary-btn { border: var(--look-border) solid var(--border); box-shadow: var(--shadow); }
:root[data-look="pop"] .pkg-card,
:root[data-look="pop"] .pl-card { border-left-width: 8px; border-left-color: var(--lv, var(--border)); }
:root[data-look="pop"] .pkg-card:hover,
:root[data-look="pop"] .pl-card:hover,
:root[data-look="pop"] .ghost-btn:hover,
:root[data-look="pop"] .primary-btn:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--border); filter: none; }
:root[data-look="pop"] .primary-btn { font-weight: 700; }
:root[data-look="pop"] .rail-item.active { border: var(--look-border) solid var(--border); background: var(--accent); color: var(--on-accent); }
:root[data-look="pop"] .rail-switch { background: var(--card); border: var(--look-border) solid var(--border); }
:root[data-look="pop"] .rail-switch-btn.active { background: var(--accent); color: var(--on-accent); box-shadow: none; }
:root[data-look="pop"] .main h1,
:root[data-look="pop"] .main h2 { font-weight: 800; letter-spacing: -0.02em; }

/* ===================================================================
   FJORD — calm Nordic: cool air, no outlines, soft depth, a moss accent
   =================================================================== */
:root[data-look="fjord"] {
  --bg: #eef2f3;
  --panel: #e3e9eb;
  --card: #ffffff;
  --border: #d5dde0;
  --text: #1f2a2e;
  --muted: #5d6c71;
  --accent: #2f6f5e;
  --accent-soft: #dfeee8;
  --masc: #2a5fc4;
  --fem: #bf3b4a;
  --neut: #8c5d00;
  --verb: #237a52;
  --on-accent: #ffffff;
  --shadow: 0 1px 2px rgba(20, 40, 50, 0.05), 0 10px 30px rgba(20, 40, 50, 0.07);
  --shadow-pop: 0 18px 50px rgba(20, 40, 50, 0.18);
  --look-radius: 22px;
  --look-head: "Avenir Next", "Avenir", "Segoe UI", sans-serif;
  --serif: "New York", ui-serif, "Iowan Old Style", Georgia, serif;
}
:root[data-look="fjord"][data-theme="dark"] {
  --bg: #11181b; --panel: #151e21; --card: #1c272b; --border: #2b383d;
  --text: #e6eef0; --muted: #93a5aa; --accent: #7cc7ae; --accent-soft: #1d3530;
  --masc: #8cb2f7; --fem: #f1909b; --neut: #e6b665; --verb: #6fd3a3; --on-accent: #0f1a17;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.35); --shadow-pop: 0 18px 50px rgba(0, 0, 0, 0.55);
}
@media (prefers-color-scheme: dark) {
  :root[data-look="fjord"]:not([data-theme="light"]) {
    --bg: #11181b; --panel: #151e21; --card: #1c272b; --border: #2b383d;
    --text: #e6eef0; --muted: #93a5aa; --accent: #7cc7ae; --accent-soft: #1d3530;
    --masc: #8cb2f7; --fem: #f1909b; --neut: #e6b665; --verb: #6fd3a3; --on-accent: #0f1a17;
    --shadow: 0 10px 30px rgba(0, 0, 0, 0.35); --shadow-pop: 0 18px 50px rgba(0, 0, 0, 0.55);
  }
}
:root[data-look="fjord"] body { font-family: var(--look-head); }
:root[data-look="fjord"] .rail { border-right: none; }
:root[data-look="fjord"] .brand-name { font-weight: 600; letter-spacing: 0.02em; }
:root[data-look="fjord"] .card,
:root[data-look="fjord"] .wotd-card,
:root[data-look="fjord"] .td-words-card,
:root[data-look="fjord"] .lib-today,
:root[data-look="fjord"] .sheet-card,
:root[data-look="fjord"] .fc-card,
:root[data-look="fjord"] .round-btn,
:root[data-look="fjord"] .pkg-card,
:root[data-look="fjord"] .pl-card,
:root[data-look="fjord"] .lang-btn,
:root[data-look="fjord"] .lib-cat,
:root[data-look="fjord"] .ghost-btn { border-color: transparent; box-shadow: var(--shadow); }
:root[data-look="fjord"] .pkg-card,
:root[data-look="fjord"] .pl-card { border-left-width: 0; box-shadow: inset 0 4px 0 var(--lv, transparent), var(--shadow); }
:root[data-look="fjord"] .primary-btn,
:root[data-look="fjord"] .ghost-btn,
:root[data-look="fjord"] .lib-cat { border-radius: 999px; }
:root[data-look="fjord"] .rail-switch { background: var(--card); }
:root[data-look="fjord"] .rail-switch-btn.active { background: var(--accent); color: var(--on-accent); box-shadow: none; }
:root[data-look="fjord"] .main h1,
:root[data-look="fjord"] .main h2 { font-weight: 500; letter-spacing: -0.01em; }

/* ===================================================================
   NIGHT — the tram at midnight: deep blue-black, warm sodium-lamp amber
   (always dark; the theme setting does not change it)
   =================================================================== */
:root[data-look="night"] {
  color-scheme: dark;
  --bg: #0b0f1a;
  --panel: #0f1424;
  --card: #151b2e;
  --border: #283150;
  --text: #e9ecf5;
  --muted: #8f98b5;
  --accent: #ffb547;
  --accent-soft: #2e2716;
  --masc: #7fb0ff;
  --fem: #ff8a9e;
  --neut: #ffcf6e;
  --verb: #5fe0b0;
  --other: #b4b9c9;
  --warn: #ff8a6e;
  --on-accent: #1a1204;
  --tint-s: 55%;
  --tint-l: 68%;
  --hue-text-l: 74%;
  --studied: rgba(255, 181, 71, 0.16);
  --shadow: 0 0 0 1px rgba(255, 255, 255, 0.02), 0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-pop: 0 0 40px rgba(255, 181, 71, 0.12), 0 16px 40px rgba(0, 0, 0, 0.6);
  --look-radius: 14px;
  --look-head: "Futura", "Avenir Next", "Segoe UI", sans-serif;
}
:root[data-look="night"] body {
  background:
    radial-gradient(900px 500px at 85% -10%, rgba(255, 181, 71, 0.08), transparent 60%),
    radial-gradient(700px 500px at 10% 110%, rgba(127, 176, 255, 0.07), transparent 60%),
    var(--bg);
  background-attachment: fixed;
}
:root[data-look="night"] .rail { background: rgba(15, 20, 36, 0.85); }
:root[data-look="night"] .brand-name { font-family: var(--look-head); letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
:root[data-look="night"] .main h1,
:root[data-look="night"] .main h2 { font-family: var(--look-head); font-weight: 500; letter-spacing: 0.02em; }
:root[data-look="night"] .rail-item.active { box-shadow: inset 3px 0 0 var(--accent); }
:root[data-look="night"] .primary-btn { box-shadow: 0 0 18px rgba(255, 181, 71, 0.35); }

/* ===================================================================
   shared: corners and headline type for any look that sets them
   =================================================================== */
:root[data-look] .card,
:root[data-look] .wotd-card,
:root[data-look] .td-words-card,
:root[data-look] .lib-today,
:root[data-look] .sheet-card,
:root[data-look] .fc-card,
:root[data-look] .pkg-card,
:root[data-look] .pl-card,
:root[data-look] .lang-btn,
:root[data-look] .lang-menu { border-radius: var(--look-radius, 14px); }
:root[data-look] .pkg-card,
:root[data-look] .pl-card { border-radius: var(--look-radius, 14px); }
:root[data-look] .primary-btn,
:root[data-look] .ghost-btn,
:root[data-look] .rail-item,
:root[data-look] .rail-switch-btn { border-radius: calc(var(--look-radius, 14px) * 0.6); }
:root[data-look] .rail-switch { border-radius: calc(var(--look-radius, 14px) * 0.75); }
:root[data-look="press"] .lib-cat,
:root[data-look="press"] .chip { border-radius: 0; }
:root[data-look] .main h1,
:root[data-look] .main h2,
:root[data-look] .pkg-card h3 { font-family: var(--look-head, inherit); }