/* =========================================================================
   Henaket («Հենակետ») design tokens — RA Decision N 153-Ն, §32–59.
   Values are aligned verbatim to the dev library @henaket/shared (theme.ts),
   the authoritative source — identical to the N 153-Ն audit-checklist app so
   both tools render the same elements.
   ========================================================================= */
:root {
  /* Brand colours — theme.colors.{primary,secondary} */
  --c-primary: #355C8C;       /* primary = blue800 */
  --c-green:   #56B7B2;       /* secondary = green800 */
  --c-ink:     #2D2C2C;       /* gray800 */

  /* Blue tonal scale — theme.colors.blue* */
  --c-primary-100: #F0F4F9;
  --c-primary-200: #DDE5EE;
  --c-primary-400: #B8C6D8;
  --c-primary-600: #8099B8;
  --c-primary-800: #355C8C;
  --c-primary-900: #2A4A70;
  --c-primary-1000: #203754;
  --c-primary-1200: #0B121C;

  --c-green-100: #F6FFFF;
  --c-gray-100: #C1C0C0;

  /* Focus indicator — boxShadows.accessibilityOutline (3px) */
  --c-focus: #BD13B8;
  --focus-width: 3px;

  /* System / status colours — theme.colors.system* (value + light background) */
  --c-pass: #358000;   --c-pass-bg: #EEFFE2;   /* systemSuccess */
  --c-fail: #CC0000;   --c-fail-bg: #FFE0E0;   /* systemError */
  --c-warn: #FEBB30;   --c-warn-bg: #FFEECC;   /* systemWarning (bright — dark text) */
  --c-warn-ink: #7A5200;
  --c-info: #1B86C3;   --c-info-bg: #E2F2FB;   /* systemInfo */
  --c-na:   #686767;   /* gray600 */
  --c-unset: #b9c0c8;

  /* Surfaces / text */
  --c-bg: #ffffff;
  --c-surface: var(--c-primary-100);
  --c-border: #B8C6D8;
  --c-control-border: #6e7884;
  --c-text: #1a1a1a;
  --c-text-muted: #454545;

  /* Spacing — 8px base scale, §36 (4px fine step, §37) */
  --s-1: 4px;  --s-2: 8px;  --s-3: 16px;  --s-4: 24px;  --s-5: 32px;  --s-6: 48px;

  /* Grid — §34/§35 (12 columns, 32px gutter) */
  --grid-gutter: 32px;

  /* Typography — theme.fontFamily.sans */
  --font: "Noto Sans", "Noto Sans Armenian", Arial, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Heading sizes — antd Typography (H1 40 / H2 30 / H3 24 / H4 20) + §48 */
  --h1: 40px; --h2: 30px; --h3: 24px; --h4: 20px; --h5: 16px; --h6: 13px;
  --text-lead: 20px;  --text-body: 16px;  --text-small: 14px;
}

/* ---- Reset / base ------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--font); font-size: var(--text-body);
  line-height: 1.55; color: var(--c-text); background: var(--c-bg);
  overflow-x: hidden;            /* no horizontal scroll — §32 */
}
h1, h2, h3, p, span, label, legend, td, th { overflow-wrap: anywhere; word-break: break-word; }
img, svg { max-width: 100%; height: auto; }
h2, h3, h4, h5, h6 { font-weight: 600; }
h1 { font-weight: 700; }
h1 { font-size: var(--h1); line-height: 1.2; margin: 0 0 var(--s-4); }
h2 { font-size: var(--h2); line-height: 1.25; margin: 0 0 var(--s-3); }
h3 { font-size: var(--h3); line-height: 1.3; margin: 0 0 var(--s-2); }
p  { font-size: var(--text-body); margin: 0 0 var(--s-3); }

/* Keyboard focus — accessibilityOutline (0 0 0 3px #BD13B8) + pulse. */
:focus-visible {
  outline: var(--focus-width) solid transparent; outline-offset: 2px;
  box-shadow: 0 0 0 var(--focus-width) var(--c-focus); border-radius: 2px;
  animation: henaket-focus-pulse 300ms ease-in-out;
}
@keyframes henaket-focus-pulse {
  0%, 100% { box-shadow: 0 0 0 3px var(--c-focus); }
  50%      { box-shadow: 0 0 0 6px var(--c-focus); }
}
@media (prefers-reduced-motion: reduce) { :focus-visible { animation: none; } }
a { color: var(--c-primary-800); }
a:hover { color: var(--c-primary-900); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: var(--s-2); top: -48px; background: var(--c-primary);
  color: #fff; padding: var(--s-2) var(--s-3); z-index: 100; transition: top .15s;
}
.skip-link:focus { top: var(--s-2); }

