/* Legacy sprite of generated faces: only the terminal header (stream A) may still use it; the panel uses .monogram. */
.generated-avatar { background-image: url("/static/avatars/workshop-team.png"); background-size: 400% 400%; color: transparent; }
.avatar-0 { background-position: 0.000000% 0.000000%; }
.avatar-1 { background-position: 33.333333% 0.000000%; }
.avatar-2 { background-position: 66.666667% 0.000000%; }
.avatar-3 { background-position: 100.000000% 0.000000%; }
.avatar-4 { background-position: 0.000000% 33.333333%; }
.avatar-5 { background-position: 33.333333% 33.333333%; }
.avatar-6 { background-position: 66.666667% 33.333333%; }
.avatar-7 { background-position: 100.000000% 33.333333%; }
.avatar-8 { background-position: 0.000000% 66.666667%; }
.avatar-9 { background-position: 33.333333% 66.666667%; }
.avatar-10 { background-position: 66.666667% 66.666667%; }
.avatar-11 { background-position: 100.000000% 66.666667%; }
.avatar-12 { background-position: 0.000000% 100.000000%; }
.avatar-13 { background-position: 33.333333% 100.000000%; }
.avatar-14 { background-position: 66.666667% 100.000000%; }
.avatar-15 { background-position: 100.000000% 100.000000%; }

/* T032 (15.10.2026): an avatar without a photo is the person's initials on a «Кузня» tile — never a face
   (Sergey: a stranger's generated face read as «his recorded face?»). Variant (a) of docs/Аватары — варианти.html:
   a square tile with the 45° chamfer top right (like the MVG tag), colour fixed per person (id % 8).
   Contrast of the initials: light theme white on a deep tile >= 6.2:1, dark theme ink on a light tile >= 7.5:1. */
.monogram { --mono-bg: #9A3F12; --mono-ink: #FFFFFF; --mono-cut: 22%;
  display: inline-grid; place-items: center; flex-shrink: 0; border-radius: 0; user-select: none;
  background: linear-gradient(225deg, transparent var(--mono-cut), var(--mono-bg) calc(var(--mono-cut) + .5px));
  color: var(--mono-ink); font-family: var(--font-display); font-weight: 600; letter-spacing: .02em; line-height: 1;
  text-transform: uppercase; font-size: 18px; }
