/* Cards, decks and card-like surfaces. */

.card-grid {
  display: grid; gap: 1.4rem 1.25rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr));
  align-items: stretch; margin: 0; padding: 0; list-style: none;
}
.card-slot { display: flex; min-width: 0; }

.card {
  --tilted: rotate(var(--tilt, 0deg));
  position: relative; flex: 1; display: flex; flex-direction: column; gap: .55rem; min-width: 0;
  min-height: 10.5rem; padding: .85rem .9rem .75rem;
  background: var(--card); color: var(--card-text);
  border: var(--line) solid var(--card-line); border-radius: var(--radius);
  box-shadow: var(--lift) var(--lift) 0 var(--shadow);
  transform: var(--tilted);
  transition: transform .25s var(--spring), box-shadow .2s;
  touch-action: pan-y;
  user-select: none; -webkit-user-select: none;
}
/* Context colour stripe along the top edge */
.card::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: .55rem;
  background: var(--ctx); border-radius: calc(var(--radius) - 3px) calc(var(--radius) - 3px) 0 0;
}
.card.ctx-none::before { display: none; }
.card:hover, .card:focus-within { transform: rotate(0) translateY(-3px); box-shadow: calc(var(--lift) + 2px) calc(var(--lift) + 3px) 0 var(--shadow); z-index: 2; }

