/* Policies & documents: register, template library, and the document reader. */

/* ── register ───────────────────────────────────────────────────────────── */
.doc-search { display: flex; flex-direction: column; gap: 12px; margin-bottom: 22px; }
.doc-search-box { display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 4px 14px; box-shadow: var(--shadow-card); }
.doc-search-box .ic { color: var(--muted); }
.doc-search-box input { border: 0; padding: 10px 0; background: transparent; font-size: 1rem; }
.doc-search-box input:focus { outline: none; }
.type-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.tchip { padding: 5px 12px; border-radius: 99px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: .85rem; font-weight: 600; text-decoration: none !important; }
.tchip span { color: var(--muted); font-weight: 500; margin-left: 4px; }
.tchip.on { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.tchip.on span { color: inherit; opacity: .8; }
.doc-group { margin-bottom: 28px; }
.doc-group > h2 { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 10px; }
.doc-list { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-card); }
.doc-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) 150px 130px minmax(140px, auto); gap: 16px; align-items: center; padding: 14px 18px; color: var(--text); text-decoration: none !important; border-top: 1px solid var(--border); transition: background .12s; }
.doc-row:first-child { border-top: 0; }
.doc-row:hover { background: var(--surface-2); }
.doc-row.is-archived { opacity: .6; }
.doc-ico { width: 40px; height: 48px; border-radius: 6px; display: grid; place-items: center; font-size: 18px; position: relative;
  background: linear-gradient(160deg, var(--surface) 0%, var(--surface-2) 100%); border: 1px solid var(--border); color: var(--accent); }
