/* /product/roadmap · page scoped CSS (prefix pg-roadmap-). Spacing between shared blocks, the status marks, the filter bar, the
   item detail line and the suggestion form (no shared form field exists yet: see the promote request in the report). */

/* status marks: a small hex (Today sealed, In build ring, Planned outline) inside tags, buttons and the legend */
.pg-roadmap-hex{--hex-w:10px}

/* hero: the caption is the standard stacked .cy-fig__cap inside the figure (taste-14), so the hero row has no second item; its row
   gap would leave 40px of blank under the caption */
@media (min-width:900px){.pg-roadmap-hero>.cy-phero__row{row-gap:0}}

/* hero: the status board sits beside the lead at the same height */
.pg-roadmap-board .cy-check__label{font-size:calc(16px + var(--pg-mock-bump))}
.pg-roadmap-board .cy-check{min-height:48px}

/* in build and planned: the filter bar, one title gap under the head */
.pg-roadmap-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 24px;margin-bottom:32px}
.pg-roadmap-bar[hidden]{display:none}
.pg-roadmap-filters{display:flex;flex-wrap:wrap;gap:8px}
.pg-roadmap-filter{box-sizing:border-box;display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 16px;border-radius:6px;
  background:var(--s-bg);box-shadow:inset 0 0 0 1px var(--pg-rule);font-size:15px;font-weight:500;line-height:1;color:var(--s-ink-2);cursor:pointer;
  transition:box-shadow 160ms var(--ease-out),color 160ms var(--ease-out)}
.pg-roadmap-filter[aria-pressed="true"]{box-shadow:inset 0 0 0 2px var(--s-ink);color:var(--s-ink)}
@media (any-hover:hover){.pg-roadmap-filter:hover{color:var(--s-ink);box-shadow:inset 0 0 0 1px var(--s-ink-3)}.pg-roadmap-filter[aria-pressed="true"]:hover{box-shadow:inset 0 0 0 2px var(--s-ink)}}
.pg-roadmap-count{font-family:var(--font-mono);font-size:13px;line-height:1.4;color:var(--s-ink-3)}

/* each item: the planned scope under the one line, the ask link at the foot of the cell */
.pg-roadmap-item[hidden]{display:none}
.pg-roadmap-scope{margin-top:14px;max-width:38ch;font-size:15px;line-height:1.55;color:var(--s-ink-2);text-wrap:pretty}
.pg-roadmap-ask{margin-top:auto;padding-top:24px;font-size:16px}

/* under the list: the two status words, the limits callout and the changelog link */
.pg-roadmap-after{display:grid;grid-template-columns:repeat(var(--pg-cols),minmax(0,1fr));column-gap:var(--pg-gap);row-gap:28px;margin-top:48px;align-items:start}
.pg-roadmap-defs{grid-column:1/span 6;display:grid;gap:14px}
.pg-roadmap-def{display:grid;grid-template-columns:120px minmax(0,1fr);gap:4px 16px;align-items:baseline}
.pg-roadmap-def dt{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:13px;font-weight:500;line-height:1.4;color:var(--s-ink)}
.pg-roadmap-def dd{margin:0;font-size:16px;line-height:1.5;color:var(--s-ink-2)}
.pg-roadmap-callout{grid-column:8/span 5}
.pg-roadmap-after>.cy-links{grid-column:1/-1}
@media (max-width:899px){.pg-roadmap-defs,.pg-roadmap-callout{grid-column:1/-1}}
@media (max-width:519px){.pg-roadmap-def{grid-template-columns:minmax(0,1fr)}}

/* tell us: the form in cols 1 to 6, the three steps and the note in cols 8 to 12 */
.pg-roadmap-suggest{display:grid;grid-template-columns:repeat(var(--pg-cols),minmax(0,1fr));column-gap:var(--pg-gap);row-gap:28px;align-items:start}
.pg-roadmap-formwrap{grid-column:1/span 6;min-width:0}
.pg-roadmap-aside{grid-column:8/span 5;min-width:0}
.pg-roadmap-note-box{margin-top:32px}
@media (max-width:899px){.pg-roadmap-formwrap,.pg-roadmap-aside{grid-column:1/-1}}
.pg-roadmap-form{display:grid;gap:24px}
.pg-roadmap-form[hidden],.pg-roadmap-draft[hidden],.pg-roadmap-nojs[hidden]{display:none}
.pg-roadmap-field{display:grid;gap:8px}
.pg-roadmap-field label{font-size:16px;font-weight:500;line-height:1.4;color:var(--s-ink)}
.pg-roadmap-opt{font-weight:400;color:var(--s-ink-3)}
.pg-roadmap-field :is(input,select,textarea){box-sizing:border-box;width:100%;min-height:48px;padding:12px 14px;border:0;border-radius:10px;
  background:var(--s-card);box-shadow:inset 0 0 0 1px var(--pg-rule);font:inherit;font-size:17px;line-height:1.4;color:var(--s-ink);
  transition:box-shadow 160ms var(--ease-out)}
.pg-roadmap-field select{appearance:none;-webkit-appearance:none;padding-right:44px;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--s-ink-2) 50%),linear-gradient(135deg,var(--s-ink-2) 50%,transparent 50%);
  background-position:calc(100% - 22px) 50%,calc(100% - 16px) 50%;background-size:6px 6px,6px 6px;background-repeat:no-repeat}
.pg-roadmap-field textarea{min-height:128px;resize:vertical}
@media (any-hover:hover){.pg-roadmap-field :is(input,select,textarea):hover{box-shadow:inset 0 0 0 1px var(--s-ink-3)}}
.pg-roadmap-field :is(input,select,textarea):focus-visible{outline:3px solid #2757C9;outline-offset:2px}
.pg-roadmap-field [aria-invalid="true"]{box-shadow:inset 0 0 0 2px var(--s-ink)}
.pg-roadmap-help{font-size:14px;line-height:1.5;color:var(--s-ink-3)}
.pg-roadmap-note{font-size:15px;line-height:1.5;color:var(--s-ink-2)}
.pg-roadmap-error{font-size:15px;font-weight:500;line-height:1.5;color:var(--s-ink)}
.pg-roadmap-error:empty{display:none}
.pg-roadmap-form .cy-btn{justify-self:start}

/* the prepared draft */
.pg-roadmap-draft{margin-top:32px;padding:28px;background:var(--s-card);box-shadow:inset 0 0 0 1px var(--pg-rule)}
.pg-roadmap-draft:focus-visible{outline:3px solid #2757C9;outline-offset:4px}
.pg-roadmap-draft__t{font-size:22px;font-weight:500;letter-spacing:-.02em;line-height:1.3;color:var(--s-ink)}
.pg-roadmap-draft__d{margin-top:8px;font-size:16px;line-height:1.5;color:var(--s-ink-2)}
.pg-roadmap-draft__text{margin-top:20px;padding:16px;background:var(--s-raised);font-family:var(--font-mono);font-size:14px;line-height:1.55;color:var(--s-ink);
  white-space:pre-wrap;overflow-wrap:anywhere}
.pg-roadmap-draft__acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}
.pg-roadmap-feedback{margin-top:12px;font-size:15px;line-height:1.5;color:var(--s-ink-2)}
.pg-roadmap-feedback:empty{display:none}
.pg-roadmap-nojs{font-size:17px;line-height:1.55;color:var(--s-ink-2)}
@media (max-width:519px){.pg-roadmap-draft{padding:20px 16px}}