.card-top { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; min-height: 2.25rem; padding-top: .2rem; }
.card-top .chip { margin-inline-start: auto; }
.ctx-chip {
  display: inline-flex; align-items: center; gap: .35rem; height: 2.1rem; padding: 0 .65rem 0 .35rem;
  background: var(--ctx); color: var(--chip-ink); border: 2px solid var(--card-line); border-radius: 999px;
  font-size: .85rem; font-weight: 700; max-width: 100%; min-width: 0;
}
.ctx-chip .icon { width: 1.25rem; height: 1.25rem; padding: .1rem; }
.ctx-chip .ctx-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ctx-chip-none { padding: 0 .35rem; background: var(--card-alt); color: var(--card-text); }
.ctx-row .ctx-chip { padding: 0 .4rem; height: 2.5rem; }
.ctx-dot {
  display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--ctx); color: var(--chip-ink); border: 2px solid var(--ink);
}
.ctx-dot .icon { width: 1.15rem; height: 1.15rem; }
.star-badge { color: #E8A600; display: inline-grid; }
.star-badge .icon { fill: var(--sunny); stroke: var(--card-line); }

.card-title { font-size: 1.2rem; font-weight: 600; overflow-wrap: anywhere; }
.card-open {
  display: block; width: 100%; padding: 0; margin: 0; border: 0; background: none; cursor: pointer;
  text-align: start; font: inherit; color: inherit; line-height: 1.25;
}
/* The whole card is clickable via the title button (accessible name stays the title). */
.card-open::after { content: ''; position: absolute; inset: 0; border-radius: var(--radius); }
.card-open:focus-visible { outline: none; box-shadow: none; }
.card:has(.card-open:focus-visible) { outline: 3px solid var(--focus); outline-offset: 3px; }
.card-notes { font-size: .95rem; color: var(--card-muted); white-space: pre-line; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; }

/* Bottom row: meta on the left, actions (absolutely placed) on the right. */
.card-meta {
  display: flex; flex-wrap: wrap; align-content: center; gap: .3rem .8rem; min-height: 3rem;
  font-size: .88rem; color: var(--card-muted); margin-top: auto; padding-inline-end: 6.25rem;
}
.meta-item { display: inline-flex; align-items: center; gap: .3rem; min-width: 0; overflow-wrap: anywhere; }
.meta-item .icon { width: 1rem; height: 1rem; }
.meta-alert { color: var(--overdue-text); font-weight: 700; }
.meta-kind { font-weight: 700; color: var(--card-text); }

.card-actions { position: absolute; right: .55rem; bottom: .55rem; display: flex; align-items: center; gap: .25rem; z-index: 1; }
.card-more { width: 2.75rem; height: 2.75rem; color: var(--card-muted); }
.card .icon-btn:hover { background: var(--card-alt); }
.card-check {
  display: grid; place-items: center; width: 3rem; height: 3rem; flex: none;
  background: var(--card); color: var(--card-text); border: var(--line) solid var(--card-line); border-radius: 50%;
  cursor: pointer; box-shadow: 0 3px 0 var(--shadow);
  transition: transform .2s var(--spring), background .15s;
}
.card-check .icon { width: 1.5rem; height: 1.5rem; stroke-width: 3; opacity: .35; transition: opacity .15s, transform .2s var(--spring); }
.card-check:hover { background: var(--teal); color: var(--chip-ink); transform: scale(1.1) rotate(-8deg); }
.card-check:hover .icon, .card-check:focus-visible .icon { opacity: 1; transform: scale(1.15); }
.card-check:focus-visible { border-radius: 50%; }
.card-check:active { transform: scale(.9); }
.card-check.is-restore .icon { opacity: 1; }

.stuck-badge {
  display: inline-flex; align-items: center; gap: .35rem; align-self: flex-start;
  padding: .15rem .6rem; font-size: .85rem; font-weight: 700;
  background: var(--pink); color: var(--chip-ink); border: 2px solid var(--card-line); border-radius: 999px;
  animation: pulse 2.2s ease-in-out infinite;
}
.stuck-badge .icon { width: 1rem; height: 1rem; }
@keyframes pulse { 50% { transform: scale(1.06); } }

.card.is-done { background: var(--done-bg); }
.card.is-done .card-title { text-decoration: line-through; text-decoration-thickness: 2px; }
.card.is-done::before { opacity: .5; }
.card.list-reference { background: var(--card-alt); }
.card.list-someday { border-style: dashed; }

/* Swipe and drag states */
.card.is-swiping { transition: none; z-index: 5; }
.card[data-swipe="complete"] { background: var(--teal); }
.card[data-swipe="menu"] { background: var(--sunny); }
.card.is-dragging { opacity: .35; }
.drag-ghost {
  position: fixed; left: 0; top: 0; z-index: 85; margin: 0; pointer-events: none;
  transition: none !important; box-shadow: 12px 14px 0 rgb(0 0 0 / .3);
}
.card-slot.is-insert-before .card { box-shadow: -8px 0 0 var(--sunny), var(--lift) var(--lift) 0 var(--shadow); }
.card-slot.is-insert-after .card { box-shadow: 8px 0 0 var(--sunny), var(--lift) var(--lift) 0 var(--shadow); }
.card-grid-single .card-slot.is-insert-before .card { box-shadow: 0 -8px 0 var(--sunny); }
.card-grid-single .card-slot.is-insert-after .card { box-shadow: 0 8px 0 var(--sunny); }

/* ---------------------------------------------------------------- project decks */
.deck-grid {
  display: grid; gap: 2rem 1.5rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  list-style: none; margin: 1.5rem 0 0; padding: 0;
}
.deck-slot { display: flex; }
.deck {
  position: relative; flex: 1; display: flex; min-height: 10rem; text-decoration: none; color: var(--card-text);
  transform: rotate(var(--tilt, 0deg)); transition: transform .25s var(--spring);
}
.deck:hover, .deck:focus-visible { transform: rotate(0) translateY(-4px); }
.deck:focus-visible { outline-offset: 10px; box-shadow: none; }
.deck-layers, .deck-layers::before {
  position: absolute; inset: 0; border: var(--line) solid var(--card-line); border-radius: var(--radius);
  background: var(--card-alt);
}
.deck-layers { transform: translate(10px, 10px) rotate(3deg); }
.deck-layers::before { content: ''; transform: translate(-5px, -6px) rotate(-2deg); background: var(--violet); }
.deck:hover .deck-layers { transform: translate(14px, 12px) rotate(6deg); }
.deck-face {
  position: relative; flex: 1; display: flex; flex-direction: column; gap: .5rem; padding: 1rem 1.1rem;
  background: var(--card); border: var(--line) solid var(--card-line); border-radius: var(--radius);
  box-shadow: 4px 4px 0 var(--shadow);
}
.deck-count {
  position: absolute; top: -1rem; right: -0.75rem; display: grid; place-items: center;
  width: 2.75rem; height: 2.75rem; border-radius: 50%;
  background: var(--sunny); color: var(--chip-ink); border: var(--line) solid var(--ink);
  font-family: var(--font-display); font-weight: 700; font-size: 1.2rem;
}
.deck-title { font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; padding-inline-end: 1.25rem; overflow-wrap: anywhere; }
.deck-meta { color: var(--card-muted); font-size: .9rem; margin-top: auto; }
.deck.is-stuck .deck-face { border-color: var(--pink); }

/* ---------------------------------------------------------------- empty states */
.empty { display: flex; justify-content: center; padding: 2rem 0; }
.empty-card {
  display: flex; flex-direction: column; align-items: center; gap: .75rem; text-align: center;
  width: min(26rem, 100%); padding: 2rem 1.5rem;
  background: var(--card); color: var(--card-text); border: var(--line) solid var(--card-line); border-radius: 22px;
  box-shadow: 8px 8px 0 var(--shadow); transform: rotate(-2deg);
  animation: deal-in .6s var(--spring);
}
.empty-icon { width: 3.5rem; height: 3.5rem; color: var(--ink); padding: .65rem; background: var(--sunny); border-radius: 50%; border: var(--line) solid var(--ink); box-sizing: content-box; }
.empty-title { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; }
.empty-body { color: var(--card-muted); }
@keyframes deal-in { from { transform: translateY(40px) rotate(-14deg) scale(.8); opacity: 0; } }

/* ---------------------------------------------------------------- process mode */
.process-table { display: grid; gap: 2rem; grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); align-items: start; margin-top: 1.5rem; }
.process-card { min-height: 15rem; transform: rotate(-2deg); padding: 1.5rem 1.25rem; justify-content: center; }
.process-card::before { background: var(--sunny); }
.process-title-input {
  width: 100%; border: 0; background: transparent; color: inherit; resize: none;
  font-family: var(--font-display); font-weight: 600; font-size: 1.6rem; line-height: 1.2; padding: .25rem;
  border-radius: 8px; field-sizing: content; min-height: 4rem;
}
.process-panel {
  display: flex; flex-direction: column; gap: 1rem; padding: 1.5rem;
  background: rgb(0 0 0 / .18); border: var(--line) solid rgb(255 255 255 / .3); border-radius: 22px;
}
.process-q { font-size: clamp(1.4rem, 3vw, 1.9rem); }
.opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); gap: .75rem; }
.opt {
  display: flex; align-items: center; gap: .65rem; min-height: 3.75rem; padding: .6rem 1rem;
  background: var(--card); color: var(--card-text); border: var(--line) solid var(--ink); border-radius: var(--radius);
  box-shadow: 0 5px 0 var(--shadow); cursor: pointer; text-align: start;
  font-family: var(--font-display); font-weight: 600; font-size: 1.1rem;
  transition: transform .15s var(--spring), box-shadow .15s;
}
.opt:hover { transform: translateY(-3px) rotate(-1deg); box-shadow: 0 8px 0 var(--shadow); }
.opt:active { transform: translateY(5px); box-shadow: 0 0 0 var(--shadow); }
.opt kbd { font-size: .8rem; color: var(--card-muted); }
.opt .icon { width: 1.5rem; height: 1.5rem; }
.opt-yes { background: var(--teal); color: var(--chip-ink); }
.opt-yes kbd, .opt-danger kbd, .opt[class*="ctx-"] kbd { color: var(--chip-ink); }
.opt-danger { background: var(--pink); color: var(--chip-ink); }
.opt[class*="ctx-"] { background: var(--ctx); color: var(--chip-ink); }
.opt-back { background: transparent; color: var(--on-table); border-color: rgb(255 255 255 / .55); box-shadow: none; }
.opt-back kbd { color: var(--on-table-muted); }
.process-form { display: flex; flex-direction: column; gap: .75rem; padding: 1rem; background: var(--card); color: var(--card-text); border: var(--line) solid var(--ink); border-radius: var(--radius); }
.process-form .filter-chip { color: var(--card-text); border-color: var(--field-border); background: var(--field); }
.process-form .filter-chip[aria-pressed="true"] { color: var(--chip-ink); }
.process-form .btn { align-self: flex-start; }
.process-panel .hint { color: var(--on-table-muted); }
.process-panel > .btn-ghost { align-self: flex-start; color: var(--on-table); }

@media (max-width: 760px) {
  .process-table { grid-template-columns: 1fr; gap: 1.25rem; }
  .process-card { min-height: 9rem; }
  .process-panel { padding: 1rem; }
  .process-panel .hint { display: none; }
  .opt kbd { display: none; }
}

@media (max-width: 599px) {
  .card-grid { gap: 1rem; }
  .card { min-height: 0; transform: none; }
  .card-title { font-size: 1.1rem; }
}

@media (forced-colors: active) {
  .card::before, .deck-layers { display: none; }
  .card:has(.card-open:focus-visible) { outline-color: Highlight; }
}