.doc-ico::after { content: ""; position: absolute; top: -1px; right: -1px; width: 11px; height: 11px; background: linear-gradient(225deg, var(--bg) 50%, var(--border) 50%); border-bottom-left-radius: 3px; }
.doc-ico-policy { color: #2563eb; } .doc-ico-plan { color: #c2410c; } .doc-ico-procedure { color: #7c3aed; }
.doc-ico-standard { color: #0f766e; } .doc-ico-register { color: #b45309; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .doc-ico-policy { color: #7ab0ff; } :root:not([data-theme="light"]) .doc-ico-plan { color: #fb923c; } :root:not([data-theme="light"]) .doc-ico-procedure { color: #b794ff; } :root:not([data-theme="light"]) .doc-ico-standard { color: #5eead4; } :root:not([data-theme="light"]) .doc-ico-register { color: #fbbf62; } }
:root[data-theme="dark"] .doc-ico-policy { color: #7ab0ff; } :root[data-theme="dark"] .doc-ico-plan { color: #fb923c; } :root[data-theme="dark"] .doc-ico-procedure { color: #b794ff; } :root[data-theme="dark"] .doc-ico-standard { color: #5eead4; } :root[data-theme="dark"] .doc-ico-register { color: #fbbf62; }
.doc-main { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.doc-name { display: flex; gap: 10px; align-items: baseline; min-width: 0; }
.doc-name strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doc-ref { font-size: .78rem; color: var(--muted); flex-shrink: 0; }
.doc-sub { font-size: .84rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doc-meta { display: flex; flex-direction: column; font-size: .82rem; color: var(--muted); }
.doc-meta strong { color: var(--text); font-size: .9rem; }
.doc-flags { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
@media (max-width: 900px) {
  .doc-row { grid-template-columns: 40px minmax(0, 1fr); }
  .doc-meta { display: none; }
  .doc-flags { grid-column: 2; justify-content: flex-start; }
}

/* ── template library ───────────────────────────────────────────────────── */
.tpl-intro { max-width: 820px; margin-bottom: 22px; }
.tpl-intro h2 { margin-bottom: 4px; }
.tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.tpl-card { display: flex; gap: 14px; padding: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; color: var(--text); text-decoration: none !important; box-shadow: var(--shadow-card); transition: transform .15s, box-shadow .15s; }
.tpl-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.tpl-sheet { width: 62px; height: 80px; flex-shrink: 0; border-radius: 6px; background: #fff; border: 1px solid var(--border); padding: 18px 8px 8px; display: flex; flex-direction: column; gap: 5px; position: relative; box-shadow: 0 2px 6px rgba(0,0,0,.06); }
.tpl-sheet i { display: block; height: 4px; border-radius: 2px; background: #e3e7ee; }
.tpl-sheet i:nth-child(3) { width: 70%; } .tpl-sheet i:nth-child(5) { width: 85%; } .tpl-sheet i:nth-child(6) { width: 50%; }
.tpl-type { position: absolute; top: 5px; left: 7px; right: 7px; font-size: 7.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--accent); }
.tpl-body { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.tpl-top { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.tpl-body h3 { margin: 0; font-size: .98rem; line-height: 1.3; }
.tpl-body p { margin: 0; font-size: .84rem; color: var(--muted); }
.tpl-fw { font-size: .74rem; color: var(--muted); margin-top: auto; padding-top: 4px; }
.tpl-offer { display: flex; justify-content: space-between; align-items: center; gap: 18px; flex-wrap: wrap; border: 2px solid var(--accent); }
.tpl-offer h2 { margin-bottom: 2px; }

/* ── toolbar and rail ───────────────────────────────────────────────────── */
.doc-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.doc-rail { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; margin-bottom: 18px; align-items: start; }
.doc-rail .card { margin: 0; border-radius: 14px; }
.rail-sign { border: 2px solid var(--warn); }
.sig-input { font-family: "Snell Roundhand", "Segoe Script", "Brush Script MT", cursive; font-size: 1.25rem; }
.doc-admin { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; margin-top: 22px; align-items: start; }
.doc-admin .card { margin: 0; border-radius: 14px; }
.doc-editor { min-height: 640px; font-size: .9rem; line-height: 1.6; }

/* ── reader ─────────────────────────────────────────────────────────────── */
.doc-reader { display: grid; grid-template-columns: 230px minmax(0, 880px); gap: 32px; justify-content: center; align-items: start; }
@media (max-width: 1100px) { .doc-reader { grid-template-columns: minmax(0, 1fr); } .doc-toc { display: none; } }
.doc-toc { position: sticky; top: 20px; max-height: calc(100vh - 40px); overflow-y: auto; font-size: .86rem; }
.doc-toc-head { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; color: var(--muted); margin-bottom: 8px; }
.doc-toc ol { list-style: none; padding: 0; margin: 0; border-left: 2px solid var(--border); counter-reset: toc; }
.doc-toc li a { display: block; padding: 5px 0 5px 14px; margin-left: -2px; border-left: 2px solid transparent; color: var(--muted); line-height: 1.35; }
.doc-toc li a:hover { color: var(--text); border-left-color: var(--accent); text-decoration: none; }
.doc-toc li.toc-2 { counter-increment: toc; }
.doc-toc li.toc-2 a::before { content: counter(toc) ". "; font-variant-numeric: tabular-nums; }
.doc-toc li.toc-3 a { padding-left: 28px; font-size: .82rem; }

.doc-paper {
  position: relative; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 6px;
  padding: 56px 68px 40px; box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 18px 40px -18px rgba(16,24,40,.18); overflow: hidden;
}
@media (max-width: 700px) { .doc-paper { padding: 28px 20px; } }
.doc-paper[data-watermark]::before {
  content: attr(data-watermark); position: absolute; top: 620px; left: 50%; transform: translate(-50%, 0) rotate(-24deg);
  font-size: 92px; font-weight: 900; letter-spacing: .08em; white-space: nowrap; color: var(--bad); opacity: .07; pointer-events: none;
}
.doc-banner { display: flex; gap: 8px; align-items: center; margin: -56px -68px 36px; padding: 10px 68px; background: var(--warn-soft); color: var(--warn); font-weight: 650; font-size: .86rem; }
@media (max-width: 700px) { .doc-banner { margin: -28px -20px 24px; padding: 10px 20px; } }

.doc-head { border-bottom: 3px solid var(--text); padding-bottom: 22px; margin-bottom: 28px; }
.doc-head-top { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; color: var(--muted); }
.doc-org { display: inline-flex; gap: 6px; align-items: center; color: var(--accent); }
.doc-kind .mono { text-transform: none; letter-spacing: 0; }
.doc-title { font-size: 2.3rem; line-height: 1.12; letter-spacing: -.025em; margin: 18px 0 10px; }
.doc-lede { font-size: 1.08rem; color: var(--muted); margin: 0; max-width: 62ch; }

.doc-section-plain { font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin: 0 0 12px; }
.doc-control { margin-bottom: 34px; }
.doc-control dl { display: grid; grid-template-columns: 1fr 1fr; margin: 0; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.doc-control dl > div { display: grid; grid-template-columns: 120px 1fr; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--border); font-size: .88rem; }
.doc-control dl > div:nth-child(odd) { border-right: 1px solid var(--border); }
.doc-control dl > div.span-2 { grid-column: 1 / -1; border-right: 0; }
.doc-control dl > div:nth-last-child(-n+1), .doc-control dl > div:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
.doc-control dt { color: var(--muted); font-weight: 600; }
.doc-control dd { margin: 0; }
@media (max-width: 700px) { .doc-control dl { grid-template-columns: 1fr; } .doc-control dl > div { border-right: 0 !important; } }

.doc-file { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px dashed var(--border); border-radius: 12px; margin-bottom: 28px; }
.doc-file-icon { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); font-size: 20px; }
.doc-file .btn { margin-left: auto; }

/* Numbered sections: ## is 1, 2, 3 …; ### is 1.1, 1.2 … */
.doc-body { max-width: none; font-size: 1rem; line-height: 1.72; counter-reset: h2; }
.doc-body h2 { counter-increment: h2; counter-reset: h3; font-size: 1.3rem; margin: 2.1em 0 .6em; padding-top: .2em; scroll-margin-top: 16px; letter-spacing: -.01em; }
.doc-body h2::before { content: counter(h2); display: inline-block; min-width: 2em; color: var(--accent); font-variant-numeric: tabular-nums; }
.doc-body h3 { counter-increment: h3; font-size: 1.05rem; margin: 1.6em 0 .4em; scroll-margin-top: 16px; }
.doc-body h3::before { content: counter(h2) "." counter(h3); display: inline-block; min-width: 2.6em; color: var(--muted); font-variant-numeric: tabular-nums; }
.doc-body .co h2::before, .doc-body .co h3::before { content: none; }
.doc-body p { margin: 0 0 1em; }
.doc-body ol, .doc-body ul { padding-left: 1.4em; margin: 0 0 1.1em; }
.doc-body li { margin: .3em 0; }
.doc-body table { width: 100%; margin: .6em 0 1.4em; border: 1px solid var(--border); border-radius: 8px; border-collapse: separate; border-spacing: 0; overflow: hidden; font-size: .9rem; }
.doc-body th { background: var(--surface-2); text-transform: none; letter-spacing: 0; font-size: .84rem; color: var(--text); padding: 9px 12px; }
.doc-body td { padding: 9px 12px; }
.doc-body tr:last-child td { border-bottom: 0; }
.doc-body blockquote { border-left: 3px solid var(--border); margin: 1em 0; padding: .2em 1em; color: var(--muted); }

/* Template guidance: unmistakably not part of the policy. */
.co-template { --c: var(--warn); --cs: var(--warn-soft); border: 2px dashed color-mix(in srgb, var(--warn) 60%, transparent); }

.doc-appendix { margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--border); scroll-margin-top: 16px; }
.doc-appendix table { width: 100%; font-size: .88rem; border: 1px solid var(--border); border-radius: 8px; border-collapse: separate; border-spacing: 0; overflow: hidden; }
.doc-appendix th { background: var(--surface-2); }
.sig-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; }
.sig { border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; }
.sig.rejected { border-color: var(--bad); }
.sig-cap { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; color: var(--muted); }
.sig-line { border-bottom: 1px solid var(--text); min-height: 44px; display: flex; align-items: flex-end; padding-bottom: 4px; margin: 8px 0; }
.sig-name { font-family: "Snell Roundhand", "Segoe Script", "Brush Script MT", cursive; font-size: 1.6rem; line-height: 1.1; color: #1f3a8a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sig-name { color: #9cc0ff; } }
:root[data-theme="dark"] .sig-name { color: #9cc0ff; }
.sig-meta { font-size: .82rem; }
.sig-hash { font-size: .72rem; color: var(--muted); margin-top: 4px; }

.doc-ack { margin-top: 40px; padding: 22px; border-radius: 12px; border: 2px solid var(--accent); background: var(--accent-soft); }
.doc-ack-head { display: flex; gap: 8px; align-items: center; font-weight: 750; margin-bottom: 12px; color: var(--accent); }
.doc-ack.done { display: flex; gap: 10px; align-items: center; border-color: var(--ok); background: var(--ok-soft); color: var(--ok); font-weight: 600; }
.doc-foot { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 44px; padding-top: 14px; border-top: 1px solid var(--border); font-size: .76rem; color: var(--muted); }

/* ── company branding ───────────────────────────────────────────────────
   Set by the company in Settings. The variables come from core/branding.ts,
   which derives every shade from a validated #rrggbb: --brand (bars),
   --brand-ink (text on light paper, ≥ 4.5:1), --brand-ink-dark (on dark paper). */
.doc-reader.branded { --b-ink: var(--brand-ink); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .doc-reader.branded { --b-ink: var(--brand-ink-dark); } }
:root[data-theme="dark"] .doc-reader.branded { --b-ink: var(--brand-ink-dark); }
.doc-paper.branded { border-top: 6px solid var(--brand); }
.doc-paper.branded .doc-banner { margin-top: -56px; }
.doc-reader.branded .doc-org { color: var(--b-ink); }
.doc-reader.branded .doc-head { border-bottom-color: var(--b-ink); }
.doc-reader.branded .doc-body h2::before { color: var(--b-ink); }
.doc-reader.branded .doc-toc li a:hover { border-left-color: var(--b-ink); }
.doc-reader.branded .doc-ack { border-color: var(--b-ink); }
.doc-reader.branded .doc-ack-head { color: var(--b-ink); }
.doc-org.has-logo { display: block; }
.doc-logo { display: block; max-height: 52px; max-width: 220px; width: auto; height: auto; object-fit: contain; }
/* A logo drawn for white paper can vanish on dark paper: give it its own white plate. */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .doc-logo:not(.on-plate) { background: #fff; padding: 6px 8px; border-radius: 8px; } }
:root[data-theme="dark"] .doc-logo:not(.on-plate) { background: #fff; padding: 6px 8px; border-radius: 8px; }
.doc-foot-line { flex-basis: 100%; }

/* ── print: A4 portrait, the paper only ─────────────────────────────────── */
@page { size: A4 portrait; margin: 16mm 16mm 18mm;
  @bottom-left { content: var(--doc-ref, ""); font-size: 8pt; color: #666; }
  @bottom-right { content: "Page " counter(page) " of " counter(pages); font-size: 8pt; color: #666; } }
@media print {
  .doc-toc, .doc-toolbar, .doc-rail, .doc-admin, .crumbs, .doc-ack form { display: none !important; }
  .doc-reader { display: block; }
  .doc-paper { border: 0; box-shadow: none; padding: 0; border-radius: 0; overflow: visible; }
  .doc-banner { margin: 0 0 16px; padding: 6px 0; background: none; border-bottom: 1px solid #c00; }
  .doc-paper[data-watermark]::before { position: fixed; top: 45%; opacity: .1; }
  .doc-body h2 { break-after: avoid; }
  .doc-body table, .sig, .co { break-inside: avoid; }
  .doc-title { font-size: 24pt; }
  body { font-size: 10.5pt; }
  /* Paper is paper: print in the light palette even when the app is in dark mode. */
  .doc-reader {
    --surface: #ffffff; --surface-2: #f2f4f7; --surface-3: #e9ecf1; --border: #e4e7ec; --border-strong: #d0d5dd;
    --text: #101828; --text-2: #344054; --muted: #667085; --accent: #3e63dd; --accent-soft: #edf2fe;
    --ok: #12805c; --ok-soft: #e6f6ee; --warn: #b54708; --warn-soft: #fef4e6; --bad: #d92d20; --bad-soft: #fef1f0;
    --info: #3e63dd; --info-soft: #edf2fe; color-scheme: light;
  }
  .doc-paper { background: #fff; color: #101828; }
  .sig-name { color: #1f3a8a !important; }
  /* Branding prints: the bar, the logo and the coloured accents. Print is always light paper. */
  .doc-paper.branded { border-top: 4pt solid var(--brand); padding-top: 10pt; }
  .doc-paper.branded .doc-banner { margin-top: 0; }
  .doc-reader.branded { --b-ink: var(--brand-ink) !important; }
  .doc-logo { background: none !important; padding: 0 !important; }
  .doc-paper, .doc-paper * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
.sig-comment { font-size: .84rem; margin-top: 6px; color: var(--text); white-space: pre-wrap; }
.sig.rejected .sig-comment strong { color: var(--bad); }