:root {
  --paper: #ffffff;
  --workbench: #f4f6f8;
  --paper-inset: #eef2f5;
  --drawing-ink: #1c3041;
  --graphite: #4d6070;
  --pencil: #657787;
  --faint-note: #7a8995;
  --sheet-border: #dce3e9;
  --sheet-rule: #e8edf1;
  --blueprint: #1a4e75;
  --blueprint-hover: #153f5f;
  --fps-red: #962328;
  --fps-red-hover: #7f1d22;
  --blueprint-tint: #e9f1f7;
  --control-paper: #f7f9fa;
  --control-border: #b8c6d1;
  --focus-ink: #1c6ea7;
  --annotation-amber: #80561b;
  --annotation-paper: #faf4e7;
  --annotation-line: #e5d5ae;
  --error-ink: #9c3034;
  --error-paper: #fff1f1;
  --success-ink: #27644f;
  --success-paper: #ecf6f0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --radius-control: 4px;
  --radius-sheet: 8px;
  --radius-dialog: 12px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--workbench); color: var(--drawing-ink); font-family: "Segoe UI", Tahoma, sans-serif; font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
body { margin: 0; }
button, input, select { font: inherit; }
button, a, input, select, summary { -webkit-tap-highlight-color: transparent; }
button, summary { cursor: pointer; }
a { color: var(--blueprint); text-underline-offset: 3px; }
a:hover { color: var(--blueprint-hover); }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible { outline: 3px solid var(--focus-ink); outline-offset: 3px; }
button:disabled { cursor: not-allowed; opacity: .52; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: Bahnschrift, "Segoe UI", sans-serif; text-wrap: balance; font-weight: 600; }
h1 { font-size: 28px; line-height: 1.25; letter-spacing: -.5px; margin-bottom: var(--space-2); }
h2 { font-size: 22px; line-height: 1.3; letter-spacing: -.25px; margin-bottom: var(--space-4); }
h3 { font-size: 17px; margin-bottom: var(--space-3); }
p { text-wrap: pretty; }
input, select { width: 100%; min-height: 44px; padding: 10px 12px; color: var(--drawing-ink); border: 1px solid var(--control-border); border-radius: var(--radius-control); background: var(--control-paper); }
input::placeholder { color: var(--faint-note); }
input:disabled, select:disabled { color: var(--pencil); }
input[type="checkbox"] { width: 20px; height: 20px; min-height: 20px; flex: 0 0 20px; accent-color: var(--blueprint); }
input[type="file"] { padding: 8px; }
input[type="file"]::file-selector-button { border: 0; border-radius: var(--radius-control); padding: 6px 10px; color: var(--drawing-ink); background: var(--sheet-border); margin-right: var(--space-3); font: inherit; cursor: pointer; }
label { display: block; font-weight: 600; margin-bottom: var(--space-2); }
form > label:not(:first-child) { margin-top: var(--space-4); }
.app-header { min-height: 88px; padding: 16px 32px; background: var(--paper); border-bottom: 1px solid var(--sheet-border); display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); }
.brand { display: flex; gap: var(--space-4); align-items: center; min-width: 0; text-decoration: none; color: var(--drawing-ink); }
.brand strong { font: 600 18px/1.3 Bahnschrift, "Segoe UI", sans-serif; display: block; }
.brand small { display: block; color: var(--pencil); font-size: 12px; margin-top: var(--space-1); }
.brand-mark { width: 112px; height: 49px; display: block; object-fit: contain; flex: 0 0 auto; }
.header-tools { display: flex; align-items: center; gap: var(--space-4); }
.workspace-tag { display: inline-flex; border: 1px solid var(--sheet-border); color: var(--graphite); border-radius: 3px; padding: 3px 8px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.identity { max-width: 260px; text-align: right; font-size: 13px; }
.identity strong, .identity span { display: block; }
.identity strong { overflow-wrap: anywhere; }
.identity span { color: var(--pencil); font-size: 12px; }
.workspace { display: grid; grid-template-columns: 1fr; min-height: calc(100vh - 88px); }
.workspace.signed-in { grid-template-columns: 216px minmax(0, 1fr); }
.sidebar { padding: 32px 16px; border-right: 1px solid var(--sheet-border); display: flex; flex-direction: column; }
.nav-label { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--pencil); padding: 0 12px; margin-bottom: 12px; }
.nav-button { width: 100%; min-height: 44px; border: 0; border-radius: var(--radius-control); background: transparent; color: var(--graphite); text-align: left; padding: 12px; margin-bottom: 4px; font-weight: 500; }
.nav-button:hover { background: var(--paper-inset); color: var(--drawing-ink); }
.nav-button[aria-current="page"] { color: var(--blueprint); background: var(--blueprint-tint); font-weight: 600; }
.sidebar-note { margin-top: auto; padding: 32px 12px 0; color: var(--pencil); font-size: 12px; }
.sidebar-note p { margin: 8px 0 0; }
.small-index { font: 12px Consolas, monospace; color: var(--graphite); }
main { padding: 32px; min-width: 0; outline: none; }
main:not(:focus-visible) { outline: none; }
.initial-state { color: var(--pencil); }
.button { display: inline-flex; min-height: 44px; padding: 10px 16px; align-items: center; justify-content: center; gap: 8px; border: 1px solid transparent; border-radius: var(--radius-control); text-decoration: none; font-weight: 600; line-height: 1.4; white-space: normal; transition: background-color 120ms, color 120ms; }
.button-primary { background: var(--fps-red); color: var(--paper); border-color: var(--fps-red); }
.button-primary:hover:not(:disabled) { background: var(--fps-red-hover); border-color: var(--fps-red-hover); }
.button-secondary { background: var(--paper); color: var(--drawing-ink); border-color: var(--control-border); }
.button-secondary:hover:not(:disabled) { background: var(--paper-inset); }
.button-quiet { color: var(--graphite); background: transparent; border-color: transparent; }
.button-quiet:hover:not(:disabled) { background: var(--paper-inset); color: var(--drawing-ink); }
.button-danger { color: var(--error-ink); border-color: var(--sheet-border); background: var(--paper); }
.button-danger:hover:not(:disabled) { background: var(--error-paper); }
.button-small { padding: 8px 12px; font-size: 13px; }
.eyebrow { font: 500 11px/1.5 Bahnschrift, "Segoe UI", sans-serif; letter-spacing: 1.2px; text-transform: uppercase; color: var(--pencil); margin-bottom: 8px; }
.muted { color: var(--graphite); }
.meta { color: var(--pencil); font-size: 12px; }
.mono { font-family: Consolas, monospace; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.notice { padding: 12px 16px; border: 1px solid var(--annotation-line); background: var(--annotation-paper); color: var(--annotation-amber); border-radius: var(--radius-control); margin-bottom: 24px; }
.notice p:last-child { margin-bottom: 0; }
.notice-error { color: var(--error-ink); background: var(--error-paper); border-color: #efc9ca; }
.notice-success { color: var(--success-ink); background: var(--success-paper); border-color: #c7ded2; }
.scope-note { color: var(--pencil); font-size: 12px; border-top: 1px solid var(--sheet-border); padding-top: 16px; margin-top: 24px; }
.page-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.page-heading p { margin-bottom: 0; }
.page-heading h1 { overflow-wrap: anywhere; }
.heading-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.sheet { border: 1px solid var(--sheet-border); background: var(--paper); border-radius: var(--radius-sheet); overflow: hidden; }
.sheet-content { padding: 24px; }
.sheet-heading { padding: 20px 24px; border-bottom: 1px solid var(--sheet-rule); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.sheet-heading h2, .sheet-heading h3 { margin: 0; }
.login-layout { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 64px; max-width: 1000px; margin: 48px auto; align-items: start; }
.login-intro { padding-top: 32px; }
.login-intro h1 { font-size: 36px; max-width: 460px; }
.login-intro > p { max-width: 420px; color: var(--graphite); margin-top: 20px; font-size: 16px; }
.document-route { margin-top: 32px; border-left: 2px solid var(--blueprint); padding-left: 20px; display: grid; gap: 20px; }
.document-route strong { display: block; font-weight: 600; }
.document-route small { display: block; color: var(--pencil); margin-top: 4px; }
.login-card { padding: 32px; border-top: 3px solid var(--fps-red); }
.login-card h2 { margin-bottom: 8px; }
.login-card .form-actions > .button { width: 100%; }
.form-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.field-note { font-size: 12px; color: var(--pencil); margin-top: 8px; margin-bottom: 0; }
.field + .field { margin-top: 16px; }
.form-grid > .field + .field { margin-top: 0; }
.form-error { color: var(--error-ink); margin: 16px 0 0; font-size: 13px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field-full { grid-column: 1 / -1; }
.card-layout { display: grid; grid-template-columns: minmax(0, 1fr) 288px; align-items: start; gap: 24px; }
.stack { display: grid; gap: 24px; }
.check-label { display: flex; align-items: flex-start; gap: 12px; min-height: 44px; padding-top: 8px; font-size: 13px; font-weight: 400; }
.check-label input { margin-top: 0; }
.facts { margin: 0; display: grid; gap: 16px; }
.facts dt { color: var(--pencil); font-size: 12px; margin-bottom: 4px; }
.facts dd { margin: 0; overflow-wrap: anywhere; }
.status-tag { display: inline-flex; align-items: center; padding: 4px 8px; border-radius: 4px; background: var(--paper-inset); color: var(--graphite); font-size: 12px; font-weight: 600; }
.status-warning { background: var(--annotation-paper); color: var(--annotation-amber); }
.status-good { background: var(--success-paper); color: var(--success-ink); }
.table-tools { padding: 16px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--sheet-rule); }
.table-tools input { max-width: 360px; }
.table-wrap { width: 100%; overflow: auto; }
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; text-align: left; }
th { font-size: 11px; color: var(--pencil); font-weight: 600; text-transform: uppercase; letter-spacing: .4px; background: var(--control-paper); padding: 12px 16px; white-space: nowrap; }
td { padding: 16px; border-top: 1px solid var(--sheet-rule); vertical-align: top; font-size: 13px; }
th:first-child, td:first-child { padding-left: 24px; }
th:last-child, td:last-child { padding-right: 24px; }
td .meta { display: block; margin-top: 4px; }
.row-open { display: block; background: none; border: none; padding: 0; text-align: left; font: inherit; color: var(--blueprint); font-weight: 600; min-height: 32px; overflow-wrap: anywhere; }
.row-open:hover { text-decoration: underline; text-underline-offset: 3px; }
.row-actions { display: flex; align-items: flex-start; gap: 4px; flex-wrap: wrap; }
.empty-state { padding: 48px 24px; text-align: center; }
.empty-state .sheet-number { font: 28px Bahnschrift, sans-serif; color: var(--control-border); margin-bottom: 16px; }
.empty-state h2 { font-size: 20px; margin-bottom: 8px; }
.empty-state p { color: var(--pencil); max-width: 440px; margin: 0 auto; }
.pagination { padding: 12px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-top: 1px solid var(--sheet-rule); }
.file-list { list-style: none; padding: 0; margin: 0; }
.file-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; padding: 16px 24px; border-top: 1px solid var(--sheet-rule); }
.file-item:first-child { border-top: 0; }
.file-name { font-weight: 600; overflow-wrap: anywhere; margin-bottom: 4px; }
.file-sha { color: var(--pencil); font-size: 11px; margin-top: 4px; }
.source-link { align-self: start; }
.dialog { border: 1px solid var(--sheet-border); border-radius: var(--radius-dialog); padding: 0; width: min(520px, calc(100vw - 32px)); color: var(--drawing-ink); background: var(--paper); max-height: calc(100vh - 48px); overflow: auto; }
.dialog::backdrop { background: rgba(18, 35, 49, .38); }
.dialog-body { padding: 32px; }
.dialog-body p { overflow-wrap: anywhere; }
.password-row { display: flex; gap: 8px; }
.password-row input { min-width: 0; font-family: Consolas, monospace; }
.demo-banner { padding: 20px 24px; border: 1px solid var(--annotation-line); background: var(--annotation-paper); color: var(--annotation-amber); border-radius: var(--radius-sheet); margin-bottom: 24px; }
.demo-banner strong { display: block; margin-bottom: 4px; }
.quantity-route { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--sheet-border); }
.quantity-step { padding: 20px 24px; border-right: 1px solid var(--sheet-rule); }
.quantity-step:last-child { border-right: 0; }
.quantity-step span { display: block; color: var(--pencil); font-size: 12px; }
.quantity-step strong { display: block; font: 600 24px/1.4 Bahnschrift, sans-serif; margin-top: 4px; }
.quantity-step small { display: block; color: var(--pencil); margin-top: 4px; }
.demo-footer { padding: 16px 24px; border-top: 1px solid var(--sheet-rule); }
.demo-details { border: 1px solid var(--sheet-border); border-radius: var(--radius-sheet); margin-top: 24px; background: var(--paper); }
.demo-details summary { padding: 16px 24px; font-weight: 600; min-height: 56px; }
.demo-details-content { padding: 0 24px 24px; display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 24px; }
.drawing-example { background: var(--control-paper); border: 1px solid var(--sheet-border); padding: 16px; }
.drawing-plane { border-top: 2px solid var(--pencil); border-bottom: 2px solid var(--pencil); display: flex; align-items: center; justify-content: center; min-height: 88px; position: relative; margin: 16px 0; }
.drawing-door { width: 64px; height: 64px; border-left: 2px solid var(--blueprint); border-bottom: 1px dashed var(--blueprint); border-right: 1px dashed var(--blueprint); border-radius: 0 64px 0 0; }
.drawing-caption { font: 11px/1.5 Consolas, monospace; color: var(--pencil); }
.skip-link { position: absolute; left: 16px; top: -64px; background: var(--paper); color: var(--blueprint); border: 2px solid var(--focus-ink); padding: 12px; z-index: 10; }
.skip-link:focus { top: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@media (max-width: 1100px) {
  .app-header { padding: 16px 24px; }
  .workspace.signed-in { grid-template-columns: 184px minmax(0, 1fr); }
  main { padding: 24px; }
  .card-layout { grid-template-columns: 1fr; }
  .facts { grid-template-columns: 1fr 1fr; }
  .login-layout { gap: 32px; margin-top: 24px; }
}
@media (max-width: 760px) {
  .app-header { padding: 16px; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
  .brand strong { font-size: 16px; }
  .brand small { font-size: 11px; }
  .brand { gap: 12px; }
  .brand-mark { width: 96px; height: 42px; }
  .header-tools { width: 100%; justify-content: flex-start; gap: 12px; }
  .identity { text-align: left; margin-left: auto; font-size: 12px; }
  .workspace.signed-in { grid-template-columns: 1fr; }
  .sidebar { padding: 8px 16px; border-right: 0; border-bottom: 1px solid var(--sheet-border); overflow: auto; }
  .sidebar nav { display: flex; gap: 4px; }
  .nav-button { width: auto; white-space: nowrap; margin: 0; }
  .nav-label, .sidebar-note { display: none; }
  main { padding: 24px 16px; }
  h1 { font-size: 25px; }
  .page-heading { flex-direction: column; gap: 16px; }
  .heading-actions { width: 100%; }
  .login-layout { grid-template-columns: 1fr; gap: 24px; margin: 0 auto; max-width: 480px; }
  .login-intro { padding-top: 0; }
  .login-intro h1 { font-size: 28px; }
  .login-intro > p { font-size: 14px; margin-top: 12px; }
  .document-route { display: none; }
  .login-card, .sheet-content, .dialog-body { padding: 24px; }
  .form-grid, .facts { grid-template-columns: 1fr; }
  .table-tools { align-items: stretch; flex-direction: column; padding: 16px; }
  .table-tools input { max-width: none; }
  .file-item { grid-template-columns: 1fr; padding: 16px; gap: 8px; }
  .source-link { justify-self: start; }
  .sheet-heading { padding: 16px; align-items: flex-start; }
  .quantity-route { grid-template-columns: 1fr; }
  .quantity-step { border-right: 0; border-bottom: 1px solid var(--sheet-rule); padding: 12px 16px; }
  .quantity-step:last-child { border-bottom: 0; }
  .quantity-step strong { display: inline; font-size: 20px; }
  .quantity-step small { display: inline; margin-left: 8px; }
  .demo-details-content { grid-template-columns: 1fr; padding: 0 16px 16px; }
  .pagination { padding: 12px 16px; flex-wrap: wrap; }
  .password-row { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) { * { transition-duration: 0ms !important; scroll-behavior: auto !important; } }