/* ===========================================================================
   complaint-operations-type.css
   ---------------------------------------------------------------------------
   Two jobs, both layered on top of complaint-operations.css:

     PART 1  TYPE      match prathameshadarkar.com's weights and tracking.
                       Both sites already use Inter + JetBrains Mono; what made
                       this page read as a different typeface was weight (500 vs
                       700) and tracking (-.065em vs -.025em).

     PART 2  THEMING   the page was hardcoded dark. Every colour is now a
                       variable with light and dark values, driven by the same
                       data-theme attribute and the same "theme" localStorage
                       key as the portfolio, so one toggle governs both pages.

   Layout, spacing and structure are untouched throughout.
   Load AFTER complaint-operations.css.
   =========================================================================== */


/* ===========================================================================
   PART 1 — TYPE
   =========================================================================== */

.complaint-study{font-size:16.5px;line-height:1.65}

.complaint-study h1{
  font-weight:700;
  letter-spacing:-.035em;
  line-height:1.06;
  font-size:clamp(2.9rem,6vw,4.6rem);
}
.complaint-study h2{
  font-weight:700;
  letter-spacing:-.025em;
  line-height:1.14;
  font-size:clamp(1.8rem,3.4vw,2.6rem);
}
.complaint-study h3{font-weight:700;letter-spacing:-.012em}

.cs-signal-number{font-weight:700;letter-spacing:-.04em;font-size:clamp(3.4rem,6vw,5.2rem)}
.cs-metrics strong{font-weight:700;letter-spacing:-.02em;font-size:clamp(1.9rem,3vw,2.6rem)}
.cs-company-numbers strong{font-weight:700;letter-spacing:-.025em;font-size:2.2rem}

.cs-lead{font-weight:400;letter-spacing:-.012em;font-size:clamp(1.1rem,1.8vw,1.35rem)}
.cs-outcome-lead{font-weight:600;letter-spacing:-.02em;font-size:clamp(1.15rem,2vw,1.45rem)}
.cs-story blockquote{font-weight:600;letter-spacing:-.02em;font-size:clamp(1.15rem,2.1vw,1.6rem)}
.cs-product-bars b,.cs-flow>b{font-weight:600}
.cs-brand{font-weight:700;letter-spacing:-.015em}
.cs-eyebrow,.cs-kicker,.cs-section-label{letter-spacing:.15em;font-weight:500}

/* figures line up in a column, as on the portfolio */
.cs-metrics strong,.cs-company-numbers strong,.cs-signal-number,
.cs-signal-legend,.cs-product-bars b{font-variant-numeric:tabular-nums}

/* optical line breaking */
.complaint-study h1,.complaint-study h2,.complaint-study h3{text-wrap:balance}
.cs-lead,.cs-intro,.cs-story>p,.cs-comparison p,.cs-flow p,
.cs-build-notes p,.cs-decision p,.cs-outcome-grid p{text-wrap:pretty}

@media(max-width:600px){
  .complaint-study h1{font-size:clamp(2.5rem,10.5vw,3.6rem);letter-spacing:-.032em}
  .cs-signal-number{font-size:3.8rem}
  .cs-company-numbers strong{font-size:1.9rem}
}


/* ===========================================================================
   PART 2 — THEMING
   ---------------------------------------------------------------------------
   The page has two zones: a primary surface (hero, console, outcome, sources)
   and a contrasting "paper" band (problem, investigation, build, decisions).

   In DARK the primary is near-black and the paper is a lifted navy.
   In LIGHT the primary is white and the paper is a soft tint.
   Either way the alternation that gives the page its rhythm survives.

   Dark values are taken from the portfolio's own palette rather than the
   original teal, so the two pages are the same dark mode, not two of them.
   =========================================================================== */

.complaint-study{
  /* primary surface */
  --cs-bg:#FFFFFF;
  --cs-text:#0F172A;
  --cs-muted:#475569;
  --cs-soft:#94A3B8;
  --cs-accent:#1D4ED8;
  --cs-mint:#1D4ED8;              /* legacy name kept so base rules still work */
  --cs-line:#E5E9F0;
  --cs-line-2:#CBD5E1;
  --cs-track:#E2E8F0;

  /* contrasting band */
  --cs-paper:#F5F8FB;
  --cs-paper-text:#0F172A;
  --cs-paper-muted:#475569;
  --cs-paper-soft:#64748B;
  --cs-paper-line:#DDE5EE;
  --cs-paper-card:#FFFFFF;
  --cs-paper-card-line:#E1E8F0;

  /* screenshot chrome — the images themselves are dark, so its bar is neutral */
  --cs-chrome:#F1F5F9;
  --cs-chrome-text:#64748B;
  --cs-chrome-line:#CBD5E1;
  --cs-shot-line:#CBD5E1;

  background:var(--cs-bg);
  color:var(--cs-text);
  transition:background .22s ease,color .22s ease;
}

