/* =========================================================
   EXACT LINEAR @FONT-FACE DECLARATIONS
   ========================================================= */

@font-face {
  font-family: 'Inter Variable';
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  src: url('/assets/InterVariable-DiVDrmQJ.woff2') format('woff2');
  unicode-range: U+0-2B1B, U+2B1D-10FFFF;
}

@font-face {
  font-family: 'Inter Variable';
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
  src: url('/assets/InterVariable-Italic-FCBEiFp6.woff2') format('woff2');
  unicode-range: U+0-2B1B, U+2B1D-10FFFF;
}

@font-face {
  font-family: 'Berkeley Mono';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/Berkeley-Mono-Variable-D6o35ndE.woff2') format('woff2');
}

@font-face {
  font-family: 'Linear Thai';
  font-weight: 450;
  font-display: swap;
  font-style: normal;
  src: local(Thonburi), local(Thonburi-Regular), local(Sukhumvit Set), local(Tahoma), local(Garuda), local(Noto Sans Thai);
  unicode-range: U+E00-E7F;
}

:root {
  --font-monospace: "Berkeley Mono", "SFMono Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
  --font-regular: "Inter Variable", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Linear Thai", sans-serif;

  --speed-highlightFadeIn: 0s;
  --speed-highlightFadeOut: 0.15s;
  --speed-quickTransition: 0.1s;
  --speed-regularTransition: 0.25s;
  --ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);

  --sidebar-width: 244px;
  --header-height: 44px;
  --canvas-border-radius: 12px;
  --facet-sidebar-width: 320px;
  --facet-sidebar-padding: 12px;
  --facet-sidebar-gap: 8px;
  --facet-row-height: 42px;
  --facet-font-size: 13px;
  --facet-empty-padding: 24px;
  --control-border-radius: 8px;

  /* Statistics overview: restored individual metric cards. */
  --statistics-metric-height: 136px;
  --statistics-metric-font-size: 26px;
  --statistics-metric-mobile-font-size: 20px;
  --statistics-filter-width: 248px;
  --statistics-pace-track-height: 3px;
  --statistics-pace-track-width: 44px;

  /* Typography Weights & Settings */
  --font-weight-normal: 450;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Exact Linear Dark Theme Colors */
  --bg-window: lch(2.595% 0.4 272 / 1);         /* #09090a - Window Backdrop & Sidebar */
  --bg-sidebar: lch(2.595% 0.4 272 / 1);        /* #09090a */
  --bg-canvas: lch(5.52% 0.4 272 / 1);          /* #111212 - Floating Inset Canvas */
  --color-border-primary: lch(9.84% 1.48 272 / 1); /* #1a1b1d - Canvas Border & Dividers */
  --color-border-secondary: lch(14.16% 1.48 272 / 1);
  --color-border-tertiary: lch(16.32% 1.48 272 / 1);

  /* Resizer Highlights */
  --resizer-line-color: lch(100% 0 272 / 0.72);

  /* Typography Colors */
  --text-primary: lch(100% 0 272 / 1);
  --text-secondary: lch(90.155% 1.2 272 / 1);
  --text-tertiary: lch(64.714% 1.425 272 / 1);
  --text-muted: lch(41.778% 1.425 272 / 1);

  /* Shadows */
  --canvas-shadow: 0px 0.5px 1px 1px lch(0% 0 0 / 0.3);
  --dropdown-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.125), 0px 2px 5px 0px rgba(0, 0, 0, 0.125), 0px 1px 1px 0px rgba(0, 0, 0, 0.125);
  --dialog-elevation-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 6px 24px rgba(0, 0, 0, 0.12), 0 12px 48px rgba(0, 0, 0, 0.18);

  /* Scrollbars */
  --scrollbar-width: 10px;
  --scrollbar-min-size: 32px;
  --app-scrollbar-bg: lch(37.275% 1.2 272 / 1);
  --app-scrollbar-bg-hover: lch(37.375% 1.2 272 / 1);
  --app-scrollbar-bg-active: lch(36.975% 1.2 272 / 1);

  /* Semantic UI Tokens (Dark Default) */
  --item-hover-bg: lch(8.445% 1.3 272 / 1);
  --data-row-hover-bg: var(--item-hover-bg);
  --item-active-bg: lch(13.845% 1.3 272 / 1);
  --row-selected-bg: rgba(234, 179, 8, 0.08);
  --tab-active-bg: lch(16.706% 0.979 272 / 1);
  --tab-inactive-bg: transparent;
  --sidebar-card-border: var(--card-border);
  --sidebar-tab-active-bg: var(--tab-active-bg);
  --sidebar-tab-hover-bg: var(--item-hover-bg);
  --sidebar-tab-inactive-bg: var(--card-bg);
  --sidebar-tab-active-text: var(--text-primary);
  --sidebar-tab-hover-text: var(--text-secondary);
  --sidebar-tab-inactive-text: var(--text-tertiary);
  --sidebar-tab-active-shadow: 0 0 0 1px lch(100% 0 272 / 0.16);
  --sidebar-tab-inactive-shadow: 0 0 0 1px lch(100% 0 272 / 0.1);
  --sidebar-tab-hover-shadow: 0 0 0 1px lch(100% 0 272 / 0.16);
  --card-bg: lch(9.232% 0.85 272 / 1);
  --card-border: lch(13.553% 1.93 272 / 1);
  --dock-bg: lch(9.232% 0.85 272 / 1);
  --dock-btn-bg: lch(13.861% 1.139 272 / 1);
  --checkbox-border-rest: lch(48.72% 1.48 272 / 1);
  --toggle-unchecked-bg: lch(47.551% 0.913 272 / 1);
  --focus-ring-color: #6d78d5;
  --action-primary: #5e6ad2;
  --action-primary-hover: #6875e5;

  /* Add Filter command menu */
  --filter-menu-border: var(--color-border-secondary);
  --filter-menu-divider: var(--color-border-secondary);
  --filter-menu-text: var(--text-secondary);
  --filter-menu-text-active: var(--text-primary);
  --filter-menu-muted: var(--text-tertiary);
  --filter-menu-highlight: var(--item-hover-bg);
  --filter-checkbox-border: lch(54.1% 0 272 / 1);
  --filter-checkbox-selected: #5e6ad2;
  --filter-trigger-bg: transparent;
  --filter-trigger-active-bg: var(--tab-active-bg);
  --filter-menu-shadow: var(--dropdown-shadow);
  --filter-menu-strong-shadow: 0px 9px 48px lch(0% 0 0 / 0.28), 0px 6px 24px lch(0% 0 0 / 0.24), 0px 1px 1px lch(0% 0 0 / 0.3);

  /* Rules list: semantic surfaces shared by list, groups and property badges. */
  --rules-group-bg: lch(9.232% 0.85 272 / 1);
  --rules-group-hover-bg: lch(13.845% 1.3 272 / 1);
  --rules-row-hover-bg: lch(8.445% 1.3 272 / 1);
  --rules-row-focus-bg: lch(11.033% 1.3 272 / 1);
  --rules-property-bg: rgba(255, 255, 255, 0.06);
  --rules-property-border: rgba(255, 255, 255, 0.08);
  --rules-property-text: lch(85% 1.2 272 / 1);
  --rules-scope-bg: rgba(255, 255, 255, 0.04);
  --rules-scope-text: lch(68% 1.2 272 / 1);
  --rules-action-stop-bg: rgba(239, 68, 68, 0.14);
  --rules-action-stop-border: rgba(239, 68, 68, 0.25);
  --rules-action-stop-text: #f87171;
  --rules-action-positive-bg: rgba(16, 185, 129, 0.14);
  --rules-action-positive-border: rgba(16, 185, 129, 0.25);
  --rules-action-positive-text: #34d399;
  --rules-action-default-bg: rgba(59, 130, 246, 0.14);
  --rules-action-default-border: rgba(59, 130, 246, 0.25);
  --rules-action-default-text: #60a5fa;

  /* Statistics decision states. Color repeats a label that is always written out. */
  --statistics-state-on-target: #34d399;
  --statistics-state-watch: #fbbf24;
  --statistics-state-attention: #f87171;
  --statistics-state-unknown: var(--text-tertiary);
  --statistics-primary-card-border: lch(20.032% 1.93 272 / 1);
  --statistics-pace-track: lch(13.845% 1.3 272 / 1);
  --statistics-pace-fill: var(--text-tertiary);
  --statistics-diagnostics-bg: lch(7.32% 0.85 272 / 1);
  /* Trend: one series, stepped for this surface and checked against the
     lightness band, chroma floor and 3:1 contrast. Never a status color —
     those are reserved for decisions and must not mark a mere line. */
  --statistics-trend-line: #7b86e2;
  --statistics-trend-muted: var(--text-tertiary);

  /* Preferences Specific Tokens (Dark default) */
  --preferences-card-bg: lch(9.232% 0.85 272 / 1);
  --preferences-control-bg: lch(13.861% 1.139 272 / 1);
  --preferences-control-hover: #2b2c2e;
  --preferences-active-bg: lch(13.845% 1.3 272 / 1);
  --preferences-search-bg: lch(7.32% 0.85 272 / 1);
  --preferences-search-border: lch(14.16% 1.48 272 / 1);
  --preferences-menu-bg: lch(11.5% 1.1 272 / 1);
  --preferences-menu-border: lch(20.032% 1.93 272 / 1);
  --preferences-menu-hover: lch(18% 1.2 272 / 1);
  --preferences-accent: #5e69d1;
}

