.chore-card {
  background: linear-gradient(145deg, color-mix(in srgb, #e6f4df 72%, var(--bg-elev) 28%), color-mix(in srgb, var(--bg-elev) 62%, #79a85f 38%));
  border-color: color-mix(in srgb, #79a85f 34%, var(--border) 66%);
}


.chore-draft-prompt {
  display: grid;
  gap: 10px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--border) 78%);
  background: linear-gradient(145deg, color-mix(in srgb, var(--primary-soft) 58%, var(--bg-elev) 42%), var(--bg-elev));
}


.chore-draft-actions {
  gap: 8px;
}


.chore-completion-pill {
  padding: 10px 12px;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary-strong);
  font-weight: 700;
}


.chore-timer-card {
  display: grid;
  gap: 12px;
}


.chore-timer-display {
  font-size: 2.1rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}


.chore-checklist-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: start;
  min-height: 56px;
  padding: 12px;
  border: 1px solid var(--checklist-row-border, var(--border));
  border-radius: 14px;
  background: var(--checklist-row-bg, var(--bg-elev));
}


/* Checklist row colour contract. Themes define the --checklist-row-* tokens at
   their root and keep only row shape (radius, border sides, shadow) in their own
   rules; an equipped checklist cosmetic re-assigns the same tokens on its card.
   .chore-item-text is excluded from the themes' broad span rules, so no
   !important is needed here. */
.chore-checklist-item:has(input:checked) {
  background: var(--checklist-row-checked-bg, var(--checklist-row-bg, var(--bg-elev)));
  border-color: var(--checklist-row-checked-border, var(--checklist-row-border, var(--border)));
}


.chore-item-text {
  color: var(--checklist-row-text, inherit);
}


.chore-checklist-item:has(input:checked) .chore-item-text {
  color: var(--checklist-row-checked-text, var(--checklist-row-text, inherit));
}


.chore-checklist-item input {
  width: 22px;
  height: 22px;
  margin-top: 2px;
}


.actions-grid.chore-session-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
  max-width: 640px;
  box-sizing: border-box;
  margin-bottom: calc(16px + env(safe-area-inset-bottom));
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 10px;
  background: var(--bg-elev);
}

.actions-grid.chore-session-actions > button {
  min-width: 0;
  min-height: 50px;
  width: 100%;
  white-space: normal;
}


.chore-game-mode-toggle-row {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px;
  background: color-mix(in srgb, var(--bg-elev) 86%, var(--chip) 14%);
}


.chore-game-mode-toggle {
  display: inline-flex;
  gap: 8px;
}


.chore-game-mode-toggle .chip-btn {
  min-width: 64px;
}


.chore-game-mode-toggle .chip-btn.active {
  background: var(--primary-soft);
  color: var(--primary-strong);
  border-color: color-mix(in srgb, var(--primary) 36%, var(--border) 64%);
}


.chore-game-mode-start-card {
  margin-bottom: 10px;
}


.chore-game-mode-start-card .chore-game-mode-toggle {
  justify-content: flex-start;
}


.chore-mode-path-actions {
  display: grid;
  gap: 8px;
}


.chore-game-mode-start-card .primary-btn,
.chore-game-mode-start-card .chip-btn {
  min-height: 48px;
}


.chore-game-mode-status {
  border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--border) 78%);
  border-radius: 14px;
  padding: 10px;
  background: color-mix(in srgb, var(--bg-elev) 88%, var(--chip) 12%);
  display: grid;
  gap: 8px;
}


.chore-game-mode-bonuses {
  display: grid;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}


.chore-summary-grid {
  margin-top: 10px;
}


.chore-area-add-row {
  align-items: stretch;
}


.chore-item-row {
  align-items: start;
}


.chore-saved-checklists {
  margin-top: 16px;
}


.chore-saved-checklists h3 {
  margin-bottom: 2px;
}


.chore-saved-list {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}


.chore-saved-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px;
  flex-wrap: wrap;
}


