/* Shared component contract. Colors belong to theme.css; layout belongs to pages. */
:root {
  --ui-font-sans: -apple-system-body, ui-sans-serif, -apple-system, system-ui, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, "Noto Sans CJK SC", "PingFang SC", "Microsoft YaHei", sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
  --ui-text-body: 16px;
  --ui-leading-body: 24px;
  --ui-text-control: 14px;
  --ui-leading-control: 20px;
  --ui-text-caption: 12px;
  --ui-leading-caption: 16px;
  --ui-weight-regular: 400;
  --ui-weight-medium: 500;
  --ui-weight-strong: 600;
  --ui-sidebar-width: 260px;
  --ui-nav-icon: 16px;
  --ui-nav-height: 36px;
  --sidebar: var(--ui-sidebar-width);
  font-family: var(--ui-font-sans);
  font-size: var(--ui-text-body);
  line-height: var(--ui-leading-body);
  --ui-space-1: 4px;
  --ui-space-2: 8px;
  --ui-space-3: 12px;
  --ui-space-4: 16px;
  --ui-space-6: 24px;
  --ui-space-8: 32px;
  --ui-control-sm: 32px;
  --ui-control-md: 40px;
  --ui-control-lg: 44px;
  --ui-tab-height: 36px;
  --ui-tab-hit-height: var(--ui-tab-height);
  --ui-tab-hit-inset: calc((var(--ui-tab-hit-height) - var(--ui-tab-height)) / 2);
  --ui-radius-sm: 8px;
  --ui-radius-control: 12px;
  --ui-radius-panel: 16px;
  --ui-radius-pill: 999px;
  --ui-duration: 140ms;
  --ui-ease: cubic-bezier(.2, 0, 0, 1);
}

/* Typography belongs to the shared layer, including legacy workspace consumers. */
body { font-family: var(--ui-font-sans); font-size: var(--ui-text-body); line-height: var(--ui-leading-body); font-weight: var(--ui-weight-regular); }
button, input, select, textarea { font-family: var(--ui-font-sans); }
.ui-text-body, .timeline-summary, .dt-reading-copy, .dt-reading-copy p { font-size: var(--ui-text-body); line-height: var(--ui-leading-body); font-weight: var(--ui-weight-regular); }
.ui-text-control { font-size: var(--ui-text-control); line-height: var(--ui-leading-control); font-weight: var(--ui-weight-regular); }
.ui-text-caption { font-size: var(--ui-text-caption); line-height: var(--ui-leading-caption); font-weight: var(--ui-weight-regular); }
.sidebar { --ui-nav-text: .875rem; --ui-nav-leading: 1.25rem; --ui-nav-caption: .75rem; --ui-nav-caption-leading: 1rem; --ui-nav-gap: 8px; }
:is(.public-body, .admin-body) .sidebar { --sidebar-bg: var(--nav-bg); --sidebar-hover: var(--nav-hover); padding-inline: 8px; background: var(--nav-bg); color: var(--nav-ink); }
.sidebar .sidebar-navigation { padding-inline-end: 0; }
:is(.public-body, .admin-body) .sidebar .nav-item,
.admin-body .admin-sidebar .admin-nav-group > summary,
.sidebar > .brand .brand-wordmark, .sidebar .reader-account-copy strong, .sidebar-foot > strong { color: var(--nav-ink); }
:is(.public-body, .admin-body) .sidebar .nav-item:hover,
:is(.public-body, .admin-body) .sidebar .nav-item.active { background: var(--nav-hover); color: var(--nav-ink); }
:is(.public-body, .admin-body) .sidebar .nav-item > span,
:is(.public-body, .admin-body) .sidebar .nav-item .nav-icon,
.admin-body .admin-sidebar .admin-nav-group > summary > .lucide { color: inherit; }
.sidebar > .brand { padding-inline: 10px; }
.sidebar .brand small { font-size: var(--ui-nav-caption); line-height: var(--ui-nav-caption-leading); font-weight: var(--ui-weight-regular); letter-spacing: normal; }
:is(.public-body, .admin-body) .sidebar .nav-item,
.admin-body .admin-sidebar .admin-nav-items .nav-item { min-height: var(--ui-nav-height); margin-block: 0; padding: 8px 10px; gap: var(--ui-nav-gap); font-size: var(--ui-nav-text); line-height: var(--ui-nav-leading); font-weight: var(--ui-weight-regular); }
:is(.public-body, .admin-body) .sidebar .nav-item > span:not(.nav-icon) { font-size: var(--ui-nav-text); line-height: var(--ui-nav-leading); font-weight: var(--ui-weight-regular); letter-spacing: -.2px; }
:is(.public-body, .admin-body) .sidebar .nav-item .nav-icon { width: var(--ui-nav-icon); height: var(--ui-nav-icon); flex: 0 0 var(--ui-nav-icon); }
.sidebar .sidebar-navigation .side-group { padding: 8px 10px 6px; font-size: var(--ui-nav-caption); line-height: var(--ui-nav-caption-leading); font-weight: var(--ui-weight-medium); letter-spacing: normal; }
.admin-body .admin-nav-group > summary { font-size: var(--ui-nav-text); line-height: var(--ui-nav-leading); font-weight: var(--ui-weight-medium); }
.admin-body .admin-nav-group > summary > small { font-size: var(--ui-nav-caption); line-height: var(--ui-nav-caption-leading); }
:is(.public-body, .admin-body) .sidebar > .sidebar-foot { padding-inline: 0; }
.sidebar .reader-account-card { padding: 8px 6px; gap: 4px; }
.sidebar .reader-account-avatar { width: 24px; height: 24px; font-size: var(--ui-nav-caption); }
.sidebar .reader-account-copy strong, .sidebar-foot > strong { font-size: var(--ui-nav-text); line-height: var(--ui-nav-leading); font-weight: var(--ui-weight-regular); }
.sidebar .reader-account-copy small, .sidebar-foot > small { font-size: var(--ui-nav-caption); line-height: var(--ui-nav-caption-leading); font-weight: var(--ui-weight-regular); }
.sidebar .reader-account-menu .reader-menu-item, .sidebar .reader-account-menu .language-switch a, .sidebar .reader-account-menu .appearance-options > button { font-size: var(--ui-nav-text); line-height: var(--ui-nav-leading); font-weight: var(--ui-weight-regular); }
.workspace-bar .workspace-breadcrumb { font-size: var(--ui-text-control); line-height: var(--ui-leading-control); }

