/* ==========================================================================
   tech-audit.css - the sample audit page, and nothing else loads it.

   WHAT THIS PAGE IS. tools.html sells the Website Technical Audit in a card.
   This page runs one, end to end, on a site that does not exist, so the
   visitor reads a finished report before giving anyone an address. It is the
   second page on this site whose main content is generated at runtime, and it
   takes the same exception daily-brief.css states for the first: the pitch,
   the picker, the "what 41 checks cover" section and the closer are real
   markup and are what a crawler reads. What JavaScript builds is the SPECIMEN.

   THE SPECIMEN IS AN INVENTED SITE, not the visitor's. js/tech-audit.js
   carries the argument at its head and it is a design constraint rather than a
   caveat: this page may not print invented defects about a real domain.

   WHITE LABEL. Same rule as tools.html and daily-brief.css. The provider is
   named in docs/brief.md and appears nowhere in this sheet, in tech-audit.html,
   in js/tech-audit.js, or in a comment in any of them - and it is the reason
   this page exists as its own file rather than as the prototype in tools/
   dropped into place, which carries the provider's product name, wordmark,
   palette and both its typefaces on every screen.

   TOKENS, NOT VALUES. Everything here is base.css's own scale. The one thing
   this sheet declares of its own is the severity ramp, and it is mixed from
   --red, --d-media and --green rather than picked, so a brand change carries
   it.

   NO SECOND TYPEFACE AND NO MONOSPACE. daily-brief.css records retiring
   fifteen uses of --mono; this sheet never introduces them. Numbers line up on
   font-variant-numeric:tabular-nums, which Libre Franklin has, and every
   micro-label is .eyebrow's exact values rather than a near-miss of them.
   ========================================================================== */

.ta{
  /* Derived, not picked. --red and --green are base.css's semantic pair and
     --d-media is the sanctioned amber from the discipline hues, borrowed here
     for its VALUE rather than its meaning - nothing on this page maps to a
     discipline, so there is no rhyme to break. The soft grounds are the same
     three at 12%, the lightest tint that still holds a boundary against
     --white, and the ink on them is darkened because neither the amber nor
     --green clears 4.5:1 on its own tint at 12px. */
  --bad:var(--red);
  --warn:var(--d-media);
  --good:var(--green);
  --bad-soft:color-mix(in srgb,var(--red) 12%,var(--white));
  --warn-soft:color-mix(in srgb,var(--d-media) 16%,var(--white));
  --good-soft:color-mix(in srgb,var(--green) 12%,var(--white));
  /* The same three again at 6%, for a whole CARD rather than for a chip. 12%
     is right on a 60px pill and shouts on a 700px panel - and the findings
     stack three deep, so a critical run would have been three pink sheets in a
     column. Half the strength keeps severity readable down the left of the
     page without the card becoming the loudest thing on it. */
  --bad-tint:color-mix(in srgb,var(--red) 6%,var(--white));
  --warn-tint:color-mix(in srgb,var(--d-media) 8%,var(--white));
  --bad-ink:#B22525;
  --warn-ink:#8A5B00;
  --good-ink:#2C7A45;
}

.ta-main{padding-bottom:var(--s14)}

/* A stage is a step of the demo, not a section of the page. Only one is ever
   shown, the ask stage is the one that ships open, and every stage's display
   belongs to [data-on="true"] or to nothing - the cascade note in
   daily-brief.css section 02 is the reason that rule is written down. */
.ta-stage{display:none}
.ta-stage[data-on="true"]{display:block}


/* ==========================================================================
   01. Ask
   ONE CENTRED COLUMN. This section was a two-column fold with a redacted
   drawing of the report beside the pitch, and the drawing is gone (client
   direction). The argument it was making - here is the object you are about to
   get - is one the page can simply make by handing over the object, which it
   does seven seconds after the field is used. The market block that briefly
   carried the drawing's caption has gone too: that question and its route line
   are in the report's closer now, where the answer is used. So has the picker
   section - the four written specimens are four chips under the field, in
   base.css's own .tag .tag-btn, which is what daily-brief.html uses for the
   same job.

   CENTRED RATHER THAN RANGED LEFT, and it follows from the removal rather than
   being a taste applied on top of it: with no second column there is no left
   edge for anything to align to, and a 60ch measure ranged left inside a
   1400px wrap is a column of text with half a page of nothing beside it.
   Everything in the column is capped and centred on the same axis - the cards
   keep their own text ranged left, because centring a card's three lines makes
   three ragged edges out of one.
   ========================================================================== */