html[data-theme='light'] {
  color-scheme: light;

  /* Linear Light Theme Colors */
  --bg-window: lch(94.44% 0.5 282 / 1);           /* #eeeef0 - Window Backdrop & Sidebar */
  --bg-sidebar: lch(94.44% 0.5 282 / 1);          /* #eeeef0 */
  --bg-canvas: lch(97.94% 0.5 282 / 1);           /* #f9f8fb - Floating Inset Canvas */
  --color-border-primary: lch(95.24% 0 282 / 1);  /* #f1f0f0 - Canvas Border & Divider */
  --color-border-secondary: lch(88.49% 0 282 / 1);/* #dedfdf */
  --color-border-tertiary: lch(84.44% 0 282 / 1); /* #d3d3d3 */

  /* Resizer Highlights */
  --resizer-line-color: lch(0% 0 0 / 0.15);

  /* Typography Colors */
  --text-primary: lch(9.794% 0 282 / 1);          /* #1a1b1a */
  --text-secondary: lch(19.588% 1.25 282 / 1);    /* #2f2f31 */
  --text-tertiary: lch(39.176% 1.25 282 / 1);     /* #5d5d5e */
  --text-muted: lch(64.64% 1.25 282 / 1);         /* #9d9d9e */

  /* Shadows */
  --canvas-shadow: 0px 3px 6px -2px rgba(0, 0, 0, 0.02), 0px 1px 1px 0px rgba(0, 0, 0, 0.04);
  --dropdown-shadow: 0px 6px 18px 0px rgba(0, 0, 0, 0.02), 0px 3px 9px 0px rgba(0, 0, 0, 0.04), 0px 1px 1px 0px rgba(0, 0, 0, 0.04);

  /* Scrollbars */
  --app-scrollbar-bg: lch(64.94% 1.25 282 / 1);
  --app-scrollbar-bg-hover: lch(65.44% 1.25 282 / 1);
  --app-scrollbar-bg-active: lch(64.64% 1.25 282 / 1);

  /* Semantic UI Tokens (Light) */
  --item-hover-bg: lch(89.54% 0.5 282 / 1);       /* #e1e1e2 */
  --data-row-hover-bg: lch(94.44% 0.5 282 / 1);   /* Linear data-row hover */
  --item-active-bg: lch(89.54% 0.5 282 / 1);      /* #e1e1e2 */
  --row-selected-bg: rgba(234, 179, 8, 0.09);
  --tab-active-bg: lch(93.483% 0.5 282 / 1);      /* #eeeef0 */
  --tab-inactive-bg: transparent;
  --sidebar-card-border: lch(97.3% 0 282 / 1);
  --sidebar-tab-active-bg: lch(95.543% 0 282 / 1);
  --sidebar-tab-hover-bg: lch(96.914% 0 282 / 1);
  --sidebar-tab-inactive-bg: lch(100% 0 282 / 1);
  --sidebar-tab-active-text: lch(10% 0 282 / 1);
  --sidebar-tab-hover-text: lch(20% 1 282 / 1);
  --sidebar-tab-inactive-text: lch(40% 1 282 / 1);
  --sidebar-tab-active-shadow: 0 0 0 1px lch(0% 0 0 / 0.147), 0 0 0 0 transparent;
  --sidebar-tab-inactive-shadow: 0 0 0 1px lch(0% 0 0 / 0.103), 0 3px 6px -2px lch(0% 0 0 / 0.02), 0 1px 1px lch(0% 0 0 / 0.04);
  --sidebar-tab-hover-shadow: 0 0 0 1px lch(0% 0 0 / 0.147), 0 3px 6px -2px lch(0% 0 0 / 0.02), 0 1px 1px lch(0% 0 0 / 0.04);
  --card-bg: lch(100% 0 282 / 1);                 /* #ffffff */
  --card-border: lch(95.24% 0 282 / 1);           /* #f1f0f0 */
  --dock-bg: lch(100% 0 282 / 1);                 /* #ffffff */
  --dock-btn-bg: lch(93.483% 0.5 282 / 1);        /* #eeeef0 */
  --checkbox-border-rest: lch(52.04% 0 282 / 1);  /* Linear unchecked control */
  --toggle-unchecked-bg: lch(85.4% 0 282 / 1);    /* #d6d6d6 */
  --focus-ring-color: #6d78d5;
  --action-primary: #5e6ad2;
  --action-primary-hover: #6875e5;

  /* Linear Add Filter light-theme measurements. */
  --filter-menu-border: lch(90.55% 0 282 / 1);
  --filter-menu-divider: lch(97.3% 0 282 / 1);
  --filter-menu-text: lch(20% 1 282 / 1);
  --filter-menu-text-active: lch(10% 0 282 / 1);
  --filter-menu-muted: lch(40% 1 282 / 1);
  --filter-menu-highlight: lch(95% 0 282 / 1);
  --filter-checkbox-border: lch(54.1% 0 282 / 1);
  --filter-checkbox-selected: #5e6ad2;
  --filter-trigger-bg: lch(99.997% 0.5 282 / 1);
  --filter-trigger-active-bg: lch(94.854% 0.157 282 / 1);
  --filter-menu-shadow: 0px 6px 18px lch(0% 0 0 / 0.02), 0px 3px 9px lch(0% 0 0 / 0.04), 0px 1px 1px lch(0% 0 0 / 0.04);
  --filter-menu-strong-shadow: 0px 9px 48px lch(0% 0 0 / 0.08), 0px 6px 24px lch(0% 0 0 / 0.1), 0px 1px 1px lch(0% 0 0 / 0.04);

  /* Rules list: light equivalents of Linear's My issues hierarchy. */
  --rules-group-bg: var(--bg-sidebar);
  --rules-group-hover-bg: var(--item-hover-bg);
  --rules-row-hover-bg: lch(99.997% 0.5 282 / 1);
  --rules-row-focus-bg: var(--item-hover-bg);
  --rules-property-bg: lch(95.24% 0 282 / 1);
  --rules-property-border: lch(88.49% 0 282 / 1);
  --rules-property-text: var(--text-secondary);
  --rules-scope-bg: lch(97.94% 0.5 282 / 1);
  --rules-scope-text: var(--text-tertiary);
  --rules-action-stop-bg: rgba(220, 38, 38, 0.09);
  --rules-action-stop-border: rgba(220, 38, 38, 0.22);
  --rules-action-stop-text: #b42318;
  --rules-action-positive-bg: rgba(5, 150, 105, 0.10);
  --rules-action-positive-border: rgba(5, 150, 105, 0.22);
  --rules-action-positive-text: #087f5b;
  --rules-action-default-bg: rgba(37, 99, 235, 0.09);
  --rules-action-default-border: rgba(37, 99, 235, 0.22);
  --rules-action-default-text: #1d4ed8;

  /* Statistics decision states (Light): darkened for contrast on white cards. */
  --statistics-state-on-target: #087f5b;
  --statistics-state-watch: #b45309;
  --statistics-state-attention: #b42318;
  --statistics-state-unknown: var(--text-tertiary);
  --statistics-primary-card-border: lch(84.44% 0 282 / 1);
  --statistics-pace-track: lch(89.54% 0.5 282 / 1);
  --statistics-pace-fill: var(--text-tertiary);
  --statistics-diagnostics-bg: lch(97.94% 0.5 282 / 1);
  /* Stepped for the light surface rather than flipped from the dark value. */
  --statistics-trend-line: #5e6ad2;
  --statistics-trend-muted: var(--text-tertiary);

  /* Preferences Specific Tokens (Light) */
  --preferences-card-bg: lch(100% 0 282 / 1);     /* #fefeff */
  --preferences-control-bg: lch(100% 0 282 / 1);  /* #fefeff */
  --preferences-control-hover: #f2f2f3;
  --preferences-active-bg: lch(89.54% 0.5 282 / 1); /* #e1e1e2 */
  --preferences-search-bg: lch(100% 0 282 / 1);   /* #fefeff */
  --preferences-search-border: lch(95.24% 0 282 / 1); /* #f1f0f0 */
  --preferences-menu-bg: lch(100% 0 282 / 1);     /* #fefeff */
  --preferences-menu-border: lch(86.5% 0 282 / 1);/* #d8d8d8 */
  --preferences-menu-hover: lch(95% 0 282 / 1);   /* #f1f0f0 */
  --preferences-accent: #6d78d5;
}