[data-theme="dark"] .complaint-study{
  --cs-bg:#0B0F1A;
  --cs-text:#E8EDF5;
  --cs-muted:#A3B0C2;
  --cs-soft:#6E7C90;
  --cs-accent:#60A5FA;
  --cs-mint:#60A5FA;
  --cs-line:#212A38;
  --cs-line-2:#2F3A4C;
  --cs-track:#1B2331;

  --cs-paper:#111726;
  --cs-paper-text:#E8EDF5;
  --cs-paper-muted:#A3B0C2;
  --cs-paper-soft:#8494A8;
  --cs-paper-line:#242E3F;
  --cs-paper-card:#1A2130;
  --cs-paper-card-line:#2A3547;

  --cs-chrome:#161D2A;
  --cs-chrome-text:#8494A8;
  --cs-chrome-line:#2F3A4C;
  --cs-shot-line:#2F3A4C;
}

/* --- primary surface ---------------------------------------------------- */
.complaint-study a:hover{color:var(--cs-accent)}
.complaint-study a:focus-visible{outline-color:var(--cs-accent)}
.cs-nav{border-bottom-color:var(--cs-line)}
.cs-monogram{border-color:var(--cs-line-2)}
.cs-eyebrow{color:var(--cs-accent)}
.cs-dot{background:var(--cs-accent)}
.cs-divider{color:var(--cs-soft)}
.cs-outline{color:var(--cs-accent)}
.cs-intro{color:var(--cs-muted)}
.cs-cta{border-bottom-color:var(--cs-accent);color:var(--cs-accent)!important}

.cs-signal{border-left-color:var(--cs-line)}
.cs-signal .cs-kicker{color:var(--cs-soft)}
.cs-signal-number{color:var(--cs-accent)}
.cs-signal p{color:var(--cs-muted)}
.cs-signal-track{background:var(--cs-track)}
.cs-signal-track>span{background:var(--cs-accent)}
.cs-signal-legend{color:var(--cs-soft)}
.cs-rule>span{color:var(--cs-soft)}

.cs-project-meta{border-top-color:var(--cs-line)}
.cs-project-meta span{color:var(--cs-soft)}
.cs-section-top>a{color:var(--cs-soft)}

.cs-window-label{background:var(--cs-chrome);color:var(--cs-chrome-text);border-color:var(--cs-chrome-line)}
.cs-console img{border-color:var(--cs-shot-line)}
.cs-console figcaption{color:var(--cs-soft)}

.cs-metrics>div{border-left-color:var(--cs-line)}
.cs-metrics span{color:var(--cs-soft)}

.cs-outcome>.cs-kicker,.cs-next .cs-kicker{color:var(--cs-accent)}
.cs-outcome-grid p{color:var(--cs-muted)}
.cs-outcome-lead{color:var(--cs-text)!important}
.cs-outcome-lead em{color:var(--cs-accent)}
.cs-next{border-top-color:var(--cs-line)}

.cs-sources{border-top-color:var(--cs-line);color:var(--cs-muted)}
.cs-footer{border-top-color:var(--cs-line);color:var(--cs-soft)}
.skip-link{background:var(--cs-text);color:var(--cs-bg)!important}

/* --- contrasting band --------------------------------------------------- */
.cs-paper{background:var(--cs-paper);color:var(--cs-paper-text)}
.cs-editorial,.cs-build,.cs-investigation{border-bottom-color:var(--cs-paper-line)}
.cs-section-label{color:var(--cs-paper-soft)}
.cs-story>p{color:var(--cs-paper-muted)}
.cs-story blockquote{border-left-color:var(--cs-accent);color:var(--cs-accent)}
.cs-build .cs-small,.cs-investigation .cs-small{color:var(--cs-paper-soft)}

.cs-flow>div{border-top-color:var(--cs-accent);background:var(--cs-paper-card);
  border-right:1px solid var(--cs-paper-card-line);
  border-bottom:1px solid var(--cs-paper-card-line);
  border-left:1px solid var(--cs-paper-card-line)}
.cs-flow>div>span{color:var(--cs-paper-soft)}
.cs-flow p{color:var(--cs-paper-muted)}
.cs-flow>b{color:var(--cs-paper-soft)}

.cs-note-number{border-color:var(--cs-paper-card-line);color:var(--cs-paper-muted)}
.cs-build-notes p{color:var(--cs-paper-muted)}
.cs-decision{border-top-color:var(--cs-paper-line)}
.cs-decision>span{color:var(--cs-paper-soft)}
.cs-decision p{color:var(--cs-paper-muted)}

.cs-product-bars i{background:var(--cs-accent)}
.cs-product-bars>div:nth-child(2) i{background:color-mix(in srgb,var(--cs-accent) 62%,var(--cs-paper-soft))}
.cs-product-bars>div:nth-child(3) i{background:var(--cs-paper-soft)}

.cs-investigation-intro>p{color:var(--cs-paper-muted)}
.cs-comparison>article{background:var(--cs-paper-card);border-top-color:var(--cs-accent);
  border-right:1px solid var(--cs-paper-card-line);
  border-bottom:1px solid var(--cs-paper-card-line);
  border-left:1px solid var(--cs-paper-card-line)}