/* ---- the ground --------------------------------------------------------
   TWO AIMED RADIALS OVER A BASE COLOUR, which is this site's one background
   construction: .map-stage in hero-map.css, .site-footer, .dash-shell and the
   immersive hero are all built exactly this way. What is new is the GROUND -
   every existing one is dark, and this is the first light one - so the washes
   are re-aimed and thinned rather than recoloured, which is what footer.css
   records doing when it quoted the same block for a wide short band.

   IT BLEEDS UP BEHIND THE HEADER, and that is the whole reason it is a
   pseudo-element rather than a background on the section. Painted on .ta-ask
   itself the wash began at the section's own top edge, which is below the
   header - so the page opened with a white band, then a hard horizontal line,
   then the tint. The section cannot simply be moved up: it would take its
   content with it. A ::before pinned 240px above the section paints the header
   band and stops the cut.

   240px IS THE HEADER PLUS ITS AIR, rounded up rather than measured. Above
   901px insights.css makes .ins .site-header transparent with a white pill
   inside it, so the wash runs behind the pill and the pill floats on it, which
   is the arrangement index.html already uses over its own dark stage. Below
   901 the header is a solid white bar with a bottom border - it covers the
   bleed entirely, and there is no cut to fix there because the bar is opaque
   by design.

   z-index:-1 AND NO STACKING CONTEXT ON .ta-ask. The section is position
   relative with no z-index, so it does not open one, and the pseudo-element
   drops behind the section's own content while the header - which does open
   one - stays above it. Adding a z-index to .ta-ask would trap the wash inside
   the section and put the cut straight back.

   ONE HALO, ONE TRAIL. The halo sits over the headline and fades out before it
   reaches the field: the field is a white pill on a white ground and needs that
   ground clean to have an edge at all. The trail off the top right is weaker
   and is what stops the halo reading as a symmetrical vignette - the same
   asymmetry the footer and the hero stage both use.

   --pale AND --lavender, and nothing new. Both are brand purples, so the fold
   is tinted with the colour the site already means something by rather than
   with a grey that would just look like the page had loaded wrong.

   NO PATTERN, NO NOISE, NO GRID. The fold is one control and a sentence; a
   texture behind it would be the loudest thing on a screen whose whole job is
   to get an address typed into a box. */
.ta-ask,
.ta-working{padding:var(--sec) 0;position:relative;background:transparent}
.ta-ask::before,
.ta-working::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  left:0;right:0;bottom:0;top:-240px;
  background:
    radial-gradient(84% 58% at 50% 0%, var(--pale) 0%, transparent 66%),
    radial-gradient(46% 34% at 86% 4%, color-mix(in srgb,var(--lavender) 34%,transparent) 0%, transparent 74%),
    var(--surface);
}

/* THE WORKING STAGE CARRIES THE SAME WASH, RE-AIMED. The ask and the working
   stage are one moment, not two screens - the address is typed and the page
   answers in the same place. If the ground colour changed between them the
   swap would read as a navigation, and the wait would feel like a page load
   rather than a machine thinking. So it is the same two radials over the same
   base, aimed lower and thinner: the working stage centres its content in
   56vh, so a halo pinned to the very top would sit above everything on the
   screen. The report does NOT get it - it is long, and a tint held under
   three thousand pixels of findings stops being an atmosphere and becomes a
   colour the page is painted. */
.ta-working::before{
  background:
    radial-gradient(78% 52% at 50% 18%, var(--pale) 0%, transparent 68%),
    radial-gradient(44% 32% at 88% 6%, color-mix(in srgb,var(--lavender) 26%,transparent) 0%, transparent 76%),
    var(--surface);
}

.ta-hero{max-width:760px;margin:0 auto;text-align:center}
.ta-hero .eyebrow{justify-content:center}
.ta-hero h1{text-wrap:balance}
.ta-lede{
  max-width:62ch;margin:var(--s5) auto 0;
  color:var(--gray);font-size:19px;line-height:31px;text-wrap:pretty;
}