html[data-theme='dark'] {
  color-scheme: dark;
}

/* Public website: long-form reading and marketing scale, independent of app density. */
:root {
  --site-width: 1200px;
  --site-background: var(--bg-canvas);
  --site-border-color: var(--color-border-secondary);
  --site-reading-width: 624px;
  --site-gutter: clamp(24px, 5vw, 72px);
  --site-header-height: 72px;
  --site-logo-size: 32px;
  --site-brand-size: 22px;
  --site-body-size: 16px;
  --site-small-size: 13px;
  --site-heading-size: clamp(40px, 5vw, 64px);
  --site-heading-leading: 1.06;
  --site-heading-tracking: -0.035em;
  --site-section-size: 24px;
  --site-lead-size: clamp(18px, 2vw, 22px);
  --site-body-leading: 1.7;
  --site-space-xs: 8px;
  --site-space-sm: 16px;
  --site-space-md: 24px;
  --site-space-lg: 40px;
  --site-space-xl: 64px;
  --site-section-space: clamp(56px, 8vw, 112px);
  --site-hero-space: clamp(88px, 12vw, 176px);
  --site-footer-brand-width: 440px;
  --site-footer-gap: clamp(32px, 6vw, 88px);
  --site-focus-width: 2px;
  --site-focus-offset: 4px;
  --site-border-width: 1px;
}

