/* =============================================================================
   AssayBase — /saas-hiring-trends. The editorial weekly report layout.

   Plain-English: this file is the hiring page's own layout and nothing else.
   Everything reusable (buttons, inputs, charts, deltas) is in components.css,
   and every colour and size comes from tokens.css. The design reference for
   this page was written with all its styling inline; those inline values are
   translated here into classes, and each one maps back to a token — there is
   no colour written out in this file, which is what tools/design_lint.py
   checks.

   The page reads as a weekly issue: a top bar, a hero with a strip of five
   figures, then numbered chapters 01-05, one of them on light paper, and a
   dashed call to action at the end.
   ========================================================================== */

/* The whole report sits in one bordered sheet, centred. */
/* Inside the report's bordered sheet the header uses the sheet's own side
   padding (100px, the width the design was drawn at) instead of the window-wide
   value. One token, re-pointed for this one page. */
.report{max-width:1240px;margin:0 auto;background:var(--black);
        --head-pad:var(--report-pad);
        border-left:var(--bw) solid var(--line);border-right:var(--bw) solid var(--line);
        border-bottom:var(--bw) solid var(--line)}
.report-band{padding:48px var(--report-pad);border-top:var(--bw) solid var(--line)}
.report-band--last{padding-bottom:64px}
.report-band--cta{padding:0 var(--report-pad) 56px;border-top:0}

/* The old single top bar is gone: the report now carries the shared two-tier
   header (components.css), whose Tier 2 holds the chapter links. The issue and
   week line sits in the "00 Key numbers" header above the hero strip. */

/* -------------------------------------------------------------------- hero */
.hero-band{padding:72px var(--report-pad) 56px}
.hero-kicker{font:600 var(--fs-mono-eyebrow)/1 var(--mono);letter-spacing:.1em;
             color:var(--mint);margin:0 0 16px}
.hero-band h1{font:600 52px/1 var(--display);letter-spacing:-.05em;color:var(--text);
              margin:0;max-width:20ch}
.hero-sub{font:500 20px/1.3 var(--display);letter-spacing:-.02em;color:var(--muted);
          margin:14px 0 0}
.hero-lede{font:400 17px/1.55 var(--sans);color:var(--muted);max-width:60ch;margin:18px 0 0}

/* Five figures on ONE row. The design draws them with 48px gaps; at the report's
   1240px that leaves the fifth hanging off the end, so the gap is 32px here and
   a long label is allowed to run onto a second line. Five stats in a row is the
   point of the strip — a fifth stat on its own line is not the design. */
.hero-stats{display:flex;gap:32px;margin-top:44px;
            border-top:var(--bw) solid var(--line);padding-top:28px}
/* The strip now sits under its own "00 Key numbers" header. That header already
   draws the line across the top of the strip, so the strip drops the line and
   the space it used to hold — otherwise the page shows two rules one under the
   other. The header keeps the distance from the lede that the strip used to. */
/* 50% more room than the 28px every other chapter gets below its header
   (.chapter's own margin-bottom) — same mechanism, just a bigger number for
   this one chapter. No --sp-* token lands on 42, so it's a raw value. */
.chapter--hero{margin-top:44px}
.chapter.chapter--hero{margin-bottom:42px}
.chapter--hero+.hero-stats{margin-top:0;border-top:0;padding-top:0}
.hero-stat{flex:1 1 0;min-width:0}
.hero-stat+.hero-stat{border-left:var(--bw) solid var(--line);padding-left:32px}
.hero-stat-value{font:700 38px/1 var(--mono);letter-spacing:-.02em;color:var(--text)}
.hero-stat-value.is-accent{color:var(--mint)}
.hero-stat-label{font:500 10px/1.4 var(--mono);letter-spacing:.08em;color:var(--muted);
                 margin:10px 0 0;text-transform:uppercase}