/* ---- the address field -------------------------------------------------
   ONE COMPOSITE CONTROL, declared here because the site does not have one. Its
   parts are all base.css: --r-pill, --line, --white, and .btn btn-fill
   btn-neutral for the button. What is new is the ARRANGEMENT - a prefix, a
   field and a submit sharing one rounded outline - and the reason it earns a
   new component is that the page's whole action is one address: two boxes and
   a button ranged left would read as a form to be filled in, and this reads as
   a thing to be typed into.

   The focus ring goes on the WRAPPER, not on the input. A ring drawn around a
   borderless input inside a pill draws a second rectangle inside the first,
   which is the drift docs/brief.md already records once on the request form's
   own field. */
.ta-form{margin-top:var(--sec-sm);text-align:center}
.ta-form-h{
  display:block;font-family:inherit;
  font-size:30px;font-weight:500;line-height:37.5px;letter-spacing:-.01em;color:var(--black);
}
.ta-url{
  display:flex;align-items:center;gap:var(--s2);
  max-width:640px;margin:var(--s5) auto 0;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-pill);
  padding:6px 6px 6px var(--s5);
  transition:border-color 200ms var(--ease),box-shadow 200ms var(--ease);
}
.ta-url:focus-within{border-color:var(--purple);box-shadow:0 0 0 3px var(--pale)}
/* NEVER COLOUR ALONE, and never a message alone either. brief-form.css states
   the rule and enforces it with .brief-row input[aria-invalid] - but the
   selector is scoped to .brief-row, which this pill is not, so the field the
   message is about carried no mark at all. The border thickens to --bad while
   aria-invalid is set. Focus still wins: somebody who has come back to correct
   the address should see the field they are in, not the mistake they already
   know about. */
.ta-url:has(input[aria-invalid="true"]){border-color:var(--bad);border-width:2px;padding:5px 5px 5px calc(var(--s5) - 1px)}
.ta-url:has(input[aria-invalid="true"]):focus-within{border-color:var(--purple)}
.ta-url-proto{flex:none;color:var(--ash);font-size:16px;letter-spacing:.02em}
.ta-url input{
  flex:1;min-width:0;border:0;outline:0;background:none;
  font:inherit;font-size:17px;color:var(--slate);padding:12px 0;
}
.ta-url input::placeholder{color:var(--ash)}
.ta-url-go{flex:none;white-space:nowrap}

/* The error box. It inherits .brief-err from brief-form.css and overrides two
   things, both because this fold is not the brief form.

   RADIUS: --r-md, NOT the inherited --r-sm. On brief.html the fields are 4px
   rectangles and a 4px message under them is right. Here the field above is a
   full pill and the specimen chips below are pills, so a 4px box between them
   was the only square corner in the fold. --r-md is base.css's compact-row
   radius and it lands between the two rather than adding a third value.

   COLOUR: the page's own --bad, not brief-form.css's raw #FDECEC / #8E1B1B.
   The .ta scope already declares a red - the failing band, the critical count,
   the bad vitals all use it - and a second, slightly different red for the
   typo message would mean the page had two reds meaning the same thing.

   WIDTH tracks the field, not the column: the message belongs to the input it
   is about, so it lines up with it and stops where it stops. */
.ta-err{
  max-width:640px;margin:var(--s3) auto 0;text-align:left;
  border-radius:var(--r-md);
  background:var(--bad-soft);color:var(--bad-ink);
}

/* The chip row. .tag .tag-btn is base.css's own pill and carries all of the
   colour, radius and hover; this rule is a layout and a label. The label sits
   IN the flex row rather than above it, so at every width the four names wrap
   around it instead of leaving it stranded on a line of its own. */
.ta-try{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  /* WIDER THAN THE FIELD, and deliberately: at 640 - the field's own width -
     the fourth name wrapped alone onto a second line, which reads as a chip
     that did not fit rather than as a set of four. A row that runs a little
     past the control it belongs to is the lesser of the two. */
  gap:var(--s2);max-width:780px;margin:var(--s5) auto 0;
}
.ta-try-h{color:var(--ash);font-size:14px;line-height:22px;margin-right:var(--s1)}
.ta-form-note{
  max-width:60ch;margin:var(--s5) auto 0;
  font-size:14px;line-height:22px;color:var(--ash);
}

.ta-ask-out{margin-top:var(--s8);text-align:center}


/* ==========================================================================
   02. Working
   Seven lines arriving one at a time. It is the only honest way to show that
   something is being READ rather than fetched, and it is the seven seconds the
   picker promised. With reduced motion the whole log lands at once.

   The wrap is given an explicit width for the reason daily-brief.css records:
   .wrap carries margin:0 auto, which in a COLUMN flex container are CROSS-axis
   margins, and an auto cross margin beats align-items:stretch - so without a
   width the log centres on its own text instead of sitting on the same left
   edge as the report that replaces it.
   ========================================================================== */