.cs-comparison>article:nth-child(2){border-top-color:color-mix(in srgb,var(--cs-accent) 62%,var(--cs-paper-soft))}
.cs-company-numbers span{color:var(--cs-paper-soft)}
.cs-comparison p{color:var(--cs-paper-muted)}
.cs-comparison b{color:var(--cs-paper-text)}
.cs-evidence-note{color:var(--cs-paper-soft)}

.cs-evidence-label{background:var(--cs-chrome);color:var(--cs-chrome-text)}
.cs-evidence-label a{color:var(--cs-accent)}
.cs-evidence img{border-color:var(--cs-shot-line)}
.cs-evidence figcaption{color:var(--cs-paper-soft)}

.cs-aip-note{border-top-color:var(--cs-paper-line)}
.cs-aip-note p{color:var(--cs-paper-muted)}
.cs-aip-note a{color:var(--cs-accent)}
.cs-aip-note a:hover{color:var(--cs-paper-text)}


/* ===========================================================================
   PART 3 — the toggle itself, styled to match the portfolio's
   =========================================================================== */

.cs-theme{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:100px;
  border:1px solid var(--cs-line-2);background:transparent;
  color:var(--cs-muted);cursor:pointer;flex:none;padding:0;
  transition:color .18s ease,border-color .18s ease;
}
.cs-theme:hover{color:var(--cs-accent);border-color:var(--cs-accent)}
.cs-theme svg{display:block}
.cs-theme .ic-moon{display:none}
[data-theme="dark"] .cs-theme .ic-sun{display:none}
[data-theme="dark"] .cs-theme .ic-moon{display:block}
.cs-nav nav{align-items:center}

@media(prefers-reduced-motion:reduce){
  .complaint-study,.cs-theme{transition:none}
}

/* the print sheet in the base file assumes a dark page; neutralise it */
@media print{
  .complaint-study{background:#fff!important;color:#0F172A!important}
  .cs-paper{background:#fff!important}
}


/* ===========================================================================
   PART 4 — SCALE
   ---------------------------------------------------------------------------
   Two things were undersized for the weight they carry:

     · the mono section labels (01 / 02 / 03 …) sat at .75rem, small enough
       to read as metadata rather than as navigation through the piece
     · the standalone statement headings — the AIP note, each decision — used
       the same 1.2rem as the small cards inside a three-up grid, so a full
       -width statement and a card subtitle were the same size

   Card headings inside grids stay where they are; the grid is what sets
   their scale, and enlarging them would break the columns.
   =========================================================================== */

/* mono labels — still labels, just legible ones */
.cs-eyebrow,.cs-kicker,.cs-section-label{font-size:.82rem}

/* full-width statement headings step up toward h2 */
.cs-aip-note h3{
  font-size:clamp(1.45rem,2.5vw,2.05rem);
  line-height:1.22;
  letter-spacing:-.022em;
}
.cs-decision h3{font-size:1.28rem;line-height:1.28}
.cs-build-notes h3{font-size:1.12rem}

@media(max-width:600px){
  .cs-eyebrow,.cs-kicker,.cs-section-label{font-size:.78rem}
  .cs-aip-note h3{font-size:1.4rem}
  .cs-decision h3{font-size:1.18rem}
}
/* ===========================================================================
   LIVE COMPANION — append to complaint-operations-type.css
   Styles for the embedded Streamlit replica section.
   =========================================================================== */

.cs-live-intro{
  display:grid;
  grid-template-columns:1fr 1.35fr;
  gap:50px;
  align-items:start;
  margin-bottom:30px;
}
.cs-live-intro p{color:var(--cs-muted);margin-top:0}
.cs-live-intro p + p{margin-top:16px}
.cs-live-intro a{color:var(--cs-accent);text-decoration:underline;text-underline-offset:4px}
.cs-live-intro code{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:.86em;color:var(--cs-text);
}

.cs-live-note{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:22px;
  align-items:start;
  border-top:1px solid var(--cs-line);
  border-bottom:1px solid var(--cs-line);
  padding:26px 0;
  margin-bottom:34px;
}
.cs-live-note .cs-note-number{margin-bottom:0}
.cs-live-note h3{margin-bottom:12px}
.cs-live-note p{color:var(--cs-muted)}
.cs-live-note p + p{margin-top:12px}

.cs-live iframe{
  display:block;
  width:100%;
  height:760px;
  border:1px solid var(--cs-shot-line);
  border-top:0;
  background:var(--cs-bg);
}
.cs-live figcaption{
  font-size:.875rem;
  color:var(--cs-soft);
  padding:15px 0 0;
  max-width:80ch;
}
.cs-live figcaption a{
  color:var(--cs-accent);
  text-decoration:underline;
  text-underline-offset:4px;
  white-space:nowrap;
}

@media(max-width:900px){
  .cs-live-intro{grid-template-columns:1fr;gap:20px}
  .cs-live iframe{height:640px}
}
@media(max-width:600px){
  .cs-live-note{grid-template-columns:1fr;gap:14px}
  .cs-live iframe{height:560px}
}