/* All component styles live in the `components` cascade layer (order declared
   in tokens.css: tokens < themes < components < utilities). The only exception
   is the Coloris third-party overrides at the very end of this file, which stay
   unlayered so they keep beating Coloris's own unlayered CSS. */
@layer components {

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--font-family);
  font-size: var(--font-size-body);
  color: var(--color-text);
  background: var(--color-canvas);
  /* Sticky footer: full-height flex column so .site-footer (margin-top:auto)
     sits at the viewport bottom on short pages, and flows below when the
     content is taller than the window. */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}
/* Sticky footer: the <main> region grows to fill the leftover height, so the
   footer is pushed to the bottom of the window on short pages and flows below
   when content is taller. (Belt-and-suspenders with .site-footer margin-top.) */
main { flex: 1 0 auto; }

/* ---- Container ------------------------------------------------------------ */
/* One width for everything: navbar, toolbar, sheet, and footer all cap at
   912px (close to the printed sheet's logical width) and stay centered, so
   every band of the page lines up. */
.container {
  width: 100%; max-width: 912px; margin-left: auto; margin-right: auto;
  padding-left: var(--s-5); padding-right: var(--s-5);   /* horizontal gutter */
}

/* ---- Navbar (site row: brand + About/FAQ) --------------------------------- */
.navbar { background: var(--color-surface); border-bottom: 1px solid var(--color-border); }
.navbar__content {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4); padding-block: var(--s-3);
}
.navbar__brand {
  display: inline-flex; align-items: center; gap: var(--s-3);
  text-decoration: none; color: var(--color-text);
  font-family: var(--font-family-display); font-weight: var(--fw-medium); font-size: var(--fs-lg);
}
.navbar__brand img { display: block; }
.navbar__links { display: flex; align-items: center; gap: var(--s-2); }
/* Nav links are text, not buttons — they navigate/open info, never act on data. */
.navbar__link {
  border: none; background: transparent; cursor: pointer; text-decoration: none;
  padding: var(--s-2) var(--s-3); border-radius: var(--radius-control);
  font-family: var(--font-family); font-weight: var(--fw-medium); font-size: var(--fs-md);
  color: var(--color-text-soft);
  transition: color var(--motion-fast) var(--motion-ease),
              background var(--motion-fast) var(--motion-ease);
}
.navbar__link:hover { color: var(--color-text); background: var(--color-canvas); }
@media (max-width: 575.98px) {
  .navbar__brand span { display: none; }   /* logo only on small phones */
}

/* ---- Topbar -------------------------------------------------------------- */
/* Desktop: sticks to the top of the window once you scroll down to it (the
   navbar above scrolls away). On mobile this box is dissolved and the toolbar
   becomes a fixed bottom bar instead (see the media query below). */
.topbar {
  position: sticky; top: 0; z-index: var(--z-sticky);
  background: var(--color-surface);
  border-bottom: var(--border-width) solid var(--color-border);
}
.topbar__content {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-2);
  padding-block: var(--s-5);
}
.sheet-title {
  /* Hugs its text (field-sizing) so the trailing pencil sits right after the
     title; degrades to a sensible auto width where field-sizing isn't supported. */
  field-sizing: content;
  min-width: 4ch; max-width: 100%;
  border: none; border-radius: var(--radius-control); background: transparent;
  font-family: var(--font-family-display);
  font-size: var(--font-size-title); font-weight: var(--fw-medium); color: var(--color-text);
  text-align: center; line-height: 1.2;
}
/* Editable sheet title: input + trailing pencil. Highlights on hover to signal
   it's editable; the wrapping <label> makes the whole thing (incl. pencil) focus
   the input on click. */
.sheet-title {
  display: inline-flex; align-items: center; gap: var(--s-2);
  max-width: 100%; cursor: text;
  padding: var(--s-1) var(--s-3); border-radius: var(--radius-control);
}
.sheet-title__edit {
  flex: none; display: inline-flex; color: var(--color-text-soft);
  transition: color var(--motion-fast) var(--motion-ease);
}
.sheet-title__edit .icon { width: 1.1rem; height: 1.1rem; }
.sheet-title:hover .sheet-title__edit { color: var(--color-primary); }

/* The action buttons. order:1 floats them to the right of the title on desktop
   (the title comes after them in source so the toolbar can stack on top on mobile). */
.topbar__actions { display: flex; align-items: center; gap: var(--s-4); order: 1; }

/* Phones & tablets: the whole toolbar becomes a fixed bottom nav with two rows —
   the "Add new section" pill floats on top (centered), the utility icons sit
   below. The .topbar box is dissolved (display:contents) so .topbar__content can
   be the fixed, edge-to-edge bar. Body padding-bottom reserves space for both
   rows so the bar never overlaps the footer or content. */
@media (max-width: 991.98px) {
  .topbar { display: contents; }
  .topbar__content {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-sticky);
    max-width: none; flex-direction: column; align-items: center; gap: var(--s-4);
    padding: var(--s-4) var(--s-3);
    background: var(--color-surface);
    border-top: var(--border-width) solid var(--color-border);
  }
  #add-section { order: 0; align-self: center; }   /* floats above the icons, centered */
  .topbar__actions {
    order: 1; width: 100%;
    justify-content: space-around; gap: var(--s-1);
  }
  /* Reserve room for the two-row bottom bar (+ iOS home-indicator inset). */
  body { padding-bottom: calc(128px + env(safe-area-inset-bottom)); }
}

/* The hidden attribute must always win — author display rules (e.g. .btn's
   inline-flex below) otherwise override the browser's [hidden] { display:none }. */
[hidden] { display: none !important; }

/* ---- Focus + inputs --------------------------------------------------------
   ONE focus treatment everywhere: brand-primary (--color-focus).
   TWO input patterns, nothing else:
   1. INLINE inputs (sheet title, section title, row label) — borderless,
      transparent, edit-in-place. They take --radius-control and rely on this
      global ring when focused.
   2. FIELD inputs (email, color, textarea, icon search) — bordered boxes
      (--border-width / --color-border). On focus the border itself turns
      --color-focus (outline suppressed in their own rules). */
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* ---- Buttons -------------------------------------------------------------
   EXACTLY THREE button styles. Pick by intent, not by looks:

   1. SECONDARY  `.btn`            — the default. Neutral outlined pill for
      everything that isn't the main action: Cancel, Manage billing, sign-in
      options, toolbar icon buttons.
   2. PRIMARY    `.btn .btn--primary` — filled brand pill. ONE per surface:
      the modal confirm, "Send magic link", Upgrade. If two buttons sit side
      by side, only the one we want clicked is primary.
   3. GHOST      `.btn .btn--ghost`   — dashed "create" affordance for
      additive actions: Add section, Add a task, Paste a list. Inherits the
      section's theme color inside a section group; brand color elsewhere.

   `.btn--danger` is not a fourth style: it is primary's destructive color
   twin, used ONLY as the confirm button of delete dialogs.
   `.btn--icon` is a size modifier (44px circle), not a style.
   ------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4em;
  border: var(--border-width) solid var(--color-border); background: var(--color-surface);
  border-radius: var(--r-pill); padding: 9px 18px;
  font-family: var(--font-family); font-weight: var(--fw-medium); font-size: 1rem;
  color: var(--color-text); cursor: pointer; text-decoration: none;
  transition: transform var(--motion-fast) var(--motion-ease),
              box-shadow var(--motion-fast) var(--motion-ease),
              background var(--motion-fast) var(--motion-ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(1px); }