.ta-working{min-height:56vh}
.ta-working[data-on="true"]{display:flex;flex-direction:column;justify-content:center}
.ta-working > .wrap{max-width:920px;width:100%}
.ta-working h2{margin:var(--s3) 0 var(--s8)}

/* ---- the target ---------------------------------------------------------
   A pill, on --haze, with a live dot. It is the address echoed back, which is
   the first thing the page owes somebody who has just typed one - and on a
   specimen it is the site the chip opened. */
.ta-target{
  display:inline-flex;align-items:center;gap:var(--s3);
  margin:var(--s5) 0 0;padding:8px var(--s5);
  background:var(--haze);border-radius:var(--r-pill);
  font-size:15px;line-height:23px;color:var(--slate);
}
.ta-target-dot{
  flex:none;width:8px;height:8px;border-radius:50%;background:var(--purple);
}
/* The only thing on this stage that says "live" rather than "still". It rests
   opaque, so with reduced motion or no animation support the dot is simply a
   dot rather than a missing one. */
@media (prefers-reduced-motion:no-preference){
  @keyframes ta-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.82)}}
  .ta-target-dot{animation:ta-pulse 1.4s var(--ease) infinite}
}

/* Heading left, counter right, rail spanning under both - a progress header
   rather than a bar with a caption under it. Baseline-aligned so the 30px
   heading and the 13px counter sit on one line rather than on two centres. */
.ta-work-top{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:var(--s4);margin:var(--s5) 0 var(--s4);
}
.ta-work-top h2{margin:0}

.ta-log{list-style:none;padding:0;margin:var(--s8) 0 0;font-size:16px;line-height:2;font-variant-numeric:tabular-nums}
.ta-log li{
  display:flex;gap:var(--s3);color:var(--ash);
  opacity:0;transform:translateY(4px);
  transition:opacity 280ms ease,transform 280ms ease,color 280ms ease;
}
.ta-log li[data-shown="true"]{opacity:1;transform:none}
.ta-log li[data-done="true"]{color:var(--gray)}
.ta-log .ta-mark{flex:none;width:14px;color:var(--purple)}
.ta-log b{color:var(--plum);font-weight:600;font-variant-numeric:tabular-nums}

@keyframes ta-blink{0%,55%{opacity:1}56%,100%{opacity:.2}}
.ta-log li[data-shown="true"]:not([data-done="true"]) .ta-mark{animation:ta-blink 1s steps(1) infinite}


/* ---- the rail -----------------------------------------------------------
   THE ONE THING THE LOG CANNOT SAY: how much is left. It is driven off the
   log's own index in js/tech-audit.js rather than off a clock of its own, so
   it can never show a step the list has not reached.

   The fill transitions rather than animating, because its width is set seven
   times from the script and CSS should carry it between those points - an
   animation here would be a second timeline racing the first. */
.ta-rail{
  height:4px;border-radius:2px;background:var(--mist);
  overflow:hidden;
}
/* PLUM, NOT --ramp, and the first attempt used the ramp. It is the wrong
   colour for a reason worth writing down: --ramp is the longitude gradient and
   this site has already decided it means the working day from Karachi to
   Auckland. A progress bar is not a map. tools.css fills its own step rail in
   plum, so a rail that fills on this site fills in plum. */
.ta-rail i{
  display:block;height:100%;width:0;border-radius:2px;
  background:var(--plum);
  transition:width 520ms var(--ease);
}
.ta-step{
  margin:0;font-size:13px;line-height:20px;color:var(--ash);
  font-variant-numeric:tabular-nums;
}

@media (prefers-reduced-motion:reduce){
  .ta-rail i{transition:none}
}


/* ==========================================================================
   03. The report
   A document, not a dashboard. White ground, hairline rules, tabular figures,
   and the only colour that moves is severity. Every panel is base.css's own
   .card, so this page cannot invent a second one.
   ========================================================================== */
.ta-report{padding:var(--sec) 0;background:var(--surface)}
.ta-report > .wrap{max-width:920px}

.ta-report-top{
  display:flex;flex-wrap:wrap;justify-content:space-between;
  align-items:baseline;gap:var(--s4);
  padding-bottom:var(--s4);border-bottom:2px solid var(--plum);
}
.ta-meta{margin:0;font-size:13px;line-height:20px;color:var(--gray);font-variant-numeric:tabular-nums}
.ta-meta b{color:var(--plum);font-weight:600}

