/* The ideas board (docs/IDEAS.md): index cards on a faint grid, all the same paper, straight, no tilt and no colour per
   card (colour could hint at an author). The Vote box is a round stamp that fills with --cobalt when picked. "Most
   votes" sits on --face-sky (never gold: no gold ladders); "Your idea" on --face-sand. Taken-down cards (admins only)
   at 55% opacity with a --danger left edge. The only motion is the stamp filling, off under prefers-reduced-motion.
   One column under 720px; the vote bar sticks to the bottom with 16px gutters; no sideways scroll. Tokens only. */
:root { --ib-paper: #FFFFFF; --ib-grid: rgba(43, 53, 198, .07); --ib-ink: var(--ink); --ib-edge: rgba(5, 8, 60, .16); }
:root[data-theme="dark"] { --ib-paper: var(--raised); --ib-grid: rgba(159, 216, 255, .07); --ib-ink: var(--ink); --ib-edge: rgba(255, 255, 255, .16); }

.view[data-page="ideas"] { --locky: url("/img/locky-pencil.png"); --locky-shows: block; }

.ib-banner { margin: 0; padding: 10px 14px; border-radius: var(--radius); background: var(--sunk); color: var(--ink); font-weight: 600; }
.ib-grid { list-style: none; margin: 0; padding: 14px; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  border-radius: var(--radius); min-width: 0;
  background-color: var(--sunk);
  background-image: linear-gradient(var(--ib-grid) 1px, transparent 1px), linear-gradient(90deg, var(--ib-grid) 1px, transparent 1px);
  background-size: 22px 22px; }
.ib-card { position: relative; display: grid; gap: 6px; align-content: start; padding: 14px 16px; border: 1.5px solid var(--ib-edge);
  border-radius: var(--radius-s, 6px); background: var(--ib-paper); color: var(--ib-ink); min-width: 0; overflow-wrap: anywhere; }
.ib-title { margin: 0; font-size: 16px; }
.ib-body { margin: 0; white-space: pre-line; }
.ib-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ib-mine { --chip-face: var(--face-sand); }
.ib-most { --chip-face: var(--face-sky); }
.ib-down { opacity: .55; border-left: 6px solid var(--danger); }
.ib-downnote { margin: 0; font-size: 14px; color: var(--danger); }
.ib-mine-down .ib-title { color: var(--muted); }
.ib-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.ib-outcome { margin: 0; font-weight: 600; }
.ib-nopick { margin: 0; padding: 10px 14px; border-radius: var(--radius); background: var(--sunk); }
.ib-lasthead { margin: 8px 0 0; font-size: 18px; }
.ib-back { margin: 0; }
.ib-form { display: grid; gap: 8px; }
.ib-form textarea, .ib-outcome-form textarea { width: 100%; }
.ib-owner-row { display: flex; flex-wrap: wrap; align-items: end; gap: 8px; }
/* The round link and its "· 5 ideas · …" on one line (.plain-list li is a grid). */
.plain-list li.ib-pastrow { display: block; overflow-wrap: anywhere; }
.ib-anon summary { cursor: pointer; }
.ib-anon ul { margin-top: 8px; display: grid; gap: 6px; }

/* The Vote stamp: a round box that fills with cobalt when picked. */
.ib-stamp { justify-self: start; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.ib-stampbox { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ib-stampface { display: inline-grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; border: 2.5px dashed var(--cobalt);
  color: var(--cobalt); font-weight: 800; font-size: 13px; transition: background-color .18s ease, color .18s ease, transform .18s ease; }
.ib-stampbox:checked + .ib-stampface { background: var(--cobalt); color: #FFFFFF; border-style: solid; transform: rotate(-8deg); }
.ib-stampbox:focus-visible + .ib-stampface { outline: 3px solid var(--accent); outline-offset: 2px; }
.ib-stampbox:disabled + .ib-stampface { opacity: .4; cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) {
  .ib-stampface { transition: none; }
  .ib-stampbox:checked + .ib-stampface { transform: none; }
}

/* The vote bar sticks to the bottom of the page while you pick. */
.ib-bar { position: sticky; bottom: 0; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 16px; border: 1.5px solid var(--ib-edge); border-radius: var(--radius); background: var(--surface); }
.ib-bar[hidden] { display: none; }
.ib-count { margin: 0; font-weight: 600; }

/* Below 900px the phone tab bar sits fixed along the bottom, so the vote bar stops just above it. */
@media (max-width: 899px) {
  body.has-nav .ib-bar { bottom: calc(72px + env(safe-area-inset-bottom)); }
}
@media (max-width: 720px) {
  .ib-grid { grid-template-columns: 1fr; padding: 10px; }
  .ib-bar { padding: 10px 16px; }
}
.ib-older[hidden] { display: none; }