/* ============================================================================
   Pingo — screen 1h, WI-FI AUDIT.  The Wi-Fi hardening check, after a read.

   Every selector is scoped under .pgs-wifiaudit and there are NO @keyframes in
   this file at all. That is the app's own rule for this screen, quoted:
   "Nothing spins — a spinner is a claim that something is running."
   See section 11.

   THE NAME. The catalogue calls this tool `Wi-Fi hardening check`; its
   shortLabel is `Wi-Fi audit`, which is what the gallery tab reads. The SCREEN
   says the long name, so the screen says the long name here
   (tool_catalog.dart:776-808, wifi_hardening_screen.dart:259).

   SOURCE OF TRUTH. There is no design-canvas artboard for this screen either,
   so every value is reconstructed from the app:
     * lib/screens/tools/wifi_hardening_screen.dart
       :259-268   ToolScaffold title, ToolSafety.readOnly, source 'ON-DEVICE',
                  and the refresh action tooltipped 'Read the beacon again'.
       :426-441   WifiHardeningIntro — the sentence the whole feature rests on.
       :525-527   SectionRule('What the beacon says') then the ReadoutGrid.
       :562-563   SectionRule('Read from the beacon', meta: '<n> found').
       :611-668   wifiHardeningCells — the six cells, in order, with no verdict
                  on any of them.
       :838-880   WifiHardeningFindingCard — weight to tone, certainty to label.
     * lib/net/wifi_hardening.dart:844-1120 — every finding headline and detail.
     * lib/screens/tools/tool_shell.dart:41-64, :198-300 — the badge and the
       title row.
     * lib/widgets/ui.dart:3027-3190 — ReadoutGrid's paint, cell by cell.

   THE SEPARATION THIS SCREEN IS BUILT ON, and the reason the grid carries no
   colour at all: "No verdicts here on purpose: this grid is what the beacon
   SAYS, the finding cards below it are what that means, and keeping them apart
   is what stops one value carrying two claims" (wifi_hardening_screen.dart:607).
   Do not tint a grid cell to match a finding.

   THERE IS NO PASS ON THIS SCREEN. HardeningWeight has three values — alert,
   caution and note — mapping to fail, caution and info. Nothing here is ever
   awarded mint, because reading a beacon cannot establish that a network is
   safe. The app says it in its own words on the empty result: "That is not a
   clean bill of health."

   TOKENS. The names are the ones screens/*.css already use. The card fill and
   the grid surfaces follow the app (P.sur, P.surCellHi, P.surSolid), because
   this screen has no canvas to follow instead.

   WHAT IS ELIDED, said plainly. The real screen scrolls and holds more than one
   812px frame: the raw capabilities string, the RSN and WPS element sections,
   `This connection`, and `What this check cannot see` with its four hatched
   blind spots. The frame catches the top of it. The section meta states the
   real number of findings, so nothing here reads as the whole of it.
   ============================================================================ */


/* ---------------------------------------------------------------------------
   1. Outer box, tokens, defensive reset
   --------------------------------------------------------------------------- */

.pgs-wifiaudit {
  --pgs-s: max(.88, var(--gal-scale, .88));

  box-sizing: content-box;
  width: calc(375px * var(--pgs-s));
  height: calc(812px * var(--pgs-s));
  flex: none;
  position: relative;
  user-select: none;
  -webkit-user-select: none;

  font-family: var(--pgs-font);
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: normal;
  text-align: left;
  color: var(--pgs-ink);
  -webkit-font-smoothing: antialiased;

  --pgs-font: 'Sora', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --pgs-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace;

  --pgs-ink: #F2F6FC;
  --pgs-ink2: #D7E0EC;
  --pgs-mut: #B7C4D6;
  --pgs-faint: #94A2B6;
  --pgs-faint2: #7F8EA4;
  --pgs-untested: #A3B1C3;
  --pgs-on-light: #0B121C;

  --pgs-sur: rgba(24, 35, 48, .82);        /* P.sur, the card fill */
  --pgs-sur-solid: rgba(9, 14, 21, .72);   /* P.surSolid, a readout cell */
  --pgs-sur-cell-hi: rgba(255, 255, 255, .09); /* P.surCellHi — the 1px gaps */
  --pgs-line: rgba(255, 255, 255, .11);
  --pgs-line-strong: rgba(255, 255, 255, .14);
  --pgs-line-soft: rgba(255, 255, 255, .09);

  /* Amber = caution, red = fail. Mint is declared and deliberately unused: see
     the header. There is no brand accent hue in this system. */
  --pgs-warn: #FFB454;
  --pgs-warn-border: rgba(255, 180, 84, .34);
  --pgs-fail: #FF8A96;
  --pgs-fail-border: rgba(255, 92, 110, .4);

  --pgs-hatch: repeating-linear-gradient(45deg, transparent 0 4px, rgba(255, 255, 255, .06) 4px 8px);
  --pgs-hatch-line: rgba(255, 255, 255, .2);
}

