/*
 * FILE: /td-os/core/td-style.css
 * Purpose (EN): td-style stylesheet for TDOS runtime.
 * مقصد (UR): TDOS runtime ke liye td-style stylesheet.
 *
 * Version: v1.0.0
 *
 * Sections (Index)
 *  01) Implementation
 */

/* Assumptions:
   1) TD-OS versioning is managed outside this file; header version kept as-is.
   2) Light theme tokens are the base; dark overrides live in /core/td-dark.css.
   3) All TD-OS pages follow .td-page → .td-shell → .td-shell-inner structure.
   4) Modern browsers support color-mix, scrollbar-gutter, and custom scrollbars;
      no legacy fallbacks are added here.
*/

/* =========================================================
   SECTION 01 — RESET & BASE HTML
   PURPOSE:
   • Single source of truth for html/body layout.
   • Kill horizontal scroll and prevent scrollbar “jump” on refresh.
   ========================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Root canvas: lock width, kill horizontal scroll. */
html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

/* UPDATED: base background must follow tokens/theme (no hardcoded color) */
html {
  background-color: var(--td-surface-page);
}

/* html: smooth scroll + stable vertical gutter -> scrollbar reserved, no jump */
html {
  overflow-y: scroll; /* always reserve scrollbar space */
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
}

/* Body: full-height canvas */
body {
  min-height: 100vh;
}

/* Media elements scale with layout */
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

/* Typography reset */
h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 0;
}

/* Forms and interactive elements inherit typography */
button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

/* Remove default button styles (components will restyle) */
button {
  border: none;
  background: none;
  padding: 0;
}

/* =========================================================
   SECTION 02 — SAFE BOTTOM LAW (GLOBAL)
   PURPOSE:
   • Global bottom padding for all TD shells.
   • Respect iOS safe-area inset (home indicator).
   ========================================================= */

:root {
  /* OS-level safe bottom token (uses spacing scale defined later) */
  --td-safe-bottom-pad: var(--td-space-xl);
}

/* By default, every TD shell inner gets safe bottom padding */
body[data-td-mode] .td-shell-inner {
  padding-bottom: var(--td-safe-bottom-pad);
}

/* Devices with safe-area (iOS Safari, etc.) */
@supports (padding-bottom: max(0px, env(safe-area-inset-bottom))) {
  body[data-td-mode] .td-shell-inner {
    padding-bottom: max(
      var(--td-safe-bottom-pad),
      env(safe-area-inset-bottom)
    );
  }
}

/* =========================================================
   SECTION 03 — CORE TOKENS (LIGHT THEME)
   PURPOSE:
   • Centralized tokens for colors, type, spacing, shadows,
     components, motion, and layout.
   • Engines/components consume tokens instead of raw values.
   ========================================================= */

