* { box-sizing: border-box; }

.tool-view {
  max-width: 1120px;
  margin: 0 auto;
  padding: 42px clamp(18px, 4vw, 46px) 64px;
  color: var(--color-ink);
  background: var(--color-bg);
  font-family: var(--font-sans);
  line-height: 1.55;
}

.tool-nav {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 38px;
  font-size: 14px;
}
.tool-nav a { color: var(--color-link); text-decoration: none; }
.tool-nav a:hover { text-decoration: underline; }
.language-switch { display: flex; gap: 12px; margin-left: auto; }
.language-switch a[aria-current="page"] { color: var(--color-heading); font-weight: 800; text-decoration: underline; text-underline-offset: 4px; }

.tool-hero { max-width: 780px; margin-bottom: 30px; }
.tool-eyebrow {
  margin-bottom: 8px;
  color: var(--color-accent);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.tool-hero h1 {
  margin: 0 0 14px;
  color: var(--color-heading);
  font-size: clamp(34px, 5vw, 48px);
  line-height: 1.08;
}
.tool-lede { margin: 0 0 16px; color: var(--color-body); font-size: 18px; line-height: 1.6; }
.privacy-note {
  margin: 0;
  padding: 11px 14px;
  border-left: 3px solid var(--color-accent-strong);
  background: var(--color-surface-soft);
  color: #59635f;
  font-size: 13px;
}

.tool-instructions {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 28px;
  margin: 0 0 28px;
  padding: 24px;
  border: 1px solid var(--line-teal);
  border-radius: 10px;
  background: var(--color-surface);
}
.tool-instructions h2,
.map-heading h2,
.scoring-note h2 { margin: 0 0 10px; color: var(--color-heading); font-size: 21px; }
.tool-instructions ol { margin: 0; padding-left: 21px; color: var(--color-body); }
.tool-instructions li + li { margin-top: 7px; }
.role-examples { padding-left: 24px; border-left: 1px solid var(--line-teal); }
.role-examples strong { color: var(--color-heading); }
.role-examples p { margin: 8px 0 0; color: #59635f; font-size: 14px; }

.risk-summary {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin-bottom: 36px;
}
.risk-summary > div {
  min-height: 84px;
  padding: 14px 16px;
  border: 1px solid rgba(32,92,115,.14);
  border-radius: 9px;
  background: var(--color-surface);
  color: #59635f;
  font-size: 13px;
}
.summary-number { display: block; margin-bottom: 2px; color: var(--color-heading); font-size: 28px; font-weight: 750; line-height: 1; }

.map-section { margin-top: 8px; }
.map-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 22px; margin-bottom: 18px; }
.map-heading h2 { margin-bottom: 3px; }
.map-heading p { margin: 0; color: #67716e; font-size: 14px; }
.tool-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.button {
  min-height: 40px;
  padding: 9px 14px;
  border: 1px solid rgba(32,92,115,.25);
  border-radius: 8px;
  background: var(--color-surface);
  color: var(--color-link);
  font: 700 13px/1.2 var(--font-sans);
  cursor: pointer;
}
.button:hover { border-color: var(--color-link); }
.button.primary { border-color: var(--color-link); background: var(--color-link); color: #fff; }
.button.quiet { color: #747c79; font-weight: 500; }

.roles-map { display: grid; gap: 16px; }
.role-card {
  padding: 22px;
  border: 1px solid rgba(32,92,115,.18);
  border-radius: 10px;
  background: var(--color-surface);
  box-shadow: var(--shadow-soft);
  break-inside: avoid;
}
.role-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.role-number { color: var(--color-heading); font-size: 16px; font-weight: 750; }
.risk-badge { padding: 5px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.risk-high { background: #f6dfdc; color: #8b3026; }
.risk-medium { background: #f5ead3; color: #77541f; }
.risk-low { background: #dfeee9; color: #285f52; }
.risk-minimal { background: #e9eeee; color: #53625f; }
.risk-unrated { background: #edf0ef; color: #68706d; }
.remove-role {
  margin-left: auto;
  padding: 4px 0;
  border: 0;
  background: transparent;
  color: #7b8380;
  font: 500 12px/1.2 var(--font-sans);
  cursor: pointer;
}
.remove-role:hover { color: #8b3026; }

.identity-grid,
.assessment-grid,
.continuity-grid { display: grid; gap: 14px; }
.identity-grid { grid-template-columns: 1.6fr 1fr; margin-bottom: 18px; }
.assessment-panel {
  margin: 0 -22px 18px;
  border-top: 1px solid var(--line-teal);
  border-bottom: 1px solid var(--line-teal);
  background: var(--color-surface-soft);
}
.assessment-panel summary { padding: 14px 22px; color: var(--color-heading); font-size: 13px; font-weight: 750; cursor: pointer; }
.assessment-panel summary span { margin-left: 8px; color: #69736f; font-size: 12px; font-weight: 500; }
.criteria-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; padding: 0 22px 18px; }
.criterion-field { display: grid; grid-template-columns: 1fr 58px; align-items: center; gap: 9px; min-height: 62px; padding: 8px 10px; background: var(--color-surface); color: #56615d; font-size: 12px; line-height: 1.35; }
.criterion-field select { width: 58px; min-height: 34px; border: 1px solid rgba(32,92,115,.22); border-radius: 6px; background: var(--color-bg); color: var(--color-ink); font: 13px var(--font-sans); }
.continuity-grid { grid-template-columns: repeat(3, 1fr); }
.continuity-grid .field-wide { grid-column: span 2; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field > span { color: #5c6662; font-size: 12px; font-weight: 700; }
.field input,
.field select {
  width: 100%;
  min-height: 42px;
  padding: 9px 10px;
  border: 1px solid rgba(32,92,115,.22);
  border-radius: 7px;
  background: var(--color-bg);
  color: var(--color-ink);
  font: 14px/1.35 var(--font-sans);
}
.field input:focus,
.field select:focus { border-color: var(--color-link); outline: 2px solid rgba(32,92,115,.12); outline-offset: 1px; }

.scoring-note {
  margin-top: 28px;
  padding: 20px 22px;
  border: 1px solid var(--line-teal);
  border-radius: 9px;
  background: var(--color-surface-soft);
}
.scoring-note h2 { font-size: 17px; }
.scoring-note p { margin: 0; color: #59635f; font-size: 14px; }
.scoring-note p + p { margin-top: 9px; }
.scoring-note a { color: var(--color-link); }
.method-note { font-size: 13px !important; }
.print-only { display: none; }
.tool-footer { display: flex; gap: 18px; margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--line-teal); color: #747c79; font-size: 13px; }
.tool-footer a { color: var(--color-link); }

/* Express audit */
.audit-overview { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0 0 28px; }
.audit-overview > div { display: grid; gap: 3px; padding: 17px 18px; border: 1px solid rgba(32,92,115,.16); border-radius: 9px; background: var(--color-surface); }
.audit-overview strong { color: var(--color-heading); font-size: 16px; }
.audit-overview span { color: #67716e; font-size: 12px; }
.audit-section { margin: 0 0 22px; padding: 24px; border: 1px solid rgba(32,92,115,.18); border-radius: 10px; background: var(--color-surface); }
.audit-section-head { display: flex; gap: 14px; margin-bottom: 20px; }
.audit-section-head > span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--color-link); color: #fff; font-weight: 750; }
.audit-section-head h2 { margin: 0; color: var(--color-heading); font-size: 21px; }
.audit-section-head p { margin: 3px 0 0; color: #67716e; font-size: 13px; }
.audit-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.audit-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.audit-field > span { color: #53605b; font-size: 13px; font-weight: 650; line-height: 1.45; }
.audit-field input, .audit-field textarea { width: 100%; min-height: 42px; padding: 10px 11px; resize: vertical; border: 1px solid rgba(32,92,115,.22); border-radius: 7px; background: var(--color-bg); color: var(--color-ink); font: 16px/1.4 var(--font-sans); }
.audit-field input:focus, .audit-field textarea:focus { border-color: var(--color-link); outline: 2px solid rgba(32,92,115,.12); outline-offset: 1px; }
.audit-section.is-wide .audit-fields { grid-template-columns: 1fr; }
.audit-required { margin-left: 4px; color: var(--color-accent-strong); font-size: 11px; font-style: normal; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.audit-complete { margin-top: 28px; padding: 24px; border: 1px solid var(--line-teal); border-radius: 10px; background: var(--color-surface-soft); }
.audit-complete h2 { margin: 0; color: var(--color-heading); font-size: 22px; }
.audit-complete p { margin: 5px 0 0; color: #606b67; font-size: 13px; }
.completion-bar { height: 7px; margin: 16px 0 20px; overflow: hidden; border-radius: 999px; background: rgba(32,92,115,.13); }
.completion-bar span { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--color-accent-strong); transition: width .2s ease; }
.audit-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.audit-actions .button.primary { min-height: 46px; padding: 11px 18px; font-size: 14px; }
.audit-actions-secondary { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line-teal); }
.audit-complete .audit-status { margin: 14px 0 0; padding: 10px 12px; border-left: 3px solid var(--color-accent-strong); border-radius: 0 6px 6px 0; background: var(--color-surface); color: var(--color-heading); font-size: 14px; line-height: 1.45; }
.audit-status a { color: var(--color-link); font-weight: 700; }
.audit-complete .email-note { margin-top: 14px; }

@media (max-width: 800px) {
  .tool-instructions { grid-template-columns: 1fr; }
  .role-examples { padding: 18px 0 0; border-top: 1px solid var(--line-teal); border-left: 0; }
  .risk-summary { grid-template-columns: repeat(2, 1fr); }
  .map-heading { align-items: flex-start; flex-direction: column; }
  .tool-actions { justify-content: flex-start; }
  .continuity-grid { grid-template-columns: 1fr 1fr; }
  .criteria-grid { grid-template-columns: 1fr; }
  .audit-fields { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .tool-view { padding-top: 26px; }
  .tool-nav { align-items: flex-start; flex-direction: column; margin-bottom: 28px; }
  .tool-instructions { padding: 18px; }
  .risk-summary { grid-template-columns: 1fr 1fr; }
  .risk-summary > div { min-height: 74px; padding: 12px; }
  .role-card { padding: 18px; }
  .assessment-panel { margin-right: -18px; margin-left: -18px; }
  .criteria-grid { padding-right: 18px; padding-left: 18px; }
  .identity-grid,
  .continuity-grid { grid-template-columns: 1fr; }
  .continuity-grid .field-wide { grid-column: span 1; }
  .tool-actions { display: grid; width: 100%; grid-template-columns: 1fr 1fr; }
  .tool-actions .primary { grid-column: 1 / -1; }
  .audit-overview { grid-template-columns: 1fr; }
  .audit-section, .audit-complete { padding: 18px; }
  .audit-actions { display: grid; grid-template-columns: 1fr; }
}

@media (prefers-color-scheme: dark) {
  .privacy-note,
  .scoring-note { color: #bec8c4; }
  .role-examples p,
  .map-heading p,
  .scoring-note p,
  .risk-summary > div,
  .field > span { color: #b2bbb8; }
  .risk-high { background: #4d2925; color: #f0b5ad; }
  .risk-medium { background: #4a3b24; color: #e9cc96; }
  .risk-low { background: #223f38; color: #add8cc; }
  .risk-minimal { background: #303a38; color: #c0cdca; }
  .risk-unrated { background: #343938; color: #c4ccca; }
  .button.primary { border-color: #315f72; background: #315f72; color: #fff; }
  .assessment-panel summary span,
  .criterion-field { color: #b8c2be; }
  .criterion-field { background: #151817; }
  .audit-overview span, .audit-section-head p, .audit-field > span, .audit-complete p { color: #b7c1bd; }
  .audit-complete .audit-status { color: #dfeee9; }
  .audit-status a { color: #9fd0e0; }
}

@media print {
  @page { size: A4 landscape; margin: 8mm 9mm 11mm; }
  .tool-view { max-width: none; padding: 0; background: #fff; color: #111; font: 10pt/1.15 Arial, sans-serif; }
  .tool-view:not(.audit-view) > main > :not(.print-sheet),
  .tool-view:not(.audit-view) > .tool-nav,
  .tool-view:not(.audit-view) > .tool-footer { display: none !important; }
  .print-only { display: block !important; }
  .print-sheet { position: relative; width: 100%; min-height: 187mm; padding-bottom: 9mm; }
  .print-heading { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 4mm; border-bottom: 1.5pt solid #205c73; padding-bottom: 2.5mm; }
  .print-kicker { color: #6f8c22; font-size: 8pt; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
  .print-heading h1 { margin: 1mm 0 0; color: #173f50; font-size: 18pt; line-height: 1; }
  #documentDate { color: #555; font-size: 9pt; }
  .print-method { margin: 0 0 3mm; color: #333; font-size: 9pt; line-height: 1.2; }
  .print-table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 10pt; line-height: 1.15; }
  .print-table th, .print-table td { border: .6pt solid #9ba9a5; padding: 2.2mm; text-align: left; vertical-align: top; overflow-wrap: anywhere; }
  .print-table th { background: #eaf1ef; color: #173f50; font-size: 9pt; }
  .print-table th:nth-child(1) { width: 23%; }
  .print-table th:nth-child(2) { width: 15%; }
  .print-table th:nth-child(3) { width: 27%; }
  .print-table th:nth-child(4) { width: 35%; }
  .print-table tbody tr { height: 22mm; }
  .print-source { margin-top: 2mm; color: #666; font-size: 7.5pt; }
  .print-footer { position: absolute; right: 0; bottom: 0; left: 0; display: flex !important; justify-content: space-between; border-top: .5pt solid #aeb8b5; padding-top: 1.5mm; color: #555; font-size: 8pt; }
  .print-footer a { color: #205c73; text-decoration: none; }
}

/* Печатная версия анкеты: бланк на A4, черный текст и тонкие линейки, ответы цветом.
   PT Sans для всего текста: основной 10.5 pt, название 14 pt, разделы 11.5 pt, подписи полей 9.5 pt. */
@media print {
  @page {
    size: A4 portrait;
    margin: 15mm 17mm 16mm;
    @bottom-left { content: "dulatedu.com"; color: #333; font: 8pt "PT Sans", Arial, sans-serif; }
    @bottom-right { content: counter(page) "/" counter(pages); color: #333; font: 8pt "PT Sans", Arial, sans-serif; }
  }
  .audit-view { max-width: none; padding: 0; background: #fff; color: #111; font: 10.5pt/1.3 "PT Sans", Arial, sans-serif; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .audit-view > main > :not(.audit-print), .audit-view > .tool-nav, .audit-view > .tool-footer { display: none !important; }
  .audit-print { display: block !important; padding: 0; }
  .audit-blank { display: none !important; }
  body.print-blank .audit-report { display: none !important; }
  body.print-blank .audit-blank { display: block !important; }

  /* шапка: знак, имя, строка о роде занятий; справа гриф */
  .form-masthead { display: flex; align-items: center; gap: 3.5mm; }
  .form-mark { display: grid; place-items: center; width: 11mm; height: 11mm; background: #173f50; color: #fff; font: 700 13pt/1 "PT Serif", Georgia, serif; letter-spacing: .02em; }
  .form-brand strong { display: block; color: #111; font-size: 15pt; font-weight: 700; letter-spacing: .04em; line-height: 1.1; text-transform: uppercase; }
  .form-brand span { display: block; margin-top: .8mm; color: #173f50; font-size: 7.5pt; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
  .form-side { margin-left: auto; color: #333; font-size: 8pt; line-height: 1.4; text-align: right; }

  .form-title { margin: 7mm 0 5mm; padding-bottom: 1.6mm; border-bottom: .8pt solid #111; }
  .form-name { margin: 0; color: #111; font-size: 14pt; font-weight: 700; line-height: 1.2; }
  .form-sub { margin: .8mm 0 0; color: #17566e; font-size: 10pt; }

  .form-section { margin: 0 0 5.5mm; }
  .form-section h2 { margin: 0 0 1.5mm; color: #111; font-size: 11.5pt; font-weight: 700; line-height: 1.25; break-after: avoid; }

  /* поле: подпись на линейке, ответ цветом */
  .form-row { display: flex; gap: 6mm; break-inside: avoid; }
  .form-field { display: flex; flex: 1 1 100%; align-items: flex-end; gap: 2.5mm; min-width: 0; min-height: 8.2mm; padding-bottom: .9mm; border-bottom: .5pt solid #111; }
  .form-field.is-half { flex-basis: 50%; }
  .form-field.is-third { flex-basis: 33.3%; }
  .form-label { flex: none; max-width: 60%; color: #111; font-size: 9.5pt; line-height: 1.25; }
  .form-value { flex: 1; min-width: 0; color: #17566e; font-size: 10.5pt; line-height: 1.25; overflow-wrap: anywhere; }

  /* развернутый ответ: вопрос, под ним текст на линейке */
  .form-block { margin: 0 0 2.6mm; break-inside: avoid; }
  .form-question { margin: 0; padding-top: 1.6mm; color: #111; font-size: 9.5pt; line-height: 1.3; }
  .form-answer { min-height: 6.4mm; margin: 0; padding: .8mm 0 1.1mm; border-bottom: .5pt solid #111; color: #17566e; font-size: 10.5pt; line-height: 1.35; overflow-wrap: anywhere; }
  .form-row + .form-block { margin-top: 1.4mm; }
  .form-block i { display: block; height: 7.6mm; border-bottom: .5pt solid #111; }
  .audit-blank .form-field { min-height: 9.6mm; }

  .form-note { margin: 6mm 0 0; color: #444; font-size: 8pt; line-height: 1.35; break-inside: avoid; }
}