.pgs-wifiaudit *,
.pgs-wifiaudit *::before,
.pgs-wifiaudit *::after { box-sizing: border-box; }

.pgs-wifiaudit div,
.pgs-wifiaudit span { margin: 0; padding: 0; }

.pgs-wifiaudit svg { display: block; flex: none; overflow: visible; }

.pgs-wifiaudit.pgs-wifiaudit--bezel {
  background: #060B16;
  padding: calc(9px * var(--pgs-s));
  border: calc(9px * var(--pgs-s)) solid #03060c;
  border-radius: calc(46px * var(--pgs-s));
  box-shadow: 0 0 0 2px #16223a, 0 30px 70px rgba(0, 0, 0, .6);
}

/* lbl() — JetBrainsMono 9.5, w700, letter-spacing 1.6, P.faint, tabular. */
.pgs-wifiaudit .pgswa-lbl {
  font: 700 9.5px var(--pgs-mono);
  letter-spacing: 1.6px;
  color: var(--pgs-faint);
  font-variant-numeric: tabular-nums;
  text-transform: uppercase;
}


/* ---------------------------------------------------------------------------
   2. Screen root + the two bloom layers.
   --------------------------------------------------------------------------- */

.pgs-wifiaudit .pgswa-screen {
  position: relative;
  width: 375px;
  height: 812px;
  flex: none;
  border-radius: 38px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg,
    #22303F 0%, #1A2634 13%, #111A25 36%, #0A0F16 66%, #04070B 100%);
  transform: scale(var(--pgs-s));
  transform-origin: top left;
}

.pgs-wifiaudit .pgswa-bloom { position: absolute; top: 0; left: 0; right: 0; }
.pgs-wifiaudit .pgswa-bloom--sheet {
  height: 46%;
  background: linear-gradient(180deg,
    rgba(163, 187, 214, .2), rgba(163, 187, 214, .06) 46%, transparent 100%);
}
.pgs-wifiaudit .pgswa-bloom--core {
  height: 22%;
  background: radial-gradient(120% 100% at 50% 0%, rgba(190, 210, 232, .16), transparent 72%);
}


/* ---------------------------------------------------------------------------
   3. Status bar, identical to the rail's other screens.
   --------------------------------------------------------------------------- */

.pgs-wifiaudit .pgswa-sb {
  height: 44px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 26px;
  font: 700 12px var(--pgs-font);
  color: #D7E0EC;
  position: relative;
  z-index: 3;
}
.pgs-wifiaudit .pgswa-sb-icons { display: flex; gap: 6px; align-items: center; }


/* ---------------------------------------------------------------------------
   4. Content column. 18px screen padding (P.screenPadding), which is what a
      ToolScaffold uses. No nav reserve: the screen is caught mid-read and its
      findings run on under the floating nav, as a scrolled list does.
   --------------------------------------------------------------------------- */

.pgs-wifiaudit .pgswa-col {
  flex: 1;
  min-height: 0;
  position: relative;
  z-index: 2;
  padding: 0 18px;
  /* MARGIN, not padding. overflow:hidden clips at the PADDING box, so a
     padding-bottom leaves the content painting right down to the frame edge and
     a row surfaces in the strip below the nav pill. A margin shortens the box
     itself, so the list disappears behind the pill instead. */
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}


