/* =====================================================================================
   Athena modern layer (loaded after everything else). The event story's language, applied to every
   page so the whole product feels like one thing: a calm gradient canvas, frosted rounded cards, light
   headers, pill tabs and soft depth. Only tokens from premium.css are used, so dark mode follows, and
   nothing here hides content or depends on an animation finishing.
   ===================================================================================== */
:root {
  --r: 16px; --r-sm: 10px; --r-xs: 7px;
  --glass: color-mix(in srgb, var(--surface) 86%, transparent);
  --glass-strong: color-mix(in srgb, var(--surface) 94%, transparent);
  --glass-line: color-mix(in srgb, var(--line) 78%, transparent);
  --lift: 0 1px 1px rgba(21, 23, 28, .02), 0 12px 30px -22px rgba(21, 23, 28, .28);
  --lift-hover: 0 2px 4px rgba(21, 23, 28, .04), 0 20px 40px -24px rgba(21, 23, 28, .34);
}
:root[data-theme="dark"] {
  --lift: 0 1px 1px rgba(0, 0, 0, .3), 0 14px 32px -22px rgba(0, 0, 0, .8);
  --lift-hover: 0 2px 4px rgba(0, 0, 0, .35), 0 22px 44px -24px rgba(0, 0, 0, .85);
}

/* ---------- canvas ---------- */
.main {
  background:
    radial-gradient(1100px 560px at 6% -12%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 68%),
    radial-gradient(800px 480px at 104% -4%, color-mix(in srgb, var(--text-3) 11%, transparent), transparent 70%),
    radial-gradient(900px 600px at 70% 118%, color-mix(in srgb, var(--accent) 6%, transparent), transparent 70%),
    var(--bg);
}

/* ---------- page header: light, not a white slab ---------- */
.page-h {
  background: color-mix(in srgb, var(--surface) 62%, transparent);
  backdrop-filter: blur(14px) saturate(1.08); -webkit-backdrop-filter: blur(14px) saturate(1.08);
  border-bottom: 1px solid var(--glass-line); min-height: 68px; padding: 14px 26px;
}
.page-h h1 { font-size: 21px; font-weight: 650; letter-spacing: -.028em; }
.page-h .sub { font-size: 12.5px; color: var(--text-3); margin-top: 3px; }
.page-body { padding: 24px 26px; }

/* ---------- cards: frosted, rounded, soft depth ---------- */
.card { background: var(--glass); border: 1px solid var(--glass-line); border-radius: var(--r); box-shadow: var(--lift); }
.card-h { border-bottom-color: var(--glass-line); }
.card-h h3 { font-size: 14.5px; letter-spacing: -.015em; }
a.card, .card.clickable, .card[data-href] { transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease); }
a.card:hover, .card.clickable:hover, .card[data-href]:hover { transform: translateY(-2px); box-shadow: var(--lift-hover); border-color: color-mix(in srgb, var(--accent) 30%, var(--glass-line)); }
.callout { border-radius: 14px; }

/* ---------- KPI tiles ---------- */
.kpi-v { font-size: 26px; letter-spacing: -.03em; }

/* ---------- controls ---------- */
.btn { border-radius: var(--r-sm); }
.btn-sm { border-radius: 9px; }
.input, select.input, textarea.input { border-radius: var(--r-sm); background: var(--glass-strong); border-color: var(--glass-line); }
.input:hover:not(:focus) { border-color: color-mix(in srgb, var(--text-3) 38%, var(--line)); }
.chip, .badge { border-radius: 999px; }
.icon-btn { border-radius: 9px; }

/* Tabs under a page header: a quiet pill row instead of an underline strip. */
.tabs { background: transparent; border-bottom: 0; padding: 10px 26px 0; gap: 4px; flex-wrap: wrap; }
.tabs button, .tabs a { padding: 7px 14px; border-radius: 999px; border-bottom: 0; font-weight: 500; color: var(--text-2); transition: background .15s, color .15s; }
.tabs button:hover, .tabs a:hover { background: color-mix(in srgb, var(--text-3) 10%, transparent); color: var(--text); }
.tabs .on { background: var(--surface); color: var(--text); box-shadow: var(--shadow); font-weight: 600; }
.seg { border-radius: 11px; }