.btn--primary {
  background: var(--color-primary); color: var(--color-on-emphasis); border-color: transparent;
  box-shadow: 0 4px 0 var(--color-primary-strong);
}
.btn--primary:active { box-shadow: 0 1px 0 var(--color-primary-strong); }

.btn--danger {
  background: var(--color-danger); color: var(--color-on-emphasis); border-color: transparent;
  box-shadow: 0 4px 0 var(--color-danger-strong);
}
.btn--danger:active { box-shadow: 0 1px 0 var(--color-danger-strong); }

/* Ghost: dashed outline in --ghost-color, accent text, tint fill on hover.
   Defaults to the brand; section groups re-point it at their theme below. */
.btn--ghost {
  --ghost-color: var(--color-primary);
  --ghost-accent: var(--color-primary-strong);
  --ghost-tint: color-mix(in oklab, var(--ghost-color) 15%, white);
  border-style: dashed; border-color: var(--ghost-color);
  color: var(--ghost-accent); font-size: .95rem;
}
.btn--ghost:hover { background: var(--ghost-tint); }

/* Square dimensions + pill radius => a true circle. flex:none keeps the 44px
   touch target intact when the topbar gets tight on small screens. */
.btn--icon { width: 44px; height: 44px; padding: 0; flex: none; }
.btn--icon .icon { font-size: 1.25rem; }

/* ---- Tooltips (icon-only controls) -----------------------------------------
   Pure CSS, sourced from aria-label so the visible hint and the screen-reader
   name are always the same string. Applies to the toolbar circles and the
   section/row controls (move arrows, edit, delete, image picker).
   Hover-capable devices only (a touch tap would leave the tooltip stuck open).
   Appears after a short delay; suppressed on disabled controls. */
@media (hover: hover) {
  .topbar__actions .btn--icon,
  .section__move-btn, .section__edit, .section__delete,
  .row__move-btn, .row__delete, .row__icon { position: relative; }

  /* The hovered control (and therefore its tooltip) floats above everything —
     without this, later rows/sections paint over the bubble. */
  .topbar__actions .btn--icon:hover, .topbar__actions .btn--icon:focus-visible,
  .section__move-btn:hover, .section__move-btn:focus-visible,
  .section__edit:hover, .section__edit:focus-visible,
  .section__delete:hover, .section__delete:focus-visible,
  .row__move-btn:hover, .row__move-btn:focus-visible,
  .row__delete:hover, .row__delete:focus-visible,
  .row__icon:hover, .row__icon:focus-visible { z-index: var(--z-overlay); }

  .topbar__actions .btn--icon::after,
  .section__move-btn::after, .section__edit::after, .section__delete::after,
  .row__move-btn::after, .row__delete::after, .row__icon::after {
    content: attr(aria-label);
    position: absolute; top: calc(100% + 9px); left: 50%;
    transform: translateX(-50%) translateY(-2px);
    background: var(--color-primary); color: var(--color-on-emphasis);
    padding: 5px 10px; border-radius: var(--r-sm);
    font-family: var(--font-family); font-size: var(--fs-sm); font-weight: var(--fw-medium);
    line-height: 1.3; white-space: nowrap;
    opacity: 0; pointer-events: none; z-index: var(--z-overlay);
    transition: opacity var(--motion-fast) var(--motion-ease),
                transform var(--motion-fast) var(--motion-ease);
  }
  /* little arrow: apex just off the control's edge, base tucked under the
     bubble so the two read as one anchored shape */
  .topbar__actions .btn--icon::before,
  .section__move-btn::before, .section__edit::before, .section__delete::before,
  .row__move-btn::before, .row__delete::before, .row__icon::before {
    content: ""; position: absolute; top: 100%; left: 50%;
    transform: translateX(-50%) translateY(-2px);
    border: 5px solid transparent; border-bottom-color: var(--color-primary);
    opacity: 0; pointer-events: none; z-index: var(--z-overlay);
    transition: opacity var(--motion-fast) var(--motion-ease),
                transform var(--motion-fast) var(--motion-ease);
  }

  .topbar__actions .btn--icon:hover:not(:disabled)::after, .topbar__actions .btn--icon:focus-visible::after,
  .section__move-btn:hover:not(:disabled)::after, .section__move-btn:focus-visible::after,
  .section__edit:hover::after, .section__edit:focus-visible::after,
  .section__delete:hover::after, .section__delete:focus-visible::after,
  .row__move-btn:hover:not(:disabled)::after, .row__move-btn:focus-visible::after,
  .row__delete:hover::after, .row__delete:focus-visible::after,
  .row__icon:hover::after, .row__icon:focus-visible::after,
  .topbar__actions .btn--icon:hover:not(:disabled)::before, .topbar__actions .btn--icon:focus-visible::before,
  .section__move-btn:hover:not(:disabled)::before, .section__move-btn:focus-visible::before,
  .section__edit:hover::before, .section__edit:focus-visible::before,
  .section__delete:hover::before, .section__delete:focus-visible::before,
  .row__move-btn:hover:not(:disabled)::before, .row__move-btn:focus-visible::before,
  .row__delete:hover::before, .row__delete:focus-visible::before,
  .row__icon:hover::before, .row__icon:focus-visible::before {
    opacity: 1; transform: translateX(-50%) translateY(0);
    transition-delay: 350ms;   /* don't flicker on pass-through */
  }
}

/* ---- Icons (Solar Linear via assets/js/icons.js, inline SVG) -------------- */
/* 1em sizing means existing font-size rules control icon size; currentColor
   means existing color rules control icon color. */
.icon { width: 1.2rem; height: 1.2rem; display: inline-block; vertical-align: -0.125em; flex: none; }
.section__delete .icon, .row__delete .icon, .panel-close .icon { font-size: 1.1rem; }
.section__edit .icon { font-size: 1.05rem; }
/* Hover-grow lives on the inner icon, NOT the button: a transform on the
   button creates a stacking context that traps its tooltip beneath later
   rows/sections, and shifts the tooltip's anchor while it scales. */
.section__edit .icon, .section__delete .icon, .section__move-btn .icon,
.row__delete .icon, .row__move-btn .icon {
  transition: transform var(--motion-fast) var(--motion-ease),
              opacity var(--motion-fast) var(--motion-ease);
}
/* Resting dimness ALSO lives on the icon — a dimmed button would cap its
   tooltip's opacity. */
.section__edit .icon, .section__delete .icon, .section__move-btn .icon { opacity: .7; }
.row__delete .icon, .row__move-btn .icon { opacity: .45; }
.section__edit:hover .icon, .section__edit:focus-visible .icon { transform: scale(1.1); }
.section__delete:hover .icon, .section__delete:focus-visible .icon,
.section__move-btn:hover:not(:disabled) .icon, .section__move-btn:focus-visible .icon,
.row__delete:hover .icon,
.row__move-btn:hover:not(:disabled) .icon { transform: scale(1.2); }
.icon--question, .icon--checklist {
  width: 2rem; height: 2rem; color: var(--color-primary);
}

/* ---- Sheet canvas -------------------------------------------------------- */
.sheet {
  /* Uses .container (responsive max-width + centering). Vertical padding here;
     the right padding is a wider gutter for the row/section delete buttons that
     float at right:-36px, so they never clip at the container edge. */
  padding-top: var(--s-6); padding-bottom: var(--s-6);
  display: flex; flex-direction: column;
  font-family: var(--font-family);
}