/* ---------------------------------------------------------------------------
   5. The tool title row. Back chevron, the 19/w800 title, then the icon action.

      THE THREE TAG SLOTS ARE KEPT APART, and the app's own comment says why:
      safety is a fact about what the tool does, source is provenance, maturity
      is how finished it is. They shared one free-text field once, which is how
      READ-ONLY ended up competing with a service name for the same 60px.

      Both badges sit on a second run here, which is exactly what the app's own
      Wrap does at this width: title and badges share a line only while there
      is room for both, and the title keeps its width when there is not.

      READ-ONLY is neutral steel, never mint. Not sending traffic is not a pass
      (tool_shell.dart:60-63).
   --------------------------------------------------------------------------- */

.pgs-wifiaudit .pgswa-head {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 46px;
  flex: none;
}
.pgs-wifiaudit .pgswa-head-title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.5px;
  color: var(--pgs-ink);
}
.pgs-wifiaudit .pgswa-action { color: var(--pgs-ink2); flex: none; }

.pgs-wifiaudit .pgswa-badges {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 0 10px 29px;   /* aligned under the title, past the chevron */
  flex: none;
}


/* ---------------------------------------------------------------------------
   6. The intro — the sentence the whole feature rests on, verbatim.
      It is the caveat, so it is copy and not chrome: what the beacon
      advertises, read from the air, and the three things Pingo does not do.
   --------------------------------------------------------------------------- */

.pgs-wifiaudit .pgswa-intro {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--pgs-mut);
  flex: none;
}


/* ---------------------------------------------------------------------------
   7. SectionRule — the label uppercased in lbl(P.faint), a 9px gap, a 1px
      hairline in P.lineSoft, then the optional meta in lbl(P.faint2, ls 1.0).
   --------------------------------------------------------------------------- */

.pgs-wifiaudit .pgswa-rule {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: none;
  margin-top: 16px;
}
.pgs-wifiaudit .pgswa-rule-line { height: 1px; background: var(--pgs-line-soft); flex: 1 1 auto; }
.pgs-wifiaudit .pgswa-rule-meta { letter-spacing: 1px; color: var(--pgs-faint2); flex: none; }


/* ---------------------------------------------------------------------------
   8. The readout grid. A record block: label/value cells welded together by
      1px gaps, which are the P.surCellHi wash showing through from behind.
      Radius 20, 1px P.line border, cells on P.surSolid at 10 x 14.

      NO TONE ON ANY CELL. See the header: this grid is what the beacon says.
   --------------------------------------------------------------------------- */

.pgs-wifiaudit .pgswa-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  margin-top: 9px;
  background: var(--pgs-sur-cell-hi);
  border: 1px solid var(--pgs-line);
  border-radius: 20px;
  overflow: hidden;
  flex: none;
}
.pgs-wifiaudit .pgswa-cell {
  background: var(--pgs-sur-solid);
  padding: 10px 14px;
  min-width: 0;
}
.pgs-wifiaudit .pgswa-cell-lbl {
  display: block;
  letter-spacing: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* num_(): JetBrainsMono 16 by default, 10.5 here, w700, letter-spacing -0.3,
   P.ink, tabular. Technical readouts are mono app-wide. */
.pgs-wifiaudit .pgswa-cell-val {
  display: block;
  margin-top: 4px;
  font: 700 10.5px var(--pgs-mono);
  letter-spacing: -.3px;
  color: var(--pgs-ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* ---------------------------------------------------------------------------
   9. A finding card. GlassCard.solid with a tone: the fill is the tone at 7%
      composited onto P.sur, the border is the tone's own, and the card's label
      is the CERTAINTY tier rather than a severity — "Read from the beacon" or
      "Reasoned from the name". The app repeats it per card so a finding read,
      or screenshotted, on its own still carries its own certainty.
   --------------------------------------------------------------------------- */

.pgs-wifiaudit .pgswa-find {
  position: relative;
  border-radius: 20px;
  border: 1px solid var(--pgs-line-strong);
  background: var(--pgs-sur);
  padding: 12px 14px;
  margin-top: 9px;
  flex: none;
}
.pgs-wifiaudit .pgswa-find::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 12%;
  border-radius: 20px 20px 0 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), transparent);
  pointer-events: none;
}
.pgs-wifiaudit .pgswa-find--fail {
  background: linear-gradient(rgba(255, 92, 110, .07), rgba(255, 92, 110, .07)), var(--pgs-sur);
  border-color: var(--pgs-fail-border);
}
.pgs-wifiaudit .pgswa-find--caution {
  background: linear-gradient(rgba(255, 180, 84, .07), rgba(255, 180, 84, .07)), var(--pgs-sur);
  border-color: var(--pgs-warn-border);
}
.pgs-wifiaudit .pgswa-find--fail .pgswa-find-lbl,
.pgs-wifiaudit .pgswa-find--fail .pgswa-find-head { color: var(--pgs-fail); }
.pgs-wifiaudit .pgswa-find--caution .pgswa-find-lbl,
.pgs-wifiaudit .pgswa-find--caution .pgswa-find-head { color: var(--pgs-warn); }

