/* DESK — Four Nations theme.
   Parchment and ink by day, night sky by lamplight. The four bending
   elements carry the status and project colours, so colour means something
   here rather than just decorating.

   The previous arcade theme is kept in styles.arcade.css — swap the
   stylesheet link in index.html to go back to it. */

:root {
  /* daylight: aged scroll */
  --bg:        #ece0c6;
  --bg-deep:   #e2d3b2;
  --panel:     #f6efdd;
  --panel-2:   #efe5cd;
  --sunk:      #e4d7ba;

  --ink:       #2c2219;
  --ink-soft:  #6b5b46;
  --ink-faint: #9a8a70;
  --rule:      #c9b691;

  /* the four nations */
  --air:   #d98a22;
  --water: #2f7ca6;
  --earth: #5d8c3c;
  --fire:  #b23a26;
  --gold:  #b8912a;

  --s-todo:    var(--water);
  --s-doing:   var(--air);
  --s-waiting: var(--fire);
  --s-done:    var(--earth);

  --shadow:    0 1px 2px rgba(60, 44, 22, .10), 0 10px 26px rgba(60, 44, 22, .10);
  --shadow-sm: 0 1px 2px rgba(60, 44, 22, .12);

  --font-display: 'Marcellus', 'Iowan Old Style', Palatino, Georgia, serif;
  --font-body: 'Spectral', Georgia, 'Times New Roman', serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Backdrop artwork. --veil is how much parchment sits over the picture:
     lower shows more of it, higher protects the text. 0 is the bare image
     (unreadable), 1 hides it completely. Swap public/bg.jpg to change the
     picture; nothing else needs editing. */
  --veil: .26;
  --veil-rgb: 236, 224, 198;

  /* Frosted glass. --glass is the pane itself, --glass-edge the hairline
     around it, --glass-shine the highlight along the top edge that sells
     the illusion of thickness. saturate() is what stops blurred artwork
     going grey behind the pane. */
  --glass:        rgba(255, 253, 247, .56);
  --glass-strong: rgba(255, 253, 247, .74);
  --glass-edge:   rgba(255, 255, 255, .62);
  --glass-shine:  rgba(255, 255, 255, .75);
  --glass-sunk:   rgba(120, 100, 66, .10);
  --blur: 20px;

  --r-lg: 16px;
  --r-md: 11px;
  --r-sm: 8px;
}

/* night: lamplight and deep sky */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:        #141824;
    --bg-deep:   #0f131d;
    --panel:     #1e2433;
    --panel-2:   #232a3b;
    --sunk:      #171c29;

    --ink:       #ede4d2;
    --ink-soft:  #a9a08e;
    --ink-faint: #6f6a5f;
    --rule:      #39415a;

    --air:   #e8a33f;
    --water: #4d9fce;
    --earth: #7cb050;
    --fire:  #d1553d;
    --gold:  #d4ac45;

    --shadow:    0 1px 2px rgba(0, 0, 0, .5), 0 12px 30px rgba(0, 0, 0, .38);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);

    /* Night needs a heavier veil — light text over a bright sky is the one
       combination that always fails. */
    --veil: .68;
    --veil-rgb: 16, 20, 30;

    --glass:        rgba(30, 37, 54, .58);
    --glass-strong: rgba(30, 37, 54, .78);
    --glass-edge:   rgba(255, 255, 255, .13);
    --glass-shine:  rgba(255, 255, 255, .10);
    --glass-sunk:   rgba(0, 0, 0, .26);
  }
}
:root[data-theme="dark"] {
  --bg:        #141824;
  --bg-deep:   #0f131d;
  --panel:     #1e2433;
  --panel-2:   #232a3b;
  --sunk:      #171c29;
  --ink:       #ede4d2;
  --ink-soft:  #a9a08e;
  --ink-faint: #6f6a5f;
  --rule:      #39415a;
  --air:   #e8a33f;
  --water: #4d9fce;
  --earth: #7cb050;
  --fire:  #d1553d;
  --gold:  #d4ac45;
  --shadow:    0 1px 2px rgba(0, 0, 0, .5), 0 12px 30px rgba(0, 0, 0, .38);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);
  --veil: .68;
  --veil-rgb: 16, 20, 30;

  --glass:        rgba(30, 37, 54, .58);
  --glass-strong: rgba(30, 37, 54, .78);
  --glass-edge:   rgba(255, 255, 255, .13);
  --glass-shine:  rgba(255, 255, 255, .10);
  --glass-sunk:   rgba(0, 0, 0, .26);
}