.chore-saved-card strong {
  display: block;
}


.chore-saved-card span {
  color: var(--text-soft);
  font-size: 0.82rem;
}


.chore-saved-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}


#gameModeCompletionModal {
  overflow-y: auto;
  padding: 12px;
  box-sizing: border-box;
}


#gameModeCompletionModal .game-mode-completion-summary {
  margin: 0;
  overflow: hidden;
}

.chore-completion-coins {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-block: 12px;
}

.game-mode-completion-body {
  overflow-wrap: anywhere;
}
@media (min-width: 740px) {
  .actions-grid.chore-session-actions {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}


[data-theme="cozy-pastel"] .chore-card {
  background: linear-gradient(145deg, rgba(95, 158, 154, 0.14), rgba(100, 138, 114, 0.12), rgba(255, 255, 255, 0.98));
  border-color: rgba(95, 158, 154, 0.45);
}


[data-theme="cyber-minimalism"] .chore-card {
  background: linear-gradient(145deg, rgba(32, 143, 145, 0.16), rgba(24, 37, 52, 0.92));
  border-color: color-mix(in srgb, var(--cyber-teal) 56%, var(--border-primary) 44%);
}


[data-theme="cyber-minimalism"] .home-primary-grid .primary-action-card.chore-card {
  background: linear-gradient(135deg, var(--cyber-forest), var(--cyber-teal));
  color: #ffffff;
  border-color: rgba(57, 169, 120, 0.58);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.22);
}


[data-theme="cyber-minimalism"] .chore-checklist-item:has(input:checked) {
  box-shadow: 0 0 0 1px rgba(57, 169, 120, 0.2);
}


[data-theme="graphite"] .chore-card {
  background: linear-gradient(145deg, #1e2c28, #162220);
  border-color: rgba(96, 138, 108, 0.24);
}


/* ============================================================
   GRAPHITE – CHORE MODE NOTEBOOK EXPERIENCE
   ============================================================ */

[data-theme="graphite"] .chore-session-card {
  /* Warm paper surface replaces dark card */
  background: var(--graphite-paper);
  border: 1px solid rgba(178, 170, 154, 0.48);
  box-shadow: var(--graphite-paper-shadow);
  border-radius: 4px 14px 14px 4px;
  position: relative;
  /* Horizontal ruled lines */
  background-image: repeating-linear-gradient(
    to bottom,
    transparent,
    transparent calc(2.5rem - 1px),
    var(--graphite-paper-line) calc(2.5rem - 1px),
    var(--graphite-paper-line) 2.5rem
  );
  background-size: 100% 2.5rem;
}


/* Red vertical margin line */
[data-theme="graphite"] .chore-session-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 44px;
  bottom: 0;
  width: 1px;
  background: var(--graphite-paper-margin);
  pointer-events: none;
  z-index: 0;
}


/* Notebook ring binding (repeating circles on left edge) */
[data-theme="graphite"] .chore-session-card::after {
  content: "";
  position: absolute;
  left: 0;
  top: 6%;
  bottom: 6%;
  width: 10px;
  pointer-events: none;
  z-index: 1;
  background-image: radial-gradient(
    circle at center,
    transparent 0,
    transparent 2px,
    var(--graphite-paper-ring) 2px,
    var(--graphite-paper-ring) 5px,
    transparent 5px
  );
  background-size: 10px 20px;
  background-repeat: repeat-y;
  background-position: center;
}


/* Paper-tone text overrides */
[data-theme="graphite"] .chore-session-card h3,
[data-theme="graphite"] .chore-session-card p,
[data-theme="graphite"] .chore-session-card label {
  color: var(--graphite-ink);
}


[data-theme="graphite"] .chore-session-card .field-help {
  color: var(--graphite-ink-soft);
}


[data-theme="graphite"] .chore-completion-pill {
  background: rgba(60, 80, 100, 0.10);
  color: var(--graphite-ink-soft);
  border: 1px solid rgba(60, 80, 100, 0.18);
}


