/* ---------------------------------------------------------------------------
   The /ideas/ board. Same skeleton as the hub — thick borders, hard shadows,
   nothing eases — but laid out as a list, because ideas are read top to bottom
   and the kanban board already owns the columns metaphor.

   This file owns every component on the page. Only tokens.css (the palette,
   day and night) and base.css (the reset, .block, .page, .foot, .stamp) come
   from Home Base — those are the design system, and sharing them is what keeps
   the two pages from drifting.

   The hub's components.css is deliberately NOT loaded. It describes the hub's
   card grid, mail list and podbar; this board used about a third of it. Bound
   to it, the board's layout could only change by editing a file the landing
   page also loads. The masthead, capture and toast rules below started as
   copies of the hub's — duplication is the right trade when the two are meant
   to diverge.
--------------------------------------------------------------------------- */

/* ---- Masthead ------------------------------------------------------------ */

.masthead {
  padding: clamp(18px, 3vw, 30px) clamp(20px, 3.5vw, 36px);
}

.masthead-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 20px;
}

.masthead-title {
  font-size: clamp(34px, 6vw, 58px);
  font-weight: 900;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.masthead-icon {
  display: inline-block;
  color: var(--red);
  -webkit-text-stroke: 1px var(--ink);
}

.masthead-meta {
  display: flex;
  align-items: center;
  gap: 14px;
}

.back-link {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-decoration: none;
  border-bottom: 3px solid currentColor;
}

.back-link:hover {
  translate: -1px -1px;
}

.theme-toggle {
  background: var(--bg);
  border: var(--border-w) solid var(--ink);
  box-shadow: 3px 3px 0 var(--shadow-ink);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.1em;
  padding: 5px 10px;
  cursor: pointer;
}

.theme-toggle:hover {
  translate: -1px -1px;
  box-shadow: 4px 4px 0 var(--shadow-ink);
}

.theme-toggle:active {
  translate: 3px 3px;
  box-shadow: none;
}

.summary {
  margin-top: 12px;
  font-size: clamp(16px, 2.2vw, 21px);
  font-weight: 600;
  border-top: var(--border-w) solid var(--ink);
  padding-top: 12px;
}

/* ---- Capture ------------------------------------------------------------- */

.capture {
  padding: 16px 20px 20px;
}

.capture-label {
  display: block;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.18em;
  margin-bottom: 10px;
}

.capture-row {
  display: flex;
  gap: 12px;
}

.capture-input {
  flex: 1;
  min-width: 0;
  background: var(--bg);
  border: var(--border-w) solid var(--ink);
  padding: 10px 14px;
  font-size: 16px;
  font-weight: 600;
}

.capture-input:focus {
  outline: none;
  box-shadow: 4px 4px 0 var(--shadow-ink);
}

.capture-input::placeholder {
  color: var(--muted);
  opacity: 1;
}

.capture-actions {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
}

.capture-btn {
  background: var(--yellow);
  color: var(--ink-on-yellow);
  border: var(--border-w) solid var(--ink);
  box-shadow: 4px 4px 0 var(--shadow-ink);
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0.12em;
  padding: 10px 22px;
  cursor: pointer;
}

.capture-btn:hover {
  translate: -1px -1px;
  box-shadow: 5px 5px 0 var(--shadow-ink);
}

.capture-btn:active {
  translate: 4px 4px;
  box-shadow: none;
}

/* ---- Filter row ---------------------------------------------------------- */

.filter-row {
  display: flex;
  gap: 12px;
  align-items: stretch;
}

.filter-input {
  flex: 1;
  min-width: 0;
  background: var(--paper);
  border: var(--border-w) solid var(--ink);
  box-shadow: 4px 4px 0 var(--shadow-ink);
  padding: 9px 14px;
  font-size: 15px;
  font-weight: 600;
}

.filter-input:focus {
  outline: none;
  translate: -1px -1px;
  box-shadow: 5px 5px 0 var(--shadow-ink);
}

.filter-input::placeholder {
  color: var(--muted);
  opacity: 1;
}

.filter-toggle {
  flex-shrink: 0;
  background: var(--paper);
  border: var(--border-w) solid var(--ink);
  box-shadow: 4px 4px 0 var(--shadow-ink);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.12em;
  padding: 9px 16px;
  cursor: pointer;
}

.filter-toggle:hover {
  translate: -1px -1px;
  box-shadow: 5px 5px 0 var(--shadow-ink);
}

.filter-toggle:active {
  translate: 4px 4px;
  box-shadow: none;
}

/* ---- Groups -------------------------------------------------------------- */

.group {
  margin-bottom: clamp(22px, 3vw, 34px);
}

.group-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
  border-bottom: var(--border-w) solid var(--ink);
  padding-bottom: 8px;
  margin-bottom: 16px;
}

.group-title {
  font-size: 17px;
  font-weight: 900;
  letter-spacing: 0.18em;
}

.group-count {
  border: 2px solid var(--ink);
  padding: 0 8px;
  font-size: 13px;
  font-weight: 900;
}

.group-blurb {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}

.empty-note {
  border: var(--border-w) dashed var(--ink);
  padding: 26px 22px;
  font-size: 16px;
  font-weight: 600;
  color: var(--muted);
  text-align: center;
}

/* ---- One idea ------------------------------------------------------------ */