/* A delta is not a label: its unit stays lowercase, and it never breaks. */
.hero-stat-label .delta{font:500 10px/1.4 var(--mono);text-transform:none;
                        white-space:nowrap}
/* One quiet line for a cell whose figure and whose arrow are measured
   differently: the figure is this week's share, the arrow is the matched-panel
   change. Lower case on purpose — it is a footnote, not a second label. */
.hero-stat-note{font:500 var(--fs-mono-micro)/1.4 var(--mono);color:var(--muted-2);
                margin:6px 0 0}

/* --------------------------------------------------------- chapter headers */
/* Number, title, a rule that fills whatever is left, and an optional note. */
.chapter{display:flex;gap:var(--sp-16);align-items:center;margin-bottom:28px;flex-wrap:wrap}
.chapter-no{font:600 var(--fs-mono-eyebrow)/1 var(--mono);letter-spacing:.1em;color:var(--mint)}
.chapter h2{font:600 22px/1.2 var(--display);letter-spacing:-.03em;color:var(--text);margin:0}
.chapter-rule{flex:1;height:1px;background:var(--line);min-width:24px}
.chapter-note{font:500 var(--fs-mono-eyebrow)/1 var(--mono);color:var(--muted-2)}
.chapter-badge{font:600 9px/1 var(--mono);letter-spacing:.08em;color:var(--mint);
               border:var(--bw) solid var(--mint);padding:4px 7px}
/* On the light paper section the same header flips colour. */
.on-light .chapter-no{color:var(--accent-on-light)}
.on-light .chapter h2{color:var(--ink-on-light)}
.on-light .chapter-rule{background:var(--paper-line)}

/* ------------------------------------------------------- two-column spreads */
.spread{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.spread--index{grid-template-columns:7fr 5fr}
.col-head{font:500 var(--fs-mono-label)/1.4 var(--mono);color:var(--muted);margin:0 0 14px}
.col-head .quiet{color:var(--muted-2)}

/* ------------------------------------------------------- 01 the index card */
.index-card{border:var(--bw) solid var(--line);padding:var(--sp-24)}
.index-card .chart--editorial{height:210px;width:100%}
.index-axis{display:flex;justify-content:space-between;margin-top:6px}
.index-axis span{font:500 10px/1 var(--mono);color:var(--muted)}
.index-axis .baseline-tag{font:600 9px/1 var(--mono);letter-spacing:.08em;color:var(--muted-2)}
.index-figure{display:flex;gap:var(--sp-12);align-items:baseline;flex-wrap:wrap}
.index-figure .stat{font:700 54px/1 var(--mono);letter-spacing:-.02em;color:var(--mint)}
.index-prose{font:400 15px/1.65 var(--sans);color:var(--muted);margin:18px 0 0;max-width:44ch}

/* ------------------------------------------- 02 key numbers, on light paper */
.paper-band{background:var(--paper);padding:56px var(--report-pad)}
.paper-sub{font:500 var(--fs-mono-label)/1.5 var(--mono);color:var(--body-on-light);
           margin:0 0 28px}
.paper-foot{font:400 13px/1.6 var(--sans);color:var(--body-on-light);margin:16px 0 0}
/* The 1px-gap grid: the container is the rule colour and shows through. */
.tile-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--bw);
           background:var(--paper-line);border:var(--bw) solid var(--paper-line)}
.tile{background:var(--paper);padding:22px}
.tile-value{font:700 38px/1 var(--mono);letter-spacing:-.02em;color:var(--ink-on-light)}
.tile-value--pair{white-space:nowrap;font-size:30px}
.tile-unit{font-size:22px}
.tile-caption{font:400 13px/1.5 var(--sans);color:var(--body-on-light);margin:12px 0 0}
.tile-note{font:600 var(--fs-mono-micro)/1 var(--mono);letter-spacing:.08em;
           color:var(--muted-2);margin-left:var(--sp-8)}
