/* Layout e chrome do case DashOps. Tokens de tipo vêm de /case-type.css */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
      :root {
        --bg-deep: #fff;
        --bg-card: oklch(98.5% 0.005 284);
        --accent: oklch(52% 0.24 290);
        --accent-dim: oklch(68% 0.16 290);
        --accent-glow: oklch(62% 0.26 290 / 0.12);
        --teal: oklch(48% 0.12 195);
        --amber: oklch(58% 0.16 65);
        --text: oklch(18% 0.04 284);
        --text-muted: oklch(42% 0.03 284);
        --text-subtle: oklch(55% 0.025 284);
        --border: oklch(88% 0.02 284);
        --radius: 12px;
        --radius-lg: 20px;
        --measure: 680px;
        --wide: 1000px;
        --font-display: "DM Serif Display", serif;
        --font-ui: "DM Sans", sans-serif;
        --fs-section: clamp(36px, 4vw, 56px);
        --fs-chapter: clamp(24px, 2.6vw, 32px);
        --fs-metric: 28px;
        --fs-item: 18px;
        --fs-body: 15px;
        --fs-ui: 14px;
        --fs-meta: 13px;
        --fs-label: 11px;
        --lh-body: 1.55;
      }
      html { scroll-behavior: smooth; }
      body {
        min-height: 100%;
        background: var(--bg-deep);
        background-image:
          radial-gradient(ellipse 60% 46% at 14% 0%, oklch(72% 0.10 290 / 0.14), transparent 58%),
          radial-gradient(ellipse 48% 36% at 90% 8%, oklch(78% 0.08 195 / 0.12), transparent 54%);
        color: var(--text);
        font-family: var(--font-ui);
        -webkit-font-smoothing: antialiased;
      }
      a { color: inherit; }
      ::selection { background: var(--accent-glow); color: var(--text); }
      .num { font-variant-numeric: tabular-nums; }
      .progress-track { position: fixed; inset: 0 0 auto; height: 2px; background: oklch(30% 0.06 284); z-index: 50; }
      .progress-fill { width: 0; height: 100%; background: linear-gradient(90deg, var(--accent), var(--teal)); }
      .reading-nav {
        --nav-border: oklch(30% 0.06 284);
        --nav-text: oklch(96% 0.01 284);
        --nav-muted: oklch(70% 0.05 284);
        --nav-active: oklch(20% 0.07 284);
        position: sticky;
        top: 2px;
        z-index: 40;
        display: flex;
        flex-direction: column;
        background: oklch(12% 0.06 284 / 0.92);
        border-bottom: 1px solid var(--nav-border);
        color: var(--nav-text);
        backdrop-filter: blur(20px) saturate(1.4);
      }
      .reading-nav .back {
        width: 100%;
        padding: 12px clamp(16px, 4vw, 28px);
        border-bottom: 1px solid var(--nav-border);
        color: var(--nav-muted);
        font-size: var(--fs-ui);
        font-weight: 600;
        text-decoration: none;
      }
      .reading-nav-links {
        display: flex;
        gap: 6px;
        overflow-x: auto;
        padding: 10px clamp(16px, 4vw, 28px) 12px;
        scrollbar-width: none;
      }
      .reading-nav-links::-webkit-scrollbar { display: none; }
      .reading-nav-links a {
        flex: none;
        padding: 6px 13px;
        border-radius: 999px;
        color: var(--nav-text);
        font-size: var(--fs-ui);
        font-weight: 600;
        text-decoration: none;
        white-space: nowrap;
      }
      .reading-nav-links a.active { background: var(--nav-active); }
      .shell { max-width: var(--wide); margin: 0 auto; padding: 0 clamp(20px, 5vw, 56px) 120px; }
      .col { max-width: var(--measure); margin: 0 auto; }
      .hero { padding: 64px 0 40px; }
      .eyebrow, .chapter-label {
        color: var(--accent);
        font-size: var(--fs-label);
        font-weight: 600;
        letter-spacing: 0.16em;
        text-transform: uppercase;
      }
      .eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 20px; }
      .eyebrow::before { width: 16px; height: 1.5px; background: var(--accent); content: ""; }
      h1.title {
        margin-bottom: 20px;
        font-family: var(--font-display);
        font-size: var(--fs-section);
        font-weight: 400;
        letter-spacing: -1.5px;
        line-height: 1.1;
        text-wrap: pretty;
      }
      h1.title em { color: var(--accent); font-style: italic; }
      h2.chapter-title {
        margin-bottom: 24px;
        font-family: var(--font-ui);
        font-size: var(--fs-chapter);
        font-weight: 700;
        letter-spacing: -0.03em;
        line-height: 1.2;
        color: var(--text);
        text-wrap: pretty;
      }
      .dek { max-width: var(--measure); margin-bottom: 28px; color: var(--text-muted); font-size: var(--fs-body); line-height: var(--lh-body); }
      .case-tags { display: flex; flex-wrap: wrap; gap: 8px; }
      .case-tag-pill {
        padding: 5px 14px;
        border: 1px solid;
        border-radius: 99px;
        font-size: var(--fs-label);
        font-weight: 600;
        letter-spacing: 0.1em;
        text-transform: uppercase;
      }
      .case-tag-pill--accent { border-color: var(--accent-dim); background: var(--accent-glow); color: var(--accent); }
      .case-tag-pill--teal { border-color: oklch(72% 0.18 195 / 0.35); background: oklch(72% 0.18 195 / 0.08); color: var(--teal); }
      .case-tag-pill--amber { border-color: oklch(78% 0.18 65 / 0.35); background: oklch(78% 0.18 65 / 0.08); color: var(--amber); }
      .stat-strip {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        overflow: hidden;
        margin: 0 auto 8px;
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        background: var(--bg-card);
      }
      .stat { padding: 26px 22px; border-right: 1px solid var(--border); }
      .stat:last-child { border-right: 0; }
      .stat .n {
        margin-bottom: 8px;
        color: var(--accent);
        font-family: var(--font-ui);
        font-size: var(--fs-metric);
        font-weight: 700;
        letter-spacing: -0.03em;
        line-height: 1.15;
      }
      .stat .l { color: var(--text-muted); font-size: var(--fs-body); line-height: var(--lh-body); }
      section.chapter { padding: 60px 0; border-top: 1px solid var(--border); scroll-margin-top: 120px; }
      .chapter-label { display: block; margin-bottom: 14px; }
      p.lead { margin-bottom: 22px; color: var(--text-muted); font-size: var(--fs-body); line-height: var(--lh-body); }
      p.body-text { margin-bottom: 22px; color: var(--text-muted); font-size: var(--fs-body); line-height: var(--lh-body); }
      p.body-text:last-child { margin-bottom: 0; }
      p.body-text strong, p.lead strong { color: var(--text); }
      blockquote.pull {
        margin: 40px 0;
        padding: 4px 0 4px 28px;
        border-left: 2px solid var(--accent);
        color: var(--text);
        font-family: var(--font-ui);
        font-size: var(--fs-item);
        font-style: normal;
        font-weight: 700;
        letter-spacing: -0.03em;
        line-height: 1.35;
      }
      .module-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 8px 0; }
      .module { padding: 22px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-card); }
      .module .m-index { margin-bottom: 12px; color: var(--accent); font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.12em; }
      .module .m-title { margin-bottom: 8px; color: var(--text); font-size: var(--fs-item); font-weight: 700; letter-spacing: -0.03em; }
      .module .m-copy { color: var(--text-muted); font-size: var(--fs-body); line-height: var(--lh-body); }
      .problem-evolution { margin: 34px 0 38px; }
      .problem-evolution-title {
        margin-bottom: 12px;
        color: var(--text);
        font-family: var(--font-ui);
        font-size: var(--fs-item);
        font-weight: 700;
        letter-spacing: -0.03em;
        line-height: 1.25;
      }
      .problem-evolution .body-text { margin-bottom: 0; }
      .problem-quote {
        display: inline;
        color: var(--text);
        font-style: italic;
        font-weight: 500;
      }
      .comparison-stack { display: grid; gap: 34px; margin-top: 12px; }
      .comparison-title {
        margin-bottom: 12px;
        color: var(--text);
        font-size: var(--fs-label);
        font-weight: 600;
        letter-spacing: 0.14em;
        text-transform: uppercase;
      }
      .comparison-figure {
        overflow: visible;
        border: 0;
        background: transparent;
      }
      .comparison-figure img { display: block; width: 100%; height: auto; }
      .figure {
        --figcaption-color: oklch(78% 0.02 284);
        max-width: 620px;
        overflow: hidden;
        margin: 34px auto 48px;
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        background: #000;
        box-shadow: 0 18px 48px oklch(18% 0.04 284 / 0.14);
      }
      .figure.figure-plain {
        overflow: visible;
        border: 0;
        background: transparent;
        box-shadow: none;
      }
      .figure img { display: block; width: 100%; height: auto; }
      .figure figcaption { padding: 14px 20px; border-top: 1px solid oklch(28% 0.04 284); color: oklch(78% 0.02 284); font-size: var(--fs-meta); line-height: 1.5; }
      .stack-intro { margin: 8px 0 4px; color: var(--text); font-size: var(--fs-item); font-weight: 700; letter-spacing: -0.03em; }
      .stack-list { display: flex; flex-direction: column; margin: 8px 0 0; }
      .stack-row { display: grid; grid-template-columns: 44px 1fr; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--border); align-items: center; }
      .stack-row:last-child { border-bottom: none; }
      .stack-logo {
        width: 44px; height: 44px; border-radius: var(--radius); border: 1px solid var(--border);
        background: var(--bg-card); display: flex; align-items: center; justify-content: center; padding: 9px;
      }
      .stack-logo img { width: 100%; height: 100%; object-fit: contain; }
      .stack-name { font-size: var(--fs-item); font-weight: 700; letter-spacing: -0.03em; color: var(--text); }
      .stack-cat { font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-subtle); margin-top: 3px; }
      .mvp-split {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(180px, 230px);
        gap: 28px;
        align-items: center;
        margin: 28px 0 8px;
      }
      .mvp-highlights { display: grid; gap: 6px; }
      .mvp-highlight {
        display: grid;
        grid-template-columns: 44px 1fr;
        gap: 14px;
        align-items: center;
        padding: 14px 0;
        border-bottom: 1px solid var(--border);
      }
      .mvp-highlight:last-child { border-bottom: 0; }
      .mvp-icon {
        width: 44px;
        height: 44px;
        border-radius: 12px;
        background: var(--accent-glow);
        color: var(--accent);
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .mvp-icon svg { width: 22px; height: 22px; }
      .mvp-highlight-copy { color: var(--text); font-size: var(--fs-item); font-weight: 700; letter-spacing: -0.03em; line-height: 1.25; }
      .mvp-highlight-copy span { display: block; margin-top: 4px; color: var(--text-muted); font-size: var(--fs-body); font-weight: 400; line-height: var(--lh-body); }
      .mvp-highlights + .body-text { margin-top: 16px; }
      .mvp-menu {
        overflow: hidden;
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        background: #fff;
        box-shadow: 0 18px 48px oklch(18% 0.04 284 / 0.10);
      }
      .mvp-menu img { display: block; width: 100%; height: auto; }
      .figure.mvp-home,
      .figure.mvp-shot {
        position: relative;
        left: 50%;
        width: min(var(--wide), calc(100vw - 40px));
        max-width: none;
        margin: 12px auto 32px;
        background: #fff;
        transform: translateX(-50%);
      }
      .figure.mvp-home img,
      .figure.mvp-shot img {
        width: 100%;
        height: auto;
        image-rendering: auto;
      }
      .learning-list { display: flex; flex-direction: column; }
      .learning-row {
        display: grid;
        grid-template-columns: 46px 1fr;
        gap: 16px;
        padding: 20px 0;
        border-bottom: 1px solid var(--border);
      }
      .learning-row:last-child { border-bottom: 0; }
      .l-idx { color: var(--accent); font-size: var(--fs-label); font-weight: 600; }
      .l-title { margin-bottom: 5px; font-size: var(--fs-item); font-weight: 700; letter-spacing: -0.03em; }
      .l-copy { color: var(--text-muted); font-size: var(--fs-body); line-height: var(--lh-body); }
      .footer-cta { margin-top: 42px; padding-top: 30px; border-top: 1px solid var(--border); text-align: center; }
      .footer-cta p { margin-bottom: 16px; color: var(--text-muted); font-size: var(--fs-body); line-height: var(--lh-body); }
      .btn-outline { display: inline-block; padding: 11px 20px; border: 1px solid var(--accent); border-radius: 999px; color: var(--accent); font-size: var(--fs-ui); font-weight: 600; text-decoration: none; }
      @media (min-width: 900px) {
        .reading-nav { flex-direction: row; align-items: center; justify-content: center; padding: 14px clamp(120px, 14vw, 160px); }
        .reading-nav .back { position: absolute; left: clamp(20px, 5vw, 56px); width: auto; padding: 6px 16px 6px 13px; border-right: 1px solid var(--nav-border); border-bottom: 0; border-radius: 999px; }
        .reading-nav-links { justify-content: center; padding: 0; }
      }
      @media (max-width: 680px) {
        .hero { padding-top: 46px; }
        .stat-strip, .module-grid, .mvp-split { grid-template-columns: 1fr; }
        .stat { border-right: 0; border-bottom: 1px solid var(--border); }
        .stat:last-child { border-bottom: 0; }
        section.chapter { padding: 48px 0; }
        blockquote.pull { padding-left: 18px; }
        .figure { max-width: 100%; margin-top: 28px; }
        .mvp-menu { max-width: 260px; }
      }

#root { display: contents; }