/* ---- Layout container --------------------------------------------------- */
.container { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: var(--s-4); }

/* ---- Sticky top chrome -------------------------------------------------- */
.topbar { position: sticky; top: 0; z-index: 50; box-shadow: 0 2px 8px 0 #00000026; }

/* ---- Header ------------------------------------------------------------- */
.site-header { background: var(--c-primary); color: #fff; }
.header-row { display: flex; align-items: center; gap: var(--s-3); padding-block: var(--s-3); flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: var(--s-3); min-width: 0; }
.brand-logo { height: 34px; width: auto; flex: 0 0 auto; }
.brand-text { display: flex; flex-direction: column; min-width: 0; }
.brand-text strong { font-size: var(--h5); line-height: 1.2; }
.brand-text span { font-size: var(--text-small); opacity: .85; }
.header-controls { display: flex; align-items: center; gap: var(--s-2); margin-inline-start: auto; flex-wrap: wrap; }

.ver-badge { background: rgba(255,255,255,.18); color: #fff; border-radius: 0; padding: 2px 10px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.ver-badge:empty { display: none; }
.lang-dd { position: relative; }
.lang-dd > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid rgba(255,255,255,.5); border-radius: 4px; color: #fff; font: inherit; white-space: nowrap; }
.lang-dd > summary::-webkit-details-marker { display: none; }
.lang-dd > summary .caret { font-size: 11px; }
.lang-dd[open] > summary { background: rgba(255,255,255,.14); }
.lang-menu { position: absolute; right: 0; top: calc(100% + 4px); min-width: 168px; margin: 0; padding: 4px; list-style: none; background: #fff; border: 1px solid var(--c-border); border-radius: 4px; box-shadow: 0px 4px 8px 0px #0000004D; z-index: 60; }
.lang-menu li { margin: 0; }
.lang-menu button { display: flex; align-items: center; gap: 8px; width: 100%; text-align: start; background: none; border: 0; padding: 8px 12px; font: inherit; color: var(--c-text); cursor: pointer; border-radius: 4px; }
.lang-menu button:hover { background: var(--c-primary-100); }
.lang-menu button[aria-current="true"] { font-weight: 600; color: var(--c-primary); }
.flag { width: 20px; height: 14px; flex: 0 0 auto; border-radius: 2px; object-fit: cover; box-shadow: 0 0 0 1px rgba(0,0,0,.12); vertical-align: middle; }

/* ---- Incident bar (mirrors the checklist project bar) ------------------- */
.projectbar { background: var(--c-primary-1000); color: #fff; }
.projectbar-row { display: flex; align-items: center; gap: var(--s-3); padding-block: var(--s-2); flex-wrap: wrap; }
.projectbar label { font-size: var(--text-small); font-weight: 700; }
.projectbar select { font: inherit; padding: 8px 10px; border: 1px solid var(--c-control-border); border-radius: 4px; min-width: 240px; max-width: 100%; }
.projectbar .pj-meta { font-size: var(--text-small); opacity: .9; min-width: 0; display: inline-flex; gap: var(--s-2); align-items: center; flex-wrap: wrap; }
.projectbar .actions { margin-inline-start: auto; display: flex; gap: var(--s-2); flex-wrap: wrap; }

/* status / severity chips in the bar */
.chip { font-size: var(--text-small); padding: 2px 10px; border-radius: 0; white-space: nowrap; font-weight: 700; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
.sev-critical { background: var(--c-fail); color: #fff; }
.sev-high     { background: var(--c-warn); color: var(--c-ink); }
.sev-medium   { background: var(--c-info); color: #fff; }
.sev-low      { background: var(--c-na);  color: #fff; }
.st-open      { background: var(--c-fail); color: #fff; }
.st-mitigated { background: var(--c-warn); color: var(--c-ink); }
.st-closed    { background: var(--c-pass); color: #fff; }

/* ---- Buttons ------------------------------------------------------------ */
.btn { font: inherit; font-weight: 500; font-size: var(--text-small); cursor: pointer; border-radius: 4px; padding: 8px 24px; border: 2px solid var(--c-primary); background: var(--c-primary); color: #fff; }
.btn:hover { background: var(--c-primary-900); border-color: var(--c-primary-900); }
.btn:active { background: var(--c-primary-1000); border-color: var(--c-primary-1000); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.secondary { background: #fff; color: var(--c-primary); }
.btn.secondary:hover { background: var(--c-primary-100); }
.btn.ghost { background: transparent; color: var(--c-fail); border-color: var(--c-fail); }
.btn.small { padding: 6px 12px; font-size: var(--text-small); }
.btn.tiny { padding: 4px 10px; font-size: 13px; }

/* ---- Empty state -------------------------------------------------------- */
.empty { text-align: center; padding: var(--s-6) var(--s-3); }
.empty p { color: var(--c-text-muted); }

/* ---- New-incident form -------------------------------------------------- */
.project-form-view { padding-block: var(--s-5); max-width: 620px; }
.project-form-view > h1 { font-size: var(--h3); }
.project-form { display: flex; flex-direction: column; gap: var(--s-3); }
.project-form .field input, .project-form .field select, .project-form .field textarea { font: inherit; padding: 9px 10px; border: 1px solid var(--c-control-border); border-radius: 4px; width: 100%; background: #fff; max-width: 100%; }
.project-form-actions { display: flex; gap: var(--s-2); margin-top: var(--s-2); }
.req-mark { color: var(--c-fail); }
.field { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; }
.field > label { font-size: var(--text-small); font-weight: 700; color: var(--c-text-muted); }
.field .hint { font-size: var(--text-small); color: var(--c-text-muted); margin: 0; }

/* ---- Blameless banner --------------------------------------------------- */
.notice { display: flex; gap: var(--s-2); align-items: flex-start; background: var(--c-info-bg); border: 1px solid var(--c-info); border-radius: 2px; padding: var(--s-3); margin-block: var(--s-4); color: var(--c-text); }
.notice .app-icon { color: var(--c-info); font-size: var(--h4); }
.notice p { margin: 0; font-size: var(--text-small); }

/* ---- Summary scorecard (collapsible) ------------------------------------ */
.summary { padding-block: var(--s-4); }
.section-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-2);
  width: 100%; text-align: start; font: inherit; cursor: pointer; color: var(--c-text);
  background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 4px;
  padding: var(--s-3) var(--s-4);
}
.section-toggle:hover { background: var(--c-primary-100); }
.section-toggle h1, .section-toggle h2 { margin: 0; font-size: var(--h3); line-height: 1.2; }
.section-toggle .chev { color: var(--c-primary); font-size: var(--h4); line-height: 1; transition: transform .15s ease; flex: 0 0 auto; }
.section-toggle .chev::before { content: "\25BE"; }
.summary.collapsed .section-toggle .chev { transform: rotate(-90deg); }
.summary.collapsed .summary-body { display: none; }
.summary-body { margin-top: var(--s-3); }

.progress-overall { margin-bottom: var(--s-4); }
.bar { height: 14px; background: var(--c-gray-100); border-radius: 2px; overflow: hidden; display: flex; }
.bar > span { display: block; height: 100%; }
.bar .seg-pass { background: var(--c-pass); }
.overall-text { margin-top: var(--s-2); font-size: var(--text-small); color: var(--c-text-muted); }

.cards { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--grid-gutter); }
.card { grid-column: span 12; min-width: 0; overflow: hidden; border: 1px solid var(--c-border); border-radius: 2px; padding: var(--s-3); background: #fff; box-shadow: 0 2px 4px 0 #0000000D; }
.card:hover { box-shadow: 0 2px 8px 0 #00000026; }
.card h2 { font-size: var(--h6); text-transform: uppercase; letter-spacing: .03em; color: var(--c-text-muted); margin-bottom: var(--s-2); line-height: 1.25; }
.card .metric { font-size: var(--h3); font-weight: 700; color: var(--c-primary); line-height: 1.1; }
.card .metric small { font-size: var(--text-small); font-weight: 400; color: var(--c-text-muted); }
.card .sub { font-size: var(--text-small); color: var(--c-text-muted); margin-top: var(--s-1); }
.card .rollup { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-3); margin-top: var(--s-1); font-size: var(--text-small); }
.card .rollup b { font-size: var(--h5); }

/* ---- Section blocks (the form) ------------------------------------------ */
.sections { margin-top: var(--s-4); }
.form-section { border: 1px solid var(--c-border); border-radius: 2px; margin-bottom: var(--s-3); background: #fff; overflow: hidden; }
.form-section > .section-toggle { border: 0; border-radius: 0; border-bottom: 1px solid var(--c-border); }
.form-section.collapsed > .section-toggle { border-bottom: 0; }
.form-section.collapsed .section-content { display: none; }
.form-section .sec-num { display: inline-block; min-width: 1.6em; color: var(--c-primary); font-weight: 700; }
.section-content { padding: var(--s-4); }
.section-content > .sec-intro { font-size: var(--text-small); color: var(--c-text-muted); margin-top: 0; }

/* field grid — 12-col, §34/§35 */
.grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--s-3) var(--grid-gutter); }
.grid > .field { grid-column: span 12; }
.grid > .field.col-6 { grid-column: span 12; }
.grid > .field.col-4 { grid-column: span 12; }
@media (min-width: 768px) {
  .grid > .field.col-6 { grid-column: span 6; }
  .grid > .field.col-4 { grid-column: span 4; }
}
.field input, .field select, .field textarea { font: inherit; padding: 9px 10px; border: 1px solid var(--c-control-border); border-radius: 4px; width: 100%; background: #fff; max-width: 100%; }
.field textarea { resize: vertical; min-height: 84px; }
.field textarea.lg { min-height: 140px; }
.field .computed { background: var(--c-surface); border: 1px dashed var(--c-border); color: var(--c-text); padding: 9px 10px; border-radius: 4px; font-weight: 700; min-height: 40px; display: flex; align-items: center; }
.field .computed.empty { color: var(--c-text-muted); font-weight: 400; }
.field.readonly input { background: var(--c-surface); }

/* ---- Editable tables (timeline, SLA, actions, follow-ups, sign-off) ----- */
.tbl-wrap { overflow-x: auto; margin-top: var(--s-1); }
table.editable { width: 100%; border-collapse: collapse; font-size: var(--text-small); min-width: 640px; }
table.editable th, table.editable td { border: 1px solid var(--c-border); padding: 4px; text-align: start; vertical-align: top; }
table.editable th { background: var(--c-surface); padding: 8px 10px; white-space: nowrap; }
table.editable td input, table.editable td select, table.editable td textarea { font: inherit; font-size: var(--text-small); width: 100%; border: 1px solid transparent; background: transparent; padding: 6px; border-radius: 4px; }
table.editable td textarea { resize: vertical; min-height: 38px; }
table.editable td input:hover, table.editable td select:hover, table.editable td textarea:hover { border-color: var(--c-border); }
table.editable td input:focus, table.editable td select:focus, table.editable td textarea:focus { border-color: var(--c-control-border); background: #fff; }
table.editable td.rownum { text-align: center; font-weight: 700; color: var(--c-primary); background: var(--c-surface); white-space: nowrap; }
table.editable td.rowid { font-weight: 700; color: var(--c-primary); white-space: nowrap; }
table.editable td.del { width: 1%; text-align: center; }
.row-del { background: none; border: 0; cursor: pointer; color: var(--c-fail); font-size: 18px; line-height: 1; padding: 4px 8px; border-radius: 4px; }
.row-del:hover { background: var(--c-fail-bg); }
.tbl-add { margin-top: var(--s-2); }

/* breach / status cells inside tables */
.mini-badge { display: inline-block; padding: 1px 8px; border-radius: 0; font-size: 12px; font-weight: 700; color: #fff; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
.mini-badge.yes { background: var(--c-fail); }
.mini-badge.no  { background: var(--c-pass); }

/* ---- 5-Whys / list fields ---------------------------------------------- */
.list-field .list-row { display: flex; gap: var(--s-2); align-items: flex-start; margin-bottom: var(--s-2); }
.list-field .list-row .idx { flex: 0 0 auto; width: 26px; height: 34px; display: grid; place-items: center; font-weight: 700; color: var(--c-primary); }
.list-field .list-row textarea, .list-field .list-row input { flex: 1 1 auto; font: inherit; font-size: var(--text-small); padding: 8px; border: 1px solid var(--c-control-border); border-radius: 4px; resize: vertical; min-height: 38px; }

/* ---- Footer ------------------------------------------------------------- */
.site-footer { background: #fff; color: var(--c-text); border-top: 2px solid var(--c-primary); padding-block: var(--s-4); margin-top: var(--s-6); }
.footer-inner { display: flex; flex-direction: column; gap: var(--s-3); }
.footer-links { display: flex; flex-wrap: wrap; gap: var(--s-4); }
.footer-links a { color: var(--c-primary); text-decoration: none; font-size: var(--text-small); }
.footer-links a:hover { text-decoration: underline; }
.footer-compliance { font-size: var(--text-small); color: var(--c-text-muted); margin: 0; }
.footer-bottom { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; border-top: 1px solid var(--c-border); padding-top: var(--s-3); }
.footer-logo { height: 26px; width: auto; }
.footer-copy { font-size: var(--text-small); color: var(--c-text-muted); }
.footer-ver { margin-inline-start: auto; }
.site-footer .muted { color: var(--c-text-muted); font-size: var(--text-small); }

/* ---- Henaket icon system — Material Symbols Outlined --------------------- */
.app-icon {
  font-family: "Material Symbols Outlined"; font-weight: normal; font-style: normal;
  line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block;
  white-space: nowrap; word-wrap: normal; direction: ltr; -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; font-feature-settings: "liga";
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
  vertical-align: middle; color: var(--c-primary); flex: 0 0 auto;
}
.app-icon::before { content: attr(data-icon-name); }

/* ---- Report view + PDF -------------------------------------------------- */
#report-view { display: none; position: fixed; inset: 0; z-index: 60; background: #fff; overflow: auto; }
body.report-open { overflow: hidden; }
body.report-open #report-view { display: block; }
.report-actions { position: sticky; top: 0; background: var(--c-surface); border-bottom: 1px solid var(--c-border); padding: var(--s-3) var(--s-4); display: flex; gap: var(--s-2); justify-content: flex-end; }

.report { max-width: 900px; margin-inline: auto; padding: var(--s-5) var(--s-4); }
.report .cover { background: var(--c-primary); color: #fff; padding: var(--s-5); border-radius: 4px; display: flex; gap: var(--s-4); align-items: center; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
.report .cover .cover-logo { height: 48px; width: auto; flex: 0 0 auto; }
.report .cover h1 { margin: 0 0 var(--s-2); font-size: var(--h2); }
.report .cover .sub { opacity: .9; }
.report .cover .chip { margin-inline-end: var(--s-1); }
.report h2 { font-size: var(--h3); margin-top: var(--s-5); border-bottom: 2px solid var(--c-primary); padding-bottom: var(--s-1); }
.report h3 { font-size: var(--h4); margin-top: var(--s-4); }
.report p.body { white-space: pre-wrap; }
.report table { width: 100%; border-collapse: collapse; margin: var(--s-3) 0; font-size: var(--text-small); }
.report th, .report td { border: 1px solid var(--c-border); padding: 8px 10px; text-align: start; vertical-align: top; }
.report th { background: var(--c-primary-100); print-color-adjust: exact; -webkit-print-color-adjust: exact; white-space: normal; overflow-wrap: break-word; }
.report td { overflow-wrap: anywhere; word-break: break-word; white-space: pre-wrap; }
.report table.kv { table-layout: auto; }
.report .kv th { white-space: nowrap; width: 1%; }
.report ol.whys { padding-inline-start: var(--s-4); }
.report ol.whys li { margin-bottom: var(--s-1); }

/* ---- Responsive breakpoints — §35 -------------------------------------- */
@media (min-width: 768px) { .card { grid-column: span 4; } .card.wide { grid-column: span 8; } }
@media (max-width: 767.98px) {
  h1 { font-size: 30px; }
  .topbar { position: static; box-shadow: none; }
}

/* ---- Print (PDF) -------------------------------------------------------- */
@media print {
  @page { margin: 16mm 14mm; }
  body.report-open > *:not(#report-view) { display: none !important; }
  #report-view { position: static; overflow: visible; }
  .no-print, .report-actions { display: none !important; }
  .report { max-width: none; padding: 0; }
  .report h2, .report h3 { break-after: avoid; }
  .report table { break-inside: auto; }
  .report tr { break-inside: avoid; }
}