/* Critical navigation uses the vendored Lucide paths without waiting for its script. */
.workspace-nav-toggle, .sidebar-close { color: var(--ink); }
.workspace-nav-toggle > :is(i, svg), .sidebar-close > :is(i, svg) { display: none; }
.workspace-nav-toggle::before, .sidebar-close::before,
.ui-navigation-icon::before, .sidebar .reader-account-avatar:not(.signed-in)::before, .sidebar .reader-account-card::after {
  content: "";
  display: block;
  width: var(--ui-navigation-size, 18px);
  height: var(--ui-navigation-size, 18px);
  background-color: currentColor;
  -webkit-mask: var(--ui-navigation-icon) center / contain no-repeat;
  mask: var(--ui-navigation-icon) center / contain no-repeat;
}
.workspace-nav-toggle { --ui-navigation-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='18' x='3' y='3' rx='2'/%3E%3Cpath d='M9 3v18'/%3E%3C/svg%3E"); }
.sidebar-close { --ui-navigation-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='18' x='3' y='3' rx='2'/%3E%3Cpath d='M9 3v18'/%3E%3Cpath d='m16 15-3-3 3-3'/%3E%3C/svg%3E"); }
@media (max-width: 820px) {
  :is(.public-body, .admin-body) .mobile-header { padding-block: 4px; }
  .mobile-header .workspace-nav-toggle { width: 44px; min-height: 44px; padding: 12px; flex: 0 0 44px; }
  .sidebar-close { width: 44px; min-height: 44px; top: 8px; right: 8px; }
  .mobile-header .workspace-nav-toggle::before, .sidebar-close::before { width: 20px; height: 20px; }
}

/* Public navigation and account icons share the same script-independent renderer. */
.sidebar .ui-navigation-icon { --ui-navigation-size: var(--ui-nav-icon); display: inline-grid; place-items: center; width: var(--ui-nav-icon); height: var(--ui-nav-icon); flex: 0 0 var(--ui-nav-icon); }
.sidebar .reader-account-avatar:not(.signed-in), .sidebar .reader-account-card::after { --ui-navigation-size: var(--ui-nav-icon); color: var(--nav-ink); }
.sidebar .reader-account-avatar:not(.signed-in) > :is(i, svg), .sidebar .reader-account-chevron { display: none; }
.sidebar .reader-account-card::after { flex: 0 0 var(--ui-nav-icon); }
.sidebar > .brand, .sidebar > .sidebar-foot { flex-shrink: 0; }
.sidebar .nav-item:focus-visible { outline: 2px solid var(--nav-ink); outline-offset: -2px; }
:is(.public-body, .admin-body) .sidebar .nav-item > span:not(.nav-icon) { width: auto; min-width: 0; flex: 1; text-align: left; white-space: normal; overflow-wrap: anywhere; }
.sidebar .reader-account-copy :is(strong, small), .sidebar .reader-menu-label { white-space: normal; overflow: visible; overflow-wrap: anywhere; }
.sidebar .reader-account-menu :is(.reader-menu-item, .language-switch a, .appearance-options > button) { height: auto; }
.sidebar .reader-menu-icon, .sidebar .reader-menu-icon svg { width: var(--ui-nav-icon); height: var(--ui-nav-icon); stroke-width: 1.8; }
.sidebar .reader-menu-value { font-size: var(--ui-nav-caption); line-height: var(--ui-nav-caption-leading); }
[data-ui-navigation-icon="sparkles"] { --ui-navigation-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M11.017%202.814a1%201%200%200%201%201.966%200l1.051%205.558a2%202%200%200%200%201.594%201.594l5.558%201.051a1%201%200%200%201%200%201.966l-5.558%201.051a2%202%200%200%200-1.594%201.594l-1.051%205.558a1%201%200%200%201-1.966%200l-1.051-5.558a2%202%200%200%200-1.594-1.594l-5.558-1.051a1%201%200%200%201%200-1.966l5.558-1.051a2%202%200%200%200%201.594-1.594z%22%2F%3E%3Cpath%20d%3D%22M20%202v4%22%2F%3E%3Cpath%20d%3D%22M22%204h-4%22%2F%3E%3Ccircle%20cx%3D%224%22%20cy%3D%2220%22%20r%3D%222%22%2F%3E%3C%2Fsvg%3E"); }
[data-ui-navigation-icon="list"] { --ui-navigation-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%205h.01%22%2F%3E%3Cpath%20d%3D%22M3%2012h.01%22%2F%3E%3Cpath%20d%3D%22M3%2019h.01%22%2F%3E%3Cpath%20d%3D%22M8%205h13%22%2F%3E%3Cpath%20d%3D%22M8%2012h13%22%2F%3E%3Cpath%20d%3D%22M8%2019h13%22%2F%3E%3C%2Fsvg%3E"); }
[data-ui-navigation-icon="building-2"] { --ui-navigation-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M10%2012h4%22%2F%3E%3Cpath%20d%3D%22M10%208h4%22%2F%3E%3Cpath%20d%3D%22M14%2021v-3a2%202%200%200%200-4%200v3%22%2F%3E%3Cpath%20d%3D%22M6%2010H4a2%202%200%200%200-2%202v7a2%202%200%200%200%202%202h16a2%202%200%200%200%202-2V9a2%202%200%200%200-2-2h-2%22%2F%3E%3Cpath%20d%3D%22M6%2021V5a2%202%200%200%201%202-2h8a2%202%200%200%201%202%202v16%22%2F%3E%3C%2Fsvg%3E"); }
[data-ui-navigation-icon="clock"] { --ui-navigation-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Cpath%20d%3D%22M12%206v6l4%202%22%2F%3E%3C%2Fsvg%3E"); }
[data-ui-navigation-icon="newspaper"] { --ui-navigation-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M15%2018h-5%22%2F%3E%3Cpath%20d%3D%22M18%2014h-8%22%2F%3E%3Cpath%20d%3D%22M4%2022h16a2%202%200%200%200%202-2V4a2%202%200%200%200-2-2H8a2%202%200%200%200-2%202v16a2%202%200%200%201-4%200v-9a2%202%200%200%201%202-2h2%22%2F%3E%3Crect%20width%3D%228%22%20height%3D%224%22%20x%3D%2210%22%20y%3D%226%22%20rx%3D%221%22%2F%3E%3C%2Fsvg%3E"); }
[data-ui-navigation-icon="flame"] { --ui-navigation-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203q1%204%204%206.5t3%205.5a1%201%200%200%201-14%200%205%205%200%200%201%201-3%201%201%200%200%200%205%200c0-2-1.5-3-1.5-5q0-2%202.5-4%22%2F%3E%3C%2Fsvg%3E"); }
[data-ui-navigation-icon="git-branch"] { --ui-navigation-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M15%206a9%209%200%200%200-9%209V3%22%2F%3E%3Ccircle%20cx%3D%2218%22%20cy%3D%226%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%226%22%20cy%3D%2218%22%20r%3D%223%22%2F%3E%3C%2Fsvg%3E"); }
[data-ui-navigation-icon="activity"] { --ui-navigation-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M22%2012h-2.48a2%202%200%200%200-1.93%201.46l-2.35%208.36a.25.25%200%200%201-.48%200L9.24%202.18a.25.25%200%200%200-.48%200l-2.35%208.36A2%202%200%200%201%204.49%2012H2%22%2F%3E%3C%2Fsvg%3E"); }
[data-ui-navigation-icon="messages-square"] { --ui-navigation-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M16%2010a2%202%200%200%201-2%202H6.828a2%202%200%200%200-1.414.586l-2.202%202.202A.71.71%200%200%201%202%2014.286V4a2%202%200%200%201%202-2h10a2%202%200%200%201%202%202z%22%2F%3E%3Cpath%20d%3D%22M20%209a2%202%200%200%201%202%202v10.286a.71.71%200%200%201-1.212.502l-2.202-2.202A2%202%200%200%200%2017.172%2019H10a2%202%200%200%201-2-2v-1%22%2F%3E%3C%2Fsvg%3E"); }
[data-ui-navigation-icon="shapes"] { --ui-navigation-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M8.3%2010a.7.7%200%200%201-.626-1.079L11.4%203a.7.7%200%200%201%201.198-.043L16.3%208.9a.7.7%200%200%201-.572%201.1Z%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%2214%22%20width%3D%227%22%20height%3D%227%22%20rx%3D%221%22%2F%3E%3Ccircle%20cx%3D%2217.5%22%20cy%3D%2217.5%22%20r%3D%223.5%22%2F%3E%3C%2Fsvg%3E"); }
[data-ui-navigation-icon="calendar-days"] { --ui-navigation-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M8%202v3%22%2F%3E%3Cpath%20d%3D%22M16%202v3%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%223%22%20width%3D%2218%22%20height%3D%2218%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M3%209h18%22%2F%3E%3Cpath%20d%3D%22M8%2013h.01%22%2F%3E%3Cpath%20d%3D%22M12%2013h.01%22%2F%3E%3Cpath%20d%3D%22M16%2013h.01%22%2F%3E%3Cpath%20d%3D%22M8%2017h.01%22%2F%3E%3Cpath%20d%3D%22M12%2017h.01%22%2F%3E%3Cpath%20d%3D%22M16%2017h.01%22%2F%3E%3C%2Fsvg%3E"); }
[data-ui-navigation-icon="briefcase-business"] { --ui-navigation-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2012h.01%22%2F%3E%3Cpath%20d%3D%22M16%206V4a2%202%200%200%200-2-2h-4a2%202%200%200%200-2%202v2%22%2F%3E%3Cpath%20d%3D%22M22%2013a18.15%2018.15%200%200%201-20%200%22%2F%3E%3Crect%20width%3D%2220%22%20height%3D%2214%22%20x%3D%222%22%20y%3D%226%22%20rx%3D%222%22%2F%3E%3C%2Fsvg%3E"); }
[data-ui-navigation-icon="timer-reset"] { --ui-navigation-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M10%202h4%22%2F%3E%3Cpath%20d%3D%22M12%2014v-4%22%2F%3E%3Cpath%20d%3D%22M4%2013a8%208%200%200%201%208-7%208%208%200%201%201-5.3%2014L4%2017.6%22%2F%3E%3Cpath%20d%3D%22M9%2017H4v5%22%2F%3E%3C%2Fsvg%3E"); }
[data-ui-navigation-icon="panels-top-left"] { --ui-navigation-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20width%3D%2218%22%20height%3D%2218%22%20x%3D%223%22%20y%3D%223%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M3%209h18%22%2F%3E%3Cpath%20d%3D%22M9%2021V9%22%2F%3E%3C%2Fsvg%3E"); }
[data-ui-navigation-icon="heart"] { --ui-navigation-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M2%209.5a5.5%205.5%200%200%201%209.591-3.676.56.56%200%200%200%20.818%200A5.49%205.49%200%200%201%2022%209.5c0%202.29-1.5%204-3%205.5l-5.492%205.313a2%202%200%200%201-3%20.019L5%2015c-1.5-1.5-3-3.2-3-5.5%22%2F%3E%3C%2Fsvg%3E"); }
[data-ui-navigation-icon="bookmark"] { --ui-navigation-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M17%203a2%202%200%200%201%202%202v15a1%201%200%200%201-1.496.868l-4.512-2.578a2%202%200%200%200-1.984%200l-4.512%202.578A1%201%200%200%201%205%2020V5a2%202%200%200%201%202-2z%22%2F%3E%3C%2Fsvg%3E"); }
[data-ui-navigation-icon="thumbs-up"] { --ui-navigation-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M15%205.88%2014%2010h5.83a2%202%200%200%201%201.92%202.56l-2.33%208A2%202%200%200%201%2017.5%2022H4a2%202%200%200%201-2-2v-8a2%202%200%200%201%202-2h2.76a2%202%200%200%200%201.79-1.11L12%202a3.13%203.13%200%200%201%203%203.88Z%22%2F%3E%3Cpath%20d%3D%22M7%2010v12%22%2F%3E%3C%2Fsvg%3E"); }
[data-ui-navigation-icon="folder-heart"] { --ui-navigation-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M10.638%2020H4a2%202%200%200%201-2-2V5a2%202%200%200%201%202-2h3.9a2%202%200%200%201%201.69.9l.81%201.2a2%202%200%200%200%201.67.9H20a2%202%200%200%201%202%202v3.417%22%2F%3E%3Cpath%20d%3D%22M14.62%2018.8A2.25%202.25%200%201%201%2018%2015.836a2.25%202.25%200%201%201%203.38%202.966l-2.626%202.856a.998.998%200%200%201-1.507%200z%22%2F%3E%3C%2Fsvg%3E"); }
[data-ui-navigation-icon="user-round"], .sidebar .reader-account-avatar:not(.signed-in) { --ui-navigation-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%228%22%20r%3D%225%22%2F%3E%3Cpath%20d%3D%22M20%2021a8%208%200%200%200-16%200%22%2F%3E%3C%2Fsvg%3E"); }
[data-ui-navigation-icon="chevrons-up-down"], .sidebar .reader-account-card { --ui-navigation-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m7%2015%205%205%205-5%22%2F%3E%3Cpath%20d%3D%22m7%209%205-5%205%205%22%2F%3E%3C%2Fsvg%3E"); }
[data-ui-navigation-icon="log-in"] { --ui-navigation-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m10%2017%205-5-5-5%22%2F%3E%3Cpath%20d%3D%22M15%2012H3%22%2F%3E%3Cpath%20d%3D%22M15%203h4a2%202%200%200%201%202%202v14a2%202%200%200%201-2%202h-4%22%2F%3E%3C%2Fsvg%3E"); }
[data-ui-navigation-icon="mail"] { --ui-navigation-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m22%207-8.991%205.727a2%202%200%200%201-2.009%200L2%207%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%224%22%20width%3D%2220%22%20height%3D%2216%22%20rx%3D%222%22%2F%3E%3C%2Fsvg%3E"); }
[data-ui-navigation-icon="badge-check"] { --ui-navigation-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3.85%208.62a4%204%200%200%201%204.78-4.77%204%204%200%200%201%206.74%200%204%204%200%200%201%204.78%204.78%204%204%200%200%201%200%206.74%204%204%200%200%201-4.77%204.78%204%204%200%200%201-6.75%200%204%204%200%200%201-4.78-4.77%204%204%200%200%201%200-6.76Z%22%2F%3E%3Cpath%20d%3D%22m16%209-5.5%205.5L8%2012%22%2F%3E%3C%2Fsvg%3E"); }
[data-ui-navigation-icon="credit-card"] { --ui-navigation-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20width%3D%2220%22%20height%3D%2214%22%20x%3D%222%22%20y%3D%225%22%20rx%3D%222%22%2F%3E%3Cline%20x1%3D%222%22%20x2%3D%2222%22%20y1%3D%2210%22%20y2%3D%2210%22%2F%3E%3Cpath%20d%3D%22M6%2014h2%22%2F%3E%3C%2Fsvg%3E"); }
[data-ui-navigation-icon="circle-dot"] { --ui-navigation-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%221%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3C%2Fsvg%3E"); }
[data-ui-navigation-icon="circle-help"] { --ui-navigation-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Cpath%20d%3D%22M9.09%209a3%203%200%200%201%205.83%201c0%202-3%203-3%203%22%2F%3E%3Cpath%20d%3D%22M12%2017h.01%22%2F%3E%3C%2Fsvg%3E"); }
[data-ui-navigation-icon="languages"] { --ui-navigation-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m5%208%206%206%22%2F%3E%3Cpath%20d%3D%22m4%2014%206-6%202-3%22%2F%3E%3Cpath%20d%3D%22M2%205h12%22%2F%3E%3Cpath%20d%3D%22M7%202h1%22%2F%3E%3Cpath%20d%3D%22m22%2022-5-10-5%2010%22%2F%3E%3Cpath%20d%3D%22M14%2018h6%22%2F%3E%3C%2Fsvg%3E"); }
[data-ui-navigation-icon="check"] { --ui-navigation-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%206%209%2017l-5-5%22%2F%3E%3C%2Fsvg%3E"); }
[data-ui-navigation-icon="log-out"] { --ui-navigation-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m16%2017%205-5-5-5%22%2F%3E%3Cpath%20d%3D%22M21%2012H9%22%2F%3E%3Cpath%20d%3D%22M9%2021H5a2%202%200%200%201-2-2V5a2%202%200%200%201%202-2h4%22%2F%3E%3C%2Fsvg%3E"); }
@media (max-width: 820px) {
  .sidebar { --ui-nav-text: 1.0625rem; --ui-nav-leading: 1.5rem; --ui-nav-caption: .8125rem; --ui-nav-caption-leading: 1.25rem; --ui-nav-icon: 20px; --ui-nav-gap: 12px; }
  .sidebar .reader-account-card { gap: 8px; }
  .sidebar .reader-account-avatar { width: 28px; height: 28px; }
}

/* Content cards: one surface and typography contract, independent of scenario. */
:root {
  --ui-card-padding: 20px;
  --ui-card-title-size: 18px;
  --ui-card-title-leading: 28px;
}
[data-ui-content-card].unified-card {
  min-width: 0;
  margin: 0;
  padding: var(--ui-card-padding);
  border: 1px solid var(--line);
  border-radius: var(--ui-radius-panel);
  background: var(--paper);
  color: var(--ink);
  box-shadow: none;
  transform: none;
  overflow-wrap: anywhere;
  transition: border-color var(--ui-duration) var(--ui-ease);
}
[data-ui-content-card].unified-card:hover { border: 1px solid var(--line-strong); background: var(--paper); box-shadow: none; transform: none; }
.timeline-item > .timeline-card.timeline-card-shell { min-width: 0; padding-bottom: var(--ui-space-3); }
[data-ui-content-card] .timeline-card-head { align-items: flex-start; gap: var(--ui-space-2); }
[data-ui-content-card] .timeline-head-left { flex: 1; min-width: 0; gap: var(--ui-space-2); align-items: center; flex-wrap: wrap; }
[data-ui-content-card] .timeline-head-right { gap: var(--ui-space-2); }
[data-ui-content-card] .timeline-source { color: var(--secondary); font-size: var(--ui-text-caption); line-height: var(--ui-leading-caption); font-weight: var(--ui-weight-medium); overflow-wrap: anywhere; }
[data-ui-content-card] :is(.translation-badge, .timeline-selected-badge, .badge.demo) { max-width: 100%; padding: 3px 8px; border-radius: var(--ui-radius-pill); font-size: var(--ui-text-caption); line-height: var(--ui-leading-caption); font-weight: var(--ui-weight-medium); white-space: normal; }
[data-ui-content-card] :is(.timeline-title, .uc-x-title) { margin: var(--ui-space-3) 0 var(--ui-space-2); color: var(--ink); font-size: var(--ui-card-title-size); line-height: var(--ui-card-title-leading); font-weight: var(--ui-weight-strong); overflow-wrap: anywhere; }
[data-ui-content-card] .timeline-summary { padding: 0; margin: var(--ui-space-2) 0 0; color: var(--secondary); font-size: var(--ui-text-body); line-height: var(--ui-leading-body); font-weight: var(--ui-weight-regular); }
[data-ui-content-card] .timeline-divider { margin: var(--ui-space-3) 0 0; border: 0; }
[data-ui-content-card] .timeline-reason { margin: 0; padding: var(--ui-space-3); border: 0; border-radius: var(--ui-radius-sm); background: var(--raised); color: var(--muted); font-size: var(--ui-text-control); line-height: var(--ui-leading-control); }
[data-ui-content-card].unified-card:has(> .reader-feedback-row) { padding-bottom: var(--ui-space-3); }
[data-ui-content-card] .reader-feedback-row { margin: var(--ui-space-3) 0 0; padding: 0; border: 0; }
[data-ui-content-card] .reader-feedback-actions { gap: var(--ui-space-2); }
[data-ui-content-card] .reader-useful {
  min-height: var(--ui-control-sm);
  margin: 0;
  padding: 5px 12px;
  gap: 6px;
  border: 1px solid var(--line-strong);
  border-radius: var(--ui-radius-pill);
  background: var(--paper);
  color: var(--ink);
  font-size: 13px;
  font-weight: var(--ui-weight-medium);
  line-height: var(--ui-leading-control);
}
[data-ui-content-card] .reader-useful:hover { border-color: var(--line-strong); background: var(--raised); }
[data-ui-content-card] .reader-useful[aria-pressed="true"] { border-color: var(--ink); background: var(--raised); }
[data-ui-content-card] .reader-useful .lucide { flex: 0 0 16px; }
[data-ui-content-card] .reader-feedback-count { font-size: var(--ui-text-caption); }
[data-ui-content-card] .event-reading { margin-top: var(--ui-space-3); font-size: var(--ui-text-control); line-height: var(--ui-leading-control); }
[data-ui-content-card] details.event-reading > summary { cursor: pointer; padding-block: 6px; }
[data-ui-content-card] :is(a, button, summary):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (max-width: 820px) {
  :root { --ui-card-padding: 16px; --ui-card-title-size: 16px; --ui-card-title-leading: 24px; }
  .public-body .timeline-list { gap: 0; }
}
@media (max-width: 820px), (pointer: coarse) {
  [data-ui-content-card] .timeline-star { width: 44px; height: 44px; }
  [data-ui-content-card] .reader-useful, [data-ui-content-card] details.event-reading > summary { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) { [data-ui-content-card].unified-card { transition: none; } }

/* X source posts: shared layout, distinct from AInews editorial copy. */
.x-post { min-width: 0; color: var(--x-ink); font-family: var(--ui-font-sans); text-align: start; }
[data-ui-content-card].unified-card[data-x-surface], .x-post[data-x-surface] {
  min-width: 0; margin: 0; padding: var(--ui-card-padding); border: 1px solid var(--x-line);
  border-radius: var(--ui-radius-panel); background: var(--x-bg); color: var(--x-ink); box-shadow: none; transform: none;
}
[data-ui-content-card][data-x-surface] > .timeline-card-head { margin-bottom: 12px; }
.x-post .x-post-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin: 0 0 12px; padding: 0; }
.x-post .x-post-identity { display: flex; align-items: center; min-width: 0; gap: 10px; }
.x-post .x-post-avatar { display: grid; place-items: center; flex: 0 0 40px; width: 40px; height: 40px; overflow: hidden; border-radius: 50%; background: var(--raised); color: var(--x-muted); }
.x-post .x-post-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.x-post .x-post-avatar .lucide { width: 22px; height: 22px; }
.x-post .x-post-names { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.x-post .x-post-author { margin: 0; padding: 0; color: var(--x-ink); font-size: 15px; font-weight: 700; line-height: 20px; overflow-wrap: anywhere; text-decoration: none; }
.x-post a.x-post-author:hover { text-decoration: underline; }
.x-post .x-post-handle { color: var(--x-muted); font-size: 15px; line-height: 20px; overflow-wrap: anywhere; }
.x-post .x-post-brand { display: grid; place-items: center; flex: 0 0 36px; min-height: 36px; border-radius: var(--ui-radius-pill); color: var(--x-ink); }
.x-post .x-post-brand svg { width: 22px; height: 22px; }
.x-post .x-post-text, .x-post .x-post-text p { margin: 0; padding: 0; border: 0; color: var(--x-ink); font-size: 16px; font-weight: 400; line-height: 24px; letter-spacing: normal; white-space: pre-wrap; overflow-wrap: anywhere; }
.x-post .x-post-text p + p { margin-top: 12px; }
.x-post .x-post-text a, .x-post .x-post-context-link { color: var(--x-link); text-decoration: none; }
.x-post .x-post-text a:hover, .x-post .x-post-context-link:hover { text-decoration: underline; }
.x-post .x-post-notice { margin: 12px 0; font-size: 14px; line-height: 20px; color: var(--x-muted); }
.x-post .x-post-language, .x-post .x-post-label { display: block; margin: 0 0 10px; font-size: 12px; line-height: 18px; color: var(--x-muted); }
.x-post .x-post-label { width: fit-content; padding: 3px 8px; border: 1px solid var(--x-line); border-radius: var(--ui-radius-pill); }
.x-post [data-x-media] { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 2px; margin: 12px 0 0; overflow: hidden; border: 1px solid var(--x-line); border-radius: 16px; aspect-ratio: 16 / 9; }
.x-post .x-post-media-cell { display: block; padding: 0; margin: 0; border: 0; min-width: 0; min-height: 0; overflow: hidden; background: var(--raised); cursor: zoom-in; }
.x-post [data-x-media] img { display: block; width: 100%; height: 100%; object-fit: cover; }
.x-post [data-x-media][data-count="1"] { grid-template-columns: minmax(0,1fr); aspect-ratio: auto; }
.x-post [data-x-media][data-count="1"] img { height: auto; max-height: 560px; object-fit: contain; }
.x-post [data-x-media][data-count="3"] { grid-template-rows: repeat(2,minmax(0,1fr)); }
.x-post [data-x-media][data-count="3"] > :first-child { grid-row: span 2; }
.x-post [data-x-media][data-count="4"] { grid-template-rows: repeat(2,minmax(0,1fr)); }
.x-post .x-post-quote { display: block; margin: 12px 0 0; padding: 12px; min-width: 0; border: 1px solid var(--x-line); border-radius: 16px; background: transparent; color: var(--x-ink); }
.x-post .x-post-quote figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; margin: 0 0 6px; color: var(--x-muted); font-size: 14px; line-height: 20px; overflow-wrap: anywhere; }
.x-post .x-post-quote figcaption strong { color: var(--x-ink); font-size: inherit; font-weight: 700; }
.x-post .x-post-relation { flex-basis: 100%; font-size: 12px; }
.x-post .x-post-quote blockquote { padding: 0; margin: 0; border: 0; background: transparent; color: var(--x-ink); font-size: 16px; font-weight: 400; line-height: 24px; white-space: pre-wrap; overflow-wrap: anywhere; }
.x-post .x-post-context-link { display: inline-flex; align-items: center; margin-top: 8px; min-height: 32px; font-size: 13px; line-height: 20px; }
.x-post .x-post-translation { margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--x-line); color: var(--x-muted); }
.x-post .x-post-translation summary { display: list-item; width: fit-content; font-size: 13px; line-height: 20px; cursor: pointer; color: var(--x-link); }
.x-post .x-post-translation p { margin: 8px 0 0; padding: 0; color: var(--x-ink); font-size: 16px; font-weight: 400; line-height: 24px; white-space: pre-wrap; overflow-wrap: anywhere; }
.x-post .x-post-date { margin: 12px 0 0; color: var(--x-muted); font-size: 13px; line-height: 20px; overflow-wrap: anywhere; }
.x-post .x-post-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px; margin: 12px 0 0; padding: 8px 0 0; border-top: 1px solid var(--x-line); }
.x-post .x-post-actions a { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; color: var(--x-muted); font-size: 13px; line-height: 20px; text-decoration: none; }
.x-post .x-post-actions .lucide { width: 18px; height: 18px; }
.x-post .x-post-actions a:hover { color: var(--x-link); }
.x-post :is(a,button,summary):focus-visible { outline: 2px solid var(--x-link); outline-offset: 3px; }
[data-x-surface] .x-post-editorial { margin: 12px 0; font-size: 14px; line-height: 20px; }
[data-x-surface] .x-post-editorial summary { cursor: pointer; color: var(--muted); }
[data-x-surface] .x-post-editorial .uc-x-title { font-size: 16px; line-height: 24px; }
@media (max-width: 820px), (pointer: coarse) {
  .x-post .x-post-actions a, .x-post .x-post-brand, .x-post .x-post-context-link, .x-post .x-post-translation summary, [data-x-surface] .x-post-editorial summary { min-height: 44px; }
  .x-post .x-post-translation summary, [data-x-surface] .x-post-editorial summary { align-content: center; }
}

/* Existing .button consumers use the same foundation as new templates. */
:is(.ui-button, .button) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ui-space-2);
  min-height: var(--ui-control-md);
  max-width: 100%;
  padding: 8px 16px;
  border: 1px solid var(--line-strong);
  border-radius: var(--ui-radius-pill);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  font-weight: 550;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  vertical-align: middle;
  transition: background-color var(--ui-duration) var(--ui-ease), border-color var(--ui-duration) var(--ui-ease), color var(--ui-duration) var(--ui-ease);
}
:is(.ui-button, .button):hover { background: var(--raised); border-color: var(--line-strong); color: var(--ink); }
:is(.ui-button--primary, .button.primary) { background: var(--accent-solid); color: var(--on-accent); border-color: var(--accent-solid); }
:is(.ui-button--primary, .button.primary):hover { background: var(--secondary); border-color: var(--secondary); color: var(--on-accent); filter: none; }
.ui-button--soft { background: var(--raised); border-color: transparent; }
.ui-button--soft:hover { background: var(--sidebar-hover); border-color: transparent; }
.ui-button--ghost { background: transparent; border-color: transparent; }
.ui-button--ghost:hover { background: var(--raised); border-color: transparent; }
:is(.ui-button--danger, .button.danger) { color: var(--danger-ink); border-color: var(--danger-line); background: transparent; }
:is(.ui-button--danger, .button.danger):hover { color: var(--danger-ink); background: var(--danger-bg); border-color: var(--danger-line); }
:is(.ui-button--sm, .button.small) { min-height: var(--ui-control-sm); padding: 5px 12px; font-size: 13px; }
.ui-button--lg { min-height: var(--ui-control-lg); padding: 10px 20px; }
.ui-button--icon { width: var(--ui-control-md); min-width: var(--ui-control-md); padding: 8px; flex-shrink: 0; }
.ui-button--icon.ui-button--sm { width: var(--ui-control-sm); min-width: var(--ui-control-sm); }
:is(.ui-button, .button) :is(svg, .lucide) { width: 18px; height: 18px; flex-shrink: 0; }
:is(.ui-button, .button):is(:disabled, [aria-disabled="true"]) { opacity: .45; cursor: not-allowed; pointer-events: none; }
:is(.ui-button, .button)[aria-busy="true"] { opacity: 1; cursor: progress; }
:is(.ui-button, .button):active:not(:disabled):not([aria-disabled="true"]) { filter: brightness(.94); }
:is(.ui-button, .button, .ui-chip, .ui-tab, .ui-menu summary, .ui-menu-item, .ui-input):focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.ui-spinner { display: inline-block; width: 16px; height: 16px; flex: 0 0 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: ui-spin .8s linear infinite; }
.ui-button > .ui-spinner { width: 18px; height: 18px; flex-basis: 18px; }
@keyframes ui-spin { to { transform: rotate(360deg); } }

/* Link navigation keeps native navigation semantics; in-page tabs opt into JS. */
.ui-tabs { display: flex; align-items: center; gap: var(--ui-space-1); max-width: 100%; min-width: 0; overflow-x: auto; overscroll-behavior-x: contain; padding: 4px; scrollbar-width: thin; }
.ui-tabs--segmented { width: fit-content; border-radius: var(--ui-radius-pill); background: var(--raised); }
.ui-tab { display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: 0 0 auto; min-height: 36px; padding: 7px 16px; border: 1px solid transparent; border-radius: var(--ui-radius-pill); background: transparent; color: var(--secondary); font: inherit; font-size: 14px; font-weight: 500; line-height: 1.5; white-space: nowrap; cursor: pointer; }
.ui-tab:hover { color: var(--ink); background: var(--sidebar-hover); }
.ui-tab:is([aria-selected="true"], [aria-current="page"]) { background: var(--paper); color: var(--ink); border-color: var(--line-strong); font-weight: 650; }
.ui-tabs .ui-tab:focus-visible { outline-offset: -3px; }
.ui-tabs--pills { padding: 4px 0; gap: 8px; }
.ui-tabs--pills .ui-tab { border-color: var(--line-strong); }
.ui-tabs--pills .ui-tab:is([aria-selected="true"], [aria-current="page"]) { background: var(--raised); border-color: var(--ink); }
.ui-tab:disabled { opacity: .45; cursor: not-allowed; }
.ui-panel { padding-block: 16px; }

/* Shared feed tabs, including the existing separate edit action. */
.source-tabs { gap: 8px; padding-block: 4px; }
/* Paint a standard 36px pill inside the larger touch target. */
.source-tabs a { --ui-tab-fill: transparent; --ui-tab-stroke: var(--line-strong); position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex-shrink: 0; min-height: var(--ui-tab-hit-height); padding: 6px 14px; border: 0; border-radius: var(--ui-radius-pill); background: transparent; color: var(--secondary); font-size: 13px; line-height: 1.5; }
.source-tabs a::before, .source-tabs .custom-channel-tab-group::before { content: ""; position: absolute; z-index: -1; box-sizing: border-box; inset: var(--ui-tab-hit-inset) 0; border: 1px solid var(--ui-tab-stroke); border-radius: inherit; background: var(--ui-tab-fill); pointer-events: none; }
.source-tabs a:hover { --ui-tab-fill: var(--raised); background: transparent; color: var(--ink); }
.source-tabs a.active { --ui-tab-fill: var(--raised); --ui-tab-stroke: var(--ink); background: transparent; color: var(--ink); font-weight: 650; }
.source-tabs a:focus-visible { outline: 0; }
.source-tabs a:focus-visible::before { outline: 2px solid var(--ink); outline-offset: -3px; }
.source-tabs .custom-channel-pill { border: 0; }
.source-tabs .custom-channel-tab-group { --ui-tab-fill: var(--raised); --ui-tab-stroke: var(--ink); position: relative; isolation: isolate; border: 0; border-radius: var(--ui-radius-pill); background: transparent; }
.source-tabs .custom-channel-tab-group > a { --ui-tab-fill: transparent; --ui-tab-stroke: transparent; border: 0; background: transparent; }
.source-tabs .custom-channel-tab-group > .custom-channel-tab-edit { min-height: var(--ui-tab-hit-height); margin-inline-end: 3px; }
.source-tabs .custom-channel-tab-group > .custom-channel-tab-edit:hover { --ui-tab-fill: var(--sidebar-hover); background: transparent; }
.channel-tag-modes { gap: 4px; padding: 4px; border: 0; border-radius: var(--ui-radius-pill); background: var(--raised); }
:is(.channel-tag-modes, .channel-create-dialog .channel-tag-modes) button { min-height: 36px; padding: 7px 14px; border: 1px solid transparent; border-radius: var(--ui-radius-pill); font-size: 13px; }
.channel-tag-modes button[aria-selected="true"] { background: var(--paper); border-color: var(--line-strong); color: var(--ink); }
.channel-tag-modes button:focus-visible { outline-offset: -3px; }
.feed-page:not(.people-feed) .custom-channel-add { --ui-tab-fill: var(--raised); position: relative; isolation: isolate; width: var(--ui-tab-hit-height); height: var(--ui-tab-hit-height); border: 0; border-radius: var(--ui-radius-pill); background: transparent; color: var(--secondary); }
.feed-page:not(.people-feed) .custom-channel-add::before { content: ""; position: absolute; z-index: -1; inset: var(--ui-tab-hit-inset); border-radius: inherit; background: var(--ui-tab-fill); pointer-events: none; }
.feed-page:not(.people-feed) .custom-channel-add:hover { --ui-tab-fill: var(--sidebar-hover); background: transparent; color: var(--ink); }
.feed-page:not(.people-feed) .custom-channel-add:focus-visible { outline: 0; }
.feed-page:not(.people-feed) .custom-channel-add:focus-visible::before { outline: 2px solid var(--ink); outline-offset: -3px; }
.feed-page:not(.people-feed) .custom-channel-add .lucide { width: 18px; height: 18px; }

.ui-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 5px 12px; border: 1px solid var(--line-strong); border-radius: var(--ui-radius-pill); background: transparent; color: var(--secondary); font: inherit; font-size: 13px; line-height: 1.5; cursor: pointer; }
.ui-chip:hover { background: var(--raised); color: var(--ink); }
.ui-chip[aria-pressed="true"] { border-color: var(--ink); background: var(--raised); color: var(--ink); }
.ui-chip svg { width: 14px; height: 14px; }
.ui-chip .ui-chip-check { visibility: hidden; }
.ui-chip[aria-pressed="true"] .ui-chip-check { visibility: visible; }
.ui-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: var(--ui-radius-pill); background: var(--raised); color: var(--secondary); font-size: 12px; font-weight: 500; line-height: 1.5; }
.ui-badge--success { background: var(--success-bg); color: var(--success-ink); }
.ui-badge--warning { background: var(--warning-bg); color: var(--warning-ink); }
.ui-badge--danger { background: var(--danger-bg); color: var(--danger-ink); }
.ui-badge svg { width: 13px; height: 13px; }

.ui-field { display: grid; gap: 8px; min-width: 0; }
.ui-field label { font-size: 14px; font-weight: 550; }
.ui-field .ui-input, .ui-input { width: 100%; min-width: 0; min-height: var(--ui-control-lg); margin: 0; padding: 10px 14px; border: 1px solid var(--control-border); border-radius: var(--ui-radius-control); background: var(--paper); color: var(--ink); font: inherit; font-size: 14px; line-height: 1.5; }
.ui-input::placeholder { color: var(--muted); opacity: 1; }
.ui-input:hover { border-color: var(--secondary); }
.ui-input[aria-invalid="true"] { border-color: var(--danger-ink); }
.ui-input:disabled { background: var(--raised); color: var(--muted); cursor: not-allowed; }
.ui-field-help { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.ui-field-error { color: var(--danger-ink); }
.ui-check { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 14px; font-weight: 400; cursor: pointer; }
.ui-check input[type="checkbox"] { width: 18px; height: 18px; margin: 0; accent-color: var(--ink); }
/* Named legacy fields consume control shape without changing checkbox/radio geometry. */
:is(.reader-login-modal, .channel-builder-form) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), textarea, select) { border-radius: var(--ui-radius-control); }
.search-box { border-radius: var(--ui-radius-pill); }
.search-box:focus-within { outline: 2px solid var(--ink); outline-offset: 2px; }
.search-box input:focus-visible { outline: none; }

.ui-card { padding: 24px; border: 1px solid var(--line); border-radius: var(--ui-radius-panel); background: var(--paper); }
.ui-notice { display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px; border-radius: var(--ui-radius-control); background: var(--raised); color: var(--secondary); font-size: 14px; line-height: 1.6; }
.ui-notice--success { background: var(--success-bg); color: var(--success-ink); }
.ui-notice--danger { background: var(--danger-bg); color: var(--danger-ink); }
.ui-notice > svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; }
.ui-menu { position: relative; width: fit-content; margin: 0; }
.ui-menu > summary { list-style: none; }
.ui-menu > summary::-webkit-details-marker { display: none; }
.ui-menu-content { position: absolute; z-index: 20; inset-inline-start: 0; top: calc(100% + 8px); display: grid; width: 224px; max-width: calc(100vw - 48px); padding: 6px; border: 1px solid var(--line-strong); border-radius: var(--ui-radius-panel); background: var(--paper); box-shadow: var(--shadow); }
.ui-menu-item { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 8px 12px; border: 0; border-radius: var(--ui-radius-sm); color: var(--ink); background: transparent; font-size: 14px; text-align: start; cursor: pointer; }
.ui-menu-item:hover { background: var(--raised); }
.ui-menu-item svg { width: 18px; height: 18px; }
.ui-dialog { width: min(480px, calc(100% - 32px)); max-height: calc(100dvh - 32px); padding: 24px; border: 1px solid var(--line); border-radius: var(--ui-radius-panel); background: var(--paper); color: var(--ink); box-shadow: var(--shadow); overflow-y: auto; }
body:has(.ui-dialog[open]) { overflow: hidden; }
.ui-dialog::backdrop { background: var(--overlay); }
.ui-dialog-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.ui-dialog-header h2 { font-size: 20px; }
.ui-dialog-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; margin-top: 24px; }

@media (max-width: 820px), (pointer: coarse) {
  :root { --ui-tab-hit-height: 44px; }
  .source-tabs { padding-block: 0; }
  .source-tabs a { min-width: 44px; }
  :is(.public-body, .admin-body) .sidebar .nav-item,
  .admin-body .admin-sidebar .admin-nav-items .nav-item,
  .admin-body .admin-nav-group > summary { min-height: 44px; }
  :is(.ui-button, .button, .ui-tab, .ui-chip, .ui-menu-item) { min-height: 44px; }
  .ui-button--icon, .ui-button--icon.ui-button--sm { width: 44px; min-width: 44px; }
  :is(.channel-tag-modes, .channel-create-dialog .channel-tag-modes) button { min-height: 44px; }
  .ui-input, .ui-field .ui-input { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  :is(.ui-button, .button, .ui-tab, .ui-chip) { transition: none; }
  .ui-spinner { animation: none; }
}
@media (forced-colors: active) {
  .ui-tab[aria-selected="true"], .ui-chip[aria-pressed="true"], .source-tabs a.active { outline: 2px solid Highlight; outline-offset: -3px; }
  :is(.ui-button, .button):disabled { opacity: 1; color: GrayText; border-color: GrayText; }
}