/* THE ADMISSION, AND IT IS SIZED TO BE READ. It sits above the band and the
   score because a reader who meets it under the report has already believed
   three findings about their own site. Warn ground rather than neutral: it is
   not a caption, it is the sentence that makes the rest of the page honest. */
.ta-demo{
  margin-top:var(--s6);padding:var(--s4) var(--s5);
  background:var(--warn-tint);border-radius:var(--r-md);
  font-size:15px;line-height:23px;color:var(--slate);max-width:72ch;
}
.ta-demo b{color:var(--warn-ink);font-weight:600}
.ta-demo:empty{display:none}

.ta-band{
  display:inline-flex;align-items:center;gap:var(--s2);
  margin-top:var(--s6);padding:6px 13px;border-radius:var(--r-pill);
  font-size:12px;line-height:18px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;
}
.ta-band[data-tone="bad"]{background:var(--bad-soft);color:var(--bad-ink)}
.ta-band[data-tone="warn"]{background:var(--warn-soft);color:var(--warn-ink)}
.ta-band[data-tone="good"]{background:var(--good-soft);color:var(--good-ink)}

/* THE SCORE IS A NUMBER AND A RULE, NOT A GAUGE. A dial here would be the
   third circular figure in one feature and the only one carrying a claim this
   page has to be careful with. A number the width of the measure, with the
   track underneath it, says the same thing and can be read at a glance on a
   phone - which the gauge could not. */
.ta-score{
  display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--s3);
  margin:var(--s4) 0 0;font-variant-numeric:tabular-nums;
}
.ta-score-of{color:var(--ash);font-size:19px;line-height:31px;letter-spacing:0}

.ta-score-track{
  height:10px;border-radius:5px;background:var(--mist);
  margin-top:var(--s4);overflow:hidden;
}
.ta-score-track i{display:block;height:100%;border-radius:5px;background:var(--ash)}
.ta-score-track i[data-tone="bad"]{background:var(--bad)}
.ta-score-track i[data-tone="warn"]{background:var(--warn)}
.ta-score-track i[data-tone="good"]{background:var(--good)}

.ta-verdict{max-width:66ch;margin-top:var(--s6);color:var(--slate);font-size:19px;line-height:31px}

.ta-counts{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--s6);margin-top:var(--s8);
  padding:var(--s5) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.ta-count dt{
  font-size:12px;line-height:18px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ash);
}
.ta-count dd{
  margin:var(--s1) 0 0;display:flex;align-items:baseline;gap:6px;
  font-size:34px;font-weight:500;line-height:1.1;letter-spacing:-.015em;
  font-variant-numeric:tabular-nums;color:var(--black);
}
.ta-count dd[data-sev="critical"]{color:var(--bad-ink)}
.ta-count dd[data-sev="warning"]{color:var(--warn-ink)}
.ta-count dd[data-sev="passed"]{color:var(--good-ink)}
.ta-count dd i{font-style:normal;font-size:13px;font-weight:400;color:var(--ash);letter-spacing:0}

.ta-panel{margin-top:var(--s6);padding:var(--s6)}
.ta-panel > .eyebrow{margin-bottom:var(--s5)}

.ta-sects{display:grid;gap:var(--s6)}
.ta-sect{display:grid;grid-template-columns:1fr auto;gap:var(--s2) var(--s5);align-items:baseline}
.ta-sect h3{grid-column:1;grid-row:1;font-size:19px;line-height:28px;margin:0}
/* .ta-sect .ta-sect-n, not .ta-sect-n, and it is not belt and braces. The score
   is a <p>, so `.ta-sect p` below - one class and one element, and therefore
   more specific than a bare class - was winning both of its placement
   properties and dropping the number onto the blurb's row at the foot of the
   card. The blurb rule excludes it by name for the same reason. */
