/* The Issue button (Karan 23/10/2026) — the rail foot pinned to the bottom with
   [Issue] [Figures] on one row, and the Issue capture dialog (issue-capture.js).
   Tokens only: no bare hex, weights 400/500. */

/* ── The rail: the foot stays put, the menu scrolls above it ─────────────── */
.rail { overflow: hidden; }
.rail-nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin;
  /* room for an active item's 1px ring, which the scroller would otherwise clip */
  padding: 1px; margin-left: -1px; margin-right: -1px; }
.rail-foot { flex: none; }

/* One row, two equal-height buttons: Issue, then Figures (when the role has it). */
.rail-foot-row { display: flex; gap: 5px; align-self: stretch; width: auto; margin: 0 -8px 12px; }
.rail-foot-row > #fig-toggle-slot { flex: 1 1 auto; min-width: 0; display: flex; }
.rail-foot-row > #fig-toggle-slot:empty { display: none; }
.rail .rail-foot-row .rail-issue,
.rail .rail-foot-row .fig-toggle {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  min-height: 36px; padding: 0 7px; border: 1px solid var(--hair); border-radius: var(--radius-md);
  background: var(--surface); color: var(--ink-2); font-family: var(--font-sans); font-size: 11.5px;
  font-weight: var(--weight-regular); white-space: nowrap; cursor: pointer; }
.rail .rail-foot-row .fig-toggle { width: 100%; min-width: 0; overflow: hidden; }
.rail .rail-foot-row .rail-issue { flex: none; }
.rail-foot-row:has(#fig-toggle-slot:empty) .rail-issue { flex: 1 1 auto; }
.rail .rail-foot-row .rail-issue:hover, .rail .rail-foot-row .fig-toggle:hover { border-color: var(--hair-strong); color: var(--ink); }
.rail .rail-foot-row .fig-toggle .fig-state { margin-left: 0; }
.rail .rail-foot-row svg { flex: none; }
/* The narrow ASP rail (761–1180px, 188px wide): the eye and the state say it. */
@media (min-width: 761px) and (max-width: 1180px) {
  .rail .rail-foot-row .fig-toggle > span:nth-child(2) { display: none; }
}
/* A finger needs 44px (design lint rule 6). */
@media (pointer: coarse), (max-width: 760px) {
  .rail .rail-foot-row .rail-issue, .rail .rail-foot-row .fig-toggle { min-height: 44px; }
}
/* The contractor laptop rail lays its foot out as a grid: the row spans it. */
@media (min-width: 1280px) {
  body.tpl-contractor .rail-foot > .rail-foot-row { grid-column: 1 / -1; }
  body.tpl-contractor #fig-toggle-slot { margin-bottom: 0 !important; }
}

/* ── The Issue capture dialog ─────────────────────────────────────────────── */
.is-cap { position: fixed; inset: 0; z-index: 1300; display: flex; align-items: center; justify-content: center;
  padding: 24px; background: color-mix(in srgb, var(--ink) 38%, transparent); }
.is-cap-card { width: min(1320px, 100%); height: min(880px, 100%); display: grid; grid-template-columns: minmax(0, 1fr) 360px;
  background: var(--surface); border-radius: 16px; box-shadow: var(--shadow-dialog); overflow: hidden; }
.is-cap-shot { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--surface-sunk); }
.is-cap-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 12px 14px; border-bottom: 1px solid var(--hair); }
.is-cap-tools .seg button { min-height: 32px; }
.is-cap-hint { font-size: 12.5px; color: var(--ink-3); min-width: 0; }
.is-cap-canvaswrap { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 14px; overflow: hidden; }
.is-cap-canvaswrap canvas { display: block; max-width: 100%; max-height: 100%; border-radius: 6px; box-shadow: 0 0 0 1px var(--hair);
  cursor: crosshair; touch-action: none; background: var(--surface); }
.is-cap-side { display: flex; flex-direction: column; gap: 8px; padding: 22px 22px 18px; overflow-y: auto; min-height: 0; }
.is-cap-side h2 { margin: 0; font-size: var(--text-h3); font-weight: var(--weight-medium); letter-spacing: -0.02em; color: var(--ink); }
.is-cap-sub { margin: 0 0 8px; font-size: 13px; color: var(--ink-2); }
.is-cap-kind { align-self: flex-start; margin-bottom: 6px; }
.is-cap-side .f-label { margin-top: 4px; }
.is-cap-opt { color: var(--ink-3); font-weight: var(--weight-regular); text-transform: none; letter-spacing: 0; }
.is-cap-side textarea { resize: vertical; min-height: 92px; font-family: var(--font-sans); }
.is-cap-ctx { margin-top: 6px; font-size: 12.5px; color: var(--ink-2); border-top: 1px solid var(--hair); padding-top: 10px; }
.is-cap-ctx summary { cursor: pointer; color: var(--ink-2); }
.is-cap-ctx dl { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 6px 10px; margin: 10px 0 0; }
.is-cap-ctx dt { color: var(--ink-3); }
.is-cap-ctx dd { margin: 0; min-width: 0; overflow-wrap: anywhere; color: var(--ink); }
.is-cap-ctx ul { margin: 0; padding-left: 16px; display: flex; flex-direction: column; gap: 4px; }
.is-cap-note { margin: 4px 0 0; min-height: 18px; font-size: 13px; color: var(--status-error); }
.is-cap-actions { display: flex; gap: 8px; margin-top: auto; padding-top: 10px; }
.is-cap-key { font-size: 11px; opacity: 0.7; margin-left: 4px; }
.is-cap-toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 1310; padding: 10px 16px;
  border-radius: 999px; background: var(--ink-fill); color: var(--ink-fill-ink); font-size: 13px; box-shadow: var(--shadow-dialog); }

/* A phone: the whole screen, the screenshot above the form. */
@media (max-width: 760px) {
  .is-cap { padding: 0; align-items: stretch; }
  .is-cap-card { height: 100%; border-radius: 0; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(180px, 38vh) minmax(0, 1fr); }
  .is-cap-tools { padding: calc(10px + env(safe-area-inset-top, 0px)) 12px 10px; }
  .is-cap-tools .btn, .is-cap-tools .seg button { min-height: 44px; }
  .is-cap-hint { flex-basis: 100%; font-size: 12px; }
  .is-cap-side { padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px)); }
  .is-cap-actions .btn { min-height: 44px; flex: 1; }
}

/* ── Help › Issues: what this company sent with the Issue button ─────────── */
.is4-probs { margin-top: 40px; }
.is4-probs-sub { margin: 6px 0 0; max-width: 72ch; font-size: var(--text-body); color: var(--ink-2); }
.is4-detail { font-size: 13.5px; color: var(--ink-2); white-space: pre-wrap; max-width: 104ch; }
.is4-state.seen { background: var(--blue-tint); color: var(--link); }