.monogram--0 { --mono-bg: #9A3F12; } .monogram--1 { --mono-bg: #1F5F73; }
.monogram--2 { --mono-bg: #5B4A8A; } .monogram--3 { --mono-bg: #3D6B2F; }
.monogram--4 { --mono-bg: #8A2F4A; } .monogram--5 { --mono-bg: #6E5A14; }
.monogram--6 { --mono-bg: #2F4F8A; } .monogram--7 { --mono-bg: #5E4636; }
[data-theme="dark"] .monogram { --mono-ink: #16181B; }
[data-theme="dark"] .monogram--0 { --mono-bg: #E89A6E; } [data-theme="dark"] .monogram--1 { --mono-bg: #7FBCCF; }
[data-theme="dark"] .monogram--2 { --mono-bg: #B2A6DB; } [data-theme="dark"] .monogram--3 { --mono-bg: #95C283; }
[data-theme="dark"] .monogram--4 { --mono-bg: #DE93AA; } [data-theme="dark"] .monogram--5 { --mono-bg: #D2BB6E; }
[data-theme="dark"] .monogram--6 { --mono-bg: #93ADE0; } [data-theme="dark"] .monogram--7 { --mono-bg: #C9AC97; }
/* sizes: assignee stacks 40 px, lists 48 px, the employee card 96 px; the text stays >= 18 px everywhere */
.person-avatar.monogram { width: 40px; height: 40px; border-radius: 0; }
.employee-card .person-avatar, .today-people .person-avatar, .person-row > .avatar-link .person-avatar { width: 48px; height: 48px; }
.employee-card .person-avatar.monogram, .person-row .person-avatar.monogram { font-size: 18px; }
.avatar-wrap:has(> .monogram) { border-radius: 0; border-color: transparent; }
.avatar.monogram { border-radius: 0; font-size: 18px; }
.person-hero__avatar { width: 96px; height: 96px; flex-shrink: 0; object-fit: cover; }
.person-hero__avatar.monogram { font-size: 40px; --mono-cut: 20%; }
.avatar-link { display: inline-flex; flex-shrink: 0; }
@media (forced-colors: active) { .monogram { forced-color-adjust: none; } }

/* T032: people pages — the employee card, the week line and the employee form (people zone, stream B1). */
.panel .back-link svg { fill: none; stroke: currentColor; stroke-width: 2.4; margin-inline-end: 4px; }
.panel-main [id] { scroll-margin-top: 112px; }  /* anchors never hide under the sticky header */
.person-hero { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--sp-4) var(--sp-5);
  align-items: center; margin-block: var(--sp-2) var(--sp-6); }
.person-hero h1 { margin: 0; overflow-wrap: anywhere; }
.person-hero__text p { margin: 4px 0 0; }
.panel .person-hero__ref { color: var(--text-2); }
.person-hero__ref .number { font-family: var(--font-mono); }
@media (max-width: 650px) {
  .person-hero { grid-template-columns: auto minmax(0, 1fr); }
  .person-hero__avatar { width: 72px; height: 72px; }
  .person-hero__avatar.monogram { font-size: 28px; }
  .person-hero__edit { grid-column: 1 / -1; justify-self: stretch; }
}
.state-mark { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--text-1); }
.state-mark svg { flex-shrink: 0; }
.state-mark--success { color: var(--success-fg); } .state-mark--warning { color: var(--warning-fg); }
.state-mark--danger { color: var(--danger-fg); } .state-mark--info { color: var(--info-fg); }
.state-mark--neutral { color: var(--text-2); }
.panel .person-login { display: grid; gap: var(--sp-3); }
.panel .person-login > * { margin-block: 0; }
.panel .person-login h2 { margin-bottom: var(--sp-1); }
.panel .login-status { font-size: 24px; }
.panel .login-status .state-mark svg { width: 26px; height: 26px; }
.panel .login-why, .panel .login-hint, .panel .login-meta { color: var(--text-2); }
.login-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-4); align-items: flex-start; margin-top: var(--sp-2); }
.login-actions:empty { display: none; }
.login-actions form { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: flex-end; margin: 0; }
.login-actions .field { min-width: min(320px, 100%); }
.file-pick { flex-direction: column; align-items: flex-start !important; gap: 6px !important; }
.file-pick label.btn { cursor: pointer; }
.file-pick input:focus-visible + label { outline: 3px solid var(--focus-ring); outline-offset: 3px; }
.login-cards { display: grid; gap: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--border); }
.login-method { display: grid; gap: var(--sp-2); justify-items: start; }
@media (max-width: 650px) { .login-actions, .login-actions form { flex-direction: column; align-items: stretch; }
  .login-actions .btn { width: 100%; } .file-pick { align-items: stretch !important; } }
.person-week .section-heading { align-items: baseline; }
.week-figures { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-6); margin: 0 0 var(--sp-3); }
.week-figures div { display: grid; gap: 2px; }
.week-figures dt { color: var(--text-2); }
.week-figures dd { margin: 0; font-size: 24px; font-weight: 600; }
.week-figures .number { font-family: var(--font-mono); }
.week-operations { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.form-lead { color: var(--text-2); max-width: 60ch; }
.panel .field-optional { font-weight: 400; color: var(--text-2); }
.panel .field-help { color: var(--text-2); }
.dict-form { max-width: 560px; }
.form-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.rare-actions { max-width: 720px; }
.rare-actions form { margin-top: var(--sp-3); }

/* Terminal header: initials follow terminal text rules (≥ 28 px), not the panel's 18 px. */
.terminal .worker-photo.monogram { font-size: 40px; }

/* Stacks of initials sit side by side with a small gap: overlapping tiles hid the first person's letters
   (verify 15.10: contrast 1.2 on the order card's people button). */
.avatar-wrap:has(> .monogram) + .avatar-wrap:has(> .monogram) { margin-left: 4px; }
/* Small tiles (32–48 px): no chamfer — at this size it is invisible and the cut corner touched the letters. */
.person-avatar.monogram { background: var(--mono-bg); }

/* T036 (Sergey 15.10): faces are recognised by sight — «Робота зараз» cards and the overview lists 72 px (the 128 px
   thumb is enough), the employee card 120 px from the full photo (96 px on a phone so the name keeps its room). */
.employee-card .person-avatar, .today-people .person-avatar, .person-row > .avatar-link .person-avatar {
  width: 72px; height: 72px; object-fit: cover; }
.employee-card .person-avatar.monogram, .person-row .person-avatar.monogram { font-size: 28px; }
.person-hero__avatar { width: 120px; height: 120px; }
.person-hero__avatar.monogram { font-size: 48px; }
@media (max-width: 650px) {
  .person-hero__avatar { width: 96px; height: 96px; }
  .person-hero__avatar.monogram { font-size: 40px; }
}