/* "Add new section" sits ABOVE the sections: a plain primary-colored ghost
   pill (the .btn--ghost default), matching the "Add a task" buttons. */
.sheet-header { padding-top: var(--s-6); text-align: center; }


/* One section = a card + its own "add a chore" button, grouped tightly.
   --sec-bg is the base color (a preset token via [data-theme], or a custom hex
   set inline by render.js). --sec-tint and --sec-accent are DERIVED from it so
   arbitrary picker colors work automatically. */
.section-group {
  display: flex; flex-direction: column; gap: var(--space-card-gap);
  margin-bottom: var(--space-section-gap);
  --sec-tint: color-mix(in oklab, var(--sec-bg, var(--color-primary)) 15%, white);
  --sec-accent: color-mix(in oklab, var(--sec-bg, var(--color-primary)) 68%, black);
}
.section-group:last-child { margin-bottom: 0; }
.section-group[data-theme="sunshine"] { --sec-bg: var(--theme-sunshine-bg); }
.section-group[data-theme="ocean"]    { --sec-bg: var(--theme-ocean-bg); }
.section-group[data-theme="lavender"] { --sec-bg: var(--theme-lavender-bg); }

/* Ghost buttons inside a section group take the section's theme color. */
.section-group .btn--ghost {
  --ghost-color: var(--sec-bg);
  --ghost-accent: var(--sec-accent);
  --ghost-tint: var(--sec-tint);
}

/* Section = one rounded card. overflow stays visible so the row delete button
   can sit in the right margin; corners are rounded on the header + last row. */
.section {
  display: flex; flex-direction: column;
  background: var(--sec-tint);
  border: var(--border-width) solid var(--sec-bg);
  border-radius: var(--radius-card-outer);
}
/* round the header fully when the card has no rows yet */
.section:has(.section__rows:empty) .section__header { border-radius: var(--radius-card); }

/* Header = full-width colored bar at the top of the card. */
.section__header {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  padding: 13px 20px; cursor: pointer; background: var(--sec-bg);
  border-radius: var(--radius-card) var(--radius-card) 0 0;
}
.section__decor { display: inline-flex; align-items: center; justify-content: center; font-size: 34px; line-height: 1; flex-shrink: 0; }
.section__decor:empty { display: none; }
.section__decor img, .section__decor svg { width: 40px; height: 40px; }

.section__header-title {
  flex: 1 1 auto; field-sizing: content; min-width: 4ch; max-width: 100%;
  border: none; border-radius: var(--radius-control); background: transparent;
  color: var(--color-on-emphasis);   /* white title on the colored bar */
  font-family: var(--font-family-display);
  font-weight: var(--fw-medium); letter-spacing: 0.02em;
  font-size: 1.75rem; text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.18);
}
/* Black title option (per-section setting). Drop the white-on-color shadow,
   which only muddies dark text. */
.section__header-title--black { color: var(--color-text); text-shadow: none; }

/* Section tools (reorder / edit / delete) sit in one bounding toolbar pinned to
   the right of the header bar. A translucent-white pill gives them contrast
   against the colored bar and reads as a single control cluster. */
/* Section tools (reorder / edit / delete) in one bounding toolbar pinned to the
   right of the header bar; a translucent-white pill gives contrast on the
   colored bar and reads as a single control cluster. */
.section__tools {
  flex-shrink: 0; margin-left: auto;
  display: inline-flex; align-items: center; gap: var(--s-2);   /* 8px between tools */
  padding: var(--s-2) var(--s-3); border-radius: var(--r-pill);
  background: color-mix(in oklab, white 50%, transparent);
}

/* Mobile: scale the section + row content down toward the utility-icon scale so
   the editor reads as a compact mobile view. The sheet title shrinks too, a step
   larger than the section text. */
@media (max-width: 991.98px) {
  .sheet-title { font-size: 1.4rem; }            /* sheet title: a touch larger than section text */
  .section__header-title { font-size: 1.2rem; }  /* section titles */
  .section__decor { font-size: 24px; }
  .section__decor img, .section__decor svg { width: 28px; height: 28px; }
  .row__icon { font-size: 24px; }
  .row__icon img, .row__icon svg { width: 28px; height: 28px; }
  .row__label { font-size: 1rem; }               /* row/task text */
  .row__marker { font-size: 1.25rem; }
  .row__marker .icon { width: 1.5rem; height: 1.5rem; }
}

/* Section tools (reorder / edit / delete). Black at rest; trash tints red on
   hover for destructive intent. */
.section__delete {
  flex-shrink: 0; background: none; border: none; cursor: pointer;
  font-size: var(--fs-md); color: var(--color-text);
  transition: opacity var(--motion-fast) var(--motion-ease),
              transform var(--motion-fast) var(--motion-ease),
              color var(--motion-fast) var(--motion-ease);
}
.section__delete:hover { color: var(--color-danger); }
.section__delete:hover .icon, .section__delete:focus-visible .icon { opacity: 1; }

/* Reorder arrows: an up/down pair side by side, left of the edit pencil. */
.section__move { display: inline-flex; align-items: center; gap: var(--s-1); flex-shrink: 0; padding:0 6px; }
.section__move-btn {
  display: flex; padding: 0; background: none; border: none; cursor: pointer;
  font-size: 0.85rem; line-height: 1; color: var(--color-text);
  transition: opacity var(--motion-fast) var(--motion-ease),
              transform var(--motion-fast) var(--motion-ease);
}
.section__move-btn:hover:not(:disabled) .icon, .section__move-btn:focus-visible .icon { opacity: 1; }
.section__move-btn:disabled { cursor: default; }
.section__move-btn:disabled .icon { opacity: .3; }

.section__edit {
  flex-shrink: 0; background: none; border: none; cursor: pointer;
  font-size: var(--fs-md); color: var(--color-text);
  transition: opacity var(--motion-fast) var(--motion-ease),
              transform var(--motion-fast) var(--motion-ease);
}
.section__edit:hover .icon, .section__edit:focus-visible .icon { opacity: 1; }

/* Rows = white, separated by a hairline in the theme color. No vertical dividers. */
.section__rows { background: transparent; }
.row {
  position: relative;
  display: grid; grid-template-columns: 60px 1fr 48px 42px 28px; align-items: center;
  gap: 14px; min-height: 64px; padding: 10px 20px;
  background: var(--color-surface); border-bottom: 1px solid var(--sec-bg);
}
.row:last-child { border-bottom: none; border-radius: 0 0 var(--radius-card) var(--radius-card); }

/* Section with icons hidden: drop the icon column so text starts at the left. */
.section--no-icons .row { grid-template-columns: 1fr 48px 42px 28px; }
/* Section with header hidden: round the first row's top to match the card. */
.section--no-header .section__rows .row:first-child { border-radius: var(--radius-card) var(--radius-card) 0 0; }