/* Composition only. Vite prepends canonical tokens.css and fingerprints this CSS. */
* { box-sizing: border-box; }
html { background: var(--site-background); scroll-padding-top: var(--site-header-height); }
body {
  margin: 0;
  color: var(--text-primary);
  background: var(--site-background);
  font-family: var(--font-regular);
  font-size: var(--site-body-size);
  line-height: var(--site-body-leading);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-underline-offset: var(--site-focus-offset); }
a:hover { color: var(--text-primary); }
a:focus-visible { outline: var(--site-focus-width) solid var(--focus-ring-color); outline-offset: var(--site-focus-offset); }
.site-container { width: min(var(--site-width), calc(100% - 2 * var(--site-gutter))); margin-inline: auto; }
.site-header { border-bottom: var(--site-border-width) solid var(--site-border-color); }
.site-header-inner { min-height: var(--site-header-height); display: flex; align-items: center; justify-content: space-between; gap: var(--site-space-md); }
.site-brand { display: inline-flex; align-items: center; gap: var(--site-space-xs); font-size: var(--site-brand-size); font-weight: var(--font-weight-semibold); letter-spacing: var(--site-heading-tracking); text-decoration: none; color: var(--text-primary); }
.site-brand img { display: block; width: var(--site-logo-size); height: var(--site-logo-size); }
.site-nav { display: flex; align-items: center; gap: var(--site-space-md); font-size: var(--site-small-size); }
.site-nav a { padding-block: var(--site-space-xs); text-decoration: none; color: var(--text-secondary); }
h1 { margin: 0; font-size: var(--site-heading-size); font-weight: var(--font-weight-medium); line-height: var(--site-heading-leading); letter-spacing: var(--site-heading-tracking); }
.landing-main { padding-block: var(--site-hero-space); }
.landing-main > p { margin: var(--site-space-lg) 0 0; color: var(--text-secondary); font-size: var(--site-lead-size); line-height: 1.5; }
.landing-capabilities { margin-top: var(--site-section-space); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--site-space-lg); }
.landing-capabilities h2 { margin: 0; font-size: inherit; font-weight: var(--font-weight-medium); }
.landing-capabilities p { margin: var(--site-space-xs) 0 0; color: var(--text-secondary); }
.site-footer { border-top: var(--site-border-width) solid var(--site-border-color); padding-block: var(--site-space-xl); }
.site-footer-grid { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: var(--site-footer-gap); font-size: var(--site-small-size); color: var(--text-secondary); }
.site-footer h2 { margin: 0 0 var(--site-space-md); color: var(--text-primary); font-size: inherit; font-weight: var(--font-weight-semibold); }
.site-footer p { margin: var(--site-space-sm) 0 0; }
.site-operator { max-width: var(--site-footer-brand-width); }
.site-operator strong { font-weight: var(--font-weight-medium); }
.site-operator address { font-style: normal; margin-top: var(--site-space-xs); }
.site-footer a:not(.site-brand) { text-decoration: none; overflow-wrap: anywhere; }
.site-footer a:hover { text-decoration: underline; }
.site-footer-links a { display: block; width: fit-content; margin-bottom: var(--site-space-xs); }
.site-footer a[aria-current='page'] { color: var(--text-primary); }
.site-copyright { color: var(--text-tertiary); }
.legal-article { width: min(var(--site-reading-width), calc(100% - 2 * var(--site-gutter))); margin: var(--site-hero-space) auto var(--site-section-space); overflow-wrap: break-word; }
.legal-date { margin: var(--site-space-lg) 0; color: var(--text-tertiary); font-family: var(--font-monospace); font-size: var(--site-small-size); text-transform: uppercase; }
.legal-article p, .legal-article li { color: var(--text-secondary); }
.legal-article p { margin-block: var(--site-space-md); }
.legal-article .legal-date { margin-block: var(--site-space-lg); }
.legal-contents { margin-block: var(--site-space-lg); }
.legal-article ol, .legal-article ul { padding-left: var(--site-space-md); }
.legal-article li + li { margin-top: var(--site-space-xs); }
.legal-article section { margin-top: var(--site-space-xl); scroll-margin-top: var(--site-space-md); }
.legal-article h2 { font-size: var(--site-section-size); font-weight: var(--font-weight-medium); line-height: 1.3; letter-spacing: var(--site-heading-tracking); margin: 0 0 var(--site-space-md); }
.legal-article strong { color: var(--text-primary); font-weight: var(--font-weight-semibold); }
.skip-link { position: absolute; transform: translateY(-150%); left: var(--site-gutter); top: var(--site-space-sm); background: var(--site-background); padding: var(--site-space-xs); }
.skip-link:focus { transform: none; }
@media (max-width: 767px) {
  .landing-capabilities { grid-template-columns: minmax(0, 1fr); }
  .site-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-operator { grid-column: 1 / -1; }
  .desktop-break { display: none; }
  .site-nav { gap: var(--site-space-sm); }
}