/* PixelBlocker+ web Dom control: the page frame (site/site/app).
   GENERATED from pb_design/pb_tokens.json by `python3 pb_design/generate.py`. Do not edit by hand.
   Edit pb_design/pb_tokens.json, then run the command above from the V3 root.
   Linked after pb_tokens.css and pb_components.css by the Dom control page only;
   the site's other pages never load it. Holds the desktop surface's values where
   they differ from the web surface, the part tokens and the frame.
*/

:root {
  /* The desktop surface's values where the web surface differs (decision 18) */
  --pb-text-2: #8F8FA2;
  --pb-text-3: #80809F;
}
:root {
  /* Part tokens (pb_tokens.json parts), the desktop surface's values */
  --pb-red-40: rgba(255, 0, 60, 0.40);
  --pb-yellow-40: rgba(252, 227, 0, 0.40);
  --pb-green-50: rgba(0, 255, 156, 0.50);
  --pb-red-18: rgba(255, 0, 60, 0.18);
  --pb-yellow-18: rgba(252, 227, 0, 0.18);
  --pb-green-18: rgba(0, 255, 156, 0.18);
  --pb-cyan-18: rgba(0, 240, 255, 0.18);
  --pb-green-12: rgba(0, 255, 156, 0.12);
  --pb-yellow-12: rgba(252, 227, 0, 0.12);
  --pb-red-55: rgba(255, 0, 60, 0.55);
  --pb-red-60: rgba(255, 0, 60, 0.60);
  --pb-green-60: rgba(0, 255, 156, 0.60);
  --pb-yellow-60: rgba(252, 227, 0, 0.60);
  --pb-text-3-60: rgba(128, 128, 159, 0.60);
  --pb-red-70: rgba(255, 0, 60, 0.70);
  --pb-green-70: rgba(0, 255, 156, 0.70);
  --pb-text-70: rgba(232, 232, 240, 0.70);
  --pb-yellow-85: rgba(252, 227, 0, 0.85);
  --pb-card-92: rgba(13, 13, 22, 0.92);
  --pb-card-hover: #191926;
  --pb-red-on-void: #1A060F;
  --pb-green-on-void: #061A17;
  --pb-yellow-on-void: #1A180A;
  --pb-text-3-on-void: #101017;
  --pb-text-on-void: #18181D;
  --pb-red-on-card: #200C19;
  --pb-switch-track: rgba(120, 120, 128, 0.32);
  --pb-switch-thumb: #FFFFFF;
  --pb-switch-shadow: rgba(0, 0, 0, 0.15);
  --pb-switch-shadow-near: rgba(0, 0, 0, 0.06);
  --pb-on-tier: #FFFFFF;
  --pb-scrim: rgba(0, 0, 0, 0.60);
  --pb-compare-rule: rgba(255, 255, 255, 0.18);
  --pb-font-icon: 'Material Symbols Sharp';
  --pb-font-system: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --pb-ease: cubic-bezier(0.42, 0, 0.58, 1);
  --pb-switch-ms: 200ms;
}
/* Nothing rubber-bands: no page and no inner scroller moves past its edge or drags what is behind it. */
* { overscroll-behavior: none; }


/* ---- The live preview (pb_preview.js): the Sub's Filter pages and the Dom's Censor style, its canvas drawn at its own
   712 px at most and scaled down to the column on a narrow window, its labels over its corners ---- */
.lk-preview-host { width: 100%; max-width: 712px; }
.lk-preview { position: relative; border: 1px solid var(--pb-border-active); background: var(--pb-void); overflow: hidden; }
.lk-canvas { display: block; width: 100%; height: auto; touch-action: none; cursor: ew-resize; }
.lk-tag { position: absolute; z-index: 2; max-width: 46%; padding: 3px 8px; background: var(--pb-card-92);
  font: 400 9px/1.4 var(--pb-font-mono); letter-spacing: 2px; text-transform: uppercase; overflow-wrap: anywhere; }
.lk-tag--title { top: 8px; left: 9px; color: var(--pb-red); border: 1px solid var(--pb-red-40); }
.lk-tag--meta { top: 8px; right: 9px; color: var(--pb-text-2); text-align: end; }
.lk-tag--meta:empty { display: none; }
.lk-tag--hint { bottom: 8px; right: 9px; color: var(--pb-text-2); }
[dir="rtl"] .lk-tag--title { left: auto; right: 9px; }
[dir="rtl"] .lk-tag--meta, [dir="rtl"] .lk-tag--hint { right: auto; left: 9px; }