/* Edit + delete that float above the card when the header is hidden. */
.section__actions-float {
  display: flex; justify-content: flex-end; align-items: center; gap: var(--s-3);
}
.section__actions-float .section__edit,
.section__actions-float .section__delete {
  position: static; right: auto; top: auto; bottom: auto; width: auto;
}
.row__icon {
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  background: none; border: none; font-size: 32px; line-height: 1;
}
.row__icon img, .row__icon svg { width: 40px; height: 40px; }
.row__label {
  width: 100%; min-width: 0;   /* fill the 1fr grid cell instead of the field's default width */
  border: none; border-radius: var(--radius-control); background: transparent; color: var(--color-text);
  letter-spacing: 0.02em;
  font-family: var(--font-family); font-size: 1.5rem; font-weight: var(--fw-regular);
  /* textarea: wrap long task text, auto-grow, no manual resize handle. */
  resize: none; overflow: hidden; field-sizing: content;
  line-height: 1.4; white-space: pre-wrap; overflow-wrap: anywhere;
}
/* static text version on the printable sheet keeps the same wrapping */
.preview-sheet .row__label { white-space: pre-wrap; overflow-wrap: anywhere; }
/* Static row marker (star / checkbox / circle) — Solar Linear outline icons
   are stroked with no fill, so coloring them in the theme color gives the
   "empty shape to fill in" look directly. */
.row__marker {
  display: flex; align-items: center; justify-content: center; font-size: 1.7rem;
  color: var(--sec-bg);
}
.row__marker .icon { width: 2.2rem; height: 2.2rem; }

/* Row reorder arrows: same quiet treatment as the row delete — faint until
   the row is hovered, theme accent on direct hover. */
.row__move { display: flex; align-items: center; justify-content: center; gap: 5px; }
.row__move-btn {
  display: flex; padding: 0; background: none; border: none; cursor: pointer;
  font-size: 1rem; line-height: 1; color: var(--color-text);
  transition: opacity var(--motion-fast) var(--motion-ease),
              transform var(--motion-fast) var(--motion-ease);
}
.row:hover .row__move-btn:not(:disabled) .icon, .row__move-btn:focus-visible .icon { opacity: .75; }
.row__move-btn:hover:not(:disabled) { color: var(--color-text); }
.row__move-btn:hover:not(:disabled) .icon { opacity: 1; }
.row__move-btn:disabled { cursor: default; }
.row__move-btn:disabled .icon { opacity: .15; }

/* Row delete sits in its own column at the right end of the row, inside the card. */
.row__delete {
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; color: var(--color-text); cursor: pointer;
  font-size: 1.15rem;
  transition: opacity var(--motion-fast) var(--motion-ease),
                          transform var(--motion-fast) var(--motion-ease);
}
.row:hover .row__delete .icon, .row__delete:focus-visible .icon { opacity: .75; }
.row__delete:hover { color: var(--color-danger); }
.row__delete:hover .icon { opacity: 1; }

/* Mobile editor rows: the task title gets cramped beside the icon + controls,
   so drop it onto its own full-width line below them. Flex-wrap puts the icon,
   marker, and controls on the first line (controls pushed right) and the label
   wraps under, filling the row. Scoped to #sheet (the editor) ONLY — the
   preview/PDF sheet is a class-only `.sheet`, so it keeps its fixed single-row
   grid even at a phone-width viewport, and the PDF capture stays correct. */
@media (max-width: 575.98px) {
  #sheet .row { display: flex; flex-wrap: wrap; align-items: center; }
  #sheet .row__icon { order: 1; }
  #sheet .row__marker { order: 2; margin-left: auto; }
  #sheet .row__move { order: 3; }
  #sheet .row__delete { order: 4; }
  #sheet .row__label { order: 5; flex: 1 0 100%; font-size: 1.15rem;  /* shrink the task text a bit on mobile so it fits better with the controls */ }
  #sheet .row {
    gap: 6px;
  }
}

/* "Add a task" + "Paste a list" are ghost buttons (see button system above);
   .add-row / .paste-rows are JS/test hooks, not styles. */
.add-row, .paste-rows { align-self: flex-start; }

/* The two add-task controls sit side by side below the card. */
.add-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* ---- Off-canvas panel (kid-friendly) ------------------------------------ */
.panel-backdrop { position: fixed; inset: 0; z-index: var(--z-overlay); background: var(--color-scrim); backdrop-filter: blur(1px); }
.panel {
  position: fixed; top: 0; right: 0; height: 100%; width: min(420px, 90vw);
  z-index: var(--z-overlay);
  background: var(--color-surface); box-shadow: var(--panel-shadow);
  border-radius: var(--radius-surface) 0 0 var(--radius-surface);
  padding: var(--s-6); overflow-y: auto;
  font-family: var(--font-family);
}
.panel h2 { font-family: var(--font-family-display); font-weight: var(--fw-medium); font-size: var(--fs-lg); margin: var(--s-2) 0 var(--s-5); }
.panel-close {
  float: right; width: 36px; height: 36px; border-radius: var(--r-pill);
  background: var(--color-canvas); border: none; font-size: var(--fs-md);
  cursor: pointer; color: var(--color-text-soft);
}
.panel-close:hover { background: var(--color-border); }

/* New-section footer: Cancel (secondary) + Save (the panel's one primary). */
.panel-actions {
  display: flex; justify-content: flex-end; gap: var(--s-3);
  margin-top: var(--s-6); padding-top: var(--s-5);
  border-top: 1px solid var(--color-border);
}

/* panel section label */
.panel-label {
  display: block; font-weight: var(--fw-bold); color: var(--color-text-soft);
  font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .04em;
  margin: var(--s-6) 0 var(--s-3);
}

/* panel checkbox row (hide icons / hide header) */
.panel-check {
  position: relative;
  display: flex; align-items: center; gap: var(--s-3);
  margin-top: var(--s-4); font-size: var(--fs-md); color: var(--color-text); cursor: pointer;
}
/* Custom checkbox: empty box that fills, with a checkmark stroke drawn over it. */
.panel-check input {
  appearance: none; -webkit-appearance: none; flex-shrink: 0;
  width: 22px; height: 22px; margin: 0; cursor: pointer;
  border: var(--border-width) solid var(--color-border); border-radius: var(--r-sm);
  background: var(--color-surface);
  transition: background var(--motion-fast) var(--motion-ease),
              border-color var(--motion-fast) var(--motion-ease);
}
.panel-check input:checked {
  background: var(--color-primary); border-color: var(--color-primary);
}
.panel-check input:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
/* The tick: an SVG stroke hidden by its own dash, drawn in (dashoffset 20 -> 0). */
.panel-check__check {
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 22px; height: 22px; pointer-events: none;
}
.panel-check__tick {
  fill: none; stroke: var(--color-on-emphasis); stroke-width: 3;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 20; stroke-dashoffset: 20;
  transition: stroke-dashoffset var(--motion-base) var(--motion-ease);
}
.panel-check input:checked ~ .panel-check__check .panel-check__tick {
  stroke-dashoffset: 0;
}
@media (prefers-reduced-motion: reduce) {
  .panel-check input, .panel-check__tick { transition: none; }
}

/* Section-color selector: a friendly Coloris palette + hex field.
   (Coloris's own .clr-* / #clr-* elements are styled UNLAYERED at the end of
   this file so they keep overriding Coloris's third-party CSS.) */
.color-field {
  width: 100%; padding: 11px 14px 11px 42px; cursor: pointer; /* left room for the swatch */
  border: var(--border-width) solid var(--color-border); border-radius: var(--radius-control);
  background: var(--color-surface); color: var(--color-text);
  font-family: var(--font-family); font-size: var(--fs-md);
  transition: border-color var(--motion-fast) var(--motion-ease);
}
.color-field:hover { border-color: var(--color-text-soft); }
.color-field:focus { outline: none; border-color: var(--color-focus); }