.tile .delta{margin-left:var(--sp-8);font:500 var(--fs-mono-eyebrow)/1 var(--mono)}

/* ------------------------------------------------- 03 the featured GTM card */
/* The page's one emphasised object: an accent border and a hard offset shadow,
   never a blur. 14px per the design (design-language v1.2). */
.feature{border:var(--bw) solid var(--mint);box-shadow:var(--shadow-pop-tight);
         padding:var(--sp-24)}
.feature-head{display:flex;justify-content:space-between;align-items:baseline;
              gap:var(--sp-16);flex-wrap:wrap;margin-bottom:14px}
.feature-head p{font:500 var(--fs-mono-label)/1.5 var(--mono);color:var(--muted);margin:0}
.legend-inline{display:flex;gap:18px}
.legend-inline span{display:flex;gap:6px;align-items:center;
                    font:500 var(--fs-mono-label)/1 var(--mono);color:var(--muted)}
.legend-inline i{width:10px;height:10px;display:inline-block}
.legend-inline i.s1{background:var(--chart-1)}
.legend-inline i.s2{background:var(--chart-2)}
.feature-cols{display:grid;grid-template-columns:1fr 1fr;gap:44px}
.sub-head{font:600 10px/1 var(--mono);letter-spacing:.1em;color:var(--muted);margin:0 0 10px}
.sub-head .quiet{color:var(--muted-2)}

/* Paired bars: product-led over sales-led, two thin bars sharing a row.
   Eleven rows now sit in this column instead of six, so the row pitch is
   tighter — the column keeps the height the design drew. */
.pair-row{display:grid;grid-template-columns:104px 1fr 74px;gap:10px;
          align-items:center;padding:2px 0;cursor:default}
.pair-label{font:400 12px/1.3 var(--sans);color:var(--text)}
.pair-bar{height:7px}
.pair-bar.s1{background:var(--chart-1);margin-bottom:2px}
.pair-bar.s2{background:var(--chart-2)}
.pair-value{font:500 10px/1.3 var(--mono);color:var(--muted-2);text-align:right}

/* The authored commentary, under the featured card. */
.reading{border-left:6px solid var(--mint);background:var(--panel);
         padding:20px var(--sp-24);margin-top:32px}
.reading-kicker{font:600 var(--fs-mono-eyebrow)/1 var(--mono);letter-spacing:.1em;
                color:var(--mint);margin:0 0 10px}
.reading p{font:400 15px/1.65 var(--sans);color:var(--text);max-width:70ch;margin:0}

/* ---------------------------------------------- 04 single-bar list rows */
/* Twelve rows in the share list and eleven in the leadership list, so the pitch
   is tighter and the bar a little thinner than the six-row version. */
/* The share column now carries a count, a share AND an arrow ("4,839 · 31.9%
   ▼ −0.1"), so its value slot is wider than the leadership one beside it. */
.bar-row{display:grid;grid-template-columns:104px 1fr 164px;gap:10px;
         align-items:center;padding:2px 0;cursor:default}
.bar-row--lead{grid-template-columns:118px 1fr 92px}
.bar-label{font:400 13px/1.3 var(--sans);color:var(--text)}
.bar-track{height:9px;background:var(--panel-3)}
.bar-fill{height:9px;background:var(--chart-1)}
.bar-value{font:500 var(--fs-mono-eyebrow)/1.3 var(--mono);color:var(--text);text-align:right;
           white-space:nowrap}
.bar-value .delta{font:500 var(--fs-mono-eyebrow)/1.3 var(--mono)}

/* ------------------------------------------------ 05 size + country table */
.chart--bars{width:100%;height:auto;display:block}
.size-caption{font:400 13px/1.6 var(--sans);color:var(--muted);margin:14px 0 0}
.ctable{display:block}
.ctable-head,.ctable-row{display:grid;grid-template-columns:1fr 72px 84px 96px;gap:8px}
.ctable-head{padding:8px 0;border-bottom:var(--bw) solid var(--line)}
.ctable-head span{font:500 var(--fs-mono-eyebrow)/1 var(--mono);color:var(--muted);
                  text-align:right;text-transform:uppercase}