* { box-sizing: border-box; }

/* [hidden] loses to any author rule that sets display (.gate is display:grid),
   so restate it with weight. Without this the key gate shows even when no key
   is configured. */
[hidden] { display: none !important; }

html { background: var(--bg); }

body {
  margin: 0;
  color: var(--ink);
  font: 16px/1.65 var(--font-body);
  /* Transparent on purpose. A negative-z-index pseudo-element paints below
     its parent's own background unless the parent forms a stacking context,
     so an opaque body here would hide the artwork entirely. The fallback
     colour lives on <html> instead. */
  background: transparent;
  overflow-x: hidden;
  min-height: 100vh;
}

/* The artwork, and the veil that keeps text on top of it legible. Two fixed
   pseudo-elements rather than background-attachment: fixed, which stutters
   and mis-scales on iOS. */
body::before,
body::after { content: ''; position: fixed; inset: 0; pointer-events: none; }

body::before {
  z-index: -2;
  background: url('/bg.jpg') center / cover no-repeat;
}

body::after {
  z-index: -1;
  background:
    /* darker at the edges so the page settles into the frame */
    radial-gradient(125% 95% at 50% 38%, transparent 35%, rgba(var(--veil-rgb), .38) 100%),
    rgba(var(--veil-rgb), var(--veil));
}

button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible { outline: 2px solid var(--water); outline-offset: 2px; }

/* ---------------------------------------------------------- primitives */

.panel {
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 3px;
  box-shadow: var(--shadow);
}

.btn {
  font-family: var(--font-display);
  font-size: 13px; letter-spacing: .06em; text-transform: uppercase;
  padding: .6em 1.05em;
  background: var(--panel);
  color: var(--ink);
  border: 1px solid var(--rule);
  border-radius: 2px;
  cursor: pointer; text-decoration: none; display: inline-block;
  transition: background .15s, border-color .15s, transform .08s;
}
.btn:hover { background: var(--panel-2); border-color: var(--ink-soft); }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--fire); border-color: var(--fire); color: #fdf6e8; }
.btn.primary:hover { background: #9c3020; border-color: #9c3020; }
.btn.danger { color: var(--fire); }
.btn.danger:hover { background: var(--fire); border-color: var(--fire); color: #fdf6e8; }
.btn-row { display: flex; gap: .55rem; flex-wrap: wrap; align-items: center; }

/* --------------------------------------------------------------- gate */

.gate { position: fixed; inset: 0; display: grid; place-items: center; padding: 1.5rem; z-index: 50; }
.gate-card { padding: 2.5rem 2rem; width: min(25rem, 100%); display: grid; gap: 1rem; text-align: center; }
.gate-card h1 {
  font-family: var(--font-display); font-size: 2.2rem; margin: 0;
  letter-spacing: .16em; color: var(--ink);
}
.press { font-family: var(--font-display); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft); margin: 0; }
.gate-card input {
  padding: .7rem; text-align: center; letter-spacing: .35em;
  background: var(--sunk); border: 1px solid var(--rule); border-radius: 2px; color: var(--ink);
}
.gate-error { font-size: 13px; color: var(--fire); margin: 0; }

/* ------------------------------------------------------------- topbar */

.topbar {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--panel) 82%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
  box-shadow: var(--shadow-sm);
}

.hud {
  display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap;
  padding: .6rem 1.1rem; border-bottom: 1px solid var(--rule);
}
.brand {
  font-family: var(--font-display); font-size: 1.15rem;
  letter-spacing: .3em; text-transform: uppercase; color: var(--ink);
}

.hud-block { display: flex; align-items: center; gap: .45rem; }
.hud-label { font-family: var(--font-display); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); }
.hud-level { font-family: var(--font-display); font-size: 1.25rem; color: var(--gold); font-variant-numeric: tabular-nums; }
.hud-streak { font-family: var(--font-display); font-size: 1rem; color: var(--air); font-variant-numeric: tabular-nums; }
.hud-streak::before { content: '\1F525'; margin-right: .3rem; font-size: .85em; }
.hud-streak.cold { color: var(--ink-faint); }
.hud-streak.cold::before { content: '\25CB'; }

