/*
 * roadmap.css: the Roadmap's own rules, loaded on its admin pages and its
 * public ones. Monochrome: a status is its word in a badge, Shipped the
 * one with an ink border; the team's update is the one tonal block on an
 * idea's page.
 */

/* The board's head: the site's heading, its line, Suggest an idea. */
.roadmap-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-4) var(--space-8); margin: 0 0 var(--space-8); }
.roadmap-head__text { max-width: var(--max-width-prose); }
.roadmap-head__title { margin: 0 0 var(--space-2); font-size: var(--text-3xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); overflow-wrap: anywhere; }
.roadmap-head__lead { margin: 0; color: var(--color-fg-muted); font-size: var(--text-lg); }

/* The tools under the status chips: search, the category and the order. */
.roadmap-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin: 0 0 var(--space-6); }
.roadmap-tools .form-input { flex: 1 1 14rem; width: auto; }
.roadmap-tools .form-select { width: auto; }

/* An idea's title in a list or on a card fills each line before the next
   and never ends on one word alone when the line before can spare one
   (pretty; headings elsewhere balance theirs), and a word with a hyphen in it
   moves to the next line whole, breaking inside only when it is longer
   than the line ("roadmap-title" partial). */
.roadmap-word { display: inline-block; max-width: 100%; text-decoration: inherit; }

/* The list of ideas: the vote box at the start, the idea beside it. */
.idea-list { list-style: none; margin: 0; padding: 0; border-block-start: 1px solid var(--line-soft); }
.idea-row { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); gap: var(--space-4); align-items: start; padding-block: var(--space-5); border-block-end: 1px solid var(--line-soft); }
.idea-row__title { margin: 0; font-size: var(--text-md); font-weight: var(--weight-semibold); line-height: var(--leading-tight); overflow-wrap: anywhere; text-wrap: pretty; }
.idea-row__title a { color: inherit; text-decoration: none; }
.idea-row__title a:hover { text-decoration: underline; text-underline-offset: var(--underline-offset); }
.idea-row__excerpt { margin: var(--space-2) 0 0; color: var(--color-fg-muted); overflow-wrap: anywhere; }
.idea-row__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); margin: var(--space-2) 0 0; font-size: var(--text-sm); color: var(--color-fg-subtle); }

/* The vote: a form with one button, the count under a chevron. Without a
   script it posts and the page comes back at the same row. Closed, the
   count alone, quiet. */
.vote { margin: 0; }
.vote__button { display: flex; flex-direction: column; align-items: center; justify-content: center; inline-size: 3.5rem; min-block-size: 3.5rem; padding: var(--space-1); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--color-bg); color: var(--color-fg); font: inherit; cursor: pointer; text-decoration: none; }
.vote__button:hover { background-color: var(--color-bg-hover); }
.vote__button:focus-visible { outline: 2px solid var(--color-fg); outline-offset: 2px; }
.vote__button svg { inline-size: 1.25rem; block-size: 1.25rem; }
.vote__count { font-size: var(--text-md); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; line-height: 1; }
.vote--on .vote__button { background-color: var(--color-fg); border-color: var(--color-fg); color: var(--color-bg); }
.vote--off .vote__button { cursor: default; color: var(--color-fg-subtle); border-color: var(--line-soft); }
.vote--off .vote__button:hover { background-color: var(--color-bg); }
.vote--wide .vote__button { flex-direction: row; gap: var(--space-2); inline-size: auto; min-block-size: 2.75rem; padding: 0 var(--space-4); border-radius: var(--radius-pill); }

/* The roadmap: three columns at a computer, three sections on a phone. */
.roadmap-columns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-8); align-items: start; }
.roadmap-column { min-width: 0; }
@media (max-width: 860px) { .roadmap-columns { grid-template-columns: 1fr; gap: var(--space-10); } }
.roadmap-column__title { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin: 0 0 var(--space-1); font-size: var(--text-lg); }
.roadmap-column__count { font-size: var(--text-sm); font-weight: var(--weight-regular); color: var(--color-fg-subtle); font-variant-numeric: tabular-nums; }
.roadmap-column__lead { margin: 0 0 var(--space-4); font-size: var(--text-sm); color: var(--color-fg-muted); }
.roadmap-column__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.roadmap-column__empty { margin: 0; font-size: var(--text-sm); color: var(--color-fg-subtle); }
.roadmap-column__more { margin: var(--space-4) 0 0; font-size: var(--text-sm); }
.roadmap-card { padding: var(--space-4); border: 1px solid var(--line-soft); border-radius: var(--radius-md); background: var(--color-bg); }
.roadmap-card__title { margin: 0; font-size: var(--text-base); font-weight: var(--weight-medium); overflow-wrap: anywhere; text-wrap: pretty; }
.roadmap-card__title a { color: inherit; text-decoration: none; }
.roadmap-card__title a:hover { text-decoration: underline; text-underline-offset: var(--underline-offset); }
.roadmap-card__meta { margin: var(--space-1) 0 0; font-size: var(--text-sm); color: var(--color-fg-subtle); }
.roadmap-card__votes { font-size: var(--text-sm); color: var(--color-fg-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.roadmap-note { margin: var(--space-10) 0 0; font-size: var(--text-sm); color: var(--color-fg-subtle); max-width: var(--max-width-prose); }

/* An idea's head: its status, category and votes, its title, its author. */
.idea-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-6); align-items: start; margin: 0 0 var(--space-8); }
.idea-head__kicker { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); margin: 0 0 var(--space-3); font-size: var(--text-sm); color: var(--color-fg-muted); }
.idea-head__title { margin: 0; font-size: var(--text-2xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); overflow-wrap: anywhere; }
.idea-head__by { margin: var(--space-3) 0 0; font-size: var(--text-sm); color: var(--color-fg-subtle); }
@media (max-width: 640px) { .idea-head { grid-template-columns: 1fr; } }

