/* Zaimiru v2 CSS Bundle Entry — z-app overflow unlayered fix
   tokens.css は HTML <link> で直接読込（@layer 外でダークモード切替を正しく動作させるため） */
@layer reset, global, layout, components, pages, utilities, a11y;


/* === ./reset.css === */
/* Minimal Reset */
@layer reset {
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { min-height: 100dvh; }
img, picture, video, canvas, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
ul, ol { list-style: none; }
table { border-collapse: collapse; }
button { cursor: pointer; background: none; border: none; }
}

/* tokens.css is loaded directly from HTML <link> to avoid @layer cascade issues */

/* === ./global.css === */
/* Global base styles */
@layer global {
html {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: var(--lh-normal);
  color: var(--text-primary);
  background: var(--surface-sunken);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
/* Smooth theme transition (color/background only — no layout shift) */
html.theme-transition,
html.theme-transition *,
html.theme-transition *::before,
html.theme-transition *::after {
  transition: color var(--transition-slow), background-color var(--transition-slow), border-color var(--transition-slow), box-shadow var(--transition-slow) !important;
  transition-delay: 0s !important;
}
body {
  font-size: var(--text-base);
  font-weight: var(--fw-normal);
  overflow-x: hidden;
}
h1 { font-size: clamp(var(--text-xl), 2vw + 1rem, var(--text-3xl)); font-weight: var(--fw-bold); line-height: var(--lh-tight); letter-spacing: -0.02em; }
h2 { font-size: clamp(var(--text-lg), 1.5vw + 0.75rem, var(--text-2xl)); font-weight: var(--fw-semibold); line-height: var(--lh-tight); }
h3 { font-size: var(--text-lg); font-weight: var(--fw-semibold); line-height: var(--lh-tight); }
h4 { font-size: var(--text-base); font-weight: var(--fw-semibold); }
p { color: var(--text-secondary); line-height: var(--lh-relaxed); }
a { color: var(--brand-primary); text-decoration: none; }
a:hover { color: var(--brand-primary-hover); }
a:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
  border-radius: var(--radius-sm);
}
code, pre { font-family: var(--font-mono); font-size: var(--text-sm); }
::selection { background: var(--brand-primary-light); color: var(--brand-primary); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
}


/* === ./layouts/app-shell.css === */
/* App Shell: TopNav + SideNav + Content */
@layer layout {
/* Nav links: override global a color */
.z-topnav a,
.z-sidenav a,
.z-bottomnav a {
  color: inherit;
  text-decoration: none;
}
/* Material Symbols: ensure proper icon rendering */
.z-app .material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 20px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'liga';
  width: 20px;
  min-width: 20px;
  max-width: 20px;
  height: 20px;
  overflow: hidden;
}

/* Mobile-first: block by default, desktop 2-column grid at 1024px+ */
.z-app {
  display: block;          /* mobile: block context removes grid-track overflow issue */
  max-width: 100vw;
  overflow: hidden;        /* fallback for iOS 15 (clip unsupported) */
  overflow: clip;          /* Safari 16+: clip without blocking descendant scroll */
  min-height: 100dvh;
}
@media (min-width: 1024px) {
  .z-app {
    display: grid;
    grid-template-columns: var(--sidebar-width) 1fr;
    grid-template-rows: var(--topnav-height) 1fr;
    overflow: clip;
  }
}

/* --- Top Nav --- */
.z-topnav {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0 var(--space-2);
  height: var(--topnav-height);
  background: var(--surface-raised);
  border-bottom: none;
  box-shadow: 0 1px 0 0 var(--border-subtle, rgba(0,0,0,0.06));
  width: 100%;
  max-width: 100vw;
  overflow: clip; /* clip works with sticky unlike hidden */
}
@media (min-width: 768px) {
  .z-topnav {
    gap: var(--space-4);
    padding: 0 var(--space-6);
  }
}
@media (min-width: 1024px) {
  .z-topnav {
    grid-column: 1 / -1;
    grid-row: 1;
  }
}
.z-topnav__brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: var(--fw-bold);
  font-size: var(--text-lg);
  color: var(--brand-primary);
  flex-shrink: 1; /* Allow shrinking on mobile */
  min-width: 0;
  overflow: hidden;
}
/* Mobile-first: hide brand text by default, show at 576px+ */
.z-topnav__brand span { display: none; }
@media (min-width: 576px) {
  .z-topnav__brand span { display: inline; }
}
.z-topnav__brand-icon {
  width: 28px;
  height: 28px;
  color: var(--brand-primary);
}
.z-topnav__brand-sub {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  font-weight: var(--fw-normal);
  display: none;
}
@media (min-width: 1024px) {
  .z-topnav__brand-sub { display: block; }
}
.z-topnav__search {
  flex: 1;
  max-width: 480px;
  min-width: 0; /* Allow shrinking on mobile */
}
/* Theme toggle button */
.z-theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-1);
  color: var(--color-text-secondary);
  cursor: pointer;
  margin-left: auto;
}
.z-theme-toggle:hover { color: var(--color-text-primary); }
.z-theme-toggle__sun,
.z-theme-toggle__moon { display: none; }

.z-topnav__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.z-topnav__user-menu {
  position: relative;
}
.z-topnav__dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  min-width: 200px;
  background: var(--surface-base);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: var(--space-1) 0;
  z-index: 100;
}
.z-topnav__dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-primary);
  text-decoration: none;
  width: 100%;
  border: none;
  background: none;
  cursor: pointer;
  text-align: left;
}
.z-topnav__dropdown-item:hover {
  background: var(--surface-sunken);
}
.z-topnav__dropdown-item .material-symbols-outlined {
  font-size: var(--text-lg);
  color: var(--text-secondary);
}
.z-topnav__dropdown-item--danger {
  color: var(--sem-negative);
}
.z-topnav__dropdown-item--danger .material-symbols-outlined {
  color: var(--sem-negative);
}
.z-topnav__dropdown-divider {
  border: none;
  border-top: 1px solid var(--border-default);
  margin: var(--space-1, 4px) 0;
}
.z-topnav__menu-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  transition: background var(--duration-fast);
}
.z-topnav__menu-btn:hover { background: var(--surface-sunken); }
@media (min-width: 1024px) {
  .z-topnav__menu-btn { display: none; }
}
/* Mobile: compact topnav for more search space */
/* brand span text: compact at 576px+, full size restored at 768px+ */
@media (min-width: 576px) {
  .z-topnav__brand span:not(.z-topnav__brand-icon) {
    font-size: var(--text-base);
  }
}
@media (min-width: 768px) {
  .z-topnav__brand span:not(.z-topnav__brand-icon) {
    font-size: var(--text-lg);
  }
}
/* search expands to fill space on mobile */
.z-topnav__search--full {
  flex: 1;
  max-width: none;
  min-width: 0;
}
@media (min-width: 768px) {
  .z-topnav__search--full {
    flex: 1;
    max-width: 480px;
    min-width: 0;
  }
}
/* action buttons: allow shrink on mobile, no-shrink restored at 768px+ */
.z-theme-toggle,
.z-topnav__actions {
  flex-shrink: 1;
  min-width: fit-content; /* prevent content cutoff while allowing shrink */
  overflow: hidden;
}
@media (min-width: 768px) {
  .z-theme-toggle,
  .z-topnav__actions {
    flex-shrink: 0;
    overflow: visible;
  }
}

/* --- Side Nav --- */
/* Mobile-first: fixed + hidden by default, desktop sticky at 1024px+ */
.z-sidenav {
  position: fixed;
  top: var(--topnav-height);
  left: 0;
  width: var(--sidebar-width);
  height: calc(100dvh - var(--topnav-height));
  overflow-y: auto;
  padding: var(--space-4) 0;
  background: var(--surface-raised);
  border-right: none;
  z-index: var(--z-overlay);
  transform: translateX(-100%);
  box-shadow: none;
  transition: transform var(--duration-slow) var(--ease-out);
}
@media (min-width: 1024px) {
  .z-sidenav {
    grid-column: 1;
    grid-row: 2;
    position: sticky;
    left: auto;
    width: auto;
    z-index: auto;
    transform: none;
    box-shadow: 1px 0 0 0 var(--border-subtle, rgba(0,0,0,0.06));
  }
}
.z-sidenav__group { padding: var(--space-2) var(--space-4); }
.z-sidenav__label {
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: var(--space-2) var(--space-3);
}
.z-sidenav__link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
  transition: background var(--duration-fast), color var(--duration-fast);
}
.z-sidenav__link:hover {
  background: var(--surface-sunken);
  color: var(--text-primary);
}
.z-sidenav__link--active {
  background: var(--brand-primary-light);
  color: var(--brand-primary);
  font-weight: var(--fw-semibold);
  border-left: 3px solid var(--brand-primary);
  padding-left: calc(var(--space-3) - 3px); /* Issue #130: ボーダー分のパディング調整 */
}
.z-sidenav__link svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.z-sidenav__link .material-symbols-outlined {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  font-size: 24px;
  overflow: hidden;
}
.z-sidenav__divider {
  height: 1px;
  background: var(--border-default);
  margin: var(--space-2) var(--space-4);
}
/* CTA link: primary brand highlight for register/signup */
.z-sidenav__link--cta {
  background: var(--brand-primary-light);
  color: var(--brand-primary);
  font-weight: var(--fw-semibold);
  border: 1px solid color-mix(in srgb, var(--brand-primary) 25%, transparent);
  border-radius: var(--radius-md);
}
.z-sidenav__link--cta:hover {
  background: color-mix(in srgb, var(--brand-primary) 15%, transparent);
  color: var(--brand-primary);
}
/* Sub-text: small helper note under group links */
.z-sidenav__sub {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  padding: var(--space-1) var(--space-3) var(--space-2);
  margin: 0;
  line-height: var(--lh-relaxed);
}
/* Mobile: open state (shown via JS) */
.z-sidenav--open {
  transform: translateX(0);
  box-shadow: var(--shadow-xl);
}
.z-sidenav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  top: var(--topnav-height);
  background: var(--surface-overlay);
  z-index: calc(var(--z-overlay) - 1);
}
.z-sidenav-overlay--visible { display: block; }

/* --- Announcement Banner --- */
/* Mobile-first: compact padding by default, full padding at 1024px+ */
.z-announcement {
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  line-height: 1.5;
  border-left: 3px solid transparent;
}
.z-announcement--info {
  background: color-mix(in srgb, var(--sem-info) 10%, var(--surface-base));
  color: color-mix(in srgb, var(--sem-info) 70%, var(--text-primary));
  border-left-color: var(--sem-info);
}
.z-announcement--warning {
  background: color-mix(in srgb, var(--sem-warning) 10%, var(--surface-base));
  color: color-mix(in srgb, var(--sem-warning) 60%, var(--text-primary));
  border-left-color: var(--sem-warning);
}
.z-announcement--danger {
  background: color-mix(in srgb, var(--sem-negative) 10%, var(--surface-base));
  color: color-mix(in srgb, var(--sem-negative) 70%, var(--text-primary));
  border-left-color: var(--sem-negative);
}
/* data-theme="dark" — explicit dark mode */
:root[data-theme="dark"] .z-announcement--info {
  background: color-mix(in srgb, var(--sem-info) 15%, var(--surface-raised));
  color: var(--sem-info);
  border-left-color: var(--sem-info);
}
:root[data-theme="dark"] .z-announcement--warning {
  background: color-mix(in srgb, var(--sem-warning) 15%, var(--surface-raised));
  color: var(--sem-warning);
  border-left-color: var(--sem-warning);
}
:root[data-theme="dark"] .z-announcement--danger {
  background: color-mix(in srgb, var(--sem-negative) 15%, var(--surface-raised));
  color: var(--sem-negative);
  border-left-color: var(--sem-negative);
}
@media (min-width: 1024px) {
  .z-announcement {
    grid-column: 1 / -1;
    padding: var(--space-3) var(--space-6);
  }
}

/* --- Content --- */
/* Mobile-first: block context by default; desktop grid placement at 1024px+ */
.z-content {
  padding: var(--space-3);
  max-width: 100%;
  width: 100%;
  min-width: 0; /* allow shrinking below content width for responsive */
  overflow-x: hidden; /* fallback for iOS 15 */
  overflow-x: clip; /* Clip visually without blocking descendant scroll containers (Safari 16+) */
}
@media (min-width: 1024px) {
  .z-content {
    grid-column: 2;
    grid-row: 2;
    padding: var(--space-6);
    max-width: calc(var(--container-max) + var(--space-12));
  }
}

/* --- Footer --- */
.z-footer {
  padding: var(--space-8) var(--space-6);
  border-top: 1px solid var(--border-default);
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  text-align: center;
}
.z-footer { padding-bottom: calc(var(--space-8) + var(--bottomnav-height) + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 768px) {
  .z-footer { padding-bottom: var(--space-6); }
}
.z-footer__disclaimer {
  margin-bottom: var(--space-3);
  font-size: var(--text-xs);
  line-height: 1.6;
}
.z-footer__disclaimer p { margin: 0; }
.z-footer__sources {
  margin-bottom: var(--space-2);
  font-size: var(--text-xs);
}
.z-footer__sources a { color: var(--text-secondary); text-decoration: underline; }
.z-footer__sources a:hover { color: var(--text-primary); }
.z-footer__freshness {
  margin-bottom: var(--space-2);
  font-size: var(--text-xs);
  color: var(--text-disabled);
}
.z-footer__legal {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-bottom: var(--space-3);
}
.z-footer__legal a { color: var(--text-secondary); text-decoration: none; }
.z-footer__legal a:hover { color: var(--text-primary); text-decoration: underline; }
.z-footer__sep { color: var(--text-disabled); }
.z-footer__copyright { margin: 0; font-size: var(--text-xs); }

/* --- Scroll to Top Button --- */
.z-scroll-top {
  display: none;
  position: fixed;
  bottom: calc(var(--space-4) + var(--bottomnav-height));
  right: var(--space-4);
  z-index: var(--z-sticky);
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  background: var(--surface-raised);
  border: 1px solid var(--border-default);
  box-shadow: var(--shadow-md);
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  cursor: pointer;
  transition: opacity var(--duration-fast), transform var(--duration-fast);
}
.z-scroll-top:hover {
  color: var(--brand-primary);
  transform: translateY(-2px);
}
.z-scroll-top--visible { display: flex; }
@media (min-width: 768px) {
  .z-scroll-top { bottom: var(--space-6); }
}

/* --- Mobile Bottom Nav --- */
.z-bottomnav {
  display: flex;
  justify-content: space-around;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: var(--z-sticky);
  background: var(--surface-raised);
  border-top: 1px solid var(--border-default);
  padding: var(--space-1) 0;
  padding-bottom: calc(var(--space-1) + env(safe-area-inset-bottom, 0px));
  min-height: var(--bottomnav-height);
}
.z-content {
  padding-bottom: calc(var(--bottomnav-height) + var(--space-4) + env(safe-area-inset-bottom, 0px));
}
@media (min-width: 1024px) {
  .z-bottomnav { display: none; }
  .z-content { padding-bottom: 0; }
}
.z-bottomnav__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: var(--space-1) var(--space-2);
  font-size: 10px;
  color: var(--text-tertiary);
  min-width: 64px;
  min-height: var(--touch-target-min);
}
.z-bottomnav__item--active {
  color: var(--brand-primary);
  position: relative;
}
.z-bottomnav__item--active::before {
  content: '';
  position: absolute;
  top: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 3px;
  background: var(--brand-primary);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}
.z-bottomnav__item svg {
  width: 24px;
  height: 24px;
}
.z-bottomnav__item .material-symbols-outlined {
  font-size: 24px;
  width: 24px;
  height: 24px;
}

/* --- TopNav Search Collapse (Alpine.js toggle, mobile only) --- */
/* Wrapper holds the toggle button + search form */
.z-topnav__search-wrapper {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
}
/* Toggle button: 44×44px tap target, mobile only */
.z-topnav__search-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  color: var(--text-secondary);
  border-radius: var(--radius-md);
  transition: background var(--duration-fast), color var(--duration-fast);
}
.z-topnav__search-toggle:hover {
  background: var(--surface-sunken);
  color: var(--text-primary);
}
/* Search form: hidden by default on mobile, shown when toggled */
.z-topnav__search-wrapper .z-topnav__search {
  display: none;
  flex: 1;
  min-width: 0;
}
.z-topnav__search-wrapper .z-topnav__search.is-open {
  display: flex;
  flex: 1;
}
/* 768px+: toggle button hidden, search always visible */
@media (min-width: 768px) {
  .z-topnav__search-toggle {
    display: none;
  }
  .z-topnav__search-wrapper .z-topnav__search {
    display: flex;
    flex: 1;
  }
}
} /* end @layer layout */


/* === ./layouts/page-header.css === */
/* Page Header: simplified, flat design */
@layer layout {
.z-page-header {
  padding: var(--space-6) 0 var(--space-4);
  border-bottom: 2px solid var(--brand-primary);
  margin-bottom: var(--space-6);
}
.z-page-header__title-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.z-page-header__title {
  font-size: clamp(var(--text-xl), 2vw + 1rem, var(--text-3xl));
  font-weight: var(--fw-bold);
  color: var(--text-primary);
  line-height: var(--lh-tight);
}
.z-page-header__desc {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}
.z-page-header__actions {
  display: flex;
  gap: var(--space-2);
  margin-left: auto;
}
}


/* === ./layouts/grid.css === */
/* Grid utilities */
@layer layout {
.z-grid { display: grid; gap: var(--space-4); max-width: 100%; }
.z-grid > * { min-width: 0; } /* Grid children: allow shrinking below content width */
/* Mobile-first: base = 1 column */
.z-grid--2 { grid-template-columns: minmax(0, 1fr); }
.z-grid--3 { grid-template-columns: minmax(0, 1fr); }
.z-grid--4 { grid-template-columns: minmax(0, 1fr); }
.z-grid--2-wide { grid-template-columns: minmax(0, 1fr); }
.z-grid--auto {
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
}
.z-grid--metrics {
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
}
/* Keep 2-col on mobile for compact items, but 1-col on very narrow screens */
.z-grid--2col-mobile { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 576px) {
  .z-grid--2col-mobile { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Force 1-col on mobile (used by home top-performers grid) */
.z-grid--1col-mobile { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) {
  .z-grid--1col-mobile { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 640px) {
  .z-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .z-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .z-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .z-grid--2-wide { grid-template-columns: 2fr minmax(0, 1fr); }
  .z-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .z-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
}


/* === ./components/btn.css === */
@layer components {
.z-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  line-height: 1.5;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
}
.z-btn:active { transform: scale(0.98); }
.z-btn:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}
.z-btn:disabled,
.z-btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
.z-btn--primary { background: var(--brand-primary); color: var(--text-inverse); }
.z-btn--primary:hover { background: var(--brand-primary-hover); }
.z-btn--accent { background: var(--brand-accent-bg); color: var(--text-inverse); }
.z-btn--accent:hover { background: var(--brand-accent-hover); }
.z-btn--ghost {
  background: transparent;
  color: var(--text-primary);
  border-color: var(--border-default);
}
.z-btn--ghost:hover { background: var(--surface-sunken); }
.z-btn--outline {
  background: transparent;
  color: var(--brand-primary);
  border: 1px solid var(--brand-primary);
}
.z-btn--outline:hover {
  background: var(--brand-primary);
  color: var(--text-inverse);
}
.z-btn--xs { padding: var(--space-1) var(--space-2); font-size: var(--text-xs); }
.z-btn--sm { padding: var(--space-1) var(--space-3); font-size: var(--text-xs); }
.z-btn--lg { padding: var(--space-3) var(--space-6); font-size: var(--text-base); }
.z-btn--success { background: var(--sem-positive); color: var(--text-inverse); }
.z-btn--success:hover { filter: brightness(0.85); }
.z-btn--warning { background: var(--sem-warning); color: var(--text-inverse); }
.z-btn--warning:hover { filter: brightness(0.85); }
.z-btn--active { background: var(--surface-secondary); border-color: var(--brand-primary); color: var(--brand-primary); font-weight: var(--fw-semibold); }
.z-btn svg { width: 16px; height: 16px; flex-shrink: 0; }

/* Risk preset buttons (audit dashboard 改善 4 / 2026-05-03)
   監査リスク警告フィルタ用のセマンティックモディファイア。
   ベース色は危険度別の color token を流用し、テキスト/アイコンのみ着色。
   Hover で塗り潰しに切り替えてアクション性を強調する。 */
.z-btn--risk-negative {
  background: transparent;
  color: var(--sem-negative, #dc2626);
  border-color: var(--sem-negative, #dc2626);
}
.z-btn--risk-negative:hover {
  background: var(--sem-negative, #dc2626);
  color: var(--text-inverse);
}
.z-btn--risk-warning {
  background: transparent;
  color: var(--sem-warning, #f97316);
  border-color: var(--sem-warning, #f97316);
}
.z-btn--risk-warning:hover {
  background: var(--sem-warning, #f97316);
  color: var(--text-inverse);
}
.z-btn--risk-info {
  background: transparent;
  color: var(--sem-info, #0ea5e9);
  border-color: var(--sem-info, #0ea5e9);
}
.z-btn--risk-info:hover {
  background: var(--sem-info, #0ea5e9);
  color: var(--text-inverse);
}
.z-btn--risk-positive {
  background: transparent;
  color: var(--sem-positive, #16a34a);
  border-color: var(--sem-positive, #16a34a);
}
.z-btn--risk-positive:hover {
  background: var(--sem-positive, #16a34a);
  color: var(--text-inverse);
}
}

@layer components {
/* Inline text link utility */
.z-link {
  color: var(--brand-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--duration-fast) var(--ease-out);
}
.z-link:hover { color: var(--brand-primary-hover); }
.z-link:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
  border-radius: var(--radius-xs);
}
}


/* === ./components/card.css === */
@layer components {
/* Mobile-First: smaller padding on mobile, larger on desktop */
.z-card {
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-default);
  background: var(--surface-raised);
  box-shadow: var(--shadow-sm);
  min-width: 0; /* Grid child: allow shrinking */
  overflow: hidden; /* Prevent content overflow */
}
@media (min-width: 768px) {
  .z-card {
    padding: var(--space-4);
  }
}
/* Mobile-First: header stacks vertically to prevent title/action overflow */
.z-card__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
@media (min-width: 640px) {
  .z-card__header {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
  }
}
.z-card__title {
  font-size: var(--text-base);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
}
.z-card__body { }
.z-card__footer {
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--border-default);
  margin-top: var(--space-3);
}
/* Mobile-first: no auto-margin on mobile, auto-margin on desktop */
.z-card__actions {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-left: 0;
}
@media (min-width: 640px) {
  .z-card__actions {
    margin-left: auto;
  }
}
.z-card--clickable {
  transition: box-shadow var(--duration-normal) var(--ease-out),
              transform var(--duration-normal) var(--ease-out);
  cursor: pointer;
}
.z-card--clickable:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.z-card--clickable:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}
.z-card--hover {
  transition: box-shadow var(--duration-normal) var(--ease-out),
              transform var(--duration-normal) var(--ease-out);
}
.z-card--hover:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.z-card--flat {
  box-shadow: none;
  border: 1px solid var(--border-default);
}
/* dashboard 改善 3: market 健全性スナップショット用カード */
.z-card--health-snapshot {
  border-left: 4px solid var(--brand-primary, #134e4a);
}
/* dashboard 改善 1: home 監査リスク警告用 (既に home.css にある重複定義を削除して統一) */
.z-card--risk-summary {
  border-left: 4px solid var(--negative, #dc2626);
}

/* Empty state — used by z_empty macro in macros/ui.html */
.z-empty {
  padding: var(--space-12) var(--space-4);
  text-align: center;
}
.z-empty__icon {
  font-size: var(--text-5xl);
  color: var(--text-disabled);
}
.z-empty__title {
  font-size: var(--text-lg);
  font-weight: var(--fw-semibold);
}
.z-empty__desc {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  max-width: 24rem;
}
}


/* === ./components/badge.css === */
@layer components {
.z-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  line-height: 1.5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  background: var(--surface-sunken);
  color: var(--text-secondary);
  border: 1px solid var(--border-default);
}
.z-badge--positive { background: color-mix(in srgb, var(--sem-positive) 12%, var(--surface-base)); color: var(--viz-positive-on-light, var(--sem-positive)); border-color: color-mix(in srgb, var(--sem-positive) 30%, var(--surface-base)); }
.z-badge--negative { background: color-mix(in srgb, var(--sem-negative) 8%, var(--surface-base)); color: var(--viz-negative-on-light, var(--sem-negative)); border-color: color-mix(in srgb, var(--sem-negative) 25%, var(--surface-base)); }
.z-badge--warning { background: color-mix(in srgb, var(--sem-warning) 12%, var(--surface-base)); color: var(--brand-accent-text); border-color: color-mix(in srgb, var(--sem-warning) 35%, var(--surface-base)); }
.z-badge--neutral { background: color-mix(in srgb, var(--sem-positive) 6%, var(--surface-base)); color: var(--text-secondary); border-color: color-mix(in srgb, var(--sem-positive) 20%, var(--surface-base)); }
.z-badge--info { background: var(--brand-primary-light); color: var(--brand-primary); border-color: color-mix(in srgb, var(--sem-info) 35%, var(--surface-base)); }
.z-badge--count {
  background: var(--brand-primary);
  color: var(--text-inverse);
  border-color: transparent;
  font-variant-numeric: tabular-nums;
}
.z-badge--ghost {
  background: transparent;
  color: var(--text-secondary);
  border-color: var(--border-default);
}
.z-badge--danger {
  background: color-mix(in srgb, var(--sem-negative) 8%, var(--surface-base));
  color: var(--viz-negative-on-light, var(--sem-negative));
  border-color: color-mix(in srgb, var(--sem-negative) 25%, var(--surface-base));
}
.z-badge--sm { padding: 1px var(--space-1); font-size: 10px; }
.z-badge--lg { padding: var(--space-1) var(--space-3); font-size: var(--text-sm); }

/* Icon prefix for color-blind accessibility (▲/▼ on positive/negative) */
.z-badge--with-icon::before {
  display: inline-block;
  line-height: 1;
  margin-right: var(--space-0\.5, 0.125rem);
  font-feature-settings: "tnum";
}
.z-badge--positive.z-badge--with-icon::before { content: "\25B2"; }
.z-badge--negative.z-badge--with-icon::before { content: "\25BC"; }
.z-badge--warning.z-badge--with-icon::before { content: "\26A0"; }
.z-badge--info.z-badge--with-icon::before { content: "\2139"; }
.z-badge--danger.z-badge--with-icon::before { content: "\26A0"; }

/* Chip: inline tag with border (non-pill shape, for code+name combos) */
.z-chip {
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}
.z-chip--muted {
  padding: var(--space-1) var(--space-3);
  background: var(--surface-sunken);
  border-radius: var(--radius-md);
}
}

/* data-theme="dark" — explicit dark mode (theme toggle) */
:root[data-theme="dark"] .z-badge--positive {
  background: color-mix(in srgb, var(--sem-positive) 20%, transparent);
  color: var(--sem-positive);
  border-color: color-mix(in srgb, var(--sem-positive) 35%, transparent);
}
:root[data-theme="dark"] .z-badge--negative {
  background: color-mix(in srgb, var(--sem-negative) 20%, transparent);
  color: var(--sem-negative);
  border-color: color-mix(in srgb, var(--sem-negative) 30%, transparent);
}
:root[data-theme="dark"] .z-badge--warning {
  background: color-mix(in srgb, var(--sem-warning) 20%, transparent);
  color: var(--sem-warning);
  border-color: color-mix(in srgb, var(--sem-warning) 35%, transparent);
}
:root[data-theme="dark"] .z-badge--danger {
  background: color-mix(in srgb, var(--sem-negative) 25%, transparent);
  color: var(--sem-negative);
  border-color: color-mix(in srgb, var(--sem-negative) 35%, transparent);
}
:root[data-theme="dark"] .z-badge--info {
  background: color-mix(in srgb, var(--sem-info) 20%, transparent);
  color: var(--sem-info);
  border-color: color-mix(in srgb, var(--sem-info) 30%, transparent);
}

@media (prefers-color-scheme: dark) {
  .z-badge--positive {
    background: color-mix(in srgb, var(--sem-positive) 20%, transparent);
    color: var(--sem-positive);
    border-color: color-mix(in srgb, var(--sem-positive) 35%, transparent);
  }
  .z-badge--negative {
    background: color-mix(in srgb, var(--sem-negative) 20%, transparent);
    color: var(--sem-negative);
    border-color: color-mix(in srgb, var(--sem-negative) 30%, transparent);
  }
  .z-badge--warning {
    background: color-mix(in srgb, var(--sem-warning) 20%, transparent);
    color: var(--sem-warning);
    border-color: color-mix(in srgb, var(--sem-warning) 35%, transparent);
  }
  .z-badge--danger {
    background: color-mix(in srgb, var(--sem-negative) 25%, transparent);
    color: var(--sem-negative);
    border-color: color-mix(in srgb, var(--sem-negative) 35%, transparent);
  }
  .z-badge--info {
    background: color-mix(in srgb, var(--sem-info) 20%, transparent);
    color: var(--sem-info);
    border-color: color-mix(in srgb, var(--sem-info) 30%, transparent);
  }
}

/* ---------------------------------------------------------------------------
   Volatility badges
   --------------------------------------------------------------------------- */
@layer components {
.z-badge--vol-high {
  background: color-mix(in srgb, var(--sem-negative) 12%, var(--surface-base));
  color: var(--viz-negative-on-light, var(--sem-negative));
  border-color: color-mix(in srgb, var(--sem-negative) 30%, var(--surface-base));
}
.z-badge--vol-mid {
  background: color-mix(in srgb, var(--sem-warning) 12%, var(--surface-base));
  color: var(--brand-accent-text);
  border-color: color-mix(in srgb, var(--sem-warning) 35%, var(--surface-base));
}
.z-badge--vol-low {
  background: color-mix(in srgb, var(--sem-info) 12%, var(--surface-base));
  color: var(--brand-primary);
  border-color: color-mix(in srgb, var(--sem-info) 30%, var(--surface-base));
}

/* ---------------------------------------------------------------------------
   Growth-stage badges
   --------------------------------------------------------------------------- */
.z-badge--stage-hyper {
  background: color-mix(in srgb, var(--viz-cat-4, var(--sem-positive)) 16%, var(--surface-base));
  color: var(--viz-cat-4, var(--sem-positive));
}
.z-badge--stage-high {
  background: color-mix(in srgb, var(--sem-positive) 12%, var(--surface-base));
  color: var(--viz-positive-on-light, var(--sem-positive));
}
.z-badge--stage-stable {
  background: color-mix(in srgb, var(--sem-info) 10%, var(--surface-base));
  color: var(--brand-primary);
}
.z-badge--stage-mature {
  background: var(--surface-sunken);
  color: var(--text-secondary);
}
.z-badge--stage-declining {
  background: color-mix(in srgb, var(--sem-negative) 10%, var(--surface-base));
  color: var(--viz-negative-on-light, var(--sem-negative));
}

/* ---------------------------------------------------------------------------
   Core-profit (本業依存度) badges
   --------------------------------------------------------------------------- */
.z-badge--core-high {
  background: color-mix(in srgb, var(--viz-cat-1, var(--sem-info)) 16%, var(--surface-base));
  color: var(--viz-cat-1, var(--sem-info));
}
.z-badge--core-medium {
  background: var(--surface-sunken);
  color: var(--text-secondary);
}
.z-badge--core-low {
  background: color-mix(in srgb, var(--text-disabled) 15%, var(--surface-base));
  color: var(--text-tertiary);
}
}


/* === ./components/table.css === */
@layer components {
.z-table {
  width: 100%;
  font-size: var(--text-sm);
  border-collapse: collapse;
}
.z-table thead { border-bottom: 2px solid var(--border-default); }
/* Mobile-first: compact padding on mobile, full padding on 768px+ */
.z-table th {
  padding: var(--space-1) var(--space-2);
  text-align: left;
  font-weight: var(--fw-semibold);
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.z-table td {
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-xs);
  border-bottom: 1px solid var(--border-default);
  vertical-align: middle;
}
.z-table tbody tr:hover { background: var(--surface-sunken); }
.z-table .z-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.z-table .z-positive { color: var(--sem-positive); }
.z-table .z-negative { color: var(--sem-negative); }

/* Responsive: card transformation — Mobile-First base (default: card layout) */
.z-table--responsive { border: 0; }
.z-table--responsive thead { display: none; }
.z-table--responsive tbody tr {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-1);
  padding: var(--space-4);
  margin-bottom: var(--space-2);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
}
.z-table--responsive td {
  display: flex;
  flex-direction: column;
  padding: var(--space-1) 0;
  border: none;
}
.z-table--responsive td::before {
  content: attr(data-label);
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  font-weight: var(--fw-medium);
  margin-bottom: 2px;
}
.z-table--responsive td:first-child {
  grid-column: 1 / -1;
  font-weight: var(--fw-semibold);
  font-size: var(--text-base);
}

/* At 768px+: revert to standard table layout; restore normal padding/font-size */
@media (min-width: 768px) {
  .z-table th {
    padding: var(--space-3) var(--space-3);
    font-size: var(--text-xs);
  }
  .z-table td {
    padding: var(--space-3);
    font-size: var(--text-sm);
  }
  .z-table--responsive { border: revert; }
  .z-table--responsive thead { display: revert; }
  .z-table--responsive tbody tr {
    display: table-row;
    grid-template-columns: unset;
    gap: unset;
    padding: unset;
    margin-bottom: unset;
    border: none;
    border-radius: unset;
    background: unset;
  }
  .z-table--responsive td {
    display: table-cell;
    flex-direction: unset;
    padding: var(--space-3);
    border-bottom: 1px solid var(--border-default);
  }
  .z-table--responsive td::before { content: none; }
  .z-table--responsive td:first-child {
    grid-column: unset;
    font-weight: unset;
    font-size: unset;
  }
}

/* Simple overflow wrapper */
.z-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Scroll wrapper for wide tables (財務テーブル用) */
.z-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-default);
  position: relative;
}

/* Scroll shadow hints: left/right gradient overlays */
.z-table-scroll::before,
.z-table-scroll::after {
  content: '';
  position: sticky;
  top: 0;
  display: block;
  width: 24px;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}
.z-table-scroll::before {
  left: 0;
  float: left;
  margin-right: -24px;
  background: linear-gradient(to right, var(--surface-raised), transparent);
}
.z-table-scroll::after {
  right: 0;
  float: right;
  margin-left: -24px;
  margin-top: -100%;
  background: linear-gradient(to left, var(--surface-raised), transparent);
}

/* Finance table: total/subtotal rows */
.z-table .z-table__total td {
  font-weight: var(--fw-bold);
  background: var(--surface-sunken);
}
/* Finance table: sr-only captions */
.z-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
}


/* === ./components/tabs.css === */
@layer components {
.z-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border-default);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  flex-wrap: wrap;
  position: relative;
  /* Right-edge fade hints that more tabs are scrollable when content overflows.
     Browsers without mask-image fall back to no fade (graceful). */
  mask-image: linear-gradient(to right, black calc(100% - 32px), transparent 100%);
  -webkit-mask-image: linear-gradient(to right, black calc(100% - 32px), transparent 100%);
}
/* When scrolled to the end, remove the fade for visual completeness */
.z-tabs.is-scroll-end {
  mask-image: none;
  -webkit-mask-image: none;
}
.z-tabs::-webkit-scrollbar { display: none; }
/* Mobile: wrap SNS/action buttons to next line */
.z-tabs > .u-flex.u-ml-auto {
  flex-basis: 100%;
  margin-left: 0;
  border-top: 1px solid var(--border-default);
  padding-top: var(--space-2);
  justify-content: flex-end;
}
.z-tabs__tab {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  color: var(--text-tertiary);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color var(--duration-fast), border-color var(--duration-fast);
}
.z-tabs__tab:hover { color: var(--text-primary); }
.z-tabs__tab--active {
  color: var(--brand-primary);
  border-bottom-color: var(--brand-primary);
  font-weight: var(--fw-semibold);
}
.z-tabs__tab:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: -2px;
}
.z-tabs--sticky {
  position: sticky;
  top: var(--topnav-height);
  z-index: var(--z-sticky);
  background: var(--surface-base);
}
/* Desktop: no wrapping, tabs in single row with larger padding */
@media (min-width: 768px) {
  .z-tabs { flex-wrap: nowrap; }
  .z-tabs > .u-flex.u-ml-auto {
    flex-basis: auto;
    margin-left: auto;
    border-top: none;
    padding-top: 0;
    /* Visually separate action buttons (download, etc.) from tabs so the
       last tab text isn't mistaken as adjacent to the action icon. */
    padding-left: var(--space-3);
    margin-left: var(--space-3);
    border-left: 1px solid var(--border-subtle);
  }
  .z-tabs__tab {
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-sm);
  }
}

}


/* === ./components/form.css === */
@layer components {
.z-form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-bottom: var(--space-4);
}
.z-input,
.z-select {
  width: 100%;
  box-sizing: border-box;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  font-size: var(--text-base); /* Mobile-First: prevent iOS Safari auto-zoom (< 16px triggers zoom) */
  color: var(--text-primary);
  background: var(--surface-base);
  transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
  min-height: var(--touch-target-min, 44px); /* Mobile-First: touch target optimization */
}
.z-label {
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--text-primary);
}
.z-label .z-required {
  color: var(--sem-negative);
  margin-left: 2px;
}
.z-input:focus,
.z-select:focus {
  outline: none;
  border-color: var(--focus-ring-color);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--border-focus) 15%, transparent);
}
.z-input::placeholder { color: var(--text-disabled); }
.z-input[aria-invalid="true"],
.z-select[aria-invalid="true"] {
  border-color: var(--sem-negative);
}
.z-input[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sem-negative) 15%, transparent);
}
.z-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  padding-right: var(--space-8);
  cursor: pointer;
}

/* Desktop: restore smaller font-size and relax min-height */
@media (min-width: 768px) {
  .z-input,
  .z-select {
    font-size: var(--text-sm);
    min-height: unset;
  }
}
}


/* === ./components/metric.css === */
@layer components {
.z-metric {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3);
  background: var(--surface-raised);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
}
.z-metric__value {
  font-size: var(--text-xl);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  line-height: var(--lh-tight);
}
.z-metric__value--positive { color: var(--sem-positive); }
.z-metric__value--negative { color: var(--sem-negative); }
.z-metric__label {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  font-weight: var(--fw-medium);
}
.z-metric__change {
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
}
.z-metric__caption {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  display: block;
  margin-top: 2px;
}
.z-metric--compact {
  padding: var(--space-3);
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.z-metric--compact .z-metric__value { font-size: var(--text-lg); }
/* Desktop: larger values for wider layout */
@media (min-width: 768px) {
  .z-metric { padding: var(--space-4); }
  .z-metric__value { font-size: var(--text-2xl); }
}

/* --- Metric Card V2 (KPI with sparkline) --- */
.z-metric-card {
  background: var(--surface-base);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  position: relative;
  overflow: hidden;
  min-width: 0;
}
.z-metric-card--positive { border-left: 3px solid var(--sem-positive); }
.z-metric-card--negative { border-left: 3px solid var(--sem-negative); }
.z-metric-card__header {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}
.z-metric-card__icon { font-size: 16px; color: var(--text-tertiary); }
.z-metric-card__label { font-size: var(--text-xs); color: var(--text-secondary); font-weight: var(--fw-medium); }
.z-metric-card__value { font-size: var(--text-xl); font-weight: var(--fw-bold); line-height: 1.2; font-variant-numeric: tabular-nums; }
.z-metric-card__unit { font-size: var(--text-sm); font-weight: var(--fw-normal); color: var(--text-tertiary); margin-left: 2px; }
.z-metric-card__sub { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); flex-wrap: wrap; }
.z-metric-card__yoy { font-weight: var(--fw-semibold); }
.z-metric-card__sector { color: var(--text-tertiary); }
.z-metric-card__spark {
  width: 100%;
  height: 24px;
  margin-top: var(--space-1);
  color: var(--brand-primary);
  opacity: 0.6;
}
.z-metric-card--positive .z-metric-card__spark { color: var(--sem-positive); }
.z-metric-card--negative .z-metric-card__spark { color: var(--sem-negative); }
/* Desktop: larger padding and value size */
@media (min-width: 768px) {
  .z-metric-card { padding: var(--space-3) var(--space-4); }
  .z-metric-card__value { font-size: var(--text-2xl); }
}
}


/* === ./components/chart.css === */
@layer components {
.z-chart {
  background: var(--surface-raised);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
/* Mobile-First: header stacks vertically on small screens */
.z-chart__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-4) 0;
}
@media (min-width: 640px) {
  .z-chart__header {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
  }
}
.z-chart__title {
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
}
.z-chart__body {
  padding: var(--space-2) var(--space-4) var(--space-4);
}
/* Mobile-First: 4/3 base, expanded to 16/9 at 640px+ */
.z-chart__container {
  width: 100%;
  aspect-ratio: 4 / 3;
  min-height: clamp(200px, 50vw, 400px);
}
@media (min-width: 640px) {
  .z-chart__container {
    aspect-ratio: 16 / 9;
    min-height: 200px;
  }
}
/* Size variants: fixed height, responsive on mobile */
/* --sm: ~200px charts (sparklines, scores) */
.z-chart--sm {
  height: 180px;
  min-height: 180px;
}
@media (min-width: 640px) {
  .z-chart--sm {
    height: 200px;
    min-height: 200px;
  }
}
/* --md: ~280-320px charts (default medium) */
.z-chart--md {
  height: 240px;
  min-height: 240px;
}
@media (min-width: 640px) {
  .z-chart--md {
    height: 280px;
    min-height: 280px;
  }
}
/* --lg: ~350-400px charts */
.z-chart--lg {
  height: 300px;
  min-height: 300px;
}
@media (min-width: 640px) {
  .z-chart--lg {
    height: 380px;
    min-height: 380px;
  }
}
/* --xl: ~480-520px charts (height required for ECharts to read container size) */
.z-chart--xl {
  height: 400px;
  min-height: 400px;
}
@media (min-width: 640px) {
  .z-chart--xl {
    height: 500px;
    min-height: 500px;
  }
}
.z-chart--dist {
  background: transparent;
  border: none;
  border-radius: 0;
}
}


/* === ./components/search.css === */
@layer components {
.z-search {
  position: relative;
  width: 100%;
}
.z-search__inner {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--surface-sunken);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
}
.z-search__inner:focus-within {
  border-color: var(--focus-ring-color);
  box-shadow: 0 0 0 3px var(--color-focus-ring);
  background: var(--surface-base);
}
.z-search__icon {
  width: 18px;
  height: 18px;
  color: var(--text-disabled);
  flex-shrink: 0;
}
/* Mobile-first: 1rem on mobile, var(--text-sm) on 768px+ */
.z-search__input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: var(--text-base);
  color: var(--text-primary);
  outline: none;
  min-width: 0;
}
.z-search__input::placeholder { color: var(--text-disabled); }
/* Mobile-first: hidden on mobile, flex on 768px+ */
.z-search__btn {
  display: none;
  padding: var(--space-1) var(--space-3);
  background: var(--brand-primary);
  color: var(--text-inverse);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  transition: background var(--duration-fast);
}
.z-search__btn:hover { background: var(--brand-primary-hover); }
.z-search__results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: var(--z-dropdown);
  margin-top: var(--space-1);
  background: var(--surface-raised);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  max-height: 400px;
  overflow-y: auto;
}
.z-search__results:empty { display: none; }
/* .z-topnav__search max-width は app-shell.css (@layer layout) で定義 (SSOT).
   components 層がlayout 層を上書きしないよう、ここでは宣言しない. */
@media (min-width: 768px) {
  .z-search__input { font-size: var(--text-sm); }
  .z-search__btn { display: flex; }
}
/* Hero variant: larger search for home page */
.z-search--hero .z-search__inner {
  padding: var(--space-3) var(--space-4);
  background: var(--surface-base);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.z-search--hero .z-search__input { font-size: var(--text-base); }
.z-search--hero .z-search__btn {
  padding: var(--space-2) var(--space-5);
  font-size: var(--text-sm);
  border-radius: var(--radius-md);
}
}


/* === ./components/nav.css === */
@layer components {
/* Sidebar nav styles are in layouts/app-shell.css */
}


/* === ./components/breadcrumb.css === */
@layer components {
.z-breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}
.z-breadcrumb a { color: var(--text-secondary); }
.z-breadcrumb a:hover { color: var(--brand-primary); }
.z-breadcrumb__sep { color: var(--text-disabled); }
.z-breadcrumb__current { color: var(--text-primary); font-weight: var(--fw-medium); }
}


/* === ./components/skeleton.css === */
@layer components {
.z-skeleton {
  background: linear-gradient(90deg, var(--border-default) 25%, var(--surface-sunken) 50%, var(--border-default) 75%);
  background-size: 200% 100%;
  animation: z-skeleton-shimmer 1.5s ease-in-out infinite;
  border-radius: var(--radius-md);
}
.z-skeleton--text { height: 1em; width: 80%; }
.z-skeleton--card { height: 120px; width: 100%; border-radius: var(--radius-lg); }
.z-skeleton__line {
  height: 0.875em;
  width: 80%;
  border-radius: var(--radius-sm);
  background: inherit;
  margin-bottom: var(--space-2);
}
.z-skeleton__line--lg { height: 1.25em; width: 60%; }
.z-skeleton__line--sm { height: 0.75em; width: 40%; }
@keyframes z-skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
}


/* === ./components/alert.css === */
@layer components {
.z-alert {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--warning);
  background: var(--surface-raised);
  border-top: 1px solid var(--border-default);
  border-right: 1px solid var(--border-default);
  border-bottom: 1px solid var(--border-default);
  margin-bottom: var(--space-4);
}
.z-alert__icon {
  flex-shrink: 0;
  color: var(--warning);
}
.z-alert__body {
  min-width: 0;
}
.z-alert__body strong {
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
}
.z-alert__body p {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  margin: var(--space-1) 0 0;
}
.z-alert--info {
  border-left-color: var(--info);
}
.z-alert--info .z-alert__icon { color: var(--info); }
.z-alert--positive {
  border-left-color: var(--positive);
}
.z-alert--positive .z-alert__icon { color: var(--positive); }
.z-alert--negative {
  border-left-color: var(--negative);
}
.z-alert--negative .z-alert__icon { color: var(--negative); }
.z-alert--warning {
  border-left-color: var(--warning);
  background: color-mix(in srgb, var(--sem-warning) 6%, var(--surface-raised));
}
.z-alert--warning .z-alert__icon { color: var(--warning); }
}


/* === ./components/freshness.css === */
/* freshness badge (#210)
 * データ反映日の鮮度を視覚的に伝える。30日経過: yellow, 90日経過: red, 通常: 落ち着いた色。
 * #232 R1 の境界値知見に従い、sunken 背景でも AA 4.5:1 を満たす色トークンを採用。
 */

@layer components {
  .z-freshness--fresh {
    /* 通常 (30日未満)。情報過多にならないよう派手にしない。 */
    color: var(--text-secondary);
  }

  .z-freshness--stale-30 {
    /* 30日経過 ~ 89日。注意喚起 (yellow 系) — sem-warning は AA 合格色。 */
    color: var(--sem-warning, #b45309);
    font-weight: 600;
  }

  .z-freshness--stale-90 {
    /* 90日以上経過。明確な警告 (red 系)。 */
    color: var(--sem-negative, #b91c1c);
    font-weight: 600;
  }

  .z-freshness--unknown {
    /* asof 取得失敗。muted で表示。 */
    color: var(--color-text-muted, #64748b);
  }
}


/* === ./components/chart-legend.css === */
@layer components {
.z-chart-legend {
  display: flex;
  gap: var(--viz-legend-gap, var(--space-3));
  margin-top: var(--space-3);
  font-size: var(--text-xs);
  color: var(--text-secondary);
}
.z-chart-legend--center {
  justify-content: center;
}
.z-chart-legend__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}
.z-chart-legend__swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: var(--radius-xs);
  flex-shrink: 0;
}
}


/* === ./components/kpi.css === */
@layer components {
/* KPI Item List */
.z-kpi-list {
  display: flex;
  flex-direction: column;
}

/* KPI Item */
.z-kpi-item {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border-default);
  min-height: var(--touch-target-min, 44px);
}
.z-kpi-item:last-child {
  border-bottom: none;
}
.z-kpi-item--muted {
  background: var(--surface-sunken);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  margin-top: var(--space-2);
  border-bottom: none;
}
.z-kpi-item__main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.z-kpi-item__info {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}
/* Mobile-First: smaller label on mobile, normal at 640px+ */
.z-kpi-item__label {
  font-size: var(--text-xs);
  color: var(--text-secondary);
}
@media (min-width: 640px) {
  .z-kpi-item__label {
    font-size: var(--text-sm);
  }
}
.z-kpi-item__value {
  font-size: var(--text-lg);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  letter-spacing: -0.01em;
  color: var(--text-primary);
}

/* Featured variant: emphasize primary KPI with larger, bolder numeric */
.z-kpi-item--featured .z-kpi-item__value {
  font-size: var(--text-2xl);
  font-weight: var(--fw-bold);
  letter-spacing: -0.015em;
}
.z-kpi-item--featured .z-kpi-item__label {
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
}
.z-kpi-item__unit {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  margin-left: 2px;
}
.z-kpi-item__status {
  flex-shrink: 0;
}
.z-kpi-item__hint {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}
.z-kpi-item__hint .material-symbols-outlined {
  font-size: 14px;
  width: 14px;
  min-width: 14px;
  max-width: 14px;
  height: 14px;
}

/* KPI Gauge */
.z-kpi-gauge {
  position: relative;
  height: 6px;
  background: var(--surface-sunken);
  border-radius: var(--radius-xs);
  margin-top: var(--space-2);
  overflow: visible;
}
.z-kpi-gauge__fill {
  height: 100%;
  border-radius: var(--radius-xs);
  transition: width var(--transition-slow);
}
.z-kpi-gauge__fill--good { background: var(--sem-positive); }
.z-kpi-gauge__fill--normal { background: var(--sem-info); }
.z-kpi-gauge__fill--check { background: var(--sem-warning); }
.z-kpi-gauge__fill--risk { background: var(--sem-negative); }
.z-kpi-gauge__fill--na { background: var(--border-default); }
.z-kpi-gauge__marker {
  position: absolute;
  top: -3px;
  width: 12px;
  height: 12px;
  background: var(--surface-raised);
  border: 2px solid var(--text-tertiary);
  border-radius: 50%;
  transform: translateX(-50%);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
}


/* === ./components/cashflow.css === */
@layer components {
/* Cashflow Summary Grid */
.z-cf-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}

/* Cashflow Summary Card */
.z-cf-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-4);
  background: var(--surface-raised);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
}
.z-cf-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}
.z-cf-card__label {
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--text-primary);
}
.z-cf-card__value {
  font-size: var(--text-lg);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: var(--lh-tight);
  margin-top: var(--space-1);
}
.z-cf-card__unit {
  font-size: var(--text-xs);
  font-weight: var(--fw-normal);
  color: var(--text-tertiary);
  margin-left: 2px;
}
.z-cf-card__period {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  margin-top: var(--space-1);
}

/* Desktop: wider grid and larger value size */
@media (min-width: 768px) {
  .z-cf-grid {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  }
  .z-cf-card__value {
    font-size: var(--text-xl);
  }
}
}


/* === ./components/series.css === */
@layer components {
/* Series tab: chart grid and cards */
.z-series-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
.z-series-card {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  background: var(--surface-raised);
}
.z-series-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-2);
}
.z-series-card__title {
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
}
.z-series-card__stats {
  display: flex;
  gap: var(--space-4);
  margin-bottom: var(--space-3);
}
.z-series-card__stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.z-series-card__stat-value {
  font-size: var(--text-base);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
}
.z-series-card__stat-label {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}
.z-series-card__chart {
  height: 160px;
}

/* Desktop: multi-column grid and taller charts */
@media (min-width: 768px) {
  .z-series-grid {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  }
  .z-series-card__chart {
    height: 180px;
  }
}
}


/* === ./components/company.css === */
@layer components {
/* Insight Points */
.z-insight {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border-default);
}
.z-insight:last-child {
  border-bottom: none;
}
.z-insight__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.z-insight__body strong {
  font-size: var(--text-sm);
}
.z-insight__body span {
  font-size: var(--text-xs);
  color: var(--text-secondary);
}

/* Data Row (label-value pair) */
.z-data-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  flex-wrap: wrap;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border-default);
}
.z-data-row:last-child {
  border-bottom: none;
}
.z-data-row__label {
  font-size: var(--text-sm);
  color: var(--text-primary);
}
.z-data-row__value {
  font-weight: var(--fw-semibold);
}
.z-data-row__unit {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  margin-left: 1px;
}
.z-data-row__sub {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  margin-left: var(--space-1);
}

/* Company header BEM utilities */
.z-company-header__title {
  font-size: var(--text-2xl);
  font-weight: var(--fw-bold);
  margin: 0;
}
.z-company-header__meta {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}
.z-company-header__date {
  color: var(--text-tertiary);
}

/* Compare toggle button on company header (dashboard 改善 9 / 2026-05-04) */
.z-compare-toggle-btn {
  font-size: var(--text-xs);
  white-space: nowrap;
}
.z-compare-toggle-btn__count {
  font-size: var(--text-xs);
  opacity: 0.85;
  margin-left: var(--space-1);
  font-variant-numeric: tabular-nums;
}
.z-compare-toggle-go {
  font-size: var(--text-xs);
  white-space: nowrap;
}
.z-company-header__badge {
  font-size: var(--text-lg);
}

/* ==========================================================================
   主要 KPI ストリップ (全タブで表示、dashboard 改善 2 / 2026-05-03)
   ========================================================================== */
/* mobile-first: base = 2 列, font-base. tablet 以上で auto-fit + font-lg */
.z-company-kpi-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding: var(--space-3) var(--space-2);
  background: var(--surface-sunken, #f8fafc);
  border-radius: var(--radius-md, 8px);
  border: 1px solid var(--border-subtle, #e5e7eb);
}
.z-company-kpi-strip__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-1);
}
.z-company-kpi-strip__label {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  margin-bottom: var(--space-1);
  white-space: nowrap;
}
.z-company-kpi-strip__value {
  font-size: var(--text-base);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  line-height: var(--lh-tight);
}
.z-company-kpi-strip__value small {
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
  margin-left: 1px;
}
.z-company-kpi-strip__value--positive {
  color: var(--positive, #10b981);
}
.z-company-kpi-strip__value--negative {
  color: var(--negative, #dc2626);
}
@media (min-width: 576px) {
  .z-company-kpi-strip {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  }
  .z-company-kpi-strip__value {
    font-size: var(--text-lg);
  }
}

}


/* === ./components/risk_signal.css === */
/* risk_signal.css — リスク信号機統一カラー (#198)
 * CSS variables で定義し、既存 --sem-* トークンを alias として使用。
 * ダークモード対応は [data-theme="dark"] + @media prefers-color-scheme の二重定義。
 * 既存 badge.css の z-badge--positive/negative/warning/info と併存。
 * peer-dist-bar（F2 Q1-Q3 分布バー）も同ファイルに定義。
 */

@layer components {
  :root {
    --signal-green:     var(--sem-positive, #059669);
    --signal-yellow:    var(--sem-warning,  #d97706);
    --signal-red:       var(--sem-negative, #dc2626);
    --signal-grey:      var(--text-disabled, #94a3b8);

    --signal-green-bg:  color-mix(in srgb, var(--signal-green)  12%, var(--surface-base, #fff));
    --signal-yellow-bg: color-mix(in srgb, var(--signal-yellow) 12%, var(--surface-base, #fff));
    --signal-red-bg:    color-mix(in srgb, var(--signal-red)     8%, var(--surface-base, #fff));
    --signal-grey-bg:   color-mix(in srgb, var(--signal-grey)   10%, var(--surface-base, #fff));
  }

  .risk-signal {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1, 4px);
    padding: 3px var(--space-2, 8px);
    border-radius: var(--radius-full, 9999px);
    font-size: var(--text-xs, 0.75rem);
    font-weight: var(--fw-medium, 500);
    line-height: 1.5;
    white-space: nowrap;
    border: 1px solid transparent;
    cursor: default;
  }

  .risk-signal--green {
    background: var(--signal-green-bg);
    color: var(--signal-green);
    border-color: color-mix(in srgb, var(--signal-green) 30%, transparent);
  }

  .risk-signal--yellow {
    background: var(--signal-yellow-bg);
    color: var(--signal-yellow);
    border-color: color-mix(in srgb, var(--signal-yellow) 35%, transparent);
  }

  .risk-signal--red {
    background: var(--signal-red-bg);
    color: var(--signal-red);
    border-color: color-mix(in srgb, var(--signal-red) 25%, transparent);
  }

  .risk-signal--grey {
    background: var(--signal-grey-bg);
    color: var(--signal-grey);
    border-color: color-mix(in srgb, var(--signal-grey) 20%, transparent);
  }

  /* 分布バー（F2 Q1-Q3 表示） */
  .peer-dist-bar {
    position: relative;
    height: 6px;
    border-radius: var(--radius-full, 9999px);
    background: var(--surface-sunken, #f1f5f9);
    margin: var(--space-1, 4px) 0;
  }

  .peer-dist-bar__range {
    position: absolute;
    height: 100%;
    border-radius: var(--radius-full, 9999px);
    background: color-mix(in srgb, var(--brand-primary, #2563eb) 25%, transparent);
  }

  .peer-dist-bar__marker {
    position: absolute;
    top: -3px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--brand-primary, #2563eb);
    transform: translateX(-50%);
  }
}

/* ---- ダークモード（既存パターン: [data-theme="dark"] + @media の二重定義） ---- */

[data-theme="dark"] {
  --signal-green:  var(--sem-positive, #34d399);
  --signal-yellow: var(--sem-warning,  #fbbf24);
  --signal-red:    var(--sem-negative, #f87171);
  --signal-grey:   var(--text-disabled, #64748b);
}

@media (prefers-color-scheme: dark) {
  :root {
    --signal-green:  var(--sem-positive, #34d399);
    --signal-yellow: var(--sem-warning,  #fbbf24);
    --signal-red:    var(--sem-negative, #f87171);
    --signal-grey:   var(--text-disabled, #64748b);
  }
}


/* === ./components/cookie-consent.css === */
@layer components {
  .cookie-consent {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: var(--z-toast);
    background: var(--surface-raised);
    border-top: 1px solid var(--border-default);
    box-shadow: var(--shadow-sm);
    padding: 1rem;
  }
  .cookie-consent-inner {
    max-width: 1140px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
  }
  .cookie-consent-text {
    flex: 1;
    margin: 0;
    font-size: var(--text-sm);
    color: var(--text-secondary);
    min-width: 200px;
  }
  .cookie-consent-text a {
    text-decoration: underline;
  }
  .cookie-consent-actions {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
  }
}


/* === ./components/cross-analysis.css === */
@layer components {
  /* Filter form layout */
  .ca-filter-form {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: flex-end;
  }
  .ca-filter-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
  }
  .ca-filter-label {
    font-size: var(--text-xs);
    font-weight: var(--fw-semibold);
    color: var(--text-tertiary);
  }
  .ca-select--sm   { min-width: 120px; }
  .ca-select--md   { min-width: 130px; }
  .ca-select--lg   { min-width: 160px; }

  /* Card header with flex actions */
  .ca-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-2);
  }
  .ca-card-actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
  }
  .ca-btn-group {
    display: flex;
    gap: var(--space-1);
    flex-wrap: wrap;
  }

  /* Chart container */
  .ca-chart { width: 100%; height: 560px; min-height: 300px; }

  /* Table: score bar cell */
  .ca-score-cell {
    display: flex;
    align-items: center;
    gap: 4px;
    justify-content: flex-end;
  }
  .ca-score-bar {
    width: 40px;
    height: 4px;
    background: var(--border-subtle);
    border-radius: var(--radius-xs);
    flex-shrink: 0;
  }
  .ca-score-bar__fill { height: 4px; border-radius: var(--radius-xs); }

  /* Empty-row cell */
  .ca-empty-cell {
    text-align: center;
    color: var(--text-tertiary);
    padding: var(--space-6);
  }
  /* Quadrant grid gap */
  .ca-quad-grid { gap: var(--space-3); }

  .fm-quad-card { border-radius:var(--radius-md); padding:var(--space-3) var(--space-4); text-align:center; }
  .fm-quad-card--excellent {
    background:   color-mix(in srgb, var(--sem-positive) 8%, var(--surface-base));
    border: 1px solid color-mix(in srgb, var(--sem-positive) 20%, transparent);
  }
  .fm-quad-card--info {
    background:   color-mix(in srgb, var(--sem-info) 6%, var(--surface-base));
    border: 1px solid color-mix(in srgb, var(--sem-info) 20%, transparent);
  }
  .fm-quad-card--warning {
    background:   color-mix(in srgb, var(--sem-warning) 6%, var(--surface-base));
    border: 1px solid color-mix(in srgb, var(--sem-warning) 20%, transparent);
  }
  .fm-quad-card--muted {
    background:   color-mix(in srgb, var(--text-tertiary) 5%, var(--surface-base));
    border: 1px solid color-mix(in srgb, var(--text-tertiary) 15%, transparent);
  }
  .fm-quad-card__count { font-size:var(--text-2xl); font-weight:var(--fw-bold); line-height:1.2; }
  .fm-quad-card__label { font-size:var(--text-xs); color:var(--text-secondary); margin-top:2px; }
  .fm-pick { min-width:200px; max-width:220px; border:1px solid var(--border-subtle); border-radius:var(--radius-md); padding:var(--space-3); background:var(--surface-base); transition:box-shadow 0.15s; }
  .fm-pick:hover { box-shadow:0 2px 8px rgba(0,0,0,0.08); }
  .fm-pick__rank { font-size:var(--text-lg); font-weight:var(--fw-bold); color:var(--text-tertiary); }
  .fm-pick__score { font-size:var(--text-3xl); font-weight:var(--fw-bold); color:var(--text-primary); text-align:center; }
  .fm-bar { height:4px; background:var(--border-subtle); border-radius:2px; }
  .fm-bar__fill { height:4px; border-radius:2px; }
  .fm-pick__metrics { border-top:1px solid var(--border-subtle); padding-top:var(--space-2); display:grid; grid-template-columns:1fr 1fr; gap:2px var(--space-2); }
  .fm-kv { display:flex; justify-content:space-between; font-size:var(--text-xs); }
  .fm-kv--mb2 { margin-bottom:2px; }
  .fm-kv__label { color:var(--text-tertiary); }
  .fm-kv__value { font-weight:var(--fw-semibold); }
  /* Details/summary collapsible */
  .ca-summary-header { list-style:none; display:flex; align-items:center; gap:var(--space-2); }
  .ca-summary-header::-webkit-details-marker { display:none; }
  /* Mobile-first: single column on mobile, two columns on desktop */
  .ca-explain-grid { display:grid; grid-template-columns:1fr; gap:var(--space-4); }
  @media (min-width: 640px) {
    .ca-explain-grid { grid-template-columns:1fr 1fr; }
  }
  .fm-explain { font-size:var(--text-xs); color:var(--text-secondary); line-height:1.6; }
  .fm-explain dt { font-weight:var(--fw-semibold); color:var(--text-primary); display:inline; }
  .fm-explain dd { display:inline; margin:0; }
}


/* === ./components/article.css === */
@layer components {
  .z-article-body {
    font-size: var(--text-base);
    line-height: 1.8;
    color: var(--text-primary);
  }
  .z-article-body h2 {
    font-size: var(--text-xl);
    font-weight: var(--fw-bold);
    margin: var(--space-8) 0 var(--space-3) 0;
    padding-bottom: var(--space-2);
    border-bottom: 2px solid var(--border-default);
  }
  .z-article-body h3 {
    font-size: var(--text-lg);
    font-weight: var(--fw-semibold);
    margin: var(--space-6) 0 var(--space-2) 0;
  }
  .z-article-body p {
    margin: 0 0 var(--space-4) 0;
  }
  .z-article-body ul, .z-article-body ol {
    margin: 0 0 var(--space-4) 0;
    padding-left: var(--space-6);
  }
  .z-article-body li {
    margin-bottom: var(--space-1);
  }
  .z-article-body blockquote {
    border-left: 4px solid var(--brand-primary);
    padding: var(--space-3) var(--space-4);
    margin: 0 0 var(--space-4) 0;
    background: var(--surface-raised);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    color: var(--text-secondary);
  }
  .z-article-body pre {
    background: var(--surface-raised);
    padding: var(--space-4);
    border-radius: var(--radius-md);
    overflow-x: auto;
    margin: 0 0 var(--space-4) 0;
    font-size: var(--text-sm);
  }
  .z-article-body code {
    font-family: var(--font-mono);
    font-size: 0.9em;
    background: var(--surface-raised);
    padding: 0.15em 0.35em;
    border-radius: var(--radius-sm);
  }
  .z-article-body pre code {
    background: none;
    padding: 0;
  }
  .z-article-body img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    margin: var(--space-4) 0;
  }
  .z-article-body a {
    color: var(--brand-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
  }
  .z-article-body a:hover {
    color: var(--brand-primary-hover);
  }
  .z-article-body table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 var(--space-4) 0;
    font-size: var(--text-sm);
  }
  .z-article-body th, .z-article-body td {
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--border-default);
    text-align: left;
  }
  .z-article-body th {
    background: var(--surface-raised);
    font-weight: var(--fw-semibold);
  }
}


/* === ./components/metric-guide.css === */
/* ==========================================================================
   components/metric-guide.css -- Metric guide panel (collapsible)
   Shared across growth / valuation / soundness / scatter analysis tabs.
   ========================================================================== */
@layer components {

.metric-guide {
  background: color-mix(in srgb, var(--sem-info) 8%, var(--surface-base));
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.metric-guide .guide-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.25rem;
  cursor: pointer;
  transition: background var(--transition-normal);
}

.metric-guide .guide-header:hover {
  background: color-mix(in srgb, var(--sem-positive) 8%, var(--surface-base));
}

.metric-guide .guide-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--sem-positive);
}

.metric-guide .guide-title {
  font-weight: 600;
  font-size: var(--text-sm);
}

.metric-guide .guide-chevron {
  color: var(--sem-positive);
  transition: transform var(--transition-slow);
}

.metric-guide .guide-header[aria-expanded="true"] .guide-chevron {
  transform: rotate(180deg);
}

.metric-guide .guide-body {
  padding: 0 1.25rem 1.25rem;
  border-top: 1px solid var(--border-strong);
}

.metric-guide .guide-section {
  padding-top: 1rem;
}

.metric-guide .guide-section h4 {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--sem-positive);
  margin-bottom: 0.5rem;
}

.metric-guide .guide-section p {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-bottom: 1rem;
  line-height: var(--lh-relaxed);
}

.metric-guide .guide-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.metric-guide .guide-card {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface-base);
  padding: 0.75rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-default);
}

.metric-guide .guide-card-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-inverse);
  font-weight: 700;
  font-size: var(--text-sm);
  flex-shrink: 0;
}

.metric-guide .guide-card-content {
  display: flex;
  flex-direction: column;
  font-size: var(--text-xs);
}

.metric-guide .guide-card-content strong {
  color: var(--text-primary);
}

.metric-guide .guide-card-content span {
  color: var(--text-tertiary);
  font-size: var(--text-xs);
}

.metric-guide .guide-tip {
  background: color-mix(in srgb, var(--sem-warning) 15%, var(--surface-base));
  border: 1px solid color-mix(in srgb, var(--sem-warning) 40%, transparent);
  border-radius: var(--radius-md);
  padding: 0.75rem 1rem;
  font-size: var(--text-xs);
  color: var(--brand-accent-hover);
}

/* Metric threshold table */
.metric-guide .guide-thresholds {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-xs);
  margin-bottom: 1rem;
}

.metric-guide .guide-thresholds th {
  background: color-mix(in srgb, var(--sem-positive) 8%, var(--surface-base));
  color: var(--sem-positive);
  font-weight: 600;
  padding: 0.5rem 0.75rem;
  text-align: left;
  border-bottom: 2px solid var(--border-strong);
  font-size: var(--text-xs);
}

.metric-guide .guide-thresholds td {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--border-default);
  color: var(--text-secondary);
}

.metric-guide .guide-thresholds tr:last-child td {
  border-bottom: none;
}

.metric-guide .guide-thresholds .th-good {
  color: var(--sem-positive);
  font-weight: 600;
}

.metric-guide .guide-thresholds .th-normal {
  color: var(--sem-warning);
  font-weight: 600;
}

.metric-guide .guide-thresholds .th-caution {
  color: var(--sem-negative);
  font-weight: 600;
}

.metric-guide .guide-note {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  line-height: var(--lh-relaxed);
  margin-bottom: 0.75rem;
}

.metric-guide .guide-glossary-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-xs);
  color: var(--sem-positive);
  text-decoration: none;
  font-weight: 500;
}

.metric-guide .guide-glossary-link:hover {
  text-decoration: underline;
}

} /* @layer components */


/* === ./finance-table.css === */
/* ==========================================================================
   finance-table.css
   Bootstrap-compatible table classes for finance_table.html macro ONLY.
   DO NOT load full Tabler/Bootstrap CSS — it conflicts with v2 @layer cascade.
   ========================================================================== */

/* --- Table Base --- */
.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  /* Scroll shadow: left/right gradient to indicate hidden content */
  background:
    linear-gradient(to right, var(--surface-raised, #fff) 0%, transparent 100%) 0 50% / 2rem 100% no-repeat,
    linear-gradient(to left, var(--surface-raised, #fff) 0%, transparent 100%) 100% 50% / 2rem 100% no-repeat,
    linear-gradient(to right, var(--border-default, #e2e8f0) 0%, transparent 100%) 0 50% / 0.5rem 100% no-repeat,
    linear-gradient(to left, var(--border-default, #e2e8f0) 0%, transparent 100%) 100% 50% / 0.5rem 100% no-repeat;
  background-attachment: local, local, scroll, scroll;
}
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-xs, 0.75rem);
  color: var(--text-primary, #1e293b);
}
.table > thead > tr > th,
.table > tbody > tr > td {
  padding: 0.35rem 0.4rem;
  vertical-align: middle;
  border-bottom: 1px solid var(--border-default, #e2e8f0);
}
@media (min-width: 768px) {
  .table {
    font-size: var(--text-sm, 0.875rem);
  }
  .table > thead > tr > th,
  .table > tbody > tr > td {
    padding: 0.75rem;
  }
}
.table > thead > tr > th {
  font-weight: var(--fw-semibold, 600);
  white-space: nowrap;
}

/* --- Sticky first column (企業名列の固定) --- */
.table-sticky-first > thead > tr > th:first-child,
.table-sticky-first > tbody > tr > td:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--surface-raised, #fff);
}
.table-sticky-first > thead > tr > th:first-child {
  z-index: 3;
  background: var(--surface-muted, #f8fafc);
}

/* table-sm: compact */
.table.table-sm > thead > tr > th,
.table.table-sm > tbody > tr > td {
  padding: 0.4rem 0.6rem;
}

/* table-hover */
.table.table-hover > tbody > tr:hover {
  background: var(--surface-hover, rgba(0,0,0,0.03));
}

/* table-light: header & total rows */
.table-light,
.table > thead.table-light > tr > th,
tr.table-light > td {
  background: var(--surface-muted, #f8fafc);
}

/* --- Utility Classes --- */
.text-end { text-align: right; }
.text-center { text-align: center; }
.text-muted { color: var(--text-tertiary, #94a3b8); }
.text-secondary { color: var(--text-secondary, #64748b); }
.text-danger { color: var(--danger, #ef4444); }
.text-warning { color: var(--warning, #d4a017); }
.fw-bold { font-weight: var(--fw-bold, 700); }
.mb-0 { margin-bottom: 0; }
.me-1 { margin-right: 0.25rem; }
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.small, small { font-size: 0.8125em; }

/* --- Badge --- */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.2em 0.5em;
  font-size: 0.75em;
  font-weight: var(--fw-semibold, 600);
  border-radius: var(--radius-sm, 4px);
  line-height: 1;
  white-space: nowrap;
}
.bg-warning-lt { background: color-mix(in srgb, var(--sem-warning) 12%, transparent); }
.bg-primary-lt { background: color-mix(in srgb, var(--brand-primary) 12%, transparent); }
.bg-secondary-lt { background: color-mix(in srgb, var(--text-tertiary) 12%, transparent); }

/* --- finance_table.html macro specific classes --- */
/* Table header with sunken background */
.ft-thead {
  background: var(--surface-sunken);
}

/* Column width and alignment for render_finance_table */
.ft-col-subject {
  width: 40%;
}
.ft-col-amount {
  width: 25%;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.ft-col-ratio {
  width: 20%;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--text-tertiary);
}
.ft-col-note {
  width: 15%;
  text-align: center;
  color: var(--text-tertiary);
  font-size: var(--text-xs);
}

/* Indent marker (└) for sub-items */
.ft-indent-marker {
  color: var(--text-tertiary);
  margin-right: 0.25rem;
}

/* Extra items (not in display_order): padding-left only */
.ft-extra-item {
  padding-left: 1rem;
}

/* sr-only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* === ./pages-v2.css === */
@layer pages {
  /* Cross-page: stat card values (tab_valuation, tab_soundness) */
  .z-stat-value {
    font-size: var(--text-2xl);
    font-weight: var(--fw-bold);
  }
  .z-stat-label {
    font-size: var(--text-sm);
    font-weight: var(--fw-semibold);
    margin-top: var(--space-1);
  }
  .z-stat-sub {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
  }

  /* Cross-page: criterion card (guide panels in valuation/soundness) */
  .z-criterion-card {
    padding: var(--space-3) var(--space-4);
  }
  .z-criterion-card--positive { border-left: 3px solid var(--sem-positive); }
  .z-criterion-card--info     { border-left: 3px solid var(--sem-info); }
  .z-criterion-card--warning  { border-left: 3px solid var(--sem-warning); }
  .z-criterion-card--negative { border-left: 3px solid var(--sem-negative); }
  .z-criterion-card--chart6   { border-left: 3px solid var(--chart-6); }
  .z-criterion-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    color: var(--text-inverse);
    font-size: var(--text-xs);
    font-weight: var(--fw-bold);
    margin-bottom: var(--space-2);
  }
  .z-criterion-icon--positive  { background: var(--sem-positive); }
  .z-criterion-icon--info      { background: var(--sem-info); }
  .z-criterion-icon--warning   { background: var(--sem-warning); }
  .z-criterion-icon--negative  { background: var(--sem-negative); }
  .z-criterion-icon--chart6    { background: var(--chart-6); }
  .z-criterion-text {
    font-size: var(--text-sm);
    color: var(--text-secondary);
  }

  /* Cross-page: semantic color for table cells */
  .z-cell--positive { color: var(--positive); }
  .z-cell--negative { color: var(--negative); }

  /* About page: feature grid — Mobile-First (1 column base) */
  .z-about-features {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
  @media (min-width: 576px) {
    .z-about-features {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  /* ===================================================================
     Cross-page: reusable patterns for data pages
     =================================================================== */

  /* Code link: consistent style for company code links across all tables */
  .z-code-link {
    color: var(--brand-primary);
    font-weight: var(--fw-semibold);
    text-decoration: none;
  }
  .z-code-link:hover {
    color: var(--brand-primary-hover);
    text-decoration: underline;
  }

  /* Chart height: Mobile-First — smaller on mobile, larger on desktop */
  .z-chart--lg { height: 300px; }
  .z-chart--md { height: 240px; }
  .z-chart--sm { height: 180px; }
  @media (min-width: 768px) {
    .z-chart--lg { height: 380px; }
    .z-chart--md { height: 280px; }
    .z-chart--sm { height: 200px; }
  }

  /* Legend bar: reusable for heatmap/treemap legends */
  .z-legend-bar {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-xs);
    color: var(--text-tertiary);
  }
  .z-legend-bar__gradient {
    display: flex;
    height: 10px;
    border-radius: var(--radius-full);
    overflow: hidden;
    flex: 1;
    max-width: 200px;
  }
  .z-legend-bar__gradient span {
    flex: 1;
  }

  /* ===================================================================
     About page
     =================================================================== */

  /* Page-level max-width container */
  .z-about-page {
    max-width: 800px;
    margin: 0 auto;
  }

  /* Section heading (h2 outside z-card) */
  .z-section-heading {
    font-size: var(--text-lg);
    font-weight: var(--fw-semibold);
    margin-bottom: var(--space-4);
    color: var(--text-primary);
  }

  /* Subsection heading (h3 within feature sections) */
  .z-subsection-heading {
    font-size: var(--text-base);
    font-weight: var(--fw-semibold);
    color: var(--text-secondary);
  }

  /* Feature card: icon (brand-primary, no-shrink) */
  .z-feature-icon {
    color: var(--brand-primary);
    flex-shrink: 0;
  }

  /* Feature card: title */
  .z-feature-title {
    font-size: var(--text-base);
    font-weight: var(--fw-semibold);
    margin-bottom: var(--space-1);
  }

  /* Feature card: description */
  .z-feature-desc {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: var(--lh-relaxed);
  }

  /* Datasource list layout */
  .z-datasource-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }
  .z-datasource-item {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
  }
  .z-datasource-icon {
    color: var(--sem-info);
    flex-shrink: 0;
    font-size: var(--text-xl);
  }
  .z-datasource-title {
    font-size: var(--text-sm);
  }
  .z-datasource-desc {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin-top: var(--space-1);
    line-height: var(--lh-relaxed);
  }
  .z-datasource-link {
    color: var(--brand-primary);
  }
  .z-datasource-note {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border-default);
  }

  /* Target-users: checklist */
  .z-check-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }
  .z-check-icon {
    color: var(--sem-positive);
    flex-shrink: 0;
    font-size: var(--text-xl);
  }
  .z-check-desc {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: var(--lh-relaxed);
  }

  /* Prose paragraph (sm + relaxed + secondary) */
  .z-prose-sm {
    font-size: var(--text-sm);
    line-height: var(--lh-relaxed);
    color: var(--text-secondary);
  }
  .z-prose-sm + .z-prose-sm {
    margin-top: 0;
  }

  /* ===================================================================
     tab_growth / scatter stat cards
     =================================================================== */

  /* Stat card: value typography */
  .z-stat-card-value {
    font-size: var(--text-2xl);
    font-weight: var(--fw-bold);
  }
  .z-stat-card-value--positive { color: var(--sem-positive); }
  .z-stat-card-value--info     { color: var(--sem-info); }
  .z-stat-card-value--warning  { color: var(--sem-warning); }
  .z-stat-card-value--negative { color: var(--sem-negative); }

  /* Stat card: label typography */
  .z-stat-card-label {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
  }

  /* Rank number (tertiary, sm) */
  .z-rank-num {
    font-size: var(--text-sm);
    color: var(--text-tertiary);
  }

  /* Company code link with semibold */
  .z-col-code-link {
    font-weight: var(--fw-semibold);
  }

  /* Bottom growth table: negative title */
  .z-title--negative {
    color: var(--negative);
  }

  /* Guide: section sub-heading */
  .z-guide-subheading {
    font-weight: var(--fw-semibold);
    margin-bottom: var(--space-2);
  }

  /* Guide: sub-heading with larger bottom margin */
  .z-guide-subheading--lg {
    font-weight: var(--fw-semibold);
    margin-bottom: var(--space-3);
  }

  /* Stage card: symbol icon (lg text) */
  .z-stage-icon {
    font-size: var(--text-lg);
    flex-shrink: 0;
  }
  .z-stage-icon--positive { color: var(--sem-positive); }
  .z-stage-icon--info     { color: var(--sem-info); }
  .z-stage-icon--warning  { color: var(--sem-warning); }
  .z-stage-icon--negative { color: var(--sem-negative); }

  /* Stage card: title */
  .z-stage-title {
    font-size: var(--text-sm);
    font-weight: var(--fw-semibold);
  }

  /* Stage card: body text */
  .z-stage-desc {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    margin: var(--space-1) 0 0;
  }

  /* Chart footnote */
  .z-chart-footnote {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    margin-top: var(--space-2);
  }

  /* Collapse icon (xs, tertiary) */
  .z-collapse-icon {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
  }

  /* SVG inline icon: vertical-align helper */
  .z-svg-icon {
    vertical-align: middle;
    margin-right: 4px;
  }

  /* ===================================================================
     Calendar page
     =================================================================== */

  /* Info bar (bg-secondary) */
  .z-info-bar {
    background: var(--surface-secondary);
  }

  /* Calendar section heading */
  .z-cal-section-heading {
    font-size: var(--text-lg);
    font-weight: var(--fw-semibold);
    margin: 0 0 var(--space-4) 0;
  }

  /* Badge margin-left in headings */
  .z-badge--heading {
    margin-left: var(--space-2);
  }

  /* Date group: filing count label */
  .z-date-count {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    margin-left: var(--space-2);
  }

  /* Table card body: no padding */
  .z-card__body--flush {
    padding: 0;
  }

  /* Table cell: monospace code */
  .z-cell-mono {
    font-family: monospace;
    font-size: var(--text-sm);
  }

  /* Table cell: secondary xs text */
  .z-cell-xs {
    font-size: var(--text-xs);
    color: var(--text-secondary);
  }

  /* Table cell: secondary sm text */
  .z-cell-sm {
    font-size: var(--text-sm);
    color: var(--text-secondary);
  }

  /* Table cell: tertiary xs text (null / unknown) */
  .z-cell-xs--tertiary {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
  }

  /* Badge font-size override for xs inside tables */
  .z-badge--xs {
    font-size: var(--text-xs);
  }

  /* Select: auto width */
  .z-select--auto {
    width: auto;
  }

  /* u-mb extensions */
  .u-mb-8  { margin-bottom: var(--space-8); }
  .u-mb-12 { margin-bottom: var(--space-12); }

  /* ===================================================================
     Inline-to-CSS migration: final batch
     =================================================================== */

  /* Watchlist: code input width */
  .watchlist-code-input { width: 140px; }

  /* Sector performance: warning border card */
  .z-card--warning-border { border-left: 3px solid var(--color-warning); }

  /* Sector performance: min-width table */
  .z-table--min720 { min-width: 720px; }

  /* Sector performance / table: clickable row */
  .z-tr--clickable { cursor: pointer; }

  /* Sector detail: benchmark row */
  .z-tr--benchmark {
    background: var(--surface-raised);
    font-size: var(--text-xs);
  }

  /* Articles: article card title */
  .article-card-title {
    font-size: var(--text-base);
    font-weight: var(--fw-semibold);
    margin: 0 0 var(--space-2) 0;
    line-height: 1.5;
  }

  /* Articles: article card summary (3-line clamp) */
  .article-card-summary {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Delisted: filter field (flex-grow + min-width + no-bottom-margin) */
  .delisted-filter-field {
    flex: 1;
    min-width: 160px;
    margin-bottom: 0;
  }

  /* Delisted: pagination nav */
  .delisted-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-6) 0;
  }

  /* Changes: select with auto width */
  .z-input--auto { width: auto; }

  /* Finance tab: no-data placeholder */
  .finance-no-data { padding: var(--space-6); }

  /* Error page: nav card body */
  .error-nav-card {
    text-align: center;
    padding: var(--space-4);
  }

  /* Error page: nav icon */
  .error-nav-icon {
    font-size: 32px;
    color: var(--brand-primary);
  }

  /* Error page: nav label */
  .error-nav-label {
    margin-top: var(--space-2);
    font-size: var(--text-sm);
    color: var(--text-secondary);
  }

}


/* === ./pages.css === */
/* ==========================================================================
   pages.css -- Page-specific styles extracted from inline <style> blocks
   ========================================================================== */


/* ==================================================================
   Shared utilities (used across multiple pages)
   ================================================================== */

/* ------------------------------------------------------------------
   Shared utility: card header meta text (xs, secondary/tertiary color)
   Used in quarterly, summary, and other company tabs.
   ------------------------------------------------------------------ */
.z-card__meta {
  font-size: var(--text-xs);
  color: var(--text-secondary);
}
.z-card__meta--tertiary {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

/* z-card__body with no top padding — used when chart/table starts flush */
.z-card__body--notop {
  padding-top: 0;
}

/* z-card__body with border-top separator */
.z-card__body--border-top {
  border-top: 1px solid var(--border-default);
  padding-top: var(--space-3);
}

/* Scrollable table wrapper */
.z-table-scroll {
  overflow-x: auto;
}

/* Sticky first column in z-table */
.z-table__sticky-col {
  position: sticky;
  left: 0;
  z-index: 1;
}

/* Row header label in z-table */
.z-table__label {
  font-weight: var(--fw-medium);
}

/* Inline unit suffix (億, %) */
.z-unit {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

/* Disabled / missing data placeholder */
.z-text-disabled {
  color: var(--text-disabled);
}

/* Nav card icon with brand color */
.z-icon--brand {
  color: var(--brand-primary);
}

/* Nav card label text */
.z-nav-label {
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
}

/* Subtle card background (inside grid cards, momentum items) */
.z-card--subtle {
  background: var(--surface-sunken);
}

/* Momentum label / value inside quarterly momentum cards */
.z-momentum-label {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  margin-bottom: var(--space-1);
}
.z-momentum-value {
  font-size: var(--text-lg);
  font-weight: var(--fw-semibold);
}

/* CF item row: "label: value" pairs */
.z-cf-item {
  font-size: var(--text-sm);
}
.z-cf-item__label {
  color: var(--text-tertiary);
}
.z-cf-item__value {
  font-weight: var(--fw-medium);
}

/* Table footnote row */
.z-table__footnote {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  border-top: 1px solid var(--border-default);
}

/* Loading placeholder center */
.z-loading-placeholder {
  text-align: center;
  padding: var(--space-4) 0;
  color: var(--text-tertiary);
}

/* Card body: no padding (for table wrap) */
.z-card__body--no-pad {
  padding: 0;
}

/* Card actions flex row */
.z-card__actions--row {
  display: flex;
  gap: var(--space-1);
}

/* Valuation Map (valuation_map.html) - unit styling */
.stat-card .unit {
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--text-tertiary);
  margin-left: 2px;
}


/* ==================================================================
   Page-specific CSS — split for maintainability.
   Each file contains styles for a single page or functional group.

   IMPORTANT: 以下の @import 宣言は CSS 仕様上は文中位置のため
   ブラウザに無視される（2026-05-04 判明）。**実ロードは bundle-v2.css 側
   の import セクションが行う**。下の宣言は SSOT としてのファイル一覧 + 既存の
   tests/app/test_css_audit.py が pages.css を起点に @import を辿る仕組みのため
   保持している。新規 page CSS を追加する際は **両方** に同期させること。
   ================================================================== */
/* ==========================================================================
   pages/tab-summary.css -- Company Tab: Summary (.tab-summary)
   Split from pages/company-tabs.css for maintainability
   ========================================================================== */

@layer pages {

.tab-summary {
  --status-excellent: var(--sem-positive);
  --status-good: #22c55e;
  --status-fair: #eab308;
  --status-poor: #f97316;
  --status-critical: var(--sem-negative);
  --gradient-profit: linear-gradient(135deg, var(--sem-positive), var(--status-excellent));
  --gradient-growth: linear-gradient(135deg, var(--sem-info) 0%, #0f766e 100%);
  --gradient-health: linear-gradient(135deg, var(--chart-6) 0%, #6d28d9 100%);
  --gradient-cash: linear-gradient(135deg, var(--brand-accent-bg) 0%, #a16207 100%);
}

.tab-summary .summary-header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.tab-summary .summary-header-title {
  font-size: var(--text-base);
  font-weight: 600;
  margin: 0;
  opacity: 0.9;
}

.tab-summary .quick-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--space-2);
}

.tab-summary .quick-stat {
  text-align: center;
  padding: var(--space-2);
  background: rgba(255,255,255,0.08);
  border-radius: var(--radius-sm);
}

.tab-summary .quick-stat .stat-value {
  font-size: var(--text-xl);
  font-weight: 700;
}

.tab-summary .quick-stat .stat-label {
  font-size: var(--text-xs);
  opacity: 0.7;
}

.tab-summary .quick-stat .stat-unit {
  font-size: var(--text-xs);
  opacity: 0.8;
}

/* .health-badge => components.css */
/* .status-dot   => components.css */
/* .analysis-card, .analysis-card-header, .analysis-card-body => components.css */
/* .metric-row, .metric-label, .metric-value, .metric-unit, .metric-trend => components.css */

.tab-summary .analysis-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.tab-summary .score-display {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.tab-summary .score-circle {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--text-inverse);
}

.tab-summary .score-circle.excellent { background: var(--status-excellent); }
.tab-summary .score-circle.good      { background: var(--status-good); }
.tab-summary .score-circle.fair      { background: var(--status-fair); }
.tab-summary .score-circle.poor      { background: var(--status-poor); }
.tab-summary .score-circle.critical  { background: var(--status-critical); }

.tab-summary .investment-summary {
  background: var(--surface-sunken);
  border-radius: var(--radius-md);
  padding: 1.25rem;
  margin-bottom: 1.5rem;
}

.tab-summary .investment-summary h4 {
  margin: 0 0 1rem 0;
  font-size: var(--text-base);
  color: var(--text-primary);
}

.tab-summary .investment-points {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 0.75rem;
}

.tab-summary .investment-point {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem;
  background: var(--surface-base, #fff);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-default);
}

.tab-summary .investment-point-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.tab-summary .investment-point-icon.strength { background: color-mix(in srgb, var(--sem-positive) 15%, var(--surface-base)); color: var(--sem-positive); }
.tab-summary .investment-point-icon.risk     { background: color-mix(in srgb, var(--sem-negative) 12%, var(--surface-base)); color: var(--sem-negative); }
.tab-summary .investment-point-icon.neutral  { background: var(--surface-secondary); color: var(--text-tertiary); }

.tab-summary .investment-point-text {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.4;
}

.tab-summary .investment-point-label {
  font-weight: 600;
  color: var(--text-primary);
}

.tab-summary .nav-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.tab-summary .nav-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: var(--space-4);
  background: var(--surface-base, #fff);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-default);
  text-decoration: none;
  color: var(--text-primary);
  transition: var(--transition-normal);
}

.tab-summary .nav-card:hover {
  border-color: var(--sem-info);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.tab-summary .nav-card-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-secondary);
}

.tab-summary .nav-card-text {
  font-size: var(--text-sm);
  font-weight: 500;
}

/* ==========================================================================
   監査・開示情報カード (dashboard 改善 5 / 2026-05-04)
   ========================================================================== */
.z-card--audit-disclosure {
  border-left: 3px solid var(--brand-primary);
}
.z-disclosure-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-3) var(--space-4);
  margin: 0;
}
.z-disclosure-grid__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.z-disclosure-grid__item--full {
  grid-column: 1 / -1;
}
.z-disclosure-grid__label {
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  color: var(--text-secondary);
  margin: 0;
}
.z-disclosure-grid__value {
  font-size: var(--text-sm);
  color: var(--text-primary);
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}
}

/* ==========================================================================
   pages/tab-kpi.css -- Company Tab: KPI (.tab-kpi)
   Split from pages/company-tabs.css for maintainability
   ========================================================================== */

@layer pages {

.tab-kpi .kpi-dashboard {
  --kpi-good: var(--sem-positive);
  --kpi-normal: var(--sem-info);
  --kpi-check: var(--sem-warning);
  --kpi-risk: var(--sem-negative);
  --kpi-na: var(--text-tertiary);
}

.tab-kpi .kpi-health-card .health-title {
  font-size: var(--text-sm);
  opacity: 0.8;
  margin-bottom: 0.5rem;
}

.tab-kpi .kpi-health-card .health-status {
  font-size: var(--text-2xl);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.tab-kpi .kpi-health-card .health-status .status-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  animation: pulse 2s infinite;
}

.tab-kpi .kpi-health-card .health-status .status-dot.good   { background: var(--kpi-good); }
.tab-kpi .kpi-health-card .health-status .status-dot.normal { background: var(--kpi-normal); }
.tab-kpi .kpi-health-card .health-status .status-dot.check  { background: var(--kpi-check); }
.tab-kpi .kpi-health-card .health-status .status-dot.risk   { background: var(--kpi-risk); }
.tab-kpi .kpi-health-card .health-status .status-dot.na     { background: var(--kpi-na); }

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.tab-kpi .kpi-health-card .health-desc {
  font-size: var(--text-sm);
  opacity: 0.9;
  margin-top: 0.5rem;
}

.tab-kpi .kpi-health-card .health-indicators {
  display: flex;
  gap: var(--space-6);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid rgba(255,255,255,0.1);
}

.tab-kpi .kpi-health-card .indicator {
  text-align: center;
}

.tab-kpi .kpi-health-card .indicator-value {
  font-size: var(--text-xl);
  font-weight: 600;
}

.tab-kpi .kpi-health-card .indicator-label {
  font-size: var(--text-xs);
  opacity: 0.7;
}

.tab-kpi .kpi-group {
  background: var(--surface-base, #fff);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  margin-bottom: var(--space-6);
  overflow: hidden;
}

.tab-kpi .kpi-group-header {
  background: linear-gradient(90deg, var(--surface-sunken) 0%, var(--surface-secondary) 100%);
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border-default);
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.tab-kpi .kpi-group-header .group-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xl);
}

.tab-kpi .kpi-group-header .group-icon.growth        { background: color-mix(in srgb, var(--chart-8) 12%, var(--surface-base)); color: var(--chart-8); }
.tab-kpi .kpi-group-header .group-icon.profitability  { background: var(--brand-primary-light); color: var(--sem-info); }
.tab-kpi .kpi-group-header .group-icon.leverage       { background: color-mix(in srgb, var(--sem-warning) 15%, var(--surface-base)); color: var(--sem-warning); }
.tab-kpi .kpi-group-header .group-icon.cashflow       { background: color-mix(in srgb, var(--sem-positive) 20%, var(--surface-base)); color: var(--sem-positive); }
.tab-kpi .kpi-group-header .group-icon.other          { background: var(--surface-secondary); color: var(--text-tertiary); }

.tab-kpi .kpi-group-header h5 {
  margin: 0;
  font-weight: 600;
  color: var(--text-primary);
}

.tab-kpi .kpi-group-body {
  padding: var(--space-4);
}

.tab-kpi .kpi-item {
  background: var(--surface-sunken);
  border-radius: var(--radius-md);
  padding: 1rem 1.25rem;
  margin-bottom: var(--space-3);
  transition: var(--transition-normal);
  border: 1px solid transparent;
}

.tab-kpi .kpi-item:last-child {
  margin-bottom: 0;
}

.tab-kpi .kpi-item:hover {
  background: var(--surface-secondary);
  border-color: var(--border-default);
}

.tab-kpi .kpi-item .kpi-main-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem;
}

.tab-kpi .kpi-item .kpi-info {
  min-width: 0;
  flex: 1;
}

.tab-kpi .kpi-item .kpi-label {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  margin-bottom: 0.25rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.tab-kpi .kpi-item .kpi-label .period-badge {
  font-size: var(--text-xs);
  background: var(--border-default);
  color: var(--text-secondary);
  padding: 0.125rem 0.375rem;
  border-radius: var(--radius-sm);
}

.tab-kpi .kpi-item .kpi-value-row {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.tab-kpi .kpi-item .kpi-value {
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
  word-break: break-all;
}

.tab-kpi .kpi-item .kpi-unit {
  font-size: var(--text-sm);
  color: var(--text-disabled);
}

.tab-kpi .kpi-status {
  flex-shrink: 0;
}

/* .kpi-badge => components.css */

.tab-kpi .kpi-gauge {
  width: 100%;
  height: 6px;
  background: var(--border-default);
  border-radius: var(--radius-xs);
  position: relative;
  overflow: hidden;
}

.tab-kpi .kpi-gauge-fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  border-radius: var(--radius-xs);
  transition: width 0.5s ease;
}

.tab-kpi .kpi-gauge-fill.good   { background: linear-gradient(90deg, var(--sem-positive), var(--teal-300)); }
.tab-kpi .kpi-gauge-fill.normal { background: linear-gradient(90deg, var(--sem-info), color-mix(in srgb, var(--sem-info) 60%, white)); }
.tab-kpi .kpi-gauge-fill.check  { background: linear-gradient(90deg, var(--brand-accent-bg), color-mix(in srgb, var(--sem-warning) 60%, white)); }
.tab-kpi .kpi-gauge-fill.risk   { background: linear-gradient(90deg, var(--sem-negative), var(--sem-negative)); }

.tab-kpi .kpi-gauge-marker {
  position: absolute;
  top: -2px;
  width: 2px;
  height: 10px;
  background: var(--text-primary);
  border-radius: 1px;
  transform: translateX(-50%);
}

.tab-kpi .kpi-hint-row {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border-default);
}

.tab-kpi .kpi-hint {
  font-size: var(--text-xs);
  color: var(--text-disabled);
  display: flex;
  align-items: flex-start;
  gap: 0.375rem;
  line-height: 1.4;
}

.tab-kpi .kpi-hint svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  margin-top: 0.125rem;
}

/* ------------------------------------------------------------------
   KPI tab — extracted inline styles
   ------------------------------------------------------------------ */
/* Card title: no margin (when used alongside badge) */
.kpi-title-no-margin { margin: 0; }

/* Per-share period label */
.kpi-period-label {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  margin-left: auto;
}

/* Summary max-width container */
.kpi-summary-grid { max-width: 400px; }

/* DuPont / advanced card body padding reset */
.kpi-chart-body { padding-top: 0; }

/* Z-Score / F-Score note */
.kpi-score-note {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  margin-top: var(--space-2);
}

/* DuPont chart subtitle */
.kpi-dupont-sub {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

/* KPI legend row: centered flex */
.kpi-legend-row {
  justify-content: center;
  font-size: var(--text-xs);
}

/* Period badge: vertical-align middle */
.kpi-period-badge { vertical-align: middle; }

}

/* ==========================================================================
   pages/tab-cashflow.css -- Company Tab: Cashflow (.tab-cashflow)
   Split from pages/company-tabs.css for maintainability
   ========================================================================== */

@layer pages {

.tab-cashflow .cf-dashboard {
  --cf-positive: var(--sem-positive);
  --cf-negative: var(--sem-negative);
  --cf-neutral: var(--sem-info);
  --cf-cfo: var(--sem-info);
  --cf-cfi: var(--sem-negative);
  --cf-cff: var(--sem-positive);
}

.tab-cashflow .cf-header-card .cf-title {
  font-size: var(--text-xl);
  font-weight: 700;
  margin-bottom: var(--space-1);
}

.tab-cashflow .cf-header-card .cf-subtitle {
  font-size: var(--text-sm);
  opacity: 0.8;
}

.tab-cashflow .cf-header-card .cf-period-switch {
  display: flex;
  gap: var(--space-2);
}

.tab-cashflow .cf-header-card .cf-period-btn {
  padding: 0.375rem 0.75rem;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255,255,255,0.3);
  background: transparent;
  color: white;
  cursor: pointer;
  font-size: var(--text-xs);
  font-weight: 500;
  transition: var(--transition-normal);
}

.tab-cashflow .cf-header-card .cf-period-btn:hover {
  background: rgba(255,255,255,0.1);
}

.tab-cashflow .cf-header-card .cf-period-btn.active {
  background: var(--surface-base, #fff);
  color: var(--text-primary);
  border-color: white;
}

.tab-cashflow .cf-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.tab-cashflow .cf-summary-card {
  background: var(--surface-base, #fff);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-default);
  transition: transform var(--duration-normal), box-shadow var(--duration-normal);
}

.tab-cashflow .cf-summary-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.tab-cashflow .cf-summary-card .card-header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--space-3);
}

.tab-cashflow .cf-summary-card .card-label {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  font-weight: 500;
}

.tab-cashflow .cf-summary-card .card-badge {
  font-size: var(--text-xs);
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-sm);
  font-weight: 600;
  text-transform: uppercase;
}

.tab-cashflow .cf-summary-card .card-badge.cfo  { background: var(--brand-primary-light); color: var(--brand-primary); }
.tab-cashflow .cf-summary-card .card-badge.cfi  { background: color-mix(in srgb, var(--sem-negative) 12%, var(--surface-base)); color: var(--sem-negative); }
.tab-cashflow .cf-summary-card .card-badge.cff  { background: color-mix(in srgb, var(--sem-positive) 20%, var(--surface-base)); color: var(--sem-positive); }
.tab-cashflow .cf-summary-card .card-badge.net  { background: color-mix(in srgb, var(--chart-6) 12%, var(--surface-base)); color: var(--chart-6); }
.tab-cashflow .cf-summary-card .card-badge.cash { background: color-mix(in srgb, var(--sem-warning) 15%, var(--surface-base)); color: var(--sem-warning); }

.tab-cashflow .cf-summary-card .card-value {
  font-size: var(--text-2xl);
  font-weight: 700;
  line-height: 1.2;
}

.tab-cashflow .cf-summary-card .card-value.positive { color: var(--cf-positive); }
.tab-cashflow .cf-summary-card .card-value.negative { color: var(--cf-negative); }
.tab-cashflow .cf-summary-card .card-value.neutral  { color: var(--text-tertiary); }

.tab-cashflow .cf-summary-card .card-unit {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-disabled);
  margin-left: var(--space-1);
}

.tab-cashflow .cf-summary-card .card-period {
  font-size: var(--text-xs);
  color: var(--text-disabled);
  margin-top: var(--space-2);
}

.tab-cashflow .cf-chart-section {
  background: var(--surface-base, #fff);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  margin-bottom: var(--space-6);
  overflow: hidden;
}

.tab-cashflow .cf-chart-header {
  background: linear-gradient(90deg, var(--surface-sunken) 0%, var(--surface-secondary) 100%);
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border-default);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.tab-cashflow .cf-chart-header .chart-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xl);
}

.tab-cashflow .cf-chart-header .chart-icon.bar       { background: var(--brand-primary-light); color: var(--sem-info); }
.tab-cashflow .cf-chart-header .chart-icon.waterfall  { background: color-mix(in srgb, var(--sem-positive) 20%, var(--surface-base)); color: var(--sem-positive); }

.tab-cashflow .cf-chart-header .chart-title {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--text-primary);
}

.tab-cashflow .cf-chart-body {
  padding: var(--space-5);
}

.tab-cashflow .cf-chart-status {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  margin-top: var(--space-3);
  padding: 0.5rem 0.75rem;
  background: var(--surface-sunken);
  border-radius: var(--radius-md);
}

.tab-cashflow .cf-legend {
  display: flex;
  gap: var(--space-6);
  padding: 0.75rem 1.25rem;
  background: var(--surface-sunken);
  border-top: 1px solid var(--border-default);
}

.tab-cashflow .cf-legend-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

.tab-cashflow .cf-legend-dot {
  width: 12px;
  height: 12px;
  border-radius: var(--radius-xs);
}

.tab-cashflow .cf-legend-dot.cfo { background: var(--cf-cfo); }
.tab-cashflow .cf-legend-dot.cfi { background: var(--cf-cfi); }
.tab-cashflow .cf-legend-dot.cff { background: var(--cf-cff); }

.tab-cashflow .cf-meta-info {
  font-size: var(--text-xs);
  color: var(--text-disabled);
  background: var(--surface-sunken);
  padding: 0.75rem 1rem;
  border-radius: var(--radius-sm);
  margin-top: var(--space-4);
}

.tab-cashflow .cf-meta-info code {
  font-size: var(--text-xs);
  background: var(--border-default);
  padding: 0.125rem 0.375rem;
  border-radius: var(--radius-sm);
}

/* ------------------------------------------------------------------
   Cashflow tab — extracted inline styles
   ------------------------------------------------------------------ */
/* Period selector button row */
.cf-period-btns {
  margin-left: auto;
}

/* Summary loading placeholder (before JS fills) */
.cf-summary-loading {
  color: var(--text-tertiary);
  text-align: center;
  padding: var(--space-4);
  grid-column: 1 / -1;
}

/* Sources-uses / waterfall empty messages */
.cf-empty-msg {
  color: var(--text-tertiary);
  text-align: center;
  padding: var(--space-6);
}

/* Waterfall empty inline-block hidden */
.cf-status-hidden { display: none; }

/* Trace meta / footnote block */
.cf-footnote {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

/* Cashflow card header: wrap on small screens */
.cf-card-header-wrap { flex-wrap: wrap; }

/* Cashflow card subtitle */
.cf-card-sub {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  margin: var(--space-1) 0 0;
}

/* Sources-uses info note */
.cf-sources-note {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  margin-top: var(--space-2);
}

}

/* ==========================================================================
   pages/tab-stock.css -- Company Tab: Stock (.tab-stock)
   Split from pages/company-tabs.css for maintainability
   ========================================================================== */

@layer pages {

.tab-stock .stock-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.tab-stock .stock-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--surface-sunken);
  border-radius: var(--radius-md);
}

.tab-stock .period-selector {
  display: flex;
  gap: 0.25rem;
}

.tab-stock .period-btn {
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--border-default);
  background: var(--surface-raised);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-tertiary);
  cursor: pointer;
  transition: var(--transition-fast);
}

.tab-stock .period-btn:hover {
  border-color: var(--teal-300);
  color: var(--teal-600);
}

.tab-stock .period-btn.active {
  background: var(--teal-500);
  border-color: var(--teal-500);
  color: var(--text-inverse);
}

.tab-stock .stock-summary {
  display: flex;
  gap: var(--space-6);
  flex-wrap: wrap;
}

.tab-stock .summary-item {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.tab-stock .summary-label {
  font-size: var(--text-xs);
  color: var(--text-disabled);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.tab-stock .summary-value {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--text-primary);
}

.tab-stock .summary-value.positive {
  color: var(--sem-negative);
}

.tab-stock .summary-value.negative {
  color: var(--sem-positive);
}

.tab-stock .change-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: 600;
}

.tab-stock .change-badge.positive {
  background: color-mix(in srgb, var(--sem-negative) 8%, var(--surface-base));
  color: var(--sem-negative);
}

.tab-stock .change-badge.negative {
  background: color-mix(in srgb, var(--sem-positive) 8%, var(--surface-base));
  color: var(--sem-positive);
}

.tab-stock .chart-card {
  background: var(--surface-raised);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.tab-stock .chart-header {
  padding: 0.875rem 1rem;
  border-bottom: 1px solid var(--surface-secondary);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tab-stock .chart-title {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.tab-stock .chart-subtitle {
  font-size: var(--text-xs);
  color: var(--text-disabled);
}

.tab-stock .chart-body {
  padding: var(--space-2);
}

.tab-stock .chart-legend {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-2) var(--space-4);
  border-top: 1px solid var(--surface-secondary);
  font-size: var(--text-xs);
  flex-wrap: wrap;
}

.tab-stock .legend-item {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.tab-stock .legend-dot {
  width: 10px;
  height: 3px;
  border-radius: 1px;
}

.tab-stock .legend-dot.ma5  { background: var(--brand-accent-bg); }
.tab-stock .legend-dot.ma25 { background: var(--sem-info); }
.tab-stock .legend-dot.ma75 { background: var(--chart-6); }

.tab-stock .data-notice {
  font-size: var(--text-xs);
  color: var(--text-disabled);
  padding: var(--space-2) var(--space-4);
  background: var(--surface-sunken);
  border-radius: var(--radius-sm);
  margin-top: var(--space-2);
}

}

/* ==========================================================================
   pages/tab-info.css -- Company Tab: Company Info (.tab-info)
   Split from pages/company-tabs.css for maintainability
   ========================================================================== */

@layer pages {

.tab-info .business-section {
  background: var(--surface-base, #fff);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-default);
  overflow: hidden;
  margin-bottom: var(--space-6);
  box-shadow: var(--shadow-sm);
}

.tab-info .business-section-header {
  padding: 1rem 1.25rem;
  background: linear-gradient(135deg, var(--surface-sunken) 0%, var(--surface-secondary) 100%);
  border-bottom: 1px solid var(--border-default);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.tab-info .business-section-header h3 {
  margin: 0;
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--text-primary);
}

.tab-info .business-section-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-inverse);
  flex-shrink: 0;
}

.tab-info .business-section-icon.overview            { background: linear-gradient(135deg, var(--sem-info) 0%, var(--brand-primary) 100%); }
.tab-info .business-section-icon.history             { background: linear-gradient(135deg, var(--chart-6) 0%, color-mix(in srgb, var(--chart-6) 80%, black) 100%); }
.tab-info .business-section-icon.governance          { background: linear-gradient(135deg, var(--sem-positive), var(--status-excellent)); }
.tab-info .business-section-icon.risk                { background: linear-gradient(135deg, #f97316 0%, #ea580c 100%); } /* gradient badge — dark-safe (text-inverse ensures contrast) */
.tab-info .business-section-icon.shareholder         { background: linear-gradient(135deg, var(--brand-accent-bg) 0%, var(--brand-accent-hover) 100%); }
.tab-info .business-section-icon.facilities          { background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%); } /* gradient badge — dark-safe (text-inverse ensures contrast) */
.tab-info .business-section-icon.accounting          { background: linear-gradient(135deg, var(--text-tertiary) 0%, var(--text-secondary) 100%); }
.tab-info .business-section-icon.remuneration        { background: linear-gradient(135deg, #eab308 0%, #ca8a04 100%); } /* gradient badge — dark-safe (text-inverse ensures contrast) */
.tab-info .business-section-icon.sustainability      { background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%); } /* gradient badge — dark-safe (text-inverse ensures contrast) */
.tab-info .business-section-icon.ifrs_notes          { background: linear-gradient(135deg, var(--analysis-accent) 0%, var(--analysis-accent-dark) 100%); }
.tab-info .business-section-icon.jgaap_notes         { background: linear-gradient(135deg, var(--text-tertiary) 0%, var(--text-secondary) 100%); }
.tab-info .business-section-icon.financial_statements { background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%); } /* gradient badge — dark-safe (text-inverse ensures contrast) */
.tab-info .business-section-icon.other               { background: linear-gradient(135deg, var(--text-tertiary) 0%, var(--text-secondary) 100%); }

.tab-info .business-section-body {
  padding: var(--space-5);
}

.tab-info .section-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  height: 1.25rem;
  padding: 0 0.375rem;
  border-radius: var(--radius-full, 999px);
  background: rgba(0, 0, 0, 0.08);
  color: var(--text-tertiary);
  font-size: var(--text-xs);
  font-weight: 600;
  margin-left: var(--space-2);
  vertical-align: middle;
}

.tab-info .business-content {
  font-size: var(--text-base);
  line-height: 1.8;
  color: var(--text-secondary);
}

.tab-info .business-content p {
  margin-bottom: var(--space-4);
}

.tab-info .business-content p:last-child {
  margin-bottom: 0;
}

.tab-info .textblock-item {
  background: var(--surface-sunken);
  border-radius: var(--radius-sm);
  padding: 1rem 1.25rem;
  margin-bottom: var(--space-4);
  border-left: 3px solid var(--border-strong);
  transition: border-color var(--transition-fast);
}

.tab-info .textblock-item:hover {
  border-left-color: var(--text-disabled);
}

.tab-info .textblock-item:last-child {
  margin-bottom: 0;
}

.tab-info .textblock-item-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--space-3);
  gap: var(--space-3);
}

.tab-info .textblock-item-title {
  font-weight: 600;
  color: var(--text-primary);
  font-size: var(--text-base);
  letter-spacing: 0.01em;
}

.tab-info .textblock-item-meta {
  font-size: var(--text-xs);
  color: var(--text-disabled);
  margin-top: var(--space-1);
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.tab-info .textblock-item-meta::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--border-strong);
  margin-right: 0.125rem;
}

.tab-info .textblock-item-content {
  font-size: var(--text-sm);
  line-height: 1.8;
  color: var(--text-secondary);
  letter-spacing: 0.02em;
}

/* Specificity (0,3,0) > textblocks.css .tb-body / .tb-body .tb-pre (0,2,0),
   so !important is unnecessary. */
.tab-info .textblock-item-content .tb-body,
.tab-info .textblock-item-content .tb-body *,
.tab-info .textblock-item-content .tb-preview,
.tab-info .textblock-item-content .tb-preview *,
.tab-info .textblock-item-content .tb-pre {
  background: transparent;
  color: var(--text-secondary);
}

.tab-info .textblock-item-content .tb-body {
  position: relative;
  max-height: 240px;
  overflow: hidden;
}

.tab-info .textblock-item-content .tb-body.is-truncated::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: linear-gradient(180deg, transparent 0%, var(--surface-raised) 85%);
  pointer-events: none;
}

.tab-info .textblock-item-content .tb-body.is-expanded {
  max-height: none;
}

.tab-info .textblock-item-content .tb-body.is-expanded::after {
  display: none;
}

.tab-info .tb-inline-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: var(--space-2);
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--sem-info);
  background: color-mix(in srgb, var(--sem-info) 8%, var(--surface-base));
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-full, 999px);
  cursor: pointer;
  transition: background var(--duration-fast), color var(--duration-fast);
}

.tab-info .tb-inline-toggle:hover {
  background: var(--brand-primary-light);
  color: var(--brand-primary);
}

.tab-info .tb-inline-toggle svg {
  transition: transform var(--transition-normal);
}

.tab-info .tb-inline-toggle.is-expanded svg {
  transform: rotate(180deg);
}

.tab-info .textblock-item-content pre,
.tab-info .textblock-item-content .tb-pre {
  background: var(--surface-sunken);
  color: var(--text-secondary);
  padding: 0.75rem 1rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-default);
  font-size: var(--text-sm);
  line-height: 1.6;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-x: auto;
}

.tab-info .formatted-text {
  line-height: 1.8;
}

.tab-info .formatted-text .section-header {
  font-weight: 600;
  color: var(--text-primary);
  margin-top: var(--space-5);
  margin-bottom: var(--space-2);
  padding-bottom: var(--space-1);
  border-bottom: 1px solid var(--border-default);
  font-size: var(--text-base);
}

.tab-info .formatted-text .section-header:first-child {
  margin-top: 0;
}

.tab-info .formatted-text .paragraph {
  margin-bottom: var(--space-3);
  text-indent: 1em;
}

.tab-info .formatted-text .paragraph:first-child {
  text-indent: 0;
}

.tab-info .formatted-text .list-item {
  margin-left: 1.5em;
  margin-bottom: var(--space-2);
  position: relative;
  padding-left: 0.5em;
}

.tab-info .formatted-text .list-item::before {
  content: "\2022";
  position: absolute;
  left: -0.75em;
  color: var(--text-disabled);
}

.tab-info .formatted-text .numbered-item {
  margin-bottom: var(--space-2);
  padding-left: 0.5em;
}

.tab-info .formatted-text .numbered-item strong {
  color: var(--sem-info);
  margin-right: 0.25em;
}

.tab-info .formatted-text .sub-section {
  margin-left: 1em;
  padding-left: 0.75em;
  border-left: 2px solid var(--border-default);
}

.tab-info .formatted-text p {
  margin-bottom: var(--space-2);
}

.tab-info .formatted-text p:last-child {
  margin-bottom: 0;
}

.tab-info .btn-read-more {
  font-size: var(--text-xs);
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-xl);
  white-space: nowrap;
  flex-shrink: 0;
}

.tab-info .section-toggle {
  width: 100%;
  border: none;
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  background: linear-gradient(135deg, var(--surface-sunken) 0%, var(--surface-secondary) 100%);
  border-bottom: 1px solid var(--border-default);
  transition: background var(--transition-fast);
}

.tab-info .section-toggle:hover {
  background: var(--surface-secondary);
}

.tab-info .section-toggle-content {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.tab-info .section-toggle-arrow {
  transition: transform var(--transition-normal);
  color: var(--text-disabled);
}

.tab-info .section-toggle[aria-expanded="true"] .section-toggle-arrow {
  transform: rotate(180deg);
}

.tab-info .tb-group-badge {
  display: inline-block;
  font-size: var(--text-xs);
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius-xl);
  color: var(--text-inverse);
  font-weight: 500;
  vertical-align: middle;
  margin-left: var(--space-2);
}

}

/* ==========================================================================
   pages/company-tabs.css -- Company page tab styles (shared + series + finance)
   Tab-specific styles live in separate files imported directly by pages.css:
     tab-summary.css, tab-kpi.css, tab-cashflow.css, tab-stock.css, tab-info.css
   ========================================================================== */

@layer pages {

/* ------------------------------------------------------------------
   Company Tab: Series (.tab-series)
   ------------------------------------------------------------------ */
.tab-series .series-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.tab-series .series-header .title {
  font-size: var(--text-base);
  font-weight: 600;
}

.tab-series .series-header .subtitle {
  font-size: var(--text-xs);
  opacity: 0.8;
}

.tab-series .period-switch {
  display: flex;
  gap: 0.375rem;
}

.tab-series .period-btn {
  padding: 0.25rem 0.625rem;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255,255,255,0.3);
  background: transparent;
  color: white;
  cursor: pointer;
  font-size: var(--text-xs);
  font-weight: 500;
  transition: var(--transition-fast);
}

.tab-series .period-btn:hover {
  background: rgba(255,255,255,0.1);
}

.tab-series .period-btn.active {
  background: var(--surface-base, #fff);
  color: var(--text-primary);
  border-color: white;
}

.tab-series .series-group {
  background: var(--surface-base, #fff);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--space-4);
  overflow: hidden;
}

.tab-series .group-header {
  background: var(--surface-sunken);
  padding: 0.625rem 1rem;
  border-bottom: 1px solid var(--border-default);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.tab-series .group-icon {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-sm);
}

.tab-series .group-icon.revenue    { background: var(--brand-primary-light); color: var(--sem-info); }
.tab-series .group-icon.profit     { background: color-mix(in srgb, var(--sem-positive) 20%, var(--surface-base)); color: var(--sem-positive); }
.tab-series .group-icon.efficiency { background: color-mix(in srgb, var(--sem-warning) 15%, var(--surface-base)); color: var(--sem-warning); }
.tab-series .group-icon.cashflow   { background: color-mix(in srgb, var(--analysis-accent) 12%, var(--surface-base)); color: var(--analysis-accent-dark); }
.tab-series .group-icon.balance    { background: var(--brand-primary-light); color: var(--sem-info); }

.tab-series .group-title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
}

.tab-series .group-body {
  padding: var(--space-3);
}

.tab-series .chart-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}

.tab-series .empty-state {
  text-align: center;
  padding: var(--space-8);
  color: var(--text-disabled);
}

.tab-series .series-meta {
  font-size: var(--text-xs);
  color: var(--text-disabled);
  text-align: right;
  margin-top: var(--space-2);
}

/* Vertical divider between period/year toggle buttons */
.series-divider {
  width: 1px;
  background: var(--border-default);
  margin: 0 var(--space-1);
}

/* ------------------------------------------------------------------
   Company Tab: Finance (.tab-finance)
   ------------------------------------------------------------------ */
.tab-finance .fin-statement-header {
  background: linear-gradient(135deg, var(--tblr-primary) 0%, var(--tblr-primary-darken) 100%);
  color: white;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  margin-bottom: 0;
}

.tab-finance .fin-statement-header h4 {
  margin: 0;
  font-size: var(--text-base);
  font-weight: 600;
}

.tab-finance .fin-statement-meta {
  font-size: var(--text-sm);
  opacity: 0.9;
}

.tab-finance .nav-pills .nav-link {
  color: var(--tblr-body-color);
  border-radius: var(--radius-sm);
  padding: 0.5rem 1rem;
  font-weight: 500;
}

.tab-finance .nav-pills .nav-link.active {
  background-color: var(--tblr-primary);
  color: white;
}

.tab-finance .statement-card {
  border: 1px solid var(--tblr-border-color);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.tab-finance .statement-body {
  padding: 0;
}

/* ------------------------------------------------------------------
   Shareholders tab — extracted inline styles
   ------------------------------------------------------------------ */
.sh-major-table { min-width: 360px; }
.sh-rank-col { width: 3rem; }

/* ------------------------------------------------------------------
   Segment tab — extracted inline styles
   ------------------------------------------------------------------ */
.seg-detail-table { min-width: 480px; }

}

/* ==========================================================================
   pages/company-analysis.css -- Scatter analysis tab (.scatter-analysis)
   Shared metric-guide component → components/metric-guide.css
   Tab-specific styles extracted to:
     - tab-growth.css      (.growth-analysis)
     - tab-valuation.css   (.valuation-analysis)
     - tab-soundness.css   (.soundness-analysis)
   ========================================================================== */

@layer pages {

/* ==================================================================
   Analysis Tab: Scatter (.scatter-analysis)
   ================================================================== */

/* -- Chart height override -- */
.scatter-analysis #scatter-chart.scatter-chart-area { height: 740px; }

/* -- Stat Mini -- */
.scatter-analysis .stat-mini {
  text-align: center;
  padding: 12px;
  background: var(--surface-raised);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-default);
}

.scatter-analysis .stat-mini-value {
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--teal-700);
}

.scatter-analysis .stat-mini-label {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* -- Preset Selector -- */
.scatter-analysis .preset-selector {
  border-bottom: 1px solid var(--border-default);
  padding-bottom: 1rem;
}

.scatter-analysis .preset-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.scatter-analysis .preset-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0.625rem 1rem;
  background: var(--surface-sunken);
  border: 2px solid var(--border-default);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: var(--transition-normal);
  min-width: 140px;
}

.scatter-analysis .preset-btn:hover {
  background: color-mix(in srgb, var(--sem-positive) 8%, var(--surface-base));
  border-color: color-mix(in srgb, var(--sem-positive) 40%, var(--surface-base));
}

.scatter-analysis .preset-btn.active {
  background: linear-gradient(135deg, color-mix(in srgb, var(--sem-positive) 10%, var(--surface-base)) 0%, color-mix(in srgb, var(--sem-positive) 20%, var(--surface-base)) 100%);
  border-color: var(--sem-positive);
  box-shadow: 0 0 0 3px var(--color-focus-ring);
}

.scatter-analysis .preset-icon {
  font-size: var(--text-xl);
  margin-bottom: 2px;
}

.scatter-analysis .preset-name {
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--text-primary);
}

.scatter-analysis .preset-desc {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  white-space: nowrap;
}

/* -- Data Table Card -- */
.scatter-analysis .data-table-card {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border-default);
}

.scatter-analysis .data-table-card .table { margin-bottom: 0; }

.scatter-analysis .data-table-card .table thead th {
  background: linear-gradient(180deg, var(--teal-50, #f0fdfa), var(--surface-sunken));
  border-bottom: 2px solid var(--teal-200, #99f6e4);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--teal-700, #0f766e);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 12px 16px;
}

.scatter-analysis .data-table-card .table tbody td {
  padding: 12px 16px;
  vertical-align: middle;
  border-bottom: 1px solid var(--surface-secondary);
}

.scatter-analysis .data-table-card .table tbody tr:hover {
  background: var(--teal-50, #f0fdfa);
}

/* -- Company Link -- */
.scatter-analysis .company-link {
  font-weight: 600;
  color: var(--teal-600, #0d9488);
  text-decoration: none;
}
.scatter-analysis .company-link:hover {
  color: var(--teal-700, #0f766e);
  text-decoration: underline;
}

/* -- Market Badge -- */
.scatter-analysis .market-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: var(--radius-lg);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
}

.scatter-analysis .market-badge.prime { background: rgba(13,148,136,0.12); color: var(--sem-info); }
.scatter-analysis .market-badge.growth { background: rgba(212,160,23,0.12); color: var(--sem-warning); }
.scatter-analysis .market-badge.standard { background: rgba(99,102,241,0.12); color: var(--analysis-accent); }

/* -- Metric Value -- */
.scatter-analysis .metric-value {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: var(--text-sm);
}
.scatter-analysis .metric-value.positive { color: var(--teal-600, #0d9488); }
.scatter-analysis .metric-value.negative { color: var(--sem-negative); }

}

/* ==========================================================================
   pages/tab-growth.css -- Growth analysis tab styles (.growth-analysis)
   Extracted from company-analysis.css
   ========================================================================== */

@layer pages {

/* -- Chart-card header icon accent -- */
.growth-analysis .chart-card-header h3 svg { color: var(--analysis-accent); }

/* -- Chart height overrides -- */
.growth-analysis #histogram-chart { height: 320px; }
.growth-analysis #sector-chart { height: 380px; }
.growth-analysis #growth-scatter.scatter-chart-area { height: 560px; }

/* -- Stage Cards -- */
.growth-analysis .stage-card {
  background: var(--surface-base, #fff);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  border: 1px solid var(--surface-secondary);
  text-align: center;
  transition: var(--transition-slow);
}

.growth-analysis .stage-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.growth-analysis .stage-card .stage-count {
  font-size: var(--text-3xl);
  font-weight: 800;
  line-height: 1;
}

.growth-analysis .stage-card .stage-label {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  margin-top: 0.5rem;
}

.growth-analysis .stage-card.high-growth { border-left: 4px solid var(--analysis-accent); }
.growth-analysis .stage-card.high-growth .stage-count { color: var(--analysis-accent); }

.growth-analysis .stage-card.stable-growth { border-left: 4px solid var(--analysis-accent); }
.growth-analysis .stage-card.stable-growth .stage-count { color: var(--analysis-accent); }

.growth-analysis .stage-card.mature { border-left: 4px solid var(--brand-accent-bg); }
.growth-analysis .stage-card.mature .stage-count { color: var(--brand-accent-bg); }

.growth-analysis .stage-card.declining { border-left: 4px solid var(--sem-negative); }
.growth-analysis .stage-card.declining .stage-count { color: var(--sem-negative); }

/* -- Ranking Table overrides -- */
.growth-analysis .ranking-table th {
  padding: 1rem 1.25rem;
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-bottom: 2px solid var(--surface-secondary);
  background: linear-gradient(180deg, var(--surface-sunken) 0%, white 100%);
}

.growth-analysis .ranking-table td {
  padding: 0.875rem var(--space-5);
  border-bottom: 1px solid var(--surface-secondary);
  font-size: var(--text-sm);
}

.growth-analysis .ranking-table tbody tr:hover {
  background: linear-gradient(90deg, var(--surface-sunken) 0%, white 100%);
}

/* -- Rank Badge variants -- */
.growth-analysis .rank-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  font-weight: 800;
  font-size: var(--text-sm);
}

.growth-analysis .rank-badge.gold { background: linear-gradient(135deg, color-mix(in srgb, var(--brand-accent-bg) 60%, white), var(--brand-accent-bg)); color: var(--text-inverse); }
.growth-analysis .rank-badge.silver { background: linear-gradient(135deg, var(--text-tertiary), var(--text-tertiary)); color: var(--text-inverse); }
.growth-analysis .rank-badge.bronze { background: linear-gradient(135deg, #a16207, #854d0e); color: var(--text-inverse); }
.growth-analysis .rank-badge.normal { background: var(--surface-secondary); color: var(--text-tertiary); }

/* -- Company Link -- */
.growth-analysis .company-link {
  color: var(--analysis-accent);
  text-decoration: none;
  font-weight: 700;
}
.growth-analysis .company-link:hover { color: var(--analysis-accent-dark); }

/* -- Sector Tag -- */
.growth-analysis .sector-tag {
  display: inline-flex;
  padding: 0.375rem 0.75rem;
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: 600;
  background: linear-gradient(135deg, color-mix(in srgb, var(--sem-positive) 20%, var(--surface-base)) 0%, color-mix(in srgb, var(--sem-positive) 35%, var(--surface-base)) 100%);
  color: var(--sem-positive);
}

/* -- Metric Value -- */
.growth-analysis .metric-value {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}
.growth-analysis .metric-value.positive { color: var(--sem-positive); }
.growth-analysis .metric-value.negative { color: var(--sem-negative); }

}

/* ==========================================================================
   pages/tab-valuation.css -- Valuation analysis tab styles (.valuation-analysis)
   Extracted from company-analysis.css
   ========================================================================== */

@layer pages {

/* -- Chart-card header icon accent -- */
.valuation-analysis .chart-card-header h3 svg { color: var(--analysis-accent); }

/* -- Chart height overrides -- */
.valuation-analysis #valuation-scatter.scatter-chart-area { height: 560px; }
.valuation-analysis #scatter-chart { height: 480px; }
.valuation-analysis #per-histogram { height: 280px; }
.valuation-analysis #pbr-histogram { height: 280px; }
.valuation-analysis #sector-chart { height: 400px; }

/* -- Stat Card (valuation-specific) -- */
.valuation-analysis .stat-card {
  background: var(--surface-base, #fff);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  border: 1px solid var(--surface-secondary);
  box-shadow: var(--shadow-md);
  text-align: center;
}

.valuation-analysis .stat-card .stat-value {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--analysis-accent);
}

.valuation-analysis .stat-card .stat-label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
  margin-top: 0.25rem;
}

.valuation-analysis .stat-card .stat-sub {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  margin-top: 0.5rem;
}

/* -- Undervalued Card -- */
.valuation-analysis .undervalued-card {
  background: linear-gradient(135deg, color-mix(in srgb, var(--sem-warning) 15%, var(--surface-base)) 0%, color-mix(in srgb, var(--sem-warning) 40%, var(--surface-base)) 100%);
  border: 2px solid var(--brand-accent-bg);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  margin-bottom: 1.5rem;
}

.valuation-analysis .undervalued-card h4 {
  color: var(--brand-accent-hover);
  font-size: var(--text-base);
  font-weight: 700;
  margin: 0 0 0.75rem 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.valuation-analysis .undervalued-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.valuation-analysis .undervalued-item {
  background: var(--surface-base, #fff);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.75rem;
  font-size: var(--text-sm);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid color-mix(in srgb, var(--sem-warning) 40%, transparent);
}

.valuation-analysis .undervalued-item a {
  color: var(--analysis-accent);
  font-weight: 700;
  text-decoration: none;
}

.valuation-analysis .undervalued-item .val {
  color: var(--text-tertiary);
  font-size: var(--text-xs);
}

/* -- No Data Message -- */
.valuation-analysis .no-data-message {
  text-align: center;
  padding: 3rem;
  color: var(--text-tertiary);
}

.valuation-analysis .no-data-message svg {
  width: 64px;
  height: 64px;
  margin-bottom: 1rem;
  opacity: 0.5;
}

/* -- Ranking Table overrides -- */
.valuation-analysis .ranking-table th {
  padding: 1rem 1.25rem;
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-bottom: 2px solid var(--surface-secondary);
  background: linear-gradient(180deg, var(--surface-sunken) 0%, white 100%);
}

.valuation-analysis .ranking-table td {
  padding: 0.875rem 1.25rem;
  border-bottom: 1px solid var(--surface-secondary);
  font-size: var(--text-sm);
}

.valuation-analysis .ranking-table tbody tr:hover {
  background: linear-gradient(90deg, var(--surface-sunken) 0%, white 100%);
}

/* -- Rank Badge variants -- */
.valuation-analysis .rank-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  font-weight: 800;
  font-size: var(--text-sm);
}

.valuation-analysis .rank-badge.gold { background: linear-gradient(135deg, color-mix(in srgb, var(--brand-accent-bg) 60%, white), var(--brand-accent-bg)); color: var(--text-inverse); }
.valuation-analysis .rank-badge.silver { background: linear-gradient(135deg, var(--text-tertiary), var(--text-tertiary)); color: var(--text-inverse); }
.valuation-analysis .rank-badge.bronze { background: linear-gradient(135deg, #a16207, #854d0e); color: var(--text-inverse); }
.valuation-analysis .rank-badge.normal { background: var(--surface-secondary); color: var(--text-tertiary); }

/* -- Company Link -- */
.valuation-analysis .company-link {
  color: var(--analysis-accent);
  text-decoration: none;
  font-weight: 700;
}
.valuation-analysis .company-link:hover { color: var(--analysis-accent-dark); }

/* -- Sector Tag -- */
.valuation-analysis .sector-tag {
  display: inline-flex;
  padding: 0.375rem 0.75rem;
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: 600;
  background: color-mix(in srgb, var(--chart-6) 12%, var(--surface-base));
  color: var(--analysis-accent-dark);
}

/* -- Metric Value -- */
.valuation-analysis .metric-value {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

}

/* ==========================================================================
   pages/tab-soundness.css -- Soundness analysis tab styles (.soundness-analysis)
   Extracted from company-analysis.css
   ========================================================================== */

@layer pages {

/* -- Soundness semantic colors -- */
.soundness-analysis {
  --excellent: #10b981;
  --good: #14b8a6;
  --moderate: #d4a017;
  --weak: #ef4444;
}

/* -- Chart height overrides -- */
.soundness-analysis #soundness-scatter.scatter-chart-area { height: 560px; }
.soundness-analysis .chart-area { width: 100%; height: 380px; }
.soundness-analysis .chart-area.small { height: 300px; }

/* -- Chart Card overrides for soundness grid layout -- */
.soundness-analysis .chart-card.full-width { grid-column: 1 / -1; }
.soundness-analysis .chart-card h3 svg { width: 18px; height: 18px; color: var(--analysis-accent); }

/* -- Class Cards (soundness classification) -- */
.soundness-analysis .class-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}

.soundness-analysis .class-card {
  background: var(--surface-base, #fff);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-md);
  border-left: 4px solid;
  transition: transform var(--duration-normal), box-shadow var(--duration-normal);
}

.soundness-analysis .class-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.soundness-analysis .class-card.excellent { border-left-color: var(--excellent); }
.soundness-analysis .class-card.good { border-left-color: var(--good); }
.soundness-analysis .class-card.moderate { border-left-color: var(--moderate); }
.soundness-analysis .class-card.weak { border-left-color: var(--weak); }

.soundness-analysis .class-card-label {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-2);
}
.soundness-analysis .class-card.excellent .class-card-label { color: var(--excellent); }
.soundness-analysis .class-card.good .class-card-label { color: var(--good); }
.soundness-analysis .class-card.moderate .class-card-label { color: var(--moderate); }
.soundness-analysis .class-card.weak .class-card-label { color: var(--weak); }

.soundness-analysis .class-card-count {
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1;
  margin-bottom: var(--space-2);
}

.soundness-analysis .class-card-desc {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
}

/* -- Ranking Section -- */
.soundness-analysis .ranking-section {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
  margin-bottom: var(--space-8);
}

.soundness-analysis .ranking-card {
  background: var(--surface-base, #fff);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-md);
}

.soundness-analysis .ranking-card h3 {
  margin: 0 0 1rem 0;
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.soundness-analysis .ranking-badge {
  font-size: var(--text-xs);
  padding: 0.25rem 0.6rem;
  border-radius: var(--radius-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.soundness-analysis .ranking-badge.green { background: color-mix(in srgb, var(--sem-positive) 15%, var(--surface-base)); color: var(--sem-positive); }
.soundness-analysis .ranking-badge.red { background: color-mix(in srgb, var(--sem-negative) 12%, var(--surface-base)); color: var(--sem-negative); }

/* -- Ranking Table overrides -- */
.soundness-analysis .ranking-table th {
  text-align: left;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.75rem 0.5rem;
  border-bottom: 2px solid var(--surface-secondary);
}

.soundness-analysis .ranking-table td {
  padding: 0.75rem 0.5rem;
  font-size: var(--text-sm);
  border-bottom: 1px solid var(--surface-secondary);
  vertical-align: middle;
}

.soundness-analysis .ranking-table tbody tr:hover { background: var(--surface-sunken); }

/* -- Company Code / Name -- */
.soundness-analysis .company-code {
  font-weight: 700;
  color: var(--analysis-accent);
  font-family: var(--font-mono);
}

.soundness-analysis .company-name {
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-secondary);
}

/* -- Sector Tag -- */
.soundness-analysis .sector-tag {
  font-size: var(--text-xs);
  background: var(--surface-secondary);
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  white-space: nowrap;
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
}

/* -- Score Badge -- */
.soundness-analysis .score-badge {
  font-weight: 700;
  padding: 0.25rem 0.6rem;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  display: inline-block;
}
.soundness-analysis .score-badge.excellent { background: color-mix(in srgb, var(--sem-positive) 15%, var(--surface-base)); color: var(--sem-positive); }
.soundness-analysis .score-badge.good { background: var(--brand-primary-light); color: var(--brand-primary); }
.soundness-analysis .score-badge.moderate { background: color-mix(in srgb, var(--sem-warning) 15%, var(--surface-base)); color: var(--brand-accent-hover); }
.soundness-analysis .score-badge.weak { background: color-mix(in srgb, var(--sem-negative) 12%, var(--surface-base)); color: var(--sem-negative); }

/* -- Value Cell -- */
.soundness-analysis .value-cell {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

/* -- No Data Message -- */
.soundness-analysis .no-data-message {
  text-align: center;
  padding: 4rem 2rem;
  color: var(--text-tertiary);
}
.soundness-analysis .no-data-message svg { width: 64px; height: 64px; margin-bottom: var(--space-4); opacity: 0.4; }
.soundness-analysis .no-data-message h3 { margin: 0 0 0.5rem 0; color: var(--text-secondary); }

}

/* ─────────────────────────────────────────
   Tab: Common-Size (比例縮尺 財務三表)
   ───────────────────────────────────────── */

/* Guide legend color swatches — match JS RATIO_COLOR_MAP */
.tab-common-size .legend-swatch { display: inline-block; width: 0.75em; height: 0.75em; border-radius: 2px; vertical-align: middle; }
.tab-common-size .legend-swatch--cash           { background: #43A047; }
.tab-common-size .legend-swatch--receivables     { background: #66BB6A; }
.tab-common-size .legend-swatch--inventory       { background: #AED581; }
.tab-common-size .legend-swatch--ppe             { background: #29B6F6; }
.tab-common-size .legend-swatch--current-liab    { background: #EF5350; }
.tab-common-size .legend-swatch--equity          { background: #AB47BC; }
.tab-common-size .legend-swatch--cogs            { background: #8D6E63; }
.tab-common-size .legend-swatch--sga             { background: #FF8A65; }

/* ==========================================================================
   pages/screening.css -- Screening page styles
   Extracted from pages.css (Group 2C: .screening-page)
   ========================================================================== */

/* ------------------------------------------------------------------
   Screening (.screening-page)
   ------------------------------------------------------------------ */
.screening-page {
  /* Page-scoped indigo theme — renamed from --primary to --page-primary
     so the global --primary (tokens.css) is not shadowed inside this page. */
  --page-primary: #6366f1;
  --page-primary-dark: #4f46e5;
  --page-primary-light: #a5b4fc;
  --accent: #06b6d4;
  --success: var(--sem-positive);
  --warning: var(--sem-warning);
  --danger: var(--sem-negative);
}

.screening-page .screening-layout {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: var(--space-6);
}

.screening-page .filter-panel {
  background: var(--surface-base, #fff);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-md);
  height: fit-content;
  position: sticky;
  top: 1rem;
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
}

.screening-page .filter-panel::-webkit-scrollbar {
  width: 4px;
}

.screening-page .filter-panel::-webkit-scrollbar-track {
  background: var(--surface-secondary);
  border-radius: var(--radius-xs);
}

.screening-page .filter-panel::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: var(--radius-xs);
}

.screening-page .filter-panel h2 {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 1rem 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.screening-page .filter-panel h2 svg {
  width: 18px;
  height: 18px;
  color: var(--page-primary);
}

.screening-page .filter-section {
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--surface-secondary);
}

.screening-page .filter-section:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.screening-page .btn-primary {
  flex: 1;
}

.screening-page .btn-secondary {
  background: var(--surface-secondary);
  color: var(--text-secondary);
}

.screening-page .btn-secondary:hover {
  background: var(--border-default);
}

.screening-page .results-panel {
  background: var(--surface-base, #fff);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.screening-page .results-header {
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--surface-secondary);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.screening-page .results-count {
  font-size: var(--text-base);
  color: var(--text-secondary);
}

.screening-page .results-count strong {
  color: var(--text-primary);
  font-weight: 700;
}

.screening-page .results-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  min-width: 3200px;
}

/* Sticky header row */
.screening-page .results-table th {
  text-align: left;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.6rem 0.5rem;
  background: var(--surface-sunken);
  border-bottom: 2px solid var(--border-default);
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 3;
}

/* Sticky columns: code (col 1) + name (col 2) */
.screening-page .results-table td.sticky-col {
  position: sticky;
  z-index: 1;
  background: var(--surface-base);
}

/* Sticky column + sticky header (top-left corner) */
.screening-page .results-table th.sticky-col {
  z-index: 4;
}

.screening-page .results-table tbody tr:hover .sticky-col {
  background: var(--surface-sunken);
}

.screening-page .results-table th.sortable {
  cursor: pointer;
  user-select: none;
}

.screening-page .results-table th.sortable:hover {
  color: var(--page-primary);
}

.screening-page .results-table th.sorted {
  color: var(--page-primary);
}

.screening-page .results-table th .sort-icon {
  display: inline-block;
  margin-left: 0.2rem;
  opacity: 0.5;
}

.screening-page .results-table th.sorted .sort-icon {
  opacity: 1;
}

.screening-page .results-table td {
  padding: 0.6rem 0.5rem;
  font-size: var(--text-sm);
  border-bottom: 1px solid var(--surface-secondary);
  vertical-align: middle;
}

.screening-page .results-table tbody tr:hover {
  background: var(--surface-sunken);
}

.screening-page .company-code {
  font-weight: 700;
  color: var(--page-primary);
  font-family: var(--font-mono);
  text-decoration: none;
  font-size: var(--text-xs);
}

.screening-page .company-code:hover {
  text-decoration: underline;
}

.screening-page .company-name {
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

.screening-page .metric-value {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

.screening-page .metric-value.positive { color: var(--success); }
.screening-page .metric-value.negative { color: var(--danger); }
.screening-page .metric-value.neutral { color: var(--text-tertiary); }

.screening-page .pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: var(--space-4);
  border-top: 1px solid var(--surface-secondary);
}

.screening-page .empty-state {
  text-align: center;
  padding: var(--space-12) var(--space-8);
  color: var(--text-tertiary);
}

.screening-page .empty-state svg {
  width: 48px;
  height: 48px;
  margin-bottom: var(--space-4);
  opacity: 0.4;
}

.screening-page .empty-state h3 {
  margin: 0 0 0.5rem 0;
  color: var(--text-secondary);
  font-size: var(--text-base);
}

.screening-page .active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: var(--space-3);
}

/* Preset Filter Buttons */
.screening-page .preset-detail-panel {
  display: none;
  background: var(--surface-sunken);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 0.75rem 1rem;
  margin-bottom: var(--space-3);
  font-size: var(--text-xs);
  color: var(--text-secondary);
  line-height: 1.6;
}

.screening-page .preset-detail-panel.open {
  display: block;
}

.screening-page .preset-detail-panel dl {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.15rem 0.75rem;
}

.screening-page .preset-detail-panel dt {
  font-weight: 700;
  color: var(--text-secondary);
  white-space: nowrap;
}

.screening-page .preset-detail-panel dd {
  margin: 0;
}

.screening-page .preset-btn {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.85rem;
  background: var(--surface-base, #fff);
  border: 1.5px solid var(--border-default);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: var(--transition-normal);
  box-shadow: var(--shadow-sm);
}

.screening-page .preset-btn:hover {
  border-color: var(--page-primary-light);
  background: rgba(99,102,241,0.04);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.screening-page .preset-btn.active {
  border-color: var(--page-primary);
  background: rgba(99,102,241,0.08);
  box-shadow: var(--shadow-md);
}

.screening-page .preset-btn.active .preset-name {
  color: var(--page-primary-dark);
}

.screening-page .preset-icon {
  font-size: var(--text-lg);
  line-height: 1;
}

.screening-page .preset-name {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--text-primary);
}

/* ==========================================================================
   v2 design system: z- prefix screening classes (migrated from pages-v2.css)
   ========================================================================== */

@layer pages {
  /* Screening page: Mobile-First base layout (1 column on mobile) */
  .z-screening-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
    align-items: start;
  }
  .z-screening-filters {
    position: static;
    max-height: none;
    overflow-y: visible;
  }
  .z-screening-filter-toggle {
    display: flex;
    width: 100%;
    justify-content: center;
    gap: var(--space-2);
  }
  .z-screening-skeleton { padding: var(--space-4) 0; }

  /* Screening page: slide animation */
  .z-slide-enter { transition: opacity var(--transition-normal), transform var(--transition-normal); }
  .z-slide-enter-start { opacity: 0; transform: translateY(-8px); }
  .z-slide-enter-end { opacity: 1; transform: translateY(0); }
  /* Compare bar fade transitions (dashboard 改善 7) */
  .z-fade-enter { transition: opacity var(--transition-normal), transform var(--transition-normal); }
  .z-fade-enter-start { opacity: 0; transform: translateY(8px); }
  .z-fade-enter-end { opacity: 1; transform: translateY(0); }

  /* ==========================================================================
     スクリーニングプリセット保存・共有 (dashboard 改善 11 / 2026-05-04)
     ========================================================================== */
  .z-screening-presets-bar {
    border-top: 1px solid var(--border-subtle, #e5e7eb);
    padding-top: var(--space-3);
  }
  .z-screening-presets-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 30;
    min-width: 240px;
    max-width: 360px;
    background: var(--surface-base);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
    padding: var(--space-1);
    max-height: 280px;
    overflow-y: auto;
  }
  .z-screening-presets-menu__row {
    display: flex;
    align-items: center;
    gap: var(--space-1);
  }
  .z-screening-presets-menu__row:hover {
    background: var(--surface-sunken);
    border-radius: var(--radius-sm);
  }
  .z-screening-presets-menu__apply {
    flex: 1;
    text-align: left;
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-sm);
    color: var(--text-primary);
    border-radius: var(--radius-sm);
  }
  .z-screening-presets-menu__apply:hover {
    color: var(--brand-primary);
  }
  .z-screening-presets-menu__remove {
    background: transparent;
    border: 0;
    cursor: pointer;
    color: var(--text-tertiary);
    font-size: var(--text-base);
    line-height: 1;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
  }
  .z-screening-presets-menu__remove:hover {
    color: var(--sem-negative, #dc2626);
    background: color-mix(in srgb, var(--sem-negative) 8%, transparent);
  }
  .z-input--sm {
    padding: var(--space-1) var(--space-2);
    font-size: var(--text-xs);
    width: 200px;
    max-width: 60vw;
  }
  .z-screening-presets-flash {
    margin-left: var(--space-2);
    padding: var(--space-1) var(--space-3);
    background: color-mix(in srgb, var(--brand-primary) 10%, transparent);
    color: var(--brand-primary);
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    font-weight: var(--fw-semibold);
  }

  /* Screening page: desktop layout (2 columns) */
  @media (min-width: 768px) {
    .z-screening-layout {
      grid-template-columns: 280px 1fr;
    }
    .z-screening-filters {
      position: sticky;
      top: calc(var(--topnav-height, 56px) + var(--space-4));
      max-height: calc(100vh - var(--topnav-height, 56px) - var(--space-8));
      overflow-y: auto;
    }
    .z-screening-filter-toggle { display: none; }
  }

  /* Filter summary: consistent style for <details><summary> filter sections */
  .z-filter-summary {
    font-weight: var(--fw-semibold);
    font-size: var(--text-sm);
    cursor: pointer;
    padding: var(--space-1) 0;
    list-style: none;
    display: flex;
    align-items: center;
    gap: var(--space-2);
  }
  .z-filter-summary::before {
    content: '';
    width: 0;
    height: 0;
    border-left: 5px solid var(--text-tertiary);
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    transition: transform var(--duration-fast);
    flex-shrink: 0;
  }
  .z-filter-summary::-webkit-details-marker { display: none; }
  details[open] > .z-filter-summary::before {
    transform: rotate(90deg);
  }

  /* Range filter input */
  .z-range-input {
    min-width: 5rem;
    width: 100%;
    max-width: 7rem;
    padding: var(--space-1) var(--space-2);
    font-size: var(--text-xs);
  }

  /* Filter section spacing */
  .z-filter-section {
    margin-bottom: var(--space-4);
  }

  /* Filter section body */
  .z-filter-body {
    padding: var(--space-2) 0;
  }

  /* Filter section body with scroll (sector list) */
  .z-filter-body--scroll {
    padding: var(--space-2) 0;
    max-height: 200px;
    overflow-y: auto;
  }

  /* Filter label row (market/sector checkbox rows) */
  .z-filter-label {
    font-size: var(--text-xs);
    padding: var(--space-1) 0;
    cursor: pointer;
  }

  /* Filter label font-size xs override (range filter labels) */
  .z-filter-label--xs {
    font-size: var(--text-xs);
  }

  /* Filter count (market/sector count on right) */
  .z-filter-count {
    color: var(--text-tertiary);
    margin-left: auto;
  }

  /* Range filter wrapper */
  .z-screening-range {
    margin-bottom: var(--space-3);
  }

  /* Range filter tilde separator */
  .z-range-sep {
    color: var(--text-tertiary);
  }

  /* Filter card body compact */
  .z-card__body--compact {
    padding: var(--space-3);
  }

  /* Card header title base size */
  .z-card__title--base {
    font-size: var(--text-base);
  }
  /* Card title xl size (hero headings) */
  .z-card__title--xl {
    font-size: var(--text-xl);
  }

  /* Card header as collapsible button */
  .z-card__header--collapsible {
    cursor: pointer;
    width: 100%;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  /* Table column widths: ranking/screening tables */
  .z-col--rank { width: 60px; }
  .z-col--code { width: 80px; }

  /* Badge remove button */
  .z-badge-remove {
    border: none;
    background: none;
    cursor: pointer;
    padding: 0;
    margin-left: 2px;
  }

  /* Axis select inline (bubble chart axis dropdowns) */
  .z-select--inline {
    width: auto;
    padding: 2px 4px;
    font-size: var(--text-xs);
  }

  /* Axis controls wrapper */
  .z-bubble-axis {
    margin-left: auto;
    font-size: var(--text-xs);
  }

  /* Chart note */
  .z-chart-note {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    margin-top: var(--space-2);
  }

  /* Stats bar text */
  .z-screening-stats {
    font-size: var(--text-sm);
    color: var(--text-secondary);
  }

  /* Results: disclaimer note */
  .z-results-note {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    margin-bottom: var(--space-3);
  }

  /* Results: count display */
  .z-results-count {
    font-size: var(--text-sm);
    color: var(--text-secondary);
  }

  /* Results: per-page select wrapper */
  .z-results-controls {
    margin-left: auto;
  }

  /* Results: per-page label */
  .z-results-per-page-label {
    font-size: var(--text-xs);
  }

  /* Results: per-page select */
  .z-select--per-page {
    width: auto;
    padding: var(--space-1) var(--space-2);
    font-size: var(--text-xs);
  }

  /* Results: company name cell (xs font) */
  .z-company-name {
    font-size: var(--text-xs);
  }

  /* Results: table overflow wrapper */
  .z-table-overflow {
    overflow-x: auto;
  }

  /* Results: empty state */
  .z-empty-state {
    padding: var(--space-12) var(--space-4);
    text-align: center;
  }

  /* Results: empty state icon */
  .z-empty-icon {
    font-size: var(--text-5xl);
    color: var(--text-disabled);
  }

  /* Results: empty state heading */
  .z-empty-heading {
    font-size: var(--text-lg);
    font-weight: var(--fw-semibold);
    margin-top: var(--space-4);
  }

  /* Results: empty state description */
  .z-empty-desc {
    font-size: var(--text-sm);
    color: var(--text-secondary);
  }

  /* Results: pagination wrapper */
  .z-pagination {
    justify-content: center;
  }

  /* Results: sortable table header */
  .z-sort-th {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
  }
  .z-sort-th:hover {
    color: var(--brand-primary);
  }

  /* Active sort column highlight (dashboard 改善 6 / 2026-05-04) */
  .z-sort-th--active {
    background: color-mix(in srgb, var(--brand-primary) 8%, transparent);
    color: var(--brand-primary);
    font-weight: var(--fw-semibold);
  }

  /* Results: sort icon */
  .z-sort-icon {
    font-size: var(--text-xs);
    margin-left: var(--space-1);
  }

  /* ==========================================================================
     Compare selection (dashboard 改善 7 / 2026-05-04)
     スクリーニング → /compare 一気通貫導線。
     ========================================================================== */
  .z-compare-th {
    width: 36px;
    text-align: center;
    color: var(--text-tertiary);
  }
  .z-compare-td {
    text-align: center;
    width: 36px;
  }
  .z-compare-checkbox {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--brand-primary);
  }
  .z-compare-checkbox:disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }
  .z-row--selected {
    background: color-mix(in srgb, var(--brand-primary) 6%, transparent);
  }

  /* Floating bar (mobile-first: 画面幅いっぱい固定) */
  .z-compare-bar {
    position: fixed;
    bottom: var(--space-3);
    left: var(--space-3);
    right: var(--space-3);
    z-index: 80;
    background: var(--surface-base);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg, 14px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    padding: var(--space-3) var(--space-4);
  }
  .z-compare-bar__inner {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
  }
  .z-compare-bar__count {
    font-size: var(--text-sm);
    color: var(--text-primary);
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
  }
  .z-compare-bar__count strong {
    color: var(--brand-primary);
    font-size: var(--text-base);
  }
  .z-compare-bar__codes {
    /* mobile では非表示 — 狭い画面では code リストよりアクション優先 */
    display: none;
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    font-variant-numeric: tabular-nums;
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .z-compare-bar__actions {
    display: flex;
    gap: var(--space-2);
    margin-left: auto;
  }
  .z-btn--disabled {
    pointer-events: none;
    opacity: 0.5;
  }
  /* Tablet+: center floating + show code list */
  @media (min-width: 576px) {
    .z-compare-bar {
      bottom: var(--space-4);
      left: 50%;
      right: auto;
      transform: translateX(-50%);
      max-width: calc(100vw - var(--space-6));
    }
    .z-compare-bar__codes {
      display: inline;
    }
  }
}

/* ==========================================================================
   pages/glossary.css -- Glossary page styles
   Extracted from pages.css (.glossary-page)
   ========================================================================== */

@layer pages {

/* ------------------------------------------------------------------
   Glossary (.glossary-page)
   ------------------------------------------------------------------ */
.glossary-page {
  /* Page-scoped indigo theme — renamed from --primary to --page-primary
     so the global --primary (tokens.css) is not shadowed inside this page. */
  --page-primary: #6366f1;
  --page-primary-dark: #4f46e5;
  --success: var(--sem-positive);
  --warning: var(--sem-warning);
  --danger: var(--sem-negative);
}

.glossary-page .hero-content { position: relative; z-index: 1; }

.glossary-page .glossary-toc {
  background: var(--surface-base, #fff);
  border-radius: var(--radius-md);
  padding: 1.25rem 1.5rem;
  margin-bottom: var(--space-6);
  box-shadow: var(--shadow-md);
}
.glossary-page .glossary-toc h3 {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-3);
}
.glossary-page .toc-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.glossary-page .toc-links a {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.9rem;
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  transition: var(--transition-fast);
  border: 1px solid var(--border-default);
}
.glossary-page .toc-links a:hover {
  background: var(--page-primary);
  color: white;
  border-color: var(--page-primary);
}

.glossary-page .category-section { margin-bottom: var(--space-8); }
.glossary-page .category-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: 2px solid var(--border-default);
}
.glossary-page .category-header h2 {
  font-size: var(--text-xl);
  font-weight: 800;
  color: var(--text-primary);
  margin: 0;
}
.glossary-page .category-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-inverse);
  flex-shrink: 0;
}
.glossary-page .category-icon.profitability { background: linear-gradient(135deg, var(--analysis-accent), color-mix(in srgb, var(--analysis-accent) 70%, white)); }
.glossary-page .category-icon.growth { background: linear-gradient(135deg, var(--sem-positive), var(--teal-300)); }
.glossary-page .category-icon.leverage { background: linear-gradient(135deg, var(--brand-accent-bg), color-mix(in srgb, var(--brand-accent-bg) 60%, white)); }
.glossary-page .category-icon.cashflow { background: linear-gradient(135deg, var(--chart-7), color-mix(in srgb, var(--chart-7) 60%, white)); }
.glossary-page .category-icon.valuation { background: linear-gradient(135deg, var(--chart-8), color-mix(in srgb, var(--chart-8) 60%, white)); }
.glossary-page .category-icon.pershare { background: linear-gradient(135deg, var(--chart-6), color-mix(in srgb, var(--chart-6) 60%, white)); }

.glossary-page .kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: var(--space-4);
}
.glossary-page .kpi-card {
  background: var(--surface-base, #fff);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--surface-secondary);
  transition: box-shadow var(--transition-fast);
}
.glossary-page .kpi-card:hover { box-shadow: var(--shadow-md); }
.glossary-page .kpi-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}
.glossary-page .kpi-name {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 0.15rem 0;
}
.glossary-page .kpi-abbr {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  font-weight: 600;
}
.glossary-page .kpi-direction {
  font-size: var(--text-xs);
  font-weight: 700;
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}
.glossary-page .kpi-direction.higher { background: color-mix(in srgb, var(--sem-positive) 10%, var(--surface-base)); color: var(--sem-positive); }
.glossary-page .kpi-direction.lower { background: color-mix(in srgb, var(--sem-warning) 15%, var(--surface-base)); color: var(--sem-warning); }

.glossary-page .kpi-formula {
  background: var(--surface-sunken);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.8rem;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-bottom: var(--space-3);
  line-height: 1.5;
}
.glossary-page .kpi-desc {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: var(--space-3);
}
.glossary-page .kpi-thresholds {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.glossary-page .threshold-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 0.25rem 0.6rem;
  border-radius: var(--radius-sm);
}
.glossary-page .threshold-badge.good { background: color-mix(in srgb, var(--sem-positive) 10%, var(--surface-base)); color: var(--sem-positive); }
.glossary-page .threshold-badge.normal { background: color-mix(in srgb, var(--sem-info) 10%, var(--surface-base)); color: var(--sem-info); }
.glossary-page .threshold-badge.check { background: color-mix(in srgb, var(--sem-warning) 10%, var(--surface-base)); color: var(--sem-warning); }
.glossary-page .threshold-badge .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.glossary-page .threshold-badge.good .dot { background: var(--sem-positive); }
.glossary-page .threshold-badge.normal .dot { background: var(--sem-info); }
.glossary-page .threshold-badge.check .dot { background: var(--sem-warning); }
.glossary-page .glossary-search-box {
  margin-top: var(--space-4);
  max-width: 400px;
}
.glossary-page .glossary-search-box input {
  width: 100%;
  padding: 0.625rem 1rem;
  border: 2px solid rgba(255,255,255,0.2);
  border-radius: var(--radius-md);
  background: rgba(255,255,255,0.1);
  color: var(--text-inverse);
  font-size: var(--text-base);
  outline: none;
  transition: border-color var(--duration-fast), background var(--duration-fast);
}
.glossary-page .glossary-search-box input::placeholder { color: rgba(255,255,255,0.5); }
.glossary-page .glossary-search-box input:focus {
  border-color: rgba(255,255,255,0.5);
  background: rgba(255,255,255,0.15);
}
/* New template classes (inline-to-CSS migration) */
.glossary-search-input { max-width: 400px; }
.glossary-kpi-name {
  margin: 0;
  font-size: var(--text-base);
  font-weight: var(--fw-semibold);
}
.glossary-formula {
  background: var(--surface-raised);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  margin-bottom: var(--space-3);
}
.glossary-benchmarks {
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}
.glossary-section-heading {
  font-size: var(--text-xl);
  margin-bottom: var(--space-4);
}

.glossary-page .kpi-card.hidden-by-search { display: none; }
.glossary-page .category-section.hidden-by-search { display: none; }
.glossary-page .no-search-results {
  text-align: center;
  padding: var(--space-8);
  color: var(--text-tertiary);
  font-size: var(--text-base);
  display: none;
}

}

/* ==========================================================================
   pages/delisted.css -- Delisted company page styles
   Extracted from pages.css (.delisted-page)
   ========================================================================== */

@layer pages {

/* ------------------------------------------------------------------
   Delisted (.delisted-page)
   ------------------------------------------------------------------ */
.delisted-page .hero-section {
  background: linear-gradient(135deg, var(--text-secondary) 0%, var(--text-primary) 100%);
  color: white;
  padding: var(--space-8);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-6);
}
.delisted-page .hero-section h1 {
  margin: 0 0 0.5rem 0;
  font-size: var(--text-2xl);
}
.delisted-page .hero-section p {
  margin: 0;
  opacity: 0.8;
  font-size: var(--text-sm);
}
.delisted-page .hero-stats {
  display: flex;
  gap: var(--space-8);
  margin-top: var(--space-4);
}
.delisted-page .hero-stat-value {
  font-size: 1.75rem;
  font-weight: 700;
}
.delisted-page .hero-stat-label {
  font-size: var(--text-xs);
  opacity: 0.7;
}
.delisted-page .delisted-filter-bar {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-6);
  align-items: flex-end;
}
.delisted-page .delisted-filter-bar .filter-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.delisted-page .delisted-filter-bar label {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  font-weight: 500;
}
.delisted-page .delisted-filter-bar input,
.delisted-page .delisted-filter-bar select {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  background: var(--surface-base, #fff);
  min-width: 160px;
}
.delisted-page .delisted-filter-bar .btn-filter {
  padding: 0.5rem 1rem;
  background: var(--text-primary);
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: var(--text-sm);
}
.delisted-page .delisted-filter-bar .btn-filter:hover {
  background: var(--text-primary);
}
.delisted-page .data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
.delisted-page .data-table th {
  text-align: left;
  padding: 0.75rem 1rem;
  background: var(--surface-sunken);
  border-bottom: 2px solid var(--border-default);
  font-weight: 600;
  color: var(--text-secondary);
}
.delisted-page .data-table td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--surface-secondary);
}
.delisted-page .data-table tr:hover td {
  background: var(--surface-sunken);
}
.delisted-page .data-table a {
  color: var(--sem-info);
  text-decoration: none;
}
.delisted-page .data-table a:hover {
  text-decoration: underline;
}
.delisted-page .pagination {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-6);
  flex-wrap: wrap;
}
.delisted-page .pagination a,
.delisted-page .pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 0.5rem;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  text-decoration: none;
  color: var(--text-secondary);
}
.delisted-page .pagination a:hover {
  background: var(--surface-secondary);
}
.delisted-page .pagination .current {
  background: var(--text-primary);
  color: white;
  border-color: var(--text-primary);
}
.delisted-page .delisted-badge {
  display: inline-block;
  padding: 0.125rem 0.5rem;
  background: rgba(239, 68, 68, 0.1);
  color: var(--sem-negative);
  border-radius: var(--radius-xl);
  font-size: var(--text-xs);
  font-weight: 500;
}
.delisted-page .empty-state {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--text-disabled);
}

}

/* ==========================================================================
   pages/error.css -- Error page styles
   Extracted from pages.css (.error-page)
   ========================================================================== */

@layer pages {

/* ------------------------------------------------------------------
   Error (.error-page)
   ------------------------------------------------------------------ */
.error-page {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 60vh;
  padding: var(--space-8) var(--space-4);
}
.error-page .error-page-inner {
  text-align: center;
  max-width: 480px;
}
.error-page .error-icon {
  color: var(--border-strong);
  margin-bottom: var(--space-6);
}
.error-page .error-code {
  font-size: 6rem;
  font-weight: 800;
  color: var(--border-default);
  line-height: 1;
  letter-spacing: -0.04em;
  margin-bottom: var(--space-2);
}
.error-page .error-title {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 var(--space-2) 0;
}
.error-page .error-message {
  font-size: var(--font-size-base);
  color: var(--text-tertiary);
  margin: 0 0 var(--space-2) 0;
  line-height: 1.6;
}
.error-page .error-hint {
  font-size: var(--font-size-sm);
  color: var(--text-tertiary);
  margin: 0 0 var(--space-8) 0;
}
.error-page .error-actions {
  display: flex;
  justify-content: center;
  gap: var(--space-4);
  margin-bottom: var(--space-8);
  flex-wrap: wrap;
}
.error-page .error-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-base);
  font-weight: 600;
  text-decoration: none;
  transition: var(--transition-normal);
}
.error-page .error-btn-primary {
  background: linear-gradient(135deg, var(--sem-info) 0%, var(--sem-info) 100%);
  color: white;
  box-shadow: var(--shadow-md);
}
.error-page .error-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-lg);
  color: white;
}
.error-page .error-btn-secondary {
  background: var(--surface-secondary);
  color: var(--text-secondary);
}
.error-page .error-btn-secondary:hover {
  background: var(--border-default);
  color: var(--text-primary);
}
.error-page .error-search {
  background: var(--surface-sunken);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  border: 1px solid var(--border-default);
}
.error-page .error-search-label {
  font-size: var(--font-size-sm);
  color: var(--text-tertiary);
  margin: 0 0 var(--space-2) 0;
  font-weight: 600;
}
.error-page .error-search-inner {
  display: flex;
  gap: 0.5rem;
}
.error-page .error-search-input {
  flex: 1;
  padding: 0.5rem 0.75rem;
  border: 2px solid var(--border-default);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-base);
  outline: none;
  transition: border-color var(--transition-normal);
}
.error-page .error-search-input:focus {
  border-color: var(--sem-info);
}
.error-page .error-search-btn {
  padding: 0.5rem 1rem;
  background: var(--sem-info);
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition-normal);
}
.error-page .error-search-btn:hover {
  background: var(--brand-primary-hover);
}

}

/* ==========================================================================
   pages/ops.css -- Ops dashboard page styles
   Merged from: static/css/ops.css (global classes) + pages/ops.css (scoped)
   ========================================================================== */

@layer pages {

/* ------------------------------------------------------------------
   Global layout helpers (formerly static/css/ops.css)
   These classes are used directly in ops.html / ops_metrics.html
   without requiring the .ops-page wrapper scope.
   ------------------------------------------------------------------ */

/* ===== Layout ===== */
.ops-page { max-width: 1200px; margin: 0 auto; }
.ops-header { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: var(--space-4); margin-bottom: var(--space-4); }
.ops-header h1 { margin: 0; font-size: var(--text-2xl); color: var(--text-primary); }
.ops-header-sub { color: var(--text-secondary); font-size: var(--text-sm); margin-top: 0.2rem; }
.ops-header-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.ops-action-btn {
  display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.85rem;
  background: var(--surface-sunken); border: 1px solid var(--border-default);
  border-radius: var(--radius-md); font-size: var(--text-sm); font-weight: 600; color: var(--text-secondary);
  text-decoration: none; transition: all var(--transition-fast);
}
.ops-action-btn:hover { background: var(--surface-secondary); border-color: var(--border-strong); }

/* ===== Tabs ===== */
.ops-tabs { display: flex; gap: 0; border-bottom: 2px solid var(--border-default); margin-bottom: var(--space-6); }
.ops-tab {
  padding: 0.65rem 1.25rem; font-size: var(--text-sm); font-weight: 600; cursor: pointer;
  background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -2px;
  color: var(--text-tertiary); transition: all 0.15s;
}
.ops-tab:hover { color: var(--text-secondary); }
.ops-tab.active { color: var(--teal, #0d9488); border-bottom-color: var(--teal, #0d9488); }
.ops-tab-content { display: none; }
.ops-tab-content.active { display: block; }

/* ===== Grid (Mobile-first: 1fr base, wider on larger screens) ===== */
.ops-grid { display: grid; gap: 0.85rem; margin-bottom: var(--space-5); }
.ops-grid-2 { grid-template-columns: 1fr; }
.ops-grid-3 { grid-template-columns: 1fr; }
.ops-grid-4 { grid-template-columns: 1fr; }
.ops-grid-5 { grid-template-columns: 1fr; }

/* ===== Card ===== */
.ops-card {
  background: var(--surface-raised); border-radius: var(--radius-md); padding: 1rem 1.1rem;
  border: 1px solid var(--border-default); border-left: 4px solid var(--border-strong);
  transition: box-shadow var(--transition-fast), transform var(--transition-fast);
}
.ops-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.ops-card[data-accent="users"]    { border-left-color: var(--chart-3); }
.ops-card[data-accent="finance"]  { border-left-color: var(--navy-500); }
.ops-card[data-accent="system"]   { border-left-color: var(--chart-6); }
.ops-card[data-accent="pipeline"] { border-left-color: var(--amber-500); }
.ops-card[data-accent="health"]   { border-left-color: var(--status-good); }
.ops-card[data-accent="alert"]    { border-left-color: var(--sem-negative); }
.ops-card[data-accent="seo"]      { border-left-color: var(--chart-7); }
.ops-card-label { font-size: var(--text-xs); font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.03em; }
.ops-card-value { font-size: var(--text-2xl); font-weight: 800; color: var(--text-primary); margin-top: 0.2rem; line-height: 1.2; }
.ops-card-sub { font-size: var(--text-xs); color: var(--text-secondary); margin-top: 0.2rem; }
.ops-card-unit { font-size: var(--text-xs); font-weight: 400; color: var(--text-tertiary); margin-left: 0.15rem; }

/* ===== Section ===== */
.ops-section {
  background: var(--surface-raised); border-radius: var(--radius-md); border: 1px solid var(--border-default);
  margin-bottom: var(--space-5); overflow: hidden;
}
.ops-section-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.75rem 1.25rem; border-bottom: 1px solid var(--border-default);
  background: var(--surface-sunken);
}
.ops-section-head h2 { font-size: var(--text-sm); font-weight: 700; color: var(--text-primary); margin: 0; }
.ops-section-note { font-size: var(--text-xs); color: var(--text-tertiary); font-weight: 400; margin-left: var(--space-2); }
.ops-section-body { padding: 1rem 1.25rem; }

/* ===== Table ===== */
.ops-tbl { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.ops-tbl th {
  text-align: left; font-weight: 600; color: var(--text-secondary);
  font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.03em;
  padding: 0.55rem 0.85rem; border-bottom: 2px solid var(--border-default);
  background: var(--surface-sunken);
}
.ops-tbl td { padding: 0.5rem 0.85rem; border-bottom: 1px solid var(--surface-secondary); color: var(--text-primary); }
.ops-tbl tbody tr:nth-child(even) td { background: var(--surface-sunken); }
.ops-tbl tbody tr:hover td { background: rgba(16,185,129,0.06); }
.ops-tbl .num { text-align: right; font-variant-numeric: tabular-nums; }
.ops-tbl .mono { font-family: var(--font-mono); font-size: var(--text-sm); }

/* ===== Badges ===== */
.ops-badge {
  display: inline-block; padding: 0.15rem 0.55rem; border-radius: var(--radius-sm);
  font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em;
}
.ops-badge-ok, .ops-badge-success, .ops-badge-completed, .ops-badge-active, .ops-badge-ingested { background: rgba(16,185,129,0.12); color: var(--status-excellent); }
.ops-badge-fail, .ops-badge-failed, .ops-badge-past_due, .ops-badge-deleted { background: rgba(239,68,68,0.12); color: var(--status-critical); }
.ops-badge-warn, .ops-badge-partial, .ops-badge-trialing { background: rgba(212,160,23,0.12); color: var(--sem-warning); }
.ops-badge-info, .ops-badge-running, .ops-badge-known { background: rgba(20,184,166,0.12); color: var(--navy-700); }
.ops-badge-off, .ops-badge-expired { background: var(--surface-secondary); color: var(--text-tertiary); }

/* ===== Freshness ===== */
.ops-fresh {
  display: inline-block; padding: 0.15rem 0.5rem; border-radius: 999px;
  font-size: var(--text-xs); font-weight: 700; text-align: center; min-width: 3rem;
  background: var(--surface-secondary); color: var(--text-secondary);
}
.ops-fresh.ok    { background: rgba(16,185,129,0.12); color: var(--navy-800); }
.ops-fresh.warn  { background: rgba(212,160,23,0.12); color: var(--sem-warning); }
.ops-fresh.stale { background: rgba(239,68,68,0.12); color: var(--status-critical); }

/* ===== Settings ===== */
.ops-setting {
  display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  padding: 0.75rem 0; border-bottom: 1px solid var(--surface-secondary);
}
.ops-setting:last-child { border-bottom: none; }
.ops-setting-label { font-size: var(--text-sm); font-weight: 600; color: var(--text-primary); min-width: 8rem; }
.ops-setting-form { display: flex; align-items: center; gap: var(--space-2); margin: 0; }
.ops-setting-desc { font-size: var(--text-xs); color: var(--text-secondary); }
.ops-input {
  font-size: var(--text-sm); padding: 0.3rem 0.6rem; border: 1px solid var(--border-strong);
  border-radius: var(--radius-md); color: var(--text-primary);
}
.ops-btn {
  padding: 0.3rem 0.7rem; border: none; border-radius: var(--radius-md); cursor: pointer;
  font-size: var(--text-xs); font-weight: 600; transition: background 0.15s;
}
.ops-btn-primary { background: var(--teal, #0d9488); color: var(--text-inverse); }
.ops-btn-primary:hover { background: var(--brand-primary-hover); }
.ops-btn-danger { background: var(--sem-negative); color: var(--text-inverse); }
.ops-btn-danger:hover { background: var(--sem-negative); filter: brightness(0.9); }

/* ===== Misc ===== */
.ops-link { color: var(--teal, #0d9488); font-size: var(--text-sm); font-weight: 600; text-decoration: none; }
.ops-link:hover { text-decoration: underline; }
.ops-empty { padding: var(--space-6); text-align: center; color: var(--text-tertiary); font-size: var(--text-sm); margin: 0; }
.ops-mini-label { font-size: var(--text-xs); color: var(--text-secondary); display: block; }
.ops-mini-value { font-weight: 700; font-size: var(--text-lg); color: var(--text-primary); }
.ops-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.dot-ok { background: var(--status-good); }
.dot-off { background: var(--border-strong); }

/* ===== Trend chart ===== */
.run-trend-chart { display: flex; align-items: flex-end; gap: 6px; height: 100px; }
.trend-bar-wrap { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; }
.trend-bar { width: 100%; border-radius: 3px 3px 0 0; min-height: 2px; transition: height var(--transition-slow); }
.bar-ok { background: var(--status-good); } .bar-fail { background: var(--sem-negative); }
.trend-label { font-size: var(--text-xs); color: var(--text-tertiary); margin-top: 4px; white-space: nowrap; }

/* ===== Stage details ===== */
.stage-details summary { cursor: pointer; font-size: var(--text-xs); color: var(--teal, #0d9488); }
.stage-breakdown { display: flex; flex-direction: column; gap: 0.2rem; margin-top: 0.3rem; }
.stage-row { display: flex; justify-content: space-between; font-size: var(--text-xs); }
.stage-name { color: var(--text-secondary); }
.stage-time { font-weight: 600; color: var(--text-primary); }
.stage-slow { color: var(--sem-warning); }

/* ===== Inline style replacements ===== */
.ops-card-value--md { font-size: var(--text-base); }
.ops-card-value--lg { font-size: var(--text-xl); }
.ops-mt-sm { margin-top: 0.3rem; }

.ops-flex-wrap { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.ops-flex-wrap--lg { display: flex; flex-wrap: wrap; gap: var(--space-6); }

.ops-status-chip {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--surface-sunken);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 0.5rem 0.85rem;
}
.ops-status-chip__count {
  font-weight: 700;
  color: var(--text-primary);
}

.ops-teal-bold { font-weight: 700; color: var(--teal, #0d9488); }

.ops-tbl-ts { font-size: var(--text-xs); white-space: nowrap; }
.ops-tbl-meta { font-size: var(--text-xs); color: var(--text-secondary); }
.ops-tbl-msg {
  font-size: var(--text-xs);
  max-width: 400px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ops-tbl-ts-sm { font-size: var(--text-sm); white-space: nowrap; }

.ops-level-error { font-weight: 700; color: var(--sem-negative); }
.ops-level-warn  { font-weight: 700; color: var(--sem-warning); }

.ops-flex-row { display: flex; align-items: center; gap: var(--space-2); }
.ops-flex-row__label { font-size: var(--text-sm); color: var(--text-primary); }

.ops-relevance-list { display: flex; flex-direction: column; gap: var(--space-1); margin-top: 0.3rem; }
.ops-relevance-item { font-size: var(--text-sm); display: flex; align-items: center; gap: 0.4rem; }
.ops-relevance-count { font-weight: 700; color: var(--text-primary); }

.ops-badge--core    { background: var(--color-primary); color: var(--text-inverse); }
.ops-badge--hidden  { background: var(--brand-accent-bg); color: var(--brand-accent-text); }
.ops-badge--default { background: var(--text-tertiary); color: var(--text-inverse); }

.ops-grid--mb-sm { margin-bottom: var(--space-3); }

.ops-section-footer { padding: 0.6rem 1.25rem; font-size: var(--text-sm); color: var(--text-secondary); }

.ops-setting-label--nowrap { white-space: nowrap; }

.ops-input--w24 { width: 24rem; }
.ops-input--w18 { width: 18rem; }
.ops-input--w12 { width: 12rem; }
.ops-input--w8  { width: 8rem; }

/* ===== Responsive (Mobile-first) ===== */
/* Mobile base: single column, stacked header, scrollable tabs */
.ops-header { flex-direction: column; }
.ops-tabs { overflow-x: auto; }
@media (min-width: 640px) {
  .ops-grid-2 { grid-template-columns: repeat(2, 1fr); }
  .ops-grid-3 { grid-template-columns: repeat(3, 1fr); }
  .ops-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .ops-grid-5 { grid-template-columns: repeat(3, 1fr); }
  .ops-header { flex-direction: row; }
  .ops-tabs { overflow-x: visible; }
}
@media (min-width: 900px) {
  .ops-grid-4 { grid-template-columns: repeat(4, 1fr); }
  .ops-grid-5 { grid-template-columns: repeat(5, 1fr); }
}

/* ------------------------------------------------------------------
   Ops Dashboard scoped styles (.ops-page prefix)
   ------------------------------------------------------------------ */
.ops-page { --teal: var(--sem-info); --teal-light: var(--brand-primary-light); }
.ops-page { --amber: var(--sem-warning); --red: var(--sem-negative); }
.ops-page .ops-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-4); margin-bottom: var(--space-6); }
.ops-page .stat-card {
  background: var(--surface-raised); border-radius: var(--radius-lg); padding: var(--space-5);
  box-shadow: var(--shadow-md); border: 1px solid var(--surface-secondary);
}
.ops-page .stat-card-label { font-size: var(--text-xs); font-weight: 700; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: var(--space-2); }
.ops-page .stat-card-value { font-size: 1.8rem; font-weight: 800; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.ops-page .stat-card-sub { font-size: var(--text-xs); color: var(--text-tertiary); margin-top: var(--space-1); }

.ops-page .ops-section {
  background: var(--surface-raised); border-radius: var(--radius-xl); box-shadow: var(--shadow-md);
  border: 1px solid var(--surface-secondary); overflow: hidden; margin-bottom: var(--space-6);
}
.ops-page .ops-section-header {
  padding: 1rem 1.25rem; border-bottom: 1px solid var(--surface-secondary);
  display: flex; justify-content: space-between; align-items: center;
  background: linear-gradient(180deg, var(--surface-sunken) 0%, var(--surface-base) 100%);
}
.ops-page .ops-section-header h2 {
  margin: 0; font-size: var(--text-base); font-weight: 700; color: var(--text-primary);
  display: flex; align-items: center; gap: var(--space-2);
}
.ops-page .ops-section-header h2 svg { color: var(--teal); }

.ops-page .ops-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.ops-page .ops-table th {
  padding: 0.625rem 1rem; text-align: left; font-size: var(--text-xs); font-weight: 700;
  color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.06em;
  border-bottom: 2px solid var(--surface-secondary);
  background: linear-gradient(180deg, var(--surface-sunken) 0%, var(--surface-base) 100%);
}
.ops-page .ops-table td {
  padding: 0.5rem 1rem; border-bottom: 1px solid var(--surface-secondary);
  font-variant-numeric: tabular-nums; color: var(--text-secondary);
}
.ops-page .ops-table tbody tr:hover { background: var(--surface-sunken); }
.ops-page .ops-table tbody tr:last-child td { border-bottom: none; }

.ops-page .status-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 0.25rem 0.6rem; border-radius: var(--radius-sm);
  font-size: var(--text-xs); font-weight: 700;
}
.ops-page .status-badge.success { background: color-mix(in srgb, var(--sem-positive) 15%, var(--surface-base)); color: var(--sem-positive); }
.ops-page .status-badge.partial { background: color-mix(in srgb, var(--sem-warning) 15%, var(--surface-base)); color: var(--sem-warning); }
.ops-page .status-badge.failed { background: color-mix(in srgb, var(--sem-negative) 12%, var(--surface-base)); color: var(--sem-negative); }
.ops-page .status-badge.running { background: var(--brand-primary-light); color: var(--brand-primary); }
.ops-page .status-badge.known { background: var(--surface-secondary); color: var(--text-secondary); }
.ops-page .status-badge.ingested { background: var(--brand-primary-light); color: var(--sem-info); }
.ops-page .status-badge.deleted { background: color-mix(in srgb, var(--sem-negative) 12%, var(--surface-base)); color: var(--sem-negative); }

.ops-page .freshness-bar {
  display: flex; align-items: center; gap: var(--space-2);
}
.ops-page .freshness-dot {
  width: 8px; height: 8px; border-radius: 50%;
}
.ops-page .freshness-dot.fresh { background: var(--sem-positive); }
.ops-page .freshness-dot.stale { background: var(--brand-accent-bg); }
.ops-page .freshness-dot.old { background: var(--sem-negative); }

.ops-page .run-id-cell { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-tertiary); }
.ops-page .num-cell { text-align: right; font-variant-numeric: tabular-nums; }

.ops-page .stage-details { margin-top: var(--space-1); }
.ops-page .stage-details summary { cursor: pointer; font-size: var(--text-xs); color: var(--text-tertiary); }
.ops-page .stage-breakdown { padding: 0.25rem 0; font-size: var(--text-xs); }
.ops-page .stage-row { display: flex; justify-content: space-between; padding: 0.1rem 0; }
.ops-page .stage-name { color: var(--text-secondary); }
.ops-page .stage-time { font-weight: 600; font-variant-numeric: tabular-nums; }

.ops-page .run-trend-chart { display: flex; align-items: flex-end; gap: var(--space-2); height: 120px; padding: var(--space-2); }
.ops-page .trend-bar-wrap { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; justify-content: flex-end; }
.ops-page .trend-bar { width: 100%; min-height: 4px; border-radius: 3px 3px 0 0; transition: height var(--duration-slow); }
.ops-page .bar-ok { background: var(--sem-positive); }
.ops-page .bar-fail { background: var(--sem-negative); }
.ops-page .trend-label { font-size: var(--text-xs); color: var(--text-tertiary); margin-top: var(--space-1); text-align: center; }

/* ------------------------------------------------------------------
   Ops Metrics (.ops-page -- ops_metrics-specific rules)
   ------------------------------------------------------------------ */
.ops-page .ops-grid--narrow { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

.ops-page .ops-card-value--ok      { color: var(--sem-positive); }
.ops-page .ops-card-value--warn    { color: var(--sem-warning); }
.ops-page .ops-card-value--err     { color: var(--sem-negative); }
.ops-page .ops-card-value--muted   { color: var(--text-tertiary); }

.ops-page .ops-badge-danger { background: var(--sem-negative); color: var(--text-inverse); padding: 0.2rem 0.5rem; border-radius: var(--radius-sm); font-size: var(--text-xs); font-weight: 700; }
.ops-page .ops-badge-off { background: var(--border-default); color: var(--text-secondary); padding: 0.2rem 0.5rem; border-radius: var(--radius-sm); font-size: var(--text-xs); font-weight: 700; }

.ops-page .severity-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 0.2rem 0.5rem; border-radius: var(--radius-sm);
  font-size: var(--text-xs); font-weight: 700; text-transform: uppercase;
}
.ops-page .severity-badge.critical { background: color-mix(in srgb, var(--sem-negative) 12%, var(--surface-base)); color: var(--sem-negative); }
.ops-page .severity-badge.warning { background: color-mix(in srgb, var(--sem-warning) 15%, var(--surface-base)); color: var(--sem-warning); }

.ops-page .metric-bar { display: flex; align-items: center; gap: var(--space-2); }
.ops-page .metric-bar-fill {
  height: 6px; border-radius: var(--radius-xs); min-width: 2px;
  transition: width var(--duration-slow);
}
.ops-page .metric-bar-fill.good { background: var(--sem-positive); }
.ops-page .metric-bar-fill.medium { background: var(--brand-accent-bg); }
.ops-page .metric-bar-fill.low { background: var(--sem-negative); }

.ops-page .trend-chart { display: flex; align-items: flex-end; gap: 3px; height: 60px; }
.ops-page .trend-dot {
  flex: 1; min-height: 2px; border-radius: 2px 2px 0 0; transition: height var(--duration-slow);
  background: var(--teal);
}
.ops-page .trend-dot--accent {
  background: var(--analysis-accent);
}

.ops-page .hash-cell { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-tertiary); letter-spacing: 0.02em; }

.ops-page .nav-back { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-sm); color: var(--teal); text-decoration: none; margin-bottom: var(--space-4); }
.ops-page .nav-back:hover { text-decoration: underline; }

.ops-page .tab-nav { display: flex; gap: 0; border-bottom: 2px solid var(--surface-secondary); margin-bottom: var(--space-6); }
.ops-page .tab-btn {
  padding: 0.75rem 1.25rem; font-size: var(--text-sm); font-weight: 600; color: var(--text-tertiary);
  border: none; background: none; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px;
}
.ops-page .tab-btn.active { color: var(--teal); border-bottom-color: var(--teal); }
.ops-page .tab-btn:hover { color: var(--text-secondary); }
.ops-page .tab-panel { display: none; }
.ops-page .tab-panel.active { display: block; }

.ops-page .stat-card-value--sm {
  font-size: var(--text-base);
}

/* ------------------------------------------------------------------
   ops_metrics.html — extracted inline styles (Group 3)
   ------------------------------------------------------------------ */

.ops-section-body-pad {
  padding: 1rem 1.25rem;
}

.ops-coverage-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
}

.ops-chart-label {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--text-tertiary);
  margin-bottom: var(--space-2);
}

.ops-section-meta {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

.ops-tbl-date {
  font-size: var(--text-xs);
}

.ops-tbl-recommendation {
  font-size: var(--text-xs);
  max-width: 200px;
}

.ops-file-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-1);
}

.ops-file-row {
  display: flex;
  justify-content: space-between;
  padding: 0.25rem 0;
  font-size: var(--text-xs);
}

.ops-file-row__name {
  color: var(--text-secondary);
}

.ops-file-detail {
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--surface-secondary);
}

.ops-section-empty {
  padding: var(--space-8);
  text-align: center;
  color: var(--text-tertiary);
}

.ops-no-data {
  padding: var(--space-12);
  text-align: center;
}

.ops-no-data__title {
  color: var(--text-secondary);
  font-size: var(--text-lg);
  margin: 0 0 0.5rem;
}

.ops-no-data__desc {
  color: var(--text-tertiary);
  font-size: var(--text-sm);
  margin: 0 0 1rem;
}

.ops-no-data__hint {
  color: var(--text-tertiary);
  font-size: var(--text-sm);
  margin: 0;
}

.ops-hash-placeholder {
  color: var(--text-tertiary);
}

.ops-status-ok {
  color: var(--sem-positive);
  font-size: var(--text-xs);
}

}

/* ==========================================================================
   pages/sector-detail.css -- Sector detail page styles
   Extracted from pages.css (.sector-detail-page)
   ========================================================================== */

@layer pages {

/* ------------------------------------------------------------------
   Sector Detail (.sector-detail-page)
   ------------------------------------------------------------------ */
/* Page-scoped indigo theme — renamed to --page-primary to avoid shadowing
   the global --primary (tokens.css) inside the sector detail view. */
.sector-detail-page { --page-primary: #6366f1; --page-primary-dark: #4f46e5; --accent: #14b8a6; }
.sector-detail-page .page-header { margin-bottom: 1.5rem; }
.sector-detail-page .peer-table-wrap {
  background: var(--surface-raised);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--surface-secondary);
  overflow: hidden;
}
.sector-detail-page .peer-table-header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--surface-secondary);
  display: flex; justify-content: space-between; align-items: center;
  background: linear-gradient(180deg, var(--surface-sunken) 0%, var(--surface-base) 100%);
  flex-wrap: wrap; gap: 0.75rem;
}
.sector-detail-page .peer-table-header h2 {
  margin: 0; font-size: var(--text-base); font-weight: 700; color: var(--text-primary);
  display: flex; align-items: center; gap: 0.5rem;
}
.sector-detail-page .peer-table-header h2 svg { color: var(--analysis-accent); }
.sector-detail-page .peer-badge {
  font-size: var(--text-xs); font-weight: 600; padding: 0.375rem 0.75rem;
  border-radius: var(--radius-xl); background: var(--surface-secondary); color: var(--text-tertiary);
}

.sector-detail-page .peer-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.sector-detail-page .peer-table thead { position: sticky; top: 0; z-index: 2; }
.sector-detail-page .peer-table th {
  padding: 0.625rem 0.75rem;
  text-align: right; font-size: var(--text-xs); font-weight: 700;
  color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.06em;
  border-bottom: 2px solid var(--surface-secondary);
  background: linear-gradient(180deg, var(--surface-sunken) 0%, var(--surface-base) 100%);
  white-space: nowrap;
}
.sector-detail-page .peer-table th:first-child,
.sector-detail-page .peer-table th:nth-child(2),
.sector-detail-page .peer-table th:nth-child(3) { text-align: left; }
.sector-detail-page .peer-table th a {
  color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 2px;
}
.sector-detail-page .peer-table th a:hover { color: var(--analysis-accent); }
.sector-detail-page .sort-arrow { font-size: 0.55rem; opacity: 0.4; }
.sector-detail-page .sort-arrow.active { opacity: 1; color: var(--analysis-accent); }

.sector-detail-page .peer-table td {
  padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--surface-secondary);
  font-variant-numeric: tabular-nums; text-align: right; color: var(--text-secondary);
}
.sector-detail-page .peer-table td:first-child,
.sector-detail-page .peer-table td:nth-child(2),
.sector-detail-page .peer-table td:nth-child(3) { text-align: left; }
.sector-detail-page .peer-table tbody tr { transition: background var(--transition-fast); }
.sector-detail-page .peer-table tbody tr:hover { background: var(--surface-sunken); }
.sector-detail-page .peer-table tbody tr.benchmark-row {
  background: color-mix(in srgb, var(--sem-info) 6%, var(--surface-base));
  font-weight: 700; border-top: 2px solid var(--border-strong);
}
.sector-detail-page .peer-table tbody tr.benchmark-row td { color: var(--brand-primary); border-bottom: 2px solid var(--border-strong); }

.sector-detail-page .code-link { color: var(--analysis-accent); font-weight: 700; text-decoration: none; }
.sector-detail-page .code-link:hover { color: var(--analysis-accent-dark); text-decoration: underline; }
.sector-detail-page .company-name-cell { font-weight: 600; color: var(--text-primary); max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sector-detail-page .val-pos { color: var(--sem-positive); }
.sector-detail-page .val-neg { color: var(--sem-negative); }
.sector-detail-page .val-na { color: var(--border-strong); }
.sector-detail-page .val-fin { font-size: var(--text-xs); }
.sector-detail-page .pct-high { background-color: rgba(46, 204, 113, 0.15); }
.sector-detail-page .pct-low { background-color: rgba(231, 76, 60, 0.12); }
.sector-detail-page .benchmark-range { display: block; font-size: 0.55rem; font-weight: 400; color: var(--text-tertiary); line-height: 1.2; margin-top: 1px; }
.sector-detail-page .back-link { font-size: var(--text-sm); color: var(--text-tertiary); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; margin-bottom: 1rem; }
.sector-detail-page .back-link:hover { color: var(--analysis-accent); }

}

/* ==========================================================================
   pages/market.css -- Market overview page styles
   Extracted from pages.css (market.html)
   ========================================================================== */

@layer pages {

/* ------------------------------------------------------------------
   Market Overview (market.html) — Modern Chart Cards
   ------------------------------------------------------------------ */
.z-card--chart {
  padding: 0;
  overflow: hidden;
  transition: box-shadow var(--duration-normal), transform var(--duration-normal);
}
.z-card--chart:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-1px);
}
.z-card--chart .z-card__header {
  padding: var(--space-4) var(--space-5) 0;
  margin-bottom: 0;
}
.z-card--chart .z-card__title {
  font-size: var(--font-size-md);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.01em;
}
.z-card--chart .z-card__body {
  padding: var(--space-2) var(--space-3) var(--space-3);
}
.z-chart--dist {
  background: transparent;
  border: none;
  border-radius: 0;
}

/* ------------------------------------------------------------------
   Market Signals (market_signals.html) — extracted inline styles
   ------------------------------------------------------------------ */
.ms-disclaimer-card { border-left: 3px solid var(--color-warning); }

.ms-icon-lg { font-size: var(--text-5xl); color: var(--text-disabled); }
.ms-icon-md { font-size: 36px; color: var(--text-disabled); }

/* Advancer/Decliner bar */
.ms-adv-dec { font-size: var(--text-xl); font-weight: 700; }
.ms-adv-bar {
  height: 8px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--negative, #ef4444);
  display: flex;
}
.ms-adv-bar__fill {
  background: var(--positive, #10b981);
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}

/* Sector distribution table */
.ms-sector-table { min-width: 640px; }

/* Signal modal */
.ms-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
}
.ms-modal-panel {
  background: var(--surface-raised);
  border-radius: var(--radius-lg);
  width: min(94vw, 1020px);
  max-height: 85vh;
  overflow: auto;
  padding: 1rem 1.25rem;
  box-shadow: var(--shadow-xl);
}
.ms-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
  position: sticky;
  top: 0;
  background: var(--surface-raised);
  padding: 0.25rem 0 0.5rem;
  border-bottom: 1px solid var(--border-subtle);
  z-index: 1;
}
.ms-modal-close {
  background: none;
  border: none;
  font-size: var(--text-2xl);
  cursor: pointer;
  color: var(--text-tertiary);
  line-height: 1;
  padding: 4px;
}

/* ------------------------------------------------------------------
   Risk Radar (market_risk_radar.html) — extracted inline styles
   ------------------------------------------------------------------ */
/* Index / row-number cell */
.rr-index-cell {
  color: var(--text-tertiary);
  font-size: var(--text-xs);
}

/* Company code sub-line */
.rr-code-sub {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

/* Sector / market text size */
.rr-cell-sm { font-size: var(--text-sm); }

/* Company name link with semibold weight */
.rr-name-link { font-weight: var(--fw-semibold); }

/* Score cell: bold + danger color (Z-Score / sales_yoy) */
.rr-score-danger {
  font-weight: var(--fw-bold);
  color: var(--danger, #ef4444);
}

/* Score cell: bold + warning color (F-Score) */
.rr-score-warning {
  font-weight: var(--fw-bold);
  color: var(--warning, #f59e0b);
}

/* Empty state paragraph */
.rr-empty {
  color: var(--text-tertiary);
  text-align: center;
  padding: var(--space-6);
}

/* ------------------------------------------------------------------
   Valuation Map (valuation_map.html) — extracted inline styles
   ------------------------------------------------------------------ */
/* Zone cards: left-border accent by zone type */
.vmap-zone-card--value    { border-left: 3px solid var(--positive); }
.vmap-zone-card--quality  { border-left: 3px solid var(--info); }
.vmap-zone-card--specula  { border-left: 3px solid var(--negative); }
.vmap-zone-card--growth   { border-left: 3px solid var(--warning); }

/* Zone label (bold + semantic color) */
.vmap-zone-label { font-weight: var(--fw-semibold); }
.vmap-zone-label--value   { color: var(--positive); }
.vmap-zone-label--quality { color: var(--info); }
.vmap-zone-label--specula { color: var(--negative); }
.vmap-zone-label--growth  { color: var(--warning); }

/* Zone sub-text */
.vmap-zone-sub {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

/* Zone count number */
.vmap-zone-count {
  font-size: var(--text-2xl);
  font-weight: var(--fw-bold);
  margin-top: var(--space-2);
}

/* Filter selects width auto */
.vmap-filter-select { width: auto; }

/* Sector name cell in table */
.vmap-sector-name { font-weight: var(--fw-semibold); }

/* ------------------------------------------------------------------
   Sector page (sector.html) — extracted inline styles
   ------------------------------------------------------------------ */
/* Insight value colored by sign */
.sector-insight-value--pos { color: var(--positive); }
.sector-insight-value--neg { color: var(--negative); }

/* Sector heatmap header flex row */
.sector-hm-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

/* Gradient legend strip */
.sector-hm-legend-strip {
  width: 60px;
  height: 8px;
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg, var(--negative), var(--warning), var(--positive));
}

/* Distribution table median cell: semibold */
.sector-dist-median { font-weight: var(--fw-semibold); }

/* Distribution table min/max cells: muted */
.sector-dist-muted { color: var(--text-tertiary); }

/* Top companies metric value */
.sector-top-value--pos { color: var(--positive); }
.sector-top-value--neg { color: var(--negative); }

/* Top companies table: column widths */
.sector-top-col-rank { width: 60px; }
.sector-top-col-code { width: 80px; }

/* Bar chart / heatmap info note */
.sector-chart-note {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  margin-top: var(--space-2);
}

/* Insights row separator */
.sector-insights-sep {
  border: none;
  border-top: 1px solid var(--border-default);
  margin: var(--space-3) 0;
}

/* Insight/chart header: flex + items-center + gap */
.sector-chart-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* Sector page bar chart + heatmap row gap override */
.sector-charts-row { gap: var(--space-4); }

/* ------------------------------------------------------------------
   market.html — extracted inline styles (Group 3)
   ------------------------------------------------------------------ */

/* Price treemap legend row */
.mkt-legend {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  font-size: var(--text-xs);
  flex-wrap: wrap;
}

/* Legend color bar wrapper */
.mkt-legend-bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* Gradient bar */
.mkt-gradient-bar {
  display: flex;
  height: 10px;
  border-radius: var(--radius-full);
  overflow: hidden;
  width: 120px;
}

/* Gradient bar (heatmap variant, wider) */
.mkt-gradient-bar--heatmap {
  display: flex;
  height: 12px;
  border-radius: var(--radius-md);
  overflow: hidden;
  width: 160px;
}

/* Legend color swatch */
.mkt-swatch {
  flex: 1;
}

/* Heatmap / gradient legend swatch color variants */
.mkt-swatch--red-500   { background: var(--sem-negative, #ef4444); }
.mkt-swatch--red-300   { background: #fca5a5; }
.mkt-swatch--green-300 { background: #86efac; }
.mkt-swatch--green-500 { background: var(--sem-positive, #22c55e); }
.mkt-swatch--blue-50   { background: #f0f7ff; }
.mkt-swatch--teal-200  { background: #99f6e4; }
.mkt-swatch--teal-400  { background: var(--brand-primary, #2dd4bf); }
.mkt-swatch--teal-600  { background: #0d9488; }
.mkt-swatch--teal-900  { background: #134e4a; }

/* Legend label: negative */
.mkt-label-neg {
  color: var(--negative);
  font-weight: 600;
}

/* Legend label: positive */
.mkt-label-pos {
  color: var(--positive);
  font-weight: 600;
}

/* Legend note (subtle color) */
.mkt-legend-note {
  color: var(--text-disabled);
}

/* Heatmap legend row */
.mkt-heatmap-legend {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

/* Heatmap legend margin note */
.mkt-heatmap-legend__note {
  margin-left: var(--space-2);
  color: var(--text-disabled);
}

/* KPI stats table: label cell */
.mkt-kpi-label {
  font-weight: var(--fw-semibold);
}

/* KPI stats footnote */
.mkt-footnote {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  margin-top: var(--space-2);
}

/* EBITDA ranking sub text (code/sector) */
.mkt-company-sub {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

/* Health bullet label */
.mkt-bullet-label {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  margin-bottom: var(--space-1);
  font-weight: var(--fw-semibold);
}

/* Score distribution card title */
.mkt-dist-title {
  font-size: var(--text-sm);
  margin-bottom: var(--space-2);
}

/* ------------------------------------------------------------------
   technical.html — extracted inline styles (Group 3)
   ------------------------------------------------------------------ */

/* Filter select: auto width */
.z-input--auto {
  width: auto;
}

/* Company name truncated cell */
.tech-name-cell {
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* RSI oversold card accent */
.z-card--oversold {
  border-left: 3px solid var(--positive);
}

/* RSI overbought card accent */
.z-card--overbought {
  border-left: 3px solid var(--negative);
}

/* RSI zone card title: oversold color */
.z-card__title--positive {
  color: var(--positive);
}

/* RSI zone card title: overbought color */
.z-card__title--negative {
  color: var(--negative);
}

/* RSI zone card body flex wrap */
.z-card__body--flex-wrap {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* Technical icon: no data */
.tech-empty-icon {
  font-size: var(--text-5xl);
  color: var(--text-disabled);
}

/* ------------------------------------------------------------------
   Market Health Snapshot (market.html § 市場ヘルススナップショット)
   ------------------------------------------------------------------ */
.mkt-health-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
  gap: var(--space-3);
}
.mkt-health-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--surface-base);
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
  text-decoration: none;
  transition: transform var(--duration-fast), box-shadow var(--duration-fast),
              border-color var(--duration-fast);
}
a.mkt-health-card:hover,
a.mkt-health-card:focus-visible {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
  outline: none;
}
.mkt-health-card__icon {
  display: inline-flex;
  align-items: center;
  width: 28px;
  height: 28px;
  font-size: 22px;
  color: var(--text-secondary);
}
.mkt-health-card__count {
  font-size: var(--text-2xl);
  font-weight: var(--fw-bold);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.mkt-health-card__label {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  line-height: 1.3;
}
.mkt-health-card__pct {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}
.mkt-health-card--negative {
  background: color-mix(in srgb, var(--sem-negative) 6%, var(--surface-base));
  border-color: color-mix(in srgb, var(--sem-negative) 25%, var(--surface-base));
}
.mkt-health-card--negative .mkt-health-card__icon,
.mkt-health-card--negative .mkt-health-card__count {
  color: var(--sem-negative);
}
.mkt-health-card--warning {
  background: color-mix(in srgb, var(--sem-warning) 8%, var(--surface-base));
  border-color: color-mix(in srgb, var(--sem-warning) 30%, var(--surface-base));
}
.mkt-health-card--warning .mkt-health-card__icon,
.mkt-health-card--warning .mkt-health-card__count {
  color: var(--brand-accent-text, var(--sem-warning));
}
.mkt-health-card--info {
  background: color-mix(in srgb, var(--sem-info) 6%, var(--surface-base));
  border-color: color-mix(in srgb, var(--sem-info) 25%, var(--surface-base));
}
.mkt-health-card--info .mkt-health-card__icon,
.mkt-health-card--info .mkt-health-card__count {
  color: var(--sem-info, var(--brand-primary));
}
.mkt-health-card--positive {
  background: color-mix(in srgb, var(--sem-positive) 6%, var(--surface-base));
  border-color: color-mix(in srgb, var(--sem-positive) 25%, var(--surface-base));
}
.mkt-health-card--positive .mkt-health-card__icon,
.mkt-health-card--positive .mkt-health-card__count {
  color: var(--sem-positive);
}

}

/* ==========================================================================
   watchlist.css — watchlist.html page-specific styles
   ========================================================================== */

@layer pages {

/* Count badge (header pill) */
.count-badge {
  background: rgba(255,255,255,0.2);
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
  font-weight: 600;
  margin-left: 0.5rem;
}

/* Sortable table headers */
.watchlist-table th.sortable { cursor: pointer; user-select: none; transition: color var(--transition-fast); }
.watchlist-table th.sortable:hover { color: var(--color-info); }
.watchlist-table th .sort-arrow { font-size: var(--text-xs); margin-left: 0.25rem; opacity: 0.3; }
.watchlist-table th.sort-active .sort-arrow { opacity: 1; color: var(--color-info); }

/* Empty state */
.empty-state { text-align: center; padding: 3rem 1rem; color: var(--text-tertiary); }
.empty-state p { margin: 0.25rem 0; }
.empty-state-title { font-size: var(--text-xl); margin-bottom: 0.5rem; }
.empty-state-desc { font-size: var(--text-sm); }
.empty-state-hint { font-size: var(--text-sm); margin-top: 0.75rem; color: var(--text-tertiary); }

/* Loading state */
.loading-state { text-align: center; padding: 2rem; color: var(--text-tertiary); }

/* Compare shortcut button */
.btn-compare {
  background: linear-gradient(135deg, var(--analysis-accent), var(--analysis-accent-dark));
  text-decoration: none;
  font-size: var(--text-sm);
}

/* Portfolio Analysis */
.portfolio-section { margin-top: 2rem; }
.portfolio-section h2 { font-size: var(--text-xl); font-weight: 700; color: var(--text-primary); margin-bottom: 1rem; }
.portfolio-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; }
.portfolio-card { background: var(--surface-raised); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 1.25rem; box-shadow: var(--shadow-sm); }
.portfolio-card h3 { margin: 0 0 1rem; font-size: var(--text-base); color: var(--text-secondary); font-weight: 600; }
.summary-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.stat-item { display: flex; flex-direction: column; }
.stat-item .stat-label { font-size: var(--text-xs); color: var(--text-tertiary); margin-bottom: 0.125rem; }
.stat-item .stat-value { font-size: var(--text-xl); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text-primary); }
.pct-bar-row { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.625rem; }
.pct-label { width: 5.5rem; font-size: var(--text-sm); text-align: right; color: var(--text-secondary); }
.pct-bar-track { flex: 1; height: 18px; background: var(--surface-secondary); border-radius: var(--radius-full); overflow: hidden; }
.pct-bar-fill { height: 100%; border-radius: var(--radius-full); transition: width 0.6s ease; }
.pct-value { width: 4.5rem; font-size: var(--text-sm); color: var(--text-secondary); font-weight: 600; }
.portfolio-position-desc { font-size: var(--text-xs); color: var(--text-tertiary); margin: 0 0 0.75rem; }

}

/* ==========================================================================
   compare.css — compare.html page-specific styles
   ========================================================================== */

@layer pages {

/* Search form wrapper */
.search-form {
  background: var(--surface-base, #fff);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  box-shadow: var(--shadow-md);
  margin-bottom: var(--space-6);
}

.search-form h3 { font-size: var(--text-base); font-weight: 600; margin: 0 0 0.75rem 0; color: var(--text-primary); }

.code-inputs { display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; }

.code-inputs .input-wrapper { position: relative; width: 200px; }

.code-inputs input {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 2px solid var(--border-default);
  border-radius: var(--radius-sm);
  font-size: var(--text-base);
  font-weight: 600;
  text-align: center;
  transition: border-color var(--transition-fast);
  box-sizing: border-box;
}

.code-inputs input:focus-visible { border-color: var(--color-info); }

/* Compare search grid */
.compare-search-grid {
  display: flex;
  align-items: flex-end;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.compare-slot {
  flex: 1;
  min-width: 180px;
  max-width: 240px;
}
.compare-slot__label {
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  color: var(--text-tertiary);
  margin-bottom: var(--space-1);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.compare-slot__input {
  width: 100%;
  padding-left: 2.25rem;
  transition: border-color var(--duration-normal), box-shadow var(--duration-normal), background var(--duration-normal);
}
.compare-slot__input:hover:not(:focus) {
  border-color: var(--border-strong);
}
.compare-slot__input:focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px var(--color-focus-ring);
}
.compare-slot__icon {
  position: absolute;
  left: 0.6rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--text-lg);
  color: var(--text-disabled);
  pointer-events: none;
  transition: color var(--transition-normal);
}
.compare-slot .ac-wrap:focus-within .compare-slot__icon {
  color: var(--brand-primary);
}
.compare-vs {
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  color: var(--text-disabled);
  padding-bottom: 0.7rem;
  flex-shrink: 0;
}
.compare-submit-btn {
  flex-shrink: 0;
  white-space: nowrap;
}
/* Selected chip shown inside slot */
.compare-slot--filled .compare-slot__input,
.compare-slot.is-selected .compare-slot__input {
  border-color: var(--brand-primary);
  background: var(--teal-50, #f0fdfa);
  box-shadow: 0 0 0 3px var(--color-focus-ring);
}
.compare-slot.is-selected .compare-slot__icon {
  color: var(--brand-primary);
}
@keyframes ac-chip-enter {
  from { opacity: 0; transform: translateY(-4px) scale(0.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes ac-slot-confirm {
  0% { box-shadow: 0 0 0 0 rgba(13, 148, 136, 0.4); }
  50% { box-shadow: 0 0 0 6px rgba(13, 148, 136, 0.1); }
  100% { box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.1); }
}
.compare-slot.is-selected .compare-slot__input {
  animation: ac-slot-confirm 0.4s ease-out;
}
.ac-selected-chip {
  align-items: center;
  gap: 0.375rem;
  margin-top: var(--space-1);
  padding: 0.3rem 0.625rem;
  background: var(--brand-primary);
  color: var(--text-inverse);
  border-radius: 999px;
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  line-height: 1.4;
  max-width: 100%;
  overflow: hidden;
  /* Hidden by default, animated on show */
  display: none;
  opacity: 0;
  transform: translateY(-4px) scale(0.95);
}
.ac-selected-chip.show {
  display: inline-flex;
  animation: ac-chip-enter 0.25s ease-out forwards;
}
.ac-selected-chip__name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ac-selected-chip__clear {
  cursor: pointer;
  font-size: var(--text-base);
  opacity: 0.7;
  flex-shrink: 0;
  line-height: 1;
  border-radius: 50%;
  transition: opacity var(--duration-fast), background var(--duration-fast);
}
.ac-selected-chip__clear:hover {
  opacity: 1;
  background: rgba(255,255,255,0.2);
}

/* Autocomplete dropdown */
.ac-wrap { position: relative; display: block; }
.ac-wrap:has(.ac-dropdown.show) { z-index: 50; }

.ac-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  min-width: 300px;
  background: var(--surface-raised, white);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md, 8px);
  box-shadow: var(--shadow-lg);
  z-index: 200;
  max-height: 340px;
  overflow-y: auto;
  margin-top: 4px;
  /* Animate open/close */
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity var(--transition-normal), transform var(--transition-normal);
}
.ac-dropdown.show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.ac-item {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: background var(--transition-fast);
}
.ac-item:hover, .ac-item.is-active { background: var(--surface-hover, #f1f5f9); }
.ac-item .ac-code { font-weight: 700; color: var(--text-primary); flex-shrink: 0; }
.ac-item .ac-name { color: var(--text-secondary); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-item .ac-market { font-size: var(--text-xs); color: var(--text-tertiary); flex-shrink: 0; }
.ac-item .ac-sector { font-size: var(--text-xs); color: var(--text-tertiary); width: 100%; padding-left: 3.25rem; }
.ac-item .ac-delisted {
  color: var(--color-warning, #d97706);
  font-size: var(--text-xs);
  font-weight: 600;
}
.ac-item-delisted { opacity: 0.55; }
.ac-empty {
  padding: 1.25rem 1rem;
  color: var(--text-tertiary);
  font-size: var(--text-sm);
  text-align: center;
}
/* Legacy label — replaced by chip */
.ac-selected-label { display: none; }

.code-inputs .separator { color: var(--text-tertiary); font-size: var(--text-xl); }

.code-inputs button {
  padding: var(--space-2) var(--space-6);
  background: var(--color-info);
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.code-inputs button:hover { background: var(--sem-info); }

.profile-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-4); margin-bottom: var(--space-6); }

.profile-card {
  background: var(--surface-base, #fff);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  box-shadow: var(--shadow-md);
  border-top: 4px solid var(--color-info);
}

.profile-card:nth-child(2) { border-top-color: var(--color-positive); }
.profile-card:nth-child(3) { border-top-color: var(--color-warning); }
.profile-card:nth-child(4) { border-top-color: var(--chart-6); }
.profile-card .code { font-size: 0.8125rem; color: var(--text-tertiary); font-weight: 600; }
.profile-card .name { font-size: var(--text-lg); font-weight: 700; color: var(--text-primary); margin: 0.25rem 0; }
.profile-card .name a { color: inherit; text-decoration: none; }
.profile-card .name a:hover { color: var(--color-info); }
.profile-card .meta { font-size: 0.8125rem; color: var(--text-tertiary); }
.profile-card .price { font-size: var(--text-xl); font-weight: 700; margin-top: var(--space-2); color: var(--text-primary); }

.compare-table { width: 100%; border-collapse: collapse; }
.compare-table th {
  background: var(--surface-sunken);
  padding: 0.75rem 1rem;
  text-align: right;
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  font-weight: 600;
  border-bottom: 1px solid var(--border-default);
}
.compare-table th:first-child { text-align: left; }
.compare-table td {
  padding: 0.625rem 1rem;
  border-bottom: 1px solid var(--surface-secondary);
  font-size: var(--text-sm);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.compare-table td:first-child { text-align: left; font-weight: 600; color: var(--text-secondary); }
.compare-table tr:hover { background: var(--surface-sunken); }
.compare-table .best { color: var(--color-positive); font-weight: 700; }
/* KPI comparison highlight: best (green) / worst (red) */
.compare-table td.cmp-best {
  color: var(--sem-positive);
  font-weight: 700;
  background: color-mix(in srgb, var(--sem-positive) 10%, var(--surface-base));
}
.compare-table td.cmp-worst {
  color: var(--sem-negative);
  font-weight: 600;
  background: color-mix(in srgb, var(--sem-negative) 8%, var(--surface-base));
}

/* Compare: profile cards */
.compare-profile__code { font-size: var(--text-xs, 0.75rem); color: var(--text-tertiary, #64748b); }
.compare-profile__name { font-weight: var(--fw-semibold, 600); }
.compare-profile__name a { color: inherit; text-decoration: none; }
.compare-profile__name a:hover { color: var(--brand-primary, #0d9488); }
.compare-profile__meta { font-size: var(--text-xs, 0.75rem); color: var(--text-tertiary, #64748b); margin-top: var(--space-1, 4px); }
.compare-profile__price { font-size: var(--text-xl, 1.25rem); font-weight: var(--fw-bold, 700); margin-top: var(--space-2, 8px); }
.compare-profile__unit { font-size: var(--text-sm, 0.875rem); font-weight: var(--fw-normal, 400); color: var(--text-secondary, #475569); }

/* Compare: risk badges (audit / GC / foreign currency) — dashboard 改善 8 */
.compare-profile__risk-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-1);
  margin-top: var(--space-2);
  min-height: 22px;
}
.compare-profile__risk-row:empty {
  display: none;
}

/* Compare: win-rate bar (KPI 横比較で何項目勝ったか) */
.compare-profile__winrate {
  margin-top: var(--space-3);
  text-align: center;
}
.compare-profile__winrate-label {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  font-weight: var(--fw-semibold);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}
.compare-profile__winrate-pct {
  color: var(--text-tertiary);
  font-weight: var(--fw-normal);
}
.compare-profile__winrate-bar {
  margin-top: var(--space-1);
  height: 6px;
  background: var(--surface-sunken);
  border-radius: 3px;
  overflow: hidden;
}
.compare-profile__winrate-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--brand-primary), var(--sem-positive, #16a34a));
  transition: width 0.3s ease;
}

/* Compare: chart container with responsive height (mobile-first) */
.compare-chart { height: 280px; }
@media (min-width: 768px) {
  .compare-chart { height: 380px; }
}

/* Admin layout: mobile-first — base is 1-column, desktop restores grid */
.admin-layout { grid-template-columns: 1fr; }
@media (min-width: 768px) {
  .admin-layout { grid-template-columns: auto 1fr; }
}

.btn-compare-export {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.75rem;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-tertiary);
  background: var(--surface-sunken);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: var(--transition-fast);
}

.btn-compare-export:hover { color: var(--color-info); border-color: var(--teal-300); background: color-mix(in srgb, var(--sem-info) 8%, var(--surface-base)); }

/* KPI table header: sticky first column */
.compare-th-sticky {
  min-width: 140px;
  position: sticky;
  left: 0;
  background: var(--surface-sunken);
  z-index: 1;
}

/* KPI table header: company columns */
.compare-th-company {
  min-width: 100px;
}

/* KPI table: company code sub */
.compare-th-code {
  font-size: var(--text-xs);
  font-weight: normal;
  color: var(--text-tertiary);
}

/* KPI table data: sticky first column */
.compare-td-sticky {
  position: sticky;
  left: 0;
  background: var(--surface-base);
  z-index: 1;
  font-weight: var(--fw-medium);
}

/* KPI table unit */
.compare-td-unit {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

}

/* ==========================================================================
   ranking.css — rankings.html and changes.html page-specific styles
   ========================================================================== */

/* Changes page: delta badges */
.ranking-table .delta-up { color: var(--color-positive); font-weight: 700; }
.ranking-table .delta-down { color: var(--color-negative); font-weight: 700; }

/* RSI Zone Cards (technical / rankings pages) */
.rsi-zone-card { border-radius: var(--radius-lg); padding: 1.25rem; margin-bottom: 1.5rem; }

.rsi-zone-card h4 {
  font-size: var(--text-base);
  font-weight: 700;
  margin: 0 0 0.75rem 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.rsi-oversold { background: linear-gradient(135deg, color-mix(in srgb, var(--sem-positive) 15%, var(--surface-base)) 0%, color-mix(in srgb, var(--sem-positive) 30%, var(--surface-base)) 100%); border: 2px solid var(--sem-positive); }
.rsi-oversold h4 { color: var(--sem-positive); }
.rsi-overbought { background: linear-gradient(135deg, color-mix(in srgb, var(--sem-negative) 8%, var(--surface-base)) 0%, color-mix(in srgb, var(--sem-negative) 25%, var(--surface-base)) 100%); border: 2px solid var(--sem-negative); }
.rsi-overbought h4 { color: var(--sem-negative); }

.rsi-list { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.rsi-item {
  background: var(--surface-base, #fff);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.75rem;
  font-size: var(--text-sm);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid rgba(0,0,0,0.08);
}

.rsi-item a { color: var(--primary); font-weight: 700; text-decoration: none; }
.rsi-item .val { color: var(--text-tertiary); font-size: var(--text-xs); }

/* RSI item variants (technical page) */
.rsi-item--oversold { background: color-mix(in srgb, var(--sem-positive) 15%, var(--surface-base)); }
.rsi-item--overbought { background: color-mix(in srgb, var(--sem-negative) 8%, var(--surface-base)); }

/* Card description paragraph (below card title) */
.rank-card-desc {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-bottom: var(--space-3);
}

/* Footnote (※ 銀行・金融業は除外) */
.rank-card-note {
  font-size: var(--text-xs);
  color: var(--text-disabled);
  margin-bottom: var(--space-2);
}

/* ROE sub-cell in efficiency table */
.rank-roe-cell {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

/* Bump chart note */
.rank-bump-note {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  margin-top: var(--space-2);
}

/* Consecutive growth section heading */
.rank-section-heading {
  font-size: var(--text-lg);
  font-weight: var(--fw-bold);
}

/* Consecutive growth card description */
.rank-consec-desc {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

/* ==========================================================================
   v2 design system: z- prefix ranking classes (migrated from pages-v2.css)
   ========================================================================== */

@layer pages {
  /* Ranking list container */
  .z-ranking-list {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  /* Ranking row: mobile-first 2-row grid (rank+company / metric),
     promoted to single-row 3-column grid at >=640px */
  .z-ranking-row {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "rank company"
      "metric metric";
    row-gap: var(--space-2);
    column-gap: var(--space-3);
    align-items: center;
    padding: var(--space-3);
    border-bottom: 1px solid var(--border-subtle);
    color: inherit;
    text-decoration: none;
    transition: background var(--duration-fast), box-shadow var(--duration-fast);
  }
  .z-ranking-row:last-child { border-bottom: none; }
  .z-ranking-row:hover,
  .z-ranking-row:focus-visible {
    background: var(--surface-sunken);
    outline: none;
  }
  .z-ranking-row:focus-visible {
    box-shadow: inset 0 0 0 2px var(--brand-primary);
  }

  /* Rank badge: circular, with podium colors for top 3 */
  .z-rank-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-weight: var(--fw-bold);
    font-size: var(--text-sm);
    background: var(--surface-sunken);
    color: var(--text-secondary);
    border: 1px solid var(--border-subtle);
    flex-shrink: 0;
  }
  .z-rank-badge--gold {
    background: linear-gradient(135deg, #fde68a 0%, #f59e0b 100%);
    color: #78350f;
    border-color: #f59e0b;
    box-shadow: 0 1px 2px rgba(245, 158, 11, 0.25);
  }
  .z-rank-badge--silver {
    background: linear-gradient(135deg, #e5e7eb 0%, #9ca3af 100%);
    color: #1f2937;
    border-color: #9ca3af;
    box-shadow: 0 1px 2px rgba(156, 163, 175, 0.25);
  }
  .z-rank-badge--bronze {
    background: linear-gradient(135deg, #fdba74 0%, #c2410c 100%);
    color: #fff;
    border-color: #c2410c;
    box-shadow: 0 1px 2px rgba(194, 65, 12, 0.25);
  }

  /* Company info cell */
  .z-ranking-row__company {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .z-ranking-row__company-name {
    font-weight: var(--fw-semibold);
    font-size: var(--text-base);
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .z-ranking-row__company-sub {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
  }
  .z-ranking-row__code {
    font-variant-numeric: tabular-nums;
    color: var(--text-secondary);
    font-weight: var(--fw-medium);
  }
  .z-ranking-row__sector {
    color: var(--text-tertiary);
  }

  /* Metric value cell (right-aligned) */
  .z-ranking-row__metric {
    text-align: right;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
  }
  .z-ranking-row__metric-value {
    font-weight: var(--fw-bold);
    font-size: var(--text-lg);
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
  }
  .z-ranking-row__metric-sub {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    font-variant-numeric: tabular-nums;
  }

  /* Mobile-first grid areas (rows arrangement above) */
  .z-rank-badge { grid-area: rank; }
  .z-ranking-row__company { grid-area: company; }
  .z-ranking-row__metric {
    grid-area: metric;
    flex-direction: row;
    justify-content: space-between;
    align-items: baseline;
    padding-left: 48px; /* align with company text (badge width + gap) */
  }
  .z-ranking-row__metric-value { font-size: var(--text-base); }

  /* >=640px (tablet+): single-row 3-column grid */
  @media (min-width: 640px) {
    .z-ranking-row {
      grid-template-columns: auto 1fr auto;
      grid-template-areas: none;
      row-gap: 0;
      column-gap: var(--space-4);
      padding: var(--space-3) var(--space-4);
    }
    .z-rank-badge,
    .z-ranking-row__company,
    .z-ranking-row__metric { grid-area: auto; }
    .z-ranking-row__metric {
      flex-direction: column;
      align-items: flex-end;
      justify-content: center;
      padding-left: 0;
    }
    .z-ranking-row__metric-value { font-size: var(--text-lg); }
  }

  /* Sentinel row (infinite scroll trigger) */
  .z-ranking-sentinel {
    display: flex;
    justify-content: center;
    padding: var(--space-4);
    color: var(--text-tertiary);
    font-size: var(--text-sm);
  }
}

/* ==========================================================================
   home.css — index.html page-specific styles
   ========================================================================== */

/* Quick access card description */
.idx-card-desc {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-top: var(--space-1);
}

/* Market card description */
.idx-market-desc {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-top: var(--space-2);
}

/* Risk radar summary: "リスク注意企業" label */
.idx-risk-label {
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-secondary);
}

/* Market cards row: justify-between */
.idx-market-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Treemap / chart subtitle */
.idx-chart-sub {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

/* noscript fallback message inside chart area */
.idx-noscript-msg {
  padding: var(--space-4);
  color: var(--text-tertiary);
  text-align: center;
}

/* Table empty state cell */
.idx-table-empty {
  padding: var(--space-8);
  color: var(--text-tertiary);
  text-align: center;
}

/* ==========================================================================
   v2 design system: hero / search (migrated from pages-v2.css)
   ========================================================================== */

@layer pages {
  .z-hero {
    padding: var(--space-12) var(--space-4) var(--space-6);
    text-align: center;
    overflow-wrap: break-word;
    word-break: break-word;
  }
  .z-hero__title {
    font-size: clamp(var(--text-2xl), 3vw + 1rem, var(--text-3xl));
    font-weight: var(--fw-extrabold);
    color: var(--text-primary);
    letter-spacing: -0.03em;
    line-height: var(--lh-tight);
  }
  .z-hero__sub {
    font-size: clamp(var(--text-base), 2vw + 0.5rem, var(--text-lg));
    color: var(--text-secondary);
    margin-top: var(--space-3);
  }
  .z-search--hero {
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
  }
  .z-quickaccess-icon {
    font-size: 28px;
    color: var(--brand-primary);
  }
  .z-market-stat {
    text-align: center;
  }
  .z-market-stat__label {
    font-weight: var(--fw-semibold);
    margin-bottom: var(--space-1);
  }
  .z-market-stat__value {
    font-size: var(--text-lg);
    font-weight: var(--fw-bold);
    font-variant-numeric: tabular-nums;
  }
  .z-market-stat__sub {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    margin-top: var(--space-1);
  }

  /* ==========================================================================
     Hero enhancement (audit dashboard 改善 2026-05-03)
     ========================================================================== */
  .z-hero--enhanced {
    background: linear-gradient(135deg, color-mix(in srgb, var(--brand-primary) 6%, transparent), transparent);
    border-radius: var(--radius-lg, 12px);
    padding: var(--space-10) var(--space-6) var(--space-8);
    margin-bottom: var(--space-6);
  }
  .z-hero__stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--space-4);
    margin-top: var(--space-6);
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
  }
  .z-hero__stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-3);
    background: var(--surface-base);
    border-radius: var(--radius-md, 8px);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  }
  .z-hero__stat-value {
    font-size: clamp(var(--text-xl), 2vw + 1rem, var(--text-2xl));
    font-weight: var(--fw-extrabold);
    color: var(--brand-primary);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
  }
  .z-hero__stat-label {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    margin-top: var(--space-1);
  }

  /* ==========================================================================
     Risk Summary card + grid (監査リスク警告)
     ========================================================================== */
  /* z-card--risk-summary は components/card.css に定義 (重複削除) */
  .z-risk-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--space-3);
  }
  .z-risk-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-4) var(--space-3);
    background: var(--surface-sunken);
    border-radius: var(--radius-md, 8px);
    text-decoration: none;
    color: var(--text-primary);
    border: 1px solid transparent;
    transition: transform 0.15s ease, border-color 0.15s ease;
    text-align: center;
  }
  .z-risk-card:hover {
    transform: translateY(-2px);
    border-color: currentColor;
    text-decoration: none;
  }
  .z-risk-card__icon .material-symbols-outlined,
  .z-risk-card__icon {
    font-size: 24px;
  }
  .z-risk-card__count {
    font-size: clamp(var(--text-xl), 2vw + 0.5rem, var(--text-2xl));
    font-weight: var(--fw-extrabold);
    font-variant-numeric: tabular-nums;
    margin-top: var(--space-1);
    line-height: 1.1;
  }
  .z-risk-card__label {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    margin-top: var(--space-1);
  }
  .z-risk-card--negative {
    color: var(--negative, #dc2626);
  }
  .z-risk-card--warning {
    color: var(--warning, #f97316);
  }
  .z-risk-card--info {
    color: var(--info, #0ea5e9);
  }

  /* ==========================================================================
     Compact table (Top performers 4 列並列のカード内テーブル)
     ========================================================================== */
  .z-table--compact {
    width: 100%;
    border-collapse: collapse;
  }
  .z-table--compact td {
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-sm);
    border-bottom: 1px solid var(--border-subtle, #e5e7eb);
  }
  .z-table--compact tr:last-child td {
    border-bottom: 0;
  }
  .u-truncate {
    max-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* ==========================================================================
     データ品質スナップショット (dashboard 改善 10 / 2026-05-04)
     ========================================================================== */
  .z-card--data-quality {
    border-left: 3px solid var(--sem-info, #0ea5e9);
  }
  .z-data-quality-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: var(--space-4);
  }
  .z-data-quality-grid__item {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-2) 0;
  }
  .z-data-quality-grid__value {
    font-size: var(--text-xl);
    font-weight: var(--fw-extrabold);
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
  }
  .z-data-quality-grid__pct {
    font-size: var(--text-xs);
    font-weight: var(--fw-semibold);
    color: var(--text-secondary);
    margin-left: var(--space-1);
  }
  .z-data-quality-grid__label {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
  }
  .z-data-quality-grid__bar {
    margin-top: var(--space-1);
    height: 4px;
    background: var(--surface-sunken);
    border-radius: 2px;
    overflow: hidden;
  }
  .z-data-quality-grid__bar-fill {
    height: 100%;
    transition: width 0.4s ease;
  }
  .z-data-quality-grid__bar-fill--positive {
    background: var(--sem-positive, #16a34a);
  }
  .z-data-quality-grid__bar-fill--info {
    background: var(--sem-info, #0ea5e9);
  }
  .z-data-quality-source {
    margin-top: var(--space-3);
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    display: flex;
    align-items: center;
    gap: var(--space-1);
    flex-wrap: wrap;
  }
  .z-data-quality-source a {
    color: var(--brand-primary);
    text-decoration: underline;
  }
}

/* ==========================================================================
   auth.css — auth pages: register, login, delete_account, sessions, contact
   ========================================================================== */

/* account.html */

/* Page container */
.account-page {
  max-width: 640px;
  margin: 0 auto;
}

/* Alert card: success (green left border) */
.z-card--alert-success {
  border-left: 4px solid var(--status-positive);
  margin-bottom: var(--space-4);
}

/* Alert card body (small text, positive color) */
.z-card__body--alert {
  padding: var(--space-3);
  font-size: var(--text-sm);
  color: var(--status-positive);
}

/* Table th: label column width */
.account-th {
  width: 40%;
  white-space: nowrap;
}

/* Inline form (display:inline) */
.form-inline {
  display: inline;
}

/* Subscription plan text */
.account-plan-meta {
  color: var(--text-tertiary);
  font-size: var(--text-sm);
}

/* Subscription note */
.account-sub-note {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  margin-top: var(--space-2);
}

/* Danger zone text */
.account-danger-text {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  margin-bottom: var(--space-3);
}

/* Account section note */
.account-note {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  margin-bottom: var(--space-2);
}

/* Danger button (red text variant) */
.z-btn--danger-text {
  color: var(--status-negative);
}

/* register / login / delete_account / sessions */

/* Page title heading in auth cards */
.z-auth-heading {
  font-size: var(--text-lg);
  font-weight: var(--fw-bold);
  margin-bottom: var(--space-1);
}

/* Sub-text beneath heading (e.g. "7日間の無料トライアル付き") */
.z-auth-subtext {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-bottom: var(--space-4);
}

/* Error / alert card with left accent border */
.z-card--alert-error {
  border-left: 4px solid var(--status-negative);
  margin-bottom: var(--space-4);
}

/* Body inside error alert card */
.z-card__body--alert-error {
  padding: var(--space-3);
  font-size: var(--text-sm);
  color: var(--status-negative);
}

/* Warning card with left accent border */
.z-card--alert-warning {
  border-left: 4px solid var(--status-warning);
  margin-bottom: var(--space-4);
}

/* Body inside warning alert card */
.z-card__body--alert-warning {
  padding: var(--space-3);
  font-size: var(--text-sm);
}

/* Password hint text */
.z-auth-hint {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  margin-top: var(--space-1);
  display: block;
}

/* Terms checkbox label row */
.z-auth-terms-label {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--text-secondary);
  cursor: pointer;
}

/* Terms checkbox itself (prevent shrink) */
.z-auth-terms-check {
  margin-top: 2px;
  flex-shrink: 0;
}

/* Inline term/privacy links */
.z-auth-link {
  color: var(--brand-primary);
}

/* Auth form field: extra bottom margin variant */
.z-form-field--mb4 {
  margin-bottom: var(--space-4);
}

/* Full-width button utility for auth forms */
.z-btn--full {
  width: 100%;
}

/* Footer link in auth card */
.z-auth-footer-link {
  color: var(--brand-primary);
  font-weight: var(--fw-semibold);
}

/* Horizontal rule with vertical spacing */
.z-auth-hr {
  margin: var(--space-4) 0;
}

/* delete_account.html — narrow container */
.z-auth-page--narrow {
  max-width: 480px;
  margin: 0 auto;
}

/* Card with top danger border (delete account) */
.z-card--danger-top {
  border-top: 4px solid var(--status-negative);
}

/* Title with danger color */
.z-card__title--danger {
  color: var(--status-negative);
}

/* Description list text (sm + secondary) */
.z-auth-desc {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-bottom: var(--space-2);
}

/* Warning list */
.z-auth-warn-list {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  padding-left: var(--space-6);
  margin-bottom: var(--space-6);
}

/* Danger submit button (delete account) */
.z-btn--danger-bg {
  background: var(--status-negative);
  border-color: var(--status-negative);
}

/* Card footer: centered link row */
.z-card__footer--center {
  text-align: center;
  padding: var(--space-4);
  border-top: 1px solid var(--border-subtle);
  font-size: var(--text-sm);
}

/* Muted footer link */
.z-auth-footer-link--muted {
  color: var(--text-secondary);
}

/* sessions.html — page wrapper */
.z-sessions-page {
  max-width: 640px;
  margin: 0 auto;
  padding: var(--space-4);
}

/* Sessions page heading */
.z-sessions-heading {
  font-size: var(--text-lg);
  font-weight: var(--fw-bold);
  margin-bottom: var(--space-4);
}

/* Session card spacing */
.z-sessions-card {
  margin-bottom: var(--space-3);
}

/* Session card body layout */
.z-sessions-card-body {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

/* Session browser label */
.z-sessions-agent {
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
}

/* "現在" badge margin */
.z-sessions-badge {
  margin-left: var(--space-1);
}

/* Session meta info (IP / date) */
.z-sessions-meta {
  color: var(--text-tertiary);
  font-size: var(--text-xs);
  margin-top: var(--space-1);
}

/* Revoke button */
.z-btn--danger-text-sm {
  color: var(--status-negative);
}

/* No sessions message */
.z-sessions-empty {
  color: var(--text-secondary);
}

/* Back button with top margin */
.z-sessions-back {
  margin-top: var(--space-4);
}

/* contact.html — page-specific styles */

/* Page wrapper: narrow + centered */
.z-contact-page {
  max-width: 640px;
  margin: 0 auto;
}

/* Required field asterisk */
.z-label-required {
  color: var(--status-negative);
}

/* Success icon */
.z-contact-success-icon {
  font-size: var(--text-5xl);
  color: var(--status-positive);
}

/* Success heading */
.z-contact-success-heading {
  font-size: var(--text-lg);
  font-weight: var(--fw-semibold);
  margin-top: var(--space-4);
}

/* Success body text */
.z-contact-success-body {
  color: var(--text-secondary);
  margin-top: var(--space-2);
}

/* ==========================================================================
   v2 design system: auth + legal + contact (migrated from pages-v2.css)
   ========================================================================== */

@layer pages {
  /* Auth pages: shared layout */
  .z-auth-page {
    max-width: 420px;
    margin: 0 auto;
    padding: var(--space-8) var(--space-4);
  }
  .z-auth-card {
    background: var(--surface-raised);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    overflow: hidden;
  }
  .z-auth-card__body {
    padding: var(--space-6) var(--space-5);
  }
  .z-auth-card__footer {
    text-align: center;
    padding: var(--space-4);
    border-top: 1px solid var(--border-subtle);
    font-size: var(--text-sm);
  }
  .z-auth-logo {
    text-align: center;
    margin-bottom: var(--space-6);
  }

  /* Legal pages: prose formatting */
  .z-legal-content h3 {
    font-size: var(--text-base);
    font-weight: var(--fw-bold);
    margin-top: var(--space-6);
    margin-bottom: var(--space-2);
    color: var(--text-primary);
  }
  .z-legal-content h4 {
    font-size: var(--text-sm);
    font-weight: var(--fw-semibold);
    margin-top: var(--space-4);
    margin-bottom: var(--space-2);
    color: var(--text-primary);
  }
  .z-legal-content p,
  .z-legal-content ul,
  .z-legal-content ol {
    font-size: var(--text-sm);
    line-height: var(--lh-relaxed);
    color: var(--text-secondary);
    margin-bottom: var(--space-3);
  }
  .z-legal-content ul,
  .z-legal-content ol {
    padding-left: var(--space-6);
    list-style: revert;
  }
  .z-legal-content li {
    margin-bottom: var(--space-1);
  }

  /* Contact form */
  .z-form-check {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    font-size: var(--text-sm);
    cursor: pointer;
  }
  .z-form-check input[type="checkbox"] {
    margin-top: 0.2em;
    flex-shrink: 0;
  }
}

/* Legal links below auth card */
.z-auth-legal {
  text-align: center;
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  color: var(--text-tertiary);
}

.z-auth-legal a {
  color: var(--text-tertiary);
}

/* ==========================================================================
   billing.css — billing/pricing.html page-specific styles
   ========================================================================== */

/* Page container */
.pricing-page {
  max-width: 1100px;
  margin: 0 auto;
}

/* Page heading center block */
.pricing-heading {
  text-align: center;
  margin-bottom: var(--space-2);
}

/* Subheading center */
.pricing-subheading {
  text-align: center;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-bottom: var(--space-8);
}

/* Feature comparison section title */
.pricing-comparison-title {
  text-align: center;
  margin-bottom: var(--space-4);
}

/* Disclaimer text */
.pricing-disclaimer {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  text-align: center;
  max-width: 800px;
  margin: 0 auto var(--space-8);
}

/* Card body font-size override for pricing features */
.z-card__body--pricing {
  font-size: var(--text-sm);
}

/* Investor highlighted card: top accent border */
.z-card--top-accent {
  border-top: 4px solid var(--brand-primary);
}

/* Subscribe overlay modal */
.subscribe-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 999;
  background: rgba(0, 0, 0, 0.5);
  align-items: center;
  justify-content: center;
}

/* Subscribe overlay modal: active */
.subscribe-overlay.is-open {
  display: flex;
}

/* Subscribe modal inner card */
.subscribe-modal {
  max-width: 520px;
  width: 90%;
  margin: var(--space-4);
}

/* Subscribe modal confirm buttons row */
.subscribe-modal-actions {
  display: flex;
  gap: var(--space-3);
  justify-content: flex-end;
}

/* Subscribe modal note */
.subscribe-modal-note {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  margin-bottom: var(--space-4);
}

/* Pricing grid: extra bottom margin */
.z-pricing-grid--mb8 {
  margin-bottom: var(--space-8);
}

/* Success page: card body padding */
.billing-success-body {
  padding: var(--space-8) var(--space-6);
}

/* Success page: large check icon */
.billing-success-icon {
  font-size: 64px;
  color: var(--status-positive);
  margin-bottom: var(--space-4);
  display: block;
}

/* ==========================================================================
   v2 design system: pricing/billing z- prefix classes (migrated from pages-v2.css)
   ========================================================================== */

@layer pages {
  /* Pricing page: Mobile-First base grid (1 column on mobile) */
  .z-pricing-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  /* Pricing page: responsive grid */
  @media (min-width: 576px) {
    .z-pricing-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  @media (min-width: 1024px) {
    .z-pricing-grid {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  /* Pricing: highlighted card */
  .z-card--highlighted {
    box-shadow: var(--shadow-md);
  }

  /* Pricing page: card sub-components */
  .z-pricing-header {
    text-align: center;
  }
  .z-pricing-price {
    font-size: var(--text-2xl);
    font-weight: 700;
    margin: var(--space-2) 0;
  }
  .z-pricing-price__period {
    font-size: var(--text-sm);
    font-weight: 400;
    color: var(--text-secondary);
  }
  .z-pricing-annual {
    font-size: var(--text-xs);
    color: var(--text-secondary);
  }
  .z-pricing-features {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .z-pricing-feature {
    margin-bottom: var(--space-1);
  }
  .z-pricing-feature--disabled {
    margin-bottom: var(--space-1);
    color: var(--text-tertiary);
  }
  .z-pricing-footer {
    text-align: center;
    padding: var(--space-4);
    border-top: 1px solid var(--border-subtle);
  }
  .z-pricing-btn {
    width: 100%;
  }

  /* Pricing: feature comparison table */
  .z-pricing-comparison th:first-child { text-align: left; }
  .z-pricing-comparison th:not(:first-child),
  .z-pricing-comparison td:not(:first-child) { text-align: center; }
}

/* ==========================================================================
   articles.css — article_detail.html page-specific styles
   ========================================================================== */

@layer pages {

/* Page container */
.article-page {
  max-width: 800px;
  margin: 0 auto;
}

/* Article header time element */
.article-time {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
}

/* Article updated badge */
.article-updated {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

/* Read time indicator */
.article-readtime {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

/* Article title h1 */
.article-title {
  font-size: var(--text-2xl);
  font-weight: var(--fw-bold);
  line-height: 1.4;
  margin: 0;
}

/* Article summary paragraph */
.article-summary {
  font-size: var(--text-base);
  color: var(--text-secondary);
  margin-top: var(--space-3);
  line-height: 1.7;
}

/* Article separator hr */
.article-hr {
  border: none;
  border-top: 1px solid var(--border-default);
}

/* Article disclaimer */
.article-disclaimer {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  margin-bottom: var(--space-6);
}

/* Related articles section heading */
.article-related-heading {
  font-size: var(--text-lg);
  font-weight: var(--fw-semibold);
  margin: 0 0 var(--space-4) 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* Related article card body inner */
.article-related-body {
  padding: var(--space-3) var(--space-4);
}

/* Related article date */
.article-related-date {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

/* Related article title */
.article-related-title {
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  margin: 0;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* CTA card body (flex, space-between) */
.article-cta-body {
  padding: var(--space-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* CTA label text */
.article-cta-label {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

}

/* ==========================================================================
   themes.css — themes.html and theme_detail.html page-specific styles
   ========================================================================== */

@layer pages {

/* themes.html */

/* Theme group section heading */
.theme-group-heading {
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 2px solid var(--border-subtle);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* Theme card body inner padding */
.theme-card-body {
  padding: var(--space-4);
}

/* Theme icon + name row */
.theme-card-header {
  margin-bottom: var(--space-3);
}

/* Theme card icon */
.theme-card-icon {
  font-size: var(--text-xl);
  flex-shrink: 0;
}

/* Theme card name */
.theme-card-name {
  margin: 0;
  font-size: var(--text-base);
  font-weight: var(--fw-semibold);
}

/* Theme stat block */
.theme-stat-value {
  font-size: var(--text-base);
  font-weight: var(--fw-bold);
}

/* Theme stat label */
.theme-stat-label {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

/* theme_detail.html */

/* Back button: inline-flex */
.theme-back-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

/* Pagination nav */
.theme-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-6) 0;
}

/* Pagination info text */
.theme-pagination__info {
  color: var(--text-tertiary);
  font-size: var(--text-sm);
}

/* Sector badge wrapper in theme_detail */
.theme-sector-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* Relevance filter row */
.theme-filter-row {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* Company name cell with biz summary */
.theme-company-name {
  max-width: 240px;
  white-space: normal;
}

/* Biz summary sub-text */
.theme-biz-summary {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  line-height: 1.4;
  margin-top: 2px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Table cell: market/sector (xs text) */
.theme-cell-xs {
  font-size: var(--text-xs);
}

/* Keyword overflow count */
.theme-kw-overflow {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

/* Sort link: no decoration, inherit color */
.theme-sort-link {
  text-decoration: none;
  color: inherit;
}

/* Empty state: friendly placeholder when theme classification is not ready */
.themes-empty__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-8) var(--space-4);
  gap: var(--space-3);
}
.themes-empty__icon {
  color: var(--brand-primary);
  opacity: 0.6;
}
.themes-empty__title {
  font-size: var(--text-lg);
  font-weight: var(--fw-semibold);
  margin: 0;
  color: var(--text-primary);
}
.themes-empty__desc {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
  max-width: 480px;
}
.themes-empty__actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  justify-content: center;
  margin-top: var(--space-2);
}

}

/* Unlayered: override Material Symbols sizing for themes empty state icon.
   The global `.material-symbols-outlined` rule is also unlayered (bundle-v2.css
   tail), so we must match it at the same cascade origin to win. */
.themes-empty__body .themes-empty__icon.material-symbols-outlined {
  font-size: 56px;
  width: 56px;
  height: 56px;
  max-width: 56px;
  min-width: 56px;
}


/* ============================================================
   Page-specific CSS (formerly imported from pages.css文中、
   CSS 仕様違反で無視されていた → bundle 側に集約 / 2026-05-04)
   ============================================================ */

/* === ./pages/tab-summary.css === */
/* ==========================================================================
   pages/tab-summary.css -- Company Tab: Summary (.tab-summary)
   Split from pages/company-tabs.css for maintainability
   ========================================================================== */

@layer pages {

.tab-summary {
  --status-excellent: var(--sem-positive);
  --status-good: #22c55e;
  --status-fair: #eab308;
  --status-poor: #f97316;
  --status-critical: var(--sem-negative);
  --gradient-profit: linear-gradient(135deg, var(--sem-positive), var(--status-excellent));
  --gradient-growth: linear-gradient(135deg, var(--sem-info) 0%, #0f766e 100%);
  --gradient-health: linear-gradient(135deg, var(--chart-6) 0%, #6d28d9 100%);
  --gradient-cash: linear-gradient(135deg, var(--brand-accent-bg) 0%, #a16207 100%);
}

.tab-summary .summary-header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.tab-summary .summary-header-title {
  font-size: var(--text-base);
  font-weight: 600;
  margin: 0;
  opacity: 0.9;
}

.tab-summary .quick-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--space-2);
}

.tab-summary .quick-stat {
  text-align: center;
  padding: var(--space-2);
  background: rgba(255,255,255,0.08);
  border-radius: var(--radius-sm);
}

.tab-summary .quick-stat .stat-value {
  font-size: var(--text-xl);
  font-weight: 700;
}

.tab-summary .quick-stat .stat-label {
  font-size: var(--text-xs);
  opacity: 0.7;
}

.tab-summary .quick-stat .stat-unit {
  font-size: var(--text-xs);
  opacity: 0.8;
}

/* .health-badge => components.css */
/* .status-dot   => components.css */
/* .analysis-card, .analysis-card-header, .analysis-card-body => components.css */
/* .metric-row, .metric-label, .metric-value, .metric-unit, .metric-trend => components.css */

.tab-summary .analysis-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.tab-summary .score-display {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.tab-summary .score-circle {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--text-inverse);
}

.tab-summary .score-circle.excellent { background: var(--status-excellent); }
.tab-summary .score-circle.good      { background: var(--status-good); }
.tab-summary .score-circle.fair      { background: var(--status-fair); }
.tab-summary .score-circle.poor      { background: var(--status-poor); }
.tab-summary .score-circle.critical  { background: var(--status-critical); }

.tab-summary .investment-summary {
  background: var(--surface-sunken);
  border-radius: var(--radius-md);
  padding: 1.25rem;
  margin-bottom: 1.5rem;
}

.tab-summary .investment-summary h4 {
  margin: 0 0 1rem 0;
  font-size: var(--text-base);
  color: var(--text-primary);
}

.tab-summary .investment-points {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 0.75rem;
}

.tab-summary .investment-point {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem;
  background: var(--surface-base, #fff);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-default);
}

.tab-summary .investment-point-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.tab-summary .investment-point-icon.strength { background: color-mix(in srgb, var(--sem-positive) 15%, var(--surface-base)); color: var(--sem-positive); }
.tab-summary .investment-point-icon.risk     { background: color-mix(in srgb, var(--sem-negative) 12%, var(--surface-base)); color: var(--sem-negative); }
.tab-summary .investment-point-icon.neutral  { background: var(--surface-secondary); color: var(--text-tertiary); }

.tab-summary .investment-point-text {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.4;
}

.tab-summary .investment-point-label {
  font-weight: 600;
  color: var(--text-primary);
}

.tab-summary .nav-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.tab-summary .nav-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: var(--space-4);
  background: var(--surface-base, #fff);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-default);
  text-decoration: none;
  color: var(--text-primary);
  transition: var(--transition-normal);
}

.tab-summary .nav-card:hover {
  border-color: var(--sem-info);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.tab-summary .nav-card-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-secondary);
}

.tab-summary .nav-card-text {
  font-size: var(--text-sm);
  font-weight: 500;
}

/* ==========================================================================
   監査・開示情報カード (dashboard 改善 5 / 2026-05-04)
   ========================================================================== */
.z-card--audit-disclosure {
  border-left: 3px solid var(--brand-primary);
}
.z-disclosure-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-3) var(--space-4);
  margin: 0;
}
.z-disclosure-grid__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.z-disclosure-grid__item--full {
  grid-column: 1 / -1;
}
.z-disclosure-grid__label {
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  color: var(--text-secondary);
  margin: 0;
}
.z-disclosure-grid__value {
  font-size: var(--text-sm);
  color: var(--text-primary);
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}
}


/* === ./pages/tab-kpi.css === */
/* ==========================================================================
   pages/tab-kpi.css -- Company Tab: KPI (.tab-kpi)
   Split from pages/company-tabs.css for maintainability
   ========================================================================== */

@layer pages {

.tab-kpi .kpi-dashboard {
  --kpi-good: var(--sem-positive);
  --kpi-normal: var(--sem-info);
  --kpi-check: var(--sem-warning);
  --kpi-risk: var(--sem-negative);
  --kpi-na: var(--text-tertiary);
}

.tab-kpi .kpi-health-card .health-title {
  font-size: var(--text-sm);
  opacity: 0.8;
  margin-bottom: 0.5rem;
}

.tab-kpi .kpi-health-card .health-status {
  font-size: var(--text-2xl);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.tab-kpi .kpi-health-card .health-status .status-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  animation: pulse 2s infinite;
}

.tab-kpi .kpi-health-card .health-status .status-dot.good   { background: var(--kpi-good); }
.tab-kpi .kpi-health-card .health-status .status-dot.normal { background: var(--kpi-normal); }
.tab-kpi .kpi-health-card .health-status .status-dot.check  { background: var(--kpi-check); }
.tab-kpi .kpi-health-card .health-status .status-dot.risk   { background: var(--kpi-risk); }
.tab-kpi .kpi-health-card .health-status .status-dot.na     { background: var(--kpi-na); }

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.tab-kpi .kpi-health-card .health-desc {
  font-size: var(--text-sm);
  opacity: 0.9;
  margin-top: 0.5rem;
}

.tab-kpi .kpi-health-card .health-indicators {
  display: flex;
  gap: var(--space-6);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid rgba(255,255,255,0.1);
}

.tab-kpi .kpi-health-card .indicator {
  text-align: center;
}

.tab-kpi .kpi-health-card .indicator-value {
  font-size: var(--text-xl);
  font-weight: 600;
}

.tab-kpi .kpi-health-card .indicator-label {
  font-size: var(--text-xs);
  opacity: 0.7;
}

.tab-kpi .kpi-group {
  background: var(--surface-base, #fff);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  margin-bottom: var(--space-6);
  overflow: hidden;
}

.tab-kpi .kpi-group-header {
  background: linear-gradient(90deg, var(--surface-sunken) 0%, var(--surface-secondary) 100%);
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border-default);
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.tab-kpi .kpi-group-header .group-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xl);
}

.tab-kpi .kpi-group-header .group-icon.growth        { background: color-mix(in srgb, var(--chart-8) 12%, var(--surface-base)); color: var(--chart-8); }
.tab-kpi .kpi-group-header .group-icon.profitability  { background: var(--brand-primary-light); color: var(--sem-info); }
.tab-kpi .kpi-group-header .group-icon.leverage       { background: color-mix(in srgb, var(--sem-warning) 15%, var(--surface-base)); color: var(--sem-warning); }
.tab-kpi .kpi-group-header .group-icon.cashflow       { background: color-mix(in srgb, var(--sem-positive) 20%, var(--surface-base)); color: var(--sem-positive); }
.tab-kpi .kpi-group-header .group-icon.other          { background: var(--surface-secondary); color: var(--text-tertiary); }

.tab-kpi .kpi-group-header h5 {
  margin: 0;
  font-weight: 600;
  color: var(--text-primary);
}

.tab-kpi .kpi-group-body {
  padding: var(--space-4);
}

.tab-kpi .kpi-item {
  background: var(--surface-sunken);
  border-radius: var(--radius-md);
  padding: 1rem 1.25rem;
  margin-bottom: var(--space-3);
  transition: var(--transition-normal);
  border: 1px solid transparent;
}

.tab-kpi .kpi-item:last-child {
  margin-bottom: 0;
}

.tab-kpi .kpi-item:hover {
  background: var(--surface-secondary);
  border-color: var(--border-default);
}

.tab-kpi .kpi-item .kpi-main-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem;
}

.tab-kpi .kpi-item .kpi-info {
  min-width: 0;
  flex: 1;
}

.tab-kpi .kpi-item .kpi-label {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  margin-bottom: 0.25rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.tab-kpi .kpi-item .kpi-label .period-badge {
  font-size: var(--text-xs);
  background: var(--border-default);
  color: var(--text-secondary);
  padding: 0.125rem 0.375rem;
  border-radius: var(--radius-sm);
}

.tab-kpi .kpi-item .kpi-value-row {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.tab-kpi .kpi-item .kpi-value {
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
  word-break: break-all;
}

.tab-kpi .kpi-item .kpi-unit {
  font-size: var(--text-sm);
  color: var(--text-disabled);
}

.tab-kpi .kpi-status {
  flex-shrink: 0;
}

/* .kpi-badge => components.css */

.tab-kpi .kpi-gauge {
  width: 100%;
  height: 6px;
  background: var(--border-default);
  border-radius: var(--radius-xs);
  position: relative;
  overflow: hidden;
}

.tab-kpi .kpi-gauge-fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  border-radius: var(--radius-xs);
  transition: width 0.5s ease;
}

.tab-kpi .kpi-gauge-fill.good   { background: linear-gradient(90deg, var(--sem-positive), var(--teal-300)); }
.tab-kpi .kpi-gauge-fill.normal { background: linear-gradient(90deg, var(--sem-info), color-mix(in srgb, var(--sem-info) 60%, white)); }
.tab-kpi .kpi-gauge-fill.check  { background: linear-gradient(90deg, var(--brand-accent-bg), color-mix(in srgb, var(--sem-warning) 60%, white)); }
.tab-kpi .kpi-gauge-fill.risk   { background: linear-gradient(90deg, var(--sem-negative), var(--sem-negative)); }

.tab-kpi .kpi-gauge-marker {
  position: absolute;
  top: -2px;
  width: 2px;
  height: 10px;
  background: var(--text-primary);
  border-radius: 1px;
  transform: translateX(-50%);
}

.tab-kpi .kpi-hint-row {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border-default);
}

.tab-kpi .kpi-hint {
  font-size: var(--text-xs);
  color: var(--text-disabled);
  display: flex;
  align-items: flex-start;
  gap: 0.375rem;
  line-height: 1.4;
}

.tab-kpi .kpi-hint svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  margin-top: 0.125rem;
}

/* ------------------------------------------------------------------
   KPI tab — extracted inline styles
   ------------------------------------------------------------------ */
/* Card title: no margin (when used alongside badge) */
.kpi-title-no-margin { margin: 0; }

/* Per-share period label */
.kpi-period-label {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  margin-left: auto;
}

/* Summary max-width container */
.kpi-summary-grid { max-width: 400px; }

/* DuPont / advanced card body padding reset */
.kpi-chart-body { padding-top: 0; }

/* Z-Score / F-Score note */
.kpi-score-note {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  margin-top: var(--space-2);
}

/* DuPont chart subtitle */
.kpi-dupont-sub {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

/* KPI legend row: centered flex */
.kpi-legend-row {
  justify-content: center;
  font-size: var(--text-xs);
}

/* Period badge: vertical-align middle */
.kpi-period-badge { vertical-align: middle; }

}


/* === ./pages/tab-cashflow.css === */
/* ==========================================================================
   pages/tab-cashflow.css -- Company Tab: Cashflow (.tab-cashflow)
   Split from pages/company-tabs.css for maintainability
   ========================================================================== */

@layer pages {

.tab-cashflow .cf-dashboard {
  --cf-positive: var(--sem-positive);
  --cf-negative: var(--sem-negative);
  --cf-neutral: var(--sem-info);
  --cf-cfo: var(--sem-info);
  --cf-cfi: var(--sem-negative);
  --cf-cff: var(--sem-positive);
}

.tab-cashflow .cf-header-card .cf-title {
  font-size: var(--text-xl);
  font-weight: 700;
  margin-bottom: var(--space-1);
}

.tab-cashflow .cf-header-card .cf-subtitle {
  font-size: var(--text-sm);
  opacity: 0.8;
}

.tab-cashflow .cf-header-card .cf-period-switch {
  display: flex;
  gap: var(--space-2);
}

.tab-cashflow .cf-header-card .cf-period-btn {
  padding: 0.375rem 0.75rem;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255,255,255,0.3);
  background: transparent;
  color: white;
  cursor: pointer;
  font-size: var(--text-xs);
  font-weight: 500;
  transition: var(--transition-normal);
}

.tab-cashflow .cf-header-card .cf-period-btn:hover {
  background: rgba(255,255,255,0.1);
}

.tab-cashflow .cf-header-card .cf-period-btn.active {
  background: var(--surface-base, #fff);
  color: var(--text-primary);
  border-color: white;
}

.tab-cashflow .cf-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.tab-cashflow .cf-summary-card {
  background: var(--surface-base, #fff);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-default);
  transition: transform var(--duration-normal), box-shadow var(--duration-normal);
}

.tab-cashflow .cf-summary-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.tab-cashflow .cf-summary-card .card-header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--space-3);
}

.tab-cashflow .cf-summary-card .card-label {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  font-weight: 500;
}

.tab-cashflow .cf-summary-card .card-badge {
  font-size: var(--text-xs);
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-sm);
  font-weight: 600;
  text-transform: uppercase;
}

.tab-cashflow .cf-summary-card .card-badge.cfo  { background: var(--brand-primary-light); color: var(--brand-primary); }
.tab-cashflow .cf-summary-card .card-badge.cfi  { background: color-mix(in srgb, var(--sem-negative) 12%, var(--surface-base)); color: var(--sem-negative); }
.tab-cashflow .cf-summary-card .card-badge.cff  { background: color-mix(in srgb, var(--sem-positive) 20%, var(--surface-base)); color: var(--sem-positive); }
.tab-cashflow .cf-summary-card .card-badge.net  { background: color-mix(in srgb, var(--chart-6) 12%, var(--surface-base)); color: var(--chart-6); }
.tab-cashflow .cf-summary-card .card-badge.cash { background: color-mix(in srgb, var(--sem-warning) 15%, var(--surface-base)); color: var(--sem-warning); }

.tab-cashflow .cf-summary-card .card-value {
  font-size: var(--text-2xl);
  font-weight: 700;
  line-height: 1.2;
}

.tab-cashflow .cf-summary-card .card-value.positive { color: var(--cf-positive); }
.tab-cashflow .cf-summary-card .card-value.negative { color: var(--cf-negative); }
.tab-cashflow .cf-summary-card .card-value.neutral  { color: var(--text-tertiary); }

.tab-cashflow .cf-summary-card .card-unit {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-disabled);
  margin-left: var(--space-1);
}

.tab-cashflow .cf-summary-card .card-period {
  font-size: var(--text-xs);
  color: var(--text-disabled);
  margin-top: var(--space-2);
}

.tab-cashflow .cf-chart-section {
  background: var(--surface-base, #fff);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  margin-bottom: var(--space-6);
  overflow: hidden;
}

.tab-cashflow .cf-chart-header {
  background: linear-gradient(90deg, var(--surface-sunken) 0%, var(--surface-secondary) 100%);
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border-default);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.tab-cashflow .cf-chart-header .chart-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xl);
}

.tab-cashflow .cf-chart-header .chart-icon.bar       { background: var(--brand-primary-light); color: var(--sem-info); }
.tab-cashflow .cf-chart-header .chart-icon.waterfall  { background: color-mix(in srgb, var(--sem-positive) 20%, var(--surface-base)); color: var(--sem-positive); }

.tab-cashflow .cf-chart-header .chart-title {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--text-primary);
}

.tab-cashflow .cf-chart-body {
  padding: var(--space-5);
}

.tab-cashflow .cf-chart-status {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  margin-top: var(--space-3);
  padding: 0.5rem 0.75rem;
  background: var(--surface-sunken);
  border-radius: var(--radius-md);
}

.tab-cashflow .cf-legend {
  display: flex;
  gap: var(--space-6);
  padding: 0.75rem 1.25rem;
  background: var(--surface-sunken);
  border-top: 1px solid var(--border-default);
}

.tab-cashflow .cf-legend-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

.tab-cashflow .cf-legend-dot {
  width: 12px;
  height: 12px;
  border-radius: var(--radius-xs);
}

.tab-cashflow .cf-legend-dot.cfo { background: var(--cf-cfo); }
.tab-cashflow .cf-legend-dot.cfi { background: var(--cf-cfi); }
.tab-cashflow .cf-legend-dot.cff { background: var(--cf-cff); }

.tab-cashflow .cf-meta-info {
  font-size: var(--text-xs);
  color: var(--text-disabled);
  background: var(--surface-sunken);
  padding: 0.75rem 1rem;
  border-radius: var(--radius-sm);
  margin-top: var(--space-4);
}

.tab-cashflow .cf-meta-info code {
  font-size: var(--text-xs);
  background: var(--border-default);
  padding: 0.125rem 0.375rem;
  border-radius: var(--radius-sm);
}

/* ------------------------------------------------------------------
   Cashflow tab — extracted inline styles
   ------------------------------------------------------------------ */
/* Period selector button row */
.cf-period-btns {
  margin-left: auto;
}

/* Summary loading placeholder (before JS fills) */
.cf-summary-loading {
  color: var(--text-tertiary);
  text-align: center;
  padding: var(--space-4);
  grid-column: 1 / -1;
}

/* Sources-uses / waterfall empty messages */
.cf-empty-msg {
  color: var(--text-tertiary);
  text-align: center;
  padding: var(--space-6);
}

/* Waterfall empty inline-block hidden */
.cf-status-hidden { display: none; }

/* Trace meta / footnote block */
.cf-footnote {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

/* Cashflow card header: wrap on small screens */
.cf-card-header-wrap { flex-wrap: wrap; }

/* Cashflow card subtitle */
.cf-card-sub {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  margin: var(--space-1) 0 0;
}

/* Sources-uses info note */
.cf-sources-note {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  margin-top: var(--space-2);
}

}


/* === ./pages/tab-stock.css === */
/* ==========================================================================
   pages/tab-stock.css -- Company Tab: Stock (.tab-stock)
   Split from pages/company-tabs.css for maintainability
   ========================================================================== */

@layer pages {

.tab-stock .stock-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.tab-stock .stock-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--surface-sunken);
  border-radius: var(--radius-md);
}

.tab-stock .period-selector {
  display: flex;
  gap: 0.25rem;
}

.tab-stock .period-btn {
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--border-default);
  background: var(--surface-raised);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-tertiary);
  cursor: pointer;
  transition: var(--transition-fast);
}

.tab-stock .period-btn:hover {
  border-color: var(--teal-300);
  color: var(--teal-600);
}

.tab-stock .period-btn.active {
  background: var(--teal-500);
  border-color: var(--teal-500);
  color: var(--text-inverse);
}

.tab-stock .stock-summary {
  display: flex;
  gap: var(--space-6);
  flex-wrap: wrap;
}

.tab-stock .summary-item {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.tab-stock .summary-label {
  font-size: var(--text-xs);
  color: var(--text-disabled);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.tab-stock .summary-value {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--text-primary);
}

.tab-stock .summary-value.positive {
  color: var(--sem-negative);
}

.tab-stock .summary-value.negative {
  color: var(--sem-positive);
}

.tab-stock .change-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: 600;
}

.tab-stock .change-badge.positive {
  background: color-mix(in srgb, var(--sem-negative) 8%, var(--surface-base));
  color: var(--sem-negative);
}

.tab-stock .change-badge.negative {
  background: color-mix(in srgb, var(--sem-positive) 8%, var(--surface-base));
  color: var(--sem-positive);
}

.tab-stock .chart-card {
  background: var(--surface-raised);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.tab-stock .chart-header {
  padding: 0.875rem 1rem;
  border-bottom: 1px solid var(--surface-secondary);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tab-stock .chart-title {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.tab-stock .chart-subtitle {
  font-size: var(--text-xs);
  color: var(--text-disabled);
}

.tab-stock .chart-body {
  padding: var(--space-2);
}

.tab-stock .chart-legend {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-2) var(--space-4);
  border-top: 1px solid var(--surface-secondary);
  font-size: var(--text-xs);
  flex-wrap: wrap;
}

.tab-stock .legend-item {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.tab-stock .legend-dot {
  width: 10px;
  height: 3px;
  border-radius: 1px;
}

.tab-stock .legend-dot.ma5  { background: var(--brand-accent-bg); }
.tab-stock .legend-dot.ma25 { background: var(--sem-info); }
.tab-stock .legend-dot.ma75 { background: var(--chart-6); }

.tab-stock .data-notice {
  font-size: var(--text-xs);
  color: var(--text-disabled);
  padding: var(--space-2) var(--space-4);
  background: var(--surface-sunken);
  border-radius: var(--radius-sm);
  margin-top: var(--space-2);
}

}


/* === ./pages/tab-info.css === */
/* ==========================================================================
   pages/tab-info.css -- Company Tab: Company Info (.tab-info)
   Split from pages/company-tabs.css for maintainability
   ========================================================================== */

@layer pages {

.tab-info .business-section {
  background: var(--surface-base, #fff);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-default);
  overflow: hidden;
  margin-bottom: var(--space-6);
  box-shadow: var(--shadow-sm);
}

.tab-info .business-section-header {
  padding: 1rem 1.25rem;
  background: linear-gradient(135deg, var(--surface-sunken) 0%, var(--surface-secondary) 100%);
  border-bottom: 1px solid var(--border-default);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.tab-info .business-section-header h3 {
  margin: 0;
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--text-primary);
}

.tab-info .business-section-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-inverse);
  flex-shrink: 0;
}

.tab-info .business-section-icon.overview            { background: linear-gradient(135deg, var(--sem-info) 0%, var(--brand-primary) 100%); }
.tab-info .business-section-icon.history             { background: linear-gradient(135deg, var(--chart-6) 0%, color-mix(in srgb, var(--chart-6) 80%, black) 100%); }
.tab-info .business-section-icon.governance          { background: linear-gradient(135deg, var(--sem-positive), var(--status-excellent)); }
.tab-info .business-section-icon.risk                { background: linear-gradient(135deg, #f97316 0%, #ea580c 100%); } /* gradient badge — dark-safe (text-inverse ensures contrast) */
.tab-info .business-section-icon.shareholder         { background: linear-gradient(135deg, var(--brand-accent-bg) 0%, var(--brand-accent-hover) 100%); }
.tab-info .business-section-icon.facilities          { background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%); } /* gradient badge — dark-safe (text-inverse ensures contrast) */
.tab-info .business-section-icon.accounting          { background: linear-gradient(135deg, var(--text-tertiary) 0%, var(--text-secondary) 100%); }
.tab-info .business-section-icon.remuneration        { background: linear-gradient(135deg, #eab308 0%, #ca8a04 100%); } /* gradient badge — dark-safe (text-inverse ensures contrast) */
.tab-info .business-section-icon.sustainability      { background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%); } /* gradient badge — dark-safe (text-inverse ensures contrast) */
.tab-info .business-section-icon.ifrs_notes          { background: linear-gradient(135deg, var(--analysis-accent) 0%, var(--analysis-accent-dark) 100%); }
.tab-info .business-section-icon.jgaap_notes         { background: linear-gradient(135deg, var(--text-tertiary) 0%, var(--text-secondary) 100%); }
.tab-info .business-section-icon.financial_statements { background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%); } /* gradient badge — dark-safe (text-inverse ensures contrast) */
.tab-info .business-section-icon.other               { background: linear-gradient(135deg, var(--text-tertiary) 0%, var(--text-secondary) 100%); }

.tab-info .business-section-body {
  padding: var(--space-5);
}

.tab-info .section-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  height: 1.25rem;
  padding: 0 0.375rem;
  border-radius: var(--radius-full, 999px);
  background: rgba(0, 0, 0, 0.08);
  color: var(--text-tertiary);
  font-size: var(--text-xs);
  font-weight: 600;
  margin-left: var(--space-2);
  vertical-align: middle;
}

.tab-info .business-content {
  font-size: var(--text-base);
  line-height: 1.8;
  color: var(--text-secondary);
}

.tab-info .business-content p {
  margin-bottom: var(--space-4);
}

.tab-info .business-content p:last-child {
  margin-bottom: 0;
}

.tab-info .textblock-item {
  background: var(--surface-sunken);
  border-radius: var(--radius-sm);
  padding: 1rem 1.25rem;
  margin-bottom: var(--space-4);
  border-left: 3px solid var(--border-strong);
  transition: border-color var(--transition-fast);
}

.tab-info .textblock-item:hover {
  border-left-color: var(--text-disabled);
}

.tab-info .textblock-item:last-child {
  margin-bottom: 0;
}

.tab-info .textblock-item-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--space-3);
  gap: var(--space-3);
}

.tab-info .textblock-item-title {
  font-weight: 600;
  color: var(--text-primary);
  font-size: var(--text-base);
  letter-spacing: 0.01em;
}

.tab-info .textblock-item-meta {
  font-size: var(--text-xs);
  color: var(--text-disabled);
  margin-top: var(--space-1);
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.tab-info .textblock-item-meta::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--border-strong);
  margin-right: 0.125rem;
}

.tab-info .textblock-item-content {
  font-size: var(--text-sm);
  line-height: 1.8;
  color: var(--text-secondary);
  letter-spacing: 0.02em;
}

/* Specificity (0,3,0) > textblocks.css .tb-body / .tb-body .tb-pre (0,2,0),
   so !important is unnecessary. */
.tab-info .textblock-item-content .tb-body,
.tab-info .textblock-item-content .tb-body *,
.tab-info .textblock-item-content .tb-preview,
.tab-info .textblock-item-content .tb-preview *,
.tab-info .textblock-item-content .tb-pre {
  background: transparent;
  color: var(--text-secondary);
}

.tab-info .textblock-item-content .tb-body {
  position: relative;
  max-height: 240px;
  overflow: hidden;
}

.tab-info .textblock-item-content .tb-body.is-truncated::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: linear-gradient(180deg, transparent 0%, var(--surface-raised) 85%);
  pointer-events: none;
}

.tab-info .textblock-item-content .tb-body.is-expanded {
  max-height: none;
}

.tab-info .textblock-item-content .tb-body.is-expanded::after {
  display: none;
}

.tab-info .tb-inline-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: var(--space-2);
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--sem-info);
  background: color-mix(in srgb, var(--sem-info) 8%, var(--surface-base));
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-full, 999px);
  cursor: pointer;
  transition: background var(--duration-fast), color var(--duration-fast);
}

.tab-info .tb-inline-toggle:hover {
  background: var(--brand-primary-light);
  color: var(--brand-primary);
}

.tab-info .tb-inline-toggle svg {
  transition: transform var(--transition-normal);
}

.tab-info .tb-inline-toggle.is-expanded svg {
  transform: rotate(180deg);
}

.tab-info .textblock-item-content pre,
.tab-info .textblock-item-content .tb-pre {
  background: var(--surface-sunken);
  color: var(--text-secondary);
  padding: 0.75rem 1rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-default);
  font-size: var(--text-sm);
  line-height: 1.6;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-x: auto;
}

.tab-info .formatted-text {
  line-height: 1.8;
}

.tab-info .formatted-text .section-header {
  font-weight: 600;
  color: var(--text-primary);
  margin-top: var(--space-5);
  margin-bottom: var(--space-2);
  padding-bottom: var(--space-1);
  border-bottom: 1px solid var(--border-default);
  font-size: var(--text-base);
}

.tab-info .formatted-text .section-header:first-child {
  margin-top: 0;
}

.tab-info .formatted-text .paragraph {
  margin-bottom: var(--space-3);
  text-indent: 1em;
}

.tab-info .formatted-text .paragraph:first-child {
  text-indent: 0;
}

.tab-info .formatted-text .list-item {
  margin-left: 1.5em;
  margin-bottom: var(--space-2);
  position: relative;
  padding-left: 0.5em;
}

.tab-info .formatted-text .list-item::before {
  content: "\2022";
  position: absolute;
  left: -0.75em;
  color: var(--text-disabled);
}

.tab-info .formatted-text .numbered-item {
  margin-bottom: var(--space-2);
  padding-left: 0.5em;
}

.tab-info .formatted-text .numbered-item strong {
  color: var(--sem-info);
  margin-right: 0.25em;
}

.tab-info .formatted-text .sub-section {
  margin-left: 1em;
  padding-left: 0.75em;
  border-left: 2px solid var(--border-default);
}

.tab-info .formatted-text p {
  margin-bottom: var(--space-2);
}

.tab-info .formatted-text p:last-child {
  margin-bottom: 0;
}

.tab-info .btn-read-more {
  font-size: var(--text-xs);
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-xl);
  white-space: nowrap;
  flex-shrink: 0;
}

.tab-info .section-toggle {
  width: 100%;
  border: none;
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  background: linear-gradient(135deg, var(--surface-sunken) 0%, var(--surface-secondary) 100%);
  border-bottom: 1px solid var(--border-default);
  transition: background var(--transition-fast);
}

.tab-info .section-toggle:hover {
  background: var(--surface-secondary);
}

.tab-info .section-toggle-content {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.tab-info .section-toggle-arrow {
  transition: transform var(--transition-normal);
  color: var(--text-disabled);
}

.tab-info .section-toggle[aria-expanded="true"] .section-toggle-arrow {
  transform: rotate(180deg);
}

.tab-info .tb-group-badge {
  display: inline-block;
  font-size: var(--text-xs);
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius-xl);
  color: var(--text-inverse);
  font-weight: 500;
  vertical-align: middle;
  margin-left: var(--space-2);
}

}


/* === ./pages/company-tabs.css === */
/* ==========================================================================
   pages/company-tabs.css -- Company page tab styles (shared + series + finance)
   Tab-specific styles live in separate files imported directly by pages.css:
     tab-summary.css, tab-kpi.css, tab-cashflow.css, tab-stock.css, tab-info.css
   ========================================================================== */

@layer pages {

/* ------------------------------------------------------------------
   Company Tab: Series (.tab-series)
   ------------------------------------------------------------------ */
.tab-series .series-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.tab-series .series-header .title {
  font-size: var(--text-base);
  font-weight: 600;
}

.tab-series .series-header .subtitle {
  font-size: var(--text-xs);
  opacity: 0.8;
}

.tab-series .period-switch {
  display: flex;
  gap: 0.375rem;
}

.tab-series .period-btn {
  padding: 0.25rem 0.625rem;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255,255,255,0.3);
  background: transparent;
  color: white;
  cursor: pointer;
  font-size: var(--text-xs);
  font-weight: 500;
  transition: var(--transition-fast);
}

.tab-series .period-btn:hover {
  background: rgba(255,255,255,0.1);
}

.tab-series .period-btn.active {
  background: var(--surface-base, #fff);
  color: var(--text-primary);
  border-color: white;
}

.tab-series .series-group {
  background: var(--surface-base, #fff);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--space-4);
  overflow: hidden;
}

.tab-series .group-header {
  background: var(--surface-sunken);
  padding: 0.625rem 1rem;
  border-bottom: 1px solid var(--border-default);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.tab-series .group-icon {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-sm);
}

.tab-series .group-icon.revenue    { background: var(--brand-primary-light); color: var(--sem-info); }
.tab-series .group-icon.profit     { background: color-mix(in srgb, var(--sem-positive) 20%, var(--surface-base)); color: var(--sem-positive); }
.tab-series .group-icon.efficiency { background: color-mix(in srgb, var(--sem-warning) 15%, var(--surface-base)); color: var(--sem-warning); }
.tab-series .group-icon.cashflow   { background: color-mix(in srgb, var(--analysis-accent) 12%, var(--surface-base)); color: var(--analysis-accent-dark); }
.tab-series .group-icon.balance    { background: var(--brand-primary-light); color: var(--sem-info); }

.tab-series .group-title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
}

.tab-series .group-body {
  padding: var(--space-3);
}

.tab-series .chart-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}

.tab-series .empty-state {
  text-align: center;
  padding: var(--space-8);
  color: var(--text-disabled);
}

.tab-series .series-meta {
  font-size: var(--text-xs);
  color: var(--text-disabled);
  text-align: right;
  margin-top: var(--space-2);
}

/* Vertical divider between period/year toggle buttons */
.series-divider {
  width: 1px;
  background: var(--border-default);
  margin: 0 var(--space-1);
}

/* ------------------------------------------------------------------
   Company Tab: Finance (.tab-finance)
   ------------------------------------------------------------------ */
.tab-finance .fin-statement-header {
  background: linear-gradient(135deg, var(--tblr-primary) 0%, var(--tblr-primary-darken) 100%);
  color: white;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  margin-bottom: 0;
}

.tab-finance .fin-statement-header h4 {
  margin: 0;
  font-size: var(--text-base);
  font-weight: 600;
}

.tab-finance .fin-statement-meta {
  font-size: var(--text-sm);
  opacity: 0.9;
}

.tab-finance .nav-pills .nav-link {
  color: var(--tblr-body-color);
  border-radius: var(--radius-sm);
  padding: 0.5rem 1rem;
  font-weight: 500;
}

.tab-finance .nav-pills .nav-link.active {
  background-color: var(--tblr-primary);
  color: white;
}

.tab-finance .statement-card {
  border: 1px solid var(--tblr-border-color);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.tab-finance .statement-body {
  padding: 0;
}

/* ------------------------------------------------------------------
   Shareholders tab — extracted inline styles
   ------------------------------------------------------------------ */
.sh-major-table { min-width: 360px; }
.sh-rank-col { width: 3rem; }

/* ------------------------------------------------------------------
   Segment tab — extracted inline styles
   ------------------------------------------------------------------ */
.seg-detail-table { min-width: 480px; }

}


/* === ./pages/company-analysis.css === */
/* ==========================================================================
   pages/company-analysis.css -- Scatter analysis tab (.scatter-analysis)
   Shared metric-guide component → components/metric-guide.css
   Tab-specific styles extracted to:
     - tab-growth.css      (.growth-analysis)
     - tab-valuation.css   (.valuation-analysis)
     - tab-soundness.css   (.soundness-analysis)
   ========================================================================== */

@layer pages {

/* ==================================================================
   Analysis Tab: Scatter (.scatter-analysis)
   ================================================================== */

/* -- Chart height override -- */
.scatter-analysis #scatter-chart.scatter-chart-area { height: 740px; }

/* -- Stat Mini -- */
.scatter-analysis .stat-mini {
  text-align: center;
  padding: 12px;
  background: var(--surface-raised);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-default);
}

.scatter-analysis .stat-mini-value {
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--teal-700);
}

.scatter-analysis .stat-mini-label {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* -- Preset Selector -- */
.scatter-analysis .preset-selector {
  border-bottom: 1px solid var(--border-default);
  padding-bottom: 1rem;
}

.scatter-analysis .preset-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.scatter-analysis .preset-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0.625rem 1rem;
  background: var(--surface-sunken);
  border: 2px solid var(--border-default);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: var(--transition-normal);
  min-width: 140px;
}

.scatter-analysis .preset-btn:hover {
  background: color-mix(in srgb, var(--sem-positive) 8%, var(--surface-base));
  border-color: color-mix(in srgb, var(--sem-positive) 40%, var(--surface-base));
}

.scatter-analysis .preset-btn.active {
  background: linear-gradient(135deg, color-mix(in srgb, var(--sem-positive) 10%, var(--surface-base)) 0%, color-mix(in srgb, var(--sem-positive) 20%, var(--surface-base)) 100%);
  border-color: var(--sem-positive);
  box-shadow: 0 0 0 3px var(--color-focus-ring);
}

.scatter-analysis .preset-icon {
  font-size: var(--text-xl);
  margin-bottom: 2px;
}

.scatter-analysis .preset-name {
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--text-primary);
}

.scatter-analysis .preset-desc {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  white-space: nowrap;
}

/* -- Data Table Card -- */
.scatter-analysis .data-table-card {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border-default);
}

.scatter-analysis .data-table-card .table { margin-bottom: 0; }

.scatter-analysis .data-table-card .table thead th {
  background: linear-gradient(180deg, var(--teal-50, #f0fdfa), var(--surface-sunken));
  border-bottom: 2px solid var(--teal-200, #99f6e4);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--teal-700, #0f766e);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 12px 16px;
}

.scatter-analysis .data-table-card .table tbody td {
  padding: 12px 16px;
  vertical-align: middle;
  border-bottom: 1px solid var(--surface-secondary);
}

.scatter-analysis .data-table-card .table tbody tr:hover {
  background: var(--teal-50, #f0fdfa);
}

/* -- Company Link -- */
.scatter-analysis .company-link {
  font-weight: 600;
  color: var(--teal-600, #0d9488);
  text-decoration: none;
}
.scatter-analysis .company-link:hover {
  color: var(--teal-700, #0f766e);
  text-decoration: underline;
}

/* -- Market Badge -- */
.scatter-analysis .market-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: var(--radius-lg);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
}

.scatter-analysis .market-badge.prime { background: rgba(13,148,136,0.12); color: var(--sem-info); }
.scatter-analysis .market-badge.growth { background: rgba(212,160,23,0.12); color: var(--sem-warning); }
.scatter-analysis .market-badge.standard { background: rgba(99,102,241,0.12); color: var(--analysis-accent); }

/* -- Metric Value -- */
.scatter-analysis .metric-value {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: var(--text-sm);
}
.scatter-analysis .metric-value.positive { color: var(--teal-600, #0d9488); }
.scatter-analysis .metric-value.negative { color: var(--sem-negative); }

}


/* === ./pages/tab-growth.css === */
/* ==========================================================================
   pages/tab-growth.css -- Growth analysis tab styles (.growth-analysis)
   Extracted from company-analysis.css
   ========================================================================== */

@layer pages {

/* -- Chart-card header icon accent -- */
.growth-analysis .chart-card-header h3 svg { color: var(--analysis-accent); }

/* -- Chart height overrides -- */
.growth-analysis #histogram-chart { height: 320px; }
.growth-analysis #sector-chart { height: 380px; }
.growth-analysis #growth-scatter.scatter-chart-area { height: 560px; }

/* -- Stage Cards -- */
.growth-analysis .stage-card {
  background: var(--surface-base, #fff);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  border: 1px solid var(--surface-secondary);
  text-align: center;
  transition: var(--transition-slow);
}

.growth-analysis .stage-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.growth-analysis .stage-card .stage-count {
  font-size: var(--text-3xl);
  font-weight: 800;
  line-height: 1;
}

.growth-analysis .stage-card .stage-label {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  margin-top: 0.5rem;
}

.growth-analysis .stage-card.high-growth { border-left: 4px solid var(--analysis-accent); }
.growth-analysis .stage-card.high-growth .stage-count { color: var(--analysis-accent); }

.growth-analysis .stage-card.stable-growth { border-left: 4px solid var(--analysis-accent); }
.growth-analysis .stage-card.stable-growth .stage-count { color: var(--analysis-accent); }

.growth-analysis .stage-card.mature { border-left: 4px solid var(--brand-accent-bg); }
.growth-analysis .stage-card.mature .stage-count { color: var(--brand-accent-bg); }

.growth-analysis .stage-card.declining { border-left: 4px solid var(--sem-negative); }
.growth-analysis .stage-card.declining .stage-count { color: var(--sem-negative); }

/* -- Ranking Table overrides -- */
.growth-analysis .ranking-table th {
  padding: 1rem 1.25rem;
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-bottom: 2px solid var(--surface-secondary);
  background: linear-gradient(180deg, var(--surface-sunken) 0%, white 100%);
}

.growth-analysis .ranking-table td {
  padding: 0.875rem var(--space-5);
  border-bottom: 1px solid var(--surface-secondary);
  font-size: var(--text-sm);
}

.growth-analysis .ranking-table tbody tr:hover {
  background: linear-gradient(90deg, var(--surface-sunken) 0%, white 100%);
}

/* -- Rank Badge variants -- */
.growth-analysis .rank-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  font-weight: 800;
  font-size: var(--text-sm);
}

.growth-analysis .rank-badge.gold { background: linear-gradient(135deg, color-mix(in srgb, var(--brand-accent-bg) 60%, white), var(--brand-accent-bg)); color: var(--text-inverse); }
.growth-analysis .rank-badge.silver { background: linear-gradient(135deg, var(--text-tertiary), var(--text-tertiary)); color: var(--text-inverse); }
.growth-analysis .rank-badge.bronze { background: linear-gradient(135deg, #a16207, #854d0e); color: var(--text-inverse); }
.growth-analysis .rank-badge.normal { background: var(--surface-secondary); color: var(--text-tertiary); }

/* -- Company Link -- */
.growth-analysis .company-link {
  color: var(--analysis-accent);
  text-decoration: none;
  font-weight: 700;
}
.growth-analysis .company-link:hover { color: var(--analysis-accent-dark); }

/* -- Sector Tag -- */
.growth-analysis .sector-tag {
  display: inline-flex;
  padding: 0.375rem 0.75rem;
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: 600;
  background: linear-gradient(135deg, color-mix(in srgb, var(--sem-positive) 20%, var(--surface-base)) 0%, color-mix(in srgb, var(--sem-positive) 35%, var(--surface-base)) 100%);
  color: var(--sem-positive);
}

/* -- Metric Value -- */
.growth-analysis .metric-value {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}
.growth-analysis .metric-value.positive { color: var(--sem-positive); }
.growth-analysis .metric-value.negative { color: var(--sem-negative); }

}


/* === ./pages/tab-valuation.css === */
/* ==========================================================================
   pages/tab-valuation.css -- Valuation analysis tab styles (.valuation-analysis)
   Extracted from company-analysis.css
   ========================================================================== */

@layer pages {

/* -- Chart-card header icon accent -- */
.valuation-analysis .chart-card-header h3 svg { color: var(--analysis-accent); }

/* -- Chart height overrides -- */
.valuation-analysis #valuation-scatter.scatter-chart-area { height: 560px; }
.valuation-analysis #scatter-chart { height: 480px; }
.valuation-analysis #per-histogram { height: 280px; }
.valuation-analysis #pbr-histogram { height: 280px; }
.valuation-analysis #sector-chart { height: 400px; }

/* -- Stat Card (valuation-specific) -- */
.valuation-analysis .stat-card {
  background: var(--surface-base, #fff);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  border: 1px solid var(--surface-secondary);
  box-shadow: var(--shadow-md);
  text-align: center;
}

.valuation-analysis .stat-card .stat-value {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--analysis-accent);
}

.valuation-analysis .stat-card .stat-label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
  margin-top: 0.25rem;
}

.valuation-analysis .stat-card .stat-sub {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  margin-top: 0.5rem;
}

/* -- Undervalued Card -- */
.valuation-analysis .undervalued-card {
  background: linear-gradient(135deg, color-mix(in srgb, var(--sem-warning) 15%, var(--surface-base)) 0%, color-mix(in srgb, var(--sem-warning) 40%, var(--surface-base)) 100%);
  border: 2px solid var(--brand-accent-bg);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  margin-bottom: 1.5rem;
}

.valuation-analysis .undervalued-card h4 {
  color: var(--brand-accent-hover);
  font-size: var(--text-base);
  font-weight: 700;
  margin: 0 0 0.75rem 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.valuation-analysis .undervalued-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.valuation-analysis .undervalued-item {
  background: var(--surface-base, #fff);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.75rem;
  font-size: var(--text-sm);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid color-mix(in srgb, var(--sem-warning) 40%, transparent);
}

.valuation-analysis .undervalued-item a {
  color: var(--analysis-accent);
  font-weight: 700;
  text-decoration: none;
}

.valuation-analysis .undervalued-item .val {
  color: var(--text-tertiary);
  font-size: var(--text-xs);
}

/* -- No Data Message -- */
.valuation-analysis .no-data-message {
  text-align: center;
  padding: 3rem;
  color: var(--text-tertiary);
}

.valuation-analysis .no-data-message svg {
  width: 64px;
  height: 64px;
  margin-bottom: 1rem;
  opacity: 0.5;
}

/* -- Ranking Table overrides -- */
.valuation-analysis .ranking-table th {
  padding: 1rem 1.25rem;
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-bottom: 2px solid var(--surface-secondary);
  background: linear-gradient(180deg, var(--surface-sunken) 0%, white 100%);
}

.valuation-analysis .ranking-table td {
  padding: 0.875rem 1.25rem;
  border-bottom: 1px solid var(--surface-secondary);
  font-size: var(--text-sm);
}

.valuation-analysis .ranking-table tbody tr:hover {
  background: linear-gradient(90deg, var(--surface-sunken) 0%, white 100%);
}

/* -- Rank Badge variants -- */
.valuation-analysis .rank-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  font-weight: 800;
  font-size: var(--text-sm);
}

.valuation-analysis .rank-badge.gold { background: linear-gradient(135deg, color-mix(in srgb, var(--brand-accent-bg) 60%, white), var(--brand-accent-bg)); color: var(--text-inverse); }
.valuation-analysis .rank-badge.silver { background: linear-gradient(135deg, var(--text-tertiary), var(--text-tertiary)); color: var(--text-inverse); }
.valuation-analysis .rank-badge.bronze { background: linear-gradient(135deg, #a16207, #854d0e); color: var(--text-inverse); }
.valuation-analysis .rank-badge.normal { background: var(--surface-secondary); color: var(--text-tertiary); }

/* -- Company Link -- */
.valuation-analysis .company-link {
  color: var(--analysis-accent);
  text-decoration: none;
  font-weight: 700;
}
.valuation-analysis .company-link:hover { color: var(--analysis-accent-dark); }

/* -- Sector Tag -- */
.valuation-analysis .sector-tag {
  display: inline-flex;
  padding: 0.375rem 0.75rem;
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: 600;
  background: color-mix(in srgb, var(--chart-6) 12%, var(--surface-base));
  color: var(--analysis-accent-dark);
}

/* -- Metric Value -- */
.valuation-analysis .metric-value {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

}


/* === ./pages/tab-soundness.css === */
/* ==========================================================================
   pages/tab-soundness.css -- Soundness analysis tab styles (.soundness-analysis)
   Extracted from company-analysis.css
   ========================================================================== */

@layer pages {

/* -- Soundness semantic colors -- */
.soundness-analysis {
  --excellent: #10b981;
  --good: #14b8a6;
  --moderate: #d4a017;
  --weak: #ef4444;
}

/* -- Chart height overrides -- */
.soundness-analysis #soundness-scatter.scatter-chart-area { height: 560px; }
.soundness-analysis .chart-area { width: 100%; height: 380px; }
.soundness-analysis .chart-area.small { height: 300px; }

/* -- Chart Card overrides for soundness grid layout -- */
.soundness-analysis .chart-card.full-width { grid-column: 1 / -1; }
.soundness-analysis .chart-card h3 svg { width: 18px; height: 18px; color: var(--analysis-accent); }

/* -- Class Cards (soundness classification) -- */
.soundness-analysis .class-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}

.soundness-analysis .class-card {
  background: var(--surface-base, #fff);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-md);
  border-left: 4px solid;
  transition: transform var(--duration-normal), box-shadow var(--duration-normal);
}

.soundness-analysis .class-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.soundness-analysis .class-card.excellent { border-left-color: var(--excellent); }
.soundness-analysis .class-card.good { border-left-color: var(--good); }
.soundness-analysis .class-card.moderate { border-left-color: var(--moderate); }
.soundness-analysis .class-card.weak { border-left-color: var(--weak); }

.soundness-analysis .class-card-label {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-2);
}
.soundness-analysis .class-card.excellent .class-card-label { color: var(--excellent); }
.soundness-analysis .class-card.good .class-card-label { color: var(--good); }
.soundness-analysis .class-card.moderate .class-card-label { color: var(--moderate); }
.soundness-analysis .class-card.weak .class-card-label { color: var(--weak); }

.soundness-analysis .class-card-count {
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1;
  margin-bottom: var(--space-2);
}

.soundness-analysis .class-card-desc {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
}

/* -- Ranking Section -- */
.soundness-analysis .ranking-section {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
  margin-bottom: var(--space-8);
}

.soundness-analysis .ranking-card {
  background: var(--surface-base, #fff);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-md);
}

.soundness-analysis .ranking-card h3 {
  margin: 0 0 1rem 0;
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.soundness-analysis .ranking-badge {
  font-size: var(--text-xs);
  padding: 0.25rem 0.6rem;
  border-radius: var(--radius-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.soundness-analysis .ranking-badge.green { background: color-mix(in srgb, var(--sem-positive) 15%, var(--surface-base)); color: var(--sem-positive); }
.soundness-analysis .ranking-badge.red { background: color-mix(in srgb, var(--sem-negative) 12%, var(--surface-base)); color: var(--sem-negative); }

/* -- Ranking Table overrides -- */
.soundness-analysis .ranking-table th {
  text-align: left;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.75rem 0.5rem;
  border-bottom: 2px solid var(--surface-secondary);
}

.soundness-analysis .ranking-table td {
  padding: 0.75rem 0.5rem;
  font-size: var(--text-sm);
  border-bottom: 1px solid var(--surface-secondary);
  vertical-align: middle;
}

.soundness-analysis .ranking-table tbody tr:hover { background: var(--surface-sunken); }

/* -- Company Code / Name -- */
.soundness-analysis .company-code {
  font-weight: 700;
  color: var(--analysis-accent);
  font-family: var(--font-mono);
}

.soundness-analysis .company-name {
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-secondary);
}

/* -- Sector Tag -- */
.soundness-analysis .sector-tag {
  font-size: var(--text-xs);
  background: var(--surface-secondary);
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  white-space: nowrap;
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
}

/* -- Score Badge -- */
.soundness-analysis .score-badge {
  font-weight: 700;
  padding: 0.25rem 0.6rem;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  display: inline-block;
}
.soundness-analysis .score-badge.excellent { background: color-mix(in srgb, var(--sem-positive) 15%, var(--surface-base)); color: var(--sem-positive); }
.soundness-analysis .score-badge.good { background: var(--brand-primary-light); color: var(--brand-primary); }
.soundness-analysis .score-badge.moderate { background: color-mix(in srgb, var(--sem-warning) 15%, var(--surface-base)); color: var(--brand-accent-hover); }
.soundness-analysis .score-badge.weak { background: color-mix(in srgb, var(--sem-negative) 12%, var(--surface-base)); color: var(--sem-negative); }

/* -- Value Cell -- */
.soundness-analysis .value-cell {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

/* -- No Data Message -- */
.soundness-analysis .no-data-message {
  text-align: center;
  padding: 4rem 2rem;
  color: var(--text-tertiary);
}
.soundness-analysis .no-data-message svg { width: 64px; height: 64px; margin-bottom: var(--space-4); opacity: 0.4; }
.soundness-analysis .no-data-message h3 { margin: 0 0 0.5rem 0; color: var(--text-secondary); }

}


/* === ./pages/tab-common-size.css === */
/* ─────────────────────────────────────────
   Tab: Common-Size (比例縮尺 財務三表)
   ───────────────────────────────────────── */

/* Guide legend color swatches — match JS RATIO_COLOR_MAP */
.tab-common-size .legend-swatch { display: inline-block; width: 0.75em; height: 0.75em; border-radius: 2px; vertical-align: middle; }
.tab-common-size .legend-swatch--cash           { background: #43A047; }
.tab-common-size .legend-swatch--receivables     { background: #66BB6A; }
.tab-common-size .legend-swatch--inventory       { background: #AED581; }
.tab-common-size .legend-swatch--ppe             { background: #29B6F6; }
.tab-common-size .legend-swatch--current-liab    { background: #EF5350; }
.tab-common-size .legend-swatch--equity          { background: #AB47BC; }
.tab-common-size .legend-swatch--cogs            { background: #8D6E63; }
.tab-common-size .legend-swatch--sga             { background: #FF8A65; }


/* === ./pages/screening.css === */
/* ==========================================================================
   pages/screening.css -- Screening page styles
   Extracted from pages.css (Group 2C: .screening-page)
   ========================================================================== */

/* ------------------------------------------------------------------
   Screening (.screening-page)
   ------------------------------------------------------------------ */
.screening-page {
  /* Page-scoped indigo theme — renamed from --primary to --page-primary
     so the global --primary (tokens.css) is not shadowed inside this page. */
  --page-primary: #6366f1;
  --page-primary-dark: #4f46e5;
  --page-primary-light: #a5b4fc;
  --accent: #06b6d4;
  --success: var(--sem-positive);
  --warning: var(--sem-warning);
  --danger: var(--sem-negative);
}

.screening-page .screening-layout {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: var(--space-6);
}

.screening-page .filter-panel {
  background: var(--surface-base, #fff);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-md);
  height: fit-content;
  position: sticky;
  top: 1rem;
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
}

.screening-page .filter-panel::-webkit-scrollbar {
  width: 4px;
}

.screening-page .filter-panel::-webkit-scrollbar-track {
  background: var(--surface-secondary);
  border-radius: var(--radius-xs);
}

.screening-page .filter-panel::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: var(--radius-xs);
}

.screening-page .filter-panel h2 {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 1rem 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.screening-page .filter-panel h2 svg {
  width: 18px;
  height: 18px;
  color: var(--page-primary);
}

.screening-page .filter-section {
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--surface-secondary);
}

.screening-page .filter-section:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.screening-page .btn-primary {
  flex: 1;
}

.screening-page .btn-secondary {
  background: var(--surface-secondary);
  color: var(--text-secondary);
}

.screening-page .btn-secondary:hover {
  background: var(--border-default);
}

.screening-page .results-panel {
  background: var(--surface-base, #fff);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.screening-page .results-header {
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--surface-secondary);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.screening-page .results-count {
  font-size: var(--text-base);
  color: var(--text-secondary);
}

.screening-page .results-count strong {
  color: var(--text-primary);
  font-weight: 700;
}

.screening-page .results-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  min-width: 3200px;
}

/* Sticky header row */
.screening-page .results-table th {
  text-align: left;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.6rem 0.5rem;
  background: var(--surface-sunken);
  border-bottom: 2px solid var(--border-default);
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 3;
}

/* Sticky columns: code (col 1) + name (col 2) */
.screening-page .results-table td.sticky-col {
  position: sticky;
  z-index: 1;
  background: var(--surface-base);
}

/* Sticky column + sticky header (top-left corner) */
.screening-page .results-table th.sticky-col {
  z-index: 4;
}

.screening-page .results-table tbody tr:hover .sticky-col {
  background: var(--surface-sunken);
}

.screening-page .results-table th.sortable {
  cursor: pointer;
  user-select: none;
}

.screening-page .results-table th.sortable:hover {
  color: var(--page-primary);
}

.screening-page .results-table th.sorted {
  color: var(--page-primary);
}

.screening-page .results-table th .sort-icon {
  display: inline-block;
  margin-left: 0.2rem;
  opacity: 0.5;
}

.screening-page .results-table th.sorted .sort-icon {
  opacity: 1;
}

.screening-page .results-table td {
  padding: 0.6rem 0.5rem;
  font-size: var(--text-sm);
  border-bottom: 1px solid var(--surface-secondary);
  vertical-align: middle;
}

.screening-page .results-table tbody tr:hover {
  background: var(--surface-sunken);
}

.screening-page .company-code {
  font-weight: 700;
  color: var(--page-primary);
  font-family: var(--font-mono);
  text-decoration: none;
  font-size: var(--text-xs);
}

.screening-page .company-code:hover {
  text-decoration: underline;
}

.screening-page .company-name {
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

.screening-page .metric-value {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

.screening-page .metric-value.positive { color: var(--success); }
.screening-page .metric-value.negative { color: var(--danger); }
.screening-page .metric-value.neutral { color: var(--text-tertiary); }

.screening-page .pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: var(--space-4);
  border-top: 1px solid var(--surface-secondary);
}

.screening-page .empty-state {
  text-align: center;
  padding: var(--space-12) var(--space-8);
  color: var(--text-tertiary);
}

.screening-page .empty-state svg {
  width: 48px;
  height: 48px;
  margin-bottom: var(--space-4);
  opacity: 0.4;
}

.screening-page .empty-state h3 {
  margin: 0 0 0.5rem 0;
  color: var(--text-secondary);
  font-size: var(--text-base);
}

.screening-page .active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: var(--space-3);
}

/* Preset Filter Buttons */
.screening-page .preset-detail-panel {
  display: none;
  background: var(--surface-sunken);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 0.75rem 1rem;
  margin-bottom: var(--space-3);
  font-size: var(--text-xs);
  color: var(--text-secondary);
  line-height: 1.6;
}

.screening-page .preset-detail-panel.open {
  display: block;
}

.screening-page .preset-detail-panel dl {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.15rem 0.75rem;
}

.screening-page .preset-detail-panel dt {
  font-weight: 700;
  color: var(--text-secondary);
  white-space: nowrap;
}

.screening-page .preset-detail-panel dd {
  margin: 0;
}

.screening-page .preset-btn {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.85rem;
  background: var(--surface-base, #fff);
  border: 1.5px solid var(--border-default);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: var(--transition-normal);
  box-shadow: var(--shadow-sm);
}

.screening-page .preset-btn:hover {
  border-color: var(--page-primary-light);
  background: rgba(99,102,241,0.04);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.screening-page .preset-btn.active {
  border-color: var(--page-primary);
  background: rgba(99,102,241,0.08);
  box-shadow: var(--shadow-md);
}

.screening-page .preset-btn.active .preset-name {
  color: var(--page-primary-dark);
}

.screening-page .preset-icon {
  font-size: var(--text-lg);
  line-height: 1;
}

.screening-page .preset-name {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--text-primary);
}

/* ==========================================================================
   v2 design system: z- prefix screening classes (migrated from pages-v2.css)
   ========================================================================== */

@layer pages {
  /* Screening page: Mobile-First base layout (1 column on mobile) */
  .z-screening-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
    align-items: start;
  }
  .z-screening-filters {
    position: static;
    max-height: none;
    overflow-y: visible;
  }
  .z-screening-filter-toggle {
    display: flex;
    width: 100%;
    justify-content: center;
    gap: var(--space-2);
  }
  .z-screening-skeleton { padding: var(--space-4) 0; }

  /* Screening page: slide animation */
  .z-slide-enter { transition: opacity var(--transition-normal), transform var(--transition-normal); }
  .z-slide-enter-start { opacity: 0; transform: translateY(-8px); }
  .z-slide-enter-end { opacity: 1; transform: translateY(0); }
  /* Compare bar fade transitions (dashboard 改善 7) */
  .z-fade-enter { transition: opacity var(--transition-normal), transform var(--transition-normal); }
  .z-fade-enter-start { opacity: 0; transform: translateY(8px); }
  .z-fade-enter-end { opacity: 1; transform: translateY(0); }

  /* ==========================================================================
     スクリーニングプリセット保存・共有 (dashboard 改善 11 / 2026-05-04)
     ========================================================================== */
  .z-screening-presets-bar {
    border-top: 1px solid var(--border-subtle, #e5e7eb);
    padding-top: var(--space-3);
  }
  .z-screening-presets-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 30;
    min-width: 240px;
    max-width: 360px;
    background: var(--surface-base);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
    padding: var(--space-1);
    max-height: 280px;
    overflow-y: auto;
  }
  .z-screening-presets-menu__row {
    display: flex;
    align-items: center;
    gap: var(--space-1);
  }
  .z-screening-presets-menu__row:hover {
    background: var(--surface-sunken);
    border-radius: var(--radius-sm);
  }
  .z-screening-presets-menu__apply {
    flex: 1;
    text-align: left;
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-sm);
    color: var(--text-primary);
    border-radius: var(--radius-sm);
  }
  .z-screening-presets-menu__apply:hover {
    color: var(--brand-primary);
  }
  .z-screening-presets-menu__remove {
    background: transparent;
    border: 0;
    cursor: pointer;
    color: var(--text-tertiary);
    font-size: var(--text-base);
    line-height: 1;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
  }
  .z-screening-presets-menu__remove:hover {
    color: var(--sem-negative, #dc2626);
    background: color-mix(in srgb, var(--sem-negative) 8%, transparent);
  }
  .z-input--sm {
    padding: var(--space-1) var(--space-2);
    font-size: var(--text-xs);
    width: 200px;
    max-width: 60vw;
  }
  .z-screening-presets-flash {
    margin-left: var(--space-2);
    padding: var(--space-1) var(--space-3);
    background: color-mix(in srgb, var(--brand-primary) 10%, transparent);
    color: var(--brand-primary);
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    font-weight: var(--fw-semibold);
  }

  /* Screening page: desktop layout (2 columns) */
  @media (min-width: 768px) {
    .z-screening-layout {
      grid-template-columns: 280px 1fr;
    }
    .z-screening-filters {
      position: sticky;
      top: calc(var(--topnav-height, 56px) + var(--space-4));
      max-height: calc(100vh - var(--topnav-height, 56px) - var(--space-8));
      overflow-y: auto;
    }
    .z-screening-filter-toggle { display: none; }
  }

  /* Filter summary: consistent style for <details><summary> filter sections */
  .z-filter-summary {
    font-weight: var(--fw-semibold);
    font-size: var(--text-sm);
    cursor: pointer;
    padding: var(--space-1) 0;
    list-style: none;
    display: flex;
    align-items: center;
    gap: var(--space-2);
  }
  .z-filter-summary::before {
    content: '';
    width: 0;
    height: 0;
    border-left: 5px solid var(--text-tertiary);
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    transition: transform var(--duration-fast);
    flex-shrink: 0;
  }
  .z-filter-summary::-webkit-details-marker { display: none; }
  details[open] > .z-filter-summary::before {
    transform: rotate(90deg);
  }

  /* Range filter input */
  .z-range-input {
    min-width: 5rem;
    width: 100%;
    max-width: 7rem;
    padding: var(--space-1) var(--space-2);
    font-size: var(--text-xs);
  }

  /* Filter section spacing */
  .z-filter-section {
    margin-bottom: var(--space-4);
  }

  /* Filter section body */
  .z-filter-body {
    padding: var(--space-2) 0;
  }

  /* Filter section body with scroll (sector list) */
  .z-filter-body--scroll {
    padding: var(--space-2) 0;
    max-height: 200px;
    overflow-y: auto;
  }

  /* Filter label row (market/sector checkbox rows) */
  .z-filter-label {
    font-size: var(--text-xs);
    padding: var(--space-1) 0;
    cursor: pointer;
  }

  /* Filter label font-size xs override (range filter labels) */
  .z-filter-label--xs {
    font-size: var(--text-xs);
  }

  /* Filter count (market/sector count on right) */
  .z-filter-count {
    color: var(--text-tertiary);
    margin-left: auto;
  }

  /* Range filter wrapper */
  .z-screening-range {
    margin-bottom: var(--space-3);
  }

  /* Range filter tilde separator */
  .z-range-sep {
    color: var(--text-tertiary);
  }

  /* Filter card body compact */
  .z-card__body--compact {
    padding: var(--space-3);
  }

  /* Card header title base size */
  .z-card__title--base {
    font-size: var(--text-base);
  }
  /* Card title xl size (hero headings) */
  .z-card__title--xl {
    font-size: var(--text-xl);
  }

  /* Card header as collapsible button */
  .z-card__header--collapsible {
    cursor: pointer;
    width: 100%;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  /* Table column widths: ranking/screening tables */
  .z-col--rank { width: 60px; }
  .z-col--code { width: 80px; }

  /* Badge remove button */
  .z-badge-remove {
    border: none;
    background: none;
    cursor: pointer;
    padding: 0;
    margin-left: 2px;
  }

  /* Axis select inline (bubble chart axis dropdowns) */
  .z-select--inline {
    width: auto;
    padding: 2px 4px;
    font-size: var(--text-xs);
  }

  /* Axis controls wrapper */
  .z-bubble-axis {
    margin-left: auto;
    font-size: var(--text-xs);
  }

  /* Chart note */
  .z-chart-note {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    margin-top: var(--space-2);
  }

  /* Stats bar text */
  .z-screening-stats {
    font-size: var(--text-sm);
    color: var(--text-secondary);
  }

  /* Results: disclaimer note */
  .z-results-note {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    margin-bottom: var(--space-3);
  }

  /* Results: count display */
  .z-results-count {
    font-size: var(--text-sm);
    color: var(--text-secondary);
  }

  /* Results: per-page select wrapper */
  .z-results-controls {
    margin-left: auto;
  }

  /* Results: per-page label */
  .z-results-per-page-label {
    font-size: var(--text-xs);
  }

  /* Results: per-page select */
  .z-select--per-page {
    width: auto;
    padding: var(--space-1) var(--space-2);
    font-size: var(--text-xs);
  }

  /* Results: company name cell (xs font) */
  .z-company-name {
    font-size: var(--text-xs);
  }

  /* Results: table overflow wrapper */
  .z-table-overflow {
    overflow-x: auto;
  }

  /* Results: empty state */
  .z-empty-state {
    padding: var(--space-12) var(--space-4);
    text-align: center;
  }

  /* Results: empty state icon */
  .z-empty-icon {
    font-size: var(--text-5xl);
    color: var(--text-disabled);
  }

  /* Results: empty state heading */
  .z-empty-heading {
    font-size: var(--text-lg);
    font-weight: var(--fw-semibold);
    margin-top: var(--space-4);
  }

  /* Results: empty state description */
  .z-empty-desc {
    font-size: var(--text-sm);
    color: var(--text-secondary);
  }

  /* Results: pagination wrapper */
  .z-pagination {
    justify-content: center;
  }

  /* Results: sortable table header */
  .z-sort-th {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
  }
  .z-sort-th:hover {
    color: var(--brand-primary);
  }

  /* Active sort column highlight (dashboard 改善 6 / 2026-05-04) */
  .z-sort-th--active {
    background: color-mix(in srgb, var(--brand-primary) 8%, transparent);
    color: var(--brand-primary);
    font-weight: var(--fw-semibold);
  }

  /* Results: sort icon */
  .z-sort-icon {
    font-size: var(--text-xs);
    margin-left: var(--space-1);
  }

  /* ==========================================================================
     Compare selection (dashboard 改善 7 / 2026-05-04)
     スクリーニング → /compare 一気通貫導線。
     ========================================================================== */
  .z-compare-th {
    width: 36px;
    text-align: center;
    color: var(--text-tertiary);
  }
  .z-compare-td {
    text-align: center;
    width: 36px;
  }
  .z-compare-checkbox {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--brand-primary);
  }
  .z-compare-checkbox:disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }
  .z-row--selected {
    background: color-mix(in srgb, var(--brand-primary) 6%, transparent);
  }

  /* Floating bar (mobile-first: 画面幅いっぱい固定) */
  .z-compare-bar {
    position: fixed;
    bottom: var(--space-3);
    left: var(--space-3);
    right: var(--space-3);
    z-index: 80;
    background: var(--surface-base);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg, 14px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    padding: var(--space-3) var(--space-4);
  }
  .z-compare-bar__inner {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
  }
  .z-compare-bar__count {
    font-size: var(--text-sm);
    color: var(--text-primary);
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
  }
  .z-compare-bar__count strong {
    color: var(--brand-primary);
    font-size: var(--text-base);
  }
  .z-compare-bar__codes {
    /* mobile では非表示 — 狭い画面では code リストよりアクション優先 */
    display: none;
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    font-variant-numeric: tabular-nums;
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .z-compare-bar__actions {
    display: flex;
    gap: var(--space-2);
    margin-left: auto;
  }
  .z-btn--disabled {
    pointer-events: none;
    opacity: 0.5;
  }
  /* Tablet+: center floating + show code list */
  @media (min-width: 576px) {
    .z-compare-bar {
      bottom: var(--space-4);
      left: 50%;
      right: auto;
      transform: translateX(-50%);
      max-width: calc(100vw - var(--space-6));
    }
    .z-compare-bar__codes {
      display: inline;
    }
  }
}


/* === ./pages/glossary.css === */
/* ==========================================================================
   pages/glossary.css -- Glossary page styles
   Extracted from pages.css (.glossary-page)
   ========================================================================== */

@layer pages {

/* ------------------------------------------------------------------
   Glossary (.glossary-page)
   ------------------------------------------------------------------ */
.glossary-page {
  /* Page-scoped indigo theme — renamed from --primary to --page-primary
     so the global --primary (tokens.css) is not shadowed inside this page. */
  --page-primary: #6366f1;
  --page-primary-dark: #4f46e5;
  --success: var(--sem-positive);
  --warning: var(--sem-warning);
  --danger: var(--sem-negative);
}

.glossary-page .hero-content { position: relative; z-index: 1; }

.glossary-page .glossary-toc {
  background: var(--surface-base, #fff);
  border-radius: var(--radius-md);
  padding: 1.25rem 1.5rem;
  margin-bottom: var(--space-6);
  box-shadow: var(--shadow-md);
}
.glossary-page .glossary-toc h3 {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-3);
}
.glossary-page .toc-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.glossary-page .toc-links a {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.9rem;
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  transition: var(--transition-fast);
  border: 1px solid var(--border-default);
}
.glossary-page .toc-links a:hover {
  background: var(--page-primary);
  color: white;
  border-color: var(--page-primary);
}

.glossary-page .category-section { margin-bottom: var(--space-8); }
.glossary-page .category-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: 2px solid var(--border-default);
}
.glossary-page .category-header h2 {
  font-size: var(--text-xl);
  font-weight: 800;
  color: var(--text-primary);
  margin: 0;
}
.glossary-page .category-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-inverse);
  flex-shrink: 0;
}
.glossary-page .category-icon.profitability { background: linear-gradient(135deg, var(--analysis-accent), color-mix(in srgb, var(--analysis-accent) 70%, white)); }
.glossary-page .category-icon.growth { background: linear-gradient(135deg, var(--sem-positive), var(--teal-300)); }
.glossary-page .category-icon.leverage { background: linear-gradient(135deg, var(--brand-accent-bg), color-mix(in srgb, var(--brand-accent-bg) 60%, white)); }
.glossary-page .category-icon.cashflow { background: linear-gradient(135deg, var(--chart-7), color-mix(in srgb, var(--chart-7) 60%, white)); }
.glossary-page .category-icon.valuation { background: linear-gradient(135deg, var(--chart-8), color-mix(in srgb, var(--chart-8) 60%, white)); }
.glossary-page .category-icon.pershare { background: linear-gradient(135deg, var(--chart-6), color-mix(in srgb, var(--chart-6) 60%, white)); }

.glossary-page .kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: var(--space-4);
}
.glossary-page .kpi-card {
  background: var(--surface-base, #fff);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--surface-secondary);
  transition: box-shadow var(--transition-fast);
}
.glossary-page .kpi-card:hover { box-shadow: var(--shadow-md); }
.glossary-page .kpi-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}
.glossary-page .kpi-name {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 0.15rem 0;
}
.glossary-page .kpi-abbr {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  font-weight: 600;
}
.glossary-page .kpi-direction {
  font-size: var(--text-xs);
  font-weight: 700;
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}
.glossary-page .kpi-direction.higher { background: color-mix(in srgb, var(--sem-positive) 10%, var(--surface-base)); color: var(--sem-positive); }
.glossary-page .kpi-direction.lower { background: color-mix(in srgb, var(--sem-warning) 15%, var(--surface-base)); color: var(--sem-warning); }

.glossary-page .kpi-formula {
  background: var(--surface-sunken);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.8rem;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-bottom: var(--space-3);
  line-height: 1.5;
}
.glossary-page .kpi-desc {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: var(--space-3);
}
.glossary-page .kpi-thresholds {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.glossary-page .threshold-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 0.25rem 0.6rem;
  border-radius: var(--radius-sm);
}
.glossary-page .threshold-badge.good { background: color-mix(in srgb, var(--sem-positive) 10%, var(--surface-base)); color: var(--sem-positive); }
.glossary-page .threshold-badge.normal { background: color-mix(in srgb, var(--sem-info) 10%, var(--surface-base)); color: var(--sem-info); }
.glossary-page .threshold-badge.check { background: color-mix(in srgb, var(--sem-warning) 10%, var(--surface-base)); color: var(--sem-warning); }
.glossary-page .threshold-badge .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.glossary-page .threshold-badge.good .dot { background: var(--sem-positive); }
.glossary-page .threshold-badge.normal .dot { background: var(--sem-info); }
.glossary-page .threshold-badge.check .dot { background: var(--sem-warning); }
.glossary-page .glossary-search-box {
  margin-top: var(--space-4);
  max-width: 400px;
}
.glossary-page .glossary-search-box input {
  width: 100%;
  padding: 0.625rem 1rem;
  border: 2px solid rgba(255,255,255,0.2);
  border-radius: var(--radius-md);
  background: rgba(255,255,255,0.1);
  color: var(--text-inverse);
  font-size: var(--text-base);
  outline: none;
  transition: border-color var(--duration-fast), background var(--duration-fast);
}
.glossary-page .glossary-search-box input::placeholder { color: rgba(255,255,255,0.5); }
.glossary-page .glossary-search-box input:focus {
  border-color: rgba(255,255,255,0.5);
  background: rgba(255,255,255,0.15);
}
/* New template classes (inline-to-CSS migration) */
.glossary-search-input { max-width: 400px; }
.glossary-kpi-name {
  margin: 0;
  font-size: var(--text-base);
  font-weight: var(--fw-semibold);
}
.glossary-formula {
  background: var(--surface-raised);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  margin-bottom: var(--space-3);
}
.glossary-benchmarks {
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}
.glossary-section-heading {
  font-size: var(--text-xl);
  margin-bottom: var(--space-4);
}

.glossary-page .kpi-card.hidden-by-search { display: none; }
.glossary-page .category-section.hidden-by-search { display: none; }
.glossary-page .no-search-results {
  text-align: center;
  padding: var(--space-8);
  color: var(--text-tertiary);
  font-size: var(--text-base);
  display: none;
}

}


/* === ./pages/delisted.css === */
/* ==========================================================================
   pages/delisted.css -- Delisted company page styles
   Extracted from pages.css (.delisted-page)
   ========================================================================== */

@layer pages {

/* ------------------------------------------------------------------
   Delisted (.delisted-page)
   ------------------------------------------------------------------ */
.delisted-page .hero-section {
  background: linear-gradient(135deg, var(--text-secondary) 0%, var(--text-primary) 100%);
  color: white;
  padding: var(--space-8);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-6);
}
.delisted-page .hero-section h1 {
  margin: 0 0 0.5rem 0;
  font-size: var(--text-2xl);
}
.delisted-page .hero-section p {
  margin: 0;
  opacity: 0.8;
  font-size: var(--text-sm);
}
.delisted-page .hero-stats {
  display: flex;
  gap: var(--space-8);
  margin-top: var(--space-4);
}
.delisted-page .hero-stat-value {
  font-size: 1.75rem;
  font-weight: 700;
}
.delisted-page .hero-stat-label {
  font-size: var(--text-xs);
  opacity: 0.7;
}
.delisted-page .delisted-filter-bar {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-6);
  align-items: flex-end;
}
.delisted-page .delisted-filter-bar .filter-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.delisted-page .delisted-filter-bar label {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  font-weight: 500;
}
.delisted-page .delisted-filter-bar input,
.delisted-page .delisted-filter-bar select {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  background: var(--surface-base, #fff);
  min-width: 160px;
}
.delisted-page .delisted-filter-bar .btn-filter {
  padding: 0.5rem 1rem;
  background: var(--text-primary);
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: var(--text-sm);
}
.delisted-page .delisted-filter-bar .btn-filter:hover {
  background: var(--text-primary);
}
.delisted-page .data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
.delisted-page .data-table th {
  text-align: left;
  padding: 0.75rem 1rem;
  background: var(--surface-sunken);
  border-bottom: 2px solid var(--border-default);
  font-weight: 600;
  color: var(--text-secondary);
}
.delisted-page .data-table td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--surface-secondary);
}
.delisted-page .data-table tr:hover td {
  background: var(--surface-sunken);
}
.delisted-page .data-table a {
  color: var(--sem-info);
  text-decoration: none;
}
.delisted-page .data-table a:hover {
  text-decoration: underline;
}
.delisted-page .pagination {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-6);
  flex-wrap: wrap;
}
.delisted-page .pagination a,
.delisted-page .pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 0.5rem;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  text-decoration: none;
  color: var(--text-secondary);
}
.delisted-page .pagination a:hover {
  background: var(--surface-secondary);
}
.delisted-page .pagination .current {
  background: var(--text-primary);
  color: white;
  border-color: var(--text-primary);
}
.delisted-page .delisted-badge {
  display: inline-block;
  padding: 0.125rem 0.5rem;
  background: rgba(239, 68, 68, 0.1);
  color: var(--sem-negative);
  border-radius: var(--radius-xl);
  font-size: var(--text-xs);
  font-weight: 500;
}
.delisted-page .empty-state {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--text-disabled);
}

}


/* === ./pages/error.css === */
/* ==========================================================================
   pages/error.css -- Error page styles
   Extracted from pages.css (.error-page)
   ========================================================================== */

@layer pages {

/* ------------------------------------------------------------------
   Error (.error-page)
   ------------------------------------------------------------------ */
.error-page {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 60vh;
  padding: var(--space-8) var(--space-4);
}
.error-page .error-page-inner {
  text-align: center;
  max-width: 480px;
}
.error-page .error-icon {
  color: var(--border-strong);
  margin-bottom: var(--space-6);
}
.error-page .error-code {
  font-size: 6rem;
  font-weight: 800;
  color: var(--border-default);
  line-height: 1;
  letter-spacing: -0.04em;
  margin-bottom: var(--space-2);
}
.error-page .error-title {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 var(--space-2) 0;
}
.error-page .error-message {
  font-size: var(--font-size-base);
  color: var(--text-tertiary);
  margin: 0 0 var(--space-2) 0;
  line-height: 1.6;
}
.error-page .error-hint {
  font-size: var(--font-size-sm);
  color: var(--text-tertiary);
  margin: 0 0 var(--space-8) 0;
}
.error-page .error-actions {
  display: flex;
  justify-content: center;
  gap: var(--space-4);
  margin-bottom: var(--space-8);
  flex-wrap: wrap;
}
.error-page .error-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-base);
  font-weight: 600;
  text-decoration: none;
  transition: var(--transition-normal);
}
.error-page .error-btn-primary {
  background: linear-gradient(135deg, var(--sem-info) 0%, var(--sem-info) 100%);
  color: white;
  box-shadow: var(--shadow-md);
}
.error-page .error-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-lg);
  color: white;
}
.error-page .error-btn-secondary {
  background: var(--surface-secondary);
  color: var(--text-secondary);
}
.error-page .error-btn-secondary:hover {
  background: var(--border-default);
  color: var(--text-primary);
}
.error-page .error-search {
  background: var(--surface-sunken);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  border: 1px solid var(--border-default);
}
.error-page .error-search-label {
  font-size: var(--font-size-sm);
  color: var(--text-tertiary);
  margin: 0 0 var(--space-2) 0;
  font-weight: 600;
}
.error-page .error-search-inner {
  display: flex;
  gap: 0.5rem;
}
.error-page .error-search-input {
  flex: 1;
  padding: 0.5rem 0.75rem;
  border: 2px solid var(--border-default);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-base);
  outline: none;
  transition: border-color var(--transition-normal);
}
.error-page .error-search-input:focus {
  border-color: var(--sem-info);
}
.error-page .error-search-btn {
  padding: 0.5rem 1rem;
  background: var(--sem-info);
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition-normal);
}
.error-page .error-search-btn:hover {
  background: var(--brand-primary-hover);
}

}


/* === ./pages/ops.css === */
/* ==========================================================================
   pages/ops.css -- Ops dashboard page styles
   Merged from: static/css/ops.css (global classes) + pages/ops.css (scoped)
   ========================================================================== */

@layer pages {

/* ------------------------------------------------------------------
   Global layout helpers (formerly static/css/ops.css)
   These classes are used directly in ops.html / ops_metrics.html
   without requiring the .ops-page wrapper scope.
   ------------------------------------------------------------------ */

/* ===== Layout ===== */
.ops-page { max-width: 1200px; margin: 0 auto; }
.ops-header { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: var(--space-4); margin-bottom: var(--space-4); }
.ops-header h1 { margin: 0; font-size: var(--text-2xl); color: var(--text-primary); }
.ops-header-sub { color: var(--text-secondary); font-size: var(--text-sm); margin-top: 0.2rem; }
.ops-header-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.ops-action-btn {
  display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.85rem;
  background: var(--surface-sunken); border: 1px solid var(--border-default);
  border-radius: var(--radius-md); font-size: var(--text-sm); font-weight: 600; color: var(--text-secondary);
  text-decoration: none; transition: all var(--transition-fast);
}
.ops-action-btn:hover { background: var(--surface-secondary); border-color: var(--border-strong); }

/* ===== Tabs ===== */
.ops-tabs { display: flex; gap: 0; border-bottom: 2px solid var(--border-default); margin-bottom: var(--space-6); }
.ops-tab {
  padding: 0.65rem 1.25rem; font-size: var(--text-sm); font-weight: 600; cursor: pointer;
  background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -2px;
  color: var(--text-tertiary); transition: all 0.15s;
}
.ops-tab:hover { color: var(--text-secondary); }
.ops-tab.active { color: var(--teal, #0d9488); border-bottom-color: var(--teal, #0d9488); }
.ops-tab-content { display: none; }
.ops-tab-content.active { display: block; }

/* ===== Grid (Mobile-first: 1fr base, wider on larger screens) ===== */
.ops-grid { display: grid; gap: 0.85rem; margin-bottom: var(--space-5); }
.ops-grid-2 { grid-template-columns: 1fr; }
.ops-grid-3 { grid-template-columns: 1fr; }
.ops-grid-4 { grid-template-columns: 1fr; }
.ops-grid-5 { grid-template-columns: 1fr; }

/* ===== Card ===== */
.ops-card {
  background: var(--surface-raised); border-radius: var(--radius-md); padding: 1rem 1.1rem;
  border: 1px solid var(--border-default); border-left: 4px solid var(--border-strong);
  transition: box-shadow var(--transition-fast), transform var(--transition-fast);
}
.ops-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.ops-card[data-accent="users"]    { border-left-color: var(--chart-3); }
.ops-card[data-accent="finance"]  { border-left-color: var(--navy-500); }
.ops-card[data-accent="system"]   { border-left-color: var(--chart-6); }
.ops-card[data-accent="pipeline"] { border-left-color: var(--amber-500); }
.ops-card[data-accent="health"]   { border-left-color: var(--status-good); }
.ops-card[data-accent="alert"]    { border-left-color: var(--sem-negative); }
.ops-card[data-accent="seo"]      { border-left-color: var(--chart-7); }
.ops-card-label { font-size: var(--text-xs); font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.03em; }
.ops-card-value { font-size: var(--text-2xl); font-weight: 800; color: var(--text-primary); margin-top: 0.2rem; line-height: 1.2; }
.ops-card-sub { font-size: var(--text-xs); color: var(--text-secondary); margin-top: 0.2rem; }
.ops-card-unit { font-size: var(--text-xs); font-weight: 400; color: var(--text-tertiary); margin-left: 0.15rem; }

/* ===== Section ===== */
.ops-section {
  background: var(--surface-raised); border-radius: var(--radius-md); border: 1px solid var(--border-default);
  margin-bottom: var(--space-5); overflow: hidden;
}
.ops-section-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.75rem 1.25rem; border-bottom: 1px solid var(--border-default);
  background: var(--surface-sunken);
}
.ops-section-head h2 { font-size: var(--text-sm); font-weight: 700; color: var(--text-primary); margin: 0; }
.ops-section-note { font-size: var(--text-xs); color: var(--text-tertiary); font-weight: 400; margin-left: var(--space-2); }
.ops-section-body { padding: 1rem 1.25rem; }

/* ===== Table ===== */
.ops-tbl { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.ops-tbl th {
  text-align: left; font-weight: 600; color: var(--text-secondary);
  font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.03em;
  padding: 0.55rem 0.85rem; border-bottom: 2px solid var(--border-default);
  background: var(--surface-sunken);
}
.ops-tbl td { padding: 0.5rem 0.85rem; border-bottom: 1px solid var(--surface-secondary); color: var(--text-primary); }
.ops-tbl tbody tr:nth-child(even) td { background: var(--surface-sunken); }
.ops-tbl tbody tr:hover td { background: rgba(16,185,129,0.06); }
.ops-tbl .num { text-align: right; font-variant-numeric: tabular-nums; }
.ops-tbl .mono { font-family: var(--font-mono); font-size: var(--text-sm); }

/* ===== Badges ===== */
.ops-badge {
  display: inline-block; padding: 0.15rem 0.55rem; border-radius: var(--radius-sm);
  font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em;
}
.ops-badge-ok, .ops-badge-success, .ops-badge-completed, .ops-badge-active, .ops-badge-ingested { background: rgba(16,185,129,0.12); color: var(--status-excellent); }
.ops-badge-fail, .ops-badge-failed, .ops-badge-past_due, .ops-badge-deleted { background: rgba(239,68,68,0.12); color: var(--status-critical); }
.ops-badge-warn, .ops-badge-partial, .ops-badge-trialing { background: rgba(212,160,23,0.12); color: var(--sem-warning); }
.ops-badge-info, .ops-badge-running, .ops-badge-known { background: rgba(20,184,166,0.12); color: var(--navy-700); }
.ops-badge-off, .ops-badge-expired { background: var(--surface-secondary); color: var(--text-tertiary); }

/* ===== Freshness ===== */
.ops-fresh {
  display: inline-block; padding: 0.15rem 0.5rem; border-radius: 999px;
  font-size: var(--text-xs); font-weight: 700; text-align: center; min-width: 3rem;
  background: var(--surface-secondary); color: var(--text-secondary);
}
.ops-fresh.ok    { background: rgba(16,185,129,0.12); color: var(--navy-800); }
.ops-fresh.warn  { background: rgba(212,160,23,0.12); color: var(--sem-warning); }
.ops-fresh.stale { background: rgba(239,68,68,0.12); color: var(--status-critical); }

/* ===== Settings ===== */
.ops-setting {
  display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  padding: 0.75rem 0; border-bottom: 1px solid var(--surface-secondary);
}
.ops-setting:last-child { border-bottom: none; }
.ops-setting-label { font-size: var(--text-sm); font-weight: 600; color: var(--text-primary); min-width: 8rem; }
.ops-setting-form { display: flex; align-items: center; gap: var(--space-2); margin: 0; }
.ops-setting-desc { font-size: var(--text-xs); color: var(--text-secondary); }
.ops-input {
  font-size: var(--text-sm); padding: 0.3rem 0.6rem; border: 1px solid var(--border-strong);
  border-radius: var(--radius-md); color: var(--text-primary);
}
.ops-btn {
  padding: 0.3rem 0.7rem; border: none; border-radius: var(--radius-md); cursor: pointer;
  font-size: var(--text-xs); font-weight: 600; transition: background 0.15s;
}
.ops-btn-primary { background: var(--teal, #0d9488); color: var(--text-inverse); }
.ops-btn-primary:hover { background: var(--brand-primary-hover); }
.ops-btn-danger { background: var(--sem-negative); color: var(--text-inverse); }
.ops-btn-danger:hover { background: var(--sem-negative); filter: brightness(0.9); }

/* ===== Misc ===== */
.ops-link { color: var(--teal, #0d9488); font-size: var(--text-sm); font-weight: 600; text-decoration: none; }
.ops-link:hover { text-decoration: underline; }
.ops-empty { padding: var(--space-6); text-align: center; color: var(--text-tertiary); font-size: var(--text-sm); margin: 0; }
.ops-mini-label { font-size: var(--text-xs); color: var(--text-secondary); display: block; }
.ops-mini-value { font-weight: 700; font-size: var(--text-lg); color: var(--text-primary); }
.ops-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.dot-ok { background: var(--status-good); }
.dot-off { background: var(--border-strong); }

/* ===== Trend chart ===== */
.run-trend-chart { display: flex; align-items: flex-end; gap: 6px; height: 100px; }
.trend-bar-wrap { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; }
.trend-bar { width: 100%; border-radius: 3px 3px 0 0; min-height: 2px; transition: height var(--transition-slow); }
.bar-ok { background: var(--status-good); } .bar-fail { background: var(--sem-negative); }
.trend-label { font-size: var(--text-xs); color: var(--text-tertiary); margin-top: 4px; white-space: nowrap; }

/* ===== Stage details ===== */
.stage-details summary { cursor: pointer; font-size: var(--text-xs); color: var(--teal, #0d9488); }
.stage-breakdown { display: flex; flex-direction: column; gap: 0.2rem; margin-top: 0.3rem; }
.stage-row { display: flex; justify-content: space-between; font-size: var(--text-xs); }
.stage-name { color: var(--text-secondary); }
.stage-time { font-weight: 600; color: var(--text-primary); }
.stage-slow { color: var(--sem-warning); }

/* ===== Inline style replacements ===== */
.ops-card-value--md { font-size: var(--text-base); }
.ops-card-value--lg { font-size: var(--text-xl); }
.ops-mt-sm { margin-top: 0.3rem; }

.ops-flex-wrap { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.ops-flex-wrap--lg { display: flex; flex-wrap: wrap; gap: var(--space-6); }

.ops-status-chip {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--surface-sunken);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 0.5rem 0.85rem;
}
.ops-status-chip__count {
  font-weight: 700;
  color: var(--text-primary);
}

.ops-teal-bold { font-weight: 700; color: var(--teal, #0d9488); }

.ops-tbl-ts { font-size: var(--text-xs); white-space: nowrap; }
.ops-tbl-meta { font-size: var(--text-xs); color: var(--text-secondary); }
.ops-tbl-msg {
  font-size: var(--text-xs);
  max-width: 400px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ops-tbl-ts-sm { font-size: var(--text-sm); white-space: nowrap; }

.ops-level-error { font-weight: 700; color: var(--sem-negative); }
.ops-level-warn  { font-weight: 700; color: var(--sem-warning); }

.ops-flex-row { display: flex; align-items: center; gap: var(--space-2); }
.ops-flex-row__label { font-size: var(--text-sm); color: var(--text-primary); }

.ops-relevance-list { display: flex; flex-direction: column; gap: var(--space-1); margin-top: 0.3rem; }
.ops-relevance-item { font-size: var(--text-sm); display: flex; align-items: center; gap: 0.4rem; }
.ops-relevance-count { font-weight: 700; color: var(--text-primary); }

.ops-badge--core    { background: var(--color-primary); color: var(--text-inverse); }
.ops-badge--hidden  { background: var(--brand-accent-bg); color: var(--brand-accent-text); }
.ops-badge--default { background: var(--text-tertiary); color: var(--text-inverse); }

.ops-grid--mb-sm { margin-bottom: var(--space-3); }

.ops-section-footer { padding: 0.6rem 1.25rem; font-size: var(--text-sm); color: var(--text-secondary); }

.ops-setting-label--nowrap { white-space: nowrap; }

.ops-input--w24 { width: 24rem; }
.ops-input--w18 { width: 18rem; }
.ops-input--w12 { width: 12rem; }
.ops-input--w8  { width: 8rem; }

/* ===== Responsive (Mobile-first) ===== */
/* Mobile base: single column, stacked header, scrollable tabs */
.ops-header { flex-direction: column; }
.ops-tabs { overflow-x: auto; }
@media (min-width: 640px) {
  .ops-grid-2 { grid-template-columns: repeat(2, 1fr); }
  .ops-grid-3 { grid-template-columns: repeat(3, 1fr); }
  .ops-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .ops-grid-5 { grid-template-columns: repeat(3, 1fr); }
  .ops-header { flex-direction: row; }
  .ops-tabs { overflow-x: visible; }
}
@media (min-width: 900px) {
  .ops-grid-4 { grid-template-columns: repeat(4, 1fr); }
  .ops-grid-5 { grid-template-columns: repeat(5, 1fr); }
}

/* ------------------------------------------------------------------
   Ops Dashboard scoped styles (.ops-page prefix)
   ------------------------------------------------------------------ */
.ops-page { --teal: var(--sem-info); --teal-light: var(--brand-primary-light); }
.ops-page { --amber: var(--sem-warning); --red: var(--sem-negative); }
.ops-page .ops-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-4); margin-bottom: var(--space-6); }
.ops-page .stat-card {
  background: var(--surface-raised); border-radius: var(--radius-lg); padding: var(--space-5);
  box-shadow: var(--shadow-md); border: 1px solid var(--surface-secondary);
}
.ops-page .stat-card-label { font-size: var(--text-xs); font-weight: 700; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: var(--space-2); }
.ops-page .stat-card-value { font-size: 1.8rem; font-weight: 800; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.ops-page .stat-card-sub { font-size: var(--text-xs); color: var(--text-tertiary); margin-top: var(--space-1); }

.ops-page .ops-section {
  background: var(--surface-raised); border-radius: var(--radius-xl); box-shadow: var(--shadow-md);
  border: 1px solid var(--surface-secondary); overflow: hidden; margin-bottom: var(--space-6);
}
.ops-page .ops-section-header {
  padding: 1rem 1.25rem; border-bottom: 1px solid var(--surface-secondary);
  display: flex; justify-content: space-between; align-items: center;
  background: linear-gradient(180deg, var(--surface-sunken) 0%, var(--surface-base) 100%);
}
.ops-page .ops-section-header h2 {
  margin: 0; font-size: var(--text-base); font-weight: 700; color: var(--text-primary);
  display: flex; align-items: center; gap: var(--space-2);
}
.ops-page .ops-section-header h2 svg { color: var(--teal); }

.ops-page .ops-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.ops-page .ops-table th {
  padding: 0.625rem 1rem; text-align: left; font-size: var(--text-xs); font-weight: 700;
  color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.06em;
  border-bottom: 2px solid var(--surface-secondary);
  background: linear-gradient(180deg, var(--surface-sunken) 0%, var(--surface-base) 100%);
}
.ops-page .ops-table td {
  padding: 0.5rem 1rem; border-bottom: 1px solid var(--surface-secondary);
  font-variant-numeric: tabular-nums; color: var(--text-secondary);
}
.ops-page .ops-table tbody tr:hover { background: var(--surface-sunken); }
.ops-page .ops-table tbody tr:last-child td { border-bottom: none; }

.ops-page .status-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 0.25rem 0.6rem; border-radius: var(--radius-sm);
  font-size: var(--text-xs); font-weight: 700;
}
.ops-page .status-badge.success { background: color-mix(in srgb, var(--sem-positive) 15%, var(--surface-base)); color: var(--sem-positive); }
.ops-page .status-badge.partial { background: color-mix(in srgb, var(--sem-warning) 15%, var(--surface-base)); color: var(--sem-warning); }
.ops-page .status-badge.failed { background: color-mix(in srgb, var(--sem-negative) 12%, var(--surface-base)); color: var(--sem-negative); }
.ops-page .status-badge.running { background: var(--brand-primary-light); color: var(--brand-primary); }
.ops-page .status-badge.known { background: var(--surface-secondary); color: var(--text-secondary); }
.ops-page .status-badge.ingested { background: var(--brand-primary-light); color: var(--sem-info); }
.ops-page .status-badge.deleted { background: color-mix(in srgb, var(--sem-negative) 12%, var(--surface-base)); color: var(--sem-negative); }

.ops-page .freshness-bar {
  display: flex; align-items: center; gap: var(--space-2);
}
.ops-page .freshness-dot {
  width: 8px; height: 8px; border-radius: 50%;
}
.ops-page .freshness-dot.fresh { background: var(--sem-positive); }
.ops-page .freshness-dot.stale { background: var(--brand-accent-bg); }
.ops-page .freshness-dot.old { background: var(--sem-negative); }

.ops-page .run-id-cell { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-tertiary); }
.ops-page .num-cell { text-align: right; font-variant-numeric: tabular-nums; }

.ops-page .stage-details { margin-top: var(--space-1); }
.ops-page .stage-details summary { cursor: pointer; font-size: var(--text-xs); color: var(--text-tertiary); }
.ops-page .stage-breakdown { padding: 0.25rem 0; font-size: var(--text-xs); }
.ops-page .stage-row { display: flex; justify-content: space-between; padding: 0.1rem 0; }
.ops-page .stage-name { color: var(--text-secondary); }
.ops-page .stage-time { font-weight: 600; font-variant-numeric: tabular-nums; }

.ops-page .run-trend-chart { display: flex; align-items: flex-end; gap: var(--space-2); height: 120px; padding: var(--space-2); }
.ops-page .trend-bar-wrap { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; justify-content: flex-end; }
.ops-page .trend-bar { width: 100%; min-height: 4px; border-radius: 3px 3px 0 0; transition: height var(--duration-slow); }
.ops-page .bar-ok { background: var(--sem-positive); }
.ops-page .bar-fail { background: var(--sem-negative); }
.ops-page .trend-label { font-size: var(--text-xs); color: var(--text-tertiary); margin-top: var(--space-1); text-align: center; }

/* ------------------------------------------------------------------
   Ops Metrics (.ops-page -- ops_metrics-specific rules)
   ------------------------------------------------------------------ */
.ops-page .ops-grid--narrow { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

.ops-page .ops-card-value--ok      { color: var(--sem-positive); }
.ops-page .ops-card-value--warn    { color: var(--sem-warning); }
.ops-page .ops-card-value--err     { color: var(--sem-negative); }
.ops-page .ops-card-value--muted   { color: var(--text-tertiary); }

.ops-page .ops-badge-danger { background: var(--sem-negative); color: var(--text-inverse); padding: 0.2rem 0.5rem; border-radius: var(--radius-sm); font-size: var(--text-xs); font-weight: 700; }
.ops-page .ops-badge-off { background: var(--border-default); color: var(--text-secondary); padding: 0.2rem 0.5rem; border-radius: var(--radius-sm); font-size: var(--text-xs); font-weight: 700; }

.ops-page .severity-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 0.2rem 0.5rem; border-radius: var(--radius-sm);
  font-size: var(--text-xs); font-weight: 700; text-transform: uppercase;
}
.ops-page .severity-badge.critical { background: color-mix(in srgb, var(--sem-negative) 12%, var(--surface-base)); color: var(--sem-negative); }
.ops-page .severity-badge.warning { background: color-mix(in srgb, var(--sem-warning) 15%, var(--surface-base)); color: var(--sem-warning); }

.ops-page .metric-bar { display: flex; align-items: center; gap: var(--space-2); }
.ops-page .metric-bar-fill {
  height: 6px; border-radius: var(--radius-xs); min-width: 2px;
  transition: width var(--duration-slow);
}
.ops-page .metric-bar-fill.good { background: var(--sem-positive); }
.ops-page .metric-bar-fill.medium { background: var(--brand-accent-bg); }
.ops-page .metric-bar-fill.low { background: var(--sem-negative); }

.ops-page .trend-chart { display: flex; align-items: flex-end; gap: 3px; height: 60px; }
.ops-page .trend-dot {
  flex: 1; min-height: 2px; border-radius: 2px 2px 0 0; transition: height var(--duration-slow);
  background: var(--teal);
}
.ops-page .trend-dot--accent {
  background: var(--analysis-accent);
}

.ops-page .hash-cell { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-tertiary); letter-spacing: 0.02em; }

.ops-page .nav-back { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-sm); color: var(--teal); text-decoration: none; margin-bottom: var(--space-4); }
.ops-page .nav-back:hover { text-decoration: underline; }

.ops-page .tab-nav { display: flex; gap: 0; border-bottom: 2px solid var(--surface-secondary); margin-bottom: var(--space-6); }
.ops-page .tab-btn {
  padding: 0.75rem 1.25rem; font-size: var(--text-sm); font-weight: 600; color: var(--text-tertiary);
  border: none; background: none; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px;
}
.ops-page .tab-btn.active { color: var(--teal); border-bottom-color: var(--teal); }
.ops-page .tab-btn:hover { color: var(--text-secondary); }
.ops-page .tab-panel { display: none; }
.ops-page .tab-panel.active { display: block; }

.ops-page .stat-card-value--sm {
  font-size: var(--text-base);
}

/* ------------------------------------------------------------------
   ops_metrics.html — extracted inline styles (Group 3)
   ------------------------------------------------------------------ */

.ops-section-body-pad {
  padding: 1rem 1.25rem;
}

.ops-coverage-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
}

.ops-chart-label {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--text-tertiary);
  margin-bottom: var(--space-2);
}

.ops-section-meta {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

.ops-tbl-date {
  font-size: var(--text-xs);
}

.ops-tbl-recommendation {
  font-size: var(--text-xs);
  max-width: 200px;
}

.ops-file-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-1);
}

.ops-file-row {
  display: flex;
  justify-content: space-between;
  padding: 0.25rem 0;
  font-size: var(--text-xs);
}

.ops-file-row__name {
  color: var(--text-secondary);
}

.ops-file-detail {
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--surface-secondary);
}

.ops-section-empty {
  padding: var(--space-8);
  text-align: center;
  color: var(--text-tertiary);
}

.ops-no-data {
  padding: var(--space-12);
  text-align: center;
}

.ops-no-data__title {
  color: var(--text-secondary);
  font-size: var(--text-lg);
  margin: 0 0 0.5rem;
}

.ops-no-data__desc {
  color: var(--text-tertiary);
  font-size: var(--text-sm);
  margin: 0 0 1rem;
}

.ops-no-data__hint {
  color: var(--text-tertiary);
  font-size: var(--text-sm);
  margin: 0;
}

.ops-hash-placeholder {
  color: var(--text-tertiary);
}

.ops-status-ok {
  color: var(--sem-positive);
  font-size: var(--text-xs);
}

}


/* === ./pages/sector-detail.css === */
/* ==========================================================================
   pages/sector-detail.css -- Sector detail page styles
   Extracted from pages.css (.sector-detail-page)
   ========================================================================== */

@layer pages {

/* ------------------------------------------------------------------
   Sector Detail (.sector-detail-page)
   ------------------------------------------------------------------ */
/* Page-scoped indigo theme — renamed to --page-primary to avoid shadowing
   the global --primary (tokens.css) inside the sector detail view. */
.sector-detail-page { --page-primary: #6366f1; --page-primary-dark: #4f46e5; --accent: #14b8a6; }
.sector-detail-page .page-header { margin-bottom: 1.5rem; }
.sector-detail-page .peer-table-wrap {
  background: var(--surface-raised);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--surface-secondary);
  overflow: hidden;
}
.sector-detail-page .peer-table-header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--surface-secondary);
  display: flex; justify-content: space-between; align-items: center;
  background: linear-gradient(180deg, var(--surface-sunken) 0%, var(--surface-base) 100%);
  flex-wrap: wrap; gap: 0.75rem;
}
.sector-detail-page .peer-table-header h2 {
  margin: 0; font-size: var(--text-base); font-weight: 700; color: var(--text-primary);
  display: flex; align-items: center; gap: 0.5rem;
}
.sector-detail-page .peer-table-header h2 svg { color: var(--analysis-accent); }
.sector-detail-page .peer-badge {
  font-size: var(--text-xs); font-weight: 600; padding: 0.375rem 0.75rem;
  border-radius: var(--radius-xl); background: var(--surface-secondary); color: var(--text-tertiary);
}

.sector-detail-page .peer-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.sector-detail-page .peer-table thead { position: sticky; top: 0; z-index: 2; }
.sector-detail-page .peer-table th {
  padding: 0.625rem 0.75rem;
  text-align: right; font-size: var(--text-xs); font-weight: 700;
  color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.06em;
  border-bottom: 2px solid var(--surface-secondary);
  background: linear-gradient(180deg, var(--surface-sunken) 0%, var(--surface-base) 100%);
  white-space: nowrap;
}
.sector-detail-page .peer-table th:first-child,
.sector-detail-page .peer-table th:nth-child(2),
.sector-detail-page .peer-table th:nth-child(3) { text-align: left; }
.sector-detail-page .peer-table th a {
  color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 2px;
}
.sector-detail-page .peer-table th a:hover { color: var(--analysis-accent); }
.sector-detail-page .sort-arrow { font-size: 0.55rem; opacity: 0.4; }
.sector-detail-page .sort-arrow.active { opacity: 1; color: var(--analysis-accent); }

.sector-detail-page .peer-table td {
  padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--surface-secondary);
  font-variant-numeric: tabular-nums; text-align: right; color: var(--text-secondary);
}
.sector-detail-page .peer-table td:first-child,
.sector-detail-page .peer-table td:nth-child(2),
.sector-detail-page .peer-table td:nth-child(3) { text-align: left; }
.sector-detail-page .peer-table tbody tr { transition: background var(--transition-fast); }
.sector-detail-page .peer-table tbody tr:hover { background: var(--surface-sunken); }
.sector-detail-page .peer-table tbody tr.benchmark-row {
  background: color-mix(in srgb, var(--sem-info) 6%, var(--surface-base));
  font-weight: 700; border-top: 2px solid var(--border-strong);
}
.sector-detail-page .peer-table tbody tr.benchmark-row td { color: var(--brand-primary); border-bottom: 2px solid var(--border-strong); }

.sector-detail-page .code-link { color: var(--analysis-accent); font-weight: 700; text-decoration: none; }
.sector-detail-page .code-link:hover { color: var(--analysis-accent-dark); text-decoration: underline; }
.sector-detail-page .company-name-cell { font-weight: 600; color: var(--text-primary); max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sector-detail-page .val-pos { color: var(--sem-positive); }
.sector-detail-page .val-neg { color: var(--sem-negative); }
.sector-detail-page .val-na { color: var(--border-strong); }
.sector-detail-page .val-fin { font-size: var(--text-xs); }
.sector-detail-page .pct-high { background-color: rgba(46, 204, 113, 0.15); }
.sector-detail-page .pct-low { background-color: rgba(231, 76, 60, 0.12); }
.sector-detail-page .benchmark-range { display: block; font-size: 0.55rem; font-weight: 400; color: var(--text-tertiary); line-height: 1.2; margin-top: 1px; }
.sector-detail-page .back-link { font-size: var(--text-sm); color: var(--text-tertiary); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; margin-bottom: 1rem; }
.sector-detail-page .back-link:hover { color: var(--analysis-accent); }

}


/* === ./pages/market.css === */
/* ==========================================================================
   pages/market.css -- Market overview page styles
   Extracted from pages.css (market.html)
   ========================================================================== */

@layer pages {

/* ------------------------------------------------------------------
   Market Overview (market.html) — Modern Chart Cards
   ------------------------------------------------------------------ */
.z-card--chart {
  padding: 0;
  overflow: hidden;
  transition: box-shadow var(--duration-normal), transform var(--duration-normal);
}
.z-card--chart:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-1px);
}
.z-card--chart .z-card__header {
  padding: var(--space-4) var(--space-5) 0;
  margin-bottom: 0;
}
.z-card--chart .z-card__title {
  font-size: var(--font-size-md);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.01em;
}
.z-card--chart .z-card__body {
  padding: var(--space-2) var(--space-3) var(--space-3);
}
.z-chart--dist {
  background: transparent;
  border: none;
  border-radius: 0;
}

/* ------------------------------------------------------------------
   Market Signals (market_signals.html) — extracted inline styles
   ------------------------------------------------------------------ */
.ms-disclaimer-card { border-left: 3px solid var(--color-warning); }

.ms-icon-lg { font-size: var(--text-5xl); color: var(--text-disabled); }
.ms-icon-md { font-size: 36px; color: var(--text-disabled); }

/* Advancer/Decliner bar */
.ms-adv-dec { font-size: var(--text-xl); font-weight: 700; }
.ms-adv-bar {
  height: 8px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--negative, #ef4444);
  display: flex;
}
.ms-adv-bar__fill {
  background: var(--positive, #10b981);
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}

/* Sector distribution table */
.ms-sector-table { min-width: 640px; }

/* Signal modal */
.ms-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
}
.ms-modal-panel {
  background: var(--surface-raised);
  border-radius: var(--radius-lg);
  width: min(94vw, 1020px);
  max-height: 85vh;
  overflow: auto;
  padding: 1rem 1.25rem;
  box-shadow: var(--shadow-xl);
}
.ms-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
  position: sticky;
  top: 0;
  background: var(--surface-raised);
  padding: 0.25rem 0 0.5rem;
  border-bottom: 1px solid var(--border-subtle);
  z-index: 1;
}
.ms-modal-close {
  background: none;
  border: none;
  font-size: var(--text-2xl);
  cursor: pointer;
  color: var(--text-tertiary);
  line-height: 1;
  padding: 4px;
}

/* ------------------------------------------------------------------
   Risk Radar (market_risk_radar.html) — extracted inline styles
   ------------------------------------------------------------------ */
/* Index / row-number cell */
.rr-index-cell {
  color: var(--text-tertiary);
  font-size: var(--text-xs);
}

/* Company code sub-line */
.rr-code-sub {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

/* Sector / market text size */
.rr-cell-sm { font-size: var(--text-sm); }

/* Company name link with semibold weight */
.rr-name-link { font-weight: var(--fw-semibold); }

/* Score cell: bold + danger color (Z-Score / sales_yoy) */
.rr-score-danger {
  font-weight: var(--fw-bold);
  color: var(--danger, #ef4444);
}

/* Score cell: bold + warning color (F-Score) */
.rr-score-warning {
  font-weight: var(--fw-bold);
  color: var(--warning, #f59e0b);
}

/* Empty state paragraph */
.rr-empty {
  color: var(--text-tertiary);
  text-align: center;
  padding: var(--space-6);
}

/* ------------------------------------------------------------------
   Valuation Map (valuation_map.html) — extracted inline styles
   ------------------------------------------------------------------ */
/* Zone cards: left-border accent by zone type */
.vmap-zone-card--value    { border-left: 3px solid var(--positive); }
.vmap-zone-card--quality  { border-left: 3px solid var(--info); }
.vmap-zone-card--specula  { border-left: 3px solid var(--negative); }
.vmap-zone-card--growth   { border-left: 3px solid var(--warning); }

/* Zone label (bold + semantic color) */
.vmap-zone-label { font-weight: var(--fw-semibold); }
.vmap-zone-label--value   { color: var(--positive); }
.vmap-zone-label--quality { color: var(--info); }
.vmap-zone-label--specula { color: var(--negative); }
.vmap-zone-label--growth  { color: var(--warning); }

/* Zone sub-text */
.vmap-zone-sub {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

/* Zone count number */
.vmap-zone-count {
  font-size: var(--text-2xl);
  font-weight: var(--fw-bold);
  margin-top: var(--space-2);
}

/* Filter selects width auto */
.vmap-filter-select { width: auto; }

/* Sector name cell in table */
.vmap-sector-name { font-weight: var(--fw-semibold); }

/* ------------------------------------------------------------------
   Sector page (sector.html) — extracted inline styles
   ------------------------------------------------------------------ */
/* Insight value colored by sign */
.sector-insight-value--pos { color: var(--positive); }
.sector-insight-value--neg { color: var(--negative); }

/* Sector heatmap header flex row */
.sector-hm-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

/* Gradient legend strip */
.sector-hm-legend-strip {
  width: 60px;
  height: 8px;
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg, var(--negative), var(--warning), var(--positive));
}

/* Distribution table median cell: semibold */
.sector-dist-median { font-weight: var(--fw-semibold); }

/* Distribution table min/max cells: muted */
.sector-dist-muted { color: var(--text-tertiary); }

/* Top companies metric value */
.sector-top-value--pos { color: var(--positive); }
.sector-top-value--neg { color: var(--negative); }

/* Top companies table: column widths */
.sector-top-col-rank { width: 60px; }
.sector-top-col-code { width: 80px; }

/* Bar chart / heatmap info note */
.sector-chart-note {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  margin-top: var(--space-2);
}

/* Insights row separator */
.sector-insights-sep {
  border: none;
  border-top: 1px solid var(--border-default);
  margin: var(--space-3) 0;
}

/* Insight/chart header: flex + items-center + gap */
.sector-chart-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* Sector page bar chart + heatmap row gap override */
.sector-charts-row { gap: var(--space-4); }

/* ------------------------------------------------------------------
   market.html — extracted inline styles (Group 3)
   ------------------------------------------------------------------ */

/* Price treemap legend row */
.mkt-legend {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  font-size: var(--text-xs);
  flex-wrap: wrap;
}

/* Legend color bar wrapper */
.mkt-legend-bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* Gradient bar */
.mkt-gradient-bar {
  display: flex;
  height: 10px;
  border-radius: var(--radius-full);
  overflow: hidden;
  width: 120px;
}

/* Gradient bar (heatmap variant, wider) */
.mkt-gradient-bar--heatmap {
  display: flex;
  height: 12px;
  border-radius: var(--radius-md);
  overflow: hidden;
  width: 160px;
}

/* Legend color swatch */
.mkt-swatch {
  flex: 1;
}

/* Heatmap / gradient legend swatch color variants */
.mkt-swatch--red-500   { background: var(--sem-negative, #ef4444); }
.mkt-swatch--red-300   { background: #fca5a5; }
.mkt-swatch--green-300 { background: #86efac; }
.mkt-swatch--green-500 { background: var(--sem-positive, #22c55e); }
.mkt-swatch--blue-50   { background: #f0f7ff; }
.mkt-swatch--teal-200  { background: #99f6e4; }
.mkt-swatch--teal-400  { background: var(--brand-primary, #2dd4bf); }
.mkt-swatch--teal-600  { background: #0d9488; }
.mkt-swatch--teal-900  { background: #134e4a; }

/* Legend label: negative */
.mkt-label-neg {
  color: var(--negative);
  font-weight: 600;
}

/* Legend label: positive */
.mkt-label-pos {
  color: var(--positive);
  font-weight: 600;
}

/* Legend note (subtle color) */
.mkt-legend-note {
  color: var(--text-disabled);
}

/* Heatmap legend row */
.mkt-heatmap-legend {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

/* Heatmap legend margin note */
.mkt-heatmap-legend__note {
  margin-left: var(--space-2);
  color: var(--text-disabled);
}

/* KPI stats table: label cell */
.mkt-kpi-label {
  font-weight: var(--fw-semibold);
}

/* KPI stats footnote */
.mkt-footnote {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  margin-top: var(--space-2);
}

/* EBITDA ranking sub text (code/sector) */
.mkt-company-sub {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

/* Health bullet label */
.mkt-bullet-label {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  margin-bottom: var(--space-1);
  font-weight: var(--fw-semibold);
}

/* Score distribution card title */
.mkt-dist-title {
  font-size: var(--text-sm);
  margin-bottom: var(--space-2);
}

/* ------------------------------------------------------------------
   technical.html — extracted inline styles (Group 3)
   ------------------------------------------------------------------ */

/* Filter select: auto width */
.z-input--auto {
  width: auto;
}

/* Company name truncated cell */
.tech-name-cell {
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* RSI oversold card accent */
.z-card--oversold {
  border-left: 3px solid var(--positive);
}

/* RSI overbought card accent */
.z-card--overbought {
  border-left: 3px solid var(--negative);
}

/* RSI zone card title: oversold color */
.z-card__title--positive {
  color: var(--positive);
}

/* RSI zone card title: overbought color */
.z-card__title--negative {
  color: var(--negative);
}

/* RSI zone card body flex wrap */
.z-card__body--flex-wrap {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* Technical icon: no data */
.tech-empty-icon {
  font-size: var(--text-5xl);
  color: var(--text-disabled);
}

/* ------------------------------------------------------------------
   Market Health Snapshot (market.html § 市場ヘルススナップショット)
   ------------------------------------------------------------------ */
.mkt-health-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
  gap: var(--space-3);
}
.mkt-health-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--surface-base);
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
  text-decoration: none;
  transition: transform var(--duration-fast), box-shadow var(--duration-fast),
              border-color var(--duration-fast);
}
a.mkt-health-card:hover,
a.mkt-health-card:focus-visible {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
  outline: none;
}
.mkt-health-card__icon {
  display: inline-flex;
  align-items: center;
  width: 28px;
  height: 28px;
  font-size: 22px;
  color: var(--text-secondary);
}
.mkt-health-card__count {
  font-size: var(--text-2xl);
  font-weight: var(--fw-bold);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.mkt-health-card__label {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  line-height: 1.3;
}
.mkt-health-card__pct {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}
.mkt-health-card--negative {
  background: color-mix(in srgb, var(--sem-negative) 6%, var(--surface-base));
  border-color: color-mix(in srgb, var(--sem-negative) 25%, var(--surface-base));
}
.mkt-health-card--negative .mkt-health-card__icon,
.mkt-health-card--negative .mkt-health-card__count {
  color: var(--sem-negative);
}
.mkt-health-card--warning {
  background: color-mix(in srgb, var(--sem-warning) 8%, var(--surface-base));
  border-color: color-mix(in srgb, var(--sem-warning) 30%, var(--surface-base));
}
.mkt-health-card--warning .mkt-health-card__icon,
.mkt-health-card--warning .mkt-health-card__count {
  color: var(--brand-accent-text, var(--sem-warning));
}
.mkt-health-card--info {
  background: color-mix(in srgb, var(--sem-info) 6%, var(--surface-base));
  border-color: color-mix(in srgb, var(--sem-info) 25%, var(--surface-base));
}
.mkt-health-card--info .mkt-health-card__icon,
.mkt-health-card--info .mkt-health-card__count {
  color: var(--sem-info, var(--brand-primary));
}
.mkt-health-card--positive {
  background: color-mix(in srgb, var(--sem-positive) 6%, var(--surface-base));
  border-color: color-mix(in srgb, var(--sem-positive) 25%, var(--surface-base));
}
.mkt-health-card--positive .mkt-health-card__icon,
.mkt-health-card--positive .mkt-health-card__count {
  color: var(--sem-positive);
}

}


/* === ./pages/watchlist.css === */
/* ==========================================================================
   watchlist.css — watchlist.html page-specific styles
   ========================================================================== */

@layer pages {

/* Count badge (header pill) */
.count-badge {
  background: rgba(255,255,255,0.2);
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
  font-weight: 600;
  margin-left: 0.5rem;
}

/* Sortable table headers */
.watchlist-table th.sortable { cursor: pointer; user-select: none; transition: color var(--transition-fast); }
.watchlist-table th.sortable:hover { color: var(--color-info); }
.watchlist-table th .sort-arrow { font-size: var(--text-xs); margin-left: 0.25rem; opacity: 0.3; }
.watchlist-table th.sort-active .sort-arrow { opacity: 1; color: var(--color-info); }

/* Empty state */
.empty-state { text-align: center; padding: 3rem 1rem; color: var(--text-tertiary); }
.empty-state p { margin: 0.25rem 0; }
.empty-state-title { font-size: var(--text-xl); margin-bottom: 0.5rem; }
.empty-state-desc { font-size: var(--text-sm); }
.empty-state-hint { font-size: var(--text-sm); margin-top: 0.75rem; color: var(--text-tertiary); }

/* Loading state */
.loading-state { text-align: center; padding: 2rem; color: var(--text-tertiary); }

/* Compare shortcut button */
.btn-compare {
  background: linear-gradient(135deg, var(--analysis-accent), var(--analysis-accent-dark));
  text-decoration: none;
  font-size: var(--text-sm);
}

/* Portfolio Analysis */
.portfolio-section { margin-top: 2rem; }
.portfolio-section h2 { font-size: var(--text-xl); font-weight: 700; color: var(--text-primary); margin-bottom: 1rem; }
.portfolio-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; }
.portfolio-card { background: var(--surface-raised); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 1.25rem; box-shadow: var(--shadow-sm); }
.portfolio-card h3 { margin: 0 0 1rem; font-size: var(--text-base); color: var(--text-secondary); font-weight: 600; }
.summary-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.stat-item { display: flex; flex-direction: column; }
.stat-item .stat-label { font-size: var(--text-xs); color: var(--text-tertiary); margin-bottom: 0.125rem; }
.stat-item .stat-value { font-size: var(--text-xl); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text-primary); }
.pct-bar-row { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.625rem; }
.pct-label { width: 5.5rem; font-size: var(--text-sm); text-align: right; color: var(--text-secondary); }
.pct-bar-track { flex: 1; height: 18px; background: var(--surface-secondary); border-radius: var(--radius-full); overflow: hidden; }
.pct-bar-fill { height: 100%; border-radius: var(--radius-full); transition: width 0.6s ease; }
.pct-value { width: 4.5rem; font-size: var(--text-sm); color: var(--text-secondary); font-weight: 600; }
.portfolio-position-desc { font-size: var(--text-xs); color: var(--text-tertiary); margin: 0 0 0.75rem; }

}


/* === ./pages/compare.css === */
/* ==========================================================================
   compare.css — compare.html page-specific styles
   ========================================================================== */

@layer pages {

/* Search form wrapper */
.search-form {
  background: var(--surface-base, #fff);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  box-shadow: var(--shadow-md);
  margin-bottom: var(--space-6);
}

.search-form h3 { font-size: var(--text-base); font-weight: 600; margin: 0 0 0.75rem 0; color: var(--text-primary); }

.code-inputs { display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; }

.code-inputs .input-wrapper { position: relative; width: 200px; }

.code-inputs input {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 2px solid var(--border-default);
  border-radius: var(--radius-sm);
  font-size: var(--text-base);
  font-weight: 600;
  text-align: center;
  transition: border-color var(--transition-fast);
  box-sizing: border-box;
}

.code-inputs input:focus-visible { border-color: var(--color-info); }

/* Compare search grid */
.compare-search-grid {
  display: flex;
  align-items: flex-end;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.compare-slot {
  flex: 1;
  min-width: 180px;
  max-width: 240px;
}
.compare-slot__label {
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  color: var(--text-tertiary);
  margin-bottom: var(--space-1);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.compare-slot__input {
  width: 100%;
  padding-left: 2.25rem;
  transition: border-color var(--duration-normal), box-shadow var(--duration-normal), background var(--duration-normal);
}
.compare-slot__input:hover:not(:focus) {
  border-color: var(--border-strong);
}
.compare-slot__input:focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px var(--color-focus-ring);
}
.compare-slot__icon {
  position: absolute;
  left: 0.6rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--text-lg);
  color: var(--text-disabled);
  pointer-events: none;
  transition: color var(--transition-normal);
}
.compare-slot .ac-wrap:focus-within .compare-slot__icon {
  color: var(--brand-primary);
}
.compare-vs {
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  color: var(--text-disabled);
  padding-bottom: 0.7rem;
  flex-shrink: 0;
}
.compare-submit-btn {
  flex-shrink: 0;
  white-space: nowrap;
}
/* Selected chip shown inside slot */
.compare-slot--filled .compare-slot__input,
.compare-slot.is-selected .compare-slot__input {
  border-color: var(--brand-primary);
  background: var(--teal-50, #f0fdfa);
  box-shadow: 0 0 0 3px var(--color-focus-ring);
}
.compare-slot.is-selected .compare-slot__icon {
  color: var(--brand-primary);
}
@keyframes ac-chip-enter {
  from { opacity: 0; transform: translateY(-4px) scale(0.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes ac-slot-confirm {
  0% { box-shadow: 0 0 0 0 rgba(13, 148, 136, 0.4); }
  50% { box-shadow: 0 0 0 6px rgba(13, 148, 136, 0.1); }
  100% { box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.1); }
}
.compare-slot.is-selected .compare-slot__input {
  animation: ac-slot-confirm 0.4s ease-out;
}
.ac-selected-chip {
  align-items: center;
  gap: 0.375rem;
  margin-top: var(--space-1);
  padding: 0.3rem 0.625rem;
  background: var(--brand-primary);
  color: var(--text-inverse);
  border-radius: 999px;
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  line-height: 1.4;
  max-width: 100%;
  overflow: hidden;
  /* Hidden by default, animated on show */
  display: none;
  opacity: 0;
  transform: translateY(-4px) scale(0.95);
}
.ac-selected-chip.show {
  display: inline-flex;
  animation: ac-chip-enter 0.25s ease-out forwards;
}
.ac-selected-chip__name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ac-selected-chip__clear {
  cursor: pointer;
  font-size: var(--text-base);
  opacity: 0.7;
  flex-shrink: 0;
  line-height: 1;
  border-radius: 50%;
  transition: opacity var(--duration-fast), background var(--duration-fast);
}
.ac-selected-chip__clear:hover {
  opacity: 1;
  background: rgba(255,255,255,0.2);
}

/* Autocomplete dropdown */
.ac-wrap { position: relative; display: block; }
.ac-wrap:has(.ac-dropdown.show) { z-index: 50; }

.ac-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  min-width: 300px;
  background: var(--surface-raised, white);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md, 8px);
  box-shadow: var(--shadow-lg);
  z-index: 200;
  max-height: 340px;
  overflow-y: auto;
  margin-top: 4px;
  /* Animate open/close */
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity var(--transition-normal), transform var(--transition-normal);
}
.ac-dropdown.show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.ac-item {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: background var(--transition-fast);
}
.ac-item:hover, .ac-item.is-active { background: var(--surface-hover, #f1f5f9); }
.ac-item .ac-code { font-weight: 700; color: var(--text-primary); flex-shrink: 0; }
.ac-item .ac-name { color: var(--text-secondary); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-item .ac-market { font-size: var(--text-xs); color: var(--text-tertiary); flex-shrink: 0; }
.ac-item .ac-sector { font-size: var(--text-xs); color: var(--text-tertiary); width: 100%; padding-left: 3.25rem; }
.ac-item .ac-delisted {
  color: var(--color-warning, #d97706);
  font-size: var(--text-xs);
  font-weight: 600;
}
.ac-item-delisted { opacity: 0.55; }
.ac-empty {
  padding: 1.25rem 1rem;
  color: var(--text-tertiary);
  font-size: var(--text-sm);
  text-align: center;
}
/* Legacy label — replaced by chip */
.ac-selected-label { display: none; }

.code-inputs .separator { color: var(--text-tertiary); font-size: var(--text-xl); }

.code-inputs button {
  padding: var(--space-2) var(--space-6);
  background: var(--color-info);
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.code-inputs button:hover { background: var(--sem-info); }

.profile-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-4); margin-bottom: var(--space-6); }

.profile-card {
  background: var(--surface-base, #fff);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  box-shadow: var(--shadow-md);
  border-top: 4px solid var(--color-info);
}

.profile-card:nth-child(2) { border-top-color: var(--color-positive); }
.profile-card:nth-child(3) { border-top-color: var(--color-warning); }
.profile-card:nth-child(4) { border-top-color: var(--chart-6); }
.profile-card .code { font-size: 0.8125rem; color: var(--text-tertiary); font-weight: 600; }
.profile-card .name { font-size: var(--text-lg); font-weight: 700; color: var(--text-primary); margin: 0.25rem 0; }
.profile-card .name a { color: inherit; text-decoration: none; }
.profile-card .name a:hover { color: var(--color-info); }
.profile-card .meta { font-size: 0.8125rem; color: var(--text-tertiary); }
.profile-card .price { font-size: var(--text-xl); font-weight: 700; margin-top: var(--space-2); color: var(--text-primary); }

.compare-table { width: 100%; border-collapse: collapse; }
.compare-table th {
  background: var(--surface-sunken);
  padding: 0.75rem 1rem;
  text-align: right;
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  font-weight: 600;
  border-bottom: 1px solid var(--border-default);
}
.compare-table th:first-child { text-align: left; }
.compare-table td {
  padding: 0.625rem 1rem;
  border-bottom: 1px solid var(--surface-secondary);
  font-size: var(--text-sm);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.compare-table td:first-child { text-align: left; font-weight: 600; color: var(--text-secondary); }
.compare-table tr:hover { background: var(--surface-sunken); }
.compare-table .best { color: var(--color-positive); font-weight: 700; }
/* KPI comparison highlight: best (green) / worst (red) */
.compare-table td.cmp-best {
  color: var(--sem-positive);
  font-weight: 700;
  background: color-mix(in srgb, var(--sem-positive) 10%, var(--surface-base));
}
.compare-table td.cmp-worst {
  color: var(--sem-negative);
  font-weight: 600;
  background: color-mix(in srgb, var(--sem-negative) 8%, var(--surface-base));
}

/* Compare: profile cards */
.compare-profile__code { font-size: var(--text-xs, 0.75rem); color: var(--text-tertiary, #64748b); }
.compare-profile__name { font-weight: var(--fw-semibold, 600); }
.compare-profile__name a { color: inherit; text-decoration: none; }
.compare-profile__name a:hover { color: var(--brand-primary, #0d9488); }
.compare-profile__meta { font-size: var(--text-xs, 0.75rem); color: var(--text-tertiary, #64748b); margin-top: var(--space-1, 4px); }
.compare-profile__price { font-size: var(--text-xl, 1.25rem); font-weight: var(--fw-bold, 700); margin-top: var(--space-2, 8px); }
.compare-profile__unit { font-size: var(--text-sm, 0.875rem); font-weight: var(--fw-normal, 400); color: var(--text-secondary, #475569); }

/* Compare: risk badges (audit / GC / foreign currency) — dashboard 改善 8 */
.compare-profile__risk-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-1);
  margin-top: var(--space-2);
  min-height: 22px;
}
.compare-profile__risk-row:empty {
  display: none;
}

/* Compare: win-rate bar (KPI 横比較で何項目勝ったか) */
.compare-profile__winrate {
  margin-top: var(--space-3);
  text-align: center;
}
.compare-profile__winrate-label {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  font-weight: var(--fw-semibold);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}
.compare-profile__winrate-pct {
  color: var(--text-tertiary);
  font-weight: var(--fw-normal);
}
.compare-profile__winrate-bar {
  margin-top: var(--space-1);
  height: 6px;
  background: var(--surface-sunken);
  border-radius: 3px;
  overflow: hidden;
}
.compare-profile__winrate-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--brand-primary), var(--sem-positive, #16a34a));
  transition: width 0.3s ease;
}

/* Compare: chart container with responsive height (mobile-first) */
.compare-chart { height: 280px; }
@media (min-width: 768px) {
  .compare-chart { height: 380px; }
}

/* Admin layout: mobile-first — base is 1-column, desktop restores grid */
.admin-layout { grid-template-columns: 1fr; }
@media (min-width: 768px) {
  .admin-layout { grid-template-columns: auto 1fr; }
}

.btn-compare-export {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.75rem;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-tertiary);
  background: var(--surface-sunken);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: var(--transition-fast);
}

.btn-compare-export:hover { color: var(--color-info); border-color: var(--teal-300); background: color-mix(in srgb, var(--sem-info) 8%, var(--surface-base)); }

/* KPI table header: sticky first column */
.compare-th-sticky {
  min-width: 140px;
  position: sticky;
  left: 0;
  background: var(--surface-sunken);
  z-index: 1;
}

/* KPI table header: company columns */
.compare-th-company {
  min-width: 100px;
}

/* KPI table: company code sub */
.compare-th-code {
  font-size: var(--text-xs);
  font-weight: normal;
  color: var(--text-tertiary);
}

/* KPI table data: sticky first column */
.compare-td-sticky {
  position: sticky;
  left: 0;
  background: var(--surface-base);
  z-index: 1;
  font-weight: var(--fw-medium);
}

/* KPI table unit */
.compare-td-unit {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

}


/* === ./pages/ranking.css === */
/* ==========================================================================
   ranking.css — rankings.html and changes.html page-specific styles
   ========================================================================== */

/* Changes page: delta badges */
.ranking-table .delta-up { color: var(--color-positive); font-weight: 700; }
.ranking-table .delta-down { color: var(--color-negative); font-weight: 700; }

/* RSI Zone Cards (technical / rankings pages) */
.rsi-zone-card { border-radius: var(--radius-lg); padding: 1.25rem; margin-bottom: 1.5rem; }

.rsi-zone-card h4 {
  font-size: var(--text-base);
  font-weight: 700;
  margin: 0 0 0.75rem 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.rsi-oversold { background: linear-gradient(135deg, color-mix(in srgb, var(--sem-positive) 15%, var(--surface-base)) 0%, color-mix(in srgb, var(--sem-positive) 30%, var(--surface-base)) 100%); border: 2px solid var(--sem-positive); }
.rsi-oversold h4 { color: var(--sem-positive); }
.rsi-overbought { background: linear-gradient(135deg, color-mix(in srgb, var(--sem-negative) 8%, var(--surface-base)) 0%, color-mix(in srgb, var(--sem-negative) 25%, var(--surface-base)) 100%); border: 2px solid var(--sem-negative); }
.rsi-overbought h4 { color: var(--sem-negative); }

.rsi-list { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.rsi-item {
  background: var(--surface-base, #fff);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.75rem;
  font-size: var(--text-sm);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid rgba(0,0,0,0.08);
}

.rsi-item a { color: var(--primary); font-weight: 700; text-decoration: none; }
.rsi-item .val { color: var(--text-tertiary); font-size: var(--text-xs); }

/* RSI item variants (technical page) */
.rsi-item--oversold { background: color-mix(in srgb, var(--sem-positive) 15%, var(--surface-base)); }
.rsi-item--overbought { background: color-mix(in srgb, var(--sem-negative) 8%, var(--surface-base)); }

/* Card description paragraph (below card title) */
.rank-card-desc {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-bottom: var(--space-3);
}

/* Footnote (※ 銀行・金融業は除外) */
.rank-card-note {
  font-size: var(--text-xs);
  color: var(--text-disabled);
  margin-bottom: var(--space-2);
}

/* ROE sub-cell in efficiency table */
.rank-roe-cell {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

/* Bump chart note */
.rank-bump-note {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  margin-top: var(--space-2);
}

/* Consecutive growth section heading */
.rank-section-heading {
  font-size: var(--text-lg);
  font-weight: var(--fw-bold);
}

/* Consecutive growth card description */
.rank-consec-desc {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

/* ==========================================================================
   v2 design system: z- prefix ranking classes (migrated from pages-v2.css)
   ========================================================================== */

@layer pages {
  /* Ranking list container */
  .z-ranking-list {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  /* Ranking row: mobile-first 2-row grid (rank+company / metric),
     promoted to single-row 3-column grid at >=640px */
  .z-ranking-row {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "rank company"
      "metric metric";
    row-gap: var(--space-2);
    column-gap: var(--space-3);
    align-items: center;
    padding: var(--space-3);
    border-bottom: 1px solid var(--border-subtle);
    color: inherit;
    text-decoration: none;
    transition: background var(--duration-fast), box-shadow var(--duration-fast);
  }
  .z-ranking-row:last-child { border-bottom: none; }
  .z-ranking-row:hover,
  .z-ranking-row:focus-visible {
    background: var(--surface-sunken);
    outline: none;
  }
  .z-ranking-row:focus-visible {
    box-shadow: inset 0 0 0 2px var(--brand-primary);
  }

  /* Rank badge: circular, with podium colors for top 3 */
  .z-rank-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-weight: var(--fw-bold);
    font-size: var(--text-sm);
    background: var(--surface-sunken);
    color: var(--text-secondary);
    border: 1px solid var(--border-subtle);
    flex-shrink: 0;
  }
  .z-rank-badge--gold {
    background: linear-gradient(135deg, #fde68a 0%, #f59e0b 100%);
    color: #78350f;
    border-color: #f59e0b;
    box-shadow: 0 1px 2px rgba(245, 158, 11, 0.25);
  }
  .z-rank-badge--silver {
    background: linear-gradient(135deg, #e5e7eb 0%, #9ca3af 100%);
    color: #1f2937;
    border-color: #9ca3af;
    box-shadow: 0 1px 2px rgba(156, 163, 175, 0.25);
  }
  .z-rank-badge--bronze {
    background: linear-gradient(135deg, #fdba74 0%, #c2410c 100%);
    color: #fff;
    border-color: #c2410c;
    box-shadow: 0 1px 2px rgba(194, 65, 12, 0.25);
  }

  /* Company info cell */
  .z-ranking-row__company {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .z-ranking-row__company-name {
    font-weight: var(--fw-semibold);
    font-size: var(--text-base);
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .z-ranking-row__company-sub {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
  }
  .z-ranking-row__code {
    font-variant-numeric: tabular-nums;
    color: var(--text-secondary);
    font-weight: var(--fw-medium);
  }
  .z-ranking-row__sector {
    color: var(--text-tertiary);
  }

  /* Metric value cell (right-aligned) */
  .z-ranking-row__metric {
    text-align: right;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
  }
  .z-ranking-row__metric-value {
    font-weight: var(--fw-bold);
    font-size: var(--text-lg);
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
  }
  .z-ranking-row__metric-sub {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    font-variant-numeric: tabular-nums;
  }

  /* Mobile-first grid areas (rows arrangement above) */
  .z-rank-badge { grid-area: rank; }
  .z-ranking-row__company { grid-area: company; }
  .z-ranking-row__metric {
    grid-area: metric;
    flex-direction: row;
    justify-content: space-between;
    align-items: baseline;
    padding-left: 48px; /* align with company text (badge width + gap) */
  }
  .z-ranking-row__metric-value { font-size: var(--text-base); }

  /* >=640px (tablet+): single-row 3-column grid */
  @media (min-width: 640px) {
    .z-ranking-row {
      grid-template-columns: auto 1fr auto;
      grid-template-areas: none;
      row-gap: 0;
      column-gap: var(--space-4);
      padding: var(--space-3) var(--space-4);
    }
    .z-rank-badge,
    .z-ranking-row__company,
    .z-ranking-row__metric { grid-area: auto; }
    .z-ranking-row__metric {
      flex-direction: column;
      align-items: flex-end;
      justify-content: center;
      padding-left: 0;
    }
    .z-ranking-row__metric-value { font-size: var(--text-lg); }
  }

  /* Sentinel row (infinite scroll trigger) */
  .z-ranking-sentinel {
    display: flex;
    justify-content: center;
    padding: var(--space-4);
    color: var(--text-tertiary);
    font-size: var(--text-sm);
  }
}


/* === ./pages/home.css === */
/* ==========================================================================
   home.css — index.html page-specific styles
   ========================================================================== */

/* Quick access card description */
.idx-card-desc {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-top: var(--space-1);
}

/* Market card description */
.idx-market-desc {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-top: var(--space-2);
}

/* Risk radar summary: "リスク注意企業" label */
.idx-risk-label {
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-secondary);
}

/* Market cards row: justify-between */
.idx-market-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Treemap / chart subtitle */
.idx-chart-sub {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

/* noscript fallback message inside chart area */
.idx-noscript-msg {
  padding: var(--space-4);
  color: var(--text-tertiary);
  text-align: center;
}

/* Table empty state cell */
.idx-table-empty {
  padding: var(--space-8);
  color: var(--text-tertiary);
  text-align: center;
}

/* ==========================================================================
   v2 design system: hero / search (migrated from pages-v2.css)
   ========================================================================== */

@layer pages {
  .z-hero {
    padding: var(--space-12) var(--space-4) var(--space-6);
    text-align: center;
    overflow-wrap: break-word;
    word-break: break-word;
  }
  .z-hero__title {
    font-size: clamp(var(--text-2xl), 3vw + 1rem, var(--text-3xl));
    font-weight: var(--fw-extrabold);
    color: var(--text-primary);
    letter-spacing: -0.03em;
    line-height: var(--lh-tight);
  }
  .z-hero__sub {
    font-size: clamp(var(--text-base), 2vw + 0.5rem, var(--text-lg));
    color: var(--text-secondary);
    margin-top: var(--space-3);
  }
  .z-search--hero {
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
  }
  .z-quickaccess-icon {
    font-size: 28px;
    color: var(--brand-primary);
  }
  .z-market-stat {
    text-align: center;
  }
  .z-market-stat__label {
    font-weight: var(--fw-semibold);
    margin-bottom: var(--space-1);
  }
  .z-market-stat__value {
    font-size: var(--text-lg);
    font-weight: var(--fw-bold);
    font-variant-numeric: tabular-nums;
  }
  .z-market-stat__sub {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    margin-top: var(--space-1);
  }

  /* ==========================================================================
     Hero enhancement (audit dashboard 改善 2026-05-03)
     ========================================================================== */
  .z-hero--enhanced {
    background: linear-gradient(135deg, color-mix(in srgb, var(--brand-primary) 6%, transparent), transparent);
    border-radius: var(--radius-lg, 12px);
    padding: var(--space-10) var(--space-6) var(--space-8);
    margin-bottom: var(--space-6);
  }
  .z-hero__stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--space-4);
    margin-top: var(--space-6);
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
  }
  .z-hero__stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-3);
    background: var(--surface-base);
    border-radius: var(--radius-md, 8px);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  }
  .z-hero__stat-value {
    font-size: clamp(var(--text-xl), 2vw + 1rem, var(--text-2xl));
    font-weight: var(--fw-extrabold);
    color: var(--brand-primary);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
  }
  .z-hero__stat-label {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    margin-top: var(--space-1);
  }

  /* ==========================================================================
     Risk Summary card + grid (監査リスク警告)
     ========================================================================== */
  /* z-card--risk-summary は components/card.css に定義 (重複削除) */
  .z-risk-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--space-3);
  }
  .z-risk-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-4) var(--space-3);
    background: var(--surface-sunken);
    border-radius: var(--radius-md, 8px);
    text-decoration: none;
    color: var(--text-primary);
    border: 1px solid transparent;
    transition: transform 0.15s ease, border-color 0.15s ease;
    text-align: center;
  }
  .z-risk-card:hover {
    transform: translateY(-2px);
    border-color: currentColor;
    text-decoration: none;
  }
  .z-risk-card__icon .material-symbols-outlined,
  .z-risk-card__icon {
    font-size: 24px;
  }
  .z-risk-card__count {
    font-size: clamp(var(--text-xl), 2vw + 0.5rem, var(--text-2xl));
    font-weight: var(--fw-extrabold);
    font-variant-numeric: tabular-nums;
    margin-top: var(--space-1);
    line-height: 1.1;
  }
  .z-risk-card__label {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    margin-top: var(--space-1);
  }
  .z-risk-card--negative {
    color: var(--negative, #dc2626);
  }
  .z-risk-card--warning {
    color: var(--warning, #f97316);
  }
  .z-risk-card--info {
    color: var(--info, #0ea5e9);
  }

  /* ==========================================================================
     Compact table (Top performers 4 列並列のカード内テーブル)
     ========================================================================== */
  .z-table--compact {
    width: 100%;
    border-collapse: collapse;
  }
  .z-table--compact td {
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-sm);
    border-bottom: 1px solid var(--border-subtle, #e5e7eb);
  }
  .z-table--compact tr:last-child td {
    border-bottom: 0;
  }
  .u-truncate {
    max-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* ==========================================================================
     データ品質スナップショット (dashboard 改善 10 / 2026-05-04)
     ========================================================================== */
  .z-card--data-quality {
    border-left: 3px solid var(--sem-info, #0ea5e9);
  }
  .z-data-quality-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: var(--space-4);
  }
  .z-data-quality-grid__item {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-2) 0;
  }
  .z-data-quality-grid__value {
    font-size: var(--text-xl);
    font-weight: var(--fw-extrabold);
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
  }
  .z-data-quality-grid__pct {
    font-size: var(--text-xs);
    font-weight: var(--fw-semibold);
    color: var(--text-secondary);
    margin-left: var(--space-1);
  }
  .z-data-quality-grid__label {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
  }
  .z-data-quality-grid__bar {
    margin-top: var(--space-1);
    height: 4px;
    background: var(--surface-sunken);
    border-radius: 2px;
    overflow: hidden;
  }
  .z-data-quality-grid__bar-fill {
    height: 100%;
    transition: width 0.4s ease;
  }
  .z-data-quality-grid__bar-fill--positive {
    background: var(--sem-positive, #16a34a);
  }
  .z-data-quality-grid__bar-fill--info {
    background: var(--sem-info, #0ea5e9);
  }
  .z-data-quality-source {
    margin-top: var(--space-3);
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    display: flex;
    align-items: center;
    gap: var(--space-1);
    flex-wrap: wrap;
  }
  .z-data-quality-source a {
    color: var(--brand-primary);
    text-decoration: underline;
  }
}


/* === ./pages/auth.css === */
/* ==========================================================================
   auth.css — auth pages: register, login, delete_account, sessions, contact
   ========================================================================== */

/* account.html */

/* Page container */
.account-page {
  max-width: 640px;
  margin: 0 auto;
}

/* Alert card: success (green left border) */
.z-card--alert-success {
  border-left: 4px solid var(--status-positive);
  margin-bottom: var(--space-4);
}

/* Alert card body (small text, positive color) */
.z-card__body--alert {
  padding: var(--space-3);
  font-size: var(--text-sm);
  color: var(--status-positive);
}

/* Table th: label column width */
.account-th {
  width: 40%;
  white-space: nowrap;
}

/* Inline form (display:inline) */
.form-inline {
  display: inline;
}

/* Subscription plan text */
.account-plan-meta {
  color: var(--text-tertiary);
  font-size: var(--text-sm);
}

/* Subscription note */
.account-sub-note {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  margin-top: var(--space-2);
}

/* Danger zone text */
.account-danger-text {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  margin-bottom: var(--space-3);
}

/* Account section note */
.account-note {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  margin-bottom: var(--space-2);
}

/* Danger button (red text variant) */
.z-btn--danger-text {
  color: var(--status-negative);
}

/* register / login / delete_account / sessions */

/* Page title heading in auth cards */
.z-auth-heading {
  font-size: var(--text-lg);
  font-weight: var(--fw-bold);
  margin-bottom: var(--space-1);
}

/* Sub-text beneath heading (e.g. "7日間の無料トライアル付き") */
.z-auth-subtext {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-bottom: var(--space-4);
}

/* Error / alert card with left accent border */
.z-card--alert-error {
  border-left: 4px solid var(--status-negative);
  margin-bottom: var(--space-4);
}

/* Body inside error alert card */
.z-card__body--alert-error {
  padding: var(--space-3);
  font-size: var(--text-sm);
  color: var(--status-negative);
}

/* Warning card with left accent border */
.z-card--alert-warning {
  border-left: 4px solid var(--status-warning);
  margin-bottom: var(--space-4);
}

/* Body inside warning alert card */
.z-card__body--alert-warning {
  padding: var(--space-3);
  font-size: var(--text-sm);
}

/* Password hint text */
.z-auth-hint {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  margin-top: var(--space-1);
  display: block;
}

/* Terms checkbox label row */
.z-auth-terms-label {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--text-secondary);
  cursor: pointer;
}

/* Terms checkbox itself (prevent shrink) */
.z-auth-terms-check {
  margin-top: 2px;
  flex-shrink: 0;
}

/* Inline term/privacy links */
.z-auth-link {
  color: var(--brand-primary);
}

/* Auth form field: extra bottom margin variant */
.z-form-field--mb4 {
  margin-bottom: var(--space-4);
}

/* Full-width button utility for auth forms */
.z-btn--full {
  width: 100%;
}

/* Footer link in auth card */
.z-auth-footer-link {
  color: var(--brand-primary);
  font-weight: var(--fw-semibold);
}

/* Horizontal rule with vertical spacing */
.z-auth-hr {
  margin: var(--space-4) 0;
}

/* delete_account.html — narrow container */
.z-auth-page--narrow {
  max-width: 480px;
  margin: 0 auto;
}

/* Card with top danger border (delete account) */
.z-card--danger-top {
  border-top: 4px solid var(--status-negative);
}

/* Title with danger color */
.z-card__title--danger {
  color: var(--status-negative);
}

/* Description list text (sm + secondary) */
.z-auth-desc {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-bottom: var(--space-2);
}

/* Warning list */
.z-auth-warn-list {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  padding-left: var(--space-6);
  margin-bottom: var(--space-6);
}

/* Danger submit button (delete account) */
.z-btn--danger-bg {
  background: var(--status-negative);
  border-color: var(--status-negative);
}

/* Card footer: centered link row */
.z-card__footer--center {
  text-align: center;
  padding: var(--space-4);
  border-top: 1px solid var(--border-subtle);
  font-size: var(--text-sm);
}

/* Muted footer link */
.z-auth-footer-link--muted {
  color: var(--text-secondary);
}

/* sessions.html — page wrapper */
.z-sessions-page {
  max-width: 640px;
  margin: 0 auto;
  padding: var(--space-4);
}

/* Sessions page heading */
.z-sessions-heading {
  font-size: var(--text-lg);
  font-weight: var(--fw-bold);
  margin-bottom: var(--space-4);
}

/* Session card spacing */
.z-sessions-card {
  margin-bottom: var(--space-3);
}

/* Session card body layout */
.z-sessions-card-body {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

/* Session browser label */
.z-sessions-agent {
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
}

/* "現在" badge margin */
.z-sessions-badge {
  margin-left: var(--space-1);
}

/* Session meta info (IP / date) */
.z-sessions-meta {
  color: var(--text-tertiary);
  font-size: var(--text-xs);
  margin-top: var(--space-1);
}

/* Revoke button */
.z-btn--danger-text-sm {
  color: var(--status-negative);
}

/* No sessions message */
.z-sessions-empty {
  color: var(--text-secondary);
}

/* Back button with top margin */
.z-sessions-back {
  margin-top: var(--space-4);
}

/* contact.html — page-specific styles */

/* Page wrapper: narrow + centered */
.z-contact-page {
  max-width: 640px;
  margin: 0 auto;
}

/* Required field asterisk */
.z-label-required {
  color: var(--status-negative);
}

/* Success icon */
.z-contact-success-icon {
  font-size: var(--text-5xl);
  color: var(--status-positive);
}

/* Success heading */
.z-contact-success-heading {
  font-size: var(--text-lg);
  font-weight: var(--fw-semibold);
  margin-top: var(--space-4);
}

/* Success body text */
.z-contact-success-body {
  color: var(--text-secondary);
  margin-top: var(--space-2);
}

/* ==========================================================================
   v2 design system: auth + legal + contact (migrated from pages-v2.css)
   ========================================================================== */

@layer pages {
  /* Auth pages: shared layout */
  .z-auth-page {
    max-width: 420px;
    margin: 0 auto;
    padding: var(--space-8) var(--space-4);
  }
  .z-auth-card {
    background: var(--surface-raised);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    overflow: hidden;
  }
  .z-auth-card__body {
    padding: var(--space-6) var(--space-5);
  }
  .z-auth-card__footer {
    text-align: center;
    padding: var(--space-4);
    border-top: 1px solid var(--border-subtle);
    font-size: var(--text-sm);
  }
  .z-auth-logo {
    text-align: center;
    margin-bottom: var(--space-6);
  }

  /* Legal pages: prose formatting */
  .z-legal-content h3 {
    font-size: var(--text-base);
    font-weight: var(--fw-bold);
    margin-top: var(--space-6);
    margin-bottom: var(--space-2);
    color: var(--text-primary);
  }
  .z-legal-content h4 {
    font-size: var(--text-sm);
    font-weight: var(--fw-semibold);
    margin-top: var(--space-4);
    margin-bottom: var(--space-2);
    color: var(--text-primary);
  }
  .z-legal-content p,
  .z-legal-content ul,
  .z-legal-content ol {
    font-size: var(--text-sm);
    line-height: var(--lh-relaxed);
    color: var(--text-secondary);
    margin-bottom: var(--space-3);
  }
  .z-legal-content ul,
  .z-legal-content ol {
    padding-left: var(--space-6);
    list-style: revert;
  }
  .z-legal-content li {
    margin-bottom: var(--space-1);
  }

  /* Contact form */
  .z-form-check {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    font-size: var(--text-sm);
    cursor: pointer;
  }
  .z-form-check input[type="checkbox"] {
    margin-top: 0.2em;
    flex-shrink: 0;
  }
}

/* Legal links below auth card */
.z-auth-legal {
  text-align: center;
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  color: var(--text-tertiary);
}

.z-auth-legal a {
  color: var(--text-tertiary);
}


/* === ./pages/billing.css === */
/* ==========================================================================
   billing.css — billing/pricing.html page-specific styles
   ========================================================================== */

/* Page container */
.pricing-page {
  max-width: 1100px;
  margin: 0 auto;
}

/* Page heading center block */
.pricing-heading {
  text-align: center;
  margin-bottom: var(--space-2);
}

/* Subheading center */
.pricing-subheading {
  text-align: center;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-bottom: var(--space-8);
}

/* Feature comparison section title */
.pricing-comparison-title {
  text-align: center;
  margin-bottom: var(--space-4);
}

/* Disclaimer text */
.pricing-disclaimer {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  text-align: center;
  max-width: 800px;
  margin: 0 auto var(--space-8);
}

/* Card body font-size override for pricing features */
.z-card__body--pricing {
  font-size: var(--text-sm);
}

/* Investor highlighted card: top accent border */
.z-card--top-accent {
  border-top: 4px solid var(--brand-primary);
}

/* Subscribe overlay modal */
.subscribe-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 999;
  background: rgba(0, 0, 0, 0.5);
  align-items: center;
  justify-content: center;
}

/* Subscribe overlay modal: active */
.subscribe-overlay.is-open {
  display: flex;
}

/* Subscribe modal inner card */
.subscribe-modal {
  max-width: 520px;
  width: 90%;
  margin: var(--space-4);
}

/* Subscribe modal confirm buttons row */
.subscribe-modal-actions {
  display: flex;
  gap: var(--space-3);
  justify-content: flex-end;
}

/* Subscribe modal note */
.subscribe-modal-note {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  margin-bottom: var(--space-4);
}

/* Pricing grid: extra bottom margin */
.z-pricing-grid--mb8 {
  margin-bottom: var(--space-8);
}

/* Success page: card body padding */
.billing-success-body {
  padding: var(--space-8) var(--space-6);
}

/* Success page: large check icon */
.billing-success-icon {
  font-size: 64px;
  color: var(--status-positive);
  margin-bottom: var(--space-4);
  display: block;
}

/* ==========================================================================
   v2 design system: pricing/billing z- prefix classes (migrated from pages-v2.css)
   ========================================================================== */

@layer pages {
  /* Pricing page: Mobile-First base grid (1 column on mobile) */
  .z-pricing-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  /* Pricing page: responsive grid */
  @media (min-width: 576px) {
    .z-pricing-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  @media (min-width: 1024px) {
    .z-pricing-grid {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  /* Pricing: highlighted card */
  .z-card--highlighted {
    box-shadow: var(--shadow-md);
  }

  /* Pricing page: card sub-components */
  .z-pricing-header {
    text-align: center;
  }
  .z-pricing-price {
    font-size: var(--text-2xl);
    font-weight: 700;
    margin: var(--space-2) 0;
  }
  .z-pricing-price__period {
    font-size: var(--text-sm);
    font-weight: 400;
    color: var(--text-secondary);
  }
  .z-pricing-annual {
    font-size: var(--text-xs);
    color: var(--text-secondary);
  }
  .z-pricing-features {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .z-pricing-feature {
    margin-bottom: var(--space-1);
  }
  .z-pricing-feature--disabled {
    margin-bottom: var(--space-1);
    color: var(--text-tertiary);
  }
  .z-pricing-footer {
    text-align: center;
    padding: var(--space-4);
    border-top: 1px solid var(--border-subtle);
  }
  .z-pricing-btn {
    width: 100%;
  }

  /* Pricing: feature comparison table */
  .z-pricing-comparison th:first-child { text-align: left; }
  .z-pricing-comparison th:not(:first-child),
  .z-pricing-comparison td:not(:first-child) { text-align: center; }
}


/* === ./pages/articles.css === */
/* ==========================================================================
   articles.css — article_detail.html page-specific styles
   ========================================================================== */

@layer pages {

/* Page container */
.article-page {
  max-width: 800px;
  margin: 0 auto;
}

/* Article header time element */
.article-time {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
}

/* Article updated badge */
.article-updated {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

/* Read time indicator */
.article-readtime {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

/* Article title h1 */
.article-title {
  font-size: var(--text-2xl);
  font-weight: var(--fw-bold);
  line-height: 1.4;
  margin: 0;
}

/* Article summary paragraph */
.article-summary {
  font-size: var(--text-base);
  color: var(--text-secondary);
  margin-top: var(--space-3);
  line-height: 1.7;
}

/* Article separator hr */
.article-hr {
  border: none;
  border-top: 1px solid var(--border-default);
}

/* Article disclaimer */
.article-disclaimer {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  margin-bottom: var(--space-6);
}

/* Related articles section heading */
.article-related-heading {
  font-size: var(--text-lg);
  font-weight: var(--fw-semibold);
  margin: 0 0 var(--space-4) 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* Related article card body inner */
.article-related-body {
  padding: var(--space-3) var(--space-4);
}

/* Related article date */
.article-related-date {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

/* Related article title */
.article-related-title {
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  margin: 0;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* CTA card body (flex, space-between) */
.article-cta-body {
  padding: var(--space-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* CTA label text */
.article-cta-label {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

}


/* === ./pages/themes.css === */
/* ==========================================================================
   themes.css — themes.html and theme_detail.html page-specific styles
   ========================================================================== */

@layer pages {

/* themes.html */

/* Theme group section heading */
.theme-group-heading {
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 2px solid var(--border-subtle);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* Theme card body inner padding */
.theme-card-body {
  padding: var(--space-4);
}

/* Theme icon + name row */
.theme-card-header {
  margin-bottom: var(--space-3);
}

/* Theme card icon */
.theme-card-icon {
  font-size: var(--text-xl);
  flex-shrink: 0;
}

/* Theme card name */
.theme-card-name {
  margin: 0;
  font-size: var(--text-base);
  font-weight: var(--fw-semibold);
}

/* Theme stat block */
.theme-stat-value {
  font-size: var(--text-base);
  font-weight: var(--fw-bold);
}

/* Theme stat label */
.theme-stat-label {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

/* theme_detail.html */

/* Back button: inline-flex */
.theme-back-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

/* Pagination nav */
.theme-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-6) 0;
}

/* Pagination info text */
.theme-pagination__info {
  color: var(--text-tertiary);
  font-size: var(--text-sm);
}

/* Sector badge wrapper in theme_detail */
.theme-sector-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* Relevance filter row */
.theme-filter-row {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* Company name cell with biz summary */
.theme-company-name {
  max-width: 240px;
  white-space: normal;
}

/* Biz summary sub-text */
.theme-biz-summary {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  line-height: 1.4;
  margin-top: 2px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Table cell: market/sector (xs text) */
.theme-cell-xs {
  font-size: var(--text-xs);
}

/* Keyword overflow count */
.theme-kw-overflow {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

/* Sort link: no decoration, inherit color */
.theme-sort-link {
  text-decoration: none;
  color: inherit;
}

/* Empty state: friendly placeholder when theme classification is not ready */
.themes-empty__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-8) var(--space-4);
  gap: var(--space-3);
}
.themes-empty__icon {
  color: var(--brand-primary);
  opacity: 0.6;
}
.themes-empty__title {
  font-size: var(--text-lg);
  font-weight: var(--fw-semibold);
  margin: 0;
  color: var(--text-primary);
}
.themes-empty__desc {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
  max-width: 480px;
}
.themes-empty__actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  justify-content: center;
  margin-top: var(--space-2);
}

}

/* Unlayered: override Material Symbols sizing for themes empty state icon.
   The global `.material-symbols-outlined` rule is also unlayered (bundle-v2.css
   tail), so we must match it at the same cascade origin to win. */
.themes-empty__body .themes-empty__icon.material-symbols-outlined {
  font-size: 56px;
  width: 56px;
  height: 56px;
  max-width: 56px;
  min-width: 56px;
}



/* === ./responsive.css === */
/* ==========================================================================
   responsive.css — Unified responsive breakpoints (Mobile-First)
   ==========================================================================
   Breakpoints (tokens.css --bp-* に統一):
     sm:  640px  (min-width)
     md:  768px  (min-width)
     lg: 1024px  (min-width)
     xl: 1280px  (min-width)
   ========================================================================== */

@layer pages {

/* ------------------------------------------------------------------
   1. Base (mobile-first defaults)
   ------------------------------------------------------------------ */

/* kpi.html — stacked on mobile */
.kpi-group-body {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}

/* metric guide grid — 2 columns on mobile */
.metric-guide .guide-grid,
.guide-grid { grid-template-columns: repeat(2, 1fr); }

/* screening.html — single column on mobile */
.screening-layout { grid-template-columns: 1fr; }
.filter-panel { position: static; max-height: none; }

/* tab_soundness.html */
.soundness-analysis .class-cards { grid-template-columns: 1fr; }
.soundness-analysis .chart-grid { grid-template-columns: 1fr; }
.soundness-analysis .ranking-section { grid-template-columns: 1fr; }
.soundness-analysis .hero-stats { flex-direction: column; }
.soundness-analysis .filter-bar { flex-direction: column; align-items: stretch; }
.soundness-analysis .filter-tags { margin-left: 0; margin-top: 1rem; }

/* market.html */
.market-page .chart-grid { grid-template-columns: 1fr; }

/* changes.html, compare.html */
.layout-2col { grid-template-columns: 1fr; }
.compare-search-grid { flex-direction: column; align-items: stretch; }
.compare-slot { max-width: 100%; }
.compare-vs { display: none; }
.compare-submit-btn { width: 100%; }

/* summary.html */
.analysis-grid { grid-template-columns: 1fr; }

/* valuation_map.html */
.zone-grid { grid-template-columns: 1fr; }

/* cashflow.html */
.cf-summary-grid { grid-template-columns: repeat(2, 1fr); }
.cf-summary-card .card-value { font-size: var(--text-xl); }

/* chart-grid — stacked on mobile */
.chart-grid { grid-template-columns: 1fr; }

/* sector.html */
.sector-page .hero-stats { flex-direction: column; }
#sector-bar-chart { min-height: 350px; }

/* technical.html */
.technical-page .hero-stats { flex-direction: column; }
.dist-chart { height: 240px; }

/* tab_growth.html */
.growth-hero { padding: 1.5rem; }
.growth-hero h1 { font-size: var(--text-2xl); }
.growth-analysis .hero-stats { flex-direction: column; }
#growth-scatter.scatter-chart-area { height: 350px; }

/* tab_valuation.html */
.valuation-hero { padding: 1.5rem; }
.valuation-hero h1 { font-size: var(--text-2xl); }
.valuation-analysis .hero-stats { flex-direction: column; }
#scatter-chart { height: 350px; }

/* ------------------------------------------------------------------
   2. min-width: 576px (sm and up)
   ------------------------------------------------------------------ */
@media (min-width: 576px) { /* legacy breakpoint, between --bp-xs(480) and --bp-sm(640) */
  .soundness-analysis .class-cards { grid-template-columns: repeat(2, 1fr); }
  .cookie-consent-inner { flex-direction: row; text-align: left; }
  .cookie-consent-actions { justify-content: flex-end; width: auto; }
}

/* ------------------------------------------------------------------
   3. min-width: 768px (md and up)
   ------------------------------------------------------------------ */
@media (min-width: 768px) {
  /* kpi.html — 2-column KPI grid */
  .kpi-group-body { grid-template-columns: repeat(2, 1fr); }
  .kpi-group-body .kpi-item { margin-bottom: 0; }

  /* metric guide grid — 4 columns on tablet+ */
  .metric-guide .guide-grid,
  .guide-grid { grid-template-columns: repeat(4, 1fr); }

  /* sector / technical: hero-stats horizontal */
  .sector-page .hero-stats { flex-direction: row; }
  .technical-page .hero-stats { flex-direction: row; }

  /* growth / valuation: hero-stats horizontal */
  .growth-hero { padding: 2rem; }
  .growth-hero h1 { font-size: 2rem; }
  .growth-analysis .hero-stats { flex-direction: row; }
  .valuation-hero { padding: 2rem; }
  .valuation-hero h1 { font-size: 2rem; }
  .valuation-analysis .hero-stats { flex-direction: row; }

  /* soundness: hero-stats horizontal */
  .soundness-analysis .hero-stats { flex-direction: row; }
  .soundness-analysis .filter-bar { flex-direction: row; align-items: center; }
  .soundness-analysis .filter-tags { margin-left: 0; margin-top: 0; }
}

/* ------------------------------------------------------------------
   4. min-width: 1024px (lg and up)
   ------------------------------------------------------------------ */
@media (min-width: 1024px) {
  /* kpi.html — 3-column KPI grid on wide screens */
  .kpi-group-body { grid-template-columns: repeat(3, 1fr); }

  /* screening.html — 2-column layout: filter panel + results */
  .screening-layout { grid-template-columns: 280px 1fr; }
  .filter-panel { position: sticky; max-height: calc(100vh - var(--topnav-height, 56px) - var(--space-6)); overflow-y: auto; }

  /* soundness */
  .soundness-analysis .class-cards { grid-template-columns: repeat(3, 1fr); }
  .soundness-analysis .chart-grid { grid-template-columns: repeat(2, 1fr); }
  .soundness-analysis .ranking-section { grid-template-columns: repeat(2, 1fr); }

  /* market.html */
  .market-page .chart-grid { grid-template-columns: repeat(2, 1fr); }

  /* changes.html, compare.html */
  .layout-2col { grid-template-columns: repeat(2, 1fr); }
  .compare-search-grid { flex-direction: row; align-items: flex-start; }
  .compare-vs { display: block; }
  .compare-submit-btn { width: auto; }

  /* summary.html */
  .analysis-grid { grid-template-columns: repeat(2, 1fr); }

  /* valuation_map.html */
  .zone-grid { grid-template-columns: repeat(2, 1fr); }

  /* chart-grid */
  .chart-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ------------------------------------------------------------------
   5. Delisted company styles (non-responsive)
   ------------------------------------------------------------------ */
.search-item-delisted {
  opacity: 0.6;
}
.search-item-delisted-label {
  display: inline-block;
  font-size: var(--text-xs);    /* Issue #129: 0.65rem → 0.75rem */
  color: var(--color-negative);
  background: rgba(239,68,68,0.08);
  border: 1px solid rgba(239,68,68,0.3);
  border-radius: var(--radius-xs);
  padding: 0 0.25rem;
  margin-left: 0.35rem;
  vertical-align: middle;
  line-height: 1.4;
}
.company-delisted-badge {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-inverse);
  background: var(--color-negative);
  border-radius: var(--radius-sm);
  padding: 0.15rem 0.5rem;
  margin-left: 0.5rem;
  vertical-align: middle;
  line-height: 1.4;
}

/* ------------------------------------------------------------------
   6. Print
   ------------------------------------------------------------------ */
@media print {
  /* ---- Color Preservation ---- */
  .page-header,
  .page-header--home,
  .tab-header,
  .ranking-card-header {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .page-header--home {
    background: var(--brand-primary) !important;
  }

  /* ---- Hide Non-essential UI ---- */
  /* v2 classes */
  .z-sidenav,
  .z-sidenav-overlay,
  .z-topnav,
  .z-mobile-nav,
  .z-scroll-top,
  .z-skip-link,
  /* v1 classes (legacy compatibility) */
  #sidebar,
  .sidebar-overlay,
  .mobile-menu-toggle,
  .sidebar-search,
  .search-dropdown,
  .hero-search,
  .skip-link {
    display: none !important;
  }

  /* ---- Main Content: Full Width ---- */
  /* v2 classes */
  .z-content,
  /* v1 classes (legacy compatibility) */
  .main-content {
    margin-left: 0 !important;
    padding: 0 !important;
    width: 100% !important;
  }

  /* ---- Footer Simplification ---- */
  /* v2 classes */
  .z-footer,
  /* v1 classes (legacy compatibility) */
  .site-footer {
    border-top: 1px solid var(--border-default);
    padding: 0.5rem 0;
    font-size: var(--text-xs);
  }

  .z-footer__sources,
  .z-footer__disclaimer,
  .site-footer .footer-sources,
  .site-footer .footer-disclaimer {
    display: none;
  }

  /* ---- Chart Areas: Prevent Page Breaks ---- */
  .chart-card,
  .u-chart-card,
  .heatmap-card,
  .ranking-card {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* ---- Table Rows: Prevent Orphans ---- */
  .ranking-item,
  tr {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* ---- Links: Show URL ---- */
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: var(--text-xs);
    color: var(--text-tertiary);
  }

  /* ---- Company Tabs: Hide Inactive ---- */
  .nav-tabs .nav-link:not(.active) {
    display: none;
  }

  /* ---- Remove Animations ---- */
  * {
    animation: none !important;
    transition: none !important;
  }

  /* ---- Remove Shadows and Box-shadows ---- */
  .u-card,
  .chart-card,
  .ranking-card,
  .market-card {
    box-shadow: none !important;
    border: 1px solid var(--border-default) !important;
  }
}

/* Cookie consent banner mobile layout — base already stacked above */
@media (min-width: 576px) { /* legacy breakpoint, between --bp-xs(480) and --bp-sm(640) */
  /* already handled in section 2 above */
}

} /* end @layer pages */


/* === ./utilities-v2.css === */
/* Utility classes — whitelist only */
@layer utilities {
.u-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.u-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.u-text-center { text-align: center; }
.u-text-right { text-align: right; }
.u-flex { display: flex; min-width: 0; } /* min-width: 0 prevents flex from expanding grid */
.u-flex-col { display: flex; flex-direction: column; }
.u-flex-center { display: flex; align-items: center; justify-content: center; }
.u-items-center { align-items: center; }
.u-justify-between { justify-content: space-between; }
.u-gap-1 { gap: var(--space-1); }
.u-gap-2 { gap: var(--space-2); }
.u-gap-3 { gap: var(--space-3); }
.u-gap-4 { gap: var(--space-4); }
.u-gap-6 { gap: var(--space-6); }
.u-mt-2 { margin-top: var(--space-2); }
.u-mt-4 { margin-top: var(--space-4); }
.u-mt-6 { margin-top: var(--space-6); }
.u-mb-2 { margin-bottom: var(--space-2); }
.u-mb-4 { margin-bottom: var(--space-4); }
.u-mb-6 { margin-bottom: var(--space-6); }
.u-hidden { display: none; }
.u-wrap { flex-wrap: wrap; }
.u-items-start { align-items: flex-start; }
.u-items-end { align-items: flex-end; }
.u-justify-center { justify-content: center; }
.u-ml-auto { margin-left: auto; }
.u-ml-2 { margin-left: var(--space-2); }
.u-flex-1 { flex: 1; }
.u-gap-0 { gap: 0; }
.u-p-0 { padding: 0; }
.u-m-0 { margin: 0; }
.u-empty-state {
  text-align: center;
  padding: var(--space-12);
  color: var(--text-tertiary);
}
.u-text-muted-xs {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

/* Semantic color utilities */
.u-text-positive { color: var(--sem-positive); }
.u-text-negative { color: var(--sem-negative); }
.u-text-warning  { color: var(--sem-warning); }
.u-text-info     { color: var(--sem-info); }
.u-text-excellent { color: var(--excellent); }
.u-text-secondary { color: var(--text-secondary); }
.u-text-tertiary  { color: var(--text-tertiary); }
.u-text-primary-brand { color: var(--brand-primary); }
/* Chart color token aliases */
.u-text-color-primary  { color: var(--color-primary); }
.u-text-color-warning  { color: var(--color-warning); }

/* Font size utilities */
.u-text-xs  { font-size: var(--text-xs); }
.u-text-sm  { font-size: var(--text-sm); }
.u-text-lg  { font-size: var(--text-lg); }
.u-text-xl  { font-size: var(--text-xl); }
.u-text-2xl { font-size: var(--text-2xl); }

/* Font weight utilities */
.u-fw-semibold { font-weight: var(--fw-semibold); }
.u-fw-bold     { font-weight: var(--fw-bold); }
.u-fw-medium   { font-weight: var(--fw-medium); }
.u-fw-normal   { font-weight: normal; }

/* Whitespace utilities */
.u-nowrap { white-space: nowrap; }

/* Overflow truncation with max-width (use alongside u-truncate) */
.u-max-w-160 { max-width: 160px; }
.u-max-w-80  { max-width: 80px; }

/* Vertical align */
.u-va-middle { vertical-align: middle; }
.u-mr-1 { margin-right: 4px; }

/* Min-width helpers for table rank cells */
.u-min-w-28 { min-width: 28px; }
.u-min-w-32 { min-width: 32px; }

/* Margin helpers */
.u-mb-1 { margin-bottom: var(--space-1); }
.u-mb-3 { margin-bottom: var(--space-3); }
.u-mt-3 { margin-top: var(--space-3); }
.u-p-2  { padding: var(--space-2); }
.u-p-3  { padding: var(--space-3); }
.u-p-4  { padding: var(--space-4); }
.u-w-full { width: 100%; }
.u-border-b { border-bottom: 1px solid var(--border-subtle); }
.u-border-top { border-top: 2px solid var(--border-default); }
.u-pt-2 { padding-top: var(--space-2); }
.u-pt-3 { padding-top: var(--space-3); }

/* Text utilities (additional) */
.u-text-base { font-size: var(--text-base); }
.u-text-primary { color: var(--text-primary); }
.u-text-inverse { color: var(--text-inverse); }

/* Layout helpers */
.u-grid-2 { display: grid; grid-template-columns: 1fr 1fr; }
.u-max-content { min-width: max-content; }
.u-flex-wrap { flex-wrap: wrap; }
.u-cursor-pointer { cursor: pointer; }
.u-sticky-header { position: sticky; top: 0; z-index: 1; background: var(--surface-raised); }
.u-overflow-auto { overflow-y: auto; }
.u-br-md { border-radius: var(--radius-md); }
.u-bg-sunken { background: var(--surface-sunken); }

/* Signal badge: positive/negative semantic with hardcoded fallback for signal branding */
.u-ml-1 { margin-left: var(--space-1); }

/* Grid column full span */
.u-col-full { grid-column: 1 / -1; }

/* Overflow */
.u-overflow-x-auto { overflow-x: auto; }

/* Padding-top zero */
.u-pt-0 { padding-top: 0; }

/* Danger color (maps to --danger / sem-negative) */
.u-text-danger { color: var(--danger, #ef4444); }

/* Margin right helpers */
.u-mr-2 { margin-right: var(--space-2); }

/* Font size base */
.u-text-sm-secondary {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

/* Table link sub (company name below code) */
.u-link-sub {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  margin-left: var(--space-2);
  text-decoration: none;
}

/* Table actions footer (margin-top + right-align) */
.u-table-action-footer {
  margin-top: var(--space-3);
  text-align: right;
}

/* Text decoration */
.u-no-underline { text-decoration: none; }

/* Display: inline-flex */
.u-inline-flex { display: inline-flex; }

/* Margin-bottom: 0 */
.u-mb-0 { margin-bottom: 0; }

/* Padding-bottom: 2 */
.u-pb-2 { padding-bottom: var(--space-2); }
}

/* mobile-overrides.css は HTML <link> で直接読込（@layer 外で確実に適用するため） */

/* === ./a11y-v2.css === */
/* Accessibility — WCAG 2.1 AA
   v2: z-prefixed classes (design token ベース)
   統合: a11y.css (legacy) の固有ルールを収録
   =================================================== */
@layer a11y {

/* ---- Skip Link (v2 — base.html 使用) ---- */
.z-skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  z-index: var(--z-toast);
  padding: var(--space-2) var(--space-4);
  background: var(--brand-primary);
  color: var(--text-inverse);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
}
.z-skip-link:focus { top: var(--space-2); }

/* ---- Skip Link (legacy — _skip_link.html 使用) ---- */
.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  z-index: var(--z-toast);
  padding: 0.75rem 1.5rem;
  background: var(--brand-primary);
  color: var(--text-inverse);
  font-weight: 700;
  font-size: var(--text-sm);
  border-radius: 0 0 var(--radius-sm, 4px) var(--radius-sm, 4px);
  text-decoration: none;
  transition: top var(--transition-fast);
}
.skip-link:focus {
  top: 0;
  outline: 2px solid var(--focus-ring-color, #0d9488);
  outline-offset: 2px;
}

/* ---- Screen Reader Only (v1 — 多数テンプレートで使用) ---- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---- Screen Reader Only (v2) ---- */
.z-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---- Live region (v1) ---- */
.live-region {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---- Live region (v2) ---- */
.z-live-region {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* ---- Focus visible override ---- */
:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}
:focus:not(:focus-visible) { outline: none; }

/* ---- Forced Colors (Windows High Contrast) ---- */
@media (forced-colors: active) {
  .skip-link,
  .z-skip-link {
    border: 2px solid ButtonText;
  }

  :focus-visible {
    outline: 2px solid Highlight;
  }

  .sidebar-link.active {
    border: 2px solid Highlight;
  }
}

/* ---- Toast Notification (a11y feedback) ---- */
.a11y-toast {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%) translateY(0.5rem);
  background: var(--text-primary);
  color: var(--text-inverse);
  font-size: var(--text-sm);
  padding: 0.5rem 1.25rem;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  opacity: 0;
  transition: opacity var(--transition-normal), transform var(--transition-normal);
  z-index: var(--z-toast);
  pointer-events: none;
}
.a11y-toast--visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.a11y-toast--warning { background: var(--sem-warning, #d97706); color: #fff; }
.a11y-toast--error   { background: var(--sem-negative, #dc2626); color: #fff; }

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .a11y-toast { transition: none; }
  .z-skeleton { animation: none; background: var(--border-default); }
}

/* ---- Touch Target Minimum ---- */
.touch-target-min {
  min-width: 44px;
  min-height: 44px;
}

/* ---- High-Contrast Text Utilities ---- */
/* --gray-500 (#64748b) on white = 4.44:1 — passes AA */
.text-meta {
  color: var(--text-tertiary);
}

/* ---- Table scope visual helper ---- */
th[scope] {
  text-align: inherit;
}

}


/* Alpine.js x-cloak: hide until initialized */
[x-cloak] { display: none !important; }

/* Material Symbols: critical sizing (outside @layer to override CDN CSS)
   IMPORTANT: In base_v2.html, the CDN CSS must load BEFORE bundle-v2.css
   so these unlayered rules win the cascade. If the order is reversed,
   CDN's default sizing overrides these constraints and icons render as text. */
.material-symbols-outlined {
  width: 20px;
  min-width: 20px;
  max-width: 20px;
  height: 20px;
  overflow: hidden;
  font-size: 20px;
}
.z-bottomnav .material-symbols-outlined {
  width: 24px;
  min-width: 24px;
  max-width: 24px;
  height: 24px;
  font-size: 24px;
}

/* ---- Global htmx Loading Indicator ---- */
.z-loading-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 3px;
  background: var(--brand-primary);
  z-index: var(--z-toast);
  opacity: 0;
  transition: opacity var(--duration-fast);
  pointer-events: none;
}
.z-loading-bar--active {
  opacity: 1;
  animation: z-loading-bar-fill 1.5s ease-out forwards;
}
@keyframes z-loading-bar-fill {
  0%   { width: 0%; }
  30%  { width: 40%; }
  60%  { width: 70%; }
  85%  { width: 90%; }
  100% { width: 100%; }
}

.z-loading-bar--error {
  opacity: 1;
  width: 100%;
  background: var(--sem-negative, #dc2626);
  animation: none;
  transition: opacity 0.5s 2.5s;
}

/* --- htmx inline loading spinner --- */
.z-htmx-indicator {
  display: none;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-4);
  color: var(--text-tertiary);
  font-size: var(--text-sm);
}
.z-htmx-indicator::before {
  content: '';
  width: 1rem;
  height: 1rem;
  border: 2px solid var(--border-default);
  border-top-color: var(--brand-primary);
  border-radius: 50%;
  animation: z-spinner 0.6s linear infinite;
}
.htmx-request .z-htmx-indicator,
.htmx-request.z-htmx-indicator { display: flex; }
@keyframes z-spinner {
  to { transform: rotate(360deg); }
}