/* row-marker picker (star / checkbox / circle) + title-color picker share a look */
.marker-picker, .titlecolor-picker { display: flex; gap: 10px; }
.marker-option, .titlecolor-option {
  width: 46px; height: 46px; display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; cursor: pointer;
  background: var(--color-surface); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-control);
  color: var(--color-text-soft);
  transition: transform var(--motion-fast) var(--motion-ease);
}
.marker-option:hover, .titlecolor-option:hover { transform: translateY(-1px); }
.marker-option[aria-pressed="true"], .titlecolor-option[aria-pressed="true"] { border-color: var(--color-primary); color: var(--color-primary); }

/* title-color picker swatches (white / black), shown inside .titlecolor-option boxes */
.titlecolor-swatch {
  width: 24px; height: 24px; border-radius: var(--r-pill);
  border: var(--border-width) solid var(--color-border);
}
.titlecolor-swatch--white { background: #fff; }
.titlecolor-swatch--black { background: var(--color-text); border-color: var(--color-text); }

/* icon search */
.icon-search-form { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: var(--s-4); }
.icon-search-input {
  flex: 1 1 140px;
  font-family: var(--font-family); font-size: 1rem; color: var(--color-text);
  border: var(--border-width) solid var(--color-border); border-radius: var(--r-pill); padding: 8px 14px;
  transition: border-color var(--motion-fast) var(--motion-ease);
}
.icon-search-input:focus { outline: none; border-color: var(--color-focus); }

/* multi-select style filter (toggle chips; any number selected) */
.style-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--s-5); }
.style-chip {
  font-family: var(--font-family); font-weight: var(--fw-medium); font-size: 0.9rem;
  border: var(--border-width) solid var(--color-border); border-radius: var(--r-pill);
  background: var(--color-surface); color: var(--color-text);
  padding: 5px 12px; cursor: pointer;
  transition: transform var(--motion-fast) var(--motion-ease),
              background var(--motion-fast) var(--motion-ease);
}
.style-chip:hover { transform: translateY(-1px); }
.style-chip[aria-pressed="true"] { background: var(--color-primary); color: var(--color-on-emphasis); border-color: transparent; }
.icon-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-4); }
.icon-grid button {
  border: var(--border-width) solid var(--color-border); border-radius: var(--radius-control);
  background: var(--color-surface); padding: 8px; cursor: pointer;
  transition: transform var(--motion-fast) var(--motion-ease);
}
.icon-grid button:hover { transform: scale(1.06); }
.icon-grid img { width: 100%; aspect-ratio: 1; object-fit: contain; }
.icon-status { color: var(--color-text-soft); }

/* Search results pop in as the grid is (re)built. */
@keyframes cc-pop-in { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: scale(1); } }
.icon-grid button { animation: cc-pop-in 0.2s var(--motion-ease) both; }

/* Respect reduced-motion for the JS animations' CSS cousins. */
@media (prefers-reduced-motion: reduce) {
  .icon-grid button { animation: none; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ---- Confirmation modal -------------------------------------------------- */
/* While any modal is open, lock the page behind it from scrolling. */
.modal-open { overflow: hidden; }
.modal-backdrop {
  position: fixed; inset: 0; z-index: var(--z-overlay);
  display: flex; align-items: center; justify-content: center; padding: var(--s-5);
  background: var(--color-scrim); backdrop-filter: blur(1px);
  animation: cc-fade-in 0.18s var(--motion-ease) both;
}
.modal {
  width: 100%; max-width: 360px; padding: var(--s-6);
  background: var(--color-surface); border-radius: var(--radius-surface); box-shadow: var(--panel-shadow);
  font-family: var(--font-family); text-align: center;
  animation: cc-modal-in 0.2s var(--motion-ease) both;
}
.modal__icon { display: block; font-size: 2rem; color: var(--color-primary); margin-bottom: var(--s-3); }
.modal__icon .icon { width: 2.5rem; height: 2.5rem; }
.modal__icon--brand { margin-inline: auto; }   /* the logo img, centered */
.modal__title { font-family: var(--font-family-display); margin: 0 0 var(--s-2); font-weight: var(--fw-medium); font-size: var(--fs-lg); color: var(--color-text); }
.modal__message { margin: 0 0 var(--s-5); color: var(--color-text-soft); }
.modal__actions { display: flex; gap: var(--s-3); justify-content: center; }

/* Paste-a-list prompt: roomier, with a left-aligned layout. */
.modal--prompt { max-width: 440px; text-align: left; }
.modal--prompt .modal__icon { color: var(--color-primary-strong); text-align: left; }
.modal--prompt .modal__actions { justify-content: flex-end; }
.modal__textarea {
  display: block; width: 100%; box-sizing: border-box;
  margin: 0 0 var(--s-5); padding: var(--s-3);
  border: var(--border-width) solid var(--color-border); border-radius: var(--radius-control);
  font-family: var(--font-family); font-size: var(--fs-md); line-height: 1.4;
  resize: vertical; min-height: 120px;
}
.modal__textarea:focus { outline: none; border-color: var(--color-focus); }
/* Single-line prompt (rename etc.) — same field-input pattern. */
.modal__input {
  display: block; width: 100%; box-sizing: border-box;
  margin: 0 0 var(--s-5); padding: 11px var(--s-3);
  border: var(--border-width) solid var(--color-border); border-radius: var(--radius-control);
  font-family: var(--font-family); font-size: var(--fs-md); color: var(--color-text);
  background: var(--color-surface);
  transition: border-color var(--motion-fast) var(--motion-ease);
}
.modal__input:focus { outline: none; border-color: var(--color-focus); }
@keyframes cc-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes cc-modal-in { from { opacity: 0; transform: scale(0.9) translateY(8px); } to { opacity: 1; transform: none; } }

/* ---- initial app loader -------------------------------------------------- */
/* Covers the app until the first render + auth state resolve. Lives in the HTML
   so it paints before app.js runs; app.js fades it out via .is-hidden. */
.app-loading {
  position: fixed; inset: 0; z-index: var(--z-loader);
  display: grid; place-items: center;
  background: var(--color-canvas);
  transition: opacity var(--motion-base) var(--motion-ease);
}
.app-loading.is-hidden { opacity: 0; pointer-events: none; }
.app-loading[hidden] { display: none; }
.app-loading__spinner {
  width: 40px; height: 40px;
  border-radius: var(--r-pill);
  border: 3px solid var(--color-primary-soft);
  border-top-color: var(--color-primary);
  animation: cc-spin 0.7s linear infinite;
}
@keyframes cc-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .app-loading__spinner { animation: cc-pulse 1.2s ease-in-out infinite; }
}
@keyframes cc-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }

/* ---- Print preview (8.5 x 11 sheet) ------------------------------------- */
.preview-backdrop { z-index: var(--z-preview); }
.preview-close { position: fixed; top: var(--s-5); right: var(--s-5); }
/* Stage holds the visually-scaled sheet; its size matches the scaled sheet so
   the modal centers correctly. The entrance animation lives here (the sheet's
   own transform is reserved for the display scale). */
.preview-stage { animation: cc-modal-in 0.25s var(--motion-ease) both; }
/* The sheet renders at its full fixed pixel size (set inline, identical to the
   PDF); openPreview applies a transform to scale it down to fit the screen. */
.preview-sheet {
  background: var(--color-paper); border-radius: 4px; overflow: hidden;
  box-shadow: 0 12px 44px rgba(0, 0, 0, 0.35);
}
/* The sheet shows the finished page: edit affordances are hidden, content is
   not interactive, and page margins replace the editor's side gutters. */
