/* The desktop layout (>= 900px), from Bilal's "Cahier Desktop app updated
   UI" design. Same app, same data, same routes as the phone layout in
   app.css -- only the arrangement differs. Tokens and the dark palette are
   the design's own (.th / .th.dk). Every class is d-prefixed: the phone
   stylesheet already owns .btn/.card/.tile/.bar, and the two must never
   cascade into each other. */
.th {
  --bg:#F3F1EB; --surface:#FFFFFF; --surface2:#FAF9F6; --rail:#ECE9E2; --railhover:#E3DFD6;
  --line:#E6E2D8; --line2:#EFECE5; --field:#D9D4C9; --ink:#22252E; --ink2:#4E5363; --muted:#6B7080;
  --faint:#8A8F9B; --track:#ECE9E2; --tag:#EEEBE4; --accent:#3A4155; --hero:#3A4155; --strong:#22252E;
  --on-strong:#FFFFFF; --link:#3A4155; --gold:#B08A1E; --gold2:#8C6A10; --gold-bg:#F7EED6; --gold-ink:#6E5512;
  --chip-bg:#FFFBF0; --chip-line:#D9C27F; --chip-ink:#5C4410; --green:#24573F; --green-bg:#E3EEE7;
  --green-ink:#1E4A35; --red:#A53B33; --red-bg:#F8E3E0; --red-ink:#8C2F24; --warn-bg:#FFF7F5;
  --warn-line:#D9A39C; --shadow:rgba(34,37,46,.08); --overlay:rgba(28,30,38,.42); --keybg:#F3F1EB;
  --head:#ECE9E2; color-scheme: light;
}
.th.dk {
  --bg:#15161A; --surface:#1E2027; --surface2:#1A1C22; --rail:#191B20; --railhover:#252832;
  --line:#2E313A; --line2:#2A2D35; --field:#3A3E49; --ink:#ECEAE4; --ink2:#C3C6CF; --muted:#A4A8B4;
  --faint:#7E8390; --track:#2E313A; --tag:#2A2D35; --accent:#5E6A8A; --hero:#2A3042; --strong:#ECEAE4;
  --on-strong:#15161A; --link:#AEB8D6; --gold:#D2AE4A; --gold2:#D9B95C; --gold-bg:#2E2817; --gold-ink:#E2C66F;
  --chip-bg:#262217; --chip-line:#5C4C22; --chip-ink:#E2C66F; --green:#3E8A63; --green-bg:#18291F;
  --green-ink:#8FD0AA; --red:#C0544B; --red-bg:#2E1B19; --red-ink:#F0A39A; --warn-bg:#2A1D1B;
  --warn-line:#6A3A35; --shadow:rgba(0,0,0,.4); --overlay:rgba(0,0,0,.6); --keybg:#2A2D35;
  --head:#191B20; color-scheme: dark;
}
#app.wide { max-width: none; border: none; height: auto; min-height: 100%; }
.th { min-height: 100vh; background: var(--bg); color: var(--ink); font-family: Archivo, sans-serif;
      transition: background .3s, color .3s; }
.th a { color: var(--link); }
.th .en { font-style: italic; font-weight: 400; letter-spacing: 0; color: var(--muted); }
.th .d-muted { color: var(--muted); }
.th .fr { font-family: Spectral, serif; }

/* ---- shell: rail + content ---------------------------------------------- */
.d-app { display: flex; min-height: 100vh; }
/* The column carries the rail's colour the full page height; the rail
   inside it stays put while a long page scrolls. */
.d-railcol { flex: 0 0 248px; background: var(--rail); border-right: 1px solid var(--line); }
.d-rail { box-sizing: border-box; padding: 28px 16px; display: flex; flex-direction: column; gap: 28px;
          position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.d-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink) !important; }
.d-brand-mark { flex: none; width: 38px; height: 38px; border-radius: 12px; background: var(--hero); color: #fff;
                display: flex; align-items: center; justify-content: center; }
.d-nav { display: flex; flex-direction: column; gap: 4px; }
.d-nav a { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px; border-radius: 12px;
           text-decoration: none; color: var(--ink2); font-size: 14px; font-weight: 500; }