:root,
[data-td-theme="light"] {
  /* -------------------------
     03.1 — Brand & neutrals
     ------------------------- */
  --td-navy: #0b1a33;
  --td-blue: #2da3ff;
  --td-blue-soft: #7cc8ff;
  --td-blue-strong: #2563eb;
  --td-red: #e63946;
  --td-white: #ffffff;

  /* Brand roles */
  --td-brand-primary: var(--td-blue);
  --td-brand-primary-soft: var(--td-blue-soft);
  --td-brand-primary-strong: var(--td-blue-strong);
  --td-brand-shell: var(--td-navy);

  /* Neutrals */
  --td-gray-050: #f5f7fb;
  --td-gray-075: #eef1f8;
  --td-gray-100: #e2e7f5;
  --td-gray-200: #cbd2e5;
  --td-gray-300: #b4bed8;
  --td-gray-400: #9aa4c2;
  --td-gray-500: #7f89aa;
  --td-gray-600: #636c8b;
  --td-gray-700: #4a5270;
  --td-gray-800: #323854;
  --td-gray-900: #181b2f;

  /* -------------------------
     03.2 — Text roles
     ------------------------- */
  --td-text-main: #0f172a;          /* primary body text */
  --td-text-soft: #64748b;         /* supporting text */
  --td-text-soft-strong: #475569;  /* strong but not harsh black */
  --td-text-muted: #6b7280;        /* helper / hint text */
  --td-text-disabled: rgba(148, 163, 184, 0.95);

  /* Text role aliases */
  --td-text-title: var(--td-text-soft-strong);
  --td-text-heading: var(--td-text-soft-strong);
  --td-text-body: var(--td-text-main);
  --td-text-eyebrow: var(--td-text-soft);
  --td-text-link: var(--td-blue);
  --td-text-strong: var(--td-text-soft-strong);

  /* -------------------------
     03.3 — Surfaces & page bg
     ------------------------- */
  --td-surface-page: #e5edf7;   /* outer blue field */
  --td-surface-shell: #f3f4f9;  /* big shell */
  --td-surface-inner: #ffffff;  /* main cards */
  --td-surface-elevated: #f9fafb;  /* subtle raised sections */
  --td-surface-subtle: #eff4ff;    /* soft strips / bands */

  /* Short aliases */
  --td-bg: #e5edf7;
  --td-bg-deep: #d9e2f0;
  --td-shell-bg: #f3f4f9;
  --td-surface: #f9fafb;

  /* Layout surfaces */
  --td-bg-page: var(--td-surface-page);
  --td-surface-band: rgba(248, 250, 252, 0.98);
  --td-surface-rail: #f1f5f9;

  --td-page-bg-main: var(--td-surface-page);
  --td-page-bg-soft: color-mix(
    in srgb,
    var(--td-surface-page) 80%,
    #ffffff 20%
  );

  --td-shell-bg-main: var(--td-surface-shell);
  --td-shell-bg-soft: color-mix(
    in srgb,
    var(--td-surface-shell) 70%,
    var(--td-surface-subtle) 30%
  );

  --td-section-bg-default: var(--td-surface-inner);
  --td-section-bg-muted: var(--td-surface-subtle);
  --td-section-bg-strong: color-mix(
    in srgb,
    var(--td-surface-inner) 70%,
    var(--td-surface-shell) 30%
  );

  /* Page background gradients (final) */
  --td-bg-grad-top: radial-gradient(
    circle at 12% 0%,
    rgba(45, 163, 255, 0.22),
    transparent 55%
  );
  --td-bg-grad-bottom: radial-gradient(
    circle at 88% 115%,
    rgba(11, 26, 51, 0.9),
    transparent 60%
  );

  /* Accent gradient */
  --td-accent-gradient: linear-gradient(
    135deg,
    #2da3ff,
    #7cc8ff,
    #2563eb
  );

  /* -------------------------
     03.4 — Borders & semantics
     ------------------------- */
  --td-border-subtle: rgba(148, 163, 184, 0.6);
  --td-border-soft: rgba(148, 163, 184, 0.9);
  --td-border-strong: rgba(15, 23, 42, 0.8);
  --td-border-shell: rgba(148, 163, 184, 0.28);

  /* Semantic & alerts */
  --td-semantic-danger: #b91c1c;
  --td-semantic-danger-soft: #fee2e2;
  --td-semantic-success: #15803d;
  --td-semantic-success-soft: #dcfce7;
  --td-semantic-warning: #b45309;
  --td-semantic-warning-soft: #fef3c7;

  /* Alerts — success */
  --td-alert-success-bg: #ecfdf3;
  --td-alert-success-border: #16a34a;
  --td-alert-success-text: #166534;

  /* Alerts — warning */
  --td-alert-warning-bg: #fffbeb;
  --td-alert-warning-border: #f59e0b;
  --td-alert-warning-text: #92400e;

  /* Alerts — info */
  --td-alert-info-bg: #eff6ff;
  --td-alert-info-border: #2563eb;
  --td-alert-info-text: #1d4ed8;

  /* Alerts — danger */
  --td-alert-danger-bg: var(--td-semantic-danger-soft);
  --td-alert-danger-border: rgba(185, 28, 28, 0.35);
  --td-alert-danger-text: var(--td-semantic-danger);

  /* Generic alert defaults */
  --td-alert-bg: #fffbeb;
  --td-alert-border: #fbbf24;
  --td-alert-text: #92400e;

  /* -------------------------
     03.5 — Focus & scrollbars
     ------------------------- */
  --td-focus-ring-color: rgba(45, 163, 255, 0.65);
  --td-focus-ring: 0 0 0 3px var(--td-focus-ring-color);
  --td-focus-outline: 2px solid var(--td-blue);
  --td-focus-offset: 3px;

  --td-scrollbar-track: rgba(15, 23, 42, 0.03);
  --td-scrollbar-thumb: rgba(148, 163, 184, 0.75);
  --td-scrollbar-thumb-hover: rgba(148, 163, 184, 0.95);

  /* -------------------------
     03.6 — Shadows
     ------------------------- */
  /* Soft background elevation (inner cards, rail cards) */
  --td-shadow-soft: 0 18px 50px rgba(15, 23, 42, 0.22),
    0 0 0 1px rgba(148, 163, 184, 0.32);

  /* Primary card / shell elevation */
  --td-shadow-card: 0 22px 60px rgba(15, 23, 42, 0.26),
    0 0 0 1px rgba(148, 163, 184, 0.38);

  /* Strong pop (modals, CTA, overlays) */
  --td-shadow-strong: 0 32px 80px rgba(15, 23, 42, 0.38),
    0 0 0 1px rgba(15, 23, 42, 0.72);

  /* Focus shadow */
  --td-shadow-focus: 0 0 0 1px rgba(45, 163, 255, 0.65);

  /* Shell + card shadows aligned with lab */
  --td-shadow-shell: 0 28px 80px rgba(15, 23, 42, 0.26),
    0 0 0 1px rgba(148, 163, 184, 0.25);
  --td-shadow-card-primary: 0 22px 55px rgba(15, 23, 42, 0.18),
    0 0 0 1px rgba(148, 163, 184, 0.18);
  --td-shadow-card-secondary: 0 18px 45px rgba(15, 23, 42, 0.13),
    0 0 0 1px rgba(148, 163, 184, 0.16);

  /* -------------------------
     03.7 — Typography tokens
     ------------------------- */
  --td-font-family-sans: "Poppins", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans",
    "Helvetica Neue", sans-serif;

  /* Type scale (rem) */
  --td-font-size-xs: 0.75rem;
  --td-font-size-sm: 0.875rem;
  --td-font-size-base: 0.93rem;
  --td-font-size-lg: 1.05rem;
  --td-font-size-xl: 1.25rem;
  --td-font-size-2xl: 1.6rem;
  --td-font-size-3xl: 2.1rem;

  /* Role tokens (size) */
  --td-font-title: var(--td-font-size-3xl);
  --td-font-h1: var(--td-font-size-3xl);
  --td-font-h2: var(--td-font-size-2xl);
  --td-font-h3: var(--td-font-size-xl);
  --td-font-h4: var(--td-font-size-lg);
  --td-font-body: var(--td-font-size-base);
  --td-font-small: var(--td-font-size-sm);
  --td-font-eyebrow: var(--td-font-size-xs);

  /* Weights */
  --td-font-weight-regular: 400;
  --td-font-weight-medium: 500;
  --td-font-weight-semibold: 600;
  --td-font-weight-bold: 700;

  /* Tracking (letter-spacing) */
  --td-tracking-tight: -0.02em;
  --td-tracking-normal: 0;
  --td-tracking-wide: 0.04em;

  /* Line heights */
  --td-line-tight: 1.15;
  --td-line-normal: 1.5;
  --td-line-relaxed: 1.65;

  /* -------------------------
     03.8 — Spacing, radii & layout
     ------------------------- */
  /* Spacing scale
     Short palette (official):
       xs  (6px), sm (10px), md (16px),
       lg  (24px), xl (32px), 2xl (40px)
     Extended:
       2xs (4px), 3xl (56px), 4xl (72px)
  */
  --td-space-2xs: 4px;   /* extended: use sparingly */
  --td-space-xs: 6px;
  --td-space-sm: 10px;
  --td-space-md: 16px;
  --td-space-lg: 24px;
  --td-space-xl: 32px;
  --td-space-2xl: 40px;
  --td-space-3xl: 56px;  /* extended: hero/CTA */
  --td-space-4xl: 72px;  /* extended: rare, big bands */

  /* Radii scale */
  --td-radius-xs: 6px;
  --td-radius-sm: 10px;
  --td-radius-md: 14px;
  --td-radius-lg: 18px;
  --td-radius-xl: 22px;
  --td-radius-2xl: 26px;
  --td-radius-pill: 999px;

  /* Component radius mappings */
  --td-radius-shell: 30px; /* .td-shell border-radius */
  --td-radius-card: 24px;  /* .td-card border-radius */
  --td-radius-btn: 14px;
  --td-radius-input: 12px;

  /* Layout constraints */
  --td-shell-max-width: 1120px;
  --td-shell-gutter-x: var(--td-space-lg);
  --td-shell-gutter-y: var(--td-space-xl);
  --td-shell-inner-gap: var(--td-space-xl);

  /* Z-index scale */
  --td-z-base: 0;
  --td-z-dropdown: 20;
  --td-z-sticky: 30;
  --td-z-toast: 40;
  --td-z-modal: 50;
  --td-z-overlay: 60;

  /* Utility geometry */
  --td-visually-hidden-size: 1px;

  /* -------------------------
     03.9 — Component tokens only
     (buttons, inputs, tags, tables,
      tooltips, overlays, toggles, code)
     ------------------------- */

  /* Buttons */
  --td-btn-font-size: 0.95rem;
  --td-btn-padding-y: 0.7rem;
  --td-btn-padding-x: 1.4rem;

  --td-btn-bg: var(--td-blue);
  --td-btn-bg-hover: #2890e0;
  --td-btn-text: #ffffff;
  --td-btn-border: var(--td-blue);

  --td-btn-outline-bg: rgba(248, 250, 252, 0.96);
  --td-btn-outline-border: rgba(148, 163, 184, 0.85);
  --td-btn-outline-text: var(--td-text-main);

  --td-btn-ghost-bg: transparent;
  --td-btn-ghost-border: transparent;
  --td-btn-ghost-text: var(--td-text-soft-strong);

  --td-btn-shadow-rest: 0 10px 30px rgba(37, 99, 235, 0.35);
  --td-btn-shadow-hover: 0 16px 40px rgba(37, 99, 235, 0.45);
  --td-btn-shadow-active: 0 8px 22px rgba(15, 23, 42, 0.5);
  --td-btn-focus-ring: 0 0 0 2px rgba(15, 23, 42, 0.9),
    0 0 0 4px rgba(45, 163, 255, 0.7);

  /* Destructive buttons */
  --td-btn-danger-bg: linear-gradient(135deg, #b91c1c, #e11d48);
  --td-btn-danger-bg-hover: linear-gradient(135deg, #991b1b, #be123c);
  --td-btn-danger-text: #fef2f2;

  /* Inputs */
  --td-input-radius: var(--td-radius-input);
  --td-input-bg: #f9fafb;
  --td-input-text: var(--td-text-main);
  --td-input-placeholder: rgba(100, 116, 139, 0.9);
  --td-input-border: rgba(148, 163, 184, 0.65);
  --td-input-focus-border: var(--td-blue);
  --td-input-focus-ring: rgba(45, 163, 255, 0.28);

  /* Compat tokens */
  --td-input-border-focus: rgba(37, 99, 235, 0.95);
  --td-input-bg-focus: #ffffff;
  --td-input-shadow-focus: 0 0 0 1px rgba(37, 99, 235, 0.5);
  --td-input-disabled-bg: rgba(148, 163, 184, 0.1);
  --td-input-disabled-text: var(--td-text-disabled);

  /* Labels & helper text */
  --td-label-text: var(--td-text-soft-strong);
  --td-helper-text: var(--td-text-muted);
  --td-error-text: var(--td-alert-danger-text);

  /* Tags / pills / badges */
  --td-pill-border: rgba(148, 163, 184, 0.7);
  --td-pill-primary-bg: var(--td-navy);
  --td-pill-primary-text: #f9fafb;
  --td-pill-soft-bg: rgba(191, 219, 254, 0.9);
  --td-pill-soft-text: #0f172a;

  --td-badge-bg: rgba(15, 23, 42, 0.96);
  --td-badge-border: rgba(148, 163, 184, 0.55);
  --td-badge-text: #e5edf7;

  /* Chips */
  --td-chip-bg: rgba(255, 255, 255, 0.94);
  --td-chip-text: var(--td-text-soft-strong);

  /* Tables */
  --td-table-border: rgba(148, 163, 184, 0.5);
  --td-table-header-bg: rgba(148, 163, 184, 0.08);
  --td-table-header-text: var(--td-text-soft);
  --td-table-row-hover-bg: rgba(148, 163, 184, 0.12);
  --td-table-row-stripe-bg: rgba(148, 163, 184, 0.08);
  --td-table-row-alt: var(--td-table-row-stripe-bg);

  /* Tooltip */
  --td-tooltip-bg: #020617;
  --td-tooltip-text: #e5e7eb;
  --td-tooltip-border: rgba(148, 163, 184, 0.8);
  --td-tooltip-shadow: 0 20px 40px rgba(15, 23, 42, 0.6);

  /* Overlays & drawers (tokens only) */
  --td-overlay-backdrop-bg: rgba(15, 23, 42, 0.55);
  --td-overlay-backdrop-blur: 18px;
  --td-overlay-panel-bg: var(--td-surface-inner);
  --td-overlay-panel-border: var(--td-border-subtle);
  --td-overlay-panel-radius: var(--td-radius-xl);
  --td-overlay-panel-shadow: var(--td-shadow-strong);

  --td-drawer-bg: var(--td-surface-inner);
  --td-drawer-border: var(--td-border-subtle);
  --td-drawer-shadow: var(--td-shadow-strong);
  --td-drawer-max-width: 420px;

  /* Toggles */
  --td-toggle-width: 46px;
  --td-toggle-height: 28px;
  --td-toggle-knob: 22px;
  --td-toggle-off-bg: #d7dce5;
  --td-toggle-on-bg: linear-gradient(135deg, #2da3ff, #77c8ff);

  /* Progress bar */
  --td-progress-track-bg: color-mix(
    in srgb,
    var(--td-section-bg-muted) 85%,
    transparent 15%
  );
  --td-progress-fill-bg: linear-gradient(
    90deg,
    var(--td-brand-primary),
    var(--td-brand-primary-soft),
    var(--td-brand-primary)
  );

  /* Range slider */
  --td-range-track-bg: rgba(148, 163, 184, 0.4);
  --td-range-thumb-bg: var(--td-brand-primary);
  --td-range-thumb-ring: rgba(56, 189, 248, 0.28);

  /* Code blocks */
  --td-code-bg: #020617;
  --td-code-border: rgba(148, 163, 184, 0.7);
  --td-code-text: #e5e7eb;

  /* -------------------------
     03.10 — Motion
     ------------------------- */
  --td-motion-fast: 150ms;
  --td-motion-med: 220ms;
  --td-motion-slow: 260ms;
  --td-motion-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --td-motion-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --td-motion-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* Alias for toggle motion */
  --td-toggle-ease: var(--td-motion-ease);
}

/* =========================================================
   SECTION 03.11 — PRELOAD MOTION GATING (TOKENS ONLY)
   PURPOSE:
   • Remove animation/transition flash on first paint.
   • Does NOT hide content.
========================================================= */
body[data-td-state="preload"] {
  --td-motion-fast: 0ms;
  --td-motion-med: 0ms;
  --td-motion-slow: 0ms;
}

/* Desktop shell radius tweak (compat with older shells) */
@media (min-width: 1024px) {
  :root,
  [data-td-theme="light"] {
    --td-radius-shell: 30px;
  }
}

/* =========================================================
   SECTION 04 — BODY, TYPE & SCROLLBAR BASELINE
   ========================================================= */

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body {
  font-family: var(--td-font-family-sans);
  font-size: var(--td-font-size-base);
  line-height: var(--td-line-normal);
  color: var(--td-text-main);
  background: var(--td-bg-grad-top), var(--td-bg-grad-bottom),
    var(--td-surface-page);

  /* Important:
   * No background-attachment: fixed here.
   * Keeping it scroll/normal avoids huge repaints
   * and the “big blink” when the page refreshes.
   */
}

/* Headings */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: var(--td-font-weight-semibold);
  color: var(--td-text-heading);
  letter-spacing: var(--td-tracking-tight);
}

h1 {
  font-size: var(--td-font-h1);
  line-height: var(--td-line-tight);
}

h2 {
  font-size: var(--td-font-h2);
  line-height: var(--td-line-tight);
}

h3 {
  font-size: var(--td-font-h3);
  line-height: var(--td-line-normal);
}

h4,
h5,
h6 {
  font-size: var(--td-font-h4);
  line-height: var(--td-line-normal);
}

/* Paragraphs */

p {
  font-size: var(--td-font-body);
  line-height: var(--td-line-normal);
}

/* Links */

a {
  color: var(--td-text-link);
  text-decoration: none;
  transition:
    color var(--td-motion-med) var(--td-motion-ease-out),
    text-decoration-color var(--td-motion-med) var(--td-motion-ease-out),
    box-shadow var(--td-motion-med) var(--td-motion-ease-out);
}

a:hover {
  text-decoration: underline;
}

/* Global focus-visible outline */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: var(--td-focus-ring), var(--td-shadow-focus);
}

/* Firefox scrollbar (desktop default) */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--td-scrollbar-thumb) var(--td-scrollbar-track);
}