.preview-sheet .sheet {
  /* Fixed page margins (never scaled): 0.5in all sides — safe for standard
     printers. CSS % padding is relative to width, and the PDF is a full-bleed
     capture of this 8.5in-wide sheet, so N/8.5 of the width is exactly N inches.
     Filling the sheet height makes the content-box the true printable area. */
  width: 100%; height: 100%; max-width: none; margin: 0;
  padding: calc(100% * 0.5 / 8.5) calc(100% * 0.5 / 8.5); pointer-events: none;
}
/* The scale target: title + sections shrink to fit INSIDE the page margins. */
.preview-sheet .sheet-content { transform-origin: top left; }
.preview-sheet .sheet-title {
  margin: 0 0 16px; text-align: center; white-space: nowrap;
  font-family: var(--font-family-display); font-weight: var(--fw-medium);
  font-size: var(--fs-xl); color: var(--color-text); line-height: 1.05;
}
.preview-sheet .add-actions,
.preview-sheet .section__actions-float,
.preview-sheet .section__tools,
.preview-sheet .row__delete,
.preview-sheet .row__move,
.preview-sheet .section__delete,
.preview-sheet .section__move,
.preview-sheet .section__edit { display: none !important; }
/* No editable ✕ on the sheet — drop its grid column so rows don't reserve the space. */
.preview-sheet .row { grid-template-columns: 60px 1fr 48px; }
.preview-sheet .section--no-icons .row { grid-template-columns: 1fr 48px; }
/* Tighter gap between sections on the printed/preview page than in the editor. */
.preview-sheet .section-group { margin-bottom: var(--space-card-gap); }
.preview-sheet .section-group:last-child { margin-bottom: 0; }

/* PDF export button: a tiny spinner while the capture libs load + render. */
#export-pdf.is-busy { opacity: .6; cursor: progress; }

/* ---- Share fallback modal ------------------------------------------------- */
.share__links { display: flex; justify-content: center; gap: var(--s-3); margin-bottom: var(--s-5); }
.share__link { width: 44px; height: 44px; padding: 0; flex: none; }   /* icon circles */
.share__link .icon { font-size: 1.2rem; }

/* ---- Legal pages (privacy / terms) ---------------------------------------- */
.legal { max-width: 680px; padding-top: var(--s-7); padding-bottom: var(--s-7); line-height: 1.6; }
.legal__back {
  display: inline-flex; align-items: center; gap: var(--s-2);
  margin-bottom: var(--s-6); text-decoration: none;
  font-family: var(--font-family-display); font-weight: var(--fw-medium); color: var(--color-text);
}
.legal h1 { font-family: var(--font-family-display); font-weight: var(--fw-medium); font-size: var(--font-size-title); margin: 0 0 var(--s-1); }
.legal h2 { font-family: var(--font-family-display); font-weight: var(--fw-medium); font-size: var(--fs-lg); margin: var(--s-6) 0 var(--s-2); }
.legal p { margin: 0 0 var(--s-3); color: var(--color-text-soft); }
.legal__date { font-size: var(--fs-sm); }

/* ---- Info modals (About / FAQ from the navbar) ----------------------------- */
.modal--info { max-width: 520px; text-align: left; position: relative; }

/* About: intro split into two columns — an example sheet (styled as a piece
   of paper with subtle depth) beside the first paragraph. */
.info-cols {
  display: grid; grid-template-columns: 150px 1fr; gap: var(--s-5);
  align-items: flex-start; margin-bottom: var(--s-4);
}
.info-cols > p { margin: 0; }
.info-sheet {
  margin: var(--s-2); transform: rotate(-2deg);
  background: var(--color-paper); border-radius: 3px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 8px 18px rgba(43, 58, 74, 0.18);
}
.info-sheet img { display: block; width: 100%; height: auto; border-radius: inherit; }
@media (max-width: 479.98px) {
  .info-cols { grid-template-columns: 1fr; }
  .info-sheet { max-width: 180px; margin-inline: auto; }
}
.modal--info .modal__icon, .modal--info .modal__title { text-align: center; }
/* Close button is a child of the (fixed, full-screen) backdrop, so it pins to
   the window's top-right corner — outside the modal card — and floats above it. */
.modal__close {
  position: absolute; top: var(--s-4); right: var(--s-4); z-index: 1;
  width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
  border: var(--border-width) solid var(--color-border); background: var(--color-surface);
  border-radius: var(--r-pill); color: var(--color-text-soft); cursor: pointer;
  box-shadow: var(--panel-shadow);
  transition: background var(--motion-fast) var(--motion-ease),
              color var(--motion-fast) var(--motion-ease);
}
.modal__close:hover { background: var(--color-canvas); color: var(--color-text); }
.modal__body {
  margin-top: var(--s-4); max-height: min(60vh, 480px); overflow-y: auto;
  color: var(--color-text-soft); line-height: 1.6;
}
.modal__body p { margin: 0 0 var(--s-4); }
.modal__body a, .auth__terms a { color: var(--color-primary-strong); }
.info__legal {
  margin-top: var(--s-5); padding-top: var(--s-4);
  border-top: 1px solid var(--color-border);
  font-size: var(--fs-sm); text-align: center;
}

/* FAQ accordion: native <details> for accessibility; chevron rotates on open. */
.faq-item {
  border: var(--border-width) solid var(--color-border); border-radius: var(--radius-control);
  background: var(--color-surface); margin-bottom: var(--s-2);
}
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: var(--s-3) var(--s-4); cursor: pointer; list-style: none;
  font-weight: var(--fw-semibold); color: var(--color-text);
  border-radius: var(--radius-control);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .icon--chevron-down {
  flex: none; font-size: 1em; color: var(--color-text-soft);
  transition: transform var(--motion-fast) var(--motion-ease);
}
.faq-item[open] summary .icon--chevron-down { transform: rotate(180deg); }
.faq-item[open] { border-color: var(--color-primary); }
.faq-item > p { margin: 0; padding: 0 var(--s-4) var(--s-3); }

/* ---- About modal — bespoke marketing layout (Figma 38:877) ----------------- */
/* Scroll the whole modal as one unit (logo + headline scroll with the content)
   instead of a fixed header over a scrolling body. The close button stays
   pinned to the top-right via sticky so it's always reachable. */
