/* The capability menu. Loaded after shell.css and styles.css, which supply the tokens and the page ground. */
.menu-main { width: min(1200px, 100% - 2 * var(--gutter)); }
.menu-main :focus-visible { outline: 2px solid var(--vessco-blue); outline-offset: 2px; }

/* Filters: one quiet panel on wide screens, a drawer under 760 px. */
.menu-toolbar { display: none; }
.menu-filter-toggle { display: none; }
.menu-filters { display: grid; gap: 16px; padding: 18px 20px; background: #f3f6fb; }
.menu-filters-head { display: none; }
.menu-row-top { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: flex-end; }
.menu-row-chips { display: flex; flex-wrap: wrap; gap: 14px 36px; }
.menu-field { display: grid; gap: 6px; }
.menu-field--grow { flex: 1 1 260px; }
.menu-label { color: var(--ink-2); font: 600 .86rem var(--text); }
.menu-search, .menu-field select {
  width: 100%; min-height: 44px; padding: 8px 12px; border: 1px solid #b6bbc2; border-radius: 0; background: var(--paper); color: var(--ink); font: 400 1rem var(--text);
}
.menu-search { padding-left: 38px; background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%235a6068' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='8.5' cy='8.5' r='5.5'/%3E%3Cpath d='M13 13l4 4'/%3E%3C/svg%3E") no-repeat 12px 50% / 18px 18px; }
.menu-search:focus, .menu-field select:focus { border-color: var(--vessco-blue); box-shadow: 0 0 0 3px rgba(0, 70, 173, .14); outline: none; }
.menu-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.menu-chips .menu-label { flex-basis: 100%; }
.menu-chip, .menu-seg-btn {
  min-height: 36px; padding: 4px 14px; border: 1px solid #b9c3d3; background: var(--paper); color: var(--ink-2);
  font: 500 .9rem var(--text); cursor: pointer; transition: border-color .15s ease, background-color .15s ease;
}
.menu-chip:hover, .menu-seg-btn:hover { border-color: var(--vessco-blue); color: var(--vessco-blue); }
.menu-chip[aria-pressed="true"], .menu-seg-btn[aria-pressed="true"] { background: var(--vessco-blue); border-color: var(--vessco-blue); color: var(--paper); }
.menu-seg { display: inline-flex; }
.menu-seg-btn { min-height: 40px; padding: 4px 18px; font-weight: 600; }
.menu-seg-btn + .menu-seg-btn { margin-left: -1px; }
.menu-link { min-height: 36px; padding: 0; background: none; border: 0; color: var(--vessco-blue); font: 600 .9rem var(--text); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.menu-link:disabled { color: #9aa1aa; cursor: default; }

/* The count and the selection on one bar. */
.menu-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; margin: 24px 0 12px; }
.menu-status { margin: 0; }
.menu-count { margin: 0; color: var(--ink); font-weight: 600; }
.menu-selbar { flex: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin: 0; padding: 0; }
.menu-selected { color: var(--ink-2); font-weight: 500; }
.menu-exports { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-left: auto; }
.menu-hint { order: -1; color: var(--muted); font-size: .9rem; }

/* Capabilities: one ruled table in the list view, site cards in the card view. */
.menu-list { display: grid; }
.menu-list.is-list { border-top: 2px solid var(--ink); }
.menu-list.is-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.menu-item.is-target { outline: 3px solid var(--vessco-orange); outline-offset: 2px; }
.menu-list-head, .menu-row-toggle { grid-template-columns: minmax(0, 2.6fr) minmax(0, 1.25fr) minmax(0, 1.25fr) 3.2rem minmax(0, 1.1fr) 18px; }
.menu-list-head {
  display: grid; gap: 12px; padding: 10px 12px 10px 44px; border-bottom: 1px solid var(--rule);
  color: var(--muted); font: 600 .8rem var(--text);
}
.menu-list-head span:first-child { display: none; }
.menu-row { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: start; border-bottom: 1px solid var(--rule); background: var(--paper); transition: background-color .15s ease; }
.menu-row:hover { background: #f8f9fb; }
.menu-check { display: grid; place-items: center; min-width: 44px; min-height: 56px; cursor: pointer; }
.menu-check input { width: 18px; height: 18px; accent-color: var(--vessco-blue); }
.menu-row-toggle {
  display: grid; gap: 12px; align-items: center; width: 100%;
  min-height: 56px; padding: 10px 12px 10px 0; background: none; border: 0; text-align: left; color: var(--ink-2); font: 400 .95rem var(--text); cursor: pointer;
}
.menu-row-toggle::after {
  content: ""; justify-self: end; width: 7px; height: 7px; margin-right: 4px; border: solid var(--vessco-blue); border-width: 0 2px 2px 0;
  transform: rotate(45deg); transition: transform .2s ease;
}
.menu-row-toggle[aria-expanded="true"]::after { transform: rotate(-135deg); }
.menu-row-main { display: grid; gap: 3px; }
.menu-row-title { color: var(--ink); font: 700 1rem/1.3 var(--display); }
.menu-row-toggle:hover .menu-row-title { color: var(--vessco-blue); }
.menu-row-part, .menu-card-part { color: var(--muted); font-size: .85rem; }
.menu-row-scope { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 500; }
.menu-row-scope::before { content: ""; flex: none; width: 8px; height: 8px; background: var(--vessco-blue); }
.menu-row-scope[data-scope="optional"]::before { background: var(--vessco-orange); }
.menu-row-scope[data-scope="future"]::before { background: var(--paper); box-shadow: inset 0 0 0 2px #7d8590; }
.menu-row-size { color: var(--ink); font: 600 .95rem var(--display); }
.menu-row-pick { color: var(--vessco-blue); font-weight: 600; font-size: .88rem; }
.menu-detail { grid-column: 1 / -1; display: grid; gap: 14px; max-width: 78ch; padding: 4px 16px 22px 44px; }
.menu-detail-lead { margin: 0; color: var(--ink); font-size: 1.02rem; }
.menu-detail-block h4 { margin: 0 0 4px; color: var(--ink); font: 700 .92rem var(--display); }
.menu-detail-block p, .menu-detail-block ul { margin: 0; }
.menu-detail-block ul { padding-left: 18px; }
.menu-detail a { color: var(--vessco-blue); text-underline-offset: 3px; }
.menu-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.menu-tags li { padding: 2px 8px; background: #eef1f5; color: var(--ink-2); font-size: .82rem; }
.menu-detail .sh-button, .menu-card .sh-button { width: fit-content; }

.menu-card { display: grid; align-content: start; gap: 8px; padding: 12px 18px 18px; border: 1px solid var(--rule); border-top: 3px solid var(--vessco-orange); background: var(--paper); }
.menu-card-top { display: flex; align-items: flex-start; gap: 4px; margin-left: -12px; }
.menu-card-title { margin: 0; padding-top: 12px; color: var(--ink); font: 700 1.08rem/1.3 var(--display); }
.menu-card-kicker { margin: 0; color: var(--vessco-blue); font-weight: 600; font-size: .88rem; }
.menu-card-part { margin: 0; }
.menu-card-summary { margin: 0; }
.menu-card-pick { min-height: 0; }
.menu-card-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 4px; }
.menu-card-comments { color: var(--muted); font-size: .88rem; }
.menu-empty { display: grid; gap: 12px; justify-items: start; padding: 28px 24px; border: 1px dashed #b6bbc2; }
.menu-empty p { margin: 0; color: var(--ink); font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .menu-row, .menu-row-toggle::after, .menu-chip, .menu-seg-btn { transition: none; } }

@media (max-width: 1000px) {
  .menu-list-head, .menu-row-toggle { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) 3rem minmax(0, 1fr) 18px; }
  .menu-list-head span:nth-child(4), .menu-row-cat { display: none; }
}

/* Narrow: one button opens the filters as a drawer below the top bar. */
@media (max-width: 760px) {
  .menu-toolbar { display: flex; margin: 0 0 4px; }
  .menu-filter-toggle {
    display: inline-flex; align-items: center; min-height: 44px; padding: 6px 16px; background: var(--paper); border: 1px solid var(--vessco-blue);
    color: var(--vessco-blue); font: 700 .9rem var(--display); cursor: pointer;
  }
  .menu-filter-toggle[aria-expanded="true"] { background: var(--vessco-blue); color: var(--paper); }
  .menu-filters { display: none; }
  .menu-filters.is-open {
    display: grid; align-content: start; position: fixed; top: calc(var(--shell-h) + 3px); right: 0; bottom: 0; left: 0; z-index: 25;
    overflow-y: auto; overscroll-behavior: contain; padding: 16px; background: var(--paper); border-top: 4px solid var(--vessco-orange);
  }
  .menu-filters-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .menu-filters-head h2 { margin: 0; color: var(--ink); font: 700 1.2rem var(--display); }
  .menu-chip { min-height: 44px; }
  .menu-head { gap: 16px; }
  .menu-bar { flex-direction: column; align-items: stretch; gap: 8px; margin-top: 16px; }
  .menu-selbar { gap: 8px 16px; }
  .menu-exports { flex-basis: 100%; }
  .menu-exports .sh-button { flex: 1; }
  .menu-hint { flex-basis: 100%; order: 2; }
  .menu-list.is-cards { grid-template-columns: minmax(0, 1fr); }
  .menu-list-head { display: none; }
  .menu-row-toggle { grid-template-columns: minmax(0, 1fr) auto 18px; row-gap: 6px; }
  .menu-row-main { grid-column: 1 / 3; grid-row: 1; }
  .menu-row-scope { grid-column: 1; }
  .menu-row-size { grid-column: 2; }
  .menu-row-size::before { content: "Size "; color: var(--muted); font: 400 .85rem var(--text); }
  .menu-row-pick { grid-column: 1 / -1; }
  .menu-row-pick:empty { display: none; }
  .menu-row-toggle::after { grid-column: 3; grid-row: 1; align-self: start; margin-top: 6px; }
  .menu-detail { padding-left: 16px; }
  .menu-exports { margin-left: 0; }
}

/* Printing: the selection block is built for the print stylesheet only. */
.print-selection { display: none; }

/* The First engagement page: a contents column beside the sections on wide screens. */
.eng-main { width: min(1200px, 100% - 2 * var(--gutter)); }
.eng-main :focus-visible { outline: 2px solid var(--vessco-blue); outline-offset: 2px; }
.eng-layout { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 56px; align-items: start; }
.eng-body { min-width: 0; max-width: 820px; }

/* On this page */
.eng-toc { position: sticky; top: calc(var(--shell-h) + 24px); max-height: calc(100vh - var(--shell-h) - 48px); overflow-y: auto; }
.eng-toc-title { list-style: none; margin: 0 0 10px; color: var(--ink); font: 700 .95rem var(--display); cursor: default; }
.eng-toc-title::-webkit-details-marker { display: none; }
.eng-toc ol { margin: 0; padding: 0; list-style: none; border-left: 1px solid var(--rule); }
.eng-toc a {
  display: flex; align-items: baseline; gap: 8px; margin-left: -1px; padding: 6px 0 6px 14px; border-left: 2px solid transparent;
  color: var(--ink-2); font: 400 .9rem/1.35 var(--text); text-decoration: none;
}
.eng-toc a:hover { color: var(--vessco-blue); }
.eng-toc a[aria-current] { border-left-color: var(--vessco-orange); color: var(--ink); font-weight: 600; }
.eng-toc-n { flex: none; min-width: 1.1em; color: var(--vessco-orange); font: 700 .85rem var(--display); }

/* Sections */
.eng-section { padding: 40px 0; border-top: 1px solid var(--rule); scroll-margin-top: calc(var(--shell-h) + 16px); }
.eng-section:first-child { padding-top: 0; border-top: 0; }
.eng-section > * + * { margin-top: 20px; }
.eng-block p, .eng-needs p, .eng-lead p, .eng-cap p, .eng-split-text p, .eng-diagram p { margin: 0; }
.eng-section > p { margin-bottom: 0; }
.eng-sec-head + * { margin-top: 14px; }
.eng-deps { padding-top: 4px; }
.eng-sec-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.eng-title { margin: 0; color: var(--ink); font: 700 clamp(1.45rem, 2.2vw, 1.8rem)/1.2 var(--display); letter-spacing: -.015em; text-wrap: balance; }
.eng-num {
  flex: none; display: grid; place-items: center; width: 40px; height: 40px; background: var(--vessco-orange); color: var(--ink);
  font: 700 1.1rem var(--display);
}
.eng-tag { padding: 3px 10px; border: 1px solid var(--vessco-orange); color: #a8420a; font: 600 .82rem var(--text); }
.eng-intro { max-width: 66ch; color: var(--ink); font-size: 1.1rem; line-height: 1.6; text-wrap: pretty; }
.eng-block h3, .eng-needs h3 { margin: 0 0 6px; color: var(--ink); font: 700 1rem/1.3 var(--display); }
.eng-block ul, .eng-section > ol { margin: 0; padding-left: 20px; }
.eng-block li + li, .eng-section li + li { margin-top: 6px; }
.eng-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 40px; }

/* Engagement overview: the summary, the six steps as a strip joined by a rule, then three facts. */
.eng-opening .eng-lead { display: grid; gap: 12px; max-width: 70ch; }
.eng-opening .eng-lead p { margin: 0; color: var(--ink-2); line-height: 1.6; text-wrap: pretty; }
.eng-opening .eng-lead .eng-overview-lead { color: var(--ink); font-size: 1.2rem; }
.eng-overview-steps { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; margin: 36px 0 0 !important; padding: 0 !important; list-style: none; }
.eng-overview-steps::before { content: ""; position: absolute; top: 15px; left: 16px; right: 16px; border-top: 2px solid var(--rule); }
.eng-overview-steps li { position: relative; margin: 0 !important; }
.eng-overview-steps a { display: grid; gap: 6px; color: inherit; text-decoration: none; }
.eng-overview-mark { justify-self: start; min-width: 32px; height: 32px; padding: 0 8px; display: grid; place-items: center; background: var(--paper); border: 2px solid var(--vessco-blue); color: var(--vessco-blue); font: 700 .85rem var(--display); }
.eng-overview-steps li:first-child .eng-overview-mark { border-color: var(--vessco-orange); color: var(--vessco-orange); }
.eng-overview-name { color: var(--ink); font: 700 .98rem/1.3 var(--display); overflow-wrap: anywhere; hyphens: auto; }
.eng-overview-line { color: var(--muted); font-size: .92rem; line-height: 1.5; }
.eng-overview-steps a:hover .eng-overview-name, .eng-overview-steps a:focus-visible .eng-overview-name { color: var(--vessco-blue); text-decoration: underline; text-underline-offset: 3px; }
.eng-overview-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 40px; margin: 28px 0 0; padding-top: 20px; border-top: 1px solid var(--rule); }
.eng-overview-facts dt { margin: 0 0 6px; color: var(--ink); font: 700 .95rem var(--display); }
.eng-overview-facts dd { margin: 0; color: var(--ink-2); line-height: 1.55; }
/* Too narrow for six columns: three per row, without the joining rule. */
@media (max-width: 1240px) and (min-width: 761px) {
  .eng-overview-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 28px; }
  .eng-overview-steps::before { display: none; }
}
@media (max-width: 760px) {
  .eng-overview-steps { grid-template-columns: minmax(0, 1fr); }
  .eng-overview-steps::before { top: 16px; bottom: 16px; left: 37px; right: auto; border-top: 0; border-left: 2px solid var(--rule); }
  .eng-overview-steps a { grid-template-columns: 76px minmax(0, 1fr); column-gap: 14px; }
  .eng-overview-mark { grid-row: span 2; justify-self: center; }
  .eng-overview-facts { grid-template-columns: minmax(0, 1fr); }
}

/* Done looks like: a checklist. */
.eng-done { display: grid; gap: 8px; margin: 0; padding: 0 !important; list-style: none; }
.eng-done li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; margin: 0 !important; }
.eng-done .eng-icon { width: 20px; height: 20px; margin-top: 2px; fill: none; stroke: var(--vessco-blue); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.eng-needs { padding: 16px 20px; background: #f3f6fb; }
.eng-deps { color: var(--muted); font-size: .95rem; }
.eng-deps a { color: var(--vessco-blue); font-weight: 600; text-underline-offset: 3px; }

/* Diagrams */
.eng-diagram { margin: 0; min-width: 0; }
.eng-diagram svg { display: block; width: 100%; max-width: 420px; height: auto; margin: 0 auto; }
.eng-diagram figcaption { margin-top: 6px; color: var(--muted); font-size: .88rem; text-align: center; }
.eng-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: 24px 40px; align-items: center; }
.eng-split-text > * + * { margin-top: 14px; }
.eng-stages { margin: 0; padding-left: 22px; }
.eng-stages li::marker { color: var(--vessco-orange); font: 700 1rem var(--display); }

.eng-scale { counter-reset: scale; display: grid; gap: 0; margin: 0; padding: 0 !important; list-style: none; border-top: 1px solid var(--rule); }
.eng-scale li { counter-increment: scale; display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; row-gap: 2px; margin: 0 !important; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.eng-scale li::before { content: counter(scale); grid-row: span 3; align-self: start; min-width: 32px; height: 32px; display: grid; place-items: center; border: 2px solid var(--vessco-blue); color: var(--vessco-blue); font: 700 .85rem var(--display); }
.eng-scale-title { color: var(--ink); font: 700 1.02rem/1.3 var(--display); text-decoration: none; }
.eng-scale-title:hover { color: var(--vessco-blue); text-decoration: underline; text-underline-offset: 3px; }
.eng-scale-scope { color: var(--vessco-blue); font-weight: 600; font-size: .88rem; }
.eng-scale-line { color: var(--ink-2); line-height: 1.5; }
.eng-roles { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.eng-roles li { margin: 0 !important; padding-top: 12px; border-top: 1px solid var(--rule); }
.eng-roles li:first-child { padding-top: 0; border-top: 0; }
.eng-roles strong { color: var(--ink); font-weight: 600; }

/* Optional extensions and future opportunities: the site card, white with an orange top bar. */
.eng-caps { list-style: none; padding: 0 !important; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.eng-cap { margin: 0 !important; padding: 16px 18px 18px; background: var(--paper); border: 1px solid var(--rule); border-top: 3px solid var(--vessco-orange); display: grid; align-content: start; gap: 6px; }
.eng-cap-title { color: var(--ink); font: 700 1.02rem/1.3 var(--display); text-decoration: none; }
.eng-cap-title:hover { color: var(--vessco-blue); text-decoration: underline; text-underline-offset: 3px; }
.eng-cap-scope { color: var(--vessco-blue); font-weight: 600; font-size: .88rem; }
.eng-cap-summary { font-size: .95rem; }

/* Next decision: the close of the page, with its two ways on. */
.eng-next { margin-top: 8px; padding: 36px clamp(20px, 4vw, 40px) 32px; background: var(--vessco-blue); color: #dfe7f6; border-top: 0; }
.eng-next .eng-title { color: var(--paper); }
.eng-next .eng-intro { color: var(--paper); }
.eng-links { display: flex; flex-wrap: wrap; gap: 10px; }
.eng-link--quiet { background: transparent; border-color: rgba(255, 255, 255, .7); color: var(--paper); border-width: 1px; }
.eng-link--quiet:hover { background: var(--paper); border-color: var(--paper); color: var(--vessco-blue); }
.eng-next :focus-visible { outline-color: var(--paper); }
.eng-next .eng-talk-toggle { color: var(--paper); border-color: rgba(255, 255, 255, .45); }
.eng-next .eng-talk[open] { background: var(--paper); color: var(--ink-2); }
.eng-next .eng-talk[open] .eng-talk-toggle { color: var(--vessco-blue); }

/* Comments: closed by default, one quiet toggle that shows the count. */
.eng-talk { margin-top: 24px; }
.eng-talk-toggle {
  display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 4px 12px 4px 10px; list-style: none; cursor: pointer;
  border: 1px solid var(--rule); color: var(--vessco-blue); font: 600 .88rem var(--text); user-select: none;
  transition: border-color .15s ease, background-color .15s ease;
}
.eng-talk-toggle::-webkit-details-marker { display: none; }
.eng-talk-toggle:hover { border-color: var(--vessco-blue); }
.eng-talk .eng-icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.eng-talk-chevron { width: 14px !important; height: 14px !important; transition: transform .2s ease; }
.eng-talk[open] .eng-talk-chevron { transform: rotate(90deg); }
.eng-talk-count:not(:empty) { min-width: 20px; padding: 0 6px; background: var(--vessco-orange); color: var(--ink); font: 700 .75rem/20px var(--display); text-align: center; }
.eng-talk[open] { padding: 0 0 4px; }
.eng-talk[open] .eng-talk-toggle { border-color: var(--vessco-blue); }
.eng-talk .thread { padding: 12px 0 0; background: transparent; }
@media (prefers-reduced-motion: reduce) { .eng-talk-chevron, .eng-talk-toggle { transition: none; } }

@media (max-width: 1079px) {
  .eng-layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .eng-body { max-width: none; }
  .eng-toc { position: static; max-height: none; margin: 0 0 28px; border: 1px solid var(--rule); }
  .eng-toc-title { display: flex; align-items: center; justify-content: space-between; min-height: 48px; margin: 0; padding: 0 16px; cursor: pointer; }
  .eng-toc-title::after { content: ""; width: 8px; height: 8px; margin-top: -4px; border: solid var(--vessco-blue); border-width: 0 2px 2px 0; transform: rotate(45deg); }
  .eng-toc-wrap[open] .eng-toc-title::after { margin-top: 4px; transform: rotate(-135deg); }
  .eng-toc ol { margin: 0 16px 14px; }
}
@media (max-width: 760px) {
  .eng-section { padding: 32px 0; }
  .eng-opening, .eng-grid, .eng-caps, .eng-split { grid-template-columns: minmax(0, 1fr); }
  .eng-opening .eng-lead p { font-size: 1.08rem; }
  .eng-num { width: 34px; height: 34px; font-size: 1rem; }
  .eng-next { padding: 28px 18px; }
}

/* The planning questions page. */
.q-main { width: min(900px, 100% - 2 * var(--gutter)); }
.q-main :focus-visible { outline: 2px solid var(--vessco-blue); outline-offset: 2px; }
.q-head { align-items: flex-end; }
.q-progress { display: grid; gap: 8px; min-width: 200px; }
.q-progress-text { margin: 0; color: var(--ink); font: 600 .95rem var(--text); }
.q-progress-bar { height: 6px; background: var(--rule); }
.q-progress-bar span { display: block; height: 100%; width: 0; background: var(--vessco-orange); transition: width .5s cubic-bezier(.22, 1, .36, 1); }

/* Filters: two chip groups; the status line under them stays pinned while the list scrolls. */
.q-filters { margin: 0; padding: 16px 18px 14px; background: #f3f6fb; scroll-margin-top: calc(var(--shell-h, 64px) + 16px); }
.q-filter-toggle { display: none; }
.q-chip-row { display: grid; gap: 12px; }
.q-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.q-chips-label { flex: 0 0 84px; color: var(--ink); font: 600 .88rem var(--text); }
.q-chip {
  min-height: 36px; padding: 4px 12px; border: 1px solid #b9c3d3; background: var(--paper); color: var(--ink-2);
  font: 500 .9rem var(--text); cursor: pointer; transition: border-color .15s ease, background-color .15s ease;
}
.q-chip:hover { border-color: var(--vessco-blue); color: var(--vessco-blue); }
.q-chip[aria-pressed="true"] { background: var(--vessco-blue); border-color: var(--vessco-blue); color: var(--paper); }
.q-chip-count { margin-left: 4px; font-weight: 400; opacity: .75; }
.q-filter-status {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin: 0 0 32px; padding: 10px 18px;
  background: rgba(255, 255, 255, .96); border-bottom: 1px solid var(--rule); position: sticky; top: calc(var(--shell-h, 64px) + 3px); z-index: 2;
}
.q-count { margin: 0; color: var(--ink-2); font-weight: 600; font-size: .95rem; }
.q-clear, .q-filter-jump { min-height: 32px; padding: 2px 4px; background: none; border: 0; color: var(--vessco-blue); font: 600 .9rem var(--text); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.q-clear[hidden], .q-empty[hidden], .q-group[hidden], .q-item[hidden] { display: none; }
.q-empty { display: grid; justify-items: center; gap: 14px; padding: 40px 24px; border: 1px dashed #b6bbc2; text-align: center; }
.q-empty p { margin: 0; color: var(--ink); font: 600 1.1rem var(--display); }

/* Groups and questions: the number in its own column, the answer under the question, Discuss in the footer. */
.q-group { margin: 0 0 40px; }
.q-group-title { margin: 0 0 4px; padding-bottom: 12px; color: var(--ink); font: 700 1.4rem/1.2 var(--display); letter-spacing: -.012em; border-bottom: 2px solid var(--ink); }
.q-item {
  position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 0 20px; padding: 24px 0;
  border-bottom: 1px solid var(--rule); scroll-margin-top: calc(var(--shell-h, 64px) + var(--q-filters-h, 0px) + 16px);
}
.q-num {
  display: grid; place-items: center; width: 44px; height: 44px; margin: 0; border: 2px solid var(--vessco-blue);
  color: var(--vessco-blue); font: 700 1rem var(--display);
}
.q-body { min-width: 0; }
.q-text { margin: 0 0 14px; padding-right: 110px; color: var(--ink); font: 600 1.06rem/1.5 var(--text); text-wrap: pretty; }
.q-label { display: block; margin: 0 0 6px; color: var(--ink-2); font: 600 .86rem var(--text); }
.q-answer textarea {
  display: block; width: 100%; min-height: 76px; padding: 10px 12px; border: 1px solid #b6bbc2; border-radius: 0; background: var(--paper);
  color: var(--ink); font: 400 1rem/1.5 var(--text); resize: vertical; box-sizing: border-box; transition: border-color .15s ease, box-shadow .15s ease;
}
.q-answer textarea:hover { border-color: #8e97a3; }
.q-answer textarea:focus { border-color: var(--vessco-blue); box-shadow: 0 0 0 3px rgba(0, 70, 173, .14); outline: none; }
.q-answered {
  position: absolute; top: 24px; right: 0; display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 3px 10px 3px 8px;
  background: #e8f0fb; color: var(--vessco-blue); font: 600 .82rem var(--text);
}
.q-answered::before { content: ""; width: 9px; height: 5px; margin-top: -3px; border: solid currentColor; border-width: 0 0 2px 2px; transform: rotate(-45deg); }
.q-answered[hidden] { display: none; }
.q-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px; margin-top: 8px; min-height: 36px; }
.q-status { margin: 0; color: var(--muted); font-size: .88rem; }
.q-discuss {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; margin-left: auto; padding: 0 2px; background: none; border: 0; color: var(--vessco-blue);
  font: 600 .9rem var(--text); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; cursor: pointer;
}
.q-discuss:hover { text-decoration-color: currentColor; }
.q-discuss::after { content: ""; width: 6px; height: 6px; margin-top: -3px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform .2s ease; }
.q-discuss[aria-expanded="true"]::after { margin-top: 3px; transform: rotate(-135deg); }
.q-thread[hidden] { display: none; }
.q-thread .thread { margin-top: 8px; padding: 14px 16px 16px; background: #f6f7f9; }

/* Ranking and choice answers. */
.q-rank-note { margin: 0 0 8px; color: var(--muted); font-size: .92rem; font-style: italic; }
.q-rank-note:empty { display: none; }
.q-rank { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 6px; counter-reset: rank; }
.q-rank li { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 6px 8px 6px 12px; border: 1px solid var(--rule); background: var(--paper); counter-increment: rank; }
.q-rank li::before { content: counter(rank); color: var(--vessco-orange); font: 700 1rem var(--display); }
.q-rank-label { color: var(--ink-2); }
.q-rank-buttons { display: flex; gap: 4px; }
.q-rank button { min-height: 36px; min-width: 56px; padding: 2px 10px; border: 1px solid #b9c3d3; background: var(--paper); color: var(--vessco-blue); font: 600 .88rem var(--text); cursor: pointer; }
.q-rank button:hover:not(:disabled) { border-color: var(--vessco-blue); }
.q-rank button:disabled { color: #9aa1aa; cursor: default; }
.q-choices { display: grid; gap: 12px 16px; margin: 0 0 16px; }
.q-field { display: grid; min-width: 0; }
.q-choices select { width: 100%; min-height: 44px; padding: 8px 12px; border: 1px solid #b6bbc2; border-radius: 0; background: var(--paper); color: var(--ink); font: 400 1rem var(--text); }
@media (prefers-reduced-motion: reduce) { .q-progress-bar span, .q-chip, .q-answer textarea, .q-discuss::after { transition: none; } }
@media (max-width: 760px) {
  .q-progress { width: 100%; }
  .q-filters { padding: 12px 14px; }
  .q-filter-status { position: static; margin: 0 0 28px; padding: 8px 2px 10px; }
  .q-filter-jump { display: none; }
  .q-filter-toggle {
    display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 44px; padding: 8px 14px;
    border: 1px solid var(--vessco-blue); background: var(--paper); color: var(--vessco-blue); font: 700 .95rem var(--display); text-align: left; cursor: pointer;
  }
  .q-filter-toggle::after { content: ""; width: 8px; height: 8px; margin-top: -4px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); }
  .q-filter-toggle[aria-expanded="true"]::after { margin-top: 4px; transform: rotate(-135deg); }
  .q-chip-row { display: none; margin-top: 12px; }
  .q-chip-row.is-open { display: grid; }
  .q-chips-label { flex: 1 0 100%; }
  .q-chip { min-height: 44px; }
  .q-item { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 20px 0; }
  .q-num { width: 36px; height: 36px; font-size: .92rem; }
  .q-answered { top: 20px; }
  .q-text { padding-right: 0; }
  .q-rank li { grid-template-columns: 20px minmax(0, 1fr); }
  .q-rank-buttons { grid-column: 2; }
}

/* Find what fits: the launcher bottom right, the drawer from the right over a dimmed page (under the Panel). */
.assist-launcher {
  position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 20;
  min-height: 48px; padding: 0 22px; border: 0; background: var(--vessco-orange); color: #1b1b1b;
  font: 700 .98rem var(--display); box-shadow: 0 10px 28px -10px rgba(0, 20, 60, .55); cursor: pointer;
}
.assist-launcher:hover { background: #ff8a45; }
.assist-launcher:focus-visible { outline: 3px solid var(--vessco-blue); outline-offset: 3px; }
.assist-layer { position: fixed; inset: 0; z-index: 45; }
.assist-layer[hidden] { display: none; }
.assist-scrim { position: absolute; inset: 0; background: rgba(10, 20, 40, .42); opacity: 0; transition: opacity .2s ease; }
.assist {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(440px, 92vw); display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  background: var(--paper); color: var(--ink-2); border-top: 6px solid var(--vessco-orange); box-shadow: -20px 0 50px -20px rgba(0, 20, 60, .5);
  transform: translateX(24px); opacity: 0; transition: transform .22s ease, opacity .22s ease;
}
.assist-layer.is-open .assist-scrim { opacity: 1; }
.assist-layer.is-open .assist { transform: none; opacity: 1; }
.assist-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px 12px; border-bottom: 1px solid var(--rule); }
.assist-title { margin: 0; color: var(--ink); font: 700 1.25rem var(--display); }
.assist-close { padding: 6px 2px; border: 0; background: none; color: var(--vessco-blue); font: 600 .95rem var(--text); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.assist-log { overflow-y: auto; padding: 16px 20px; display: grid; align-content: start; gap: 14px; }
.assist-intro { margin: 0; color: var(--muted); line-height: 1.5; }
.assist-question { justify-self: end; max-width: 88%; margin: 0; padding: 10px 14px; background: #eef3fb; color: var(--ink); line-height: 1.45; overflow-wrap: anywhere; }
.assist-answer { display: grid; gap: 10px; }
.assist-answer.is-waiting { color: var(--muted); font-style: italic; }
.assist-lead { margin: 0; color: var(--ink); line-height: 1.5; }
.assist-card { display: grid; gap: 8px; padding: 12px 14px; border: 1px solid var(--rule); border-left: 4px solid var(--vessco-blue); }
.assist-card-head { display: grid; gap: 4px; }
.assist-card-title { color: var(--ink); font: 700 .98rem/1.3 var(--display); }
.assist-card-scope { justify-self: start; padding: 2px 8px; border: 1px solid currentColor; color: var(--vessco-blue); font: 600 .78rem var(--text); }
.assist-card-scope[data-scope="optional"] { color: #6b4e00; }
.assist-card-scope[data-scope="future"] { color: #5a6068; }
.assist-card-why { margin: 0; line-height: 1.5; }
.assist-card-acts { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.assist-open, .assist-select {
  padding: 4px 0; border: 0; background: none; color: var(--vessco-blue); font: 600 .9rem var(--text); text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.assist-select[aria-disabled="true"] { color: var(--muted); text-decoration: none; cursor: default; }
.assist-show, .assist-retry { justify-self: start; }
.assist-unmet { margin: 0; padding: 10px 12px; background: #fdf3ea; color: var(--ink); line-height: 1.5; }
.assist-error { margin: 0; color: #b42318; line-height: 1.5; }
.assist-form { display: grid; gap: 8px; padding: 14px 20px 18px; border-top: 1px solid var(--rule); }
.assist-label { color: var(--ink); font: 600 .95rem var(--text); }
.assist-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: end; }
.assist-input { width: 100%; min-height: 72px; padding: 8px 10px; border: 1px solid #b6bbc2; border-radius: 0; font: 400 1rem/1.4 var(--text); resize: vertical; }
.assist-input:focus-visible, .assist-close:focus-visible, .assist-open:focus-visible, .assist-select:focus-visible { outline: 2px solid var(--vessco-blue); outline-offset: 2px; }
.assist-standing { margin: 0; color: var(--muted); font-size: .85rem; }
.menu-matches { display: inline-flex; align-items: center; gap: 8px; margin-left: 12px; padding: 4px 6px 4px 10px; background: #eef3fb; color: var(--ink); font: 600 .88rem var(--text); }
.menu-matches[hidden] { display: none; }
.menu-matches-remove { padding: 2px 6px; border: 0; background: none; color: var(--vessco-blue); font: 600 .85rem var(--text); text-decoration: underline; cursor: pointer; }
.menu-count:focus { outline: none; }
@media (max-width: 760px) {
  .assist { width: 100vw; }
  .menu-matches { margin: 6px 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .assist, .assist-scrim { transition: none; }
}
@media print {
  .assist-launcher, .assist-layer { display: none !important; }
}
/* Room under the list so the Find what fits launcher never covers the last capability. */
#menu { padding-bottom: 88px; }