/* Notes textarea on paper */
[data-theme="graphite"] .chore-session-card textarea {
  background: rgba(250, 246, 238, 0.70);
  border-color: rgba(70, 90, 110, 0.22);
  color: var(--graphite-ink);
  border-radius: 6px;
}


/* Checklist actions on a dark surface below the paper content. */
[data-theme="graphite"] .chore-session-actions {
  background: rgba(27, 34, 41, 0.96);
  border-color: rgba(148, 174, 187, 0.16);
}


/* ----- Checklist items on notebook lines ----- */
[data-theme="graphite"] .chore-checklist-list {
  gap: 0;
}


[data-theme="graphite"] .chore-checklist-item {
  border-style: none none solid;
  border-width: 0 0 1px;
  border-radius: 0;
  padding: 6px 8px 6px 6px;
  min-height: 2.5rem;
  align-items: center;
  position: relative;
}


[data-theme="graphite"] .chore-checklist-item:last-child {
  border-bottom: none;
}


/* Custom notebook-style checkbox */
[data-theme="graphite"] .chore-checklist-item input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border: 1.5px solid rgba(68, 90, 110, 0.48);
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color 0.15s ease;
}


[data-theme="graphite"] .chore-checklist-item input[type="checkbox"]:checked {
  background: transparent;
  border-color: var(--graphite-check-stroke);
}


/* Completed item text treatment (colour comes from --checklist-row-checked-text) */
[data-theme="graphite"] .chore-checklist-item input[type="checkbox"]:checked ~ .chore-item-text {
  text-decoration: line-through;
  text-decoration-color: rgba(140, 198, 173, 0.60);
}


/* Already-checked items: show static drawn checkmark (no animation) */
[data-theme="graphite"] .chore-checklist-item input[type="checkbox"]:checked ~ .graphite-anim-layer .graphite-check-path {
  stroke-dashoffset: 0;
}


[data-theme="graphite"] .home-primary-grid .primary-action-card.chore-card {
  background: rgba(4, 10, 14, 0.84);
  backdrop-filter: blur(24px) saturate(1.6);
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
  border: 1px solid rgba(60, 200, 120, 0.20);
  box-shadow:
    0 24px 72px rgba(0, 0, 0, 0.82),
    0 1px 0 rgba(255, 255, 255, 0.09) inset,
    0 0 56px rgba(60, 200, 120, 0.08);
}


/* ----- Chore draft prompt ----- */
[data-theme="graphite"] .chore-draft-prompt {
  background: linear-gradient(145deg, rgba(148, 174, 187, 0.10), rgba(27, 34, 41, 0.96));
  border-color: rgba(148, 174, 187, 0.22);
}


/* ----- Chip btn: selected/active accent (urge/avoidance contexts) ----- */
[data-theme="graphite"] .chore-game-mode-toggle .chip-btn.active {
  background: rgba(148, 174, 187, 0.14);
  border-color: rgba(148, 174, 187, 0.38);
}


/* Chore mode has its own paper background – don't double-up */
[data-theme="graphite"] .chore-session-card textarea {
  background-image: none;
}


/* ── CHORE SELECTION CARDS ──────────────────────────────────── */

[data-theme="graphite"] .chore-selection-summary {
  border-left: 3px solid rgba(96, 138, 108, 0.42);
}


/* ── CHORE SESSION CARD: REINFORCE PAPER DEPTH ──────────────── */

/* More prominent shadow to emphasise the lifted page */
[data-theme="graphite"] .chore-session-card {
  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.38),
    4px 4px 8px rgba(0, 0, 0, 0.16),
    inset 0 0 0 1px rgba(178, 170, 154, 0.12);
}


[data-theme="cozy-pastel"] .home-primary-grid .primary-action-card.chore-card {
  background:
    radial-gradient(circle at 86% 12%, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0) 34%),
    linear-gradient(146deg, rgba(233, 247, 238, 0.98), rgba(205, 228, 215, 0.94));
}