.hud-block.xp { flex: 1; min-width: 9rem; max-width: 20rem; gap: .6rem; }
.xpbar { flex: 1; height: 7px; background: var(--sunk); border: 1px solid var(--rule); border-radius: 4px; overflow: hidden; }
.xpbar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--water), var(--earth)); transition: width .5s cubic-bezier(.2, .8, .2, 1); }
.hud-xp-text { font-family: var(--font-mono); font-size: 11px; color: var(--ink-soft); white-space: nowrap; font-variant-numeric: tabular-nums; }

.hud-rank {
  font-family: var(--font-display); font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold); border: 1px solid var(--gold); border-radius: 2px; padding: .3em .7em;
}

.hud-right { margin-left: auto; display: flex; align-items: center; gap: .7rem; }
.pill { font-family: var(--font-display); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; padding: .3em .6em; border: 1px solid currentColor; border-radius: 2px; color: var(--ink-soft); }
.pill.ok  { color: var(--earth); }
.pill.bad { color: var(--fire); }
.whoami { font-size: 12px; color: var(--ink-faint); }

.tabs { display: flex; gap: .2rem; flex-wrap: wrap; padding: 0 .8rem; }
.tab {
  font-family: var(--font-display); font-size: 13px; letter-spacing: .1em; text-transform: uppercase;
  background: none; border: none; border-bottom: 2px solid transparent;
  color: var(--ink-soft); padding: .7em .8em; cursor: pointer;
  display: flex; align-items: center; gap: .45rem;
}
.tab:hover { color: var(--ink); }
.tab.active { color: var(--ink); border-bottom-color: var(--fire); }
.count {
  font-family: var(--font-mono); font-size: 11px; background: var(--fire); color: #fdf6e8;
  padding: .15em .45em; border-radius: 10px; font-variant-numeric: tabular-nums;
}
.count:empty { display: none; }

/* ---------------------------------------------------------- quick add */

.quickadd { padding: 1.4rem 1.1rem .3rem; max-width: 54rem; margin: 0 auto; }
.quickadd form { display: flex; align-items: stretch; }
.prompt-caret {
  display: grid; place-items: center; padding: 0 .75rem;
  background: var(--panel); border: 1px solid var(--rule); border-right: none;
  border-radius: 2px 0 0 2px; color: var(--air); font-size: 12px;
}
.quickadd input {
  flex: 1; padding: .8rem .9rem; background: var(--panel);
  border: 1px solid var(--rule); border-left: none; border-radius: 0; color: var(--ink);
}
.quickadd input::placeholder { color: var(--ink-faint); }
.quickadd input:focus { outline: none; background: var(--panel-2); }
.quickadd .btn { border-radius: 0 2px 2px 0; border-left: none; }
.quickadd-hint { min-height: 1.5rem; padding: .5rem .2rem; font-size: 13px; color: var(--ink-soft); font-style: italic; }

/* -------------------------------------------------------------- views */

main { max-width: 54rem; margin: 0 auto; padding: .5rem 1.1rem 6rem; }

.section { margin-bottom: 2rem; }
.section-head {
  font-family: var(--font-display); font-size: 13px;
  letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft);
  margin: 0 0 .85rem; padding-bottom: .5rem;
  border-bottom: 1px solid var(--rule);
  display: flex; align-items: center; gap: .6rem;
}
.section-head::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--water); flex: none; }
.section-head .n { margin-left: auto; font-family: var(--font-mono); font-size: 12px; color: var(--ink-faint); }
.section-head.overdue { color: var(--fire); }
.section-head.overdue::before { background: var(--fire); }
.section-head.cleared { color: var(--earth); }
.section-head.cleared::before { background: var(--earth); }

.empty {
  border: 1px dashed var(--rule); border-radius: 3px;
  padding: 3rem 1.5rem; text-align: center; color: var(--ink-soft);
}
.empty strong {
  display: block; font-family: var(--font-display); font-size: 1.4rem;
  letter-spacing: .1em; color: var(--gold); margin-bottom: .5rem; font-weight: 400;
}

/* -------------------------------------------------------------- tasks */

.list { display: grid; gap: .5rem; }

.task {
  display: flex; align-items: flex-start; gap: .8rem;
  background: var(--panel); border: 1px solid var(--rule); border-radius: 3px;
  padding: .8rem .95rem; cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: border-color .15s, transform .12s, box-shadow .15s;
}
.task:hover { border-color: var(--ink-soft); transform: translateY(-1px); box-shadow: var(--shadow); }
.task.done { opacity: .52; }
.task.done .task-title { text-decoration: line-through; }