.pgs-wifiaudit .pgswa-find-lbl { display: block; }
.pgs-wifiaudit .pgswa-find-head {
  display: block;
  margin-top: 9px;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.35;
}
.pgs-wifiaudit .pgswa-find-body {
  display: block;
  margin-top: 6px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--pgs-mut);
}


/* ---------------------------------------------------------------------------
   10. Bottom nav. Copied from diagnose.css section 12 so the rail's frames
       agree. Tools is the active item: this tool was pushed from the Tools
       tab's Secure group, which is where a visitor would go to find it.
   --------------------------------------------------------------------------- */

.pgs-wifiaudit .pgswa-nav {
  position: absolute;
  left: 16px; right: 16px; bottom: 14px;
  height: 72px;
  border-radius: 26px;
  background: rgba(9, 13, 20, .88);
  border: 1px solid var(--pgs-line);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 6px;
  z-index: 5;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .5);
}
.pgs-wifiaudit .pgswa-nvi {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: #7C8CA1;
}
.pgs-wifiaudit .pgswa-nvl { font-size: 9.5px; font-weight: 600; white-space: nowrap; }
.pgs-wifiaudit .pgswa-nvi--active { color: var(--pgs-ink); }
.pgs-wifiaudit .pgswa-nvi--active .pgswa-nvl { font-weight: 700; }
.pgs-wifiaudit .pgswa-nvi-tile {
  width: 34px; height: 34px; flex: none;
  border-radius: 12px;
  background: linear-gradient(150deg, #FFFFFF, #C9D6E6);
  display: flex; align-items: center; justify-content: center;
  color: var(--pgs-on-light);
  box-shadow: 0 8px 18px rgba(0, 0, 0, .45);
}


/* ---------------------------------------------------------------------------
   11. HONEST FINAL FRAMES — blocks A and B, and they are empty.

       NOTHING ON THIS SCREEN ANIMATES, in any state. That is the app's own
       rule for this tool, in its own words: a failed read draws a note and
       "Nothing spins — a spinner is a claim that something is running."
       A beacon read is not a process a user watches; it has either happened or
       it has not, and every row here is a settled reading of one broadcast.

       So there is no .is-offstage rule to write and no reduced-motion rule to
       write: the frame this screen holds when the gallery scrolls away is the
       frame it was already holding. Both blocks are named here anyway, with
       this note, because the rail's contract is that every screen answers
       .is-offstage on its honest final frames. If a future edit ever adds an
       animation to this file, it must be stopped in BOTH blocks on the same
       commit.

       .pgs-wifiaudit.is-offstage      — nothing to stop.
       @media (prefers-reduced-motion: reduce)
         html:not(.motion-opt-in) .pgs-wifiaudit — nothing to stop.
   --------------------------------------------------------------------------- */