/* TRU-841 — additions to the live preview miniature. READ THIS FIRST:
   the original TRU-382 .sgpv-* rules have NOT moved. They are still in the
   "TRU-382: derived neutrals, palette/pairing suggestions, live preview" block of
   assets/app.css, together with the accessibility notes and measured ratios that
   forced them, and they are still what paints the nav, hero and cards. This file
   only ADDS: the rest of the website miniature (band, quote strip, footer) and the
   whole platform miniature (.sgpv-pf-*). Nothing here overrides anything there.
   The split is deliberate — TRU-841 was built by four agents at once and app.css
   belonged to another one — not a migration anybody is halfway through.

   Everything is themed from the same custom properties preview.js sets on .sgpv:
   --pv-primary --pv-secondary --pv-accent --pv-on --pv-on-accent --pv-on-chrome
   --pv-surface --pv-page --pv-line --pv-muted --pv-accent-soft --pv-head --pv-body.
   No colour here is anything but one of those. Each has the same fallback shape the
   TRU-382 rules use, so a stale preview.js degrades to a readable mockup instead of
   an invisible one.

   Two rules carried over from that block, both of which cost a bug once:
   - text on an accent fill is var(--pv-on-accent,…), never var(--pv-on): --pv-on is
     the client's typed "text on color" and is only ever contrast-checked against the
     primary;
   - a page ground is var(--pv-page,#fff), never var(--pv-on): binding the ground to
     that value is what previewed an all-black site for a client who typed black
     button text.

   Sizing: the miniature renders in a panel roughly 360-560px wide. A 360px panel on
   a desktop viewport does NOT match the max-width:640px block below — that query
   reads the viewport, not the panel — so the base rules themselves have to survive
   360px. That is why the platform sidebar is a fixed 96px against a min-width:0
   main column, and why nothing in either miniature relies on a wide row. */

/* ---------- website miniature: the rest of the page ---------- */

/* CTA band. Full-bleed --pv-primary, so its text is --pv-on-chrome (machine-checked
   against the primary) rather than --pv-on: a band this size going blank mid-edit
   reads as a broken preview, not as a colour the client should go and fix. The
   button inside it is the accent, which is where the accent earns its keep on the
   shipped site. */