.check {
  flex: none; width: 20px; height: 20px; margin-top: 2px; padding: 0;
  background: var(--sunk); border: 1px solid var(--ink-soft); border-radius: 50%;
  cursor: pointer; display: grid; place-items: center;
  color: transparent; font-size: 11px; line-height: 1;
  transition: background .15s, border-color .15s;
}
.check:hover { border-color: var(--earth); color: var(--earth); }
.task.done .check { background: var(--earth); border-color: var(--earth); color: #fdf6e8; }

.task-body { flex: 1; min-width: 0; }
.task-title { display: block; word-break: break-word; }
.task-sub { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .45rem; }

.chip {
  font-family: var(--font-display); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .28em .6em; border: 1px solid var(--rule); border-radius: 2px; color: var(--ink-soft);
}
.chip .dot { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.chip.due-overdue { color: var(--fire); border-color: var(--fire); }
.chip.due-today   { color: var(--air); border-color: var(--air); }
.chip.prio-high   { color: var(--fire); border-color: var(--fire); }

.star { flex: none; background: none; border: none; cursor: pointer; color: var(--rule); font-size: 17px; padding: 0 .1rem; line-height: 1; }
.star.on { color: var(--gold); }

.status-bar { flex: none; width: 3px; align-self: stretch; border-radius: 2px; }
.st-todo { background: var(--s-todo); }
.st-doing { background: var(--s-doing); }
.st-waiting { background: var(--s-waiting); }
.st-done { background: var(--s-done); }

/* ----------------------------------------------------------- projects */

.proj-card { background: var(--panel); border: 1px solid var(--rule); border-radius: 3px; box-shadow: var(--shadow-sm); padding: 1.1rem 1.2rem; margin-bottom: 1.1rem; }
.proj-head { display: flex; align-items: center; gap: .8rem; margin-bottom: .9rem; flex-wrap: wrap; }
.proj-name { font-family: var(--font-display); font-size: 1.05rem; letter-spacing: .1em; text-transform: uppercase; display: flex; align-items: center; gap: .55rem; }
.proj-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.proj-progress { flex: 1; min-width: 6rem; height: 5px; background: var(--sunk); border-radius: 3px; overflow: hidden; }
.proj-progress i { display: block; height: 100%; background: var(--earth); transition: width .5s cubic-bezier(.2, .8, .2, 1); }
.proj-score { font-family: var(--font-mono); font-size: 12px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.proj-clear { font-family: var(--font-display); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--earth); margin: .3rem 0 0; }

/* -------------------------------------------------------------- board */

.board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; }
.col { background: var(--panel-2); border: 1px solid var(--rule); border-radius: 3px; padding: .7rem; min-height: 9rem; }
.col.drop { border-color: var(--air); background: var(--panel); }
.col h3 { font-family: var(--font-display); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; margin: 0 0 .8rem; color: var(--ink-soft); }
.col .task { padding: .6rem .7rem; }
.col .task:hover { transform: none; }
@media (max-width: 860px) { .board { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .board { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------- config */

.card { background: var(--panel); border: 1px solid var(--rule); border-radius: 3px; box-shadow: var(--shadow-sm); padding: 1.3rem 1.4rem; margin-bottom: 1.2rem; }
.card h2 { font-family: var(--font-display); font-size: 1.1rem; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 .6rem; color: var(--ink); font-weight: 400; }
.card > p { margin: .3rem 0 1.1rem; color: var(--ink-soft); font-size: 14px; }
.card ol { padding-left: 1.3rem; font-size: 14px; line-height: 1.9; color: var(--ink-soft); }
.card ol strong, .card p strong { color: var(--ink); }
.card code, .note code { font-family: var(--font-mono); background: var(--sunk); border: 1px solid var(--rule); border-radius: 2px; padding: .1em .4em; font-size: 12.5px; }

.copyfield { display: flex; gap: .5rem; }
.copyfield input { flex: 1; padding: .6rem .7rem; background: var(--sunk); border: 1px solid var(--rule); border-radius: 2px; color: var(--water); font-family: var(--font-mono); font-size: 12px; }

.note { border-left: 3px solid var(--air); background: var(--panel-2); padding: .8rem 1rem; border-radius: 0 2px 2px 0; font-size: 14px; color: var(--ink-soft); }
.note strong { color: var(--ink); }

.proj-row { display: flex; align-items: center; gap: .6rem; padding: .55rem 0; border-bottom: 1px solid var(--rule); }
.proj-row:last-child { border-bottom: none; }
.proj-row input[type=text] { flex: 1; padding: .5rem .6rem; background: var(--sunk); border: 1px solid var(--rule); border-radius: 2px; color: var(--ink); }
.proj-row input[type=color] { width: 32px; height: 32px; padding: 0; border: 1px solid var(--rule); border-radius: 2px; background: none; cursor: pointer; }

/* ------------------------------------------------------------- drawer */

.drawer { position: fixed; inset: 0; z-index: 40; }
.drawer-scrim { position: absolute; inset: 0; background: rgba(20, 14, 6, .45); }
.drawer-panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(27rem, 100%);
  background: var(--panel); border-left: 1px solid var(--rule);
  padding: 1.2rem; overflow-y: auto; display: grid; gap: .9rem; align-content: start;
  box-shadow: var(--shadow);
}
.drawer-head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.drawer-title { font-family: var(--font-display); font-size: 1rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); }

.field { display: grid; gap: .35rem; }
.field > span { font-family: var(--font-display); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); }
.field input, .field select, .field textarea {
  padding: .6rem .7rem; background: var(--sunk); border: 1px solid var(--rule);
  border-radius: 2px; color: var(--ink); width: 100%;
}
.field textarea { resize: vertical; }
.field.checkbox { grid-auto-flow: column; justify-content: start; align-items: center; gap: .6rem; }
.field.checkbox input { width: 17px; height: 17px; accent-color: var(--fire); }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.task-meta { font-family: var(--font-display); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); margin: 0; }