[data-theme="graphite"] .chore-game-mode-bonuses {
  background: linear-gradient(145deg, #242d36, #1e2730);
  border: 1px solid rgba(148, 174, 187, 0.18);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.50);
}

[data-theme="graphite"] .gr-icon-chore      { background-image: url("../../assets/themes/graphite/icons/graphite-icon-chore-mode.svg"); }


/* Remove notebook-paper artwork from Graphite checklist card. */
[data-theme="graphite"] .chore-session-card:where(:not([data-cosmetic-skin])) {
  background: linear-gradient(170deg, #222b34 0%, #1b232c 100%) !important;
  background-image: none !important;
  border: 1px solid rgba(128, 150, 164, 0.30) !important;
  border-radius: 14px !important;
  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.28),
    0 0 0 1px rgba(148, 174, 187, 0.08) inset !important;
}


[data-theme="graphite"] .chore-session-card::before,
[data-theme="graphite"] .chore-session-card::after {
  content: none !important;
  display: none !important;
}


/* Darken Notes area in checklist flow for better readability. */
[data-theme="graphite"] .chore-session-card textarea,
[data-theme="graphite"] .chore-session-card .details-input,
[data-theme="graphite"] .chore-session-card .details-textarea {
  background: linear-gradient(180deg, rgba(24, 32, 40, 0.96), rgba(18, 25, 32, 0.96)) !important;
  border: 1px solid rgba(138, 162, 178, 0.34) !important;
  color: #d5e2ea !important;
  box-shadow:
    0 6px 14px rgba(0, 0, 0, 0.28),
    0 0 0 1px rgba(148, 174, 187, 0.06) inset !important;
}


[data-theme="graphite"] .chore-session-card textarea::placeholder,
[data-theme="graphite"] .chore-session-card .details-input::placeholder,
[data-theme="graphite"] .chore-session-card .details-textarea::placeholder {
  color: #9bb0be !important;
  opacity: 1;
}


/* ============================================================
   CHECKLIST NOTEBOOK STYLE (BOTH THEMES)
   ============================================================ */

/* Cozy Pastel: light notebook paper */
[data-theme="cozy-pastel"] .chore-session-card {
  position: relative;
}

[data-theme="cozy-pastel"] .chore-session-card:where(:not([data-cosmetic-skin])) {
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.94),
      rgba(255, 255, 255, 0.94) calc(2.5rem - 1px),
      rgba(147, 177, 200, 0.26) calc(2.5rem - 1px),
      rgba(147, 177, 200, 0.26) 2.5rem
    ) !important;
  border: 1px solid rgba(79, 111, 133, 0.34) !important;
  border-radius: 6px 14px 14px 6px !important;
  box-shadow:
    0 10px 24px rgba(51, 77, 98, 0.18),
    0 0 0 1px rgba(255, 255, 255, 0.54) inset !important;
}


[data-theme="cozy-pastel"] .chore-session-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 42px;
  bottom: 0;
  width: 1px;
  background: rgba(187, 95, 95, 0.48);
  pointer-events: none;
}


[data-theme="cozy-pastel"] .chore-session-card::after {
  content: none !important;
  display: none !important;
}


[data-theme="cozy-pastel"] .chore-checklist-list {
  gap: 0 !important;
}


[data-theme="cozy-pastel"] .chore-checklist-item:last-child {
  border-bottom: none !important;
}


/* Graphite: dark notebook paper */
[data-theme="graphite"] .chore-session-card {
  position: relative;
}

[data-theme="graphite"] .chore-session-card:where(:not([data-cosmetic-skin])) {
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(34, 44, 54, 0.95),
      rgba(34, 44, 54, 0.95) calc(2.5rem - 1px),
      rgba(92, 116, 132, 0.24) calc(2.5rem - 1px),
      rgba(92, 116, 132, 0.24) 2.5rem
    ) !important;
  border: 1px solid rgba(128, 150, 164, 0.34) !important;
  border-radius: 6px 14px 14px 6px !important;
  box-shadow:
    0 12px 26px rgba(0, 0, 0, 0.30),
    0 0 0 1px rgba(148, 174, 187, 0.10) inset !important;
}


