/* =========================================================================
   Henaket («Հենակետ») design tokens — derived from RA Decision N 153-Ն, §32–59.
   Anchor values (colours, sizes, spacing, breakpoints) are taken verbatim from
   the checklist; intermediate tonal steps are interpolated between the
   documented 100 and 1200 anchors.
   ========================================================================= */
:root {
  /* Brand colours — §41 */
  --c-primary: #355C8C;       /* primary 800 */
  --c-green:   #56B7B2;       /* green 800 */
  --c-ink:     #2D2C2C;       /* dark gray */

  /* Primary tonal scale 100→1200 — §42 (100 & 1200 are documented anchors) */
  --c-primary-100: #f0f4f9;
  --c-primary-200: #d9e3ef;
  --c-primary-800: #355C8C;
  --c-primary-900: #2a4a70;
  --c-primary-1200: #0B121C;

  --c-green-100: #F6FFFF;     /* §42 */
  --c-gray-100: #C1C0C0;      /* §42 */

  /* Focus indicator — §43 (#BD13B8, 2 PX outline) */
  --c-focus: #BD13B8;
  --focus-width: 2px;

  /* Status semantics (kept ≥3:1 against surfaces — §44) */
  --c-pass: #1f7a4d;
  --c-fail: #b3261e;
  --c-na:   #6b6b6b;
  --c-unset: #b9c0c8;

  /* Surfaces / text */
  --c-bg: #ffffff;
  --c-surface: var(--c-primary-100);
  --c-border: #d4dbe4;
  --c-text: #1b1b1b;
  --c-text-muted: #4a4a4a;

  /* 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 — Noto Sans Armenian, §46 */
  --font: "Noto Sans Armenian", "Noto Sans", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* Heading sizes — §48 */
  --h1: 40px; --h2: 30px; --h3: 24px; --h4: 20px; --h5: 16px; --h6: 13px;
  --text-lead: 20px;  /* paragraph — §49 */
  --text-body: 16px;  /* body — §50 (16 or 14px) */
  --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 */
}
/* Long words / URLs must wrap inside their containers, not spill out. */
h1, h2, h3, p, span, label, legend, td, th, .req, .alt, .criterion {
  overflow-wrap: anywhere;
  word-break: break-word;
}
img, svg { max-width: 100%; height: auto; }
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); }

:focus-visible {                 /* visible keyboard focus — §43 / WCAG 2.1 AA */
  outline: var(--focus-width) solid var(--c-focus);
  outline-offset: 2px;
  border-radius: 2px;
}
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;            /* breakpoint anchor — §35 */
  margin-inline: auto;
  padding-inline: var(--s-4);
}