/* ------------------------------------------------------------ offline */

.offline {
  position: fixed; left: 50%; bottom: 1.2rem; transform: translateX(-50%);
  background: var(--air); color: #2a1c06; padding: .5rem 1rem; border-radius: 2px;
  font-family: var(--font-display); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  box-shadow: var(--shadow); z-index: 30;
}

/* -------------------------------------------------- floating xp / fx  */

.fx { position: fixed; inset: 0; pointer-events: none; z-index: 60; }
.fx-xp {
  position: absolute; font-family: var(--font-display); font-size: 1.05rem;
  color: var(--gold); letter-spacing: .08em;
  animation: float-up 1.15s cubic-bezier(.2, .8, .2, 1) forwards;
}
@keyframes float-up {
  0%   { transform: translateY(0)     scale(.9); opacity: 0; }
  18%  { opacity: 1; }
  100% { transform: translateY(-58px) scale(1.1); opacity: 0; }
}

/* ------------------------------------------------------------ levelup */

.levelup { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; background: rgba(20, 14, 6, .62); }
.levelup-card { padding: 2.6rem 2.4rem; text-align: center; display: grid; gap: .7rem; min-width: min(22rem, 90vw); animation: rise .4s cubic-bezier(.2, .8, .2, 1); }
@keyframes rise { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }
.levelup-small { font-size: 1.1rem; margin: 0; color: var(--gold); letter-spacing: .5em; }
.levelup-card h2 { font-family: var(--font-display); font-size: 1.9rem; margin: 0; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); font-weight: 400; }
.levelup-lv { font-family: var(--font-display); font-size: 1.15rem; margin: 0; letter-spacing: .2em; color: var(--ink-soft); }
.levelup-rank { font-family: var(--font-display); font-size: .95rem; margin: 0 0 .5rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* --------------------------------------------------------- responsive */

@media (max-width: 640px) {
  body { font-size: 15px; }
  .hud { gap: .75rem; padding: .55rem .85rem; }
  .hud-rank, .whoami { display: none; }
  .hud-block.xp { min-width: 5rem; }
  .tab { font-size: 12px; padding: .7em .55em; }
  .row { grid-template-columns: 1fr; }
}


/* ==================================================================== */
/* Glass surfaces                                                       */
/*                                                                      */
/* Appended deliberately: these selectors all have the same specificity */
/* as the component rules above, so being last is what lets them take   */
/* over the background and border without every rule being rewritten.   */
/* ==================================================================== */

.panel,
.topbar,
.card,
.proj-card,
.col,
.task,
.drawer-panel,
.levelup-card,
.gate-card {
  background: var(--glass);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(180%);
  backdrop-filter: blur(var(--blur)) saturate(180%);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--shadow), inset 0 1px 0 var(--glass-shine);
}