.ta-sect .ta-sect-n{
  grid-column:2;grid-row:1;margin:0;justify-self:end;
  font-size:24px;font-weight:500;letter-spacing:-.015em;font-variant-numeric:tabular-nums;color:var(--black);
}
.ta-sect .ta-sect-n span{font-size:13px;color:var(--ash);font-weight:400;letter-spacing:0}
.ta-sect-bar{grid-column:1 / -1;grid-row:2;height:6px;border-radius:3px;background:var(--mist);overflow:hidden}
.ta-sect-bar i{display:block;height:100%;border-radius:3px;background:var(--ash)}
.ta-sect-bar i[data-tone="bad"]{background:var(--bad)}
.ta-sect-bar i[data-tone="warn"]{background:var(--warn)}
.ta-sect-bar i[data-tone="good"]{background:var(--good)}
.ta-sect p:not(.ta-sect-n){grid-column:1 / -1;grid-row:3;margin:0;color:var(--gray);font-size:15px;line-height:23px;max-width:60ch}

.ta-vitals{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s5)}
.ta-vital dt{
  font-size:12px;line-height:18px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ash);
}
.ta-vital dd{
  margin:var(--s1) 0 0;font-size:28px;font-weight:500;line-height:1.1;
  letter-spacing:-.015em;font-variant-numeric:tabular-nums;color:var(--black);
}
.ta-vital dd[data-state="bad"]{color:var(--bad-ink)}
.ta-vital dd[data-state="warn"]{color:var(--warn-ink)}
.ta-vital dd[data-state="good"]{color:var(--good-ink)}
.ta-vital p{margin:var(--s1) 0 0;font-size:13px;line-height:20px;color:var(--ash);font-variant-numeric:tabular-nums}

/* ---- the findings ------------------------------------------------------
   Three, written out in full: what was found, the evidence for it, and why it
   costs something. The third of those is the whole difference between this and
   a scanner's PDF, so it is the paragraph that gets the measure. */
.ta-finds-h{margin-top:var(--s10)}
.ta-finds{display:grid;gap:var(--s5);margin-top:var(--s5)}
/* SEVERITY IS THE GROUND, NOT A STRIPE DOWN THE EDGE. The rule these cards
   carried was a 3px border-left inside a --r-lg corner, so it was clipped into
   a bracket at both ends and read as a drawn ornament hanging off the card
   rather than as a status. The tint says the same thing over the whole surface,
   the chip at the top says it in a word, and nothing has an edge - which is the
   picker's own answer on the fold, one step down the page.

   A notice keeps .card's --haze. Neutral IS the neutral surface here, and
   inventing a third tint to mean "nothing much" would be the loudest way to
   say it. */
.ta-find{padding:var(--s6);border:0}
.ta-find[data-sev="critical"]{background:var(--bad-tint)}
.ta-find[data-sev="warning"]{background:var(--warn-tint)}
.ta-find h3{font-size:21px;line-height:30px;margin:var(--s3) 0 0}
.ta-find p{margin:var(--s3) 0 0;color:var(--gray);font-size:16px;line-height:25px;max-width:66ch}

.ta-find-top{
  display:flex;align-items:center;gap:var(--s3);margin:0;
  font-size:12px;line-height:18px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ash);
}
.ta-sev{padding:3px 9px;border-radius:var(--r-pill);font-weight:600;color:var(--gray);background:var(--mist)}
.ta-sev[data-sev="critical"]{background:var(--bad-soft);color:var(--bad-ink)}
.ta-sev[data-sev="warning"]{background:var(--warn-soft);color:var(--warn-ink)}

/* --white, not --haze, and it is base.css's own inversion rule rather than a
   preference: a panel on --surface takes --haze, so .card is already --haze
   here and an evidence block painted the same colour was invisible inside it.
   The panel inverts, and so does the block inside the panel. */
.ta-ev{
  color:var(--slate)!important;background:var(--white);
  padding:var(--s3) var(--s4);border-radius:var(--r-sm);
  font-size:15px!important;line-height:23px!important;
}

@media (prefers-reduced-motion:no-preference){
  @keyframes ta-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

  .ta-report.is-in > .wrap > *{animation:ta-rise 480ms var(--ease) both}
  .ta-report.is-in .ta-report-top{animation-delay:0ms}
  .ta-report.is-in .ta-band{animation-delay:60ms}
  .ta-report.is-in .ta-score,
  .ta-report.is-in .ta-score-track{animation-delay:110ms}
  .ta-report.is-in .ta-verdict{animation-delay:180ms}
  /* 260ms, and js/tech-audit.js starts the count on the same number, so the
     figures fade in while they are counting rather than after it. */
  .ta-report.is-in .ta-counts{animation-delay:260ms}
  .ta-report.is-in .ta-panel{animation-delay:320ms}

  /* Below the fold on every viewport this is read on, so it would finish
     animating before it could be seen. */
  .ta-report.is-in .ta-finds-h,
  .ta-report.is-in .ta-finds,
  .ta-report.is-in .ta-hand,
  .ta-report.is-in .ta-note{animation:none}
}


