/* Violet refresh: the original family palette with quieter, more useful surfaces. */
:root {
  --canvas: oklch(.972 .007 250);
  --canvas-deep: oklch(.935 .012 250);
  --paper: oklch(.995 .003 250);
  --ink: oklch(.225 .025 260);
  --muted: oklch(.51 .025 260);
  --quiet: oklch(.78 .016 260);
  --primary: oklch(.57 .19 283);
  --primary-deep: oklch(.47 .19 283);
  --primary-soft: oklch(.925 .045 283);
  --on-primary: oklch(.99 .003 250);
  --teal: oklch(.69 .12 184);
  --teal-soft: oklch(.94 .047 184);
  --on-teal: oklch(.2 .035 184);
  --coral: oklch(.72 .14 29);
  --coral-soft: oklch(.945 .045 29);
  --on-coral: oklch(.22 .045 29);
  --gold: oklch(.8 .14 86);
  --danger: oklch(.58 .2 25);
  --danger-soft: oklch(.94 .035 25);
  --on-danger: oklch(.99 .003 25);
  --game-gold-ink: #765019;
  --game-gold-soft: #fff4d8;
  --atlas-line: #e4e4ee;
  --atlas-field: #f8f8fc;
  --atlas-cream: #f2efff;
  --atlas-clay: #ece8fc;
  --atlas-shadow: 0 10px 30px rgb(49 40 95 / 5%);
  --shadow: 0 2px 8px rgb(49 40 95 / 3%), 0 18px 42px rgb(49 40 95 / 5%);
  --screen-back-border: #e4e8ee;
  --screen-back-text: #5c6c81;
  --screen-back-bg: #f7f8fa;
}
:root[data-theme="dark"] {
  --canvas: oklch(.17 .018 260);
  --canvas-deep: oklch(.215 .021 260);
  --paper: oklch(.235 .022 260);
  --ink: oklch(.955 .008 250);
  --muted: oklch(.72 .018 255);
  --quiet: oklch(.42 .022 260);
  --primary: oklch(.72 .16 283);
  --primary-deep: oklch(.78 .13 283);
  --primary-soft: oklch(.31 .075 283);
  --on-primary: oklch(.17 .025 275);
  --teal: oklch(.75 .12 184);
  --teal-soft: oklch(.29 .055 184);
  --on-teal: oklch(.92 .025 184);
  --coral: oklch(.76 .13 29);
  --coral-soft: oklch(.3 .06 29);
  --on-coral: oklch(.96 .02 29);
  --gold: #e8c277;
  --danger: oklch(.76 .14 25);
  --danger-soft: oklch(.3 .065 25);
  --on-danger: oklch(.17 .025 25);
  --game-gold-ink: #f2d494;
  --game-gold-soft: #473c2a;
  --atlas-line: #373b4a;
  --atlas-field: #232936;
  --atlas-cream: #2c2945;
  --atlas-clay: #37314d;
  --atlas-shadow: 0 12px 34px rgb(0 0 0 / 12%);
  --shadow: 0 2px 8px rgb(0 0 0 / 9%), 0 20px 44px rgb(0 0 0 / 13%);
  --screen-back-border: #3b4354;
  --screen-back-text: #bbc3d2;
  --screen-back-bg: #272e3c;
}

body { background: radial-gradient(circle at 88% 0%, color-mix(in oklch, var(--primary) 5%, transparent), transparent 30rem), var(--canvas); }
::selection { color: var(--ink); background: color-mix(in oklch, var(--primary-soft) 80%, var(--paper)); }
.button-primary { color: var(--on-primary); background: var(--primary); box-shadow: none; }
.button-primary:hover { background: var(--primary-deep); }
.button-secondary { color: var(--primary-deep); background: var(--primary-soft); }
.button, .icon-button, .card-action { border-radius: .85rem; }
.segment-control { background: color-mix(in oklch, var(--canvas-deep) 80%, var(--paper)); }
.segment-control button[aria-pressed="true"] { color: var(--primary-deep); box-shadow: 0 1px 6px rgb(49 40 95 / 7%); }

