:root {
  --control-h-md: 56px;
  --control-h-lg: 56px;
  --target-min: 52px;
}
.panel { font-size: 18px; line-height: 1.45; }
.panel h1 { font-size: 32px; line-height: 1.2; letter-spacing: -.025em; margin: 0 0 var(--sp-4); }
.panel h2 { font-size: 24px; margin: var(--sp-8) 0 var(--sp-3); }
.panel h3 { font-size: 20px; }
.panel p { margin: 0 0 var(--sp-4); }
.panel .btn, .panel .input, .panel .select, .panel .textarea,
.panel .alert, .panel .badge, .panel label, .panel small { font-size: 18px; }
.panel label { display: block; margin-bottom: var(--sp-2); font-weight: 600; }
.panel-header { padding: var(--sp-4) max(var(--sp-5), calc((100vw - 1520px) / 2)); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); border-bottom: 1px solid var(--border); background: var(--surface-1); }
.brand { display: inline-flex; gap: var(--sp-3); align-items: center; color: var(--text-1); text-decoration: none; min-height: 52px; }
.user-name { text-align: right; overflow-wrap: anywhere; }
.panel-main { max-width: 1560px; margin: auto; padding: var(--sp-8) var(--sp-5) 112px; }
.panel-nav { position: fixed; bottom: 0; inset-inline: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--surface-1); border-top: 1px solid var(--border); z-index: var(--z-sticky); padding-bottom: env(safe-area-inset-bottom); }
.panel-nav a { display: flex; flex-direction: column; align-items: center; gap: var(--sp-1); padding: var(--sp-3) var(--sp-1); min-height: 76px; color: var(--text-2); text-decoration: none; border-top: 3px solid transparent; }
.panel-nav a[aria-current] { color: var(--accent-fg); border-top-color: var(--accent); background: var(--accent-bg); font-weight: 600; }
.panel-nav a:hover { background: var(--fill-hover); }
.panel svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.muted { color: var(--text-2); }
.login-form { max-width: 420px; margin: var(--sp-10) auto; }
.login-form > p { margin-bottom: var(--sp-8); }
.form-stack { display: grid; gap: var(--sp-6); }
.field { min-width: 0; }
.avatar { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; background: var(--surface-4); color: var(--text-2); display: inline-grid; place-items: center; flex-shrink: 0; font-weight: 600; }
.panel .input::placeholder { color: var(--text-2); }
.panel input { caret-color: var(--accent); }
.panel a { text-underline-offset: .2em; }
.panel ::selection { background: var(--accent); color: var(--accent-on); }
.panel { scrollbar-color: var(--border-strong) var(--surface-0); }
.panel .table th, .panel .table td { font-size: 18px; }
.panel .card { padding: var(--sp-5); box-shadow: none; }
.panel .btn { min-height: 56px; white-space: normal; }
.panel .btn:not(.btn--primary):not(.btn--danger) { background: var(--surface-1); color: var(--text-1); border-color: var(--border); }
.panel .btn:not(.btn--primary):not(.btn--danger):hover { background: var(--surface-2); border-color: var(--border-strong); }
.person-name { color: var(--text-1); font-weight: 600; text-decoration: none; }
.person-row > div { min-width: 0; overflow-wrap: anywhere; }
.person-row p { margin: var(--sp-1) 0 0; }
.updated { margin-top: var(--sp-4) !important; color: var(--text-2); }
.absence-seen { background: var(--warning-bg); color: var(--warning-fg); }
.absence-missing { background: var(--surface-2); }
.delivery-status { color: var(--warning-fg); }
.list-row { padding-block: var(--sp-5); border-bottom: 1px solid var(--border); }
.panel progress { width: 100%; height: 12px; accent-color: var(--accent); }
.actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.stack { display: grid; gap: var(--sp-4); }
.person-row { display: flex; gap: var(--sp-4); align-items: center; }
.number { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.page-heading { display: flex; flex-wrap: wrap; gap: var(--sp-4); justify-content: space-between; align-items: center; }
.back-link { display: inline-flex; align-items: center; min-height: 52px; margin-bottom: var(--sp-3); }
.edit-section { margin-top: var(--sp-6); }
.edit-section summary { min-height: 56px; padding-block: var(--sp-4); cursor: pointer; font-weight: 600; }
.task-row { padding-block: var(--sp-4); border-bottom: 1px solid var(--border-subtle); }
.priority-form { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); align-items: center; }
.priority-form .btn { grid-column: 1 / -1; }
.history-value { overflow-wrap: anywhere; }
.person-link { color: var(--text-1); text-decoration: none; min-height: 72px; }
.people-entry { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-3) var(--sp-6); padding-bottom: var(--sp-4); border-bottom: 1px solid var(--border); }
.people-entry .person-link { flex: 1 1 260px; min-width: 0; }
.people-entry .face-entry-link { flex: 0 0 auto; }
@media (max-width: 599px) { .people-entry .face-entry-link { width: 100%; } }
.profile-heading { align-items: flex-start; }
.profile-photo { width: 96px; height: 96px; font-size: 28px; }
.profile-heading h1 { overflow-wrap: anywhere; }
.stat-pair { margin-top: var(--sp-5); }
.stat-pair p { margin: var(--sp-3) 0 var(--sp-2); }
.photo-input { padding: var(--sp-3); max-width: 100%; }
.face-summary { padding-block: var(--sp-6); border-block: 1px solid var(--border); margin-block: var(--sp-4); }
.face-summary h2, .face-controls h2 { margin-top: 0; }
.face-heading { margin-bottom: var(--sp-6); }
.face-heading p { font-size: 24px; }
.face-workspace { display: grid; gap: var(--sp-6); max-width: 1180px; align-items: start; }
.face-preview { position: relative; aspect-ratio: 16 / 9; display: grid; place-items: center; background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
.face-preview video, .face-preview img { width: 100%; height: 100%; object-fit: contain; position: absolute; }
.face-preview video { transform: scaleX(-1); }
.face-preview p { padding: var(--sp-4); text-align: center; color: var(--text-2); }
.face-controls p { margin: 0; }
.face-controls h2 { margin: var(--sp-4) 0 0; }
.face-enrollment [hidden] { display: none !important; }
@media (min-width: 900px) { .face-workspace { grid-template-columns: minmax(0, 3fr) minmax(320px, 2fr); } .face-preview { aspect-ratio: 4 / 3; } }
.more-menu { display: grid; margin-bottom: var(--sp-6); }
.more-menu a { padding-block: var(--sp-4); min-height: 56px; border-bottom: 1px solid var(--border); text-decoration: none; }
.field-error { color: var(--danger-fg); margin-top: var(--sp-2) !important; }
.key-result { background: var(--warning-bg); color: var(--warning-fg); padding: var(--sp-5); border-radius: var(--r-lg); }
.key-result code { display: block; overflow-wrap: anywhere; user-select: all; font-size: 18px; }
.panel progress { display: block; appearance: none; border: 0; border-radius: var(--r-full); overflow: hidden; background: var(--fill-track); }
.panel progress::-webkit-progress-bar { background: var(--fill-track); }
.panel progress::-webkit-progress-value { background: var(--accent); border-radius: var(--r-full); }
.panel progress::-moz-progress-bar { background: var(--accent); }
.today-heading { margin-bottom: var(--sp-6); }
.today-heading h1 { margin-bottom: var(--sp-2); }
.today-heading p { margin: 0; }
.today-board { display: grid; gap: var(--sp-8); }
.today-board > *, .today-sidebar > * { min-width: 0; }
.today-orders { order: -1; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.panel .section-heading h2 { margin: 0; }
.count { color: var(--text-2); font-variant-numeric: tabular-nums; }
.today-sidebar { display: grid; align-content: start; gap: var(--sp-8); }
.today-sidebar h2 { margin-top: 0; }
.today-sidebar .card { padding: var(--sp-5) 0; border: 0; border-bottom: 1px solid var(--border); background: transparent; border-radius: 0; }
.today-sidebar h3 { margin-bottom: var(--sp-2); }
.today-sidebar .btn { width: 100%; }
.production-order { background: var(--surface-1); border: 1px solid var(--border); padding: var(--sp-5); border-radius: var(--r-lg); margin-bottom: var(--sp-5); }
.order-meta, .stage-numbers { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-2); }
.order-meta { margin-bottom: var(--sp-4); }
.order-number { font-family: var(--font-mono); color: var(--accent-fg); }
.panel .production-order h3 { font-size: 24px; line-height: 1.3; margin: 0 0 var(--sp-2); }
.production-order h3 a { color: var(--text-1); text-decoration: none; }
.production-order h3 a:hover { text-decoration: underline; }
.stage-numbers { margin: var(--sp-4) 0 var(--sp-2); color: var(--text-2); }
.stage-numbers .number { color: var(--text-1); }
.status-warning { color: var(--warning-fg); }
.order-open { display: flex; align-items: center; justify-content: space-between; min-height: 56px; margin-top: var(--sp-5); border-top: 1px solid var(--border); padding-top: var(--sp-2); text-decoration: none; }
.workshop-group { border-bottom: 1px solid var(--border); }
.workshop-group summary { cursor: pointer; padding-block: var(--sp-5); min-height: 64px; font-weight: 700; }
.workshop-group summary span { float: right; font-weight: 400; }
.workshop-group .stack { padding-bottom: var(--sp-5); gap: var(--sp-5); }
.today-people .person-row { align-items: flex-start; gap: var(--sp-3); }
.today-people .avatar { width: 48px; height: 52px; }
.today-people .person-name { display: inline-flex; align-items: center; min-height: 52px; }
.today-people .person-row p { margin: 0; }
.absence-alert { border: 1px solid var(--warning-border); background: var(--warning-bg); color: var(--warning-fg); border-radius: var(--r-lg); margin-bottom: var(--sp-8); }
.absence-alert summary { cursor: pointer; padding: var(--sp-5); min-height: 64px; }
.absence-alert summary span { display: block; padding-top: var(--sp-1); }
.absence-alert .stack { padding: 0 var(--sp-5) var(--sp-5); }
.absence-alert .card { background: transparent; color: var(--text-1); border: 0; border-top: 1px solid var(--warning-border); padding: var(--sp-4) 0; border-radius: 0; }
.attendance-clear { padding-bottom: var(--sp-5); border-bottom: 1px solid var(--border); }
.empty-state { padding-block: var(--sp-8); }
.panel .form-stack { max-width: 760px; }
.panel .input, .panel .select, .panel .textarea { max-width: 100%; }
.panel .login-form { padding: var(--sp-8); border: 1px solid var(--border); background: var(--surface-1); border-radius: var(--r-lg); }
@media (min-width: 900px) {
  .panel-header { min-height: 96px; gap: var(--sp-8); }
  .user-name { order: 3; max-width: 240px; }
  .panel-nav { position: static; display: flex; width: auto; border: 0; background: transparent; margin-inline: auto; padding: 0; gap: var(--sp-2); }
  .panel-nav a { flex-direction: row; gap: var(--sp-2); min-height: 56px; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); border: 0; }
  .panel-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-6); }
  .today-heading h1 { font-size: 40px; }
  .today-board { grid-template-columns: minmax(0, 1fr) minmax(280px, .6fr); }
  .today-people { grid-column: 2; grid-row: 1; }
  .today-orders { grid-column: 1; grid-row: 1 / 3; order: 0; }
  .today-sidebar { grid-column: 2; }
  .absence-alert summary span { float: right; padding: 0; }
}
@media (min-width: 1280px) {
  .today-board { grid-template-columns: minmax(260px, .75fr) minmax(460px, 1.6fr) minmax(280px, .85fr); gap: var(--sp-8); }
  .today-people { grid-column: 1; grid-row: 1; }
  .today-orders { grid-column: 2; grid-row: 1; }
  .today-sidebar { grid-column: 3; }
}
.today-board--buyer { grid-template-columns: minmax(0, 760px); }
.today-board--buyer .today-sidebar { grid-column: 1; }
/* Shared workshop tasks reuse the established Night Shift tokens. */
.work-order{padding:24px 0;border-bottom:1px solid var(--border)}
.work-row{display:flex;justify-content:space-between;gap:24px;padding:20px 0;border-bottom:1px solid var(--border);overflow-wrap:anywhere}
.work-people{display:flex;flex-wrap:wrap;gap:16px;align-items:center}
.work-person{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.work-person img,.work-avatar{width:48px;height:48px;object-fit:cover;border-radius:50%;display:inline-grid;place-items:center;background:var(--surface-2)}
.is-working img,.is-working .work-avatar{outline:3px solid var(--success-fg);outline-offset:3px}
.is-working{color:var(--success-fg)}
.work-urgent{color:var(--danger-fg);background:var(--danger-bg);padding:4px 12px;border-radius:8px;font-size:18px}
.work-choice{display:flex;align-items:center;gap:12px;min-height:52px}
.work-comment,.work-history{padding:16px 0;border-bottom:1px solid var(--border);overflow-wrap:anywhere}
.work-history summary{min-height:52px;cursor:pointer}
@media(max-width:700px){.work-row{display:block}.work-people{margin-top:16px}}
.work-filters{display:flex;gap:16px;flex-wrap:wrap;align-items:end;margin:24px 0}
.work-filters label{display:grid;gap:8px;flex:1;min-width:220px}
.panel .credential-panel, .panel .point-panel { display:grid; gap:var(--sp-6); padding:var(--sp-6); border:1px solid var(--border); border-radius:var(--r-lg); background:var(--surface-1); }
.panel .credential-panel > *, .panel .point-panel > * { margin-block:0; }
.panel .credential-panel .form-stack { gap:var(--sp-6); }
.panel .credential-panel .badge, .panel .point-panel .badge { white-space:normal; max-width:100%; }
.panel .credential-panel input::file-selector-button { min-height:52px; padding:var(--sp-2) var(--sp-3); border:1px solid var(--border); border-radius:var(--r-sm); background:var(--surface-2); color:var(--text-1); font:inherit; cursor:pointer; }
/* T022: point computer state and remote commands, tokens only. */
.panel .point-computer { display:grid; gap:var(--sp-4); padding-top:var(--sp-5); border-top:1px solid var(--border); }
.panel .point-computer > * { margin-block:0; }
.panel .point-computer h3 { margin:0; }
.panel .point-actions { display:flex; flex-wrap:wrap; gap:var(--sp-4); align-items:flex-start; }
.panel .point-actions details { flex:1 1 260px; }
.panel .point-computer summary { min-height:52px; cursor:pointer; font-weight:600; display:flex; align-items:center; }
.panel .point-versions { color:var(--text-2); overflow-wrap:anywhere; }
.panel .point-history .list-row { margin:var(--sp-3) 0; padding:var(--sp-4); overflow-wrap:anywhere; }
/* T024: setup wizard requests waiting for approval, installer download. Tokens only, brand.css chamfers .point-panel. */
.panel .point-downloads { display:flex; flex-wrap:wrap; gap:var(--sp-4); margin-block:var(--sp-5) var(--sp-3); }
.panel .point-downloads-hint { color:var(--text-2); max-width:70ch; margin-top:0; }
.panel .point-requests { display:grid; gap:var(--sp-6); margin-block:var(--sp-8); }
.panel .point-requests > h2, .panel .point-requests > p { margin:0; }
.panel .point-requests > p { color:var(--text-2); max-width:70ch; }
.panel .point-request { grid-template-columns:minmax(0,1fr); border-color:var(--warning-border); }
.panel .point-request-head { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--sp-3) var(--sp-5); }
.panel .point-request-head h3 { margin:0; font-size:24px; overflow-wrap:anywhere; }
.panel .point-request-code { display:grid; gap:var(--sp-1); padding:var(--sp-4) var(--sp-5); background:var(--surface-2); border:1px solid var(--border); justify-self:start; }
.panel .point-request-code span { color:var(--text-2); }
.panel .point-request-code strong { font-family:var(--font-display); font-weight:600; font-size:56px; line-height:1; letter-spacing:.18em; font-variant-numeric:tabular-nums; color:var(--text-1); }
.panel .point-request-facts { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:var(--sp-4) var(--sp-6); margin:0; }
.panel .point-request-facts dt { color:var(--text-2); }
.panel .point-request-facts dd { margin:0; font-weight:600; overflow-wrap:anywhere; font-variant-numeric:tabular-nums; }
.panel .point-request-alert { display:grid; gap:var(--sp-4); padding:var(--sp-5); background:var(--danger-bg); color:var(--danger-fg); border:1px solid var(--danger-border); }
.panel .point-request-alert > * { margin:0; }
.panel .point-request-alert p { max-width:70ch; }
.panel .point-request-alert summary, .panel .point-request summary { min-height:52px; cursor:pointer; font-weight:600; display:flex; align-items:center; }
.panel .point-request-alert details > :not(summary) { margin:var(--sp-3) 0 0; color:var(--text-1); }
.panel .point-request-alert details[open] { padding:var(--sp-4); background:var(--surface-1); border:1px solid var(--danger-border); }
.panel .point-request-note { padding:var(--sp-4) var(--sp-5); background:var(--warning-bg); color:var(--warning-fg); border:1px solid var(--warning-border); max-width:70ch; }
.panel .point-request-form { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:var(--sp-5); align-items:end; }
.panel .point-request-form .btn, .panel .point-request-reject .btn { min-width:200px; }
.panel .point-installing { display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-3); color:var(--text-2); }
@media (max-width:650px) {
  .panel .point-downloads .btn, .panel .point-request-form .btn, .panel .point-request-reject .btn,
  .panel .point-request-alert .btn { width:100%; }
  .panel .point-request-code { justify-self:stretch; }
  .panel .point-request-code strong { font-size:48px; }
}
/* T023 M9: «Обновите фото» — a worker opened manually from the panel more than twice in 7 days. */
.panel .update-photo { display:grid; gap:var(--sp-3); padding:var(--sp-4) var(--sp-5); background:var(--warning-bg); color:var(--warning-fg); border:1px solid var(--warning-border); }
.panel .update-photo > * { margin:0; }
.panel .update-photo p { display:flex; gap:var(--sp-2); align-items:flex-start; }
.panel .update-photo .btn { justify-self:start; }
.panel .update-photo .field label { color:var(--text-1); }