/* ==========================================================================
   04. The remainder, withheld
   NOT A PAYWALL BORROWED FOR ITS OWN SAKE. Everything above the gate a machine
   could have made; what is behind it is the thing this network sells, which is
   somebody reading the rest and putting it in the order it pays to fix. Every
   bar in here is redacted, and that is the only version of the device this
   page is allowed: writing out nineteen more findings would be nineteen more
   invented sentences about a site, and drawing them legibly is the same act at
   lower resolution. A bar carries the one true claim - there is more.

   aria-hidden on the peek. The heading below it says in words what the blur
   says in texture, and a screen reader gains nothing from five empty spans.
   ========================================================================== */
.ta-hand{margin-top:var(--s12)}
.ta-gate{
  position:relative;overflow:hidden;
  background:var(--surface);border:0;
  border-radius:var(--r-lg);box-shadow:var(--e-panel);padding:0;
}
.ta-gate-peek{
  position:relative;height:250px;overflow:hidden;
  background:var(--surface);user-select:none;pointer-events:none;
}
.ta-gate-sheet{
  display:grid;gap:var(--s4);
  padding:var(--s5) var(--s8) 0;
  filter:blur(4px);opacity:.8;
  transform:scale(1.06);transform-origin:top center;
}
/* A redacted heading above the rows, so what is withheld reads as a SECTION of
   the report rather than five loose lines. Same purpose as the pill and the
   heads on daily-brief.css's gate, and the same amount of information in it,
   which is none. */
.ta-gate-head{display:block;height:18px;width:46%;background:var(--ash);opacity:.5;border-radius:var(--r-sm)}
/* The redacted bar. It was declared up in the ask stage when the fold carried
   a drawing made of them; the gate is the only thing left that uses one, so it
   is declared where it is used. */
.ta-line{display:block;height:8px;border-radius:var(--r-sm);background:var(--mist)}
.ta-gate-row{display:flex;align-items:center;gap:var(--s4)}
.ta-gate-row i{flex:none;width:10px;height:10px;border-radius:50%;background:var(--mist)}
.ta-gate-row i[data-sev="critical"]{background:var(--bad)}
.ta-gate-row i[data-sev="warning"]{background:var(--warn)}
.ta-gate-row i[data-sev="notice"]{background:var(--ash)}
.ta-gate-row .ta-line{height:14px;flex:1}
.ta-gate-row:nth-child(1) .ta-line{width:92%}
.ta-gate-row:nth-child(2) .ta-line{width:74%}
.ta-gate-row:nth-child(3) .ta-line{width:86%}
.ta-gate-row:nth-child(4) .ta-line{width:63%}
.ta-gate-row:nth-child(5) .ta-line{width:79%}

.ta-gate-peek::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.06) 48%,
    rgba(255,255,255,.42) 70%,
    rgba(255,255,255,.86) 86%,
    rgba(255,255,255,.98) 94%,
    var(--surface) 100%);
}

.ta-gate-face{
  position:relative;text-align:center;
  display:grid;gap:var(--s5);justify-items:center;
  margin-top:calc(var(--s10) * -1);
  padding:0 var(--s8) var(--s12);
}
.ta-gate-face .eyebrow{margin:0;color:var(--plum)}
.ta-gate-face h2{max-width:26ch;margin:0}
.ta-gate-face .closer-p{margin:0}


.ta-rest{margin:0;font-size:15px;line-height:23px;color:var(--gray);font-variant-numeric:tabular-nums}

.ta-hand-acts{display:flex;flex-wrap:wrap;gap:var(--s4);justify-content:center}

.ta-note{
  margin-top:var(--s8);padding-top:var(--s5);border-top:1px solid var(--line);
  font-size:14px;line-height:22px;color:var(--ash);max-width:72ch;
}
.ta-note b{color:var(--gray);font-weight:600}


/* ==========================================================================
   05. What the checks cover
   REAL MARKUP, and on this page it is load-bearing rather than habitual:
   everything above is built by a script, so without this section there is
   nothing on the URL for a crawler that does not run one. It is also the
   answer to the question the demo cannot answer - what the audit does on a
   site that is not one of the four.
   ========================================================================== */