.modal--about {
  max-width: 560px;
  display: flex; flex-direction: column;
  max-height: min(88vh, 820px); overflow-y: auto;
}
.modal--about .modal__body { margin-top: var(--s-4); max-height: none; overflow: visible; }
.modal--about .modal__title {
  font-weight: var(--fw-bold); font-size: 1.75rem; line-height: 1.2;
  max-width: 20ch; margin-inline: auto;
}
.about__subhead {
  margin: 0 0 var(--s-3); text-align: center;
  color: var(--color-text-soft); font-size: var(--fs-sm);
}
.about__block { margin-bottom: var(--s-5); }
.about__label {
  margin: 0 0 var(--s-3); text-align: center;
  font-family: var(--font-family); font-weight: var(--fw-bold);
  font-size: 1.125rem; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--color-primary);
}
.about__sub {
  margin: calc(-1 * var(--s-1)) 0 var(--s-3); text-align: center;
  color: var(--color-text-soft); font-size: var(--fs-sm);
}
/* How it works: example sheet beside numbered steps. */
.about__how { display: flex; align-items: center; gap: var(--s-6); }
.about__sheet {
  flex: none; width: 150px; margin: 0; transform: rotate(-2deg);
  border-radius: var(--r-sm); background: var(--color-paper);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 8px 18px rgba(43, 58, 74, 0.18);
}
.about__sheet img { display: block; width: 100%; height: auto; border-radius: inherit; }
.about__steps {
  flex: 1 1 0; min-width: 0; list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: var(--s-3);
}
.about__step { display: flex; align-items: flex-start; gap: var(--s-3); }
.about__num {
  flex: none; width: 28px; height: 28px; display: grid; place-items: center;
  border-radius: var(--r-pill); background: var(--color-primary);
  color: var(--color-on-emphasis); font-weight: var(--fw-bold); font-size: var(--fs-sm);
}
.about__step > span:last-child {
  padding-top: 3px; font-size: var(--fs-sm); line-height: 1.5; color: var(--color-text);
}
/* Icon library sample grid (decorative emoji). */
.about__icons {
  list-style: none; margin: 0; padding: 0;
  /* auto-fit wraps to fewer columns on narrow containers; max-width caps it at
     9 across (= 2 rows of the 18 sample icons) on wide layouts. */
  display: grid; grid-template-columns: repeat(auto-fit, 40px);
  justify-content: center; gap: var(--s-2) var(--s-3);
  max-width: calc(9 * 40px + 8 * var(--s-3)); margin-inline: auto;
}
.about__icons li {
  width: 40px; height: 40px; display: grid; place-items: center;
  font-size: 1.25rem; line-height: 1;
}
.about__icons img { display: block; width: 36px; height: 36px; }
/* Pro upsell block. */
.about__pro {
  display: flex; flex-direction: column; align-items: center; gap: var(--s-1);
  text-align: center;
}
.about__pro-title {
  margin: 0; display: inline-flex; align-items: center; gap: var(--s-2);
  font-family: var(--font-family-display); font-weight: var(--fw-bold);
  font-size: 1.3rem; color: var(--color-text);
}
.about__badge {
  background: var(--color-primary); color: var(--color-on-emphasis);
  font-weight: var(--fw-bold); font-size: var(--fs-sm);
  padding: 4px 14px; border-radius: var(--r-pill);
}
.about__pro-text { margin: 0; max-width: 42ch; color: var(--color-text-soft); font-size: var(--fs-sm); }
.about__upgrade {
  border: 0; background: none; cursor: pointer; padding: var(--s-1) var(--s-2);
  color: var(--color-primary-strong); font-family: var(--font-family);
  font-weight: var(--fw-bold); font-size: var(--fs-sm);
  margin-bottom: var(--s-5);
}
.about__upgrade:hover { color: var(--color-primary); }
@media (max-width: 480px) {
  .about__how { flex-direction: column; }
  .about__sheet { width: 168px; }
}

/* Printing the page/preview is NOT a product path — sheets are printed from
   the Pro PDF download. Browser print output is blanked entirely and replaced
   with a pointer to the PDF button. (Client-side enforcement: pairs with the
   Ctrl/Cmd+P intercept in app.js.) */
@media print {
  body > * { display: none !important; }
  body::after {
    content: "Choresheet pages aren't printable directly. Use the PDF download (Pro) to get a crisp, print-ready sheet.";
    display: block; padding: 1in 0.5in; text-align: center;
    font-family: var(--font-family); font-size: var(--fs-md); color: var(--color-text);
  }
}

/* ---- accounts: sign-in modal, portal panel, cloud library ---------------- */
/* Centered sign-in card: brand badge, heading, Google, "or", email + CTA. */
.modal--auth { position: relative; max-width: 380px; padding: var(--s-7) var(--s-6) var(--s-6); }
.auth__close {
  position: absolute; top: var(--s-3); right: var(--s-3);
  width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
  border: none; background: transparent; border-radius: var(--r-pill);
  color: var(--color-text-soft); cursor: pointer;
  transition: background var(--motion-fast) var(--motion-ease),
              color var(--motion-fast) var(--motion-ease);
}
.auth__close:hover { background: var(--color-canvas); color: var(--color-text); }
/* The logo is open line-work — no badge/background behind it, anywhere. */
.auth__brand {
  width: 64px; height: 64px; margin: var(--s-1) auto var(--s-4);
  display: grid; place-items: center;
}
.auth__brand img { display: block; width: 48px; height: 48px; }
/* Why-am-I-here notice: shown when a locked Pro tool routed the user here. */
.auth__reason {
  display: flex; align-items: flex-start; gap: var(--s-2); text-align: left;
  margin: 0 0 var(--s-5); padding: var(--s-3) var(--s-4);
  background: var(--color-primary-soft); border-radius: var(--radius-control);
  font-size: var(--fs-sm); color: var(--color-text); line-height: 1.45;
}
.auth__reason .icon { flex: none; font-size: 1.1rem; color: var(--color-primary-strong); margin-top: 1px; }

.auth__title { font-size: var(--fs-xl); font-weight: var(--fw-bold); margin-bottom: var(--s-2); }
.auth__sub { margin-bottom: var(--s-5); line-height: 1.45; }
.auth__body { display: flex; flex-direction: column; text-align: left; }
.auth__google { width: 100%; gap: var(--s-3); }
.auth__g { flex: none; }
/* "or" divider: hairlines flanking the word. */
.auth__divider {
  display: flex; align-items: center; gap: var(--s-3); margin: var(--s-4) 0;
  color: var(--color-text-soft); font-size: var(--fs-sm);
}
.auth__divider::before, .auth__divider::after {
  content: ""; flex: 1; height: 2px; border-radius: 2px; background: var(--color-border);
}
.auth__email {
  width: 100%; box-sizing: border-box; padding: 13px var(--s-4); margin-bottom: var(--s-3);
  border: var(--border-width) solid var(--color-border); border-radius: var(--r-lg);
  font-family: var(--font-family); font-size: var(--fs-md);
  color: var(--color-text); background: var(--color-surface);
  transition: border-color var(--motion-fast) var(--motion-ease);
}
.auth__email::placeholder { color: var(--color-text-soft); }
.auth__email:focus { outline: none; border-color: var(--color-focus); }
.auth__magic { width: 100%; }
.auth__terms { margin: var(--s-5) 0 0; text-align: center; font-size: var(--fs-sm); color: var(--color-text-soft); line-height: 1.5; }
.auth__signup { margin: var(--s-2) 0 0; text-align: center; font-size: var(--fs-sm); color: var(--color-text-soft); }
.auth__sent { display: flex; justify-content: center; margin-top: var(--s-4); }

.portal { display: flex; flex-direction: column; gap: var(--space-card-gap); padding: 4px; }
.portal__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); }
.portal__email { font-size: var(--fs-md); color: var(--color-text); font-weight: var(--fw-medium); word-break: break-all; }
.portal__plan {
  flex: none; padding: 2px 10px; border-radius: var(--r-pill); font-size: var(--fs-sm);
  font-weight: var(--fw-semibold); border: var(--border-width) solid var(--color-border); color: var(--color-text-soft);
}
.portal__plan--pro { color: var(--color-on-emphasis); background: var(--color-primary); border-color: transparent; }
.portal__manage, .portal__signout { text-align: center; text-decoration: none; }
.portal__signout { color: var(--color-text-soft); }