/* ---- 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; }
.coat {
  width: 40px; height: 40px; flex: 0 0 auto; border-radius: 50%;
  background: var(--c-green); display: grid; place-items: center;
  font-weight: 700; color: var(--c-primary-1200);
}
.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: 12px; padding: 2px 10px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.ver-badge:empty { display: none; }
.lang-switch { display: inline-flex; border: 1px solid rgba(255,255,255,.5); border-radius: 4px; overflow: hidden; }
.lang-switch button { background: transparent; color: #fff; border: 0; padding: 6px 12px; font: inherit; cursor: pointer; }
.lang-switch button[aria-pressed="true"] { background: #fff; color: var(--c-primary); font-weight: 700; }

.search { display: flex; }
.search input { font: inherit; padding: 8px 12px; border: 1px solid var(--c-border); border-radius: 4px 0 0 4px; min-width: 160px; max-width: 220px; }
.search button { font: inherit; border: 0; background: var(--c-green); color: var(--c-primary-1200); padding: 8px 14px; border-radius: 0 4px 4px 0; cursor: pointer; font-weight: 700; }

/* ---- Project bar -------------------------------------------------------- */
.projectbar { background: var(--c-primary-900); 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-border); border-radius: 4px; min-width: 220px; max-width: 100%; }
.projectbar .pj-meta { font-size: var(--text-small); opacity: .9; min-width: 0; }
.projectbar .actions { margin-inline-start: auto; display: flex; gap: var(--s-2); flex-wrap: wrap; }
.dom-badge { font-size: var(--text-small); padding: 2px 10px; border-radius: 12px; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
.dom-badge.ok    { background: var(--c-pass); color: #fff; }
.dom-badge.warn  { background: #9a5b00; color: #fff; }
.dom-badge.error { background: var(--c-fail); color: #fff; }

/* Live domain feedback in the new-project dialog */
.dom-feedback { margin: var(--s-1) 0 0; font-size: var(--text-small); min-height: 1.2em; }
.dom-feedback.ok    { color: var(--c-pass); }
.dom-feedback.warn  { color: #9a5b00; }
.dom-feedback.error { color: var(--c-fail); }

/* ---- Toolbar / filters -------------------------------------------------- */
.toolbar { background: var(--c-surface); border-bottom: 1px solid var(--c-border); padding-block: var(--s-3); }
.toolbar-grid { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: end; }
.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 select, .field input[type="text"] { font: inherit; padding: 8px 10px; border: 1px solid var(--c-border); border-radius: 4px; background: #fff; min-width: 160px; max-width: 100%; }
.actions { display: flex; gap: var(--s-2); margin-inline-start: auto; flex-wrap: wrap; }

.btn { font: inherit; font-weight: 700; cursor: pointer; border-radius: 4px; padding: 9px 16px; border: 1px solid var(--c-primary); background: var(--c-primary); color: #fff; }
.btn:hover { background: var(--c-primary-900); }
.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); }

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

/* ---- Summary scorecard -------------------------------------------------- */
.summary { padding-block: var(--s-4); }
.progress-overall { margin-bottom: var(--s-4); }
.bar { height: 14px; background: var(--c-gray-100); border-radius: 8px; overflow: hidden; display: flex; }
.bar > span { display: block; height: 100%; }
.bar .seg-pass { background: var(--c-pass); }
.bar .seg-fail { background: var(--c-fail); }
.bar .seg-na   { background: var(--c-na); }

.cards { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--grid-gutter); }  /* §34/§35 */
.card { grid-column: span 12; min-width: 0; overflow: hidden; border: 1px solid var(--c-border); border-radius: 8px; padding: var(--s-3); background: #fff; }
.card h3 { font-size: var(--h5); margin-bottom: var(--s-2); }
.card .ref { font-size: var(--text-small); color: var(--c-text-muted); }
.card .counts { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-2); font-size: var(--text-small); }
.card .counts b { font-size: var(--h4); display: block; }

/* ---- Checklist items ---------------------------------------------------- */
.category-block { padding-block: var(--s-4); border-top: 1px solid var(--c-border); }
.category-block > h2 { font-size: var(--h3); }
.item { border: 1px solid var(--c-border); border-radius: 8px; padding: var(--s-3); margin-bottom: var(--s-3); overflow: hidden; display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--s-3); }
.item[data-status="pass"] { border-inline-start: 5px solid var(--c-pass); }
.item[data-status="fail"] { border-inline-start: 5px solid var(--c-fail); }
.item[data-status="na"]   { border-inline-start: 5px solid var(--c-na); }
.item .main { grid-column: span 8; min-width: 0; }
.item .side { grid-column: span 4; min-width: 0; }
.item .id-row { display: flex; gap: var(--s-2); align-items: baseline; flex-wrap: wrap; }
.item .id { font-weight: 700; color: var(--c-primary); }
.item .para { font-size: var(--text-small); color: #fff; background: var(--c-green); border-radius: 4px; padding: 2px 8px; }
.item .req { font-size: var(--text-lead); font-weight: 600; margin: var(--s-2) 0; line-height: 1.35; }
.item .alt { font-size: var(--text-small); color: var(--c-text-muted); }
.item .criterion { font-size: var(--text-small); color: var(--c-text-muted); margin-top: var(--s-2); }

/* Severity (weight) badge + selector */
.wbadge { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 12px; font-weight: 700; color: #fff; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
.wbadge.critical { background: #8a1c1c; }
.wbadge.high     { background: #9a5b00; }
.wbadge.medium   { background: #44607f; }
.wlabel { display: block; font-size: var(--text-small); font-weight: 700; color: var(--c-text-muted); margin-top: var(--s-2); }
.weight-select { font: inherit; padding: 6px 8px; border: 1px solid var(--c-border); border-radius: 4px; background: #fff; width: 100%; }

.status-group { display: flex; flex-direction: column; gap: 6px; border: 0; margin: 0; padding: 0; }
.status-group legend { font-size: var(--text-small); font-weight: 700; color: var(--c-text-muted); padding: 0; }
.radio { display: flex; align-items: center; gap: var(--s-2); padding: 6px 8px; border-radius: 4px; cursor: pointer; }
.radio:hover { background: var(--c-primary-100); }
.radio input { width: 18px; height: 18px; accent-color: var(--c-primary); flex: 0 0 auto; }
.evidence { width: 100%; font: inherit; font-size: var(--text-small); padding: 8px; margin-top: var(--s-2); border: 1px solid var(--c-border); border-radius: 4px; resize: vertical; min-height: 64px; }

/* ---- Footer ------------------------------------------------------------- */
.site-footer { background: var(--c-ink); color: #fff; padding-block: var(--s-4); margin-top: var(--s-6); }
.site-footer a { color: var(--c-green-100); }
.site-footer .muted { color: #c9c9c9; font-size: var(--text-small); }

/* ---- Dialog (new project) ---------------------------------------------- */
dialog { border: 0; border-radius: 8px; padding: 0; max-width: 520px; width: 92%; box-shadow: 0 10px 40px rgba(0,0,0,.25); }
dialog::backdrop { background: rgba(11,18,28,.5); }
.dialog-head { background: var(--c-primary); color: #fff; padding: var(--s-3) var(--s-4); }
.dialog-head h2 { margin: 0; font-size: var(--h4); }
.dialog-body { padding: var(--s-4); display: flex; flex-direction: column; gap: var(--s-3); }
.dialog-body .field input { font: inherit; padding: 9px 10px; border: 1px solid var(--c-border); border-radius: 4px; width: 100%; }
.dialog-foot { display: flex; justify-content: flex-end; gap: var(--s-2); padding: 0 var(--s-4) var(--s-4); }
.req-mark { color: var(--c-fail); }

/* ---- 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: 8px; display: flex; gap: var(--s-4); align-items: center; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
.report .cover .coat { width: 56px; height: 56px; font-size: var(--h5); }
.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 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 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; }
.report .meta th { width: 36%; }
.badge { display: inline-block; padding: 2px 8px; border-radius: 4px; color: #fff; font-size: 12px; font-weight: 700; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
.badge.pass { background: var(--c-pass); }
.badge.fail { background: var(--c-fail); }
.badge.na   { background: var(--c-na); }
.badge.unset{ background: var(--c-unset); color: #1b1b1b; }
.report .totebar { height: 18px; }

/* ---- Responsive breakpoints — §35 -------------------------------------- */
@media (min-width: 768px) { .card { grid-column: span 6; } }   /* ≥48rem */
@media (min-width: 992px) { .card { grid-column: span 4; } }   /* ≥62rem */
@media (max-width: 767.98px) {
  .item .main, .item .side { grid-column: span 12; }
  h1 { font-size: 30px; }
}

/* ---- 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; }
}