/* PPAP Auto-Ballooning
   ---------------------------------------------------------------------------
   A header menu with routed views. Everything is driven from the tokens in
   :root, so spacing and colour stay consistent across the sign-in screen, the
   drawing list and the editor. */

:root {
  --ink: #16202e;
  --ink-2: #33415c;
  --muted: #64748b;
  --line: #e4e9f1;
  --line-2: #eef2f7;
  --bg: #f7f9ff;
  --card: #ffffff;
  --navy: #0f1c30;
  --navy-2: #16273f;
  --accent: #1a46b8;
  --accent-ink: #123090;
  --accent-soft: #e8eeff;
  --crit: #c4161c;
  --ok: #157347;
  --warn-bg: #fffbeb;
  --warn-ink: #92400e;
  --r: 10px;
  --r-lg: 14px;
  --shadow: 0 1px 2px rgba(15, 28, 48, .05), 0 8px 24px rgba(15, 28, 48, .06);
}

/* APQP workspace */
.apqp-workspace { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; margin-top: 24px; align-items: start; }
#apqpWork { min-width: 0; }
#apqpWork .apqp-timeline { min-width: 0; }
#apqpWork .apqp-timeline .apqp-row-actions { flex-wrap: wrap; align-items: end; }
#apqpWork .apqp-timeline .apqp-gantt { position: relative; overflow: auto; height: 460px; max-width: 100%; border: 1px solid var(--line); margin: 16px 0; }
#apqpWork .apqp-timeline [data-gantt-space] { position: relative; }
#apqpWork .apqp-timeline details { margin: 16px 0; }
#apqpWork .apqp-timeline fieldset { border: 1px solid var(--line); border-radius: var(--r); min-width: 0; }
#apqpWork .apqp-weekdays { display: flex; flex-wrap: wrap; gap: 12px 20px; }
#apqpWork .apqp-weekdays label { display: flex; align-items: center; gap: 6px; }
#apqpWork .apqp-weekdays input { width: auto; }
#apqpWork .apqp-calendar-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; margin: 12px 0; }
#apqpWork .apqp-calendar-row label { display: grid; gap: 6px; min-width: 0; }
#apqpWork .apqp-timeline [data-task][aria-pressed="true"] { outline: 2px solid var(--ink); outline-offset: 2px; }
#apqpWork .apqp-timeline [data-task]:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
@media (max-width: 640px) {
  #apqpWork .apqp-calendar-row label { flex: 1 1 100%; }
  #apqpWork .apqp-timeline input, #apqpWork .apqp-timeline select { max-width: 100%; min-width: 0; }
}
#apqpWork .apqp-secondary-nav { margin-left: auto; }
#apqpWork button:focus-visible, #apqpWork input:focus-visible, #apqpWork select:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
#apqpWork .apqp-project-list { border: 1px solid var(--line); border-radius: var(--r); background: var(--card); overflow: hidden; }
#apqpWork .apqp-project-list table { width: 100%; table-layout: fixed; }
#apqpWork .apqp-project-list th:first-child { width: 36%; }
#apqpWork .apqp-project-list td { vertical-align: middle; overflow-wrap: anywhere; }
#apqpWork .apqp-project-list caption { padding: 12px 16px; }
#apqpWork .apqp-project-link { padding: 0; text-align: left; white-space: normal; color: var(--accent); font-weight: 650; }
#apqpWork .apqp-project-list progress { display: block; width: 100%; max-width: 140px; margin-top: 8px; accent-color: var(--accent); }
@media (max-width: 640px) {
  #apqpWork .apqp-list-tools .field { max-width: none; flex: 1 1 100%; }
  #apqpWork .apqp-project-list table, #apqpWork .apqp-project-list tbody, #apqpWork .apqp-project-list tr, #apqpWork .apqp-project-list td { display: block; width: auto; }
  #apqpWork .apqp-project-list thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  #apqpWork .apqp-project-list caption { display: block; }
  #apqpWork .apqp-project-list tr { padding: 12px 16px; border-top: 1px solid var(--line); }
  #apqpWork .apqp-project-list td { padding: 6px 0; border: 0; }
  #apqpWork .apqp-project-list td[data-label]::before { content: attr(data-label); display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
}
.apqp-phase-nav { padding: 12px; }
.apqp-nav-label { font-size: 11px; letter-spacing: .08em; color: var(--muted); margin: 8px 12px 16px; font-weight: 650; }
.apqp-phase-link { display: flex; align-items: center; gap: 12px; text-align: left; width: 100%; padding: 12px; border: 0; background: transparent; color: var(--ink-2); border-radius: 8px; font: inherit; cursor: pointer; }
.apqp-phase-link:hover { background: var(--bg); }
.apqp-phase-link.selected { background: var(--accent-soft); color: var(--accent); }
.apqp-phase-link strong, .apqp-phase-link small { display: block; }
.apqp-phase-link strong { font-size: 13px; font-weight: 600; }
.apqp-phase-link small { font-size: 11px; }
.apqp-feature-tabs { display: flex; flex-wrap: wrap; gap: 8px; padding: 16px 0 20px; margin-bottom: 20px; border-bottom: 1px solid var(--line); }
.apqp-feature-tabs .selected { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
.apqp-access-notice { margin: 18px 0; padding: 16px 20px; border: 1px solid var(--line); border-radius: 10px; background: var(--accent-soft); }
.apqp-access-notice h3 { margin-top: 0; }
.apqp-phase-guide { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px 28px; padding-left: 24px; line-height: 1.6; }
.apqp-toolbar, .apqp-list-tools { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.apqp-toolbar h2 { margin: 0; font-size: 21px; }
.apqp-toolbar p { margin: 5px 0 0; }
.apqp-list-tools { margin: 24px 0 16px; }
.apqp-list-tools .field { flex: 1; max-width: 360px; }
.apqp-row-actions { display: flex; gap: 8px; }
.apqp-empty { padding: 40px 20px; text-align: center; color: var(--muted); }
.apqp-empty h3 { color: var(--ink); margin: 0 0 8px; }
.apqp-table-caption { text-align: left; color: var(--muted); font-size: 12px; padding-bottom: 8px; }
.apqp-dialog { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 28px; width: min(620px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow-y: auto; color: var(--ink); box-shadow: var(--shadow); }
.apqp-dialog::backdrop { background: rgb(15 28 48 / 45%); }
.apqp-dialog h2 { margin: 0 0 20px; font-size: 21px; }
.apqp-dialog .danger { color: var(--crit); }
.apqp-status.apqp-status-active { background: #eaf6ef; color: var(--ok); }
.apqp-program-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 16px; margin: 22px 0; }
.apqp-program-card, button.ghost.apqp-program-card { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; padding: 20px; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); text-align: left; white-space: normal; overflow-wrap: anywhere; }
.apqp-program-card strong { font-size: 15px; }
.apqp-program-card span { color: var(--muted); font-weight: 400; }
.apqp-program-card[hidden] { display: none; }
.apqp-phase { min-width: 0; margin: 20px 0; padding: 20px; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); }
.apqp-program-grid > .apqp-phase { margin: 0; }
.apqp-phase h3 { margin-top: 0; }
.apqp-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 16px; margin: 18px 0; align-items: end; }
.apqp-inline-form { display: flex; flex-wrap: wrap; gap: 12px; margin: 16px 0; align-items: end; }
.apqp-form-grid label, .apqp-inline-form label, .apqp-task-row > label { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.apqp-task-row { display: flex; flex-wrap: wrap; gap: 12px; padding: 18px 0; border-top: 1px solid var(--line); align-items: start; }
.apqp-task-row > label { flex: 1 1 140px; }
.apqp-task-row > label:first-child { flex: 0 0 24px; }
.apqp-task-main { flex: 1 1 calc(100% - 36px); min-width: 0; }
.apqp-task-main > input, .apqp-task-row > label > input, .apqp-task-row > label > select { width: 100%; min-width: 0; }
.apqp-task-main details { margin-top: 8px; overflow-wrap: anywhere; }
.apqp-task-row > .apqp-row-actions { flex: 1 1 100%; flex-wrap: wrap; }
@media (max-width: 640px) {
  .apqp-phase { padding: 14px; }
  .apqp-task-row > label:not(:first-child) { flex-basis: 100%; }
  .apqp-inline-form > label { flex: 1 1 100%; }
}
@media (max-width: 900px) {
  .apqp-workspace { grid-template-columns: minmax(0, 1fr); }
  .apqp-phase-nav { display: flex; gap: 6px; overflow-x: auto; }
  .apqp-phase-nav .apqp-nav-label { display: none; }
  .apqp-phase-link { flex: 0 0 215px; }
}
.apqp-intro { display: flex; align-items: center; justify-content: space-between; gap: 24px; border-top: 3px solid var(--accent); }
.apqp-eyebrow { display: block; font-size: 11px; font-weight: 650; letter-spacing: .08em; color: var(--accent); }
.apqp-intro h2 { margin: 8px 0; font-size: 24px; line-height: 1.3; }
.apqp-intro p { margin: 0; color: var(--muted); max-width: 650px; }
.apqp-phase-number { display: grid; place-items: center; flex: 0 0 42px; height: 42px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); font-weight: 700; font-size: 18px; }
.apqp-status { padding: 4px 10px; border-radius: 20px; background: var(--line-2); color: var(--muted); font-size: 12px; white-space: nowrap; }
@media (max-width: 640px) {
  .apqp-intro { align-items: flex-start; flex-direction: column; gap: 16px; }
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font: 14px/1.55 "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

.hidden { display: none !important; }
.muted { color: var(--muted); font-size: 12.5px; }
a { color: var(--accent); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.mark {
  font-weight: 800; letter-spacing: .06em; font-size: 13px;
  background: var(--accent); color: #fff; padding: 6px 9px; border-radius: 8px;
}

/* ---------------------------------------------------------------- buttons */
.btn, button.ghost, button.primary, a.ghost, a.btn {
  font: inherit; font-size: 13px; font-weight: 550;
  padding: 7px 13px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--line); background: #fff; color: var(--ink);
  text-decoration: none; display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap; transition: background .12s, border-color .12s;
}
.btn:hover, button.ghost:hover, a.ghost:hover { background: var(--line-2); }
.btn.primary, button.primary {
  background: var(--accent); border-color: var(--accent); color: #fff;
}
.btn.primary:hover, button.primary:hover { background: var(--accent-ink); }
.btn.block, .block { width: 100%; justify-content: center; }
button.small, a.small { padding: 4px 9px; font-size: 12px; border-radius: 6px; }
button.danger { color: var(--crit); }
button.danger:hover { background: #fdeaea; border-color: #f3c6c6; }
button:disabled { opacity: .55; cursor: not-allowed; }
.linkish {
  background: none; border: none; padding: 0; font: inherit;
  color: var(--accent); text-decoration: underline; cursor: pointer;
}
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0;
  border: 1px solid transparent; border-radius: 8px;
  background: transparent; color: inherit; cursor: pointer;
}
.icon-btn:hover { background: rgba(255, 255, 255, .12); }
.main .icon-btn:hover { background: var(--line-2); }

/* ------------------------------------------------------------- sign in */
.auth {
  position: fixed; inset: 0; min-height: 0; display: flex;
  flex-direction: column; align-items: center; justify-content: center;
  gap: 16px; padding: 24px 32px; overflow: hidden;
  background:
    radial-gradient(ellipse at 6% 6%, #e0e8f0 0%, transparent 48%),
    radial-gradient(ellipse at 96% 94%, #ece6df 0%, transparent 44%), #f2f4f7;
}
.auth-shell {
  display: grid; grid-template-columns: 1.04fr 1fr;
  grid-template-rows: minmax(0, 1fr); flex: 0 1 680px;
  width: 100%; max-width: 1060px; min-height: 0;
  border: 1px solid #fff; border-radius: 22px; overflow: hidden;
  background: #fff;
  box-shadow: 0 32px 80px -24px rgba(22, 39, 63, .22), 0 4px 12px rgba(22, 39, 63, .04);
}
.auth-story {
  display: flex; flex-direction: column; padding: 40px 42px 28px;
  color: #fff; min-width: 0; min-height: 0;
  background: radial-gradient(ellipse at 100% 80%, #223f55 0%, transparent 65%), #122338;
}
.auth-eyebrow {
  display: flex; align-items: center; gap: 9px;
  font-size: 9px; font-weight: 600; letter-spacing: .19em; color: #c0cfde;
}
.auth-eyebrow > span { width: 6px; height: 6px; border-radius: 50%; background: #e58b64; }
.auth-story-copy { flex: none; margin-top: 28px; }
.auth-story h2 { margin: 0; font-size: clamp(30px, 3.1vw, 40px); font-weight: 500; line-height: 1.2; letter-spacing: -.045em; }
.auth-story h2 em { color: #eea17d; font-style: normal; }
.auth-story-copy p { max-width: 330px; margin: 18px 0 0; color: #b2c2d3; font-size: 13px; line-height: 1.8; }
.auth-blueprint {
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  flex: 1; min-height: 0; margin: 22px -14px 20px;
}
.auth-drawing-label {
  display: flex; justify-content: space-between; padding: 0 14px 8px;
  color: #8da7bf; font: 9px/1.5 ui-monospace, "SFMono-Regular", Consolas, monospace; letter-spacing: .11em;
}
.auth-blueprint > svg { display: block; width: 100%; height: 100%; min-height: 0; }
.auth-drawing-caption { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 4px; font-size: 10px; color: #a7bdd0; }
.auth-status-dot { width: 5px; height: 5px; border-radius: 50%; background: #e89b75; }
/* All layers share an eight-second clock: draft, balloon, hold, fade, repeat.
   Matching cycle lengths keep the callouts in sync on every repetition.
   Default styles stay fully visible for reduced motion and small screens. */
@media (prefers-reduced-motion: no-preference) and (min-width: 761px) {
  .auth-blueprint { --draft-cycle: 8s; }
  .auth-part-outline, .auth-part-details circle, .auth-callout-leader {
    stroke-dasharray: 1; stroke-dashoffset: 0;
  }
  .auth-part-outline { animation: auth-outline-cycle var(--draft-cycle) ease-in-out infinite; }
  .auth-part-details circle { animation: auth-detail-cycle var(--draft-cycle) ease-in-out infinite; }
  .auth-center-lines { animation: auth-center-cycle var(--draft-cycle) ease-in-out infinite; }
  .auth-dimensions { animation: auth-dimension-cycle var(--draft-cycle) ease-in-out infinite; }
  .auth-dimension-values { animation: auth-values-cycle var(--draft-cycle) ease-in-out infinite; }
  .auth-callout:nth-child(1) { --leader-cycle: auth-leader-one; --balloon-cycle: auth-balloon-one; }
  .auth-callout:nth-child(2) { --leader-cycle: auth-leader-two; --balloon-cycle: auth-balloon-two; }
  .auth-callout:nth-child(3) { --leader-cycle: auth-leader-three; --balloon-cycle: auth-balloon-three; }
  .auth-callout-leader { animation: var(--leader-cycle) var(--draft-cycle) ease-in-out infinite; }
  .auth-callout-balloon {
    transform-box: fill-box; transform-origin: center;
    animation: var(--balloon-cycle) var(--draft-cycle) ease-in-out infinite;
  }
  .auth-drawing-caption { animation: auth-caption-cycle var(--draft-cycle) ease-in-out infinite; }
}
@keyframes auth-outline-cycle {
  0%, 2% { stroke-dashoffset: 1; opacity: 0; }
  4% { opacity: 1; }
  22%, 90% { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes auth-detail-cycle {
  0%, 9% { stroke-dashoffset: 1; opacity: 0; }
  12% { opacity: 1; }
  26%, 90% { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes auth-center-cycle {
  0%, 4%, 100% { opacity: 0; }
  13%, 90% { opacity: 1; }
}
@keyframes auth-dimension-cycle {
  0%, 18%, 100% { opacity: 0; }
  26%, 90% { opacity: 1; }
}
@keyframes auth-values-cycle {
  0%, 22%, 100% { opacity: 0; }
  29%, 90% { opacity: 1; }
}
@keyframes auth-leader-one {
  0%, 26% { stroke-dashoffset: 1; opacity: 0; }
  27% { opacity: 1; }
  34%, 90% { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes auth-leader-two {
  0%, 33% { stroke-dashoffset: 1; opacity: 0; }
  34% { opacity: 1; }
  41%, 90% { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes auth-leader-three {
  0%, 40% { stroke-dashoffset: 1; opacity: 0; }
  41% { opacity: 1; }
  48%, 90% { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes auth-balloon-one {
  0%, 31% { opacity: 0; transform: scale(.65); }
  38%, 90% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1); }
}
@keyframes auth-balloon-two {
  0%, 38% { opacity: 0; transform: scale(.65); }
  45%, 90% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1); }
}
@keyframes auth-balloon-three {
  0%, 45% { opacity: 0; transform: scale(.65); }
  52%, 90% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1); }
}
@keyframes auth-caption-cycle {
  0%, 50%, 100% { opacity: 0; }
  58%, 90% { opacity: 1; }
}
.auth-story-footer {
  display: flex; justify-content: space-between; gap: 12px; margin-top: auto;
  flex: none;
  padding-top: 20px; border-top: 1px solid rgba(189, 208, 226, .14);
  color: #93a9be; font-size: 8px; font-weight: 500; letter-spacing: .15em;
}
.auth-panel { display: flex; flex-direction: column; min-width: 0; min-height: 0; padding: 44px 48px 30px; overflow-y: auto; }
.auth-brand { display: flex; flex: none; align-items: center; gap: 17px; }
.auth-brand .auth-logo { width: 76px; height: 48px; }
.auth-brand-name { padding-left: 17px; border-left: 1px solid #e2e7ed; color: #25354a; font-size: 15px; font-weight: 650; white-space: nowrap; }
.auth-brand-name > span { display: block; margin-top: 5px; font-size: 7px; font-weight: 500; letter-spacing: .1em; color: #778495; }
.auth-card { margin: auto 0; padding: 46px 0 40px; }
.auth-kicker { margin: 0 0 10px; color: #a14a2c; font-size: 9px; font-weight: 650; letter-spacing: .16em; }
.auth-card h1 { margin: 0 0 10px; font-size: 31px; font-weight: 600; line-height: 1.2; letter-spacing: -.045em; color: #16273d; }
.auth-sub { margin: 0 0 30px; font-size: 12.5px; line-height: 1.8; color: #738094; }
.auth-field { margin-bottom: 20px; }
.auth-field > label { display: block; margin-bottom: 8px; color: #344257; font-size: 12px; font-weight: 600; }
.auth-input { position: relative; display: flex; align-items: center; }
.auth-input > svg { position: absolute; left: 14px; pointer-events: none; color: #94a0af; }
.auth-input svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.auth-input input {
  width: 100%; min-width: 0; height: 49px; padding: 12px 14px 12px 43px;
  border: 1px solid #dfe5ec; border-radius: 9px; background: #fcfdfe;
  font: inherit; font-size: 13px; color: #25354a;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.auth-input input::placeholder { color: #8a95a4; opacity: 1; }
.auth-input input:hover { border-color: #b8c4d1; }
.auth-input input:focus { outline: none; border-color: #6988ac; box-shadow: 0 0 0 3px #edf2f8; background: #fff; }
.auth-input:focus-within > svg { color: #476b94; }
.auth-input input[type=password], .auth-input #authPass { padding-right: 48px; }
.auth-password-toggle {
  position: absolute; right: 4px; display: grid; place-items: center; width: 42px; height: 42px;
  border: 0; border-radius: 6px; color: #8190a1; background: transparent; cursor: pointer;
}
.auth-password-toggle:hover { color: #25354a; background: #eff3f7; }
.auth-eye-slash { display: none; }
.auth-password-toggle[aria-pressed=true] .auth-eye-slash { display: block; }
.auth-card .btn.primary {
  min-height: 49px; margin-top: 6px; padding: 12px 20px; border: 1px solid #182d45;
  border-radius: 9px; background: #182d45; font-size: 13px; font-weight: 600;
  box-shadow: 0 4px 9px rgba(24, 45, 69, .12); transition: background .15s, box-shadow .15s;
}
.auth-card .btn.primary::after { content: "\2192"; margin-left: 9px; font-size: 18px; line-height: 1; font-weight: 400; }
.auth-card .btn.primary:hover { background: #284765; border-color: #284765; box-shadow: 0 5px 14px rgba(24, 45, 69, .19); }
.auth-card .btn.primary:disabled { box-shadow: none; }
.auth-card .btn.primary:disabled::after { content: ""; width: 12px; height: 12px; border: 2px solid #ffffff60; border-top-color: #fff; border-radius: 50%; animation: auth-spin .7s linear infinite; }
@keyframes auth-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .auth-input input, .auth-card .btn.primary { transition: none; }
  .auth-card .btn.primary:disabled::after { animation: none; }
}
.auth-error { margin: 0 0 12px; padding: 10px 12px; border: 1px solid #f4d1cd; border-radius: 8px; background: #fff4f2; color: #a33126; font-size: 12px; }
.auth-hint { margin: 12px 0 0; font-size: 11px; color: var(--muted); text-align: center; }
.auth-hint:empty { display: none; }
.auth-panel-footer { display: flex; flex: none; align-items: center; justify-content: center; gap: 12px; color: #7d8998; font-size: 10px; }
.auth-footer-line { height: 1px; flex: 1; background: #e9edf2; }
.auth-page-footer { flex: none; margin: 0; color: #748194; font-size: 9px; letter-spacing: .05em; }
.auth-page-footer > span { margin: 0 9px; color: #afb8c4; }
@media (max-width: 960px) {
  .auth { padding: 32px 24px 20px; }
  .auth-story { padding: 34px 28px 24px; }
  .auth-panel { padding: 36px 32px 26px; }
  .auth-brand { gap: 12px; }
  .auth-brand-name { padding-left: 12px; font-size: 14px; }
  .auth-brand-name > span { font-size: 6.5px; }
}
@media (max-width: 760px) {
  .auth { padding: 28px 20px 20px; }
  .auth-shell { display: flex; flex-direction: column; flex: 0 1 auto; max-width: 440px; min-height: 0; border-radius: 18px; }
  .auth-story { display: none; }
  .auth-panel { padding: 32px; }
  .auth-card { padding: 40px 0 34px; }
}
@media (max-width: 380px) {
  .auth { padding: 20px 12px; }
  .auth-panel { padding: 28px 22px; }
  .auth-brand .auth-logo { width: 65px; height: 44px; }
  .auth-brand-name { font-size: 13px; }
  .auth-brand-name > span { font-size: 6px; }
  .auth-card h1 { font-size: 28px; }
  .auth-panel-footer { gap: 7px; font-size: 9px; }
}
/* Fit laptop viewports by reducing spacing and giving the drawing the
   remaining height, rather than forcing the whole page to scroll. */
@media (max-height: 760px) {
  .auth { gap: 12px; padding: 16px 24px; }
  .auth-story { padding: 24px 32px; }
  .auth-story-copy { margin-top: 20px; }
  .auth-story h2 { font-size: 32px; }
  .auth-story-copy p { margin-top: 12px; font-size: 12px; line-height: 1.7; }
  .auth-blueprint { margin: 16px -12px; }
  .auth-story-footer { padding-top: 12px; }
  .auth-panel { padding: 24px 32px; }
  .auth-card { padding: 24px 0; }
  .auth-card h1 { font-size: 28px; }
  .auth-sub { margin-bottom: 20px; }
  .auth-field { margin-bottom: 16px; }
}
@media (max-height: 600px) {
  .auth { gap: 8px; padding: 12px; }
  .auth-panel { padding: 16px 24px; }
  .auth-brand .auth-logo { width: 64px; height: 40px; }
  .auth-card { padding: 16px 0 0; }
  .auth-kicker, .auth-panel-footer, .auth-page-footer { display: none; }
  .auth-card h1 { font-size: 25px; margin-bottom: 6px; }
  .auth-sub { margin-bottom: 14px; font-size: 12px; line-height: 1.6; }
  .auth-field { margin-bottom: 12px; }
  .auth-field > label { margin-bottom: 5px; }
  .auth-input input { height: 44px; }
  .auth-card .btn.primary { min-height: 44px; padding: 9px 16px; }
  .auth-hint { margin-top: 8px; }
  .auth-story { padding: 20px 28px; }
  .auth-story h2 { font-size: 28px; }
  .auth-story-copy p, .auth-story-footer { display: none; }
}

/* --------------------------------------------------------------- fields */
.field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; }
.field > span {
  font-size: 11px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted);
}
.field input, .field select, .field textarea {
  font: inherit; font-size: 13.5px; color: var(--ink);
  padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px;
  background: #fff; width: 100%;
}
.field textarea { resize: vertical; min-height: 44px; }
.field input[type=color] { width: 56px; height: 36px; padding: 3px; cursor: pointer; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--accent-soft);
}
/* A field the drawing did not state has to be filled in by a person before
   the PPAP goes out, so it is marked rather than left looking complete. */
.field input.missing { background: var(--warn-bg); border-color: #f59e0b; }

label.check { display: flex; gap: 9px; align-items: flex-start; cursor: pointer; font-size: 13px; }
label.check input { margin-top: 2px; }
label.check span { display: flex; flex-direction: column; }
label.check em { font-style: normal; font-size: 12px; color: var(--muted); }
label.check.inline { align-items: center; }
label.check.inline span { flex-direction: row; gap: 5px; align-items: baseline; }

/* ---------------------------------------------------------------- shell */
.app { display: flex; flex-direction: column; min-height: 100vh; }

.app-header {
  position: sticky; top: 0; z-index: 20;
  background: #fff; color: var(--ink);
}
.header-menu {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center; gap: 12px 24px;
  min-height: 72px; padding: 10px 32px;
  border-bottom: 1px solid var(--line);
}
.header-brand {
  display: flex; align-items: center; gap: 18px;
  justify-self: start; color: var(--ink-2); text-decoration: none;
}
.header-title {
  padding-left: 14px; border-left: 1px solid #dce5f4;
  font-weight: 600; font-size: 14px; white-space: nowrap;
}
.header-logo {
  position: relative; flex: none; width: 66px; height: 44px;
  overflow: hidden; background: #fff;
}
/* Frame the supplied logo without its large surrounding white margins. */
.header-logo img {
  position: absolute; top: 50%; left: 50%; display: block;
  width: 144%; max-width: none; height: auto; transform: translate(-50%, -50%);
}

.header-nav {
  display: flex; align-items: center; gap: 4px; min-width: 0;
  justify-self: center; width: max-content; max-width: 100%;
  padding: 3px;
  overflow-x: auto; overscroll-behavior-x: contain;
}
.nav-item {
  display: flex; align-items: center; gap: 8px; flex: 0 0 auto;
  padding: 10px 12px; border-radius: 14px;
  color: #61789c; text-decoration: none; font-size: 14px; font-weight: 500;
  white-space: nowrap; overflow: hidden;
  transition: background .12s, color .12s;
}
.nav-item:hover { background: #f0f5ff; color: #245bff; }
.nav-item.active {
  background: #dceaff; color: #245bff;
  box-shadow: 0 2px 4px rgba(54, 104, 216, .1);
}
.nav-item svg { flex: none; width: 16px; height: 16px; }

.header-account {
  position: relative; justify-self: end; min-width: 0;
  padding-left: 16px; border-left: 1px solid #dce5f4;
}
.account-toggle {
  display: flex; align-items: center; gap: 9px; min-height: 40px;
  padding: 0; border: 0; background: transparent; color: var(--ink);
  font: inherit; cursor: pointer;
}
.account-name {
  max-width: 128px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; font-weight: 500;
}
.avatar {
  flex: none; width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(135deg, #665bff, #397bff); color: #fff;
  box-shadow: 0 2px 4px rgba(61, 101, 255, .2);
  font-weight: 600; font-size: 14px;
}
.account-chevron { flex: none; color: #8ba0bf; }
.account-toggle[aria-expanded=true] .account-chevron { transform: rotate(180deg); }
.account-toggle:hover .account-name { color: #245bff; }
.account-dropdown {
  position: absolute; top: calc(100% + 14px); right: 0; z-index: 30;
  width: 270px; max-width: calc(100vw - 28px); padding: 6px;
  background: #fff; border: 1px solid #dce5f4; border-radius: 16px;
  box-shadow: 0 12px 32px rgba(41, 65, 106, .12);
  max-height: calc(100dvh - 90px); overflow-y: auto; overscroll-behavior: contain;
}
.account-dropdown[hidden] { display: none; }
.account-menu-item[hidden] { display: none; }
#viewCompanies [hidden], .billing-dialog [hidden] { display: none; }
.billing-heading, .billing-dialog-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.billing-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.billing-card { margin-bottom: 20px; }
.billing-card h3 { margin: 0 0 6px; font-size: 18px; }
.billing-filters { display: grid; grid-template-columns: repeat(3, minmax(150px, 1fr)); gap: 10px; margin: 16px 0; }
.billing-filters input, .billing-filters select, .billing-pager select { min-width: 0; font: inherit; padding: 8px 10px; color: var(--ink); border: 1px solid var(--line); border-radius: 6px; background: white; }
.billing-pager { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-top: 12px; color: var(--muted); }
.billing-pager > div { margin-left: auto; display: flex; gap: 6px; }
.billing-dialog { box-sizing: border-box; width: min(1220px, 96vw); max-height: 94vh; padding: 0; border: 1px solid var(--line); border-radius: 14px; color: var(--ink); background: #fff; box-shadow: 0 20px 70px #14284540; }
.billing-dialog::backdrop { background: #14284566; }
.billing-small { width: min(720px, 96vw); }
.company-dialog { width: min(900px, 96vw); }
#companyAdd { margin-left: auto; }
.billing-dialog-heading { padding: 18px 20px; position: sticky; top: 0; z-index: 2; background: white; border-bottom: 1px solid var(--line); }
.billing-dialog-heading h2 { margin: 0; font-size: 20px; }
.billing-dialog-heading p { margin: 4px 0 0; }
.billing-dialog-content { padding: 20px; }
.billing-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.billing-current { display: grid; grid-template-columns: repeat(4, minmax(130px, 1fr)); gap: 18px; padding: 16px; background: #f7f9fc; border: 1px solid var(--line); border-radius: 8px; margin: 14px 0; }
.billing-current .billing-label { display: block; color: var(--muted); font-size: 11px; text-transform: uppercase; margin-bottom: 6px; }
.billing-notice { padding: 12px 14px; background: #eff6ff; color: #1649c3; border: 1px solid #dbeafe; border-radius: 6px; }
.billing-check { display: flex; align-items: center; gap: 8px; margin: 12px 0 16px; }
.billing-services { border: 1px solid var(--line); border-radius: 8px; display: flex; gap: 18px; flex-wrap: wrap; margin: 4px 0 16px; padding: 12px; }
.billing-services label { display: flex; gap: 7px; align-items: center; }
.billing-status { display: inline-block; padding: 3px 9px; border-radius: 20px; font-size: 12px; background: #eff6ff; color: #1649c3; }
.billing-status.active, .billing-status.paid, .billing-status.approved { color: #087f5b; background: #ecfdf5; }
.billing-status.expired, .billing-status.cancelled, .billing-status.rejected { color: #b42318; background: #fff1f0; }
.billing-status.unpaid, .billing-status.pending, .billing-status.suspended { color: #b45309; background: #fff7ed; }
@media (max-width: 720px) { .billing-columns { grid-template-columns: 1fr; } .billing-current { grid-template-columns: 1fr 1fr; } .billing-filters { grid-template-columns: 1fr; } .billing-heading { flex-wrap: wrap; } .billing-dialog-content { padding: 12px; } }
.account-summary {
  display: flex; flex-direction: column; gap: 3px;
  padding: 6px 8px 12px; border-bottom: 1px solid var(--line-2);
  overflow-wrap: anywhere;
}
.account-summary b { font-size: 14px; font-weight: 600; }
.account-summary span { font-size: 12.5px; color: #6c83a8; }
.account-summary em { font-size: 11.5px; font-style: normal; color: var(--muted); }
.account-menu-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 10px; border: 0; border-radius: 12px;
  background: transparent; color: #52698b; text-align: left;
  text-decoration: none; font: inherit; font-size: 14px; cursor: pointer;
}
.account-menu-item:hover { background: #f7faff; color: #245bff; }
.account-menu-item.active { background: var(--accent-soft); color: var(--accent); }
.account-menu-item > svg { flex: none; width: 20px; height: 20px; }
.account-master-menu[hidden] { display: none; }
.account-master-menu > summary { list-style: none; }
.account-master-menu > summary::-webkit-details-marker { display: none; }
.account-master-chevron { margin-left: auto; }
.account-master-menu[open] > summary { background: #f7faff; color: var(--accent); }
.account-master-menu[open] .account-master-chevron { transform: rotate(180deg); }
.account-master-submenu { margin: 4px 0 8px 27px; padding-left: 10px; border-left: 1px solid var(--line); }
.account-master-submenu .account-menu-item { padding: 8px 10px; font-size: 13px; }
.account-master-submenu .account-menu-icon { width: 28px; height: 28px; }
.account-master-submenu .account-menu-icon svg { width: 17px; height: 17px; }
#gaugeWorkspace { display: block; width: 100%; height: max(680px, calc(100dvh - 200px)); border: 0; }
.gauge-settings-tabs {
  display: flex; align-items: stretch; gap: 6px; margin: 0 24px; padding: 6px;
  overflow-x: auto; overscroll-behavior-x: contain;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
}
.gauge-settings-tabs[hidden], .gauge-tab[hidden] { display: none; }
.gauge-tab {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  flex: 0 0 auto; padding: 12px 18px; border-radius: 9px;
  color: var(--muted); text-decoration: none; font-weight: 550; white-space: nowrap;
  transition: background .12s, color .12s;
}
.gauge-tab:hover { background: var(--bg); color: var(--accent); }
.gauge-tab.active { background: var(--accent-soft); color: var(--accent); }
.gauge-tab svg {
  flex: none; width: 19px; height: 19px; fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.account-menu-icon {
  display: grid; place-items: center; flex: none; width: 36px; height: 36px;
  border-radius: 8px; background: #f0f5fa; color: #6b83a4;
}
.account-menu-icon svg { width: 20px; height: 20px; }
.account-logout {
  gap: 12px; margin-top: 4px; padding: 12px 10px;
  border-top: 1px solid var(--line-2); border-radius: 0 0 10px 10px;
}

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: center; gap: 14px;
  padding: 14px 24px; background: var(--bg); color: var(--ink);
}
.page-back { grid-column: 1 / -1; justify-self: start; flex-shrink: 0; }
.topbar.has-inline-back { grid-template-columns: auto minmax(0, 1fr) auto; }
.page-back.icon-only {
  grid-column: auto; align-self: center; justify-content: center;
  width: 40px; height: 40px; padding: 0; gap: 0;
}
.page-back svg { display: block; flex-shrink: 0; }
.titles { flex: 1; min-width: 0; }
.titles h1 {
  margin: 0; font-size: 17px; font-weight: 650; letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.titles p {
  margin: 1px 0 0; font-size: 12.5px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.titles p:empty { display: none; }
.top-actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.page-tools { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 10px; min-width: 0; }
.gauge-master-button { flex: none; }
.gauge-master-button[hidden] { display: none; }

.views { padding: 20px 24px 32px; }
.view { display: none; }
.view.on { display: block; }

/* ---------------------------------------------------------------- cards */
.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow);
  margin-bottom: 18px; overflow: hidden;
}
.card.pad { padding: 20px 22px; }
.card-title { margin: 0 0 3px; font-size: 15px; font-weight: 650; }
.card-sub { margin: 0 0 18px; font-size: 12.5px; color: var(--muted); }
.card-head {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; border-bottom: 1px solid var(--line);
}
.card-head input[type=search] {
  flex: 1 1 240px; max-width: 360px; font: inherit; font-size: 13px;
  padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px;
}
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0 16px; }
.form-grid.tight { margin-top: 14px; }
#viewCompanies [hidden] { display: none; }
.form-acts { display: flex; gap: 8px; margin-top: 4px; }
.opt-list { display: flex; flex-direction: column; gap: 12px; margin: 6px 0 18px; }

/* --------------------------------------------------------------- tables */
.table-scroll { max-height: 62vh; overflow: auto; }
.table-scroll.grow { max-height: none; flex: 1; }
table.grid { width: 100%; border-collapse: collapse; font-size: 13px; }
table.grid th {
  position: sticky; top: 0; z-index: 1; background: #fbfcfe; text-align: left;
  padding: 9px 14px; border-bottom: 1px solid var(--line);
  font-size: 11px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted); white-space: nowrap;
}
table.grid td { padding: 10px 14px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
table.grid tbody tr:hover { background: #fafbfe; }
table.grid td.when, table.grid td.num { white-space: nowrap; }
table.grid td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.grid th.num { text-align: right; }
table.grid td .sub { display: block; font-size: 11.5px; color: var(--muted); }
table.grid td.acts { text-align: right; white-space: nowrap; }
table.grid td.acts > * { margin-left: 5px; }

/* Only the narrow layout, which folds the columns away, wants this line.
   Scoped past "table.grid td .sub", which would otherwise show it. */
table.grid td .sub.rowmeta { display: none; }
@media (max-width: 720px) {
  table.grid td .sub.rowmeta { display: block; margin-top: 2px; }
}

.pager {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 14px; border-top: 1px solid var(--line); flex-wrap: wrap;
}
/* display:flex would otherwise win over the browser's own [hidden] rule. */
.pager[hidden] { display: none; }
.pager-acts { display: flex; align-items: center; gap: 10px; }
.pager button[disabled] { opacity: .45; cursor: default; }

.empty { padding: 44px 24px; text-align: center; }
.empty p { margin: 0 0 6px; }

.tag {
  margin-left: 6px; padding: 1px 6px; border-radius: 5px;
  font-size: 10.5px; font-weight: 600; color: var(--ok); background: #e7f4ec;
  vertical-align: 1px;
}
.tag.ref { color: var(--muted); background: #eceff4; font-style: normal; }

/* ------------------------------------------------------------ new drawing */
.drop {
  border: 1.5px dashed #c4d0e4; border-radius: var(--r);
  padding: 34px 20px; text-align: center; color: var(--muted);
  background: #fbfcfe; margin-bottom: 20px; transition: background .12s, border-color .12s;
}
.drop.over { border-color: var(--accent); background: var(--accent-soft); }
/* The subscription's drawing allowance is used up: the zone stays visible
   so the note above it explains why, but takes no file. */
.drop.disabled { opacity: .55; pointer-events: none; }
#drawingUsage { margin: 0 0 12px; }
.drop svg { color: #91a5c4; }
.drop-title { margin: 10px 0 2px; font-size: 14.5px; color: var(--ink); font-weight: 550; }
.drop-sub { margin: 0; font-size: 12.5px; }

/* --------------------------------------------------------------- logo */
.logo-row { display: flex; gap: 16px; align-items: center; margin: 4px 0 18px; flex-wrap: wrap; }
.logo-box {
  width: 190px; height: 76px; border: 1px dashed var(--line); border-radius: var(--r);
  display: grid; place-items: center; overflow: hidden; background: #fbfcfe;
  font-size: 11.5px; color: var(--muted);
}
.logo-box img { max-width: 100%; max-height: 100%; }
.logo-acts { display: flex; flex-direction: column; gap: 7px; align-items: flex-start; }
.logo-acts p { margin: 0; max-width: 340px; }

/* ------------------------------------------------------------- the editor */
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.chip {
  background: #fff; border: 1px solid var(--line); border-radius: 999px;
  padding: 5px 12px; font-size: 12.5px; color: var(--ink-2);
}
.chip b { color: var(--ink); }
.chip.crit { color: var(--crit); border-color: #f0cccd; }
.chip.warnchip { background: var(--warn-bg); border-color: #f5d79a; color: var(--warn-ink); }

.split { display: grid; grid-template-columns: minmax(0, 13fr) minmax(0, 7fr); gap: 18px; align-items: start; }
@media (max-width: 1180px) { .split { grid-template-columns: 1fr; } }

.viewer-head {
  container: drawing-viewer / inline-size;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 14px; border-bottom: 1px solid var(--line);
}
.viewer-head .check { min-width: 0; }
.viewer-head .check span { min-width: 0; }
.viewer-head .check em { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.viewer-head > select {
  flex: none;
  font: inherit; font-size: 13px; padding: 5px 9px;
  border: 1px solid var(--line); border-radius: 7px; background: #fff;
}
.zoom { margin-left: auto; display: flex; align-items: center; gap: 4px; flex: none; }
.zoom button {
  width: 28px; height: 28px; padding: 0; justify-content: center;
  border: 1px solid var(--line); border-radius: 7px; background: #fff; cursor: pointer;
}
.zoom span { font-size: 12px; color: var(--muted); min-width: 36px; text-align: center; }

/* Ballooning tools fill the space between the sheet selector and zoom. */
.viewer-toolbar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; row-gap: 6px;
  flex: 1; min-width: 0;
}
/* Undo, Redo and Shortcuts are icons at every width: the room is for the tools. */
.tool-btn.tool-icon { padding: 6px 8px; }
.tool-btn.tool-icon .tool-label { display: none; }
.tool-btn { padding: 6px 11px; font-size: 12.5px; }
.tool-btn svg { flex: none; }
.tool-color {
  display: flex; align-items: center; gap: 6px; flex: none;
  font-size: 12.5px; white-space: nowrap;
}
.tool-color input {
  width: 36px; height: 32px; padding: 3px; cursor: pointer;
  border: 1px solid var(--line); border-radius: 8px; background: #fff;
}
.tool-color input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tool-numbering { display: flex; align-items: center; gap: 6px; font-size: 12.5px; min-width: 0; }
.tool-numbering > span { white-space: nowrap; }
.tool-numbering select {
  flex: 1; width: 160px; min-width: 100px; max-width: 160px;
  padding: 6px 8px; font: inherit; color: var(--ink);
  border: 1px solid var(--line); border-radius: 8px; background: #fff;
}
/* Compact based on the drawing card's width, including in split view. */
@container drawing-viewer (max-width: 1300px) {
  .viewer-toolbar .tool-label { display: none; }
}
@container drawing-viewer (max-width: 1000px) {
  .viewer-toolbar { flex-basis: 100%; order: 1; }
}
@container drawing-viewer (max-width: 520px) {
  .viewer-toolbar { gap: 6px; }
  .viewer-toolbar .tool-btn { padding: 6px 8px; }
  .tool-numbering { flex: 1; }
  .tool-numbering > span {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip-path: inset(50%);
  }
}
@media (max-width: 720px) {
  .viewer-toolbar { flex-basis: 100%; order: 1; }
}
@media (max-width: 560px) { .tool-label { display: none; } }

/* The toolbox of PDF-editing tools, docked below the canvas - same idea as
   .viewer-toolbar above it, inside .viewer so it stays reachable in full
   screen. A later tool is just another .tool-btn sibling here. */
.tool-dock {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 14px; border-top: 1px solid var(--line); background: #fbfcfe;
}

.hint {
  margin: 0; padding: 9px 14px; font-size: 12.5px; color: var(--muted);
  background: #fbfcfe; border-bottom: 1px solid var(--line);
}
.hint b { color: var(--ink); }

.canvas { overflow: auto; max-height: 74vh; background: #eef1f6; padding: 14px; }
.canvas.adding { cursor: crosshair; }
.stage { position: relative; margin: 0 auto; background: #fff; box-shadow: var(--shadow); }
#pageImg { display: block; width: 100%; height: auto; -webkit-user-drag: none; user-select: none; }
/* The visible part of the sheet re-rendered at screen resolution, over the
   preview. It sits under every interactive layer and never takes the pointer. */
#sharpLayer { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
#sharpImg { position: absolute; display: block; -webkit-user-drag: none; user-select: none; }
#sharpImg[hidden] { display: none; }
#handles, #markers, #hiddenAreas, #sectionAreas, #viewBoxes { position: absolute; inset: 0; }
/* The end of each balloon's leader: a small dot a person drags onto the
   dimension the line should point at. */
#leaderTips { position: absolute; inset: 0; pointer-events: none; }
/* The dot sits on the dimension itself (that is where the line ends), so it
   is invisible until the pointer is on its balloon or on the dot, and while
   it is being dragged. Always showing it put a dot over every measurement
   on the sheet, which read as part of the drawing. It keeps its pointer
   events while hidden, so the hand that knows where it is can still grab it. */
.leader-tip {
  position: absolute; width: 9px; height: 9px; transform: translate(-50%, -50%);
  border-radius: 50%; box-sizing: border-box; pointer-events: auto; touch-action: none;
  border: 1.5px solid #1a46b8; background: rgba(255, 255, 255, .85); cursor: crosshair;
  opacity: 0; transition: opacity .12s, width .12s, height .12s;
}
.leader-tip.crit { border-color: #b42318; }
.leader-tip.locked { background: #1a46b8; }
.leader-tip.locked.crit { background: #b42318; }
.leader-tip.shown, .leader-tip:hover, .leader-tip.dragging { opacity: 1; }
.leader-tip:hover, .leader-tip.dragging { width: 13px; height: 13px; }
.canvas.adding #leaderTips, .canvas.hiding #leaderTips, .canvas.sectioning #leaderTips,
.canvas.deleting #leaderTips, .canvas.resequencing #leaderTips, .canvas.moving #leaderTips { display: none; }
/* The line shown while a leader's end is being dragged. */
#leaderPreview { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; display: none; }
#leaderPreview.on { display: block; }
#leaderPreview line { stroke: #1a46b8; stroke-width: 1.5; stroke-dasharray: 4 3; }
/* These lie over the handles. Without this they swallow the pointer
   and no balloon can be dragged. */
#markers, #hiddenAreas, #sectionAreas, #viewBoxes { pointer-events: none; }
#hiddenAreas .hidden-area, #sectionAreas .section-area { pointer-events: auto; }
#detailMarkers { position: absolute; inset: 0; pointer-events: none; }
.detail-marker {
  position: absolute; z-index: 2; transform: translate(-50%, -50%);
  width: 24px; height: 24px; padding: 0; display: grid; place-items: center;
  border: 2px solid #15803d; border-radius: 50%; background: #f0fdf4; color: #15803d;
  font-size: 16px; font-weight: 700; line-height: 1; cursor: pointer;
  box-shadow: 0 1px 5px rgba(15, 28, 48, .2); pointer-events: auto;
}
.detail-marker:hover, .detail-marker:focus-visible { background: #dcfce7; outline: 2px solid #86efac; }
.canvas.adding .detail-marker, .canvas.hiding .detail-marker,
.canvas.sectioning .detail-marker, .canvas.deleting .detail-marker { pointer-events: none; }
/* Hide-area and add-section modes: the pointer draws boxes, so balloons
   must not catch it. */
.canvas.hiding, .canvas.sectioning, .canvas.deleting { cursor: crosshair; }
.canvas.hiding .handle, .canvas.sectioning .handle, .canvas.deleting .handle { pointer-events: none; }
/* A balloon the delete box would take, shown as the box grows. */
.handle.delete-pick { border-color: #b42318; background: rgba(180, 35, 24, .22); }
.canvas { touch-action: pan-x pan-y; }

.handle {
  position: absolute; transform: translate(-50%, -50%);
  border-radius: 50%; cursor: grab; touch-action: none; border: 2px solid transparent;
}
.handle:hover { border-color: rgba(26, 70, 184, .55); background: rgba(26, 70, 184, .1); }
.handle.dragging { cursor: grabbing; border-color: var(--accent); background: rgba(26, 70, 184, .18); }
.handle.moved { border-color: rgba(21, 115, 71, .5); border-style: dashed; }
.canvas.adding .handle { pointer-events: none; }

.canvas.resequencing .handle { cursor: pointer; }
.handle.reseq-preview {
  display: flex; align-items: center; justify-content: center;
  border-color: var(--accent); background: #fff; color: var(--accent);
  font-weight: 700; font-size: 12px;
}
.handle.reseq-dim { border-color: #bdc8dd; color: var(--muted); }
.handle.reseq-picked {
  display: flex; align-items: center; justify-content: center;
  border-color: var(--accent); border-style: solid; background: var(--accent);
  color: #fff; font-weight: 700; font-size: 12px; opacity: 1;
}

/* "Order by size"'s own preview number, before Apply commits it - same idea
   as .reseq-picked (a pick order shown right on the balloon), own class so
   it can be tuned independently; the two tools never show at once. */
.handle.size-preview {
  display: flex; align-items: center; justify-content: center;
  border-color: var(--accent); border-style: solid; background: var(--accent);
  color: #fff; font-weight: 700; font-size: 12px; opacity: 1;
}

.canvas.moving .handle { cursor: pointer; transition: opacity .15s, transform .15s, border-color .12s, background .12s; }
.handle.move-picked {
  border-color: var(--accent); border-style: solid;
  background: rgba(26, 70, 184, .28);
}
/* The dragged balloon(s) stay exactly where they are - this tool only ever
   reassigns a section, never a position - so dragging dims them in place
   rather than moving them; the small .move-ghost below is what actually
   tracks the cursor. */
.handle.move-dragging { opacity: .35; transform: translate(-50%, -50%) scale(.85); cursor: grabbing; }
/* Another balloon hovered as a drop target, for a section with no frame of
   its own to drop onto directly. */
.handle.drop-target {
  border-color: var(--ok); border-style: solid;
  background: rgba(21, 115, 71, .28);
  box-shadow: 0 0 0 4px rgba(21, 115, 71, .18);
}

/* The one confirmation a completed move gets at the balloon itself - its
   position never changes, so this ring is what says "yes, this one landed." */
.handle.move-flashed { animation: move-flash .9s ease-out; }
@keyframes move-flash {
  0% { box-shadow: 0 0 0 0 rgba(21, 115, 71, .55); }
  60% { box-shadow: 0 0 0 10px rgba(21, 115, 71, 0); }
  100% { box-shadow: 0 0 0 10px rgba(21, 115, 71, 0); }
}

/* Follows the cursor during a move-drag, standing in for "this is in transit" -
   the real handle(s) never move. */
.move-ghost {
  position: fixed; z-index: 65; transform: translate(-50%, -120%);
  background: var(--ok); color: #fff; font-size: 12px; font-weight: 600;
  padding: 4px 9px; border-radius: 999px; box-shadow: 0 2px 10px rgba(15, 28, 48, .25);
  pointer-events: none; white-space: nowrap;
}

/* The pick order for "Section order" - one numbered badge per section
   already picked, at its frame's centre or its balloons' own centroid. */
#sectionBadges { position: absolute; inset: 0; pointer-events: none; }
.section-badge {
  position: absolute; transform: translate(-50%, -50%);
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent); color: #fff; font-weight: 700; font-size: 13px;
  box-shadow: 0 2px 8px rgba(15, 28, 48, .3), 0 0 0 3px rgba(255, 255, 255, .8);
}

/* The balloon-size tool's own live, client-side preview - a stand-in for the
   printed balloon's look (white fill, the same blue), resized straight from
   the slider with no server round trip. */
.balloon-sample-box {
  display: flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; flex: none;
}
.balloon-sample {
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: #fff; border: 1.6px solid var(--accent);
  color: var(--accent); font-weight: 700;
  transition: width .06s, height .06s, font-size .06s;
}
.tool-banner input[type="range"] {
  flex: 1; min-width: 100px; accent-color: #fff;
}
.tool-banner .size-readout { font-weight: 700; min-width: 3.5em; text-align: right; }

.marker {
  position: absolute; aspect-ratio: 1; transform: translate(-50%, -50%);
  border: 2px solid var(--accent); border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(26, 70, 184, .18); pointer-events: none;
}
.marker.crit { border-color: var(--crit); box-shadow: 0 0 0 4px rgba(196, 22, 28, .18); }

/* A hidden area: the white patch itself is in the preview, so this is only
   its outline, shown while the Hide area tool is on, to move, resize or
   remove it. */
.hidden-area {
  position: absolute; border: 1px solid rgba(26, 70, 184, .7);
  cursor: grab; touch-action: none;
}
.hidden-area .drop {
  position: absolute; top: -9px; right: -9px; width: 18px; height: 18px;
  padding: 0; line-height: 1; border-radius: 50%; border: 1px solid var(--accent);
  background: #fff; color: var(--accent); font-size: 13px; cursor: pointer;
  display: grid; place-items: center; margin: 0;
}
.hidden-area::after {
  content: ""; position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px;
  background: rgba(26, 70, 184, .7); cursor: nwse-resize;
}

/* The box a person is dragging out while adding a balloon by area - drawn
   live as the pointer moves, read once released. */
#addAreaBox { position: absolute; inset: 0; pointer-events: none; }
.add-area-box {
  position: absolute; border: 1.5px dashed var(--accent);
  background: rgba(26, 70, 184, .1);
}
/* The box being dragged out in Hide area mode: a preview of the white patch. */
.hide-area-box {
  position: absolute; border: 1.5px dashed var(--accent);
  background: rgba(255, 255, 255, .7);
}
.delete-area-box {
  position: absolute; border: 1.5px dashed #b42318;
  background: rgba(180, 35, 24, .08);
}
/* A quiet save in progress: the page is already drawn, nothing is blocked. */
.saving-chip {
  position: fixed; right: 18px; bottom: 18px; z-index: 60;
  padding: 6px 12px; border-radius: 999px; font-size: 12.5px;
  background: rgba(20, 20, 20, .82); color: #fff;
}
/* A section drawn by hand, while the Add section tool is on: its outline
   with its name, movable like a hidden area. */
.section-area { border: 1.5px solid rgba(21, 115, 71, .8); background: rgba(21, 115, 71, .05); }
.section-area::after { background: rgba(21, 115, 71, .8); }
/* The reader's own border (not drawn by hand): dashed until a person adjusts it. */
.section-area.detected { border-style: dashed; }
.section-area .grip {
  position: absolute; width: 11px; height: 11px; background: rgba(21, 115, 71, .8); z-index: 1;
}
.section-area .grip.nw { left: -1px; top: -1px; cursor: nwse-resize; }
.section-area .grip.ne { right: -1px; top: -1px; cursor: nesw-resize; }
.section-area .grip.sw { left: -1px; bottom: -1px; cursor: nesw-resize; }
.section-area .drop { border-color: var(--ok); color: var(--ok); z-index: 2; }
.section-area::before {
  content: attr(data-name); position: absolute; left: 0; top: 0; transform: translateY(-100%);
  font: 600 11px/1.3 "Inter", "Segoe UI", system-ui, sans-serif; color: #fff;
  background: rgba(21, 115, 71, .85); padding: 1px 6px; border-radius: 4px 4px 0 0; white-space: nowrap;
}
.section-area-box {
  position: absolute; border: 1.5px dashed var(--ok);
  background: rgba(21, 115, 71, .08);
}

/* A view/section's own border - detected automatically, never drawn by
   hand, never shown on its own. Invisible until the pointer is over it
   while resequencing, a cue for which section a click will land in. */
.view-box {
  position: absolute; pointer-events: none; background: transparent;
  border: 2px solid transparent; box-sizing: border-box;
  transition: background .12s, border-color .12s, box-shadow .12s;
}
.view-box.hovered { background: rgba(26, 70, 184, .18); }
/* A section with no drawn border: the extent of its own callouts, shown
   dashed with its name while a section tool is in use, so a person can
   see what the numbering treats as one section before moving anything. */
#viewBoxes.show .view-box {
  border: 1.5px solid rgba(26, 70, 184, .55); border-radius: 4px;
  background: rgba(26, 70, 184, .04);
}
#viewBoxes.show .view-box.derived { border-style: dashed; }
#viewBoxes.show .view-box::before {
  content: attr(data-name); position: absolute; left: 0; top: 0; transform: translateY(-100%);
  font: 600 11px/1.3 "Inter", "Segoe UI", system-ui, sans-serif; color: #fff;
  background: rgba(26, 70, 184, .75); padding: 1px 6px; border-radius: 4px 4px 0 0; white-space: nowrap;
}
#viewBoxes.show .view-box.hovered { background: rgba(26, 70, 184, .16); border-style: solid; }
#viewBoxes.show .view-box.drop-target {
  background: rgba(21, 115, 71, .16); border: 2px solid var(--ok); box-shadow: none;
}
/* A move-drag's drop target - green, and a border (not just a fill) so it
   reads as "drop here," distinct from resequencing's plain blue hover. */
.view-box.drop-target {
  background: rgba(21, 115, 71, .14); border: 2px solid var(--ok);
  box-shadow: inset 0 0 0 2px var(--ok);
}

/* The balloon's own editor, opened by clicking it. It sits beside the balloon
   on the sheet, so the value and the thing it describes are read together. */
.char-pop {
  position: absolute; z-index: 6; width: 640px; max-width: calc(100vw - 32px);
  container: balloon-editor / inline-size;
  display: flex; flex-direction: column; gap: 9px;
  background: #fff; border: 1px solid var(--line); border-radius: 11px;
  padding: 12px; box-shadow: 0 14px 40px rgba(15, 28, 48, .28);
  overflow-y: auto; overscroll-behavior: contain;
}
.viewer { position: relative; }
.pop-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.pop-fields { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.pop-symbols { min-width: 0; padding-left: 14px; border-left: 1px solid var(--line); }
.pop-symbols h3 { margin: 0; font-size: 12px; font-weight: 600; color: var(--muted); }
.pop-symbols .add-symbol-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pop-symbols .add-symbol-button .symbol-name { font-size: 8px; }
@container balloon-editor (max-width: 520px) {
  .pop-body { grid-template-columns: minmax(0, 1fr); }
  .pop-symbols { padding: 12px 0 0; border-left: 0; border-top: 1px solid var(--line); }
}
.pop-head { display: flex; align-items: baseline; gap: 2px; font-size: 14px; }
.pop-head .muted { font-size: 12px; }
.char-pop .pop-head, .add-form-head { cursor: grab; touch-action: none; user-select: none; }
.char-pop .pop-head.dragging, .add-form-head.dragging { cursor: grabbing; }
.pop-x {
  margin-left: auto; border: none; background: none; cursor: pointer;
  font-size: 18px; line-height: 1; color: var(--muted); padding: 0 2px;
}
.pop-drawn, .pop-lim { margin: 0; font-size: 11.5px; }
.pop-nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.char-pop .field { min-width: 0; }
.char-pop .field span { font-size: 10px; }
.char-pop input[type=text], .char-pop input[type=number] {
  font: inherit; font-size: 13px; padding: 6px 8px; width: 100%; min-width: 0;
  border: 1px solid var(--line); border-radius: 7px; background: #fff;
}
.char-pop input:focus { border-color: var(--accent); outline: none; }
.pop-acts { display: flex; align-items: center; gap: 7px; }
.pop-acts .grow { flex: 1; }
.btn.small { font-size: 12.5px; padding: 6px 12px; }

/* Right-click menu - fixed to the viewport (not .viewer's own scroll), so
   it opens at the cursor correctly whether the sheet is scrolled, zoomed,
   or the whole canvas is in full screen. */
.ctx-menu {
  position: fixed; z-index: 70; min-width: 168px;
  background: #fff; border: 1px solid var(--line); border-radius: 9px;
  padding: 5px; box-shadow: 0 14px 40px rgba(15, 28, 48, .3);
  display: flex; flex-direction: column;
}
.ctx-menu.hidden { display: none; }
.ctx-menu button {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 8px 10px; border: none; background: none; border-radius: 6px;
  font: inherit; font-size: 13px; color: var(--ink); text-align: left; cursor: pointer;
}
.ctx-menu button:hover { background: var(--line-2); }
.ctx-menu button.danger { color: var(--crit); }
.ctx-menu button.danger:hover { background: #fdeaea; }
.ctx-menu svg { flex: none; }

/* The sheet on its own. The browser's full screen and the fallback class end
   up in the same layout, so the rules are written once for both. */
.viewer:fullscreen, body.viewer-max .viewer {
  border-radius: 0; border: none; width: 100%; height: 100%;
  display: flex; flex-direction: column; background: #fff;
}
body.viewer-max .viewer { position: fixed; inset: 0; z-index: 50; }
.viewer:fullscreen .canvas, body.viewer-max .canvas { max-height: none; flex: 1; }
.viewer:fullscreen .hint, body.viewer-max .hint { display: none; }

.reseq-banner {
  position: sticky; top: 0; z-index: 6;
  background: var(--accent); color: #fff; font-size: 13px; line-height: 1.4;
  padding: 10px 16px; margin: -14px -14px 14px;
  box-shadow: 0 2px 10px rgba(15, 28, 48, .2);
}
.reseq-banner.hidden { display: none; }
.reseq-banner b { font-weight: 700; }
.reseq-banner .reseq-status { display: block; margin-top: 2px; font-size: 12px; opacity: .9; }
.reseq-banner .reseq-exit {
  display: block; margin-top: 10px;
  background: #fff; border-color: #fff; color: var(--accent);
}
.reseq-banner .reseq-exit:hover { background: var(--line-2); }

/* Shared by every tool's own banner (Move to section, Section order, and
   whatever joins the dock next) - one visual language instead of a new one
   per tool. */
.tool-banner {
  position: sticky; top: 0; z-index: 6;
  background: var(--accent); color: #fff; font-size: 13px; line-height: 1.4;
  padding: 10px 16px; margin: -14px -14px 14px;
  box-shadow: 0 2px 10px rgba(15, 28, 48, .2);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.tool-banner.hidden { display: none; }
/* One line, always: the banner's words change as a tool is used, and a
   banner that grew or shrank would move the drawing under a drag in
   progress, so the balloon being aimed at slides away from the pointer. */
.tool-banner > span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tool-banner { flex-wrap: nowrap; min-height: 52px; }
.tool-banner b { font-weight: 700; }
.tool-banner .btn.small { background: transparent; border: 1px solid #fff; color: #fff; }
.tool-banner .btn.small:hover { background: rgba(255, 255, 255, .15); }
.tool-banner .btn.small.primary { background: #fff; border-color: #fff; color: var(--accent); }
.tool-banner .btn.small.primary:hover { background: var(--line-2); }

.add-form {
  position: absolute; z-index: 5; display: grid; gap: 6px;
  grid-template-columns: auto minmax(190px, 1fr) auto auto;
  width: max-content;
  background: #fff; border: 1px solid var(--line); border-radius: 9px;
  padding: 7px; box-shadow: 0 8px 26px rgba(15, 28, 48, .22);
}
.add-form-head {
  grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between;
  font-size: 12px; font-weight: 600; color: var(--muted); padding: 2px 3px 4px;
}
.add-read-status {
  grid-column: 1 / -1; max-width: 520px; padding: 5px 3px 2px;
  font-size: 12px; line-height: 1.4; color: var(--warn-ink);
}
.add-form input {
  font: inherit; font-size: 13px; padding: 6px 8px;
  border: 1px solid var(--line); border-radius: 7px; min-width: 190px;
}
.add-form select {
  font: inherit; font-size: 13px; padding: 6px 8px;
  border: 1px solid var(--line); border-radius: 7px; background: #fff; cursor: pointer;
}
/* Sized to sit in a small popup, but never for the Add button itself: it
   carries .primary (accent background, white text) from the general button
   rules, and this used to have equal specificity and win on source order -
   white background over white text, so "Add" was there and clickable but
   never visible. */
.add-form button {
  font-size: 12.5px; padding: 6px 10px; border-radius: 7px;
}
.add-form button:not(.primary) {
  border: 1px solid var(--line); background: #fff; cursor: pointer;
}
.add-symbols {
  grid-column: 1 / -1; min-width: 0; padding: 8px 3px 3px;
  border-top: 1px solid var(--line);
}
.add-symbols summary { cursor: pointer; color: var(--muted); font-size: 12px; font-weight: 600; }
.add-symbols-help { margin: 7px 0; font-size: 11px; color: var(--muted); }
.add-symbol-grid {
  display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 5px;
}
.add-form .add-symbol-button, .char-pop .add-symbol-button {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; min-width: 0; padding: 5px 2px; color: var(--ink);
  border: 1px solid var(--line); border-radius: 7px; background: #fff; cursor: pointer;
}
.add-symbol-button .symbol-glyph {
  font-family: "Cambria Math", "Segoe UI Symbol", sans-serif; font-size: 21px; line-height: 1.2;
}
.add-symbol-button .symbol-name { max-width: 100%; overflow-wrap: anywhere; font-size: 9px; line-height: 1.2; }
.add-form .add-symbol-button:hover, .add-form .add-symbol-button:focus-visible,
.char-pop .add-symbol-button:hover, .char-pop .add-symbol-button:focus-visible {
  background: var(--accent-soft); border-color: var(--accent); color: var(--accent);
}

.table-wrap { display: flex; flex-direction: column; max-height: 84vh; }
.table-review-help {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px;
  padding: 8px 14px; border-bottom: 1px solid var(--line); color: var(--muted);
  font-size: 11.5px;
}
.table-review-help .chips { margin-bottom: 0; }
.table-review-help .chip { white-space: nowrap; }
#charTable th, #charTable td { padding: 7px 9px; }
#charTable th { font-size: 10.5px; letter-spacing: .03em; }
#charTable td:first-child { font-weight: 700; width: 44px; }
#charTable .review-cell { width: 100px; min-width: 100px; }
.review-toggle {
  display: inline-flex; align-items: center; gap: 6px; min-height: 28px;
  white-space: nowrap; cursor: pointer; color: var(--ok); font-size: 11.5px;
}
.review-toggle input { width: 16px; height: 16px; margin: 0; accent-color: var(--ok); cursor: pointer; }
.review-cell .added-status { display: block; width: fit-content; margin: 2px 0 0 22px; }
tr.needs-review .review-toggle { color: var(--warn-ink); }
/* The specification is elided when it is long, but the tags after it say
   whether the value was corrected or the balloon moved - so they keep their
   place and only the text gives way. */
td.spec { max-width: 210px; }
td.spec .spec-content { display: flex; align-items: center; gap: 2px; }
#charTable .spec-input {
  flex: 1; width: 100%; min-width: 90px; padding: 5px 7px;
  border: 1px solid var(--line); border-radius: 6px; background: #fff;
  color: var(--ink); font: 12.5px "SFMono-Regular", Consolas, monospace;
}
#charTable .spec-input:hover { border-color: var(--muted); }
#charTable .spec-input:focus { border-color: var(--accent); outline: none; }
td.spec .tag { flex: 0 0 auto; }
/* A fixed width, not width:100% - the table has no table-layout:fixed, so a
   percentage here left the column's auto-computed width with nothing to
   resolve against and it collapsed to a few pixels, hiding the text behind
   an arrow with no room left to show it. */
#charTable select[data-f="char_type"] {
  width: 82px; padding: 3px 4px; border: 1px solid transparent;
  border-radius: 6px; font: inherit; font-size: 11px; background: transparent; cursor: pointer;
}
#charTable select[data-f="char_type"]:hover { border-color: var(--line); background: #fff; }
#charTable select[data-f="char_type"]:focus { border-color: var(--accent); background: #fff; outline: none; }
#charTable .method-select {
  width: 150px; padding: 5px 7px; border: 1px solid var(--line);
  border-radius: 6px; font: inherit; font-size: 11.5px;
  color: var(--ink); background: #fff; cursor: pointer;
}
#charTable .method-select:focus { border-color: var(--accent); outline: none; }
button.del {
  border: none; background: none; color: var(--muted); font-size: 15px;
  cursor: pointer; padding: 0 4px; line-height: 1;
}
button.del:hover { color: var(--crit); }

tr.view-row, tr.view-row:hover { background: #eef2f9; }
tr.view-row td { padding: 6px 10px; font-size: 11.5px; letter-spacing: .02em; }
tr.view-row span { font-weight: 700; text-transform: uppercase; }
tr.view-row em { font-style: normal; color: var(--muted); margin-left: 8px; }
tr.ref-head, tr.ref-head:hover { background: #f4f5f7; }
tbody tr.sel { background: var(--accent-soft) !important; }
tbody tr.crit td:first-child { color: var(--crit); }
/* A reading the local OCR was not sure of, until a person accepts or edits it. */
tbody tr.needs-review td:first-child { box-shadow: inset 3px 0 0 #e0a526; }
.marker.check {
  border: 2px dashed #e0a526; box-shadow: none;
}
/* A reference dimension is shown, dimmed, so it is clearly a decision and
   not something the reader missed. */
tbody tr.ref td { color: var(--muted); font-style: italic; }
tbody tr.ref:hover { background: transparent; }
/* Specification is a formatted string the server composes, so a row with an
   unconfirmed edit dims its old text rather than leave it sitting there
   looking finished and contradicting the numbers beside it. Clears itself -
   nothing sets this after a real server response is applied. */
tbody tr.pending td.spec .spec-input { color: var(--muted); }
tbody tr.pending td.spec .spec-content::after {
  content: ""; display: inline-block; width: 5px; height: 5px;
  flex: 0 0 5px; margin-left: 6px; border-radius: 50%; background: var(--accent);
  animation: pulse 1.1s ease-in-out infinite;
}
@keyframes pulse { 50% { opacity: .25; } }

/* Type used to be read-only, and readable from the specification anyway
   ("Ø25" is plainly a diameter), so it gave way first on a narrower screen.
   It is now how a misread type gets corrected - Ø vs a plain diameter the
   sheet never marked - so it stays, and the row tightens elsewhere instead:
   trimmed padding and a shorter type control. */
@media (max-width: 1599px) {
  #charTable th, #charTable td { padding: 7px 7px; }
  #charTable select[data-f="char_type"] { width: 68px; font-size: 10px; }
  td.spec { max-width: 100px; }
}

/* The reader's notes can run long on a scanned sheet. They are worth reading,
   but not at the price of the table they are about, so they are held to a
   few lines and scroll within themselves. */
.warn {
  margin: 0; padding: 11px 14px; color: var(--warn-ink); background: var(--warn-bg);
  font-size: 12.5px; border-top: 2px solid #f59e0b;
  max-height: 122px; overflow-y: auto; overscroll-behavior: contain;
}
.warn:empty { display: none; }

.notes-box { margin-top: 10px; font-size: 12.5px; color: var(--muted); }
.notes-box ol { margin: 4px 0 0; padding-left: 20px; }

/* --------------------------------------------------------- busy + toasts */
.busy {
  position: fixed; inset: 0; z-index: 60; display: grid; place-items: center;
  background: rgba(244, 246, 250, .72); backdrop-filter: blur(2px);
}
.busy p { margin: 14px 0 0; font-size: 13.5px; color: var(--ink-2); text-align: center; }
/* Balloons rising while a drawing is read: each one floats up from the base,
   sways a little, grows, and fades out at the top before starting again. */
.bubbles { position: relative; width: 130px; height: 96px; margin: 0 auto; }
.bubbles i {
  position: absolute; bottom: 0; left: var(--x); width: var(--s); height: var(--s);
  border-radius: 50%; display: grid; place-items: center;
  font: 600 calc(var(--s) * .42) / 1 "Inter", system-ui, sans-serif; font-style: normal;
  color: var(--accent-ink);
  background: radial-gradient(circle at 32% 28%, #fff 0 12%, var(--accent-soft) 45%, #b9c9f5 100%);
  border: 1.5px solid rgba(26, 70, 184, .45);
  box-shadow: 0 2px 6px rgba(26, 70, 184, .18);
  opacity: 0;
  animation: bubble-rise var(--d) ease-in-out var(--t) infinite;
}
@keyframes bubble-rise {
  0%   { transform: translate(0, 0) scale(.6); opacity: 0; }
  12%  { opacity: 1; }
  50%  { transform: translate(7px, -48px) scale(1); }
  85%  { opacity: .9; }
  100% { transform: translate(-5px, -92px) scale(1.04); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .bubbles i { animation: none; opacity: .85; }
}

.toasts {
  position: fixed; z-index: 70; right: 18px; bottom: 18px;
  display: flex; flex-direction: column; gap: 8px; align-items: flex-end;
}
.toast {
  background: var(--navy); color: #fff; padding: 10px 14px; border-radius: 9px;
  font-size: 13px; max-width: 420px; box-shadow: 0 10px 30px rgba(15, 28, 48, .25);
  animation: rise .16s ease;
}
.toast.error { background: #8f1c1c; }
.toast.out { opacity: 0; transform: translateY(6px); transition: opacity .35s, transform .35s; }
.toast.undo { display: flex; align-items: center; gap: 10px; }
.toast-undo {
  background: rgba(255, 255, 255, .16); color: #fff; border: none; border-radius: 6px;
  padding: 4px 10px; font-size: 12.5px; font-weight: 600; cursor: pointer; flex: none;
}
.toast-undo:hover { background: rgba(255, 255, 255, .28); }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }

/* ------------------------------------------------------------- narrow */
@media (max-width: 1100px) {
  .header-menu { grid-template-columns: minmax(0, 1fr) auto; }
  .header-nav { grid-column: 1 / -1; grid-row: 2; }
}

@media (max-width: 900px) {
  .header-menu { padding: 12px 14px; gap: 12px; }
  .views { padding: 16px 14px 28px; }
  .gauge-settings-tabs { margin-inline: 14px; }
  .topbar { padding: 12px 14px; }
  .top-actions { gap: 6px; }
  .card.pad { padding: 16px; }
  .canvas { max-height: 60vh; }
}

/* On a phone the page's own buttons would otherwise stack four deep and push
   the drawing off the first screen, so the header becomes two rows and the
   actions scroll sideways within their own. */
@media (max-width: 720px) {
  .header-brand { gap: 12px; }
  .header-logo { width: 56px; height: 38px; }
  .header-title { padding-left: 10px; font-size: 13px; }
  .header-account { padding-left: 12px; }
  .account-name { display: none; }
  .header-nav { gap: 4px; padding: 2px; }
  .nav-item { padding: 9px 10px; font-size: 13px; }
  .topbar {
    display: flex; flex-direction: column; align-items: stretch; gap: 10px;
  }
  .page-back { align-self: flex-start; }
  .topbar.has-inline-back { display: grid; grid-template-columns: auto minmax(0, 1fr); }
  .topbar.has-inline-back .page-tools { grid-column: 1 / -1; }
  .top-actions {
    margin-left: 0; flex-wrap: nowrap; justify-content: flex-start;
    overflow-x: auto; overscroll-behavior-x: contain;
    /* the strip scrolls; its own scrollbar would only steal a line of height */
    scrollbar-width: none; padding-bottom: 1px;
  }
  .top-actions:empty { display: none; }
  .top-actions::-webkit-scrollbar { display: none; }
  .top-actions .btn { flex: 0 0 auto; font-size: 12.5px; padding: 7px 11px; }
  /* Room is too tight for the explanation beside a switch; the label carries it. */
  .viewer-head .check em { display: none; }
  /* A seven-column table cannot be read on a phone, so each drawing becomes a
     card instead: the part, then what the folded columns held, then the three
     things you came to press. */
  #histTable, #histTable tbody, #histTable tr, #histTable td { display: block; }
  #histTable thead { display: none; }
  #histTable tr { padding: 12px 14px; border-bottom: 1px solid var(--line-2); }
  #histTable td { padding: 0; border: none; }
  #histTable td:nth-child(1), #histTable td:nth-child(3),
  #histTable td:nth-child(4), #histTable td:nth-child(5) { display: none; }
  #histTable td.acts {
    display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-start;
    white-space: normal; margin-top: 10px;
  }
  #histTable td.acts > * { margin: 0; }
  #histTable td.acts .ghost.small { padding: 6px 10px; font-size: 12.5px; }
  table.grid td.acts > * { margin-left: 3px; }
  .chips { gap: 6px; }
  .chip { font-size: 12px; padding: 4px 10px; }
}

/* --------------------------------------------------------------- rates & costing */
.rate-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0 16px; }
.rate-grid.tight { margin-top: 14px; }

.cs-head { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0 16px; margin-bottom: 14px; }
.cost-grid td.num, .cost-grid th.num { text-align: right; }
.cost-indent { padding-left: 26px !important; }
.with-btn { display: flex; gap: 6px; align-items: center; }
.with-btn input { flex: 1; min-width: 0; }

.quote-preview { border: 1px solid var(--line); }
.quote-preview-table { width: 100%; margin-top: 10px; }
.quote-preview-table th.num, .quote-preview-table td.num { text-align: right; }
.quote-preview-totals {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px 16px; padding: 14px 16px; margin-top: 14px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2, #f7f8fb);
}
.quote-preview-totals > div { display: flex; flex-direction: column; gap: 3px; }
.quote-preview-totals span { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.quote-preview-totals b { font-size: 15px; }
.quote-preview-totals .grand b { font-size: 19px; color: var(--accent); }

.cost-detail summary { cursor: pointer; font-weight: 650; padding: 4px 0; }
.cost-detail[open] summary { margin-bottom: 10px; }

.parent-banner { background: var(--panel-2, #f7f8fb); border: 1px solid var(--line);
  border-radius: 8px; padding: 8px 12px; font-size: 13px; }

/* A menu entry switched off in the markup stays off, whatever the flex rule above says. */
.nav-item[hidden] { display: none; }

/* Feasibility study: fit every column and control within the card. */
.fs-meta-grid {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px 16px; margin-bottom: 14px;
}
.fs-meta-grid .field { min-width: 0; margin-bottom: 0; }
.fs-meta-grid input { min-width: 0; }
@media (max-width: 1100px) {
  .fs-meta-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .fs-meta-grid { grid-template-columns: minmax(0, 1fr); }
}
#fsTable { table-layout: fixed; }
#fsTable .fs-col-number { width: 4.5%; }
#fsTable .fs-col-type { width: 7.5%; }
#fsTable .fs-col-critical { width: 3%; }
#fsTable .fs-col-spec { width: 10%; }
#fsTable .fs-col-tolerance { width: 6%; }
#fsTable .fs-col-status { width: 7.5%; }
#fsTable .fs-col-method { width: 13.5%; }
#fsTable .fs-col-remarks { width: 18%; }
#fsTable th, #fsTable td {
  padding: 9px 7px; white-space: normal; overflow-wrap: anywhere;
}
#fsTable select, #fsTable input[type="text"] { min-width: 0; max-width: 100%; }
#fsTable input[data-f="remarks"] { width: 100%; }
#fsTable .fs-type {
  width: 100%; padding: 7px 4px; border: 1px solid var(--line);
  border-radius: 7px; font: inherit; font-size: 11px; background: #fff;
}
#fsTable input.fs-method {
  width: 100%; padding: 8px 28px 8px 9px; border: 1px solid var(--line);
  border-radius: 7px; font: inherit; font-size: 11px; background: #fff;
}
#fsTable input.fs-method:hover { border-color: #b2c1d8; }
#fsTable input.fs-method:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 2px var(--accent-soft); }
.fs-method-picker { display: flex; align-items: center; gap: 5px; }
.fs-method-control { position: relative; flex: 1; min-width: 0; }
.fs-method-toggle {
  position: absolute; top: 0; right: 0; bottom: 0; width: 27px; padding: 0;
  display: grid; place-items: center; border: 0; background: transparent; color: var(--muted); cursor: pointer;
}
.fs-method-toggle svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.fs-method-menu {
  position: fixed; z-index: 100; box-sizing: border-box; overflow-y: auto;
  padding: 5px; border: 1px solid var(--line); border-radius: 9px;
  background: #fff; box-shadow: 0 8px 24px rgba(24, 42, 75, .16);
  font-size: 12px; line-height: 1.45; overscroll-behavior: contain;
}
.fs-method-option { position: relative; padding: 9px 26px 9px 10px; border-radius: 5px; cursor: pointer; overflow-wrap: anywhere; }
.fs-method-option:hover, .fs-method-option.active { background: var(--accent-soft); color: var(--accent-ink); }
.fs-method-option[aria-selected="true"] { color: var(--accent-ink); font-weight: 600; }
.fs-method-option[aria-selected="true"]::after { content: "\2713"; position: absolute; right: 9px; }
.fs-method-empty { padding: 12px 10px; color: var(--muted); }
.fs-method-add { flex: none; padding: 4px 7px; font-size: 11px; }
.fs-actions { justify-content: flex-end; margin: 0 0 14px; }
.fs-review { min-width: 240px; max-width: 400px; white-space: normal; font-size: 11px; margin-top: 8px; }
.fs-review details { margin-top: 5px; }
.fs-review summary { cursor: pointer; }
.fs-review ul { padding-left: 17px; }
.fs-review label { display: block; margin: 6px 0; }

/* The check walkthrough panel (one flagged reading at a time). */
.chip.check-chip { cursor: pointer; font: inherit; }
.check-panel {
  position: fixed; right: 18px; bottom: 18px; z-index: 40; width: 420px; max-width: calc(100vw - 36px);
  display: flex; flex-direction: column; gap: 10px;
  background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px;
  box-shadow: 0 16px 44px rgba(15, 28, 48, .3);
}
.check-head { display: flex; align-items: center; gap: 8px; }
.check-head b { font-size: 14px; }
.check-head .pop-x { margin-left: auto; }
.check-crop {
  height: 130px; border: 1px solid var(--line); border-radius: 8px;
  background-color: #fff; background-repeat: no-repeat; image-rendering: auto;
}
.check-read { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.check-read code { font-size: 13px; background: #f3f5f8; padding: 1px 6px; border-radius: 5px; }
.check-why { margin: 2px 0 0; font-size: 12px; color: var(--warn-ink); }
.check-acts { display: flex; align-items: center; gap: 6px; }
.check-acts kbd {
  font: 600 10px/1 ui-monospace, Menlo, monospace; padding: 2px 4px; margin-left: 4px;
  border: 1px solid rgba(0, 0, 0, .25); border-radius: 4px; background: rgba(255, 255, 255, .5);
}
.check-acts .danger-text { color: #b42318; }


/* Keyboard shortcuts: the key on each tool, the symbol bar's numbers, and the
   cheat sheet opened with ? */
.hk {
  margin-left: 6px; padding: 0 4px; font: 600 10px/1.5 ui-monospace, "SF Mono", Menlo, monospace;
  color: var(--muted, #667085); border: 1px solid var(--line, #d7dde8); border-radius: 4px;
  background: rgba(255, 255, 255, .6); white-space: nowrap;
}
.tool-btn.primary .hk { color: #fff; border-color: rgba(255, 255, 255, .5); background: transparent; }
.tool-btn:disabled { opacity: .45; cursor: default; }
.viewer-toolbar .hk { display: none; }
.add-symbol-button { position: relative; }
.add-symbol-button .hk-num {
  position: absolute; top: 1px; right: 2px; font: 600 8px/1 ui-monospace, Menlo, monospace;
  color: var(--muted, #667085); opacity: .8;
}
.shortcuts-overlay {
  position: fixed; inset: 0; z-index: 90; display: grid; place-items: center;
  background: rgba(15, 23, 42, .45);
}
.shortcuts-overlay.hidden { display: none; }
.shortcuts-card {
  position: relative; width: min(760px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow: auto;
  padding: 18px 22px 20px; border-radius: 12px; background: var(--card, #fff);
  box-shadow: 0 18px 50px rgba(15, 23, 42, .35);
}
.shortcuts-card h3 { margin: 0 0 10px; font-size: 16px; }
.shortcuts-close {
  position: absolute; top: 8px; right: 10px; border: 0; background: none; font-size: 22px; cursor: pointer;
  color: var(--muted, #667085);
}
.shortcuts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 4px 28px; }
.shortcuts-grid h4 { margin: 12px 0 4px; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted, #667085); }
.shortcuts-grid .row { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; font-size: 13px; }
.shortcuts-grid kbd {
  font: 600 11.5px/1.4 ui-monospace, "SF Mono", Menlo, monospace; padding: 0 6px; border-radius: 5px;
  border: 1px solid var(--line, #d7dde8); background: #f6f8fb; white-space: nowrap;
}


/* ---- assembly structure: levels, child rows, item actions ---- */
.lvl-badge {
  display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .02em;
  padding: 1px 6px; border-radius: 999px; background: var(--accent-bg, #e8f0fe);
  color: var(--accent, #1a56db); border: 1px solid var(--accent, #1a56db); margin-right: 4px;
  vertical-align: middle;
}
.child-row td { background: color-mix(in srgb, var(--accent, #1a56db) 4%, transparent); }
.parent-note {
  margin: 0 0 14px; padding: 10px 14px; border-radius: 8px;
  background: var(--accent-bg, #e8f0fe); border: 1px solid var(--accent, #1a56db); font-size: 13px;
}
.pop-structure { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pop-structure .muted { font-size: 11px; width: 100%; }
.structure-panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(420px, 100%); z-index: 30;
  background: var(--card, #fff); border-left: 1px solid var(--line, #e3e6ea);
  box-shadow: -8px 0 24px rgba(0,0,0,.08); display: flex; flex-direction: column;
}
.structure-head { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--line, #e3e6ea); }
.structure-head b { font-size: 14px; }
.structure-body { overflow: auto; padding: 10px 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.structure-crumbs { font-size: 12px; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.structure-crumbs a { cursor: pointer; color: var(--accent, #1a56db); }
.structure-item {
  border: 1px solid var(--line, #e3e6ea); border-radius: 8px; padding: 8px 10px; display: grid;
  grid-template-columns: auto 1fr; gap: 4px 10px; align-items: center; font-size: 12.5px;
}
.structure-item .no { font-weight: 700; font-size: 13px; white-space: nowrap; }
.structure-item .what { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.structure-item .what input { font-size: 12px; padding: 3px 6px; }
.structure-item .status { grid-column: 1 / -1; font-size: 11.5px; }
.structure-item .acts { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.structure-item.linked { border-color: var(--accent, #1a56db); }
.structure-item .kind { font-size: 11px; }
.structure-empty { font-size: 12.5px; }
.structure-add { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.structure-add input { width: 70px; }
.viewer { position: relative; }

/* Inspection balloons on an assembly sheet are hexagons on the print; the
   handle follows, so hovering outlines the same shape. */
.handle.hex { border-radius: 0; clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%); }
.handle.hex:hover, .handle.hex.dragging { background: rgba(26, 70, 184, .14); }

.pop-structure-row { display: flex; gap: 6px; flex-wrap: wrap; }
/* Company role access control */
.access-panel { max-width: 1040px; margin: 0 auto; overflow: hidden; border-radius: 14px; }
.access-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding: 24px 28px; border-bottom: 1px solid var(--line); }
.access-heading h2 { margin: 0; color: #243751; font-size: 20px; letter-spacing: -.02em; }
.access-heading p { margin: 6px 0 0; color: var(--muted); font-size: 13px; }
.access-toolbar { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; padding: 24px 28px; background: #f8faff; }
.access-toolbar .field { flex: 0 1 260px; min-width: 200px; margin: 0; }
.access-toolbar select { min-height: 44px; background: #fff; border-radius: 8px; }
.access-toolbar p { flex: 1; min-width: 200px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.8; }
.access-matrix-scroll { max-height: 62vh; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.access-matrix-scroll:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.access-table { margin: 0; min-width: 350px; }
.access-table thead th { position: sticky; top: 0; z-index: 1; background: #f3f6fb; color: #526780; }
.access-table th[scope="row"] { padding: 16px 28px; text-align: left; color: #344b68; font-size: 13px; font-weight: 500; }
.access-table thead th:first-child { padding-left: 28px; }
.access-table td, .access-table thead th:not(:first-child) { width: 150px; text-align: center; }
.access-table thead label { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; }
.access-table tbody tr:hover { background: #fafcff; }
.access-table input[type="checkbox"] { width: 19px; height: 19px; margin: 0; vertical-align: middle; accent-color: #2454b8; cursor: pointer; }
.access-table input:focus-visible { outline: 2px solid #2454b8; outline-offset: 4px; }
.access-table input:disabled { cursor: default; }
.access-note { margin: 0; padding: 14px 28px; background: #edf3ff; color: #25477c; font-size: 12px; }
.access-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding: 22px 28px; }
.access-footer p, .access-footnote { color: var(--muted); font-size: 11px; line-height: 1.7; }
.access-footer p { margin: 5px 0 0; }
.access-footer .form-acts { margin: 0; gap: 10px; }
.access-footer button { min-height: 42px; border-radius: 8px; }
.access-footnote { margin: 0; padding: 0 28px 20px; }
.access-error { margin: 0 28px 20px; }
#viewAccessControl [hidden] { display: none !important; }
.role-add-dialog { width: min(500px, calc(100vw - 32px)); max-width: none; max-height: 90dvh; padding: 0; overflow: auto; border: 1px solid #dce4ef; border-radius: 14px; color: var(--ink); background: #fff; box-shadow: 0 16px 44px rgba(55, 81, 119, .12); }
.role-add-dialog::backdrop { background: rgba(248, 250, 253, .78); backdrop-filter: blur(2px); }
.role-add-form { margin: 0; padding: 0; }
.role-modal-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 22px 24px; border-bottom: 1px solid var(--line); }
.role-modal-heading h3 { margin: 0; font-size: 20px; color: #243751; }
.role-modal-heading p { margin: 5px 0 0; }
.role-modal-heading button { min-width: 32px; min-height: 32px; padding: 0; font-size: 24px; }
.role-modal-body { padding: 24px; }
.role-add-form .field { max-width: none; }
.role-add-form input { min-height: 44px; }
.role-add-form p { color: var(--muted); font-size: 12px; line-height: 1.7; }
.role-add-form .auth-error { padding: 10px 12px; border-radius: 8px; color: #a51f32; background: #fff3f5; }
.role-add-form .role-modal-actions { justify-content: flex-end; margin: 0; padding: 18px 24px; border-top: 1px solid var(--line); background: #f8faff; }
.role-modal-actions button { min-height: 42px; }
body:has(#roleAddDialog[open]) { overflow: hidden; }
.roles-table th, .roles-table td { padding: 16px 24px; }
.roles-table .muted { white-space: nowrap; }
#rolesStatus { padding-top: 20px; }
@media (max-width: 600px) {
  .access-heading, .access-toolbar, .access-footer { padding: 20px 16px; }
  .access-toolbar { gap: 14px; }
  .access-toolbar .field { flex-basis: 100%; }
  .access-footer .form-acts { width: 100%; }
  .access-footer button { flex: 1; }
  .access-footnote { padding: 0 16px 18px; }
  .access-table th[scope="row"] { padding: 14px 16px; }
}
#usersTable .account-role { min-width: 140px; }
#accessStatus { font-size: 13px; color: #61718a; }
.permission-readonly::before { content: "Read-only access"; display: block; margin-bottom: 12px; color: var(--muted); font-size: 13px; }
.permission-readonly #markers, .permission-readonly #detailMarkers, .permission-readonly #handles, .permission-readonly #leaderTips, .permission-readonly #hiddenAreas,
.permission-readonly #viewBoxes { pointer-events: none; }

/* Login registration in Settings */
.account-registration { margin-top: 24px; padding: 24px; border: 1px solid #e0e8f4; border-radius: 12px; background: #f8faff; }
.account-registration-heading { display: flex; align-items: center; gap: 13px; margin-bottom: 22px; }
.account-registration-icon { display: grid; place-items: center; flex: 0 0 42px; height: 42px; border: 1px solid #dae6fa; border-radius: 11px; color: #2458bc; background: #edf3fe; }
.account-registration-icon svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.account-registration-heading h3 { margin: 0; color: #243751; font-size: 16px; font-weight: 700; }
.account-registration-heading p { margin: 4px 0 0; color: #64748b; font-size: 12px; }
#newAccountForm .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 22px; }
#newAccountForm .field > span { color: #425570; font-size: 12px; font-weight: 600; }
#newAccountForm .field b { color: #3668bd; font-weight: 600; }
#newAccountForm input, #newAccountForm select { min-width: 0; min-height: 44px; padding: 11px 13px; border: 1px solid #dce4ef; border-radius: 8px; background: #fff; font-size: 13px; }
#newAccountForm input::placeholder { color: #9aa7b8; opacity: 1; }
#newAccountForm input:focus, #newAccountForm select:focus { outline: none; border-color: #477ad1; box-shadow: 0 0 0 3px rgba(56, 112, 207, .10); }
.account-registration-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-top: 22px; padding-top: 18px; border-top: 1px solid #e2e9f4; }
.account-registration-footer p { margin: 0; color: #64748b; font-size: 12px; }
.account-registration-footer .primary { min-height: 42px; padding: 10px 22px; border-radius: 8px; }
@media (max-width: 600px) {
  .account-registration { padding: 20px 16px; }
  #newAccountForm .form-grid { grid-template-columns: minmax(0, 1fr); }
  .account-registration-footer .primary { width: 100%; }
}
.apqp-overview-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-4, 16px); margin-block: 16px; }
.apqp-overview-metrics section { padding: 16px; border: 1px solid var(--line); border-radius: 12px; }
.apqp-overview-metrics h4 { margin: 0 0 8px; }
#apqpWork .apqp-review-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: var(--space-4, 16px); }
#apqpWork .apqp-review-rows, #apqpWork .apqp-review-help { grid-column: 1 / -1; }
#apqpWork .apqp-review-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: var(--space-3, 12px); align-items: end; padding: 12px; margin-bottom: 12px; border: 1px solid var(--line); border-radius: 8px; }
#apqpWork .apqp-review-row input, #apqpWork .apqp-review-row select { width: 100%; min-width: 0; box-sizing: border-box; }
#apqpWork [data-workflow-body] .apqp-phase { min-width: 0; overflow-wrap: anywhere; }
.apqp-overview-metrics strong { font-size: 1.5rem; }
.apqp-project-tools { margin-block: 12px; }
.apqp-project-tools > summary, .apqp-project-menu > summary { cursor: pointer; padding: 8px; }
.apqp-project-header { align-items: start; }
/* Session 3 task list and detail drawer. */
#apqpWork .apqp-compact-task { display: grid; grid-template-columns: 24px minmax(160px, 1fr) minmax(100px, .4fr) minmax(120px, .4fr) 110px; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
#apqpWork .apqp-task-title { text-align: left; white-space: normal; overflow-wrap: anywhere; }
#apqpWork .apqp-task-title small { display: block; }
#apqpWork [data-task-phase] > summary { cursor: pointer; padding-bottom: 12px; font-weight: 600; }
#apqpWork .apqp-task-dialog { box-sizing: border-box; position: fixed; inset: 0 0 0 auto; margin: 0; width: min(640px, 100%); max-width: 100%; height: 100dvh; max-height: 100dvh; padding: 24px; border: 1px solid var(--line); border-radius: 0; background: var(--card); color: var(--ink); overflow-y: auto; overflow-wrap: anywhere; }
#apqpWork .apqp-task-dialog::backdrop { background: rgb(0 0 0 / .35); }
#apqpWork .apqp-task-dialog .apqp-form-grid { margin-bottom: 16px; }
#apqpWork .apqp-task-dialog select { width: 100%; min-width: 0; padding: 10px; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); color: var(--ink); font: inherit; }
#apqpWork [data-na-field][hidden] { display: none; }
#apqpWork .apqp-creation { margin: 20px 0; padding: 20px; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); overflow-wrap: anywhere; }
#apqpWork .apqp-creation-dialog { box-sizing: border-box; width: min(960px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px); padding: 24px; background: var(--card); }
#apqpWork .apqp-creation-dialog .apqp-creation { margin: 0; padding: 0; border: 0; }
#apqpWork .apqp-creation-dialog .apqp-toolbar { align-items: center; }
#apqpWork .apqp-creation-dialog h3 { margin: 0; }
#apqpWork .apqp-creation-steps { display: flex; flex-wrap: wrap; gap: 8px 24px; padding: 0; list-style: none; color: var(--muted); }
#apqpWork .apqp-creation-steps [aria-current="step"] { color: var(--ink); font-weight: 700; }
#apqpWork .apqp-creation-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
#apqpWork .apqp-creation-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 12px; }
#apqpWork .apqp-creation-summary dt { font-weight: 600; }
#apqpWork .apqp-evidence-item { padding: 16px 0; border-bottom: 1px solid var(--line); min-width: 0; overflow-wrap: anywhere; }
#apqpWork .apqp-evidence-item p { margin: 6px 0; }
#apqpWork .apqp-evidence-upload { margin: 24px 0; }
#apqpWork .apqp-evidence-upload summary { margin-bottom: 16px; cursor: pointer; }
#apqpWork [data-task-evidence] input, #apqpWork [data-task-evidence] label { min-width: 0; max-width: 100%; box-sizing: border-box; }
#apqpWork .apqp-creation-summary dd { margin: 4px 0 0; }
#apqpWork .apqp-creation-preview details { margin: 12px 0; }
#apqpWork [data-creation-error] { color: var(--danger, #b42318); }
#apqpWork .apqp-task-dialog section { margin: 20px 0; }
#apqpWork .apqp-task-dialog button:focus-visible, #apqpWork .apqp-task-title:focus-visible, #apqpWork [data-task-phase] > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (max-width: 700px) {
  #apqpWork .apqp-compact-task { grid-template-columns: 24px minmax(0, 1fr); gap: 6px 12px; }
  #apqpWork .apqp-compact-task > span { grid-column: 2; }
  #apqpWork .apqp-task-dialog { padding: 16px; }
}
.apqp-quality-form fieldset { min-width: 0; margin-block: 1rem; border: 1px solid var(--line); border-radius: 8px; padding: 1rem; }
.apqp-quality-form legend { font-weight: 600; padding-inline: .4rem; }
.apqp-quality-import { grid-column: 1 / -1; min-width: 0; }
.apqp-quality-import textarea { width: 100%; box-sizing: border-box; }
.apqp-quality-form pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.apqp-quality-form [hidden] { display: none; }
.apqp-quality-form .ppap-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 16px; }
.apqp-quality-form label { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.apqp-quality-form input, .apqp-quality-form select, .apqp-quality-form textarea { min-width: 0; max-width: 100%; box-sizing: border-box; padding: 8px; border: 1px solid var(--line); border-radius: 6px; font: inherit; }
.apqp-quality-form input[type="checkbox"] { align-self: start; }
.apqp-quality-form button { padding: 8px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--card); color: var(--ink); cursor: pointer; margin-block: 8px; }
#apqpWork [aria-label="Quality connections"], #apqpWork .apqp-context-links { flex-wrap: wrap; }
.apqp-ai-summary { overflow-wrap: anywhere; }
.apqp-ai-summary [hidden] { display: none !important; }
.apqp-ai-summary [data-summary-result] > p { white-space: pre-wrap; }