.library { display: flex; flex-direction: column; gap: var(--s-2); }
.library__heading { font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--color-text-soft); margin: 4px 0 0; }
.library__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.library__item {
  display: flex; align-items: center; gap: 4px;
  border: var(--border-width) solid var(--color-border); border-radius: var(--radius-control); background: var(--color-surface);
}
.library__item.is-active { border-color: var(--color-primary); }
.library__open {
  flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 8px 10px; border: none; background: transparent; color: var(--color-text); cursor: pointer;
}
.library__name { font-weight: var(--fw-medium); }
.library__meta { font-size: var(--fs-sm); color: var(--color-text-soft); }
/* Quiet 44px icon buttons (duplicate / rename / delete) — full touch target, no chrome. */
.library__duplicate, .library__rename, .library__delete {
  width: 44px; height: 44px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; background: transparent; color: var(--color-text-soft); cursor: pointer;
}
.library__duplicate:hover, .library__rename:hover { color: var(--color-primary-strong); }
.library__delete:hover { color: var(--color-danger); }
.library__new { align-self: flex-start; }
.library__locked { display: flex; flex-direction: column; gap: 10px; padding: var(--s-3); border: var(--border-width) dashed var(--color-border); border-radius: var(--radius-control); }
.library__locked-msg { margin: 0; color: var(--color-text-soft); font-size: var(--fs-md); }

/* ---- topbar undo/redo + cloud-save buttons ------------------------------- */
/* Pro tools enabled-but-empty (e.g. nothing to undo): dimmed + inert. */
.btn--icon[disabled] { opacity: .35; cursor: default; box-shadow: none; }
.btn--icon[disabled]:active { transform: none; }
/* Locked (non-Pro): grayed, but still clickable to reach sign-in / upgrade. */
.btn--icon.is-locked { opacity: .4; }
.btn--icon.is-locked:hover { opacity: .6; }
#save-cloud.is-saved { color: var(--color-primary); }
#save-cloud:not(.is-saved):not(.is-locked):not(.is-error) { color: var(--color-text); }
#save-cloud.is-error { color: var(--color-danger); }

/* Cookie consent banner — fixed bottom card, asks before analytics load. */
.consent {
  position: fixed;
  left: var(--s-4);
  right: var(--s-4);
  bottom: var(--s-4);
  z-index: var(--z-overlay);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3) var(--s-4);
  max-width: 720px;
  margin-inline: auto;
  padding: var(--s-4) var(--s-5);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-surface);
  box-shadow: var(--panel-shadow);
}
.consent__text {
  flex: 1 1 280px;
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--color-text);
}
.consent__text a { color: var(--color-primary-strong); font-weight: var(--fw-semibold); }
.consent__actions { display: flex; gap: var(--s-2); flex: 0 0 auto; }

/* ---- Crawlable page content + footer (SEO/AEO) ---------------------------- */
.page-info {
  margin-top: var(--s-7); padding: var(--s-7) 0;
  border-top: 1px solid var(--color-border);
  color: var(--color-text); line-height: 1.6;
}
.page-info h1 {
  font-family: var(--font-family-display); font-weight: var(--fw-bold);
  font-size: var(--fs-xl); margin: 0 0 var(--s-4);
}
.page-info h2 {
  font-family: var(--font-family-display); font-weight: var(--fw-bold);
  font-size: var(--fs-lg); margin: var(--s-6) 0 var(--s-3);
}
.page-info p { margin: 0 0 var(--s-4); color: var(--color-text-soft); }
.page-info__steps {
  margin: 0 0 var(--s-4); padding-left: var(--s-5);
  display: flex; flex-direction: column; gap: var(--s-2); color: var(--color-text-soft);
}
.page-info__steps strong { color: var(--color-text); }
.page-info .faq-item { margin-bottom: var(--s-2); }
.site-footer {
  margin-top: auto; /* sticky footer: pushed to the viewport bottom on short pages */
  padding: var(--s-5);
  color: var(--color-text-soft); font-size: var(--fs-sm); text-align: center;
}
.site-footer a { color: var(--color-primary-strong); text-decoration: none; }
.site-footer a:hover { color: var(--color-primary); }

/* Visually-hidden but accessible to screen readers + crawlers (e.g. the home H1). */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ---- Template landing pages (/templates/*) -------------------------------- */
.tpl { padding-block: var(--s-6); }
.tpl-hero { text-align: center; max-width: 720px; margin-inline: auto; }
.tpl-hero h1 {
  font-family: var(--font-family-display); font-weight: var(--fw-bold);
  font-size: var(--fs-xl); margin: 0 0 var(--s-3);
}
.tpl-lead { color: var(--color-text-soft); font-size: var(--fs-lg); line-height: 1.5; margin: 0 0 var(--s-5); }
.tpl-cta { font-size: 1.05rem; padding: 12px 26px; margin-top:var(--s-3);}
.tpl-preview { margin: var(--s-6) auto 0; max-width: 360px; }
.tpl-preview img {
  width: 100%; height: auto;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-card); box-shadow: var(--panel-shadow);
}

/* About page — reuses the stylized .about__* blocks from the modal, plus a
   page header (logo + headline) that the modal chrome used to provide. */
/* Fills the standard .container width (912px) like the other pages. Inner blocks
   keep their own comfortable max-widths so text stays readable and the
   how-it-works pairing doesn't stretch across the full width. */
.about-page { padding-block: var(--s-7); }
.about-page__head { text-align: center; margin-bottom: var(--s-6); }
.about-page__logo { display: block; margin: 0 auto var(--s-3); }
.about-page__title {
  font-family: var(--font-family-display); font-weight: var(--fw-bold);
  font-size: 1.75rem; line-height: 1.2; margin: 0 0 var(--s-2); color: var(--color-text);
}
.about-page__intro {
  margin: 0 0 var(--s-6); text-align: center;
  color: var(--color-text-soft); line-height: 1.6;
}
/* Keep the sheet + numbered steps grouped and centered rather than stretched
   across the full 912px container. */
.about-page .about__how { max-width: 620px; margin-inline: auto; }
.about-page__cta { display: flex; justify-content: center;}
/* Consistent body copy across the page: the modal uses smaller text in places,
   so normalize all supporting paragraphs + step text to one size/color here. */
.about-page__intro,
.about-page .about__subhead,
.about-page .about__sub,
.about-page .about__pro-text,
.about-page .about__step > span:last-child {
  font-size: var(--fs-md);
  line-height: 1.6;
}
.about-page__intro,
.about-page .about__subhead,
.about-page .about__sub,
.about-page .about__pro-text { color: var(--color-text-soft); }

} /* end @layer components */

/* =========================================================================
   UNLAYERED — Coloris (third-party) overrides.
   Coloris ships its CSS unlayered, and unlayered rules outrank every cascade
   layer for normal declarations. So these overrides must stay OUTSIDE
   @layer components to keep winning over Coloris's defaults. They still use
   semantic tokens, so theming flows through normally.
   ========================================================================= */
.color-selector .clr-field { width: 100%; display: block; }
/* Coloris's color-preview button sits at the left edge of the field. */
.color-selector .clr-field button.clr-field,
.color-selector .clr-field button {
  border-radius: var(--r-sm); inset-inline-start: 8px; width: 22px; height: 22px;
}
/* Tint Coloris's interactive accents to the brand. */
.clr-picker { --clr-focus: var(--color-focus); }
#clr-color-value:focus, .clr-swatches button:focus { outline-color: var(--color-focus); }