/* Brand and navigation */
.auth-art {
  background: radial-gradient(circle at 18% 15%, rgb(226 197 255 / 58%), transparent 27%),
    radial-gradient(circle at 79% 82%, rgb(187 181 255 / 32%), transparent 31%),
    linear-gradient(145deg, #6551d2, #30276b);
}
.home-mark span:first-child { background: #fff; }
.home-mark span:nth-child(2) { background: #d9cfff; }
.home-mark span:nth-child(3) { background: #f3b5aa; }
.brand-mark i:nth-child(1) { background: #6c60e1; }
.brand-mark i:nth-child(2) { background: #b6a8f5; }
.brand-mark i:nth-child(3) { background: #f3b5aa; }
.sidebar { background: var(--paper); }
.side-nav .nav-button[aria-current="page"] { color: var(--primary-deep); background: var(--primary-soft); }
.bottom-nav { background: color-mix(in oklch, var(--paper) 96%, transparent); box-shadow: 0 -1px 0 var(--atlas-line); }
.theme-preview { background: linear-gradient(#f2f6fa 0 62%, #6c60e1 62%); }
.theme-preview.dark { background: linear-gradient(#0b1017 0 62%, #9895ff 62%); }
.theme-preview.system { background: linear-gradient(90deg, #f2f6fa 0 50%, #0b1017 50%); }
.more-nav > button { min-height: 4.4rem; border: 0; border-bottom: 1px solid var(--atlas-line); border-radius: 0; background: transparent; }
.more-nav > button:last-child { border-bottom: 0; }
.more-nav-icon { border-radius: .85rem; color: var(--primary-deep); background: var(--primary-soft); }

/* Overview: one strong lead, then calm information surfaces. */
.overview-hero {
  border: 0;
  background: radial-gradient(circle at 91% 4%, rgb(204 176 255 / 25%), transparent 30%),
    linear-gradient(125deg, #5946c7 0%, #4635a4 56%, #2e286d 100%);
  box-shadow: 0 19px 38px rgb(66 47 145 / 14%);
}
.overview-hero::before, .overview-hero::after { display: none; }
.overview-hero .eyebrow, .overview-hero p, .overview-next small,
.overview-next .eyebrow, .overview-next p, .overview-next-arrow { color: #eeebff; }
.overview-hero h2, .overview-hero-stats strong, .overview-next strong, .overview-next h3 { color: #fff; }
.overview-hero-stats span { color: #eeebff; }
.overview-hero .overview-avatars span { border-color: #4534a0; background: #d8cbff; color: #342969; }
.overview-hero .overview-avatars span:nth-child(2n) { background: #f3b5aa; color: #5a3038; }
.overview-next { border-color: rgb(255 255 255 / 22%); background: rgb(255 255 255 / 11%); backdrop-filter: none; }
.overview-next-icon { border-color: rgb(255 255 255 / 20%); background: rgb(255 255 255 / 12%); }

.agenda-card, .task-pulse-grid, .summary-card, .entry-card,
.plan-card, .wish-card, .note-card, .calendar-card, .settings-card,
.empty-card, .member-card, .game-card {
  border: 1px solid var(--atlas-line);
  background: var(--paper);
  box-shadow: none;
}
.agenda-card { border-radius: 1.45rem; }
.agenda-row { border-color: var(--atlas-line); }
.agenda-kind { color: var(--primary-deep); background: var(--primary-soft); }
.task-pulse-grid { border-radius: 1.4rem; }
.pulse-card { border-color: var(--atlas-line); }
.pulse-card strong { color: var(--primary-deep); }
.pulse-card.danger strong { color: var(--danger); }
.summary-card, .summary-card.goal-summary,
.summary-card[data-view="wishes"], .summary-card[data-view="notes"] {
  border-color: var(--atlas-line);
  background: var(--paper);
  box-shadow: none;
}
.summary-card::after { display: none; }
.summary-card .summary-icon { border-radius: .85rem; }
.summary-card.goal-summary .summary-icon { color: var(--primary-deep); background: var(--primary-soft); }
.summary-card[data-view="wishes"] .summary-icon { color: var(--coral); background: var(--coral-soft); }
.summary-card[data-view="notes"] .summary-icon { color: var(--teal); background: var(--teal-soft); }
.summary-card strong { font-size: 1rem; }
.summary-card .mini-progress { background: var(--canvas-deep); }
.summary-card .mini-progress i, .budget-bar span { background: var(--primary); }
.summary-card em { color: var(--primary-deep); }

.home-game-card {
  border: 1px solid color-mix(in oklch, var(--primary) 26%, var(--atlas-line));
  background: linear-gradient(115deg, var(--paper), color-mix(in oklch, var(--primary-soft) 43%, var(--paper)));
  box-shadow: none;
}
.home-game-card::after { display: none; }
.home-game-top .eyebrow, .home-game-balance > span:first-child,
.home-game-balance strong, .home-game-balance > span:last-child { color: var(--primary-deep); }
.home-game-links button { border-color: var(--atlas-line); background: var(--paper); }
.home-game-links button:first-child { border-color: var(--primary); color: var(--on-primary); background: var(--primary); }
.home-game-links button:first-child:hover { color: var(--on-primary); background: var(--primary-deep); }
.home-game-progress { border-color: var(--atlas-line); background: var(--paper); }
.home-game-progress b { color: var(--primary-deep); }
.home-game-progress i.campaign-progress::after { background: var(--primary); }

/* Game and content cards */
.game-intro-icon { border-color: var(--atlas-line); color: var(--primary-deep); background: var(--primary-soft); }
.game-tabs { border-color: var(--atlas-line); background: var(--paper); }
.game-tabs button[aria-current="page"] { color: var(--on-primary); background: var(--primary); }
.game-wallet-hero {
  border-color: color-mix(in oklch, var(--primary) 28%, var(--atlas-line));
  background: linear-gradient(125deg, var(--primary-soft), color-mix(in oklch, var(--paper) 80%, var(--primary-soft)));
}
.game-wallet-hero::after { display: none; }
.game-wallet-hero .eyebrow, .game-wallet-hero strong { color: var(--primary-deep); }
.game-card { border-radius: 1.2rem; }
.game-empty { border: 0; border-radius: 1.15rem; background: var(--atlas-cream); }
.game-compact-list > div, .game-compact-list > article { border-color: var(--atlas-line); background: var(--paper); }
.coin-chip { color: var(--game-gold-ink); background: var(--game-gold-soft); }
.tasks-page .entry-card { border-inline-start: 1px solid var(--atlas-line); }
.tasks-page .task-group.is-overdue .entry-card { border-inline-start: 3px solid var(--danger); }
.tasks-page .entry-card.is-mission { border-inline-start: 3px solid var(--primary); }
.entry-main h3 { font-weight: 730; }
.kind-icon { border-radius: .85rem; }
.kind-icon.task { color: var(--primary-deep); background: var(--primary-soft); }
.plan-card, .wish-card, .note-card { border-radius: 1.25rem; }
.plan-card, .wish-card { background: var(--paper); }
.note-card { border-color: var(--atlas-line); }
.note-card.category-color-violet { background: color-mix(in oklch, var(--primary-soft) 47%, var(--paper)); }
.wish-visual { background: color-mix(in oklch, var(--coral-soft) 42%, var(--paper)); }
.settings-card { padding: 1.35rem; border-radius: 1.35rem; }
.settings-head { margin-bottom: 1.4rem; }
.settings-head h2 { font-size: 1.2rem; }
.empty-card { border-radius: 1.3rem; }

/* Dialogs: one clear surface, clean fields, and quiet supporting sections. */
.sheet {
  padding: 1.35rem 1.5rem calc(1.35rem + env(safe-area-inset-bottom));
  border: 0;
  border-radius: 1.65rem;
  background: var(--paper);
  box-shadow: 0 27px 80px rgb(31 24 68 / 24%), 0 2px 10px rgb(31 24 68 / 8%);
}
.sheet::backdrop { background: rgb(23 20 48 / 54%); backdrop-filter: blur(5px); }
.sheet-head { align-items: center; gap: .75rem; padding-bottom: 1rem; border-bottom: 1px solid var(--atlas-line); }
.sheet-head h2 { font-size: clamp(1.45rem, 4vw, 1.85rem); font-weight: 790; letter-spacing: -.045em; }
.sheet-head .eyebrow { margin-bottom: .28rem; }
.sheet-head .icon-button {
  width: 2.85rem;
  min-width: 2.85rem;
  height: 2.85rem;
  border: 0;
  border-radius: 50%;
  color: var(--muted);
  background: var(--atlas-field);
}
.field input, .field textarea, .field select,
.category-row .field input, .category-row .field select {
  min-height: 3.2rem;
  border: 1px solid var(--atlas-line);
  border-radius: .85rem;
  background: var(--paper);
}
.field input:hover, .field textarea:hover, .field select:hover { border-color: color-mix(in oklch, var(--primary) 35%, var(--atlas-line)); }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.picker-chip, .settings-time-control { border-color: var(--atlas-line); border-radius: .9rem; background: var(--atlas-field); }
.task-game-fields, .completion-object-card, .planning-checklist-editor {
  border: 0;
  border-radius: 1.15rem;
  background: var(--atlas-cream);
  box-shadow: none;
}
.task-game-mark { color: var(--primary-deep); background: var(--primary-soft); }
.task-game-fields .field input, .task-game-fields .field select { background: var(--paper); }
.game-create-details, .game-card-details { border-color: var(--atlas-line); background: var(--atlas-field); }
.category-row { border-color: var(--atlas-line); background: var(--atlas-field); }
.category-add { border-color: var(--atlas-line); }
.confirm-actions { background: linear-gradient(transparent, var(--paper) .65rem); }

@media (min-width: 42rem) {
  #create-dialog[open], #completion-dialog[open], #category-dialog[open],
  #planning-dialog[open], #schedule-dialog[open] { display: flex; flex-direction: column; }
  #create-dialog[open] > .sheet-head, #completion-dialog[open] > .sheet-head,
  #category-dialog[open] > .sheet-head, #planning-dialog[open] > .sheet-head,
  #schedule-dialog[open] > .sheet-head { flex: 0 0 auto; }
  #create-dialog[open] > .create-form {
    min-height: 0;
    max-height: calc(min(var(--app-height, 100dvh) * .76, 38rem) - 8rem);
    margin-top: .7rem;
    overflow-y: auto;
  }
  #completion-dialog[open] > .completion-form,
  #category-dialog[open] > .category-manager,
  #planning-dialog[open] > .planning-form,
  #schedule-dialog[open] > .schedule-content {
    min-height: 0;
    flex: 1 1 auto;
    max-height: calc(min(var(--app-height, 100dvh) * .76, 38rem) - 8rem);
    overflow-y: auto;
  }
  #planning-dialog[open] > .planning-form { max-height: calc(min(var(--app-height, 100dvh) * .92, 54rem) - 8rem); }
  #schedule-dialog[open] > .schedule-content { max-height: calc(min(var(--app-height, 100dvh) * .92, 56rem) - 8rem); }
  #invite-dialog[open], #confirm-dialog[open] { overflow-x: hidden; overflow-y: auto; }
}
@media (min-width: 64rem) {
  .home-game-card { grid-template-columns: minmax(0, 1fr) auto minmax(12rem, .32fr); min-height: 6.5rem; gap: 1rem 1.4rem; }
  .home-game-top { grid-column: 1; grid-row: 1; }
  .home-game-balance { grid-column: 2; grid-row: 1; }
  .home-game-links { grid-column: 3; grid-row: 1; }
  .home-game-progress { grid-column: 1 / -1; grid-row: 2; }
  .overview-summary-grid .summary-card {
    grid-template-columns: 2.35rem minmax(0, 1fr);
    grid-auto-rows: min-content;
    align-content: center;
    column-gap: .65rem;
    min-height: 7.25rem;
    padding: .85rem;
  }
  .overview-summary-grid .summary-card .summary-icon { grid-column: 1; grid-row: 1 / 3; width: 2.35rem; height: 2.35rem; }
  .overview-summary-grid .summary-card strong { grid-column: 2; margin: 0; }
  .overview-summary-grid .summary-card small { grid-column: 2; }
  .overview-summary-grid .summary-card .mini-progress,
  .overview-summary-grid .summary-card em { grid-column: 1 / -1; }
  .overview-aside .pulse-card { min-height: 4rem; }
}
@media (hover: hover) {
  .agenda-row:hover, .pulse-card:hover, .summary-card:hover, .entry-card:hover { background: color-mix(in oklch, var(--primary-soft) 16%, var(--paper)); }
  .summary-card:hover { filter: none; }
  .game-card:hover { border-color: color-mix(in oklch, var(--primary) 32%, var(--atlas-line)); }
}
@media (max-width: 41.99rem) {
  .sheet[open] { background: var(--paper); }
  .sheet-head {
    padding-bottom: .85rem;
    border-color: var(--atlas-line);
    background: color-mix(in oklch, var(--paper) 97%, transparent);
  }
  .sheet-head .page-back {
    min-width: 4.7rem;
    min-height: 2.75rem;
    height: 2.75rem;
    padding-inline: .7rem;
    border: 0;
    border-radius: .75rem;
    color: var(--primary-deep);
    background: var(--primary-soft);
  }
  .sheet::backdrop { background: var(--paper); backdrop-filter: none; }
  .sheet[open] .sheet-action { background: var(--paper); }
}
@media (prefers-reduced-motion: reduce) {
  .summary-card:hover, .wish-card:hover { transform: none; }
}
@media (forced-colors: active) {
  .overview-hero, .home-game-card, .game-wallet-hero, .summary-card, .sheet,
  .task-game-fields, .completion-object-card, .planning-checklist-editor {
    border: 1px solid CanvasText;
    background: Canvas;
    color: CanvasText;
    box-shadow: none;
  }
  .overview-hero h2, .overview-hero strong, .overview-hero p, .overview-hero .eyebrow,
  .overview-next small, .overview-next-arrow, .home-game-balance strong,
  .game-wallet-hero strong { color: CanvasText; }
  .sheet-head .icon-button, .sheet-head .page-back { border: 1px solid CanvasText; background: Canvas; color: CanvasText; }
}