.card, .proj-card, .col, .panel, .gate-card, .levelup-card { border-radius: var(--r-lg); }
.task { border-radius: var(--r-md); }

/* Task rows are the one thing there can be forty of on screen, so they get
   a cheaper blur - the cost of backdrop-filter scales with how many panes
   the compositor has to resolve. */
.task {
  -webkit-backdrop-filter: blur(12px) saturate(170%);
  backdrop-filter: blur(12px) saturate(170%);
}
.task:hover {
  background: var(--glass-strong);
  border-color: var(--glass-edge);
  box-shadow: var(--shadow), inset 0 1px 0 var(--glass-shine);
}

.topbar {
  border-left: none; border-right: none; border-top: none;
  border-radius: 0;
  -webkit-backdrop-filter: blur(26px) saturate(180%);
  backdrop-filter: blur(26px) saturate(180%);
  box-shadow: 0 1px 0 var(--glass-edge), 0 6px 22px rgba(20, 16, 8, .07);
}
.hud { border-bottom: 1px solid var(--glass-edge); }

.drawer-panel {
  border-radius: 0;
  border: none; border-left: 1px solid var(--glass-edge);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  backdrop-filter: blur(30px) saturate(180%);
  background: var(--glass-strong);
}

/* Buttons, inputs and pills: same material, smaller radii. */
.btn, .quickadd input, .prompt-caret, .copyfield input,
.field input, .field select, .field textarea,
.proj-row input[type=text], .gate-card input {
  background: var(--glass);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  backdrop-filter: blur(10px) saturate(160%);
  border: 1px solid var(--glass-edge);
  border-radius: var(--r-sm);
}
.btn { box-shadow: inset 0 1px 0 var(--glass-shine); }
.btn:hover { background: var(--glass-strong); }
.btn.primary {
  background: var(--fire); border-color: transparent; color: #fdf6e8;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: 0 1px 2px rgba(120, 30, 15, .3), inset 0 1px 0 rgba(255, 255, 255, .22);
}
.btn.primary:hover { background: #9c3020; }

/* Sunk fields read as recessed rather than floating. */
.field input, .field select, .field textarea,
.copyfield input, .proj-row input[type=text] {
  background: var(--glass-sunk);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .06);
}

.quickadd form { border-radius: var(--r-sm); box-shadow: var(--shadow-sm); }
.prompt-caret { border-radius: var(--r-sm) 0 0 var(--r-sm); border-right: none; }
.quickadd input { border-radius: 0; border-left: none; border-right: none; }
.quickadd .btn { border-radius: 0 var(--r-sm) var(--r-sm) 0; }

/* Chips are too small to blur convincingly - a flat wash reads better. */
.chip { background: var(--glass-sunk); border-radius: 999px; border-color: var(--glass-edge); }
.chip.due-overdue { border-color: var(--fire); }
.chip.due-today   { border-color: var(--air); }
.chip.prio-high   { border-color: var(--fire); }

.check { border-radius: 50%; background: var(--glass-sunk); }
.col { background: color-mix(in srgb, var(--glass) 62%, transparent); }

/* Safari and Firefox without backdrop-filter would otherwise render these
   panes as near-transparent washes with text straight on the artwork. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .panel, .topbar, .card, .proj-card, .col, .task,
  .drawer-panel, .levelup-card, .gate-card { background: var(--panel); }
  .btn, .quickadd input, .prompt-caret { background: var(--panel-2); }
}

/* Text that sits directly on the artwork rather than on a pane needs its own
   protection. A halo in the veil colour lifts it off a busy background
   without boxing it in - which would fight the glass panes around it. */
.section-head,
.quickadd-hint {
  text-shadow: 0 1px 4px rgba(var(--veil-rgb), .95), 0 0 12px rgba(var(--veil-rgb), .7);
}
.section-head { color: var(--ink); }
.section-head .n { color: var(--ink-soft); }
.quickadd-hint { color: var(--ink-soft); }
.empty { color: var(--ink-soft); text-shadow: 0 1px 4px rgba(var(--veil-rgb), .9); }

/* ==================================================================== */
/* Elements and mastery                                                 */
/* Each block sets --el to its element's colour, and everything inside  */
/* reads from that rather than repeating four near-identical rules.     */
/* ==================================================================== */