.ctable-head span:first-child{text-align:left}
.ctable-row{padding:10px 0;border-bottom:var(--bw) solid var(--line-soft);align-items:center}
.ctable-row:last-child{border-bottom:0}
.ctable-name{font:400 14px/1.3 var(--sans);color:var(--text)}
.ctable-num{font:500 13px/1.3 var(--mono);color:var(--text);text-align:right}
.ctable-fn{font:400 13px/1.3 var(--sans);color:var(--muted);text-align:right}

/* ------------------------------------------------------------ methodology */
/* Kept from the previous page: the design does not show it, but a page of
   numbers that will not say how it made them is not worth citing. Quiet, no
   chapter number, immediately before the call to action. */
.method{border-top:var(--bw) solid var(--line);padding-top:28px}
.method h2{font:500 var(--fs-mono-label)/1.4 var(--mono);color:var(--muted);margin:0 0 14px}
.method p{font:400 13px/1.7 var(--sans);color:var(--muted-2);max-width:88ch;margin:0 0 10px}
.method p:last-child{margin-bottom:0}

/* -------------------------------------------------------------------- CTA */
.cta{border:var(--bw) dashed var(--mint);padding:20px var(--sp-24);display:flex;
     justify-content:space-between;align-items:center;gap:var(--sp-24);flex-wrap:wrap}
.cta-copy strong{font:700 15px/1.3 var(--sans);color:var(--text);display:block}
.cta-copy p{font:400 13px/1.5 var(--sans);color:var(--muted);margin:4px 0 0}
.cta form{display:flex;flex-direction:column;gap:10px;align-items:flex-end}
.cta-line{display:flex;gap:var(--sp-8);align-items:center;flex-wrap:wrap}
.cta .input{width:200px;font:400 13px/1.3 var(--sans)}
.cta .form-status{margin:0;text-align:right;width:100%}

/* ------------------------------------------------------------- responsive */
@media(max-width:1100px){
  .spread,.spread--index,.feature-cols,.tile-grid{grid-template-columns:1fr}
  .tile-grid{gap:var(--bw)}
  .hero-stats{gap:var(--sp-20);flex-wrap:wrap}
  .hero-stat{flex:1 1 30%}
  .hero-stat+.hero-stat{padding-left:var(--sp-20)}
}

@media(max-width:760px){
  .report{border-left:0;border-right:0}
  .report-band,.hero-band,.paper-band{padding-left:var(--sp-20);padding-right:var(--sp-20)}
  .report-band--cta{padding-left:var(--sp-20);padding-right:var(--sp-20)}
  /* The sheet loses its side padding on a phone, and so does the header in it. */
  .report{--head-pad:var(--sp-20)}
  .hero-band{padding-top:44px}
  .hero-band h1{font-size:36px}
  .hero-sub{font-size:17px}
  .hero-lede{font-size:15px}
  .hero-stats{gap:var(--sp-16);padding-top:var(--sp-20)}
  .hero-stat{min-width:44%}
  .hero-stat+.hero-stat{border-left:0;padding-left:0}
  .hero-stat-value{font-size:28px}
  .index-figure .stat{font-size:40px}
  .tile-value{font-size:30px}
  .pair-row{grid-template-columns:88px 1fr 62px;gap:8px}
  .bar-row{grid-template-columns:90px 1fr 136px;gap:8px}
  .bar-row--lead{grid-template-columns:96px 1fr 86px;gap:8px}
  .ctable-head,.ctable-row{grid-template-columns:1fr 56px 64px;gap:6px}
  .ctable-fn{display:none}
  .cta form{align-items:stretch;width:100%}
  .cta-line{width:100%}
  .cta .input,.cta .btn{width:100%}
}