.ta-inside{padding:var(--sec) 0;background:var(--surface-alt)}
.ta-inside-box{
  background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--e-panel);
  padding:clamp(var(--s8),4vw,var(--s12));
}
.ta-inside-deck{margin-top:var(--s3);color:var(--gray);font-size:17px;line-height:27px;max-width:64ch}
.ta-inside-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--s10);margin:var(--s10) 0 0;padding:0;list-style:none;
}

/* THE COLUMNS ARE SEPARATED BY A RULE, NOT BY THE GAP. Three columns of text
   inside one white panel read as one block of prose in three pieces; a
   hairline says they are three things. It is a border-left on columns two and
   three rather than a divider element, so it cannot survive the wrap to one
   column - where it would be a line across the top of a stacked section. */
.ta-cover + .ta-cover{padding-left:var(--s10);border-left:1px solid var(--line)}

.ta-cover-top{display:flex;align-items:center;gap:var(--s3);margin:0}

/* THE DISC IS tools.html's STEP NODE, borrowed at its own size. 34px and the
   values that go with it are declared here for the same reason they are
   declared there: it is the diameter of one component, which is optical
   alignment rather than spacing, and promoting it to a token nothing else
   wants would be worse than repeating it.

   NOT ON A RAIL, and that is the one part not borrowed. A rail means sequence;
   these three are parallel and are scored separately, which is what the deck
   above says. */
.ta-cover-n{
  flex:none;width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--pale);color:var(--plum);
  font-size:13px;font-weight:600;letter-spacing:.02em;font-variant-numeric:tabular-nums;
}
.ta-cover-h{font-size:19px;font-weight:600;line-height:28px;color:var(--black);letter-spacing:-.01em}

.ta-cover-p{
  margin:var(--s4) 0 0;color:var(--gray);
  font-size:16px;line-height:25px;
}

/* ROWS, NOT BULLETS. A hairline between checks reads as a spec sheet, and the
   list is what this column is actually FOR - the line above it is the reason
   to read it, and these are the thing itself. */
.ta-cover-list{margin:var(--s5) 0 0;padding:0;list-style:none}
.ta-cover-list li{
  padding:var(--s3) 0;border-top:1px solid var(--line);
  font-size:15px;line-height:23px;color:var(--slate);
}
.ta-cover-list li:last-child{padding-bottom:0}


/* ==========================================================================
   06. Responsive
   ========================================================================== */
@media (max-width:1080px){
  .ta-inside-grid{grid-template-columns:1fr;gap:var(--s10)}
  /* The rule between columns becomes a rule between stacked sections, which is
     a line across the top of each rather than a divider between two - so it
     goes, and the gap does the separating on its own. */
  .ta-cover + .ta-cover{padding-left:0;border-left:0}
}

@media (max-width:860px){
  .ta-vitals{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s6)}
  .ta-counts{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s6)}
}

@media (max-width:620px){
  /* The label takes its own line once the chips need the width more than the
     sentence does. */
  .ta-try-h{flex:1 0 100%;text-align:center;margin:0 0 var(--s1)}

  /* The pill unstacks. A 96px button beside a field at 320px leaves the field
     narrower than the address going into it. */
  .ta-url{
    flex-wrap:wrap;border-radius:var(--r-lg);
    padding:var(--s4);gap:var(--s3);
  }
  /* The prefix stays ON the input's line - it is a scheme, not a label, and a
     line of its own turns "https://" into a heading over an empty box. Only
     the button drops. */
  .ta-url input{padding:0;flex:1 1 auto;min-width:0}
  .ta-url-go{flex:1 0 100%;justify-content:center}

  .ta-gate-peek{height:190px}
  .ta-gate-sheet{padding:var(--s6) var(--s6) 0}
  .ta-gate-face{padding:0 var(--s5) var(--s10);margin-top:calc(var(--s8) * -1)}
  .ta-hand-acts .btn{width:100%;justify-content:center}
  .ta-find{padding:var(--s5)}
  .ta-panel{padding:var(--s5)}
}


/* ==========================================================================
   07. Reduced motion
   The default state is the finished state everywhere on this site; the entrance
   sequences above already live inside a no-preference query, so all this has to
   retire is the log's own transition and the blinking caret.
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  .ta-log li{transition:none;opacity:1;transform:none}
  .ta-target-dot{animation:none}
  .ta-log li[data-shown="true"]:not([data-done="true"]) .ta-mark{animation:none}
  .ta-url{transition:none}
}