/* The idea's words as their author wrote them, line breaks kept. */
.idea-body { margin: 0 0 var(--space-10); white-space: pre-line; overflow-wrap: anywhere; max-width: var(--max-width-prose); }

/* The team's updates, newest first, each on the tonal fill. */
.idea-updates { list-style: none; margin: 0 0 var(--space-10); padding: 0; display: flex; flex-direction: column; gap: var(--space-4); max-width: var(--max-width-prose); }
.idea-update { padding: var(--space-4) var(--space-5); background: var(--paper-2); border-radius: var(--radius-md); }
.idea-update__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); margin: 0 0 var(--space-2); font-size: var(--text-sm); color: var(--color-fg-muted); }
.idea-update__body > :last-child { margin-block-end: 0; }

/* A shipped idea's release note, the one ink border on its page; a
   merged idea's line; the visitor's own line under the updates. */
.idea-shipped { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-3); margin: 0 0 var(--space-8); padding: var(--space-4) var(--space-5); border: 1px solid var(--color-fg); border-radius: var(--radius-md); }
.idea-shipped__label { font-weight: var(--weight-semibold); }
.idea-merged { margin: 0 0 var(--space-8); }
.idea-follow { margin: var(--space-6) 0 0; font-size: var(--text-sm); color: var(--color-fg-muted); }

/* Asking: the vote's address, the idea's title first, then the rest. */
.idea-ask { max-width: var(--max-width-narrow); }
.idea-ask__title { margin: 0 0 var(--space-2); font-size: var(--text-3xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); overflow-wrap: anywhere; }
.idea-ask__lead { margin: 0 0 var(--space-8); color: var(--color-fg-muted); }

/* Asking: the field with its suggestions under it, then the ideas like
   it, each a row with its vote box. */
.idea-ask__box { position: relative; }
.idea-similar { margin: var(--space-2) 0 var(--space-8); }
.idea-similar__title { margin: 0 0 var(--space-3); font-size: var(--text-base); }
.idea-similar .idea-row { padding-block: var(--space-3); }

/* A visitor's own ideas and votes. */
.idea-mine__row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2) var(--space-4); padding-block: var(--space-4); border-block-end: 1px solid var(--line-soft); }
.idea-mine__what { margin: var(--space-1) 0 0; font-size: var(--text-sm); color: var(--color-fg-subtle); }

/* The widget's frame: a short list, every link out to the board. */
.roadmap-embed { padding: var(--space-4); }
.roadmap-embed__title { margin: 0 0 var(--space-3); font-size: var(--text-base); }
.roadmap-embed__group { margin: 0 0 var(--space-5); }
.roadmap-embed__kicker { margin: 0 0 var(--space-2); font-size: var(--text-sm); color: var(--color-fg-muted); }
.roadmap-embed__list { list-style: none; margin: 0; padding: 0; }
.roadmap-embed__item { display: flex; justify-content: space-between; gap: var(--space-3); padding-block: var(--space-2); border-block-end: 1px solid var(--line-soft); font-size: var(--text-sm); overflow-wrap: anywhere; }
.roadmap-embed__all { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); margin: var(--space-4) 0 0; font-size: var(--text-sm); }

/* The admin: the idea's page, its update composer and its voters. */
.idea-admin { display: grid; grid-template-columns: minmax(0, 1fr) 17rem; gap: var(--space-10); align-items: start; }
.idea-admin__aside { display: flex; flex-direction: column; gap: var(--space-6); }
@media (max-width: 960px) { .idea-admin { grid-template-columns: 1fr; gap: var(--space-6); } }
.idea-compose { margin: var(--space-8) 0; padding-block-start: var(--space-6); border-block-start: 1px solid var(--line); }
.idea-voters { list-style: none; margin: 0; padding: 0; font-size: var(--text-sm); }
.idea-voters li { display: flex; justify-content: space-between; gap: var(--space-3); padding-block: var(--space-2); border-block-end: 1px solid var(--line-soft); overflow-wrap: anywhere; }
.idea-voters li > :last-child { flex: none; white-space: nowrap; }
.idea-row__votes { font-variant-numeric: tabular-nums; }