/* WebKit scrollbar (desktop default) */
*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

*::-webkit-scrollbar-track {
  background-color: var(--td-scrollbar-track);
}

*::-webkit-scrollbar-thumb {
  background-color: var(--td-scrollbar-thumb);
  border-radius: var(--td-radius-pill);
}

*::-webkit-scrollbar-thumb:hover {
  background-color: var(--td-scrollbar-thumb-hover);
}

/* =========================================================
   MOBILE: HIDE SCROLLBARS (keep scrolling)
   Put this AFTER your current scrollbar styling rules.
   Notes:
   - Hides visual scrollbars on mobile while keeping touch scroll.
   - Targets TD front-end only (requires body[data-td-mode]).
   ========================================================= */
@media (max-width: 768px) {
  /* Don’t reserve scrollbar gutter on mobile */
  html {
    scrollbar-gutter: auto;
  }

  /* Page scroll (TD pages only) */
  body[data-td-mode] {
    -ms-overflow-style: none; /* old Edge */
    scrollbar-width: none;    /* Firefox */
  }
  body[data-td-mode]::-webkit-scrollbar {
    width: 0;
    height: 0;
  }

  /* Common inner scrollers on TD pages (tables/code blocks etc.) */
  body[data-td-mode] .td-table-wrap,
  body[data-td-mode] pre,
  body[data-td-mode] code,
  body[data-td-mode] .td-code {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  body[data-td-mode] .td-table-wrap::-webkit-scrollbar,
  body[data-td-mode] pre::-webkit-scrollbar,
  body[data-td-mode] code::-webkit-scrollbar,
  body[data-td-mode] .td-code::-webkit-scrollbar {
    width: 0;
    height: 0;
  }
}

/* =========================================================
   SECTION 05 — REDUCED MOTION GLOBAL HOOK
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* =========================================================
   SECTION 06 — TD SHELL LAYOUT (PAGE, SHELL, INNER)
   PURPOSE:
   • Neutral OS shell layout (page, shell, inner).
   • No engine-specific visuals here.
   • Hardened for Gutenberg wrappers + mobile overflow safety.
   ========================================================= */

/* Root page wrapper for TD-OS (mobile-first) */
.td-page {
  min-height: 100vh;
  width: 100%;
  max-width: 100%;

  /* Center the shell and match Guide Master rhythm + iOS safe-area top */
  padding: calc(var(--td-space-xl) + env(safe-area-inset-top, 0px)) var(--td-space-md) var(--td-space-xl);
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

/* Gutenberg clamp fix */
.td-page :where(.wp-block-group__inner-container, .is-layout-constrained) {
  width: 100%;
  max-width: 100%;
}

/* Main shell container (used across engines) */
.td-shell {
  position: relative;
  width: 100%;
  max-width: var(--td-shell-max-width);
  margin-inline: auto;

  /* Prevent children forcing overflow */
  min-width: 0;

  border-radius: var(--td-radius-shell);
  background: var(--td-shell-bg-main);
  border: 1px solid var(--td-border-shell);
  box-shadow: var(--td-shadow-shell);
  overflow: hidden;
}

/* Inner layout wrapper */
.td-shell-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;

  gap: var(--td-shell-inner-gap);
  padding-inline: var(--td-shell-gutter-x);
  padding-top: var(--td-shell-gutter-y);
  background: transparent;
}

/* Small phones */
@media (max-width: 480px) {
  .td-page {
    padding: calc(var(--td-space-lg) + env(safe-area-inset-top, 0px)) var(--td-space-sm) var(--td-space-lg);
  }

  .td-shell-inner {
    padding-inline: var(--td-space-md);
    padding-top: var(--td-space-md);
    gap: var(--td-space-md);
  }
}

/* Tablet/desktop */
@media (min-width: 769px) {
  .td-page {
    padding: calc(var(--td-shell-gutter-y) + env(safe-area-inset-top, 0px)) var(--td-shell-gutter-x) var(--td-shell-gutter-y);
  }

  .td-shell-inner {
    padding-inline: var(--td-shell-gutter-x);
    padding-top: var(--td-shell-gutter-y);
    gap: var(--td-shell-inner-gap);
  }
}

/* Large screens */
@media (min-width: 1280px) {
  .td-page {
    padding-top: calc(var(--td-space-3xl) + env(safe-area-inset-top, 0px));
    padding-bottom: var(--td-space-3xl);
  }

  .td-shell {
    max-width: calc(var(--td-shell-max-width) + 40px);
  }
}

/* =========================================================
   SECTION 07 — SHELL HEADER & MAIN AREA
   PURPOSE:
   • Generic shell header + body layout used by all engines.
   • No engine-specific or guide-only styles here.
   ========================================================= */

/* Top section inside td-shell-inner (mobile-first: stacked) */
.td-shell-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--td-space-md);
  padding-bottom: var(--td-space-md);
  border-bottom: 1px solid var(--td-border-subtle);
}