.sgpv-band{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:15px 16px;background:var(--pv-primary);}
.sgpv-band-t{flex:1 1 190px;font-family:var(--pv-head);color:var(--pv-on-chrome,#fff);
  font-size:13.5px;line-height:1.2;font-weight:700;letter-spacing:-.01em;}
.sgpv-band-b{flex:none;background:var(--pv-accent);color:var(--pv-on-accent,var(--pv-on,#fff));
  font-size:10px;font-weight:600;border-radius:6px;padding:6px 13px;}

/* quote strip. No opacity on any of this text: dimming a colour the client picked is
   how a passing ratio becomes a failing one silently. Weight and size carry the
   hierarchy instead. */
.sgpv-strip{display:flex;align-items:center;gap:11px;padding:14px 16px;
  background:var(--pv-page,#fff);border-top:1px solid var(--pv-line);}
.sgpv-strip-av{flex:none;width:26px;height:26px;border-radius:50%;
  background:var(--pv-accent-soft);border:1px solid var(--pv-line);}
.sgpv-strip-c{min-width:0;}
.sgpv-quote{font-family:var(--pv-head);color:var(--pv-secondary);font-size:11.5px;line-height:1.35;}
.sgpv-who{color:var(--pv-muted);font-size:8.5px;margin-top:3px;}

/* footer. The second brand lockup — preview.js paints .sgpv-foot-b by name, because
   querySelector('[data-brand]') only ever reaches the one in the nav. */
.sgpv-foot{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:13px 16px;
  background:var(--pv-surface);border-top:1px solid var(--pv-line);}
.sgpv-foot-b{font-family:var(--pv-head);color:var(--pv-primary);font-size:11px;font-weight:700;
  overflow-wrap:anywhere;}
.sgpv-foot-l{display:flex;gap:9px;margin-left:auto;}
.sgpv-foot-l i{font-style:normal;font-size:8.5px;color:var(--pv-muted);}
.sgpv-foot-c{flex-basis:100%;font-size:8px;color:var(--pv-muted);}

/* ---------- platform miniature: the MSO portal ---------- */

/* The frame. Same border/radius/shadow as .sgpv-site so the two tabs read as two
   views of one build rather than two designs; --line and --shadow-card are the
   document's own tokens, as they are there — this is the sheet the mockup sits on,
   not part of the mockup. */
.sgpv-pf{display:flex;align-items:stretch;border:1px solid var(--line);border-radius:12px;
  overflow:hidden;box-shadow:var(--shadow-card);background:var(--pv-page,#fff);
  font-family:var(--pv-body,sans-serif);}

/* The sidebar is the one element that makes this read as an application instead of a
   web page, so it is a solid --pv-primary band at a fixed width and never collapses.
   Its text is --pv-on-chrome: preview.js derives that as the highest-contrast of
   white/#111111/#000000 that still clears 4.5:1 on the primary, so the lockup and the
   nav stay legible for a near-black primary (#000000 -> #ffffff, 21:1) and for a
   near-white one (#f7f9f8 -> #000000, 19.86:1) alike. Painting it --pv-on instead put
   the shipped default #ffffff on that pale primary at 1.06:1 and emptied the sidebar.
   The border-right is what keeps the frame legible when the primary is so light that
   the sidebar and the content ground are the same colour. */
.sgpv-pf-side{flex:none;width:96px;min-width:0;display:flex;flex-direction:column;gap:10px;
  padding:11px 0 14px;background:var(--pv-primary);border-right:1px solid var(--pv-line);}
/* B15's lesson, one level down: a real client name is longer than the slot. It wraps
   here rather than truncating — a lockup with the end cut off is a worse answer to
   "is this my brand" than a two-line one. */
.sgpv-pf-brand{padding:0 10px;font-family:var(--pv-head);color:var(--pv-on-chrome,#fff);
  font-size:11px;line-height:1.2;font-weight:700;overflow-wrap:anywhere;}
.sgpv-pf-nav{display:flex;flex-direction:column;gap:1px;}
.sgpv-pf-nav i{font-style:normal;font-size:9px;line-height:1.3;padding:5px 10px;
  color:var(--pv-on-chrome,#fff);}
/* The current page, cut out of the sidebar in the content ground so it reads as
   selected. --pv-primary on --pv-page is the pairing .sgpv-brand already uses in the
   website nav; a third accent fill in a mockup this small would have been noise. */
.sgpv-pf-nav i.is-on{background:var(--pv-page,#fff);color:var(--pv-primary);font-weight:700;}

/* min-width:0 is load-bearing: without it the table's grid rows set the flex basis of
   this column and the sidebar gets squeezed out of the 360px panel. */
.sgpv-pf-main{flex:1;min-width:0;}

.sgpv-pf-top{display:flex;align-items:center;gap:8px;padding:9px 12px;
  background:var(--pv-page,#fff);border-bottom:1px solid var(--pv-line);}
.sgpv-pf-title{font-family:var(--pv-head);color:var(--pv-primary);font-size:12px;font-weight:700;
  letter-spacing:-.01em;}
.sgpv-pf-badge{background:var(--pv-accent);color:var(--pv-on-accent,var(--pv-on,#fff));
  font-size:8px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;
  border-radius:20px;padding:3px 8px;}
.sgpv-pf-user{display:flex;align-items:center;gap:6px;margin-left:auto;}
.sgpv-pf-user i{font-style:normal;font-size:9px;color:var(--pv-muted);}
/* the avatar carries no text, which is the only reason accent-soft can fill it: there
   is no derived "text on accent-soft" and nothing here needs one */
.sgpv-pf-av{flex:none;width:18px;height:18px;border-radius:50%;
  background:var(--pv-accent-soft);border:1px solid var(--pv-line);}

.sgpv-pf-body{padding:11px 12px 12px;display:flex;flex-direction:column;gap:11px;}
.sgpv-pf-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.sgpv-pf-tile{min-width:0;background:var(--pv-surface);border:1px solid var(--pv-line);
  border-radius:9px;padding:8px 9px;}
.sgpv-pf-tile b{display:block;font-family:var(--pv-head);color:var(--pv-primary);
  font-size:18px;line-height:1.1;font-weight:700;letter-spacing:-.02em;}
.sgpv-pf-tile span{display:block;margin-top:3px;font-size:8px;letter-spacing:.4px;
  text-transform:uppercase;color:var(--pv-muted);}

.sgpv-pf-panel{border:1px solid var(--pv-line);border-radius:9px;overflow:hidden;
  background:var(--pv-page,#fff);}
.sgpv-pf-panel-h{display:flex;align-items:center;gap:8px;padding:8px 10px;
  border-bottom:1px solid var(--pv-line);}
.sgpv-pf-panel-t{font-family:var(--pv-head);color:var(--pv-primary);font-size:10.5px;font-weight:700;}
/* The one place the client's own "text on color" value is painted. A primary fill is
   exactly what that field is for, and if the pairing is wrong the cost is one button
   label — with the contrast warning that governs the pair sitting directly above the
   preview — rather than the whole sidebar. */
.sgpv-pf-btn{margin-left:auto;flex:none;background:var(--pv-primary);color:var(--pv-on,#fff);
  font-size:9px;font-weight:600;border-radius:6px;padding:5px 11px;}

/* 3fr/3fr/2fr, not fixed widths: at a 360px panel the third column is ~40px and the
   pill still has to fit inside it. */
.sgpv-pf-tr{display:grid;grid-template-columns:3fr 3fr 2fr;gap:8px;align-items:center;
  padding:6px 10px;border-bottom:1px solid var(--pv-line);}
.sgpv-pf-tr:last-child{border-bottom:none;}
.sgpv-pf-tr span{min-width:0;font-size:9.5px;line-height:1.35;color:var(--pv-secondary);
  overflow-wrap:anywhere;}
.sgpv-pf-th{background:var(--pv-surface);}
.sgpv-pf-th span{font-size:8px;letter-spacing:.4px;text-transform:uppercase;color:var(--pv-muted);}
.sgpv-pf-pill{display:inline-block;font-style:normal;background:var(--pv-accent);
  color:var(--pv-on-accent,var(--pv-on,#fff));font-size:8px;font-weight:700;
  border-radius:20px;padding:2px 7px;}

/* ---------- <=640px ---------- */

/* On a phone the window is a bottom sheet at most 46vh tall, so the platform
   miniature has to give height back: the sidebar turns into the app bar it would be
   on a real phone build, which keeps the brand and the nav visible without spending
   a fixed 96px of a ~340px width on them. It wraps rather than scrolls — four nav
   items at 9px do not fit beside a long brand name at 340px, and a row that clips is
   worse than one that runs to two lines. */
@media(max-width:640px){
  .sgpv-band{padding:13px 14px;}
  .sgpv-band-t{font-size:12.5px;}
  .sgpv-foot-l{margin-left:0;flex-basis:100%;}

  .sgpv-pf{flex-direction:column;}
  .sgpv-pf-side{width:auto;flex-direction:row;align-items:center;flex-wrap:wrap;
    gap:4px 10px;padding:9px 11px;border-right:none;border-bottom:1px solid var(--pv-line);}
  .sgpv-pf-brand{padding:0;white-space:nowrap;}
  .sgpv-pf-nav{flex-direction:row;margin-left:auto;gap:2px;}
  .sgpv-pf-nav i{padding:3px 7px;border-radius:5px;}
  .sgpv-pf-top{padding:8px 11px;}
  .sgpv-pf-body{padding:10px 11px 11px;gap:9px;}
  .sgpv-pf-tiles{gap:6px;}
  .sgpv-pf-tile{padding:7px 8px;}
  .sgpv-pf-tile b{font-size:15px;}
  .sgpv-pf-tr{padding:6px 8px;gap:6px;}
}

/* ---------- print ---------- */

/* The signed record prints the values, never the toys. Belt and braces: the inline
   slots are inside .sgpv-slot and the floating window is .pvw, and both of those are
   already display:none in print in their own files — but neither of those files is
   this one, and the miniature must not be able to reach a printed record because a
   rule two files away moved. */
@media print{
  .sgpv-pf,.sgpv-band,.sgpv-strip,.sgpv-foot{display:none!important;}
}