.d-nav a:hover { background: var(--railhover); color: var(--ink); }
.d-nav a[aria-current] { background: var(--surface); color: var(--ink); font-weight: 700; box-shadow: 0 1px 3px var(--shadow); }
.d-rail-cur { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 12px;
              display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: var(--ink) !important; }
.d-rail-foot { margin-top: auto; display: flex; flex-direction: column; gap: 14px; }
.d-mode { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 0 12px; border-radius: 12px;
          border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-size: 13px; font-weight: 600; }
.d-mode svg { color: var(--gold2); }
.d-avatar { width: 30px; height: 30px; border-radius: 15px; background: var(--tag); display: flex; align-items: center;
            justify-content: center; font-weight: 700; }
.d-content { flex: 1 1 auto; min-width: 0; box-sizing: border-box; padding: 40px 48px 72px; }
.d-wrap { max-width: 1120px; margin: 0 auto; display: flex; flex-direction: column; gap: 24px; }
.d-row { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.d-row.stretch { align-items: stretch; }

/* ---- flow pages: top step bar ---------------------------------------------- */
.d-top { position: sticky; top: 0; z-index: 5; background: var(--head); border-bottom: 1px solid var(--line);
         display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; padding: 14px 32px; }
.d-back { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600;
          color: var(--ink) !important; text-decoration: none; background: none; border: none; padding: 0; justify-self: start; }
.d-steps { display: flex; gap: 6px; }
.d-steps button { min-height: 34px; padding: 0 12px; border-radius: 17px; border: 1px solid transparent;
                  background: var(--tag); color: var(--faint); font-size: 13px; font-weight: 600; }
.d-steps button.done { background: var(--green-bg); color: var(--green-ink); }
.d-steps button.on { background: var(--accent); color: #fff; }
.d-steps button.next { background: var(--surface); color: var(--ink); border: 1.5px dashed var(--ink2); }
.d-steps button[disabled] { cursor: default; }
.d-top-right { justify-self: end; display: flex; align-items: center; gap: 14px; }
.d-round { width: 40px; height: 40px; border-radius: 20px; border: 1px solid var(--line); background: var(--surface);
           color: var(--gold2); display: flex; align-items: center; justify-content: center; padding: 0; }
.d-flow { max-width: 1176px; margin: 0 auto; padding: 32px 32px 72px; display: flex; gap: 28px; align-items: flex-start; }
.d-main { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.d-side { flex: 0 0 390px; display: flex; flex-direction: column; gap: 16px; position: sticky; top: 92px; }

/* ---- building blocks --------------------------------------------------------- */
.d-card { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-sizing: border-box; }
.d-pad { padding: 22px; display: flex; flex-direction: column; gap: 14px; }
.d-eyebrow { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .12em; color: var(--ink2); text-transform: uppercase; }
.d-eyebrow .en { text-transform: none; }
.d-h1 { margin: 0; font-family: Spectral, serif; font-size: 40px; font-weight: 500; line-height: 1.1; }
.d-h2 { margin: 0; font-family: Spectral, serif; font-size: 26px; font-weight: 500; }
.d-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 20px;
         border-radius: 12px; border: none; font-size: 15px; font-weight: 600; text-decoration: none; box-sizing: border-box; }
.d-btn { white-space: nowrap; }
.d-btn i { font-size: 13px; font-weight: 400; opacity: .75; }
.d-btn[disabled] { opacity: .55; cursor: default; }
.d-primary { background: var(--accent); color: #fff !important; }
.d-strong { background: var(--strong); color: var(--on-strong) !important; }
.d-ghost { background: var(--surface); border: 1px solid var(--field); color: var(--ink) !important; }
.d-red { background: var(--red); color: #fff !important; }
.d-warn { background: var(--warn-bg); border: 1.5px solid var(--warn-line); color: var(--red-ink) !important; }
.d-tile { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px; display: flex;
          flex-direction: column; text-decoration: none; color: var(--ink) !important; }
.d-num { font-family: Spectral, serif; font-size: 28px; line-height: 1.15; }
.d-step { border: 1px solid var(--line); border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 6px;
          background: var(--surface2); text-align: left; color: var(--ink); font: inherit; }
.d-bar { height: 6px; border-radius: 3px; background: var(--track); overflow: hidden; }
.d-bar > div { height: 6px; border-radius: 3px; }
.d-acc { font-family: Spectral, serif; font-size: 15px; color: var(--red-ink); background: var(--red-bg); border-radius: 14px; padding: 4px 11px; }
.d-tag { font-size: 12px; font-weight: 700; letter-spacing: .06em; background: var(--tag); border-radius: 6px; padding: 3px 7px; }
.d-chip { font-family: Spectral, serif; font-size: 15px; color: var(--chip-ink); border: 1px solid var(--chip-line);
          border-radius: 8px; padding: 2px 9px; background: var(--chip-bg); }
.d-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.d-pill { font-size: 11px; font-weight: 700; border-radius: 10px; padding: 3px 8px; white-space: nowrap; }
.d-ok { background: var(--green-bg); color: var(--green-ink); }
.d-gold { background: var(--gold-bg); color: var(--gold-ink); }
.d-bad { background: var(--red-bg); color: var(--red-ink); }
.d-note { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 13px; border-radius: 10px; padding: 10px 12px; }
.d-warnbox { background: var(--red-bg); color: var(--red-ink); border-left: 3px solid var(--red); border-radius: 4px;
             padding: 10px 12px; font-size: 13px; line-height: 1.45; }
.d-warnbox i { display: block; opacity: .85; }
.d-field { width: 100%; box-sizing: border-box; min-height: 52px; padding: 12px 14px; border-radius: 12px;
           border: 1px solid var(--field); background: var(--surface); color: var(--ink); font-family: Spectral, serif;
           font-size: 18px; line-height: 1.45; outline: none; resize: vertical; }
.d-field:focus { border: 1.5px solid var(--accent); }
.d-field.ok { border-color: var(--green); background: var(--green-bg); }
.d-field.bad { border-color: var(--red); background: var(--red-bg); }
.d-field::placeholder { font-style: italic; color: var(--faint); }
.d-keys { display: flex; flex-wrap: wrap; gap: 6px; }
.d-keys button { width: 40px; height: 40px; border-radius: 9px; border: 1px solid var(--line); background: var(--keybg);
                 color: var(--ink); font-family: Spectral, serif; font-size: 18px; padding: 0; }
.d-keys button:hover { border-color: var(--accent); }
.d-link { font-size: 13px; font-weight: 600; text-decoration: underline; background: none; border: none; padding: 0; color: var(--link); }
.d-list-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line2); }
.d-list-row:last-child { border-bottom: none; }
.d-dialog-bg { position: fixed; inset: 0; background: var(--overlay); display: flex; align-items: center; justify-content: center;
               padding: 16px; z-index: 30; }
.d-dialog { width: 100%; max-width: 440px; padding: 26px; display: flex; flex-direction: column; gap: 14px;
            box-shadow: 0 20px 60px rgba(0, 0, 0, .3); }

/* ---- reader --------------------------------------------------------------------- */
.d-passage { font-family: Spectral, serif; font-size: 21px; line-height: 1.85; padding: 30px 36px; }
.d-passage p { margin: 0 0 14px; }
.d-passage p.turn { margin: 0; }
.d-passage p.gap { margin-top: 14px; }
.d-passage .w { cursor: pointer; }
.d-passage .w:hover { text-decoration: underline dotted 1px var(--faint); text-underline-offset: 5px; }
.d-passage .w.hl { background: var(--gold-bg); border-bottom: 1.5px solid var(--gold); padding: 0 3px; border-radius: 2px; }
.d-passage .w.flag { text-decoration: underline dotted 1px var(--faint); text-underline-offset: 5px; }
.d-passage .w.sel { background: var(--hero); color: #fff; border-radius: 5px; padding: 1px 6px; border-bottom: none; }
.d-player { background: var(--hero); color: #fff; border-radius: 18px; padding: 14px 16px; display: flex; align-items: center; gap: 16px; }
.d-player .play { flex: none; width: 44px; height: 44px; border-radius: 22px; border: none; background: #fff; color: #2E3446;
                  display: flex; align-items: center; justify-content: center; }
.d-player .wave { height: 26px; display: flex; align-items: center; gap: 2px; }
.d-player .wave span { flex: 1; border-radius: 1px; }
.d-player .speeds { display: flex; gap: 6px; }
.d-player .speeds button { min-width: 42px; height: 36px; border-radius: 9px; border: none; background: #474E63; color: #fff;
                           font-size: 12px; font-weight: 700; }
.d-player .speeds button.on { background: #D9B95C; color: #22252E; }
.d-observe { background: var(--gold-bg); border: 1px solid var(--chip-line); border-radius: 16px; padding: 18px 20px;
             display: flex; flex-direction: column; gap: 8px; }

/* ---- matrix / heatmaps --------------------------------------------------------------- */
.d-matrix { display: grid; gap: 5px; }
.d-matrix button { padding: 0; border: none; border-radius: 4px; aspect-ratio: 1.15; outline-offset: 1px; }
.d-axis { font-size: 10px; color: var(--muted); text-align: center; }
.th del { color: var(--red); text-decoration-thickness: 1.5px; }
.th ins { color: var(--green-ink); text-decoration: none; font-weight: 600; }
.th .spin { border-color: var(--line); border-top-color: var(--accent); }

/* ---- sign-in: the living left panel ---------------------------------------------
   Letters drift on their own slow paths, the gold glow wanders, and the verb
   of the day turns over by itself, its ending and underline drawing in. All
   of it stops for anyone who asks for reduced motion. */
.d-login-art { position: relative; overflow: hidden; color: #fff; background: #3A4155; }
.d-glow { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(10px); }
.d-glow.gold { width: 70%; height: 70%; left: -18%; top: -22%;
  background: radial-gradient(circle, rgba(176,138,30,.55), transparent 62%); animation: d-wander 22s ease-in-out infinite alternate; }
.d-glow.pale { width: 60%; height: 60%; right: -20%; bottom: -25%;
  background: radial-gradient(circle, rgba(255,255,255,.16), transparent 60%); animation: d-wander 28s ease-in-out -9s infinite alternate-reverse; }
@keyframes d-wander {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(18%, 22%) scale(1.15); }
  100% { transform: translate(34%, 6%) scale(.95); }
}
.d-float { position: absolute; pointer-events: none; font-family: Spectral, serif; opacity: .16;
  animation: d-drift var(--dur, 18s) ease-in-out var(--delay, 0s) infinite alternate; }
@keyframes d-drift {
  0%   { transform: translate(0, 0) rotate(0deg); opacity: .10; }
  35%  { transform: translate(var(--dx, 30px), calc(var(--dy, -40px) * .6)) rotate(8deg); opacity: .22; }
  70%  { transform: translate(calc(var(--dx, 30px) * -.4), var(--dy, -40px)) rotate(-6deg); opacity: .14; }
  100% { transform: translate(calc(var(--dx, 30px) * .6), calc(var(--dy, -40px) * -.5)) rotate(4deg); opacity: .2; }
}
.d-verb { animation: d-verb-in .9s cubic-bezier(.2, .7, .2, 1) both; }
.d-verb .end { display: inline-block; animation: d-end-in 1.1s .35s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes d-verb-in { from { opacity: 0; transform: translateY(22px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes d-end-in { from { opacity: 0; transform: translateY(-14px) scale(.9); } to { opacity: 1; transform: none; } }
.d-under path { stroke-dasharray: 420; stroke-dashoffset: 420; animation: d-draw 1.4s .5s ease-out forwards; }
@keyframes d-draw { to { stroke-dashoffset: 0; } }
.d-fade-in { animation: d-verb-in .9s .25s cubic-bezier(.2, .7, .2, 1) both; }
.d-dot { height: 6px; border-radius: 3px; background: #fff; transition: width .4s, opacity .4s; border: none; padding: 0; cursor: pointer; }
@media (prefers-reduced-motion: reduce) {
  .d-glow, .d-float, .d-verb, .d-verb .end, .d-fade-in { animation: none !important; }
  .d-under path { animation: none; stroke-dashoffset: 0; }
}

/* The account block at the foot of the rail: who is signed in, and a way
   out that looks like a button, not a footnote link. */
.d-account { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 12px;
             display: flex; flex-direction: column; gap: 8px; }
.d-small { min-height: 36px; padding: 0 12px; font-size: 13px; border-radius: 10px; }
.d-signout { background: var(--red-bg); color: var(--red-ink) !important; border: 1px solid var(--warn-line); }
.d-signout:hover { filter: brightness(.97); }