/* Title/meta stack */
.td-shell-header-main {
  display: flex;
  flex-direction: column;
  gap: var(--td-space-xs);
  min-width: 0;
}

.td-shell-title {
  font-size: var(--td-font-h2);
  line-height: var(--td-line-tight);
  color: var(--td-text-title);
}

.td-shell-subtitle {
  font-size: var(--td-font-body);
  color: var(--td-text-soft);
}

/* Right-side actions (buttons, toggles, etc. from components) */
.td-shell-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: var(--td-space-sm);
}

/* Main content area inside shell */
.td-shell-body {
  display: flex;
  flex-direction: column;
  gap: var(--td-shell-inner-gap);
}

/* Optional narrow reading column inside body */
.td-shell-body-main {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
}

/* Stack spacing for flows */
.td-main-flow > * + * {
  margin-top: var(--td-space-lg);
}

/* Desktop header layout (row) */
@media (min-width: 769px) {
  .td-shell-header {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .td-shell-header-actions {
    justify-content: flex-end;
  }
}

/* =========================================================
   SECTION 08 — PRINT STYLES (GLOBAL)
   PURPOSE:
   • Make guides and tools print as clean documents.
   • Remove heavy backgrounds and UI chrome for print.
   • Show link URLs in print for clarity.
   ========================================================= */

@media print {
  *,
  *::before,
  *::after {
    box-shadow: none !important;
    text-shadow: none !important;
    animation: none !important;
    transition: none !important;
  }

  html,
  body {
    background: var(--td-white) !important;
  }

  body {
    color: var(--td-text-soft-strong) !important;
  }

  /* Remove outer gutters/shadows for paper */
  .td-page {
    padding: 0 !important;
  }

  .td-shell {
    max-width: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
  }

  .td-shell-inner {
    padding: 0 !important;
    background: transparent !important;
  }

  /* Hide UI-only elements */
  .td-print-hidden {
    display: none !important;
  }

  .td-print-only {
    display: block !important;
  }

  /* Show link URLs in print for clarity */
  a::after {
    content: " (" attr(href) ")";
    font-size: var(--td-font-small);
  }
}

/* =========================================================
   SECTION 09 — MISC GLOBAL UTILITIES
   PURPOSE:
   • Minimal OS-wide utilities for accessibility, visibility,
     layers, and text alignment.
   ========================================================= */

/* Screen-reader-only text */
.td-visually-hidden {
  position: absolute;
  width: var(--td-visually-hidden-size);
  height: var(--td-visually-hidden-size);
  padding: 0;
  margin: calc(var(--td-visually-hidden-size) * -1);
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Responsive visibility helpers */
@media (max-width: 768px) {
  .td-hide-mobile {
    display: none !important;
  }
}

@media (min-width: 769px) {
  .td-hide-desktop {
    display: none !important;
  }
}

/* Layer helpers mapping to z-index tokens */
.td-layer-overlay {
  z-index: var(--td-z-overlay);
}

.td-layer-modal {
  z-index: var(--td-z-modal);
}

.td-layer-sticky {
  z-index: var(--td-z-sticky);
}

/* Simple text alignment helpers */
.td-text-center {
  text-align: center;
}

.td-text-right {
  text-align: right;
}

/* =========================================================
   SECTION 10 — OVERLAY & NOTES BASELINE (NO LAYOUT DRIFT)
   PURPOSE:
   • Ensure hidden overlays/drawers don’t affect layout width.
   • Works with JS overlay engine (aria-hidden toggles).
   ========================================================= */

.td-overlay[aria-hidden="true"],
.td-notes-drawer[aria-hidden="true"] {
  display: none !important;
}

/* =========================================================
   SECTION 11 — GUIDE SHELL · HEADER, NAV & PROGRESS
   NOTE:
   • Guide-mode header, nav, and progress are defined in:
     /engines/guide/guide.css (v1.5+).
   • Core CSS stays engine-agnostic; section left intentionally empty.
   ========================================================= */

/* (Intentionally empty – see /engines/guide/guide.css) */