/* ---- The page base (new pages only: today's pages never link this file) ---- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { background: var(--pb-void); color: var(--pb-text); font: 400 16px/1.35 var(--pb-font-body); -webkit-font-smoothing: antialiased; }

/* ---- The window: the atmosphere, the page, the tab bar at the foot ----
   desk.css without the drawn macOS title bar (mockup only: the real window has its own). */
.win {
  --win-ground:
    radial-gradient(circle 600px at 20% 0%, var(--pb-atmos-red) 30px, transparent 600px),
    radial-gradient(circle 500px at 85% 100%, var(--pb-atmos-cyan) 30px, transparent 500px),
    var(--pb-void);
  min-height: 100vh; display: flex; flex-direction: column;
  background: var(--win-ground);
  background-attachment: fixed;
}
.win-main { flex: 1 0 auto; }

/* ---- The frame: PixelBlocker's column, widened to two columns on the desktop ---- */
:root { --desk-side: 32px; }
.desk { max-width: 1120px; margin: 0 auto; padding: 0 var(--desk-side) 30px; display: flex; flex-direction: column; gap: 14px; }
.desk--narrow { max-width: 820px; }
.desk-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 28px; align-items: start; }
.desk-2--side { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
.desk-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.desk-col > .pb-section2 { padding-top: 6px; }
.desk-col > .pb-section2 ~ .pb-section2 { padding-top: 14px; }
.desk .pb-title { padding-bottom: 6px; }
.sticky-col { position: -webkit-sticky; position: sticky; top: 14px; }
.desk-back { padding: 10px 0 0; }

/* ---- The bar: the window's five sections, drawn inside the page by pb_frame.js ----
   Its column is the page's own (.desk), so its edges are the content's edges at every width, and it
   stands as far from the window's foot as the column stands from the window's sides. The sections
   are Home's tile row (.pb-tiles, .pb-tile), side by side on five equal columns. The page's ground
   runs behind it: the same ground, faded in above the bar, takes the content away before it reaches
   the tiles, so nothing is ever cut by an edge, and the page's foot leaves room to scroll clear. */
.win-bar { position: fixed; right: 0; bottom: 0; left: 0; z-index: 20; padding-bottom: var(--desk-side); pointer-events: none; }
.win-bar::before {
  content: ''; position: absolute; top: -56px; right: 0; bottom: 0; left: 0;
  background: var(--win-ground, var(--pb-void)); background-attachment: fixed;
  -webkit-mask-image: linear-gradient(to bottom, transparent, var(--pb-void) 48px); mask-image: linear-gradient(to bottom, transparent, var(--pb-void) 48px);
}
.win-bar > .desk { position: relative; padding-bottom: 0; }
html.pb-has-bar .win { box-sizing: border-box; padding-bottom: calc(var(--pb-bar-h, 0px) + 26px); }
.pb-bar { grid-template-columns: repeat(5, minmax(0, 1fr)); pointer-events: auto; }
.pb-bar > .pb-tile { --_bar: var(--pb-border-active); --_bar-glow: transparent; flex-direction: row; gap: 10px; padding: 16px 8px; }
.pb-bar > .pb-tile .pb-icon { font-size: 22px; color: var(--pb-text-2); }
.pb-bar > .pb-tile .pb-tile-label { min-width: 0; font-size: 10px; letter-spacing: 2px; color: var(--pb-text-2); }
.pb-bar > .pb-tile.is-selected { --_bd: var(--pb-red-40); --_bar: var(--pb-red); --_bar-glow: var(--pb-red-18); --_bg: var(--pb-red-on-card); }
.pb-bar > .pb-tile.is-selected .pb-icon { color: var(--pb-red); filter: drop-shadow(0 0 4px var(--pb-red-glow)); }
.pb-bar > .pb-tile.is-selected .pb-tile-label { color: var(--pb-text); }
@media (hover: hover) {
  .pb-bar > .pb-tile:hover .pb-icon, .pb-bar > .pb-tile:hover .pb-tile-label { color: var(--pb-text); }
  .pb-bar > .pb-tile.is-selected:hover .pb-icon { color: var(--pb-red); }
}
/* the longest word decides: the tile's own smaller type first, then the word under its icon */
.pb-bar.is-tight > .pb-tile { gap: 6px; padding: 18px 4px; }
.pb-bar.is-tight > .pb-tile .pb-icon { font-size: 18px; }
.pb-bar.is-tight > .pb-tile .pb-tile-label, .pb-bar.is-stacked > .pb-tile .pb-tile-label { font-size: 9px; letter-spacing: 1.5px; }
.pb-bar.is-stacked > .pb-tile { flex-direction: column; gap: 4px; padding: 8px 4px; }
html[lang|="ar"] .pb-bar > .pb-tile .pb-tile-label { letter-spacing: 0; }

/* ---- The first-run setup: the step bar and the footer ---- */
.steps { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; }
.steps i { height: 3px; background: var(--pb-border-active); }
.steps i.done { background: var(--pb-red-55); }
.steps i.now { background: var(--pb-red); box-shadow: 0 0 6px var(--pb-red-glow); }
.setup-foot { position: -webkit-sticky; position: sticky; bottom: 0; z-index: 20; flex: none; background: var(--pb-void); border-top: 1px solid var(--pb-border); }
.setup-foot-in { max-width: 1120px; margin: 0 auto; padding: 14px 32px; display: grid; grid-template-columns: minmax(180px, max-content) minmax(0, 1fr) minmax(180px, max-content); align-items: stretch; gap: 12px; }
.setup-count { align-self: center; text-align: center; font: 400 12px/1.4 var(--pb-font-mono); letter-spacing: 3px; color: var(--pb-text-2); }

/* ---- Dialogs: over the window (a scrim) or as their own window (PbWebDialog: the panel is the page) ---- */
.win-scrim { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 40; background: var(--pb-scrim); display: grid; place-items: center; padding: 18px; }
.dlg-page { min-height: 100vh; display: flex; align-items: flex-start; justify-content: center; background: var(--pb-deep); }
.dlg-page > .pb-sheet-panel { max-width: none; }
.dlg-page > .pb-sheet-panel::before { display: none; }
.dlg-name { font: 400 22px/1.3 var(--pb-font-mono); color: var(--pb-red); letter-spacing: 1px; overflow-wrap: anywhere; }
.dlg-kicker { font: 400 10px/1.4 var(--pb-font-mono); letter-spacing: 2px; text-transform: uppercase; color: var(--pb-text-2); margin: -4px 0 0; }

/* ---- Desktop rules for choices: the chosen segment reads as a ticked choice, not a second primary ---- */
.win .pb-seg > .is-selected, .win .pb-seg > [aria-pressed="true"] { --_bd: var(--pb-selected); --_bg: var(--pb-red-on-card); color: var(--pb-text); }
.win .pb-seg > * small { font-size: 10px; color: var(--pb-text-2); }
.win .pb-seg > .is-selected small, .win .pb-seg > [aria-pressed="true"] small { color: var(--pb-text-2); }
.chip-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); grid-auto-rows: 1fr; gap: 8px; }
.chip-grid > .pb-chip2 { width: 100%; }

