/* =====================================================================
   Antiqua — antiqua.gallery/roadmap — the public board
   Tokens from tokens.css, chrome from css/site.css; this file is the
   board layout only. Noir, like the rest of the site.
   Contrast notes (on --bg #0A0907 and --surface #15120D):
     --cream #F4ECDA        about 17:1
     --gold #D4B16A         about 9.7:1
     --parchment-dim / --gold-mid #9C8E70   about 5.8:1 (small text ok)
     --gold-dim #8A6E35     about 4.1:1  -> never used for text here
   ===================================================================== */

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}


.rm { padding-bottom: 40px; }
.rm-wide { max-width: 1360px; }

/* ---- head ----------------------------------------------------------- */
.rm-head { padding: 72px 40px 28px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.rm-head .display { font-weight: 700; font-size: 46px; color: var(--cream); max-width: 720px; }
.rm-head .lede { max-width: 640px; }
.rm-updated { font-family: var(--font-mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-mid); margin: 4px 0 0; }
.rm-updated:empty { display: none; }
.rm-mode {
  margin: 6px 0 0; max-width: 560px; color: var(--text-2); font-size: 14px; line-height: 1.6;
  border: 1px solid var(--gold-deep); border-radius: var(--r-pill); padding: 10px 18px;
}
.rm-how { margin: 0; max-width: 560px; color: var(--text-2); font-size: 14px; line-height: 1.6; }
.rm-how[hidden] { display: none; }
.rm-status { margin: 0; min-height: 1.4em; color: var(--gold); font-size: 14px; }
.rm-status:empty { min-height: 0; }
.rm-h2 { font-weight: 700; font-size: 34px; }

/* ---- jump links ------------------------------------------------------ */
.rm-jump { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 10px; padding: 8px 40px 40px; }
.rm-jump a {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold-mid); text-decoration: none; border: 1px solid var(--gold-deep); border-radius: var(--r-pill);
  padding: 8px 14px; transition: color var(--dur-base), border-color var(--dur-base);
}
.rm-jump a:hover, .rm-jump a:focus-visible { color: var(--gold); border-color: var(--gold); }
.rm-jump a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ---- columns ---------------------------------------------------------- */
.rm-board { padding-bottom: 72px; }
.rm-columns {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; align-items: start;
}
.rm-col { min-width: 0; scroll-margin-top: 84px; }
.rm-col-head { border-top: 1px solid var(--gold-deep); padding: 14px 2px 12px; }
.rm-col-head h3 {
  margin: 0; font-family: var(--font-mono); font-size: 11px; letter-spacing: .28em; text-transform: uppercase;
  color: var(--gold-mid); display: flex; align-items: baseline; gap: 10px;
}
.rm-col-live .rm-col-head h3 { color: var(--gold); }
.rm-col-live .rm-col-head { border-top-color: var(--gold); }
.rm-count { font-family: var(--font-rounded); font-variant-numeric: tabular-nums; letter-spacing: 0; color: var(--gold-mid); }
.rm-count:empty { display: none; }
.rm-col-blurb { margin: 8px 0 0; font-size: 13px; line-height: 1.5; color: var(--text-2); }

.rm-cards { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.rm-groups { gap: 18px; }
.rm-group > h4 {
  margin: 0 0 10px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .24em; text-transform: uppercase;
  color: var(--gold-mid); display: flex; align-items: baseline; gap: 8px; padding: 0 2px;
}
.rm-group > h4 .rm-when { letter-spacing: .06em; text-transform: none; color: var(--text-2); }
.rm-group > ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }

/* ---- card --------------------------------------------------------------- */
.rm-card {
  background: var(--surface); border: 1px solid var(--rule-faint); border-radius: var(--r-card);
  padding: 14px 14px 12px; scroll-margin-top: 84px;
  transition: border-color var(--dur-base) var(--ease-soft);
}
.rm-card:hover { border-color: var(--gold-deep); }
.rm-card:focus-within { border-color: var(--gold-deep); }
.rm-area {
  margin: 0 0 6px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-mid);
}
.rm-title {
  margin: 0; font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: 18px; line-height: 1.2; color: var(--cream);
  overflow-wrap: anywhere;
}
.rm-detail { margin: 8px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--text-2); }
.rm-foot { margin-top: 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.rm-foot:empty { display: none; }
.rm-tag { font-family: var(--font-mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-mid); }

/* the vote group (board v2): up, net, down. Hidden until /api/roadmap answers.
   My vote reads by shape (the filled pill) and by the check glyph, never by colour alone. */
.rm-votes { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
.rm-votes[hidden] { display: none; }
.rm-vote {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  font-family: var(--font-rounded); font-variant-numeric: tabular-nums; font-weight: 600; font-size: 13px;
  color: var(--gold); background: transparent; border: 1px solid var(--gold-deep); border-radius: var(--r-pill);
  padding: 6px 10px; min-width: 52px; justify-content: center;
  transition: background var(--dur-base) var(--ease-soft), color var(--dur-base), border-color var(--dur-base), transform var(--dur-fast);
}
.rm-glyph { display: inline-flex; flex: 0 0 auto; line-height: 0; }
.rm-vote svg { width: 11px; height: 11px; fill: currentColor; flex: 0 0 auto; }
.rm-vote .rm-check { width: 10px; height: 10px; }
.rm-vote .rm-glyph-check { display: none; }
.rm-vote:hover { border-color: var(--gold); }
.rm-vote:active { transform: scale(.97); }
.rm-vote:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.rm-vote[aria-pressed="true"] { background: var(--gold); color: var(--bg); border-color: var(--gold); }
.rm-vote[aria-pressed="true"] .rm-glyph-check { display: inline-flex; }
.rm-vote-down[aria-pressed="true"] { background: var(--surface-2); color: var(--cream); border-color: var(--gold); }
.rm-vote[aria-busy="true"] { opacity: .6; cursor: progress; }
.rm-vote[hidden] { display: none; }
.rm-net {
  font-family: var(--font-rounded); font-variant-numeric: tabular-nums; font-weight: 700; font-size: 13px;
  color: var(--cream); min-width: 2.6ch; text-align: center;
}

.rm-empty { color: var(--text-2); text-align: center; padding: 40px 0; }
.rm-empty a { color: var(--gold); }

/* ---- announcements ----------------------------------------------------- */
.rm-announce { padding: 24px 40px 72px; }
.rm-releases { list-style: none; margin: 44px auto 0; padding: 0; max-width: 820px; display: flex; flex-direction: column; gap: 22px; }
.rm-release { border: 1px solid var(--rule-faint); border-radius: var(--r-card); background: var(--surface); padding: 20px 22px 18px; }
.rm-release-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin: 0 0 10px; }
.rm-release-head h3 { margin: 0; font-family: var(--font-display); font-style: italic; font-weight: 700; font-size: 26px; color: var(--cream); }
.rm-release-head .rm-when { font-family: var(--font-mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-mid); }
.rm-notes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 22px; }
.rm-note h4 { margin: 0; font-family: var(--font-ui); font-weight: 600; font-size: 14.5px; color: var(--gold); }
.rm-note p { margin: 4px 0 0; font-size: 14px; line-height: 1.55; color: var(--text-2); }

/* ---- ideas -------------------------------------------------------------- */
.rm-ideas { padding: 0 40px 96px; }
.rm-idea-box { max-width: 640px; margin: 36px auto 0; }
.rm-idea-mail { text-align: center; color: var(--text-2); font-size: 16px; line-height: 1.65; margin: 0; }
.rm-idea-mail a { color: var(--gold); }
.rm-form { display: flex; flex-direction: column; gap: 8px; }
.rm-form[hidden] { display: none; }
.rm-label { display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-mid); margin: 14px 0 8px; }
.rm-opt { letter-spacing: .06em; text-transform: none; color: var(--text-2); }
.rm-textarea { resize: vertical; min-height: 130px; line-height: 1.55; }
.rm-counter { margin: 4px 2px 0; text-align: right; font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; color: var(--gold-mid); }
.rm-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.rm-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.rm-form-foot { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 18px; }
.rm-fine { margin: 0; flex: 1 1 240px; font-size: 13px; line-height: 1.5; color: var(--text-2); }
.rm-form-status { margin: 10px 0 0; min-height: 1.4em; color: var(--gold); font-size: 15px; }
.rm-form-status.is-error { color: var(--danger); }

/* ---- verification panel -------------------------------------------------- */
.rm-verify {
  position: fixed; left: 16px; right: 16px; bottom: 16px; margin: 0 auto; max-width: 440px; z-index: 70;
  background: var(--surface); border: 1px solid var(--gold-deep); border-radius: var(--r-card);
  padding: 20px 20px 18px; box-shadow: var(--shadow-card);
}
.rm-verify[hidden] { display: none; }
.rm-verify-h { margin: 0; font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: 22px; color: var(--cream); }
.rm-verify-p { margin: 6px 0 14px; font-size: 14px; line-height: 1.5; color: var(--text-2); }
.rm-verify-widget { min-height: 65px; margin-bottom: 14px; }

.rm-noscript { color: var(--text-2); text-align: center; padding: 20px 40px 60px; }
.rm-noscript a { color: var(--gold); }

/* ---- responsive ------------------------------------------------------------ */
@media (max-width: 1180px) {
  .rm-columns { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .rm-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rm-head .display { font-size: 38px; }
  .rm-notes { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .rm-columns { grid-template-columns: 1fr; gap: 28px; }
  .rm-head { padding: 56px 24px 24px; }
  .rm-jump { padding: 8px 24px 32px; }
  .rm-announce, .rm-ideas { padding-left: 24px; padding-right: 24px; }
  .rm-row { grid-template-columns: 1fr; }
  .rm-verify { left: 10px; right: 10px; bottom: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .rm-card, .rm-vote, .rm-jump a { transition: none; }
}