/* ---------- tables ---------- */
.table th { background: transparent; }
.table tr:hover td { background: color-mix(in srgb, var(--accent) 5%, transparent); }
.card > .table:first-child th:first-child, .card > div > .table th:first-child { padding-left: 16px; }

/* ---------- modals and menus ---------- */
.modal { border-radius: 20px; border: 1px solid var(--glass-line); }
.modal-bg, .modal-backdrop, .overlay { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.menu, .dropdown, .popover { border-radius: 14px; }

/* ---------- empty states: an icon in a soft disc ---------- */
.empty > svg.ic:first-child { padding: 14px; box-sizing: content-box; border-radius: 50%; background: color-mix(in srgb, var(--accent) 12%, var(--surface-2)); color: var(--accent-ink); }
.empty h3 { font-size: 17px; letter-spacing: -.02em; }

/* ---------- sidebar: a touch of depth ---------- */
.sidebar { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 5%, var(--nav)) 0%, var(--nav) 32%); }
.sb-item.active { box-shadow: var(--lift); }

/* ---------- scrollbars ---------- */
* { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--text-3) 35%, transparent) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--text-3) 30%, transparent); border-radius: 99px; border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background-color: color-mix(in srgb, var(--text-3) 50%, transparent); }

@media (max-width: 900px) {
  .page-h { padding: 12px 16px 12px 62px; } .page-body { padding: 16px; } .tabs { padding: 8px 16px 0; }
}
@media (prefers-reduced-motion: reduce) { a.card, .card.clickable, .card[data-href] { transition: none; } a.card:hover, .card.clickable:hover { transform: none; } }

/* Canonical method preview (views/canon.js) */
.cn { display: flex; flex-direction: column; gap: 14px; }
.cn-badge { font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 99px; background: var(--accent-soft); color: var(--accent-ink); vertical-align: 4px; }
.cn-strip { padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.cn-strip-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }

/* Every browser-generated dashboard/report PDF is designed for a desktop-wide canvas. */
@page { size: A4 landscape; margin: 9mm; }
.cn-strip-row > div { display: flex; flex-direction: column; gap: 2px; }
.cn-strip-row span { font-size: 12px; color: var(--text-3); }
.cn-strip-row b { font-size: 18px; letter-spacing: -.02em; }
.cn-strip-row small { color: var(--text-2); font-size: 12px; }
.cn-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.cn-inline { display: inline-flex; gap: 6px; align-items: center; font-size: 12.5px; color: var(--text-2); }
.cn-inline input { width: 80px; }
.cn-sep { width: 1px; height: 22px; background: var(--line); }
.cn-q summary { cursor: pointer; font-size: 12.5px; color: var(--warn); }
.cn-lens { display: flex; gap: 4px; flex-wrap: wrap; }
.cn-lens button { border: 1px solid var(--line); background: var(--surface); border-radius: 99px; padding: 5px 12px; font: inherit; font-size: 12.5px; cursor: pointer; color: var(--text-2); }
.cn-lens button.on { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
.cn-scroll { overflow-x: auto; }
.cn-t td.num small { display: block; color: var(--text-3); font-size: 11px; }
.cn-t .pos { color: var(--pos-ink); } .cn-t .neg { color: var(--neg-ink); }
.cn-foot { max-width: 100ch; }
.cn-ev { display: flex; flex-direction: column; gap: 10px; max-height: 64vh; overflow: auto; }
.cn-ev article { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.cn-ev-h, .cn-ev-f { display: flex; gap: 10px; flex-wrap: wrap; font-size: 11.5px; color: var(--text-3); }
.cn-ev p { margin: 6px 0; line-height: 1.55; }
.cn-ev mark { background: color-mix(in srgb, var(--accent) 30%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; }
/* Canonical preview — tabs, review, registry, quality (rework P2) */
.cn-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 4px; overflow-x: auto; }
.cn-tabs button { border: 0; background: none; font: inherit; font-size: 13.5px; padding: 9px 14px; color: var(--text-2); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.cn-tabs button.on { color: var(--text); font-weight: 600; border-bottom-color: var(--accent); }
.cn-banner { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 10px; font-size: 13px; }
.cn-banner.warn { background: var(--warn-soft); color: var(--warn); }
.cn-banner.ok { background: var(--ok-soft); color: var(--ok); }
.cn-banner span { color: var(--text-2); }
.cn-msg { margin: 0; font-size: 12.5px; padding: 6px 10px; border-radius: 8px; }
.cn-msg.neg { background: var(--danger-soft); color: var(--danger); }
.cn-msg.warn { background: var(--warn-soft); color: var(--warn); }
.cn-chip { display: inline-block; font-size: 12px; padding: 1px 8px; margin: 1px 3px 1px 0; border-radius: 99px; background: var(--surface-3); }
.cn-reg td { vertical-align: top; }
.cn-reg td small { display: block; }
.cn-hist { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.cn-rv { display: flex; flex-direction: column; gap: 12px; }
.cn-rv-h { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.cn-rv-text { font-size: 16px; line-height: 1.6; margin: 0; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.cn-rv-parent summary { cursor: pointer; font-size: 12.5px; color: var(--text-3); }
.cn-rv-parent p { margin: 6px 0 0; font-size: 13px; color: var(--text-2); line-height: 1.5; border-left: 3px solid var(--line); padding-left: 10px; white-space: pre-wrap; overflow-wrap: anywhere; }
.cn-rv-ents { display: flex; flex-direction: column; gap: 8px; }
.cn-rv-ent { display: grid; grid-template-columns: minmax(140px, 200px) 1fr; gap: 6px 12px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); }
.cn-rv-name small { display: block; color: var(--text-3); font-size: 11.5px; }
.cn-rv-theirs { display: flex; flex-direction: column; font-size: 11.5px; color: var(--text-2); margin-top: 2px; }
.cn-rv-more { grid-column: 2; display: flex; gap: 6px; flex-wrap: wrap; }
.cn-seg { display: flex; flex-wrap: wrap; gap: 4px; }
.cn-seg button { border: 1px solid var(--line); background: var(--surface); border-radius: 8px; padding: 5px 10px; font: inherit; font-size: 12.5px; cursor: pointer; color: var(--text-2); }
.cn-seg button.on { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
.cn-seg button:focus-visible, .cn-tabs button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cn-dis ul { margin: 0; padding-left: 18px; }
.cn-cm .cn-diag { font-weight: 700; background: var(--surface-2); }
.cn-g-met { background: var(--ok-soft); color: var(--ok); }
.cn-g-not_demonstrated { background: var(--danger-soft); color: var(--danger); }
.cn-g-not_measurable { background: var(--warn-soft); color: var(--warn); }
.cn-form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cn-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--text-2); }
.cn-form label small { color: var(--text-3); }
.cn-form label:has(textarea), .cn-form label:last-child { grid-column: 1 / -1; }
@media (max-width: 640px) { .cn-rv-ent { grid-template-columns: 1fr; } .cn-rv-more { grid-column: 1; } .cn-form { grid-template-columns: 1fr; } }
/* Canonical → Sources (rework P3) */
.cn-src { display: flex; flex-direction: column; gap: 10px; }
.cn-src-h { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cn-src-h h3 { margin: 0; font-size: 15px; }
.cn-caps td { vertical-align: top; }
.cn-cap-supported { background: var(--ok-soft); color: var(--ok); }
.cn-cap-limited, .cn-cap-unknown { background: var(--warn-soft); color: var(--warn); }
.cn-cap-permission_required, .cn-cap-unavailable { background: var(--surface-3); color: var(--text-2); }
.cn-rc summary { cursor: pointer; font-size: 12.5px; color: var(--text-2); }
.cn-rc-row { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; padding: 8px 0; border-top: 1px solid var(--line); }
.cn-rc-row > div { flex-basis: 100%; }
.cn-rc-ev { display: flex; flex-wrap: wrap; gap: 4px 12px; color: var(--text-3); overflow-wrap: anywhere; }
.cn-out-complete_for_requested_scope { background: var(--ok-soft); color: var(--ok); }
.cn-out-partial_depth_limit, .cn-out-partial_quota, .cn-out-partial_permission, .cn-out-partial_deleted_or_hidden, .cn-out-no_items_observed { background: var(--warn-soft); color: var(--warn); }
.cn-out-blocked_auth, .cn-out-unavailable, .cn-out-failed_retryable { background: var(--danger-soft); color: var(--danger); }