/*
 * theme.css — WRITTEN BY THE PLATFORM. Do not edit.
 *
 * Palette: Your colours (custom)
 * Source colours: #180c07 #3b2e27 #fbf5ee #a8532f #a45734 #ffffff
 *
 * Every value below is either one of those five or derived from them, and each
 * one is contrast-corrected against this palette's own background. Consume
 * them with var(--token); never write a colour value in app code.
 */

:root {
  --canvas: #fbf5ee;
  --surface: #fdfbf7;
  --surface-2: #f0e9e2;
  --border: #dbd4ce;
  --border-strong: #b7afa9;
  --ink: #3b2e27;
  --muted: #736b64;
  --accent: #a8532f;
  --accent-hover: #8f4728;
  --accent-ink: #ffffff;
  --accent-text: #a45734;
  --accent-strong: #9b4c2b;
  --accent-soft: #efded3;
  --accent-border: #d6ac98;
  --success: #15803d;
  --success-ink: #ffffff;
  --success-soft: #dfe7d9;
  --success-strong: #137638;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #f2e2d3;
  --warning-strong: #a64c08;
  --danger: #b91c1c;
  --danger-ink: #ffffff;
  --danger-soft: #f3dbd5;
  --danger-strong: #b91c1c;}

/* ====================================================================
 * app.css — Hearth's own stylesheet.
 *
 * Character: warm and paper-like. Softer, rounder corners than the system
 * default, a touch more breathing room, and a quiet custom task-list built
 * for a checklist rather than a data table. Colour still comes only from
 * theme.css tokens — nothing here is a literal.
 * ==================================================================== */

:root {
  /* Softer corners throughout — cards read like index cards, not app chrome. */
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 22px;

  /* A little more air between blocks. */
  --s-6: 26px;
  --s-7: 34px;

  /* Slightly calmer motion. */
  --dur-2: 180ms;
}

/* ---- Hero band -------------------------------------------------------- */

.hero {
  position: relative;
  overflow: hidden;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 88% -10%, color-mix(in srgb, var(--primary-ink) 18%, transparent), transparent 60%);
  pointer-events: none;
}
.hero > * {
  position: relative;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--s-6);
}
.hero-copy {
  min-width: 0;
}
.hero-eyebrow {
  font-size: var(--t-xs);
  font-weight: var(--fw-semi);
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
  opacity: 0.8;
  margin-bottom: var(--s-2);
}
.hero-copy h1 {
  max-width: 32ch;
}
.hero-ghost {
  border-color: color-mix(in srgb, currentColor 45%, transparent);
  color: currentColor;
}
.hero-ghost:hover {
  background: color-mix(in srgb, currentColor 15%, transparent);
  border-color: currentColor;
}

/* Completion ring — a plain conic-gradient in the hero's own text colour, so
   it needs no image and no extra token: it just reads off currentColor. */
.hero-ring-wrap {
  justify-self: end;
}
.hero-ring {
  width: 108px;
  height: 108px;
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.hero-ring-inner {
  width: 78px;
  height: 78px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  box-shadow: var(--shadow);
}
.hero-ring-value {
  font-size: var(--t-xl);
  font-weight: var(--fw-bold, var(--fw-semi));
  line-height: 1;
}
.hero-ring-label {
  font-size: var(--t-xs);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
}

@media (max-width: 640px) {
  .hero-grid {
    grid-template-columns: 1fr;
  }
  .hero-ring-wrap {
    justify-self: center;
  }
}

/* ---- Category colour dot ----------------------------------------------- */

.cat-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: 0 0 auto;
}

/* ---- Task list ----------------------------------------------------------
 * A checklist, not a table: each row is its own quiet card, spaced apart
 * like paper slips rather than ruled into a grid.
 * ------------------------------------------------------------------------ */

.task-list {
  display: flex;
  flex-direction: column;
  padding: 0 var(--s-4) var(--s-4);
}
.task-list > * + * {
  margin-top: var(--s-2);
}

.task-row {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  transition: border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.task-row:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow);
}
.task-row.is-done {
  background: var(--canvas);
}
.task-row.is-done .task-title {
  color: var(--muted);
  text-decoration: line-through;
  text-decoration-color: var(--border-strong);
}

.task-check {
  padding-top: 2px;
  margin: 0;
}

.task-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.task-main > * + * {
  margin-top: var(--s-1);
}

.task-title {
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  word-break: break-word;
}

.task-meta {
  flex-wrap: wrap;
  row-gap: var(--s-1);
}
.task-meta:empty {
  display: none;
}

.row-actions {
  flex: 0 0 auto;
  display: flex;
  gap: var(--s-1);
  opacity: 0.55;
  transition: opacity var(--dur-1) var(--ease);
}
.task-row:hover .row-actions,
.row-actions:focus-within {
  opacity: 1;
}

/* ---- Filter bar (view tabs + search) inside the task list card --------
 * The tab strip carries its own top/bottom padding so it can stand alone
 * elsewhere; nested here in a card-head beside the fixed-height search
 * field, that padding stacks with the head's own and pushes the tab labels
 * visibly lower than the search box next to them. Cancel the tabs' own
 * padding and centre both against each other instead of hanging from the
 * top of the row.
 * NOTE: use padding here, never margin — .card-flush > .card-head { margin:
 * 0 } in the frozen stylesheet is more specific than a single class and
 * silently wins over any margin set here, which is why an earlier attempt
 * with margin-top had no visible effect. */
/* The task-list card itself, sitting right under the stat tiles — pull it
 * further down from them so the whole card (not just the tabs inside it)
 * reads as its own section instead of crowding the stats above. */
.task-card {
  margin-top: var(--s-8);
}

.filter-bar {
  align-items: center;
  padding-top: var(--s-7);
}
.filter-bar .tabs {
  margin: calc(var(--s-3) * -1) 0;
  border-bottom: none;
}

@media (max-width: 640px) {
  .row-actions {
    opacity: 1;
  }

  /* Let the tab strip keep its own horizontal scroll and give the search
     box the full width beneath it, instead of both fighting for one row. */
  .filter-bar {
    flex-wrap: wrap;
    align-items: flex-start;
  }
  .filter-bar .tabs {
    margin: 0;
  }
  .filter-bar .input.max-w-xs {
    max-width: 100%;
    flex: 1 1 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .task-row {
    transition: none;
  }
}