/* --- HUD meters --- */
.masteries { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.mastery {
  display: flex; align-items: center; gap: .4rem;
  padding: .22rem .55rem; border-radius: 999px;
  background: var(--glass-sunk); border: 1px solid var(--glass-edge);
}
.mastery-glyph { flex: none; color: var(--el); display: grid; place-items: center; }
.mastery-glyph svg { width: 15px; height: 15px; display: block; }
.mastery-tier {
  font-family: var(--font-display); font-size: 13px; color: var(--el);
  font-variant-numeric: tabular-nums; min-width: 1ch; text-align: center;
}
.mastery-bar { width: 34px; height: 4px; border-radius: 2px; background: var(--glass-sunk); overflow: hidden; }
.mastery-bar i { display: block; height: 100%; background: var(--el); transition: width .5s cubic-bezier(.2, .8, .2, 1); }

/* --- element sections in Projects --- */
.element { margin-bottom: 2.2rem; }
.element-head {
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  padding: .6rem .9rem; margin-bottom: 1rem;
  border-radius: var(--r-md);
  background: var(--glass);
  -webkit-backdrop-filter: blur(14px) saturate(175%);
  backdrop-filter: blur(14px) saturate(175%);
  border: 1px solid var(--glass-edge);
  border-left: 4px solid var(--el);
  box-shadow: var(--shadow-sm), inset 0 1px 0 var(--glass-shine);
}
.element-glyph { flex: none; color: var(--el); display: grid; place-items: center; }
.element-glyph svg { width: 21px; height: 21px; display: block; }
.element-name {
  font-family: var(--font-display); font-size: 1.05rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink);
}
.element-rank {
  font-family: var(--font-display); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--el);
  border: 1px solid var(--el); border-radius: 999px; padding: .22em .6em;
}
.element-bar { flex: 1; min-width: 3rem; height: 5px; border-radius: 3px; background: var(--glass-sunk); overflow: hidden; }
.element-bar i { display: block; height: 100%; background: var(--el); transition: width .5s cubic-bezier(.2, .8, .2, 1); }
.element-tier { font-family: var(--font-mono); font-size: 11px; color: var(--ink-soft); white-space: nowrap; font-variant-numeric: tabular-nums; }
.element-empty {
  margin: 0 0 0 .3rem; font-size: 13px; font-style: italic; color: var(--ink-soft);
  text-shadow: 0 1px 4px rgba(var(--veil-rgb), .9);
}
.element-inbox { --el: var(--ink-faint); }

/* --- mastery breakdown in Config --- */
.mastery-table { display: grid; gap: .1rem; }
.mastery-row {
  display: flex; align-items: center; gap: .8rem;
  padding: .6rem .2rem; border-bottom: 1px solid var(--glass-edge);
}
.mastery-row:last-child { border-bottom: none; }
.mastery-row-name {
  font-family: var(--font-display); font-size: 12px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--el); min-width: 4.2rem;
}
.mastery-row-projects { flex: 1; min-width: 6rem; font-size: 12.5px; color: var(--ink-soft); }
.mastery-row .element-bar { flex: none; width: 5.5rem; }
.mastery-row-tier { font-family: var(--font-mono); font-size: 11px; color: var(--ink-soft); white-space: nowrap; }

/* --- tier-up card --- */
.levelup-glyph { display: grid; place-items: center; margin-bottom: .2rem; }
.levelup-glyph svg { width: 46px; height: 46px; display: block; }

/* --- element picker in Config --- */
.proj-row select {
  padding: .5rem .6rem; border-radius: var(--r-sm);
  background: var(--glass-sunk); border: 1px solid var(--glass-edge); color: var(--ink);
  font-family: var(--font-display); font-size: 12px; letter-spacing: .08em;
}

@media (max-width: 780px) {
  .mastery-bar { display: none; }
  .mastery { padding: .2rem .45rem; gap: .3rem; }
  .mastery-row { flex-wrap: wrap; gap: .5rem; }
  .mastery-row .element-bar { width: 100%; }
  .proj-row { flex-wrap: wrap; }
  .proj-row input[type=text] { min-width: 8rem; }
}

/* A task's chip names the element it trains, tinted to match. */
.chip.trains { color: var(--el); border-color: color-mix(in srgb, var(--el) 42%, var(--glass-edge)); }