/* 15.10.2026: confirmation modal opened by <form data-confirm> (panel.js). */
/* Walkthrough 15.10.2026: the design-system `.modal { display: flex }` beat the browser's hidden closed <dialog> — a
   closed confirmation stayed on the page with dead buttons. A closed modal is not shown. */
.modal:not([open]) { display: none; }
.confirm-dialog { --modal-w: 480px; margin: auto; }  /* T033: the reset `* { margin: 0 }` pinned it top-left */
.confirm-dialog[open] { animation-duration: 160ms; }
@media (prefers-reduced-motion: reduce) { .confirm-dialog[open] { animation: none; } }
.confirm-dialog .modal__body p { margin: 0; font-size: 18px; }
.confirm-dialog .modal__footer .btn { min-block-size: 52px; }
/* T033: on a phone the confirmation stays a compact window (the design-system modal turns into a full screen). */
@media (max-width: 640px) {
  .confirm-dialog { inline-size: calc(100vw - 32px); max-inline-size: calc(100vw - 32px); block-size: fit-content;
    max-block-size: calc(100dvh - 32px); margin: auto; border: 1px solid var(--border); }
  .confirm-dialog .modal__footer { flex-wrap: wrap; }
  .confirm-dialog .modal__footer .btn { flex: 1 1 140px; }
}

/* T036: the face recorded on the reader, on the capture result page: large enough to judge it */
.capture-face { display: block; width: min(320px, 100%); height: auto; margin-block: var(--sp-4); border-radius: var(--r-md); border: 1px solid var(--border); }