/* VijAI · page stylesheet for row 30 · /gate-pass-system-contract-labour
   Register 08, 4 October 2026. T3 v4.

   DERIVED FROM vijai-drillreq.css (row 27) rather than written from scratch, because the
   class set a T3 v4 body needs is the same and divergence is how two pages stop looking
   like one site.

   IT DECLARES .cbody, .lead2 AND .note ITSELF. Those three are NOT all in vijai-base.css:
   .cbody is, .lead2 and .note are not. Every approved page carries its own. Sealed row 28's
   sheet omits them, which is a measured defect on that page, and the reason this comment
   exists is so the next sheet does not inherit it.

   Added for this page only, below the inherited block:
     .spec dl table / .spec .specrow  worked-checklist rows, seven of them
     .take pre                        the nine-line take-away, wider gutter than row 27
     .dlaw                            repealed-vs-in-force pair, reused from row 27 as-is
   No new colour enters the file. Brand palette only · no green anywhere.
*/

/* ── the reading column ──────────────────────────────────────────────────── */
.cbody{max-width:920px}
.cbody h2{font-size:clamp(24px,3.1vw,36px);margin:64px 0 16px;max-width:24ch}
.cbody h2:first-of-type{margin-top:0}
.cbody p{font-size:16px;line-height:1.72;color:var(--dtx2);margin:0 0 16px;max-width:70ch}
.cbody p b{color:#fff;font-weight:600}
.lead2{font-size:17.5px;color:var(--dtx);font-weight:500;letter-spacing:-.008em}
.note{font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.03em;color:var(--dtx3);
  border-left:2px solid var(--line);padding-left:16px;line-height:1.75;max-width:66ch}

/* ── the head-term deck line under the H1 ────────────────────────────────── */
.dsub{font:600 13px/1.6 "IBM Plex Mono",monospace;letter-spacing:.04em;
  color:var(--cy);margin:0 0 18px}

/* ── THE CORRECTABLE ERROR · the signature block of this page ─────────────
   Two panels. Left is what the market is being told, outlined in amber because
   amber is the brand's caution signal. Right is what binds, outlined in cyan.
   No red: red is reserved for a failure state and a repealed statute is not one. */
.dlaw{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:28px 0}
.dlawc{padding:19px 21px;border:1px solid var(--line);border-radius:4px;background:var(--ink2)}
.dlawc.is-stale{border-color:var(--amb);background:rgba(240,165,0,.05)}
.dlawc.is-live{border-color:var(--cy);background:rgba(0,185,242,.06)}
.dlawc .t{display:block;font:600 10.5px/1.5 "IBM Plex Mono",monospace;letter-spacing:.16em;
  text-transform:uppercase;margin-bottom:9px;color:var(--dtx3)}
.dlawc.is-stale .t{color:var(--amb)}
.dlawc.is-live .t{color:var(--cy)}
.dlawc b{display:block;color:#fff;font-size:17.5px;line-height:1.35;font-weight:600;
  letter-spacing:-.012em;margin-bottom:9px}
.dlawc p{margin:0;color:var(--dtx2);font-size:14.5px;line-height:1.62;max-width:none}
@media(max-width:760px){.dlaw{grid-template-columns:minmax(0,1fr)}}

/* ── the statutory chain · rule by rule ──────────────────────────────────── */
.drule{margin:26px 0;border:1px solid var(--line);border-radius:4px;overflow:hidden}
.drulei{display:grid;grid-template-columns:168px minmax(0,1fr);gap:0 20px;
  padding:17px 21px;border-top:1px solid var(--line);align-items:start}
.drulei:first-child{border-top:0;background:var(--ink2)}
.drulei .r{font:600 11.5px/1.65 "IBM Plex Mono",monospace;letter-spacing:.1em;
  text-transform:uppercase;color:var(--cy)}
.drulei p{margin:0;color:var(--dtx2);font-size:14.5px;line-height:1.62;max-width:none}
.drulei p b{color:#fff}
@media(max-width:680px){
  .drulei{grid-template-columns:minmax(0,1fr);gap:7px 0}
  .drulei .r{letter-spacing:.14em}}

/* ── the measured line · our own number, labelled as ours ────────────────── */
.dmeas{margin:30px 0;padding:22px 24px;border-left:3px solid var(--cy);
  background:rgba(0,185,242,.05)}
.dmeas b{display:block;font-size:clamp(19px,2.4vw,25px);line-height:1.25;
  color:var(--dtx);font-weight:700}
.dmeas b+b{margin-top:6px;color:var(--cy)}
.dmeas .src{display:block;margin-top:12px;font:400 12.5px/1.6 "IBM Plex Mono",monospace;
  color:var(--dtx3)}
/* a bold INSIDE the source line is an emphasis, not a second headline. Without this it
   inherits .dmeas b and renders at clamp(19px,2.4vw,25px) in the middle of 12.5px mono,
   which is what the preview showed on the first pass. */
.dmeas .src b{display:inline;font-size:inherit;line-height:inherit;font-weight:700;
  color:var(--dtx)}
.dmeas .src i{font-style:italic;color:var(--dtx2)}

/* ── THE MID-PAGE OFFER BAND ─────────────────────────────────────────────────
   Not a .ctarow · see the note in the page source. The T3 structure gate indexes
   CTA 3 and CTA 4 by document order, so a sixth ctarow would shift them. This does
   the commercial job with an anchor into the enquiry block instead.
   Cyan border, because this is the one block on the page that is an offer. */
.doffer{margin:30px 0;padding:22px 24px;border:1px solid var(--cy);border-radius:4px;
  background:rgba(0,185,242,.06);max-width:70ch}
.doffer .t{display:block;font:600 10.5px/1.5 "IBM Plex Mono",monospace;letter-spacing:.18em;
  text-transform:uppercase;color:var(--cy);margin-bottom:10px}
.doffer b{display:block;color:#fff;font-size:clamp(17px,2.1vw,21px);line-height:1.3;
  font-weight:700;letter-spacing:-.012em;margin-bottom:10px}
.doffer p{margin:0;color:var(--dtx2);font-size:15px;line-height:1.62;max-width:none}
.doffer p b{display:inline;font-size:inherit;line-height:inherit;margin:0;color:#fff}
.olink{display:inline-block;margin-top:14px;font:600 14px/1 "DM Sans",system-ui,sans-serif;
  color:var(--cy);text-decoration:none;border-bottom:1px solid var(--cyd);padding-bottom:3px}
.olink:hover{color:#fff;border-bottom-color:var(--cy)}
@media(max-width:640px){.doffer{padding:18px}}

/* ── the state table · five directorates ─────────────────────────────────── */
.tw{overflow-x:auto;border:1px solid var(--line);background:rgba(255,255,255,.02);
  margin:0 0 22px;border-radius:14px}
table.cmp{border-collapse:collapse;width:100%;min-width:660px;font-size:14.5px;table-layout:fixed}
table.cmp th{font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dtx3);font-weight:600;text-align:left;
  padding:15px 18px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.03)}
table.cmp td{padding:17px 18px;border-bottom:1px solid var(--line);vertical-align:top;
  color:var(--dtx2);line-height:1.55}
table.cmp tr:last-child td{border-bottom:0}
table.cmp td b{color:#fff}
table.cmp td:first-child,table.cmp th:first-child{width:24%;min-width:150px}

/* ── the interval callout · the one number the page is built to land ─────── */
.closeline{border:1px solid var(--cyd);border-radius:14px;padding:22px 24px;margin:0 0 22px;
  background:rgba(0,185,242,.06);max-width:70ch}
.closeline b{display:block;color:var(--cy);font-family:"IBM Plex Mono",monospace;font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;margin-bottom:8px;font-weight:600}
.closeline span{display:block;color:#fff;font-size:19px;line-height:1.45;font-weight:600;
  letter-spacing:-.012em}
.closeline i{display:block;font-style:normal;color:var(--dtx2);font-size:15px;
  line-height:1.6;margin-top:10px}

/* ── the ladder carries FOUR cards on this page, not three ───────────────────
   The locked template's .ladder is a hard repeat(3,...), which leaves the fourth
   card alone on a second row with two empty tracks beside it. Overridden HERE, in
   the page stylesheet, so the locked t3 file is not touched: four across when there
   is room, two-by-two in the middle band, one column on a phone.
   This page needs four because the L2 card is in by the CEO's ruling on D1. */
.ladder{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1180px){.ladder{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.ladder{grid-template-columns:minmax(0,1fr)}}

/* THE GO LINK IN A LADDER CARD HAS NEVER BEEN STYLED. The locked t3 stylesheet
   defines .lcard .lay, .lcard b and .lcard p, and nothing for .go · .go exists only
   as ".rc .go" in the base file, which is the HOMEPAGE resource card. A .go span
   inside an unstyled <a> therefore falls back to the browser's default link blue,
   and blue is not in the brand set. It is rendering that way right now on rows 19,
   21 and 28. Fixed here for this page only; the estate fix is one line in the
   locked t3 file and needs a CR. */
.lcard .go{display:inline-block;margin-top:10px;font-size:14px;font-weight:600;color:var(--cy)}
.lcard:hover .go{color:#fff}
/* and the anchor itself: the locked rule sets no colour, so .lcard computes to the
   browser default rgb(0,0,238). Every child overrides it today, which is why nobody
   saw it · but one unwrapped word in a future card would render blue. Closed. */
.lcard{color:var(--dtx2)}

/* ── CR-13 · the five CTA positions, one button per row ──────────────────── */
.ctarow{margin:30px 0 4px}
.cbody .ctarow{margin:34px 0 10px}

@media(max-width:640px){
  .cbody h2{margin-top:46px}
  .closeline{padding:18px}
  .closeline span{font-size:17px}
  .dlawc{padding:16px 18px}
  .dlawc b{font-size:16px}}

/* ── 02b IS IN ON THIS PAGE · CEO ruling 2 October 2026 ──────────────────────
   The hero is a normal two-column T3 hero and the PulseAI muster engine fills the
   stage. The .t3solo single-column override that was here is DELETED, not left as
   dead code: this page carries the module animation like every other PulseAI page.
   The deck line is the one hero element the locked grid does not already size. */
.t3hero .dsub{max-width:46ch}


/* ---- row 30 additions ---------------------------------------------------- */

/* The worked checklist is seven rows of dt/dd rather than row 27's ten, so the label
   column is narrower and the value column carries more. */
.spec dl{margin:0}
.spec .specrow dt{min-width:190px}

/* Nine lines of fixed-pitch text with a rule-of-thumb footer. Row 27's take-away is
   twenty-six lines, so this one is set tighter and does not need the scroll. */
.take pre{font-size:12.5px;line-height:1.62;padding:16px 18px 18px}
@media(max-width:560px){.take pre{font-size:11.5px;line-height:1.55}}

/* The copy and print controls are wired on this page. Give the pressed state something
   to say so the confirmation is visible, since the label swaps to "Copied". */
.take .tbtn{cursor:pointer}
.take .tbtn:focus-visible{outline:2px solid var(--cy);outline-offset:2px}