@media (max-width: 1100px) {
  :root { --desk-side: 24px; }
  .desk-2 { gap: 12px 20px; }
  .setup-foot-in { padding: 14px 24px; }
}
/* The smallest window (700 px): one column, the setup footer stacked. Not in desk.css, which
   drew 1280 and 1024 only. */
@media (max-width: 859px) {
  .desk-2, .desk-2--side { grid-template-columns: minmax(0, 1fr); }
  .sticky-col { position: static; }
  .setup-foot-in { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Style and border tiles: the popup's .stile and flat swatches, about the popup's size, as many
   a row as fit. Each group's grid fills the page's width. ---- */
.stile { --n: var(--pb-notch-chip); position: relative; isolation: isolate; display: flex; flex-direction: column; gap: 6px; padding: 6px 6px 8px; cursor: pointer; text-align: center; }
.stile::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -2; background: var(--pb-border); clip-path: polygon(0 0, calc(100% - var(--n)) 0, 100% var(--n), 100% 100%, var(--n) 100%, 0 calc(100% - var(--n))); }
.stile::after { content: ''; position: absolute; top: 1px; right: 1px; bottom: 1px; left: 1px; z-index: -1; background: var(--pb-card); clip-path: polygon(0 0, calc(100% - var(--n)) 0, 100% var(--n), 100% 100%, var(--n) 100%, 0 calc(100% - var(--n))); }
.stile.is-selected::before { background: var(--pb-red); }
.stile.is-selected::after { background: var(--pb-red-on-card); }
.stile-name { font: 600 13px/1.3 var(--pb-font-body); color: var(--pb-text); }
.stile .tick { position: absolute; top: 9px; left: 9px; width: 16px; height: 16px; background: var(--pb-red); color: var(--pb-void); display: grid; place-items: center; z-index: 2; }
.stile .tick .pb-icon { font-size: 14px; font-variation-settings: 'FILL' 0, 'wght' 700, 'GRAD' 0, 'opsz' 20; }
/* swatches: BEGIN. As in the popup, the one place literal colours are allowed. */
.sw { height: 42px; border-radius: 6px; position: relative; overflow: hidden; background: #2a2a38; }
.sw--pixel { background: conic-gradient(#3a3a4c 25%, #55556a 0 50%, #3a3a4c 0 75%, #55556a 0) 0 0 / 12px 12px; }
.sw--blur { background: radial-gradient(circle at 40% 50%, #8a8aa0, #3a3a4c 70%); filter: blur(0.5px); }
.sw--solid { background: #000; }
.sw--fill { background: #FF1493; }
.sw--invert { background: linear-gradient(135deg, #c8c8d6, #44445a); }
.sw--glitch { background: linear-gradient(90deg, #FF003C 0 30%, #2a2a38 30% 45%, #00F0FF 45% 70%, #2a2a38 70%); }
.sw--static { background: repeating-conic-gradient(#888 0 25%, #333 0 50%) 0 0 / 4px 4px; }
.sw--scan { background: repeating-linear-gradient(180deg, #1c1c28 0 4px, #4a4a5c 4px 6px); }
.sw--spot { background: radial-gradient(circle at 40% 50%, #fff 0 8px, #000 18px); }
.sw--cinema { background: linear-gradient(180deg, #000 0 26%, #d8c48a 26% 74%, #000 74%); }
.sw--dither { background: repeating-conic-gradient(#fff 0 25%, #000 0 50%) 0 0 / 6px 6px; }
.sw--crt { background: repeating-linear-gradient(180deg, #072a18 0 3px, #0f5a34 3px 4px); }
.sw--chroma { background: linear-gradient(90deg, #c8002f 0 45%, #0bb 55%); }
.sw--ascii { background: repeating-linear-gradient(180deg, #021a0a 0 5px, #0a4a1e 5px 7px); }
.sw--paywall { background: linear-gradient(180deg, #14141f, #0a0a12); }
.sw--paywall::after { content: '£20'; position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: grid; place-items: center; font: 400 18px/1 var(--pb-font-censor); color: #FF003C; letter-spacing: 1px; }
.sw--nosignal { background: linear-gradient(90deg, #c0c000 0 16%, #00c0c0 0 32%, #00c000 0 48%, #c000c0 0 64%, #c00000 0 80%, #0000c0 0); }
.sw--buffer { background: radial-gradient(circle at 50% 50%, transparent 0 9px, #555 9px 12px, transparent 12px), #111; }
.sw--bsod { background: #0a5ad0; }
.sw--frost { background: linear-gradient(135deg, #e8e8f0, #b8b8c8); }
.sw--frost::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: repeating-linear-gradient(45deg, rgba(255,255,255,.25) 0 2px, transparent 2px 6px); }
.sw--b { background: #14141c; }
.sw--b::after { content: ''; position: absolute; top: 7px; right: 10px; bottom: 7px; left: 10px; }
.sw--b-none::after { border: 1px dashed #3a3a4a; }
.sw--b-classic::after { border: 2px solid #FF003C; }
.sw--b-neon::after { border: 2px solid #FF3d6a; box-shadow: 0 0 6px #FF003C, inset 0 0 6px #FF003C; }
.sw--b-glow::after { box-shadow: 0 0 0 2px rgba(255,0,60,.5), 0 0 10px 2px rgba(255,0,60,.7); }
.sw--b-rainbow::after { border: 2px solid; border-image: linear-gradient(90deg, #f00, #fc0, #0f6, #0cf, #a0f) 1; }
.sw--b-gradient::after { border: 2px solid; border-image: linear-gradient(90deg, #FF003C, #330010) 1; }
.sw--b-ants::after { border: 2px dashed #FF003C; }
.sw--b-brackets::after { border: 2px solid #FF003C; clip-path: polygon(0 0, 30% 0, 30% 3px, 3px 3px, 3px calc(100% - 3px), 30% calc(100% - 3px), 30% 100%, 0 100%, 0 0, 100% 0, 100% 100%, 70% 100%, 70% calc(100% - 3px), calc(100% - 3px) calc(100% - 3px), calc(100% - 3px) 3px, 70% 3px, 70% 0); }
.sw--b-hazard::after { border: 4px solid; border-image: repeating-linear-gradient(45deg, #FCE300 0 5px, #111 5px 10px) 4; }
.sw--b-ticker::after { top: auto; right: 6px; bottom: 6px; left: 6px; height: 8px; background: #FF003C; }
/* swatches: END */
.stile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); grid-auto-rows: 1fr; gap: 8px; }
.stile { min-width: 0; user-select: none; }
.stile input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.stile > .pb-pill2 { position: absolute; top: 9px; right: 9px; z-index: 2; }
.stile:not(.is-selected) .tick { display: none; }
.stile input:focus-visible ~ .sw { outline: 1px solid var(--pb-red); outline-offset: 2px; }
.stile.is-disabled { opacity: 0.4; cursor: default; }
.stile-name { overflow-wrap: anywhere; }