.idea {
  margin-bottom: 14px;
}

.idea-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  width: 100%;
  background: none;
  border: none;
  padding: 14px 18px;
  text-align: left;
  cursor: pointer;
}

.idea-head:hover {
  background: color-mix(in srgb, var(--ink) 7%, transparent);
}

.idea-caret {
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 900;
}

.idea-title {
  flex: 1;
  min-width: 0;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
}

.idea-meta {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.1em;
  color: var(--muted);
}

.idea-body {
  border-top: var(--border-w) solid var(--ink);
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.idea-label {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.16em;
  color: var(--muted);
  margin-top: 8px;
}

.idea-field {
  width: 100%;
  background: var(--bg);
  border: var(--border-w) solid var(--ink);
  padding: 9px 12px;
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
}

.idea-field:focus {
  outline: none;
  box-shadow: 4px 4px 0 var(--shadow-ink);
}

.idea-field::placeholder {
  color: var(--muted);
  opacity: 1;
}

.idea-notes {
  line-height: 1.45;
  resize: vertical;
}

.idea-title-input {
  font-weight: 900;
}

/* ---- Actions ------------------------------------------------------------- */

.idea-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 2px solid color-mix(in srgb, var(--ink) 25%, transparent);
}

.idea-btn {
  background: var(--paper);
  color: var(--ink);
  border: var(--border-w) solid var(--ink);
  box-shadow: 3px 3px 0 var(--shadow-ink);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.1em;
  padding: 8px 14px;
  text-decoration: none;
  cursor: pointer;
}

.idea-btn:hover {
  translate: -1px -1px;
  box-shadow: 4px 4px 0 var(--shadow-ink);
}

.idea-btn:active {
  translate: 3px 3px;
  box-shadow: none;
}

.idea-btn.primary {
  background: var(--yellow);
  color: var(--ink-on-yellow);
}

/* A button that has been warned about and is waiting for the second click.
   Yellow, not red — this is caution, not damage. Only reachable inside an
   archived card, where nothing else is .primary, so the two can't be confused. */
.idea-btn.armed {
  background: var(--yellow);
  color: var(--ink-on-yellow);
}

/* Killing an idea should feel as deliberate as promoting one — an idea board
   without a working delete key silts up into a landfill. */
.idea-btn.danger {
  background: var(--red);
  color: var(--ink-on-red);
  border-color: var(--ink);
  margin-left: auto;
}

/* ---- Archive ------------------------------------------------------------- */

/* Open ideas sit ON the page: border plus hard shadow, the .block primitive.
   Archived ones lie FLAT on a greyed surface — in this skeleton the shadow is
   what makes a card a physical object, so taking it away is the strongest
   "this is history" signal available, and it costs one line.

   The grey mixes toward --shadow-ink, not --ink, because that is the only
   surface token that is #000 in BOTH themes. Day has --bg and --paper both at
   #ffffff (cards are distinguished by border and shadow alone), and at night
   --paper is LIGHTER than --bg — so mixing --ink in would lighten archived
   cards after dark and make them louder than the live ones. Black recedes
   either way. */

.group-archive {
  border-top: 6px solid var(--ink);
  margin-top: clamp(28px, 4vw, 44px);
  padding-top: clamp(16px, 2.5vw, 24px);
}

.group-archive .group-head {
  border-bottom-color: var(--muted);
}

.group-archive .group-title,
.group-archive .group-count {
  color: var(--muted);
}

.group-archive .group-count {
  border-color: var(--muted);
}

.idea.archived {
  background: color-mix(in srgb, var(--shadow-ink) 10%, var(--paper));
  border-color: var(--muted);
  box-shadow: none;
}

.idea.archived .idea-head:hover {
  background: color-mix(in srgb, var(--ink) 4%, transparent);
}

.idea.archived .idea-title {
  color: var(--muted);
  font-weight: 600;
}

.idea.archived .idea-body {
  border-top-color: var(--muted);
}

/* The outcome, on the edge where the eye scans. Promoted graduated into a
   task; killed was decided against. Same two colours the buttons already use
   for those verbs, so nothing new enters the palette. */
.idea.archived-promoted {
  border-left: 8px solid var(--green);
}

.idea.archived-killed {
  border-left: 8px solid var(--red);
}

/* Struck through only on the collapsed head — the title INPUT below stays
   plain, because a revived idea is edited there. */
.idea.archived-killed .idea-title {
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}

/* ---- Toast --------------------------------------------------------------- */

.toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  translate: -50% 0;
  background: var(--paper);
  color: var(--ink);
  border: var(--border-w) solid var(--ink);
  box-shadow: var(--shadow);
  font-size: 15px;
  font-weight: 700;
  padding: 12px 20px;
  max-width: min(90vw, 520px);
}

.toast.error {
  background: var(--red);
  color: var(--ink-on-red);
}

.toast.warn {
  background: var(--yellow);
  color: var(--ink-on-yellow);
}

/* ---- Small screens ------------------------------------------------------- */

@media (max-width: 560px) {
  .capture-row {
    flex-direction: column;
  }

  .capture-actions {
    align-self: flex-end;
  }

  .idea-head {
    flex-wrap: wrap;
  }

  .idea-meta {
    width: 100%;
    padding-left: 25px;
  }

  .idea-btn.danger {
    margin-left: 0;
  }
}