[data-theme="graphite"] .chore-session-card::before,
[data-theme="graphite"] .chore-session-card::after {
  content: "" !important;
  display: block !important;
}


[data-theme="graphite"] .chore-session-card::before {
  top: 0;
  left: 42px;
  bottom: 0;
  width: 1px;
  background: rgba(167, 95, 95, 0.44);
  pointer-events: none;
}


[data-theme="graphite"] .chore-session-card::after {
  content: none !important;
  display: none !important;
}


[data-theme="graphite"] .chore-checklist-list {
  gap: 0 !important;
}


[data-theme="graphite"] .chore-checklist-item:last-child {
  border-bottom: none !important;
}


/* Active chore-mode timer gets a cyan Pulse treatment; the mode already feels energized.
   Skipped inside a cosmetic-skinned card so the equipped skin owns its text colour. */
[data-theme="pulse"] #choreSessionTimer:where(:not([data-cosmetic-skin] *)) {
  color: var(--pulse-cyan) !important;
}


/* ============================================================
   CHECKLIST CARD COSMETIC LAYER (chore.checklistCard)
   Precedence: shared component -> active theme -> equipped cosmetic.
   While a cosmetic is equipped, cosmetics.js marks the card with
   [data-cosmetic-skin] and sets --cosmetic-* tokens on it (no inline styles).
   The host rule below paints the surface from those tokens; theme surface
   rules skip a skinned card. The card re-assigns the shared --checklist-row-* tokens, so
   rows re-rendered later pick them up by inheritance without out-specifying the
   theme. The themes' broad text rules skip [data-cosmetic-skin] descendants,
   so card chrome (heading, labels, help text, completion pill) needs no
   !important. Controls,
   buttons, and the notes field keep their theme styling. Unequipping removes
   the marker, so nothing here applies under Default.
   ============================================================ */
#screen-chore .chore-session-card[data-cosmetic-skin] {
  background: var(--cosmetic-card-background);
  border: var(--cosmetic-card-border);
  border-radius: var(--cosmetic-card-radius);
  box-shadow: var(--cosmetic-card-shadow);
  color: var(--cosmetic-card-text);
  --checklist-row-text: var(--cosmetic-card-text);
  --checklist-row-checked-text: var(--cosmetic-card-text);
  --checklist-row-bg: color-mix(in srgb, var(--cosmetic-card-text) 10%, transparent);
  --checklist-row-border: color-mix(in srgb, var(--cosmetic-card-text) 24%, transparent);
  --checklist-row-checked-bg: color-mix(in srgb, var(--cosmetic-accent, var(--cosmetic-card-text)) 24%, transparent);
  --checklist-row-checked-border: color-mix(in srgb, var(--cosmetic-card-text) 24%, transparent);
}

#screen-chore .chore-session-card[data-cosmetic-skin][data-cosmetic-backdrop] {
  backdrop-filter: var(--cosmetic-card-backdrop-filter);
}

#screen-chore .chore-session-card[data-cosmetic-skin] :is(h3, label, .graphite-anim-layer, .chore-completion-pill, .chore-completion-pill span) {
  color: var(--cosmetic-card-text);
}

#screen-chore .chore-session-card[data-cosmetic-skin] .field-help {
  color: var(--cosmetic-card-text-soft, var(--cosmetic-card-text));
}

#screen-chore .chore-session-card[data-cosmetic-skin] .chore-completion-pill {
  background: color-mix(in srgb, var(--cosmetic-accent, var(--cosmetic-card-text)) 20%, transparent);
  border-color: color-mix(in srgb, var(--cosmetic-accent, var(--cosmetic-card-text)) 40%, transparent);
}