/* PolyForm V2 — operator console surface. Loaded ONLY by base.html, AFTER
   tokens.css. Split out of the former monolithic pf.css. Holds the console
   shell, dashboard/board, operator pages, quote builder, job detail/cockpit,
   ops surfaces, command palette, files manager, and the console-scoped
   dark-mode rules. (Cross-surface utilities live in tokens.css.) */

/* console-scoped dark surface tokens (rescoped from :root so the
   public surface always renders light regardless of saved pref) */
[data-theme="dark"] .pf-console-body {
  --pf-bg: #0B1620;
  --pf-surface: #13212E;
  --pf-border: #1F3242;
  --pf-text: #E7EDF2;
  --pf-muted: #93A1AD;
}

/* header / nav */
.pf-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--pf-s-3) var(--pf-s-5);
  background: var(--pf-dark); color: #fff;
}
.pf-brand { color: #fff; font-weight: 700; text-decoration: none; letter-spacing: .2px; }
.pf-nav { display: flex; align-items: center; gap: var(--pf-s-4); }
.pf-nav a { color: #cfe0f0; text-decoration: none; }
.pf-inline { display: inline; margin: 0; }


.pf-main { max-width: 1100px; margin: 0 auto; padding: var(--pf-s-5); }
.pf-footer { color: var(--pf-muted); text-align: center; padding: var(--pf-s-5); font-size: .85rem; }

/* operator console shell */
.pf-console-body {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--pf-blue) 5%, transparent), transparent 18rem),
    var(--pf-bg);
}
.pf-console-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 6.25rem minmax(0, 1fr);
  transition: grid-template-columns .18s ease;
}
.pf-console-shell.is-sidebar-expanded {
  grid-template-columns: 13.5rem minmax(0, 1fr);
}
.pf-console-shell.is-sidebar-hidden {
  grid-template-columns: 6.25rem minmax(0, 1fr);
}
.pf-sidebar {
  position: sticky;
  top: 0;
  width: 100%;
  min-width: 0;
  height: 100vh;
  display: grid;
  grid-template-rows: auto auto 1fr auto auto;
  gap: var(--pf-s-4);
  padding: var(--pf-s-3) var(--pf-s-2);
  background: var(--pf-dark);
  color: #fff;
  overflow: visible;
  scrollbar-width: none;
  transition: transform .18s ease, padding .18s ease, box-shadow .18s ease;
}
.pf-sidebar::-webkit-scrollbar {
  width: 0;
  height: 0;
}
.pf-console-shell.is-sidebar-hidden .pf-sidebar {
  box-shadow: inset -1px 0 0 rgba(255,255,255,.1);
}
.pf-sidebar-brand {
  min-width: 0;
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  gap: var(--pf-s-2);
  padding-bottom: var(--pf-s-3);
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.pf-sidebar-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  padding: 3px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.28);
  box-shadow: 0 0 0 3px rgba(255,255,255,.06);
  text-decoration: none;
  letter-spacing: 0;
  overflow: hidden;
}
.pf-sidebar-logo img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 999px;
  object-fit: cover;
}
.pf-sidebar-brand span {
  max-width: 100%;
  overflow-wrap: anywhere;
  color: #C7D2DC;
  font-size: .68rem;
  text-align: center;
}
.pf-sidebar-pin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--pf-r-sm);
  background: rgba(255,255,255,.08);
  color: #fff;
  cursor: pointer;
}
.pf-sidebar-pin.is-active {
  background: #fff;
  color: var(--pf-dark);
}
/* Sidebar search form retired (PR-2 item H): Ctrl/⌘-K palette is the sole
   jobs-search surface now; its styles live in the command-palette block. */
.pf-sidebar-nav {
  display: grid;
  gap: var(--pf-s-4);
  align-content: start;
  min-width: 0;
  overflow-y: auto;
  min-height: 0;
  scrollbar-width: none;
}
.pf-sidebar-nav::-webkit-scrollbar {
  width: 0;
  height: 0;
}
.pf-sidebar-nav section {
  display: grid;
  gap: var(--pf-s-1);
  min-width: 0;
}
.pf-sidebar-nav h2 {
  margin: 0 0 var(--pf-s-1);
  color: #8EA3B6;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}
.pf-sidebar-nav a {
  display: grid;
  justify-items: center;
  gap: 2px;
  align-items: center;
  min-height: 3.65rem;
  padding: var(--pf-s-2) 2px;
  border-radius: var(--pf-r-sm);
  color: #D4DEE7;
  text-decoration: none;
  font-size: .68rem;
  font-weight: 650;
  line-height: 1.05;
  text-align: center;
  min-width: 0;
}
.pf-sidebar-nav a span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pf-sidebar-nav a:hover,
.pf-sidebar-nav a:focus-visible {
  background: rgba(255,255,255,.08);
  color: #fff;
  outline: none;
}
.pf-sidebar-nav a.is-active {
  background: #fff;
  color: var(--pf-dark);
  box-shadow: 0 0 0 2px rgba(255,255,255,.22), inset 0 -3px 0 var(--pf-terracotta);
}
.pf-console-shell.is-sidebar-expanded .pf-sidebar-nav a {
  grid-template-columns: 1.35rem 1fr;
  justify-items: start;
  min-height: 2.65rem;
  padding: 0 var(--pf-s-3);
  font-size: .9rem;
  text-align: left;
}
.pf-settings-flyout {
  position: relative;
  min-width: 0;
}
.pf-settings-summary {
  display: grid;
  justify-items: center;
  gap: 2px;
  align-items: center;
  min-height: 3.65rem;
  padding: var(--pf-s-2) 2px;
  border-radius: var(--pf-r-sm);
  color: #D4DEE7;
  font-size: .68rem;
  font-weight: 650;
  line-height: 1.05;
  text-align: center;
  cursor: pointer;
  list-style: none;
  min-width: 0;
}
.pf-settings-summary::-webkit-details-marker {
  display: none;
}
.pf-settings-summary:hover,
.pf-settings-summary:focus-visible {
  background: rgba(255,255,255,.08);
  color: #fff;
  outline: none;
}
.pf-settings-flyout.is-active .pf-settings-summary {
  background: #fff;
  color: var(--pf-dark);
  box-shadow: 0 0 0 2px rgba(255,255,255,.22), inset 0 -3px 0 var(--pf-terracotta);
}
.pf-settings-flyout[open] .pf-settings-summary {
  background: rgba(255,255,255,.12);
  color: #fff;
}
.pf-settings-panel {
  display: none;
}
.pf-settings-flyout[open] .pf-settings-panel {
  display: grid;
  position: absolute;
  bottom: 0;
  left: calc(100% + var(--pf-s-3));
  width: min(15rem, calc(100vw - 8rem));
  gap: var(--pf-s-1);
  padding: var(--pf-s-2);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--pf-r-sm);
  background: #142331;
  box-shadow: 0 18px 42px rgba(4,14,24,.34);
  z-index: 20;
}
.pf-settings-panel h2 {
  margin: 0 0 var(--pf-s-1);
  color: #8EA3B6;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}
/* PR-2 item B: the two flyout links live outside .pf-sidebar-nav, so they don't
   inherit the nav-row base. Style them here to read as native expanded-mode
   sidebar rows (same icon+label grid, tokens, hover, and active treatment). */
.pf-settings-panel .pf-nav-link {
  display: grid;
  grid-template-columns: 1.35rem 1fr;
  align-items: center;
  justify-items: start;
  gap: var(--pf-s-2);
  min-height: 2.65rem;
  padding: 0 var(--pf-s-3);
  border-radius: var(--pf-r-sm);
  color: #D4DEE7;
  text-decoration: none;
  font-size: .9rem;
  font-weight: 650;
  line-height: 1.05;
  text-align: left;
  min-width: 0;
}
.pf-settings-panel .pf-nav-link span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pf-settings-panel .pf-nav-link:hover,
.pf-settings-panel .pf-nav-link:focus-visible {
  background: rgba(255,255,255,.08);
  color: #fff;
  outline: none;
}
.pf-settings-panel .pf-nav-link.is-active {
  background: #fff;
  color: var(--pf-dark);
  box-shadow: 0 0 0 2px rgba(255,255,255,.22), inset 0 -3px 0 var(--pf-terracotta);
}
.pf-sidebar-tools {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: var(--pf-s-2);
  padding-top: var(--pf-s-3);
  border-top: 1px solid rgba(255,255,255,.12);
}

.pf-console-frame {
  min-width: 0;
  display: grid;
  grid-template-rows: 1fr auto;
}
.pf-console-main {
  width: 100%;
  max-width: 1440px;
}

.pf-console-footer {
  padding-top: 0;
}

/* ============================================================================
   CONSOLE REDESIGN - SHELL (PR A, 2026-07)
   The "blueprint" operator shell: navy rail + rounded light frame + command
   palette. New wrappers .pf-app / .pf-side / .pf-frame REPLACE the former
   .pf-console-shell / .pf-sidebar / .pf-console-frame in base.html. The main
   element keeps its id (#pf-console-main) and its existing padding/max-width,
   so page bodies inside it are UNTOUCHED (their vocab migrates per page family).
   Every rule is scoped under .pf-app so nothing leaks to non-console (.pf-main)
   or the public surface. See docs/CONSOLE_REDESIGN_AUDIT_2026-07-13.md.
   ========================================================================== */

/* Self-host Inter for the console (files already in /static/fonts/inter/; the
   public surface uses its own PFInter face). Progressive: falls back to system
   Inter / sans if a face fails to load. --pf-font already names 'Inter'. */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('/static/fonts/inter/inter-latin-400.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('/static/fonts/inter/inter-latin-500.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('/static/fonts/inter/inter-latin-600.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('/static/fonts/inter/inter-latin-700.woff2') format('woff2');}

/* Console dark overrides for the redesign tokens (light values in tokens.css). */
[data-theme="dark"] .pf-console-body{
  --act:#E8925A; --act-ink:#F2A874; --act-tint:rgba(197,102,48,.16);
  --link:#8CCBFF; --focus:#5AA0F0;
  --stage-new:#8CCBFF; --stage-assessing:#F0A16C; --stage-quoting:#FBBF77;
  --stage-quote-sent:#C4B5FD; --stage-deposit-paid:#5EEAD4; --stage-design-re:#67E8F9;
  --stage-printing:#93C5FD; --stage-ready:#86EFAC; --stage-declined:#FCA5A5;
  --stage-completed:#CBD5E1; --stage-need-info:#F0A860;
  --pf-tint-warm:rgba(197,102,48,.14); --pf-tint-alert:rgba(185,28,28,.16);
  --pf-tint-success:rgba(15,118,110,.16); --pf-tint-link:rgba(0,75,150,.18);
  --pf-grid-line:rgba(130,170,210,.045); --pf-tick:rgba(180,205,230,.22);
}

/* Shell: navy rail + rounded light frame. Body still scrolls; the rail is
   sticky (matches the prior shell's scroll model, restyled). */
.pf-app{display:flex; min-height:100vh; background:var(--pf-dark);}
.pf-app .pf-side{
  width:var(--pf-side-w); flex:none; position:sticky; top:0; align-self:flex-start;
  height:100vh; background:var(--pf-dark); color:var(--pf-on-dark);
  display:flex; flex-direction:column; z-index:30;
  border-right:1px solid rgba(255,255,255,.06);
  transition:width .16s ease;
}
.pf-app.side-collapsed .pf-side{width:var(--pf-side-collapsed);}

.pf-side-brand{display:flex; align-items:center; gap:11px; padding:16px 14px 14px; border-bottom:1px solid rgba(255,255,255,.07);}
.pf-side-badge{width:36px; height:36px; flex:none; border-radius:10px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); display:grid; place-items:center; padding:5px; overflow:hidden;}
.pf-side-badge img{width:100%; height:100%; object-fit:contain;}
.pf-side-brand-tx{display:flex; flex-direction:column; gap:2px; min-width:0;}
.pf-side-brand-tx b{font-size:13px; font-weight:600; color:#fff; line-height:1.1;}
.pf-side-brand-tx span{font-family:var(--pf-mono); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--pf-blue-lite);}
.pf-side-pin{margin-left:auto; background:transparent; border:0; color:rgba(255,255,255,.45); cursor:pointer; padding:6px; border-radius:8px; display:grid; place-items:center;}
.pf-side-pin:hover{color:#fff; background:rgba(255,255,255,.07);}

.pf-side-search{display:flex; align-items:center; gap:9px; margin:10px 12px 2px; padding:9px 11px; width:calc(100% - 24px); border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.04); border-radius:10px; color:rgba(226,234,241,.6); font:500 12.5px/1 var(--pf-font); cursor:pointer; text-align:left;}
.pf-side-search:hover{background:rgba(255,255,255,.09); color:#fff;}
.pf-side-search svg{flex:none;}
.pf-side-search kbd{margin-left:auto; font:600 9.5px/1 var(--pf-mono); letter-spacing:.06em; color:rgba(226,234,241,.55); border:1px solid rgba(255,255,255,.15); border-radius:5px; padding:3px 5px;}

.pf-side-nav{flex:1; overflow-y:auto; padding:12px 12px 6px; display:flex; flex-direction:column; gap:2px; scrollbar-width:none;}
.pf-side-nav::-webkit-scrollbar{width:0; height:0;}
.pf-side-group{font-family:var(--pf-mono); font-size:9.5px; font-weight:600; letter-spacing:.15em; text-transform:uppercase; color:rgba(139,163,187,.7); padding:14px 10px 6px;}
.pf-side-group:first-child{padding-top:4px;}
.pf-side-link{display:flex; align-items:center; gap:11px; padding:9px 11px; border-radius:9px; color:rgba(226,234,241,.82); font-size:13px; font-weight:500; position:relative; cursor:pointer; text-decoration:none; transition:background .16s,color .16s;}
.pf-side-link svg{width:18px; height:18px; flex:none; opacity:.9;}
.pf-side-link:hover{background:rgba(255,255,255,.06); color:#fff; text-decoration:none;}
.pf-side-link.is-active{background:linear-gradient(90deg,rgba(197,102,48,.20),rgba(197,102,48,.05)); color:#fff;}
.pf-side-link.is-active::before{content:""; position:absolute; left:-12px; top:50%; transform:translateY(-50%); width:3px; height:22px; border-radius:0 3px 3px 0; background:var(--pf-terracotta);}
.pf-side-link.is-active svg{color:var(--pf-terra-lite); opacity:1;}

.pf-side-foot{display:flex; align-items:center; flex-wrap:wrap; gap:2px; padding:12px 14px; border-top:1px solid rgba(255,255,255,.07);}
.pf-side-foot form{display:inline; margin:0;}
.pf-side-ibtn{position:relative; background:transparent; border:0; color:rgba(255,255,255,.5); cursor:pointer; width:36px; height:36px; border-radius:9px; display:grid; place-items:center; text-decoration:none;}
.pf-side-ibtn svg{width:18px; height:18px;}
.pf-side-ibtn:hover{color:#fff; background:rgba(255,255,255,.08);}
.pf-side-ibtn.is-active{color:#fff; background:rgba(197,102,48,.20);}
.pf-side-ibtn .pf-nav-dot,.pf-side-ibtn .dot{position:absolute; top:6px; right:6px; width:6px; height:6px; border-radius:50%; background:var(--act); border:1.5px solid var(--pf-dark);}

/* Collapsed rail: hide labels, center icons. */
.pf-app.side-collapsed .pf-side-brand-tx,
.pf-app.side-collapsed .pf-side-link span,
.pf-app.side-collapsed .pf-side-group,
.pf-app.side-collapsed .pf-side-search span,
.pf-app.side-collapsed .pf-side-search kbd{display:none;}
.pf-app.side-collapsed .pf-side-brand{flex-direction:column; gap:10px; justify-content:center; padding:14px 0;}
.pf-app.side-collapsed .pf-side-pin{margin-left:0;}
.pf-app.side-collapsed .pf-side-link{justify-content:center; padding:10px 0;}
.pf-app.side-collapsed .pf-side-link.is-active::before{left:0;}
.pf-app.side-collapsed .pf-side-search{justify-content:center; padding:9px 0;}
.pf-app.side-collapsed .pf-side-foot{flex-direction:column;}

/* Frame: the rounded light panel that holds the page + footer. */
.pf-app .pf-frame{
  flex:1; min-width:0; display:flex; flex-direction:column; background:var(--pf-bg);
  border-radius:16px 0 0 16px; box-shadow:-8px 0 24px rgba(15,32,48,.10);
  background-image:linear-gradient(var(--pf-grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--pf-grid-line) 1px,transparent 1px);
  background-size:34px 34px; background-position:-1px -1px;
}
[data-theme="dark"] .pf-console-body .pf-frame{box-shadow:-8px 0 24px rgba(0,0,0,.28);}
/* Main keeps its own padding/max-width; just grow it so the footer sits low. */
.pf-app .pf-console-main{flex:1;}

/* Command-palette destinations (the "Go to" section merged above job search). */
.pf-palette-dests{border-bottom:1px solid var(--pf-border);}
.pf-palette-section{font:600 .62rem/1 var(--pf-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--pf-muted); padding:12px 16px 6px;}
.pf-palette-dest{display:flex; align-items:center; gap:11px; padding:9px 16px; color:var(--pf-text); text-decoration:none; font-size:.9rem;}
.pf-palette-dest svg{width:16px; height:16px; color:var(--pf-muted); flex:none;}
.pf-palette-dest .grp{margin-left:auto; font-family:var(--pf-mono); font-size:.6rem; color:var(--pf-muted); letter-spacing:.03em;}
.pf-palette-dest:hover,.pf-palette-dest.is-sel{background:var(--act-tint); text-decoration:none;}
.pf-palette-dest.is-hidden{display:none;}

/* Narrow viewports force the collapsed rail. */
@media (max-width:900px){
  .pf-app .pf-side{width:var(--pf-side-collapsed);}
  .pf-app .pf-side-brand-tx,.pf-app .pf-side-link span,.pf-app .pf-side-group,
  .pf-app .pf-side-search span,.pf-app .pf-side-search kbd{display:none;}
  .pf-app .pf-side-brand{flex-direction:column; gap:10px; justify-content:center; padding:14px 0;}
  .pf-app .pf-side-pin{margin-left:0;}
  .pf-app .pf-side-link{justify-content:center; padding:10px 0;}
  .pf-app .pf-side-search{justify-content:center; padding:9px 0;}
  .pf-app .pf-side-foot{flex-direction:column;}
}

/* ============================================================================
   CONSOLE REDESIGN - PAGE BODY: shared primitives + HOME + CAPTURE (PR B)
   The redesign page-body vocabulary, scoped under .pf-rd so it can't touch pages
   that haven't migrated yet (finance/metrics/job still own the old .pf-stat/
   .pf-vital/.pf-card). When every page migrates, a cleanup lifts these to global
   and drops the old rules. Values ported from docs/console-redesign/console.css.
   ========================================================================== */
[data-theme="dark"] .pf-console-body{ --pf-surface-2:#0F1B29; --pf-border-strong:#294256; }

/* --- shared page primitives (scoped) --- */
.pf-rd .pf-eyebrow{font-family:var(--mono); font-size:10.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--act); display:inline-flex; align-items:center; gap:7px;}
.pf-rd .pf-eyebrow::before{content:""; width:14px; height:1.5px; background:var(--act); opacity:.75;}
.pf-rd .pf-eyebrow.muted{color:var(--pf-muted);} .pf-rd .pf-eyebrow.muted::before{background:var(--pf-muted);}
.pf-rd .tnum{font-variant-numeric:tabular-nums;}

.pf-rd .pf-phead{display:flex; align-items:flex-start; gap:20px; margin-bottom:22px;}
.pf-rd .pf-phead-tx{min-width:0;}
.pf-rd .pf-phead h1{font-size:27px; font-weight:700; letter-spacing:-.01em; color:var(--pf-text); margin:6px 0 5px;}
.pf-rd .pf-phead p{color:var(--pf-muted); font-size:14px; max-width:64ch;}
.pf-rd .pf-phead-actions{margin-left:auto; display:flex; gap:10px; flex:none; padding-top:4px;}
.pf-rd .pf-count{font-family:var(--mono); font-size:12px; font-weight:600; color:var(--pf-muted); background:var(--pf-surface-2); border:1px solid var(--pf-border); border-radius:var(--r-pill); padding:2px 9px; letter-spacing:.02em;}

/* buttons (redesign; scoped so old .pf-btn-primary pages are untouched) */
.pf-rd .pf-btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; font-size:13px; font-weight:600; line-height:1; letter-spacing:.005em; padding:0 15px; height:38px; border-radius:var(--r-sm); border:1px solid transparent; cursor:pointer; white-space:nowrap; transition:all var(--dur) var(--ease); text-decoration:none;}
.pf-rd .pf-btn:hover{text-decoration:none;} .pf-rd .pf-btn:active{transform:translateY(1px);}
.pf-rd .pf-btn svg,.pf-rd .pf-btn .pf-icon{width:16px; height:16px; flex:none;}
.pf-rd .pf-btn.is-primary{background:var(--act); color:#fff; border-color:var(--act); box-shadow:0 1px 2px rgba(168,80,31,.25);}
.pf-rd .pf-btn.is-primary:hover{background:var(--act-ink); border-color:var(--act-ink);}
[data-theme="dark"] .pf-console-body .pf-rd .pf-btn.is-primary{color:#241206; box-shadow:none;}
.pf-rd .pf-btn.is-secondary{background:var(--pf-bg); color:var(--pf-text); border-color:var(--pf-border-strong);}
.pf-rd .pf-btn.is-secondary:hover{background:var(--pf-surface-2); border-color:var(--pf-muted);}
.pf-rd .pf-btn.is-ghost{background:transparent; color:var(--pf-muted); border-color:transparent;}
.pf-rd .pf-btn.is-ghost:hover{background:var(--pf-surface-2); color:var(--pf-text);}
.pf-rd .pf-btn.sm{height:32px; padding:0 11px; font-size:12px;}
.pf-rd .pf-btn.block{width:100%;}
.pf-rd .pf-btn[disabled],.pf-rd .pf-btn.is-disabled{opacity:.5; cursor:not-allowed; pointer-events:none;}

/* cards + blueprint corner ticks */
.pf-rd .pf-card{background:var(--pf-bg); border:1px solid var(--pf-border); border-radius:var(--r-lg); box-shadow:var(--sh1);}
.pf-rd .is-blueprint{position:relative;}
.pf-rd .is-blueprint::before,.pf-rd .is-blueprint::after{content:""; position:absolute; width:12px; height:12px; pointer-events:none;}
.pf-rd .is-blueprint::before{top:8px; left:8px; border-top:1.5px solid var(--pf-tick); border-left:1.5px solid var(--pf-tick);}
.pf-rd .is-blueprint::after{bottom:8px; right:8px; border-bottom:1.5px solid var(--pf-tick); border-right:1.5px solid var(--pf-tick);}
.pf-rd .pf-empty-state{color:var(--pf-muted); font-size:13px; padding:14px 4px;}

/* --- HOME --- */
.pf-rd.pf-home-page{max-width:1440px;}
.pf-rd .pf-home{display:grid; grid-template-columns:minmax(0,1.55fr) minmax(320px,1fr); gap:22px; align-items:start;}
/* priority queue */
.pf-rd .pf-queue{padding:18px 18px 16px;}
.pf-rd .pf-queue-h{display:flex; align-items:center; gap:12px; padding:2px 4px 8px;}
.pf-rd .pf-queue-h .pf-eyebrow{margin-right:auto;}
.pf-rd .pf-queue-title{font-size:15px; font-weight:600; color:var(--pf-text); padding:0 4px 12px; border-bottom:1px solid var(--pf-border); margin-bottom:2px;}
.pf-rd .pf-queue-list{display:flex; flex-direction:column;}
.pf-rd .pf-qrow{display:flex; align-items:center; gap:16px; padding:14px 12px 14px 16px; border-radius:var(--r-md); position:relative; transition:background var(--dur) var(--ease);}
.pf-rd .pf-qrow + .pf-qrow{border-top:1px solid var(--pf-border);}
.pf-rd .pf-qrow:hover{background:var(--pf-surface); cursor:pointer;}
.pf-rd .pf-qrow.pf-pri-alert{--_c:var(--pf-alert);}
.pf-rd .pf-qrow.pf-pri-warn{--_c:var(--pf-warning);}
.pf-rd .pf-qrow.pf-pri-quiet{--_c:var(--stage-printing);}
.pf-rd .pf-qrow-tx{min-width:0; flex:1;}
.pf-rd .pf-qrow-tx .id{display:flex; align-items:center; gap:9px; margin-bottom:3px;}
.pf-rd .pf-qrow-tx .id::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--_c,var(--pf-border-strong)); flex:none;}
.pf-rd .pf-qrow-tx .id b{font-size:13.5px; font-weight:600; color:var(--pf-text);}
.pf-rd .pf-qrow-tx p{font-size:12.5px; color:var(--pf-muted); line-height:1.45; margin:0;}
.pf-rd .pf-qrow-act{flex:none; display:flex; align-items:center; gap:8px;}
.pf-rd .pf-qmoney{min-inline-size:5.5rem; font-family:var(--mono); font-size:13px; font-weight:600; color:var(--pf-text); text-align:end; white-space:nowrap;}
.pf-rd .pf-queue-foot{padding:14px 12px 4px; color:var(--pf-muted); font-size:12.5px;}
/* stat tiles - accent only on nonzero */
.pf-rd .pf-stats{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.pf-rd .pf-stat{background:var(--pf-bg); border:1px solid var(--pf-border); border-radius:var(--r-md); padding:14px 15px; position:relative; overflow:hidden; text-decoration:none; transition:box-shadow var(--dur),transform var(--dur);}
.pf-rd .pf-stat .lbl{font-family:var(--mono); font-size:9.5px; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--pf-muted); display:flex; align-items:center; gap:7px;}
.pf-rd .pf-stat.hot .lbl::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--_c,var(--link)); flex:none;}
.pf-rd .pf-stat.hot.attn .lbl::before,.pf-rd .pf-stat.hot.money .lbl::before{background:var(--pf-warning);}
.pf-rd .pf-stat.hot.alert .lbl::before{background:var(--pf-alert);}
.pf-rd .pf-stat .val{font-size:26px; font-weight:700; color:var(--pf-text); line-height:1.05; margin:7px 0 5px;}
.pf-rd .pf-stat.zero .val{color:var(--pf-muted); opacity:.55;}
.pf-rd .pf-stat.hot.money .val{color:var(--pf-warning);}
.pf-rd .pf-stat.hot.alert .val{color:var(--pf-alert);}
.pf-rd .pf-stat .desc{font-size:11.5px; color:var(--pf-muted); line-height:1.35;}
.pf-rd .pf-stat:hover{box-shadow:var(--sh2); transform:translateY(-2px);}
.pf-rd .pf-stat.s-new{--_c:var(--stage-new);} .pf-rd .pf-stat.s-assessing{--_c:var(--stage-assessing);}
.pf-rd .pf-stat.s-quoting{--_c:var(--stage-quoting);} .pf-rd .pf-stat.s-deposit{--_c:var(--stage-deposit-paid);}
.pf-rd .pf-stat.s-printing{--_c:var(--stage-printing);}
/* vitals strip */
.pf-rd .pf-vitals{margin-top:22px; padding:18px 20px 20px;}
.pf-rd .pf-vitals-h{display:flex; align-items:baseline; gap:14px; margin-bottom:14px;}
.pf-rd .pf-vitals-h .pf-eyebrow{margin-right:auto;}
.pf-rd .pf-vitals-note{color:var(--pf-muted); font-size:12.5px;}
.pf-rd .pf-vgrid{display:grid; grid-template-columns:repeat(4,1fr); gap:12px;}
.pf-rd .pf-vital{border:1px solid var(--pf-border); border-radius:var(--r-md); padding:11px 13px; background:var(--pf-surface);}
.pf-rd .pf-vital .vh{font-family:var(--mono); font-size:9px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--pf-muted); margin-bottom:6px;}
.pf-rd .pf-vital .vv{display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:600; color:var(--pf-text);}
.pf-rd .pf-dot{width:8px; height:8px; border-radius:50%; flex:none; background:var(--pf-muted);}
.pf-rd .pf-dot.ok{background:var(--pf-success);} .pf-rd .pf-dot.warn{background:var(--pf-warning);} .pf-rd .pf-dot.off{background:var(--pf-muted); opacity:.5;}

/* --- CAPTURE (+ shared form + two-column primitives) --- */
.pf-rd .pf-two{display:grid; grid-template-columns:minmax(0,1fr) minmax(300px,.62fr); gap:20px; align-items:start;}
.pf-rd .pf-two-aside{position:sticky; top:20px;}
.pf-rd .pf-dcard{background:var(--pf-bg); border:1px solid var(--pf-border); border-radius:var(--r-lg); box-shadow:var(--sh1); padding:20px 22px;}
.pf-rd .pf-dcard-title{font-size:15px; font-weight:600; color:var(--pf-text); margin:2px 0 4px;}
.pf-rd .pf-note{color:var(--pf-muted); font-size:12.5px; line-height:1.45;}
.pf-rd .pf-field{display:block; margin:0;}
.pf-rd .pf-field.full{width:100%;}
.pf-rd .pf-field > label{display:block; font-size:12px; font-weight:600; color:var(--pf-text); margin-bottom:6px;}
.pf-rd .pf-capture-ta,.pf-rd .pf-input{width:100%; font:inherit; font-size:13.5px; color:var(--pf-text); background:var(--pf-bg); border:1px solid var(--pf-border-strong); border-radius:var(--r-sm); padding:10px 12px; resize:vertical;}
.pf-rd .pf-capture-ta:focus,.pf-rd .pf-input:focus{outline:2px solid var(--focus); outline-offset:1px; border-color:var(--focus);}
.pf-rd .pf-drop{display:flex; flex-direction:column; gap:4px; margin-top:16px; padding:16px; border:1.5px dashed var(--pf-border-strong); border-radius:var(--r-md); background:var(--pf-surface); cursor:pointer; transition:border-color var(--dur),background var(--dur);}
.pf-rd .pf-drop:hover,.pf-rd .pf-drop.is-dragging{border-color:var(--act); background:var(--act-tint);}
.pf-rd .pf-drop-h{font-size:13px; font-weight:600; color:var(--pf-text);}
.pf-rd .pf-drop-input{margin-top:8px; font-size:12px; color:var(--pf-muted);}
.pf-rd .pf-cap-actions{display:flex; align-items:center; gap:12px; margin-top:18px; border-top:1px solid var(--pf-border); padding-top:16px;}
.pf-rd .pf-cap-sub{margin-bottom:14px;}
.pf-rd .pf-safety{display:flex; flex-direction:column; gap:12px;}
.pf-rd .pf-safety-item{border-left:2px solid var(--pf-border-strong); padding-left:12px;}
.pf-rd .pf-safety-item b{display:block; font-size:13px; color:var(--pf-text); margin-bottom:2px;}
.pf-rd .pf-safety-item p{margin:0; font-size:12px; color:var(--pf-muted); line-height:1.45;}

/* --- DRAFT REVIEW --- */
.pf-rd .pf-callout{background:var(--pf-tint-link); border:1px solid var(--pf-border); border-left:3px solid var(--link); border-radius:var(--r-md); padding:12px 14px; color:var(--pf-text); font-size:12.5px; line-height:1.5; margin-bottom:16px;}
.pf-rd .pf-flags{list-style:none; margin:0 0 16px; padding:0; display:flex; flex-wrap:wrap; gap:8px;}
.pf-rd .pf-flag{font-size:11.5px; font-weight:600; color:var(--pf-warning); background:var(--pf-tint-warm); border:1px solid color-mix(in srgb,var(--pf-warning) 30%,transparent); border-radius:var(--r-pill); padding:4px 10px;}
.pf-rd .pf-draft-form .pf-field{display:block; margin-bottom:14px;}
.pf-rd .pf-field-label{display:flex; align-items:center; gap:8px; font-size:12px; font-weight:600; color:var(--pf-text); margin-bottom:6px;}
.pf-rd .pf-field.is-uncertain .pf-input{border-color:var(--pf-warning); background:var(--pf-tint-warm);}
.pf-rd .pf-uncertain-badge{font-family:var(--mono); font-size:9px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--pf-warning); background:var(--pf-tint-warm); border:1px solid color-mix(in srgb,var(--pf-warning) 34%,transparent); border-radius:var(--r-sm); padding:2px 6px;}
.pf-rd .pf-form-actions{margin-top:6px;}
.pf-rd .pf-btn.is-danger{background:var(--pf-tint-alert); color:var(--pf-alert); border-color:color-mix(in srgb,var(--pf-alert) 35%,transparent);}
.pf-rd .pf-btn.is-danger:hover{background:var(--pf-alert); color:#fff;}
.pf-rd .pf-draft-images{margin-top:20px;}
.pf-rd .pf-image-tags{list-style:none; margin:8px 0 0; padding:0; display:flex; flex-direction:column; gap:6px;}
.pf-rd .pf-image-tag{display:flex; align-items:center; gap:10px;}
.pf-rd .pf-tag{display:inline-flex; align-items:center; font-family:var(--mono); font-size:10.5px; font-weight:500; letter-spacing:.03em; text-transform:uppercase; color:var(--link); background:var(--pf-tint-link); border:1px solid color-mix(in srgb,var(--link) 26%,transparent); border-radius:5px; padding:3px 7px; white-space:nowrap;}
.pf-rd .pf-discard-form{margin-top:18px; padding-top:16px; border-top:1px solid var(--pf-border);}

/* G8 final: Capture and draft-review fidelity. The selectors stay page-scoped so
   the many legacy .pf-field and .pf-input surfaces keep their current geometry. */
.pf-rd.pf-cap-page,.pf-rd.pf-cap-page .pf-two > *,
.pf-rd.pf-cap-page .pf-cap-form,.pf-rd.pf-cap-page .pf-cap-form form{min-width:0;}
.pf-rd.pf-cap-page .pf-cap-form{position:relative;}
.pf-rd.pf-cap-page .pf-capture-ta{box-sizing:border-box; min-width:0; max-width:100%; min-height:300px; line-height:1.6;}
.pf-rd.pf-cap-page .pf-drop{box-sizing:border-box; min-width:0; max-width:100%; overflow:hidden;}
.pf-rd.pf-cap-page .pf-drop-input{
  display:block; box-sizing:border-box; width:100%; min-width:0; max-width:100%; min-height:44px;
  overflow:hidden; padding:0; color:var(--pf-muted);
}
.pf-rd.pf-cap-page .pf-drop-input::file-selector-button{
  min-height:44px; margin-right:9px; padding:0 12px; border:1px solid var(--pf-border-strong);
  border-radius:var(--r-sm); background:var(--pf-bg); color:var(--pf-text); font:600 12px/1 var(--font); cursor:pointer;
}
.pf-rd.pf-cap-page .pf-btn{min-height:44px; height:auto; padding-block:10px;}
.pf-rd.pf-cap-page :where(.pf-btn,.pf-drop-input,.pf-crumb a):focus-visible{
  outline:2px solid var(--focus); outline-offset:2px;
}

.pf-rd.pf-draft-page{width:100%; max-width:780px; margin-inline:auto;}
.pf-rd.pf-draft-page .pf-crumb{min-width:0; flex-wrap:wrap;}
.pf-rd.pf-draft-page .pf-advisory{
  display:flex; align-items:flex-start; gap:4px; flex-wrap:wrap; margin-bottom:16px; padding:12px 15px;
  border:1px solid var(--pf-border); border-left:3px solid var(--pf-warning); border-radius:var(--r-md);
  background:var(--pf-tint-warm); color:var(--pf-text); font-size:12.5px; line-height:1.5;
}
.pf-rd.pf-draft-page .pf-draft-card{min-width:0; overflow:hidden;}
.pf-rd.pf-draft-page .pf-draft-form .pf-field{min-width:0; margin:0;}
.pf-rd.pf-draft-page .pf-fgrid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px;}
.pf-rd.pf-draft-page .pf-fgrid .pf-field.full{grid-column:1 / -1;}
.pf-rd.pf-draft-page .pf-input{box-sizing:border-box; min-width:0; max-width:100%; min-height:44px;}
.pf-rd.pf-draft-page textarea.pf-input{min-height:120px; line-height:1.55; overflow-wrap:anywhere;}
.pf-rd.pf-draft-page .pf-draft-actions{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:18px -22px -20px;
  padding:16px 22px 20px; border-top:1px solid var(--pf-border); background:var(--pf-surface);
}
.pf-rd.pf-draft-page .pf-discard-form{margin:0 0 0 auto; padding:0; border:0;}
.pf-rd.pf-draft-page .pf-draft-media{min-width:0; margin-top:22px;}
.pf-rd.pf-draft-page .pf-section-label{margin-bottom:10px;}
.pf-rd.pf-draft-page .pf-section-label h2{margin:0;}
.pf-rd.pf-draft-page .pf-draft-media-card{min-width:0;}
.pf-rd.pf-draft-page .pf-draft-media-group + .pf-draft-media-group{
  margin-top:16px; padding-top:16px; border-top:1px solid var(--pf-border);
}
.pf-rd.pf-draft-page .pf-empty-note{margin:0; color:var(--pf-muted); font-size:12.5px; line-height:1.55;}
.pf-rd.pf-draft-page .pf-image-tag{min-width:0; align-items:flex-start;}
.pf-rd.pf-draft-page .pf-image-tag .pf-note{min-width:0; overflow-wrap:anywhere; word-break:break-word;}
[data-theme="dark"] .pf-console-body .pf-rd.pf-draft-page{
  --pf-warning:#FBBF77; --pf-alert:#FCA5A5; --pf-tint-warm:#2E241B; --pf-tint-alert:#301A20;
}
[data-theme="dark"] .pf-console-body .pf-rd.pf-draft-page .pf-btn.is-danger:hover{color:#1A0C04;}

@media (max-width:640px){
  .pf-rd.pf-cap-page .pf-dcard{padding:16px 14px;}
  .pf-rd.pf-cap-page .pf-capture-ta{min-height:220px;}
  .pf-rd.pf-cap-page .pf-phead-actions,.pf-rd.pf-cap-page .pf-phead-actions .pf-btn{width:100%;}
  .pf-rd.pf-cap-page .pf-cap-actions{
    position:sticky; bottom:0; z-index:3; margin:18px -14px -16px; padding:10px 14px calc(10px + env(safe-area-inset-bottom));
    background:color-mix(in srgb,var(--pf-bg) 94%,transparent); box-shadow:0 -8px 18px rgba(15,32,48,.08);
    backdrop-filter:blur(8px);
  }
  .pf-rd.pf-cap-page .pf-cap-actions .pf-btn{width:100%;}
  .pf-rd.pf-cap-page .pf-cap-actions .pf-note{display:none;}
  .pf-rd.pf-draft-page .pf-fgrid{grid-template-columns:1fr;}
  .pf-rd.pf-draft-page .pf-draft-actions{margin-inline:-14px; margin-bottom:-16px; padding:14px; align-items:stretch; flex-direction:column;}
  .pf-rd.pf-draft-page .pf-draft-actions > .pf-btn,
  .pf-rd.pf-draft-page .pf-discard-form,
  .pf-rd.pf-draft-page .pf-discard-form .pf-btn{width:100%;}
  .pf-rd.pf-draft-page .pf-discard-form{margin:0;}
}

@media (max-width:1180px){
  .pf-rd .pf-home{grid-template-columns:1fr;}
  .pf-rd .pf-two{grid-template-columns:1fr;}
  .pf-rd .pf-two-aside{position:static;}
  .pf-rd .pf-vgrid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:640px){
  .pf-rd .pf-stats{grid-template-columns:1fr;}
  .pf-rd .pf-phead{flex-direction:column; gap:12px;}
  .pf-rd .pf-phead-actions{margin-left:0;}
  .pf-rd.pf-home-page .pf-qrow{align-items:flex-start; flex-wrap:wrap;}
  .pf-rd.pf-home-page .pf-qrow-act{width:100%; min-width:0; flex-wrap:wrap; justify-content:flex-end;}
  .pf-rd.pf-home-page .pf-qmoney{min-inline-size:0;}
}

/* ============================================================================
   CONSOLE REDESIGN - BOARD (PR C): pipeline lanes + flow strip + jobs table.
   Scoped under .pf-rd. Table is the default view; lanes are the alternate.
   Ported from docs/console-redesign/console-board.css.
   ========================================================================== */

/* stage chips + per-stage accent (shared by chip / flow-seg / filter pill) */
.pf-rd .pf-chip{display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:600; line-height:1; padding:4px 10px; border-radius:var(--r-pill); border:1px solid; background:color-mix(in srgb,var(--_c,var(--pf-muted)) 12%,transparent); color:var(--_c,var(--pf-muted)); border-color:color-mix(in srgb,var(--_c,var(--pf-muted)) 32%,transparent); white-space:nowrap;}
.pf-rd .pf-chip.dot::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--_c,var(--pf-muted));}
.pf-rd .pf-chip.ok{--_c:var(--pf-success);} .pf-rd .pf-chip.warn{--_c:var(--pf-warning);} .pf-rd .pf-chip.alert{--_c:var(--pf-alert);} .pf-rd .pf-chip.neutral{--_c:var(--pf-muted);}
.pf-rd .pf-chip.stage-new,.pf-rd .pf-flow-seg.stage-new,.pf-rd .pf-fchip.stage-new{--_c:var(--stage-new);}
.pf-rd .pf-chip.stage-assessing,.pf-rd .pf-flow-seg.stage-assessing,.pf-rd .pf-fchip.stage-assessing{--_c:var(--stage-assessing);}
.pf-rd .pf-chip.stage-quoting,.pf-rd .pf-flow-seg.stage-quoting,.pf-rd .pf-fchip.stage-quoting{--_c:var(--stage-quoting);}
.pf-rd .pf-chip.stage-quote-sent,.pf-rd .pf-flow-seg.stage-quote-sent,.pf-rd .pf-fchip.stage-quote-sent{--_c:var(--stage-quote-sent);}
.pf-rd .pf-chip.stage-deposit-paid,.pf-rd .pf-flow-seg.stage-deposit-paid,.pf-rd .pf-fchip.stage-deposit-paid{--_c:var(--stage-deposit-paid);}
.pf-rd .pf-chip.stage-design-re,.pf-rd .pf-flow-seg.stage-design-re,.pf-rd .pf-fchip.stage-design-re{--_c:var(--stage-design-re);}
.pf-rd .pf-chip.stage-printing,.pf-rd .pf-flow-seg.stage-printing,.pf-rd .pf-fchip.stage-printing{--_c:var(--stage-printing);}
.pf-rd .pf-chip.stage-ready,.pf-rd .pf-flow-seg.stage-ready,.pf-rd .pf-fchip.stage-ready{--_c:var(--stage-ready);}
.pf-rd .pf-chip.stage-completed,.pf-rd .pf-flow-seg.stage-completed,.pf-rd .pf-fchip.stage-completed{--_c:var(--stage-completed);}
.pf-rd .pf-chip.stage-need-info,.pf-rd .pf-flow-seg.stage-need-info,.pf-rd .pf-fchip.stage-need-info{--_c:var(--stage-need-info);}
.pf-rd .pf-chip.stage-declined,.pf-rd .pf-flow-seg.stage-declined,.pf-rd .pf-fchip.stage-declined{--_c:var(--stage-declined);}

/* tag variants (base .pf-tag is in the PR B block) */
.pf-rd .pf-tag.bal{color:var(--pf-warning); background:var(--pf-tint-warm); border-color:color-mix(in srgb,var(--pf-warning) 30%,transparent);}
.pf-rd .pf-tag.muted{color:var(--pf-muted); background:var(--pf-surface-2); border-color:var(--pf-border);}
.pf-rd .muted-dash{color:var(--pf-muted);}

/* view toggle */
.pf-rd .pf-view-toggle{display:inline-flex; background:var(--pf-surface-2); border:1px solid var(--pf-border); border-radius:var(--r-sm); padding:2px; gap:2px;}
.pf-rd .pf-view-toggle a,.pf-rd .pf-view-toggle button{background:transparent; border:0; cursor:pointer; padding:6px 9px; border-radius:5px; color:var(--pf-muted); display:grid; place-items:center; text-decoration:none;}
.pf-rd .pf-view-toggle a.is-on{background:var(--pf-dark); color:#fff;}
[data-theme="dark"] .pf-console-body .pf-rd .pf-view-toggle a.is-on{background:var(--link); color:#08131f;}
.pf-rd .pf-view-toggle a:hover,.pf-rd .pf-view-toggle button:hover{color:var(--pf-text);}

/* board container: neutralize the old kanban grid; hold flow + pipeline */
.pf-rd .pf-board{display:block;}

/* flow strip */
.pf-rd .pf-flow{display:flex; gap:6px; margin-bottom:18px; overflow-x:auto; padding-bottom:2px;}
.pf-rd .pf-flow::-webkit-scrollbar{height:7px;} .pf-rd .pf-flow::-webkit-scrollbar-thumb{background:var(--pf-border-strong); border-radius:8px;}
.pf-rd .pf-flow-seg{flex:1 1 0; min-width:86px; border:1px solid var(--pf-border); border-radius:var(--r-md); background:var(--pf-bg); padding:9px 11px 10px; cursor:pointer; display:flex; flex-direction:column; gap:7px; text-align:left; transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease);}
.pf-rd .pf-flow-seg:hover{border-color:var(--_c); box-shadow:var(--sh1); transform:translateY(-1px);}
.pf-rd .pf-flow-seg:focus-visible{outline:2px solid var(--focus); outline-offset:2px;}
.pf-rd .pf-flow-seg .fn{font-family:var(--mono); font-size:8.5px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--_c); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:flex; align-items:center; gap:5px;}
.pf-rd .pf-flow-seg .fn::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--_c); flex:none;}
.pf-rd .pf-flow-seg .fc{font-size:19px; font-weight:700; color:var(--pf-text); line-height:1;}
.pf-rd .pf-flow-seg.z{opacity:.5;} .pf-rd .pf-flow-seg.z .fc{color:var(--pf-muted);}

/* pipeline lanes */
.pf-rd .pf-pipeline{display:flex; flex-direction:column; gap:10px;}
.pf-rd .pf-lane{display:grid; grid-template-columns:196px 1fr; align-items:stretch; border:1px solid var(--pf-border); border-radius:var(--r-lg); background:var(--pf-bg); box-shadow:var(--sh1); overflow:hidden;}
.pf-rd .pf-lane.lane-flash{box-shadow:0 0 0 2px var(--act);}
.pf-rd .pf-lane-h{display:flex; flex-direction:column; gap:9px; justify-content:center; padding:14px 16px; background:var(--pf-surface); border-right:1px solid var(--pf-border);}
.pf-rd .pf-lane-h .pf-chip{align-self:flex-start;}
.pf-rd .pf-lane-h .cnt{font-family:var(--mono); font-size:10.5px; letter-spacing:.05em; color:var(--pf-muted); text-transform:uppercase;}
.pf-rd .pf-lane-jobs{display:flex; flex-direction:column; min-width:0;}
.pf-rd .pf-ljob{display:flex; align-items:center; gap:18px; padding:13px 18px; min-width:0; transition:background var(--dur) var(--ease); cursor:pointer;}
.pf-rd .pf-ljob:focus-visible{outline:2px solid var(--focus); outline-offset:-2px;}
.pf-rd .pf-ljob + .pf-ljob{border-top:1px solid var(--pf-border);}
.pf-rd .pf-ljob:hover{background:var(--pf-surface);}
.pf-rd .pf-ljob-main{min-width:0; flex:1;}
.pf-rd .pf-ljob-main .top{display:flex; align-items:center; gap:10px; margin-bottom:3px; flex-wrap:wrap;}
.pf-rd .pf-ljob-main .top .jid{font-family:var(--mono); font-size:11.5px; font-weight:600; color:var(--link); text-decoration:none;}
.pf-rd .pf-ljob-main .top b{font-size:13.5px; font-weight:600; color:var(--pf-text);}
.pf-rd .pf-ljob-main .desc{font-size:12px; color:var(--pf-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:58ch;}
.pf-rd .pf-ljob-money{font-family:var(--mono); font-size:12px; color:var(--pf-muted); white-space:nowrap; flex:none; font-variant-numeric:tabular-nums;}
.pf-rd .pf-ljob-money .bal{color:var(--pf-warning); font-weight:600;}
.pf-rd .pf-ljob-act{flex:none; display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:flex-end;}
.pf-rd .pf-ljob-act .pf-btn{height:32px; padding:0 12px; font-size:12px;}
.pf-rd .pf-lane.empty{opacity:.7;}
.pf-rd .pf-lane-empty{padding:13px 18px; color:var(--pf-muted); font-size:12.5px;}
.pf-rd .pf-lane-more{padding:10px 18px; color:var(--pf-muted); font-size:12.5px; border-top:1px solid var(--pf-border);}

/* jobs table + filters */
.pf-rd .pf-filters{background:var(--pf-bg); border:1px solid var(--pf-border); border-radius:var(--r-lg); padding:16px 18px; box-shadow:var(--sh1); margin-bottom:18px;}
.pf-rd .pf-search{position:relative; margin-bottom:13px;}
.pf-rd .pf-search svg{position:absolute; left:13px; top:50%; transform:translateY(-50%); color:var(--pf-muted); width:17px; height:17px;}
.pf-rd .pf-search input{width:100%; height:42px; border:1px solid var(--pf-border-strong); border-radius:var(--r-sm); background:var(--pf-bg); color:var(--pf-text); font-family:inherit; font-size:14px; padding:0 14px 0 40px;}
.pf-rd .pf-search input:focus{outline:none; border-color:var(--focus); box-shadow:0 0 0 3px color-mix(in srgb,var(--focus) 22%,transparent);}
.pf-rd .pf-fchips{display:flex; flex-wrap:wrap; gap:7px; margin-bottom:13px;}
.pf-rd .pf-fchip{font-size:12px; font-weight:500; padding:5px 12px; border-radius:var(--r-pill); border:1px solid var(--pf-border-strong); background:var(--pf-bg); color:var(--pf-text); cursor:pointer; transition:all var(--dur) var(--ease);}
.pf-rd .pf-fchip:hover{border-color:var(--pf-muted);}
.pf-rd .pf-fchip.stagey{color:var(--_c); border-color:color-mix(in srgb,var(--_c) 34%,transparent);}
.pf-rd .pf-fchip.is-active{background:var(--pf-dark); color:#fff; border-color:var(--pf-dark);}
[data-theme="dark"] .pf-console-body .pf-rd .pf-fchip.is-active{background:var(--link); color:#08131f; border-color:var(--link);}
.pf-rd .pf-frow2{display:flex; align-items:center; gap:14px; flex-wrap:wrap;}
.pf-rd .pf-select{height:38px; border:1px solid var(--pf-border-strong); border-radius:var(--r-sm); background:var(--pf-bg); color:var(--pf-text); font-family:inherit; font-size:13px; padding:0 32px 0 12px; cursor:pointer;}
.pf-rd .pf-toggle{display:inline-flex; align-items:center; gap:9px; font-size:13px; font-weight:500; color:var(--pf-text); cursor:pointer; position:relative;}
.pf-rd .pf-switch{width:38px; height:22px; border-radius:var(--r-pill); background:var(--pf-border-strong); position:relative; transition:background var(--dur) var(--ease); flex:none;}
.pf-rd .pf-switch::after{content:""; position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:var(--sh1); transition:transform var(--dur) var(--ease);}
.pf-rd .pf-toggle input{position:absolute; opacity:0; pointer-events:none;}
.pf-rd .pf-toggle input:checked + .pf-switch{background:var(--act);}
.pf-rd .pf-toggle input:checked + .pf-switch::after{transform:translateX(16px);}
.pf-rd .pf-toggle input:focus-visible + .pf-switch{outline:2px solid var(--focus); outline-offset:2px;}

.pf-rd .pf-jtable-wrap{background:var(--pf-bg); border:1px solid var(--pf-border); border-radius:var(--r-lg); box-shadow:var(--sh1); overflow-x:auto;}
.pf-rd .pf-jtable{width:100%; border-collapse:collapse; font-size:13px;}
.pf-rd .pf-jtable thead th{font-family:var(--mono); font-size:9.5px; font-weight:600; letter-spacing:.11em; text-transform:uppercase; color:var(--pf-muted); text-align:left; padding:12px 14px; border-bottom:1px solid var(--pf-border); background:var(--pf-surface); white-space:nowrap;}
.pf-rd .pf-jtable thead th a{color:inherit; text-decoration:none;}
.pf-rd .pf-jtable thead th:hover{color:var(--pf-text);}
.pf-rd .pf-jtable thead th[aria-sort="ascending"],.pf-rd .pf-jtable thead th[aria-sort="descending"]{color:var(--act);}
.pf-rd .pf-jtable thead th[aria-sort="ascending"] a::after{content:"\2191"; margin-left:6px;}
.pf-rd .pf-jtable thead th[aria-sort="descending"] a::after{content:"\2193"; margin-left:6px;}
.pf-rd .pf-jtable th.num,.pf-rd .pf-jtable td.num{text-align:right; font-variant-numeric:tabular-nums;}
.pf-rd .pf-jtable tbody td{padding:11px 14px; border-bottom:1px solid var(--pf-border); vertical-align:top; color:var(--pf-text);}
.pf-rd .pf-jtable tbody tr{transition:background var(--dur) var(--ease); cursor:pointer;}
.pf-rd .pf-jtable tbody tr:hover{background:var(--pf-surface);}
.pf-rd .pf-jtable tbody tr:focus-visible{outline:2px solid var(--focus); outline-offset:-2px;}
.pf-rd .pf-jtable .jid{font-family:var(--mono); font-size:11.5px; font-weight:600; color:var(--link); text-decoration:none;}
.pf-rd .pf-jtable .jdesc{color:var(--pf-muted); font-size:12px; margin-top:3px; max-width:42ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.pf-rd .pf-jtable .cname{font-weight:600;}
.pf-rd .pf-jtable .cmail{color:var(--pf-muted); font-size:11.5px; margin-top:2px;}
.pf-rd .pf-jtable td.ago{font-family:var(--mono); font-size:10.5px; color:var(--pf-muted);}
.pf-rd .pf-jtable tr.pf-jtable-section td{background:var(--pf-surface-2); font-family:var(--mono); font-size:9.5px; font-weight:600; letter-spacing:.11em; text-transform:uppercase; color:var(--pf-muted); padding:9px 14px; cursor:default;}
.pf-rd .pf-jtable tr.completed td:first-child{opacity:.9;}

@media (max-width:900px){ .pf-rd .pf-jtable .hide-sm,.pf-rd .pf-jtable th.hide-sm{display:none;} }
@media (max-width:860px){
  .pf-rd .pf-lane{grid-template-columns:1fr;}
  .pf-rd .pf-lane-h{flex-direction:row; align-items:center; gap:12px; border-right:0; border-bottom:1px solid var(--pf-border);}
  .pf-rd .pf-ljob{flex-wrap:wrap; gap:10px 14px;}
  .pf-rd .pf-board .pf-ljob-act{max-width:100%; min-width:0;}
  .pf-rd .pf-ljob-main .desc{max-width:none; white-space:normal;}
  .pf-rd .pf-flow{display:grid; grid-template-columns:repeat(3,1fr);}
  .pf-rd .pf-flow-seg{min-width:0;}
}

/* ============================================================================
   CONSOLE REDESIGN - JOB DETAIL (PR D1): breadcrumb, header, stage rail, brief,
   the LEFT dossier column, the two-column grid, and the RIGHT do-next aside
   CONTAINER. Scoped under .pf-rd (ported from docs/console-redesign/console-job.css),
   so it never touches not-yet-migrated pages. The do-next rail INTERNALS (D2) and
   billing (D3) keep old global CSS; the aside keeps its .pf-job-rail class so those
   descendant rules and --stage-color still bind. Tokens from tokens.css / above.
   ========================================================================== */

/* breadcrumb */
.pf-rd .pf-crumb{display:flex; align-items:center; gap:8px; font-size:12px; color:var(--pf-muted); margin-bottom:14px; font-family:var(--mono); letter-spacing:.02em;}
.pf-rd .pf-crumb a{color:var(--pf-muted);}
.pf-rd .pf-crumb a:hover{color:var(--link);}
.pf-rd .pf-crumb .sep{opacity:.5;}

/* header */
.pf-rd .pf-job-head{display:flex; align-items:flex-start; gap:16px; flex-wrap:wrap; margin-bottom:6px;}
.pf-rd .pf-job-headmain{min-width:0;}
.pf-rd .pf-job-title{display:flex; align-items:center; gap:12px; flex-wrap:wrap;}
.pf-rd .pf-job-title h1{font-size:26px; font-weight:700; letter-spacing:-.01em; font-family:var(--mono); margin:0; display:inline-flex; align-items:center; gap:6px;}
.pf-rd .pf-job-reorder{display:flex; align-items:center; gap:16px; margin:8px 0 2px; font-size:12.5px; flex-wrap:wrap;}
.pf-rd .pf-job-reorder > summary,.pf-rd .pf-job-reorder a{color:var(--link); display:inline-flex; align-items:center; gap:6px; cursor:pointer;}
.pf-rd .pf-job-cust{display:flex; align-items:center; gap:12px; font-size:13.5px; color:var(--pf-text); margin-top:8px; flex-wrap:wrap;}
.pf-rd .pf-job-cust a.name{font-weight:600;}
.pf-rd .pf-job-cust .mail{color:var(--pf-muted);}
.pf-rd .pf-job-head-actions{margin-left:auto; display:flex; gap:8px; flex:none; flex-wrap:wrap; align-items:flex-start;}

/* stage rail */
.pf-rd .pf-rail{display:flex; gap:4px; margin:18px 0 22px; overflow-x:auto; padding:0 0 2px; list-style:none;}
.pf-rd .pf-rail::-webkit-scrollbar{height:6px;}
.pf-rd .pf-rail::-webkit-scrollbar-thumb{background:var(--pf-border-strong); border-radius:8px;}
.pf-rd .pf-rail-step{flex:1 1 0; min-width:78px; text-align:center; padding:9px 8px; border-radius:var(--r-sm); font-family:var(--mono); font-size:10.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; background:var(--pf-surface); color:var(--pf-muted); border:1px solid var(--pf-border); white-space:nowrap; position:relative;}
.pf-rd .pf-rail-step.done{color:var(--pf-text); background:var(--pf-bg); border-color:var(--pf-border-strong);}
.pf-rd .pf-rail-step.done::after{content:""; position:absolute; top:6px; right:7px; width:5px; height:5px; border-radius:50%; background:var(--pf-success);}
.pf-rd .pf-rail-step.current{background:var(--act); color:#fff; border-color:var(--act); box-shadow:0 1px 3px rgba(168,80,31,.3);}
[data-theme="dark"] .pf-console-body .pf-rd .pf-rail-step.current{color:#241206;}
@media (prefers-reduced-motion:no-preference){
  .pf-rd .pf-rail-step.current{animation:pfRdRailPulse .5s var(--ease);}
  .pf-rd .pf-rail.is-moving .pf-rail-step{transition:background .16s var(--ease), border-color .16s var(--ease), color .16s var(--ease);}
}
@keyframes pfRdRailPulse{from{transform:scale(.96); box-shadow:0 0 0 0 rgba(197,102,48,.4);}to{transform:scale(1);}}
/* ui.js flags the target step pending on a stage submit (before the redirect lands) */
.pf-rd .pf-rail-step.is-stage-pending{border-color:var(--act); background:var(--act-tint); color:var(--pf-text);}
[data-theme="dark"] .pf-console-body .pf-rd .pf-rail-step.is-stage-pending{background:color-mix(in srgb, var(--act) 20%, var(--pf-surface));}
/* side-state notice (Need More Info / Declined / Lost render this in place of steps) */
.pf-rd .pf-rail-side{display:flex; align-items:center; gap:10px; margin:18px 0 22px; padding:11px 15px; border:1px solid var(--pf-border); border-left:3px solid var(--pf-warning); background:var(--pf-tint-warm); border-radius:var(--r-md); font-size:12.5px; color:var(--pf-text);}

/* two-column body: dossier (left) + sticky do-next aside (right) */
.pf-rd .pf-job-grid{display:grid; grid-template-columns:minmax(0,1fr) 384px; gap:22px; align-items:start;}
.pf-rd .pf-job-main{min-width:0; display:flex; flex-direction:column; gap:16px;}
.pf-rd .pf-job-aside{position:sticky; top:18px; align-self:start; max-height:calc(100vh - 36px); overflow:auto; display:flex; flex-direction:column; gap:14px;}
.pf-rd .pf-job-aside::-webkit-scrollbar{width:7px;}
.pf-rd .pf-job-aside::-webkit-scrollbar-thumb{background:var(--pf-border-strong); border-radius:8px;}

/* vitals cockpit — hairline grid of dense tiles. Tone classes come straight off the
   jobs route (v.tone): '' neutral, is-warn amber, is-ok green. */
.pf-rd .pf-cockpit{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--pf-border); border:1px solid var(--pf-border); border-radius:var(--r-lg); overflow:hidden;}
.pf-rd .pf-vt{background:var(--pf-bg); padding:11px 13px;}
.pf-rd .pf-vt .k{font-family:var(--mono); font-size:8.5px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--pf-muted); margin-bottom:5px;}
.pf-rd .pf-vt .v{font-size:14px; font-weight:600; color:var(--pf-text);}
.pf-rd .pf-vt.is-warn{background:var(--pf-tint-warm);}
.pf-rd .pf-vt.is-warn .v{color:var(--pf-warning);}
.pf-rd .pf-vt.is-warn .k{color:var(--pf-warning); opacity:.85;}
.pf-rd .pf-vt.is-ok .v{color:var(--pf-success);}

/* Photos + Files media row (keep the .pf-job-media hook; two-column like the mockup) */
.pf-rd .pf-job-media{display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start;}

/* Photos card shell reskin — the carousel/tagging internals are untouched */
.pf-rd .pf-intake-thumbs{border:1px solid var(--pf-border); border-radius:var(--r-lg); background:var(--pf-bg); box-shadow:var(--sh1); padding:16px 18px;}
.pf-rd .pf-intake-thumbs-head h2{font-size:14px; font-weight:600; letter-spacing:0; color:var(--pf-text);}
.pf-rd .pf-intake-thumbs-head span{font-size:11.5px; font-weight:500; color:var(--pf-muted);}
.pf-rd .pf-photo-filters{display:flex; gap:6px; flex-wrap:wrap;}
.pf-rd .pf-photo-filter{font-size:11px; font-weight:500; color:var(--pf-muted); border:1px solid var(--pf-border); border-radius:var(--r-pill); padding:3px 9px; background:var(--pf-bg); cursor:pointer;}
.pf-rd .pf-photo-filter:hover{border-color:var(--pf-muted); color:var(--pf-text);}
.pf-rd .pf-photo-filter.is-active{color:var(--link); border-color:color-mix(in srgb,var(--link) 34%,transparent); background:var(--pf-tint-link);}
.pf-rd .pf-photos-empty{color:var(--pf-muted); font-size:12.5px; padding:6px 0 12px;}

/* Files card shell reskin — the file rows/uploader are untouched */
.pf-rd .pf-job-files{border:1px solid var(--pf-border); border-radius:var(--r-lg); background:var(--pf-bg); box-shadow:var(--sh1); padding:16px 18px;}
.pf-rd .pf-job-files-head .pf-section-h{font-size:14px; font-weight:600; letter-spacing:0; text-transform:none; color:var(--pf-text); margin:0;}

/* Communication card shell reskin — the live .pf-timeline + hooks are untouched */
.pf-rd .pf-comms-card{border:1px solid var(--pf-border); border-radius:var(--r-lg); background:var(--pf-bg); box-shadow:var(--sh1); padding:16px 18px; margin-top:0;}
.pf-rd .pf-comms-title{font-size:14px; font-weight:600; color:var(--pf-text);}

/* Fieldcraft visit history: compact, read-only evidence in the job dossier. */
.pf-rd .pf-fieldcraft-card{border:1px solid var(--pf-border); border-radius:var(--r-lg); background:var(--pf-bg); box-shadow:var(--sh1); padding:16px 18px;}
.pf-rd .pf-fieldcraft-card > summary{list-style:none; cursor:pointer;}
.pf-rd .pf-fieldcraft-card > summary::-webkit-details-marker{display:none;}
.pf-rd .pf-fieldcraft-head,.pf-rd .pf-fieldcraft-head-meta,.pf-rd .pf-fieldcraft-title,.pf-rd .pf-fieldcraft-visit-head,.pf-rd .pf-fieldcraft-badges{display:flex; align-items:center;}
.pf-rd .pf-fieldcraft-head{justify-content:space-between; gap:16px;}
.pf-rd .pf-fieldcraft-title{gap:8px; font-size:14px; font-weight:600; color:var(--pf-text);}
.pf-rd .pf-fieldcraft-head-meta{gap:10px;}
.pf-rd .pf-fieldcraft-count{font-family:var(--mono); font-size:10.5px; color:var(--pf-muted); white-space:nowrap;}
.pf-rd .pf-fieldcraft-chev{display:inline-flex; color:var(--pf-muted); transition:transform .15s ease;}
.pf-rd .pf-fieldcraft-card[open] .pf-fieldcraft-chev{transform:rotate(180deg);}
.pf-rd .pf-fieldcraft-body{margin-top:13px; padding-top:4px; border-top:1px solid var(--pf-border);}
.pf-rd .pf-fieldcraft-visits,.pf-rd .pf-fieldcraft-recordings{list-style:none; margin:0; padding:0;}
.pf-rd .pf-fieldcraft-visit{padding:12px 0;}
.pf-rd .pf-fieldcraft-visit + .pf-fieldcraft-visit{border-top:1px solid var(--pf-border);}
.pf-rd .pf-fieldcraft-visit-head{justify-content:space-between; align-items:flex-start; gap:12px;}
.pf-rd .pf-fieldcraft-visit-identity{display:grid; gap:2px; min-width:0;}
.pf-rd .pf-fieldcraft-visit-identity strong{font-size:13px; color:var(--pf-text);}
.pf-rd .pf-fieldcraft-visit-identity time{font-family:var(--mono); font-size:10px; color:var(--pf-muted);}
.pf-rd .pf-fieldcraft-badges{justify-content:flex-end; gap:6px; flex-wrap:wrap;}
.pf-rd .pf-fieldcraft-badge{border:1px solid var(--pf-border); border-radius:var(--r-pill); padding:2px 8px; font-size:10.5px; color:var(--pf-muted); background:var(--pf-surface);}
.pf-rd .pf-fieldcraft-approval-history{display:flex; gap:6px; flex-wrap:wrap; list-style:none; margin:8px 0 0; padding:0;}
.pf-rd .pf-fieldcraft-approval-history li{display:flex; gap:5px; align-items:center; color:var(--pf-muted); font-size:10px;}
.pf-rd .pf-fieldcraft-approval-history li + li::before{content:"→"; color:var(--pf-muted);}
.pf-rd .pf-fieldcraft-approval-history time{font-family:var(--mono); color:var(--pf-muted);}
.pf-rd .pf-fieldcraft-recordings{margin-top:8px; border:1px solid var(--pf-border); border-radius:var(--r-md); overflow:hidden;}
.pf-rd .pf-fieldcraft-recording{display:flex; justify-content:space-between; align-items:center; gap:12px; padding:9px 11px; background:var(--pf-surface);}
.pf-rd .pf-fieldcraft-recording + .pf-fieldcraft-recording{border-top:1px solid var(--pf-border);}
.pf-rd .pf-fieldcraft-recording-name{display:grid; gap:1px; min-width:8rem;}
.pf-rd .pf-fieldcraft-recording-name strong{font-size:12.5px; color:var(--pf-text);}
.pf-rd .pf-fieldcraft-recording-name span,.pf-rd .pf-fieldcraft-recording-status{font-size:10.5px; color:var(--pf-muted);}
.pf-rd .pf-fieldcraft-recording-status{display:flex; justify-content:flex-end; gap:5px 10px; flex-wrap:wrap; text-align:right;}
.pf-rd .pf-fieldcraft-recording.is-failed .pf-fieldcraft-recording-status{color:var(--pf-alert);}
.pf-rd .pf-fieldcraft-recording.is-deleted .pf-fieldcraft-recording-name strong{color:var(--pf-muted);}
.pf-rd .pf-fieldcraft-empty,.pf-rd .pf-fieldcraft-no-recordings{margin:8px 0 2px; color:var(--pf-muted); font-size:12.5px;}

/* Danger zone — sanctioned alert callout. Scoped to the <details> so the .pf-danger
   text utility on the inner heads-up <p> / purge <button> is left alone. */
.pf-rd details.pf-danger{border:1px solid var(--pf-border); border-left:3px solid var(--pf-alert); border-radius:var(--r-md); background:var(--pf-tint-alert); overflow:hidden; padding:0;}
.pf-rd details.pf-danger > summary{padding:11px 15px; cursor:pointer; font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--pf-alert); list-style:none;}
.pf-rd details.pf-danger > summary::-webkit-details-marker{display:none;}
.pf-rd .pf-danger-body{padding:4px 15px 15px;}

@media (max-width:1080px){
  .pf-rd .pf-job-grid{grid-template-columns:1fr;}
  .pf-rd .pf-job-aside{position:static; max-height:none; overflow:visible; order:-1;}
}
@media (max-width:720px){
  .pf-rd .pf-cockpit{grid-template-columns:repeat(2,1fr);}
  .pf-rd .pf-job-media{grid-template-columns:1fr;}
  .pf-rd .pf-fieldcraft-head,.pf-rd .pf-fieldcraft-visit-head,.pf-rd .pf-fieldcraft-recording{align-items:flex-start; flex-direction:column;}
  .pf-rd .pf-fieldcraft-head-meta{width:100%; justify-content:space-between;}
  .pf-rd .pf-fieldcraft-badges,.pf-rd .pf-fieldcraft-recording-status{justify-content:flex-start; text-align:left;}
}

/* ============================================================================
   CONSOLE REDESIGN - JOB DETAIL (PR D2): the RIGHT do-next rail INTERNALS. The
   per-stage .pf-donext blueprint cards (header band + padded body), the inline
   quote builder, and the shared printer / material side-cards. Ported + adapted
   from docs/console-redesign/console-job.css.

   SPECIFICITY: the older global rail rules (.pf-job-rail .pf-rail-panel, the
   .pf-quote-* + .pf-cockpit-subpanel styles) sit LATER in this file, so every D2
   rule is scoped through .pf-job-aside / .pf-quote-panel to win by specificity
   (0,3,0+), not source order.

   COLLISION: the bare .pf-rd .pf-field / .pf-input / .pf-note / .pf-drop selectors
   belong to CAPTURE (PR B) and are deliberately NOT redefined here. The quote and
   estimator fields are reached MORE specifically through .pf-quote-panel, so this
   block cannot touch the Capture page. The quote builder keeps its floating-label
   markup and every HTMX/JS hook (.pf-quote-form, hx-post /quote/price into
   #pf-price, #qf-*, the estimator, the calibration ghosts, the two name="then"
   submits): only its chrome is reskinned.
   ========================================================================== */

/* ── do-next card shell: blueprint card = header band + padded body ── */
.pf-rd .pf-job-aside .pf-donext{
  display:block; padding:0; gap:0; overflow:hidden;
  background:var(--pf-bg); border:1px solid var(--pf-border);
  border-radius:var(--r-lg); box-shadow:var(--sh2);
}
.pf-rd .pf-job-aside .pf-donext-h{padding:15px 18px 13px; border-bottom:1px solid var(--pf-border);}
.pf-rd .pf-job-aside .pf-donext-h:last-child{border-bottom:0;}   /* header-only card (fallback state) */
.pf-rd .pf-job-aside .pf-donext-h .pf-eyebrow{margin:0; color:var(--act);}  /* beat the rail's blue eyebrow */
.pf-rd .pf-job-aside .pf-donext-h .pf-section-h{
  margin:6px 0 0; font-size:16px; font-weight:600; letter-spacing:0;
  text-transform:none; color:var(--pf-text);
}
.pf-rd .pf-job-aside .pf-donext-h p{margin:4px 0 0; font-size:12.5px; line-height:1.45;}
.pf-rd .pf-job-aside .pf-donext-body{padding:16px 18px 18px; display:flex; flex-direction:column; gap:13px;}
.pf-rd .pf-job-aside .pf-donext-body > *{margin:0;}
/* quiet mono captions for the in-body sub-headings (CAD step, subpanel h3s, comp/deposit) */
.pf-rd .pf-job-aside .pf-donext-body h3,
.pf-rd .pf-job-aside .pf-donext-body .pf-section-h{
  margin:0; font-family:var(--mono); font-size:9px; font-weight:600;
  letter-spacing:.09em; text-transform:uppercase; color:var(--pf-muted);
}

/* assessment: stack the take / ask actions full-width */
.pf-rd .pf-job-aside .pf-job-actions{display:flex; flex-direction:column; gap:10px; margin:0;}
.pf-rd .pf-job-aside .pf-job-actions .pf-inline{display:block; width:100%; margin:0;}
.pf-rd .pf-job-aside .pf-job-actions .pf-btn{width:100%;}
/* revise: the button-styled <summary> reads as a full-width secondary */
.pf-rd .pf-job-aside .pf-revise{margin:0;}
.pf-rd .pf-job-aside .pf-revise > summary{width:100%;}
/* decline disclosure keeps its quiet danger cue */
.pf-rd .pf-job-aside .pf-cockpit-danger{border-top:1px solid var(--pf-border); padding-top:13px;}
.pf-rd .pf-job-aside .pf-cockpit-danger > summary{color:var(--pf-alert); font-weight:600; font-size:12.5px;}

/* ── shared side-cards: printer assignment + material capture + ready balance ── */
.pf-rd .pf-job-aside .pf-cockpit-subpanel{
  margin:0; padding:13px 14px; border:1px solid var(--pf-border);
  border-radius:var(--r-md); background:var(--pf-surface);
}
.pf-rd .pf-job-aside .pf-cockpit-subpanel input,
.pf-rd .pf-job-aside .pf-cockpit-subpanel select,
.pf-rd .pf-job-aside .pf-form-row input,
.pf-rd .pf-job-aside .pf-form-row select{border-color:var(--pf-border-strong);}
.pf-rd .pf-job-aside .pf-job-quote{font-size:18px; font-weight:700; color:var(--pf-warning); font-variant-numeric:tabular-nums;}
.pf-rd .pf-job-aside .pf-cad-step{margin:0; padding-top:0; border-top:0;}

/* ── the inline quote builder: reskinned in place (floating labels + hooks kept).
   Every selector is scoped through .pf-quote-panel so it can NEVER reach Capture's
   .pf-field / .pf-input. ── */
.pf-rd .pf-quote-panel .pf-estimator{
  margin:0; border:1px solid var(--pf-border); border-radius:var(--r-sm); background:var(--pf-surface);
}
.pf-rd .pf-quote-panel .pf-estimator > summary{color:var(--link);}
/* field chrome: blueprint border + the one system focus ring. The floated-label
   position/transition mechanics stay on the older .pf-field rules underneath;
   only the border, focus, and caption colour are restated here. */
.pf-rd .pf-quote-panel .pf-field > input,
.pf-rd .pf-quote-panel .pf-field > select{border-color:var(--pf-border-strong);}
.pf-rd .pf-quote-panel .pf-field > input:focus,
.pf-rd .pf-quote-panel .pf-field > select:focus{outline:2px solid var(--focus); outline-offset:1px; border-color:var(--focus);}
.pf-rd .pf-quote-panel .pf-field > input:focus + label,
.pf-rd .pf-quote-panel .pf-field > input:not(:placeholder-shown) + label,
.pf-rd .pf-quote-panel .pf-field-select > label{color:var(--act);}
/* calibration ghost chip + clickable dotted title: terracotta suggestion cue */
.pf-rd .pf-quote-panel .pf-suggest-ghost{
  border-color:color-mix(in srgb, var(--act) 40%, var(--pf-border));
  background:color-mix(in srgb, var(--act) 15%, var(--pf-surface));
}
.pf-rd .pf-quote-panel .pf-field > label.pf-title-suggest{color:var(--act); text-decoration-color:var(--act);}
.pf-rd .pf-quote-panel .pf-apply-all{color:var(--act);}
/* modifier chips */
.pf-rd .pf-quote-panel .pf-quote-chips{justify-content:flex-start;}
.pf-rd .pf-quote-panel .pf-chip{border-color:var(--pf-border-strong); background:var(--pf-bg); font-size:12.5px;}
.pf-rd .pf-quote-panel .pf-chip input{accent-color:var(--act);}
/* live price breakdown (from _price.html, swapped into #pf-price) */
.pf-rd .pf-quote-panel #pf-price{
  background:var(--pf-surface); border:1px solid var(--pf-border);
  border-radius:var(--r-sm); padding:12px 14px;
}
.pf-rd .pf-quote-panel #pf-price .pf-muted{margin:0;}
.pf-rd .pf-quote-panel .pf-breakdown{width:100%; font-size:12px;}
/* adjust-price override disclosure */
.pf-rd .pf-quote-panel .pf-quote-override{border-color:var(--pf-border); border-radius:var(--r-sm); background:var(--pf-surface);}
.pf-rd .pf-quote-panel .pf-quote-override > summary{color:var(--pf-text);}
/* save / send action row */
.pf-rd .pf-quote-panel .pf-quote-actions{margin:0;}

/* ============================================================================
   CONSOLE REDESIGN - JOB DETAIL (PR D3): the billing centerpiece + the standalone
   /jobs/{id}/billing page. The .pf-billing card carries the money summary, PO
   reference, change orders, PayPal invoices, acceptance, the payments ledger,
   record-payment, and the documents block. Reskinned IN PLACE, every rule scoped
   through .pf-billing so it can never reach another page and every money-path
   hook survives: the data-bill-pct meter (ui.js initBillingMeter drives the fill),
   the [data-copy] accept-link buttons, and every POST. Look ported from
   docs/console-redesign/console-job.css (.pf-bill-sum / .pf-progress / .pf-mini-table).
   ========================================================================== */

/* standalone page header (the job page includes the same card at #billing) */
.pf-rd.pf-billing-page{max-width:920px;}
.pf-rd .pf-billing-h1{font-size:22px; font-weight:700; letter-spacing:-.01em; margin:2px 0 18px; font-family:var(--mono);}

/* the billing card: a dossier card in both contexts */
.pf-rd .pf-billing{border:1px solid var(--pf-border); border-radius:var(--r-lg); background:var(--pf-bg); box-shadow:var(--sh1); padding:16px 18px;}
.pf-rd .pf-billing-page .pf-billing{box-shadow:var(--sh2);}
.pf-rd .pf-billing-title{font-size:14px; font-weight:600; letter-spacing:0; text-transform:none; color:var(--pf-text); margin:0 0 14px;}

/* money summary -> .pf-bill-sum look (3-col grid, mono labels, big tabular numbers) */
.pf-rd .pf-billing-summary{margin-bottom:14px;}
.pf-rd .pf-bill-stats{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; padding:14px 16px; background:var(--pf-surface); border:1px solid var(--pf-border); border-radius:var(--r-md); margin-bottom:10px;}
.pf-rd .pf-bill-stat{text-align:center; display:flex; flex-direction:column; gap:5px;}
.pf-rd .pf-bill-stat > span{font-family:var(--mono); font-size:9px; letter-spacing:.08em; text-transform:uppercase; color:var(--pf-muted);}
.pf-rd .pf-bill-stat > strong{font-size:20px; font-weight:700; font-variant-numeric:tabular-nums; color:var(--pf-text);}
.pf-rd .pf-bill-stat-balance > strong{color:var(--pf-warning);}

/* paid-progress meter -> .pf-progress look; ui.js sets the fill width from data-bill-pct */
.pf-rd .pf-bill-meter{display:flex; flex-direction:column; gap:5px;}
.pf-rd .pf-bill-meter-track{height:7px; border-radius:var(--r-pill); background:var(--pf-border); overflow:hidden;}
.pf-rd .pf-bill-meter-fill{display:block; height:100%; background:var(--pf-blue); border-radius:var(--r-pill);}
.pf-rd .pf-bill-meter-label{text-align:center; font-size:11px; color:var(--pf-muted); font-family:var(--mono);}
.pf-rd .pf-billing-empty{color:var(--pf-muted); font-size:13px; padding:10px 0 4px;}

/* blocks + mono sub-headings */
.pf-rd .pf-billing .pf-bill-block{padding-top:14px; margin-top:14px; border-top:1px solid var(--pf-border);}
.pf-rd .pf-billing .pf-bill-block:first-of-type{border-top:0; margin-top:0; padding-top:0;}
.pf-rd .pf-billing .pf-bill-h{font-family:var(--mono); font-size:9px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--pf-muted); margin:0 0 10px;}
.pf-rd .pf-billing .pf-bill-engagement{font-size:12px; color:var(--pf-muted); margin:6px 0;}

/* change-order + ledger tables -> .pf-mini-table look */
.pf-rd .pf-billing .pf-table{width:100%; border-collapse:collapse; font-size:12.5px; margin-bottom:10px;}
.pf-rd .pf-billing .pf-table th{font-family:var(--mono); font-size:8.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--pf-muted); text-align:left; padding:6px 8px; border-bottom:1px solid var(--pf-border); font-weight:600;}
.pf-rd .pf-billing .pf-table td{padding:8px; border-bottom:1px solid var(--pf-border); font-variant-numeric:tabular-nums;}
.pf-rd .pf-billing .pf-co-amt,.pf-rd .pf-billing .pf-amt,.pf-rd .pf-billing th.pf-amt{text-align:right;}
.pf-rd .pf-billing .pf-co-total td{border-bottom:0;}
.pf-rd .pf-billing .pf-voided td{opacity:.55; text-decoration:line-through;}
.pf-rd .pf-billing .pf-ledger-act{text-align:right; white-space:nowrap;}

/* PayPal invoices list */
.pf-rd .pf-billing .pf-pp-invoices{list-style:none; display:flex; flex-direction:column; gap:6px; margin:0;}
.pf-rd .pf-billing .pf-pp-inv{display:flex; align-items:center; gap:9px; font-size:12.5px; padding:7px 10px; border:1px solid var(--pf-border); border-radius:var(--r-sm); background:var(--pf-surface);}
.pf-rd .pf-billing .pf-pp-inv-dot{width:7px; height:7px; border-radius:50%; background:var(--pf-border-strong); flex:none;}
.pf-rd .pf-billing .pf-pp-inv-paid .pf-pp-inv-dot{background:var(--pf-success);}
.pf-rd .pf-billing .pf-pp-inv-sent .pf-pp-inv-dot{background:var(--pf-warning);}
.pf-rd .pf-billing .pf-pp-inv-amt{font-variant-numeric:tabular-nums; font-weight:600;}
.pf-rd .pf-billing .pf-pp-inv-status{color:var(--pf-muted);}
.pf-rd .pf-billing .pf-pp-inv-cancel,.pf-rd .pf-billing .pf-bill-iconlink{margin-left:auto;}

/* acceptance */
.pf-rd .pf-billing .pf-accept-status{font-size:12.5px; display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.pf-rd .pf-billing .pf-accept-link{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:8px; font-size:12px;}
.pf-rd .pf-billing .pf-accept-url{font-family:var(--mono); font-size:11.5px; background:var(--pf-surface); border:1px solid var(--pf-border); border-radius:var(--r-sm); padding:3px 8px; color:var(--pf-text); overflow-wrap:anywhere;}

/* record-payment row + billing form controls */
.pf-rd .pf-billing .pf-form-row,.pf-rd .pf-billing .pf-bill-record{display:flex; gap:8px; flex-wrap:wrap; align-items:center;}
.pf-rd .pf-billing input,.pf-rd .pf-billing select{height:34px; border:1px solid var(--pf-border-strong); border-radius:var(--r-sm); background:var(--pf-bg); color:var(--pf-text); font:inherit; font-size:13px; padding:0 10px;}
.pf-rd .pf-billing input[type="checkbox"]{height:auto; padding:0;}

/* documents: action button row + stored-doc list */
.pf-rd .pf-billing .pf-bill-docactions{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px;}
.pf-rd .pf-billing .pf-doclist{list-style:none; display:flex; flex-direction:column; gap:4px; margin:0;}
.pf-rd .pf-billing .pf-doc-row{display:flex; align-items:center; gap:9px; font-size:12.5px; padding:7px 9px; border:1px solid var(--pf-border); border-radius:var(--r-sm);}
.pf-rd .pf-billing .pf-doc-row.pf-voided{opacity:.6;}
.pf-rd .pf-billing .pf-doc-meta{color:var(--pf-muted);}
.pf-rd .pf-billing .pf-doc-act{margin-left:auto; display:flex; gap:10px; white-space:nowrap;}

/* dashboard board */
.pf-dash-head { display: flex; align-items: center; justify-content: space-between; gap: var(--pf-s-4); }
.pf-count {
  display: inline-block; min-width: 1.4em; text-align: center;
  background: var(--pf-border); color: var(--pf-muted);
  border-radius: var(--pf-r-pill, 999px); padding: 0 var(--pf-s-2); font-size: .8rem;
}
.pf-board {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--pf-s-4); margin-top: var(--pf-s-5);
}
.pf-col { background: var(--pf-surface); border: 1px solid var(--pf-border); border-radius: var(--pf-r-md); padding: var(--pf-s-3); }
.pf-col h2 { font-size: .8rem; text-transform: uppercase; letter-spacing: .5px; color: var(--pf-muted); margin: 0 0 var(--pf-s-3); }
.pf-job { background: var(--pf-bg); border: 1px solid var(--pf-border); border-left: 3px solid var(--pf-blue); border-radius: var(--pf-r-sm); padding: var(--pf-s-3); margin-bottom: var(--pf-s-2); }
/* Keyboard arrow-nav focus ring (P4): the roving-tabindex card shows a clear ring so
   the operator can see where they are on the board. :focus-visible keeps it keyboard-
   only — a mouse click on a card's body doesn't flash the ring (arrow-key focus() in a
   keydown handler still counts as keyboard-driven, so the nav ring shows). */
.pf-job:focus-visible { outline: 2px solid var(--pf-blue); outline-offset: 2px; }
/* Same keyboard arrow-nav ring for the roving-tabindex table rows (jobs + customers
   tables). outline-offset is negative so the ring sits inside the full-width row. */
.pf-table tbody tr[tabindex]:focus-visible { outline: 2px solid var(--pf-blue); outline-offset: -2px; }
.pf-job-id { font-weight: 700; font-size: .85rem; color: var(--pf-blue); }
.pf-job-name { font-weight: 600; }
.pf-job-desc {
  font-size: .85rem;
  color: var(--pf-text);
  /* Clamp a long description to 2 lines so one verbose card can't blow out the
     board column height; the full text stays available via the title tooltip. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pf-job-meta { font-size: .75rem; color: var(--pf-muted); margin-top: var(--pf-s-1); }
.pf-empty { color: var(--pf-muted); text-align: center; font-size: .8rem; }
.pf-job-quote { font-weight: 700; color: var(--pf-success); font-size: .85rem; margin-top: var(--pf-s-1); }
.pf-job-actions { display: flex; flex-wrap: wrap; gap: var(--pf-s-2); margin-top: var(--pf-s-2); align-items: center; }
.pf-job-actions .pf-link { color: var(--pf-blue); }
.pf-desc { color: var(--pf-text); white-space: pre-line; }

/* operator page language */
.pf-page {
  display: grid;
  gap: var(--pf-s-5);
  min-width: 0;
}
.pf-page > * {
  min-width: 0;
}
.pf-page-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--pf-s-4);
  align-items: end;
}
.pf-page-kicker {
  margin: 0 0 var(--pf-s-1);
  color: var(--pf-terracotta);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}
.pf-page-head h1 {
  margin: 0;
  color: var(--pf-text);
  letter-spacing: 0;
  line-height: 1.1;
}
.pf-page-sub {
  max-width: 52rem;
  margin: var(--pf-s-2) 0 0;
  color: var(--pf-muted);
}
.pf-page-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pf-s-2);
  justify-content: flex-end;
  align-items: center;
}
.pf-panel {
  min-width: 0;
  padding: var(--pf-s-4);
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-r-md);
  background: var(--pf-surface);
}
.pf-panel-head {
  display: flex;
  justify-content: space-between;
  gap: var(--pf-s-3);
  align-items: start;
  margin-bottom: var(--pf-s-3);
}
.pf-panel-head h2,
.pf-panel-title {
  margin: 0;
  color: var(--pf-text);
  font-size: 1rem;
  letter-spacing: 0;
}
.pf-panel-head p {
  margin: var(--pf-s-1) 0 0;
  color: var(--pf-muted);
  font-size: .88rem;
}
/* Reach panel: grouped tap-source tables (system / referral / combined / trash) */
.pf-subhead {
  display: flex;
  align-items: center;
  gap: var(--pf-s-1);
  margin: var(--pf-s-4) 0 var(--pf-s-2);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--pf-muted);
}
.pf-row-subtotal td, .pf-row-subtotal th {
  border-top: 1px solid var(--pf-border);
  font-weight: 600;
  color: var(--pf-muted);
}
.pf-row-total td, .pf-row-total th {
  border-top: 2px solid var(--pf-border);
  font-weight: 700;
  color: var(--pf-text);
}
/* per-row Manage expander (reset / rename) + panel-level tool rows (merge / export) */
.pf-manage {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pf-s-2);
  align-items: center;
  margin-top: var(--pf-s-2);
  padding: var(--pf-s-2);
  background: var(--pf-bg);
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-r-sm);
}
.pf-tool-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pf-s-3);
  align-items: end;
  margin-bottom: var(--pf-s-3);
}
.pf-tool-row label { display: flex; flex-direction: column; gap: var(--pf-s-1); font-size: .82rem; color: var(--pf-muted); }
.pf-input-inline { width: 9rem; }
.pf-table-wrap {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-r-md);
  background: var(--pf-surface);
}
.pf-table-wrap .pf-table {
  margin: 0;
}
.pf-table-wrap .pf-table th,
.pf-table-wrap .pf-table td {
  background: var(--pf-surface);
}
.pf-table-wrap .pf-table tbody tr:hover td {
  background: var(--pf-bg);
}
/* Shared offset pager (audit log, files grid, jobs table) — see _pager.html. */
.pf-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--pf-s-3);
  margin-top: var(--pf-s-3);
  flex-wrap: wrap;
}
.pf-pager-status { color: var(--pf-muted); font-size: .8rem; }
.pf-pager .pf-disabled {
  opacity: .45;
  pointer-events: none;
  cursor: default;
}
.pf-badge {
  display: inline-flex;
  align-items: center;
  min-height: 1.45rem;
  padding: 0 var(--pf-s-2);
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-r-sm);
  background: var(--pf-bg);
  color: var(--pf-muted);
  font-size: .72rem;
  font-weight: 800;
}
.pf-badge-good,
.pf-badge-delivered {
  color: var(--pf-success);
  border-color: color-mix(in srgb, var(--pf-success) 30%, var(--pf-border));
}
/* A knob at its default is the quiet state — keep the neutral base badge; only a
   *changed* knob earns the amber accent (pf-badge-changed below). */
.pf-badge-watch,
.pf-badge-pending,
.pf-badge-changed {
  color: var(--pf-warning);
  border-color: color-mix(in srgb, var(--pf-warning) 35%, var(--pf-border));
}
.pf-badge-blocked,
.pf-badge-failed,
.pf-badge-dead,
.pf-badge-overdue {
  color: var(--pf-alert);
  border-color: color-mix(in srgb, var(--pf-alert) 35%, var(--pf-border));
}
/* Outbox comms feed (backlog #1): direction badges, filter row, row actions. */
.pf-badge-comms {
  color: var(--pf-terracotta);
  border-color: color-mix(in srgb, var(--pf-terracotta) 35%, var(--pf-border));
}
.pf-badge-dispatch {
  color: var(--pf-blue);
  border-color: color-mix(in srgb, var(--pf-blue) 30%, var(--pf-border));
}
.pf-filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pf-s-2);
}
.pf-filter-input {
  min-height: 2rem;
  padding: 0 var(--pf-s-2);
  background-color: var(--pf-bg);
  color: var(--pf-text);
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-r-sm);
  font-size: .82rem;
}
.pf-filter-input:focus {
  border-color: var(--pf-blue);
  outline: 2px solid color-mix(in srgb, var(--pf-blue) 35%, transparent);
  outline-offset: 1px;
}
.pf-row-actions {
  display: flex;
  gap: var(--pf-s-3);
  align-items: center;
}
.pf-link-muted { color: var(--pf-muted); }
.pf-page-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 24rem);
  gap: var(--pf-s-4);
  align-items: start;
}
.pf-field-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--pf-s-3);
}
.pf-search-panel {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pf-s-2);
  align-items: center;
}
.pf-search-panel input,
.pf-search-panel select,
.pf-panel input,
.pf-panel select,
.pf-panel textarea {
  min-height: var(--pf-tap-min);
  padding: var(--pf-s-2) var(--pf-s-3);
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-r-sm);
  background: var(--pf-bg);
  color: var(--pf-text);
  font: inherit;
}
.pf-search-panel input {
  flex: 1 1 18rem;
  min-width: 0;
}
/* Archived-customers toggle in the roster filter row — a plain checkbox + label,
   NOT a bordered field (override .pf-search-panel input above). */
.pf-archived-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--pf-s-2);
  flex: 0 0 auto;
  color: var(--pf-muted);
  font-size: .85rem;
  white-space: nowrap;
  cursor: pointer;
}
.pf-archived-toggle input[type="checkbox"] {
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  min-height: 0;
  min-width: 0;
  padding: 0;
  margin: 0;
  accent-color: var(--pf-blue);
  cursor: pointer;
}
.pf-empty-state {
  padding: var(--pf-s-5);
  border: 1px dashed var(--pf-border);
  border-radius: var(--pf-r-md);
  background: var(--pf-surface);
  color: var(--pf-muted);
  text-align: center;
}
.pf-danger-zone {
  border-left: 3px solid var(--pf-alert);
  background: color-mix(in srgb, var(--pf-alert) 5%, var(--pf-surface));
}
/* Thin separator inside the job danger zone (delete vs. purge-now). */
.pf-rule {
  border: 0;
  border-top: 1px solid var(--pf-border);
  margin: var(--pf-s-4) 0;
}
/* Trash table per-row actions: Restore button + an inline Purge-now disclosure. */
.pf-col-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--pf-s-2);
}
.pf-trash-purge > summary {
  list-style: none;
  cursor: pointer;
}
.pf-trash-purge > summary::-webkit-details-marker { display: none; }
.pf-trash-purge[open] > summary { margin-bottom: var(--pf-s-2); }
/* Trash "days left" countdown — decision-relevant over a raw timestamp. Neutral
   by default; amber as the purge nears (≤3 days); alert red once past due. */
.pf-days-left { font-variant-numeric: tabular-nums; }
.pf-days-soon { color: var(--pf-warning); font-weight: 700; }
.pf-days-due { color: var(--pf-alert); font-weight: 700; }
.pf-fields {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  gap: var(--pf-s-3);
  margin: 0;
}
.pf-fields dt {
  color: var(--pf-muted);
  font-size: .82rem;
  font-weight: 800;
}
.pf-fields dd {
  margin: 0;
  min-width: 0;
}
.pf-fields input,
.pf-fields textarea,
.pf-detail-side select {
  width: 100%;
  min-height: var(--pf-tap-min);
  padding: var(--pf-s-2) var(--pf-s-3);
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-r-sm);
  background: var(--pf-bg);
  color: var(--pf-text);
  font: inherit;
}
.pf-detail-main,
.pf-detail-side {
  display: grid;
  gap: var(--pf-s-4);
}
.pf-detail-side form {
  display: grid;
  gap: var(--pf-s-2);
  margin-bottom: var(--pf-s-4);
}
.pf-joblist {
  display: grid;
  gap: var(--pf-s-2);
  margin: var(--pf-s-3) 0 0;
  padding-left: 1.1rem;
}
.pf-add summary {
  cursor: pointer;
  color: var(--pf-blue);
  font-weight: 800;
}

/* quote builder */
.pf-check { flex-direction: row; align-items: center; gap: var(--pf-s-2); font-weight: 400; }
.pf-check input { min-height: auto; }
/* "Comp this order" — a deliberate, polished toggle row above the override fields */
.pf-comp-check {
  display: flex;
  align-items: center;
  gap: var(--pf-s-2);
  margin-bottom: var(--pf-s-2);
  padding: var(--pf-s-2) var(--pf-s-3);
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-r-sm);
  background: color-mix(in srgb, var(--pf-muted) 6%, transparent);
  font-weight: 700;
  cursor: pointer;
}
.pf-comp-check input { width: 1.05rem; height: 1.05rem; accent-color: var(--pf-blue); cursor: pointer; }
.pf-comp-check:has(input:checked) {
  border-color: var(--pf-blue);
  background: color-mix(in srgb, var(--pf-blue) 10%, transparent);
}
.pf-price { background: var(--pf-bg); border: 1px solid var(--pf-border); border-radius: var(--pf-r-sm); padding: var(--pf-s-3); }

.pf-breakdown { width: 100%; border-collapse: collapse; font-size: .9rem; }
.pf-breakdown td { padding: var(--pf-s-1) 0; border-bottom: 1px solid var(--pf-border); }
.pf-breakdown .pf-amt { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pf-breakdown .pf-subtotal td { font-weight: 600; }
.pf-breakdown .pf-walked td { color: var(--pf-muted); }
.pf-breakdown .pf-customer td { font-weight: 700; color: var(--pf-blue); border-bottom: 0; font-size: 1.05rem; }
.pf-tag { display: inline-block; background: var(--pf-terracotta); color: #fff; border-radius: var(--pf-r-sm); padding: 0 var(--pf-s-2); font-size: .7rem; }
.pf-tag-warn { background: var(--pf-warning); color: #1a1205; }
.pf-tag-muted { background: var(--pf-muted); color: #fff; }

/* quantity / reorder breakdown affordances (operator-internal builder view) */
.pf-breakdown .pf-bucket-head td {
  color: var(--pf-muted); font-size: .72rem; text-transform: uppercase;
  letter-spacing: .04em; padding-top: var(--pf-s-2); border-bottom: 0;
}
.pf-breakdown .pf-multiline td { font-weight: 600; }
.pf-breakdown .pf-each td { color: var(--pf-terracotta); font-weight: 600; border-bottom: 0; }
.pf-margin-warn {
  margin: var(--pf-s-2) 0 0; padding: var(--pf-s-2);
  background: color-mix(in srgb, var(--pf-warning) 18%, transparent);
  border-left: 3px solid var(--pf-warning); border-radius: var(--pf-r-sm); font-size: .8rem;
}
.pf-quote-kind, .pf-work-weave { margin-top: var(--pf-s-2); }
.pf-quote-hint { margin: var(--pf-s-1) 0; }
/* Live "saves per unit" readout — the canonical stored basis, so it gets an accent
   to read as "this is what a save records" rather than generic helper text. */
.pf-quote-perunit { margin: var(--pf-s-1) 0; color: var(--pf-blue); font-weight: 700; }
.pf-reorder-link { margin-top: var(--pf-s-1); }

/* job detail */
/* PR-3 (item J): the detail/quote-page stage pill now consumes --stage-color
   like the jobs-list .pf-stage-chip does. Default to the legacy blue when no
   .stage-<name> class is present (see the :where(...) --stage-color list). */
.pf-stage { display: inline-block; background: var(--stage-color, var(--pf-blue)); color: #fff; border-radius: var(--pf-r-pill, 999px); padding: 2px var(--pf-s-3); font-size: .8rem; vertical-align: middle; }
.pf-job-id a { color: var(--pf-blue); text-decoration: none; }
.pf-card h2 { font-size: .9rem; text-transform: uppercase; letter-spacing: .5px; color: var(--pf-muted); margin-top: var(--pf-s-5); }
.pf-ok { color: var(--pf-success); font-weight: 600; }
.pf-danger { color: var(--pf-alert); }
.pf-timeline { list-style: none; padding: 0; margin: 0; }
.pf-timeline li { padding: var(--pf-s-1) 0; border-bottom: 1px solid var(--pf-border); font-size: .85rem; }
.pf-ts { color: var(--pf-muted); font-variant-numeric: tabular-nums; }
.pf-ev { font-weight: 600; }
.pf-swatch { display: inline-block; min-width: 12px; height: 14px; padding: 0 4px; border: 1px solid var(--pf-border); border-radius: var(--pf-r-sm); vertical-align: middle; font-size: .65rem; font-variant-numeric: tabular-nums; }
.pf-swatch svg { vertical-align: middle; }

/* ops console — outbox */
.pf-count-warn { background: var(--pf-alert); color: #fff; }
.pf-ops-counts { display: flex; flex-wrap: wrap; gap: var(--pf-s-2); margin: var(--pf-s-3) 0; }
.pf-pill { display: inline-block; border-radius: var(--pf-r-sm); padding: 1px var(--pf-s-2); font-size: .75rem; border: 1px solid var(--pf-border); }
.pf-pill-delivered { color: var(--pf-success); }
.pf-pill-pending { color: var(--pf-muted); }
.pf-pill-failed { color: var(--pf-warning); }
.pf-pill-dead { color: #fff; background: var(--pf-alert); border-color: var(--pf-alert); }
.pf-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.pf-table th, .pf-table td { text-align: left; padding: var(--pf-s-2) var(--pf-s-3); border-bottom: 1px solid var(--pf-border); vertical-align: top; }
.pf-table th { color: var(--pf-muted); font-size: .75rem; text-transform: uppercase; letter-spacing: .5px; }
.pf-table .pf-err { color: var(--pf-alert); font-size: .75rem; max-width: 22rem; word-break: break-word; }
.pf-row-dead { background: color-mix(in srgb, var(--pf-alert) 8%, transparent); }
.pf-pill-sent { color: var(--pf-blue); }
.pf-pill-done { color: var(--pf-success); }
/* H4: a voided deduction is terminal/tombstoned — its pill reads muted, not
   alarming (the row itself dims via .pf-row-void below). */
.pf-pill-void { color: var(--pf-muted); }

/* printers dashboard (Phase 6) — ISA-101 calm-tech: status by colour, on-click detail */
.pf-section-h { font-size: .9rem; text-transform: uppercase; letter-spacing: .5px; color: var(--pf-muted); margin: var(--pf-s-5) 0 var(--pf-s-2); }
.pf-fleet { display: grid; gap: var(--pf-s-4); grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.pf-printer { background: var(--pf-surface); border: 1px solid var(--pf-border); border-top: 3px solid var(--pf-muted); border-radius: var(--pf-r-md); padding: var(--pf-s-4); }
.pf-printer-head { display: flex; align-items: center; justify-content: space-between; gap: var(--pf-s-2); }
.pf-printer-name { font-weight: 700; }
.pf-printer-cam { width: 100%; height: auto; border-radius: var(--pf-r-sm); margin: var(--pf-s-3) 0; display: block; }
.pf-printer-meta { display: grid; grid-template-columns: auto 1fr; gap: 2px var(--pf-s-3); margin: var(--pf-s-3) 0; font-size: .85rem; }
.pf-printer-meta dt { color: var(--pf-muted); }
.pf-printer-meta dd { margin: 0; }
.pf-printer-ctl { display: flex; flex-wrap: wrap; gap: var(--pf-s-2); align-items: center; border-top: 1px solid var(--pf-border); padding-top: var(--pf-s-2); }
.pf-printer-adv { margin-top: var(--pf-s-2); font-size: .85rem; }
.pf-printer-adv summary { cursor: pointer; color: var(--pf-muted); }
.pf-form-row { display: flex; gap: var(--pf-s-2); align-items: center; margin-top: var(--pf-s-2); flex-wrap: wrap; }
.pf-form-row input { min-height: 36px; padding: var(--pf-s-2); border: 1px solid var(--pf-border); border-radius: var(--pf-r-sm); background: var(--pf-bg); color: var(--pf-text); max-width: 9rem; }
/* status accents (pre-attentive colour cue) */
.pf-pstat-printing { border-top-color: var(--pf-success); }
.pf-pstat-paused   { border-top-color: var(--pf-warning); }
.pf-pstat-error    { border-top-color: var(--pf-alert); }
.pf-pstat-finished { border-top-color: var(--pf-blue); }
.pf-pstat-idle     { border-top-color: var(--pf-muted); }
.pf-pstat-offline  { border-top-color: var(--pf-border); opacity: .75; }
.pf-pstat-pill { background: var(--pf-muted); color: #fff; }
.pf-pstat-printing .pf-pstat-pill { background: var(--pf-success); }
.pf-pstat-paused   .pf-pstat-pill { background: var(--pf-warning); }
.pf-pstat-error    .pf-pstat-pill { background: var(--pf-alert); }
.pf-pstat-finished .pf-pstat-pill { background: var(--pf-blue); }
/* Affordance honesty (P4): controls that can't take effect read as unavailable —
   dimmed + not-allowed, never hidden (the operator still sees what exists). Matches
   the Files bulk/row disabled treatment. */
.pf-printer-ctl .pf-btn:disabled,
.pf-printer-adv .pf-link:disabled,
.pf-printer-adv input:disabled {
  cursor: not-allowed;
  opacity: .45;
}
/* Stale heartbeat cue on the "Seen" line — the agent has gone quiet; the timestamp
   reads amber and carries a small "stale" tag (state-cue rule: a heads-up, not an
   alarm — warning, not alert). */
.pf-ts-stale { color: var(--pf-warning); }
.pf-stale-tag {
  display: inline-block;
  margin-left: var(--pf-s-1);
  padding: 0 .35rem;
  border: 1px solid color-mix(in srgb, var(--pf-warning) 35%, var(--pf-border));
  border-radius: var(--pf-r-sm);
  color: var(--pf-warning);
  font-size: .64rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .4px;
  vertical-align: middle;
}

/* job cockpit: focused current-stage work, full detail stays one click away */
.pf-cockpit {
  display: grid;
  gap: var(--pf-s-4);
}
.pf-cockpit-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--pf-s-4);
  align-items: end;
}
.pf-cockpit-head h1 {
  margin: 0;
  letter-spacing: 0;
}
.pf-cockpit-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pf-s-2);
  margin: 0 0 var(--pf-s-2);
  color: var(--pf-muted);
  font-size: .85rem;
}
.pf-cockpit-nav .pf-link {
  color: var(--pf-blue);
}
.pf-cockpit-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  min-width: min(100%, 25rem);
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-r-md);
  background: var(--pf-surface);
  overflow: hidden;
}
.pf-cockpit-facts span {
  display: grid;
  gap: 2px;
  padding: var(--pf-s-3);
  color: var(--pf-muted);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: 0;
}
.pf-cockpit-facts span + span {
  border-left: 1px solid var(--pf-border);
}
.pf-cockpit-facts strong {
  color: var(--pf-text);
  font-size: 1rem;
  letter-spacing: 0;
  text-transform: none;
}
.pf-stage-rail {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding: 0;
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-r-md);
  overflow: hidden;
  background: var(--pf-surface);
}
.pf-stage-step {
  position: relative;
  min-width: 0;
}
.pf-stage-step span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.6rem;
  padding: 0 var(--pf-s-2);
  color: var(--pf-muted);
  font-size: .76rem;
  font-weight: 700;
  white-space: nowrap;
}
.pf-stage-step + .pf-stage-step {
  border-left: 1px solid var(--pf-border);
}
/* PR-3 (item J): rail steps inherit --stage-color (set on .pf-stage-rail via
   stage_class()); fall back to the legacy blue when no stage class is present. */
.pf-stage-step-done span {
  color: var(--stage-color, var(--pf-blue));
  background: color-mix(in srgb, var(--stage-color, var(--pf-blue)) 7%, transparent);
}
.pf-stage-step-current span {
  color: #fff;
  background: var(--stage-color, var(--pf-blue));
}
.pf-cockpit-side-stage {
  display: flex;
  align-items: center;
  gap: var(--pf-s-3);
  padding: var(--pf-s-3) var(--pf-s-4);
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-r-md);
  background: color-mix(in srgb, var(--pf-warning) 7%, var(--pf-surface));
  color: var(--pf-muted);
}
.pf-cockpit-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(17rem, 22rem);
  gap: var(--pf-s-4);
  align-items: start;
}
.pf-cockpit-work,
.pf-cockpit-next,
.pf-cockpit-tabs section {
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-r-md);
  background: var(--pf-surface);
}
.pf-cockpit-work {
  padding: var(--pf-s-5);
  min-height: 25rem;
}
.pf-cockpit-next {
  padding: var(--pf-s-4);
  position: sticky;
  top: var(--pf-s-4);
}
.pf-cockpit .pf-eyebrow {
  margin: 0 0 var(--pf-s-2);
  color: var(--pf-terracotta);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.pf-cockpit-work h2,
.pf-cockpit-next h2 {
  margin: 0 0 var(--pf-s-2);
  color: var(--pf-text);
  font-size: 1.35rem;
  letter-spacing: 0;
  text-transform: none;
}
.pf-cockpit-brief {
  margin: var(--pf-s-4) 0;
  padding: var(--pf-s-4);
  border-left: 3px solid var(--pf-blue);
  background: var(--pf-bg);
  border-radius: var(--pf-r-sm);
}
.pf-cockpit-brief span,
.pf-cockpit-subpanel h3 {
  display: block;
  color: var(--pf-muted);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}
.pf-cockpit-brief p {
  margin: var(--pf-s-1) 0 0;
}
.pf-cockpit-money {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pf-s-2);
  margin: var(--pf-s-4) 0;
}
.pf-cockpit-money span {
  padding: var(--pf-s-2) var(--pf-s-3);
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-r-sm);
  background: var(--pf-bg);
  color: var(--pf-success);
  font-weight: 700;
}
.pf-cockpit-form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pf-s-3);
  align-items: end;
  margin-top: var(--pf-s-4);
}
.pf-cockpit-form label {
  display: grid;
  gap: var(--pf-s-2);
  min-width: min(100%, 16rem);
  font-size: .85rem;
  font-weight: 700;
}
.pf-cockpit-form input,
.pf-cockpit-form select,
.pf-cockpit-form textarea,
.pf-cockpit-subpanel input,
.pf-cockpit-subpanel select {
  min-height: var(--pf-tap-min);
  padding: var(--pf-s-2) var(--pf-s-3);
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-r-sm);
  background: var(--pf-bg);
  color: var(--pf-text);
  font: inherit;
}
.pf-cockpit-panel-form {
  margin-top: 0;
}
.pf-cockpit-form-wide {
  flex: 1 1 100%;
}
.pf-cockpit-form-wide textarea {
  min-width: 100%;
  resize: vertical;
}
.pf-cockpit-subpanel {
  margin: var(--pf-s-4) 0;
  padding: var(--pf-s-4);
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-r-md);
  background: var(--pf-bg);
}
.pf-cockpit-subpanel h3 {
  margin: 0 0 var(--pf-s-2);
}
.pf-cockpit-subpanel label {
  display: grid;
  gap: var(--pf-s-2);
  margin-top: var(--pf-s-3);
  font-size: .85rem;
  font-weight: 700;
}
.pf-state-preview {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: var(--pf-s-2);
  align-items: center;
  margin: var(--pf-s-3) 0 var(--pf-s-4);
  color: var(--pf-muted);
  font-size: .85rem;
}
.pf-state-preview span:first-child,
.pf-state-preview span:last-child {
  min-width: 0;
  padding: var(--pf-s-2);
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-r-sm);
  background: var(--pf-bg);
  color: var(--pf-text);
  text-align: center;
}
.pf-action-effects {
  margin: var(--pf-s-4) 0;
  padding: var(--pf-s-3);
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-r-md);
  background: var(--pf-bg);
}
.pf-action-effects h3 {
  margin: 0 0 var(--pf-s-2);
  color: var(--pf-muted);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.pf-action-effects ul {
  display: grid;
  gap: var(--pf-s-2);
  margin: 0;
  padding-left: 1.1rem;
  color: var(--pf-muted);
  font-size: .85rem;
}
.pf-cockpit-secondary {
  display: grid;
  gap: var(--pf-s-2);
  margin-top: var(--pf-s-4);
}
.pf-cockpit-secondary .pf-inline,
.pf-cockpit-secondary .pf-btn {
  width: 100%;
}
.pf-cockpit-danger {
  border-top: 1px solid var(--pf-border);
  padding-top: var(--pf-s-3);
}
.pf-cockpit-danger summary {
  color: var(--pf-alert);
  cursor: pointer;
  font-weight: 700;
}
.pf-cockpit-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--pf-s-3);
}
.pf-cockpit-tabs section {
  padding: var(--pf-s-4);
  min-width: 0;
}
.pf-cockpit-tabs h2 {
  margin: 0 0 var(--pf-s-2);
  color: var(--pf-muted);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.pf-cockpit-tabs p {
  min-height: 2.4rem;
  margin: 0 0 var(--pf-s-2);
  font-size: .86rem;
}
.pf-cockpit-tabs .pf-link {
  color: var(--pf-blue);
}
.pf-cockpit-support {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--pf-s-3);
  align-items: start;
}
.pf-cockpit-status-strip {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--pf-s-2);
}
.pf-cockpit-chip {
  min-width: 0;
  display: grid;
  gap: 2px;
  padding: var(--pf-s-2) var(--pf-s-3);
  border: 1px solid var(--pf-border);
  border-left: 3px solid var(--pf-border-strong);
  border-radius: var(--pf-r-sm);
  background: var(--pf-surface);
  color: var(--pf-muted);
  font-size: .78rem;
  overflow-wrap: anywhere;
}
.pf-cockpit-chip strong {
  color: var(--pf-text);
  font-size: .72rem;
  letter-spacing: 0;
  text-transform: uppercase;
}
.pf-cockpit-chip.is-focus {
  border-left-color: var(--pf-blue);
  background: var(--pf-bg);
}
.pf-cockpit-drawer {
  min-width: 0;
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-r-md);
  background: var(--pf-surface);
}
.pf-cockpit-drawer summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pf-s-3);
  min-height: var(--pf-tap-min);
  padding: 0 var(--pf-s-4);
  cursor: pointer;
  list-style: none;
}
.pf-cockpit-drawer summary::-webkit-details-marker {
  display: none;
}
.pf-cockpit-drawer summary span {
  color: var(--pf-muted);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}
.pf-cockpit-drawer summary strong {
  min-width: 0;
  color: var(--pf-text);
  font-size: .9rem;
  text-align: right;
  overflow-wrap: anywhere;
}
.pf-cockpit-drawer[open] summary {
  border-bottom: 1px solid var(--pf-border);
}
.pf-cockpit-drawer-body {
  display: grid;
  gap: var(--pf-s-3);
  padding: var(--pf-s-4);
}
.pf-cockpit-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--pf-s-2);
}
.pf-cockpit-metrics span {
  display: grid;
  gap: 2px;
  padding: var(--pf-s-2);
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-r-sm);
  background: var(--pf-bg);
  color: var(--pf-muted);
  font-size: .7rem;
  text-transform: uppercase;
}
.pf-cockpit-metrics strong {
  color: var(--pf-text);
  font-size: .95rem;
  text-transform: none;
}
.pf-cockpit-mini-list {
  display: grid;
  gap: var(--pf-s-2);
  list-style: none;
  margin: 0;
  padding: 0;
}
.pf-cockpit-mini-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--pf-s-3);
  align-items: start;
  padding-bottom: var(--pf-s-2);
  border-bottom: 1px solid var(--pf-border);
  font-size: .85rem;
}
.pf-cockpit-mini-list li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.pf-cockpit-mini-list span {
  min-width: 0;
  color: var(--pf-muted);
}
.pf-cockpit-mini-list strong {
  min-width: 0;
  color: var(--pf-text);
  font-weight: 600;
  text-align: right;
  overflow-wrap: anywhere;
}
.pf-cockpit-kv {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--pf-s-1) var(--pf-s-3);
  margin: 0;
  font-size: .85rem;
}
.pf-cockpit-kv dt {
  color: var(--pf-muted);
}
.pf-cockpit-kv dd {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}
.pf-cockpit-panel-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pf-s-2);
  align-items: center;
  margin: 0;
  color: var(--pf-muted);
  font-size: .85rem;
}
.pf-cockpit-panel-actions form {
  margin: 0;
}
/* ── Quote builder, COMPRESSED into the narrow do-next rail ───────────────────
   Single-column form living in the standard rail slot (like every other stage's
   tool — no full-width, no above-core). Fields are 2-up with CSS-only floating
   labels: the label sits inside the box as a faint placeholder when empty, then
   shrinks to a caption on focus/fill. Pure CSS, CSP-safe. */
.pf-quote-form {
  display: flex;
  flex-direction: column;
  gap: var(--pf-s-3);
}
.pf-quote-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--pf-s-2);
}
.pf-field {
  position: relative;
  min-width: 0;
}
.pf-field > input,
.pf-field > select {
  width: 100%;
  min-height: var(--pf-tap-min);
  padding: 15px var(--pf-s-3) 3px;
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-r-sm);
  background-color: var(--pf-bg);
  color: var(--pf-text);
  font: inherit;
  font-size: .9rem;
}
.pf-field > label {
  position: absolute;
  left: calc(var(--pf-s-3) + 1px);
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
  font-size: .9rem;
  font-weight: 600;
  color: var(--pf-muted);
  pointer-events: none;
  transition: top .12s ease, font-size .12s ease, color .12s ease;
}
.pf-field-unit { font-weight: 500; opacity: .65; }
/* Floated state: focused, filled (placeholder hidden), or a select (always has
   a value, so its caption is permanently risen). */
.pf-field > input:focus + label,
.pf-field > input:not(:placeholder-shown) + label,
.pf-field-select > label {
  top: 8px;
  transform: none;
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--pf-blue);
}

/* ── Quote-estimate calibration + measure-the-part estimator ───────────────
   docs/QUOTE_ESTIMATE_CALIBRATION.md. The estimator is a collapsible helper above
   the quote fields; calibration ghosts a suggested correction onto the grams/print
   fields (a clickable chip + a clickable dotted title — both APPLY; the box is always
   free entry). */
.pf-estimator {
  margin: 0 0 var(--pf-s-3);
  border: 1px dashed var(--pf-border);
  border-radius: var(--pf-r-sm);
  padding: var(--pf-s-2) var(--pf-s-3);
  background: color-mix(in srgb, var(--pf-blue) 4%, transparent);
}
.pf-estimator > summary { cursor: pointer; font-weight: 700; font-size: .82rem; color: var(--pf-blue); }
.pf-estimator-fields { display: flex; flex-wrap: wrap; gap: var(--pf-s-2); align-items: center; margin-top: var(--pf-s-2); }
.pf-estimator-fields .pf-field { flex: 1 1 4.5rem; }
.pf-estimator-fields .pf-btn { flex: 0 0 auto; }
.pf-estimator-note { margin: var(--pf-s-2) 0 0; }

/* On a calibrated field, reserve right padding for the ghost chip and drop the native
   number spinners so the chip never collides with them (review). */
.pf-field[data-calib] > input[type="number"] {
  padding-right: 70px;
  -moz-appearance: textfield;
  appearance: textfield;
}
.pf-field[data-calib] > input[type="number"]::-webkit-outer-spin-button,
.pf-field[data-calib] > input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* The ghost chip sits at the field's right edge (numbers are left-aligned, so it
   rarely collides with the value); it and the dotted title both apply on click. */
.pf-suggest-ghost {
  position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
  border: 1px solid color-mix(in srgb, var(--pf-blue) 40%, var(--pf-border));
  background: color-mix(in srgb, var(--pf-blue) 16%, var(--pf-surface));
  color: var(--pf-text); font: inherit; font-size: .68rem; font-weight: 700;
  line-height: 1; padding: 3px 7px; border-radius: var(--pf-r-pill, 999px);
  cursor: pointer; opacity: .92; white-space: nowrap;
}
.pf-suggest-ghost:hover, .pf-suggest-ghost:focus-visible { opacity: 1; }
.pf-field > label.pf-title-suggest {
  pointer-events: auto; cursor: pointer; color: var(--pf-blue);
  text-decoration: underline dotted; text-underline-offset: 2px;
}
.pf-apply-all {
  display: inline-block; margin: 2px 0 var(--pf-s-2);
  color: var(--pf-blue); font-size: .78rem; cursor: pointer;
  background: none; border: none; padding: 0;
}
.pf-fin-lens { margin-top: 0; }
.pf-fin-lens a { color: var(--pf-blue); }

/* Business status (go-live marker) panel on the settings page. */
.pf-settings-business {
  margin: 0 0 var(--pf-s-4);
  padding: var(--pf-s-3) var(--pf-s-4);
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-r-sm);
  background: var(--pf-surface);
}
.pf-settings-business .pf-section-h { margin-top: 0; }
.pf-settings-business form { margin-top: var(--pf-s-2); }

/* Modifier chips (Rush · F&F) — one tight inline row. */
.pf-quote-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--pf-s-2);
}
.pf-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px var(--pf-s-2);
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-r-sm);
  background-color: var(--pf-bg);
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
}
/* Compact, always-visible price + breakdown for the narrow card. */
.pf-quote-price { display: grid; gap: var(--pf-s-2); }
.pf-quote-panel .pf-price { padding: var(--pf-s-2) var(--pf-s-3); }
.pf-quote-panel .pf-breakdown { font-size: .8rem; }
.pf-quote-panel .pf-breakdown td { padding: 1px 0; }
/* Override disclosure — quiet, collapsed by default; the ▸/▾ marker is the cue. */
.pf-quote-override {
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-r-sm);
  background-color: var(--pf-bg);
  padding: 0 var(--pf-s-3);
}
.pf-quote-override > summary {
  cursor: pointer;
  padding: var(--pf-s-2) 0;
  font-size: .85rem;
  font-weight: 700;
  color: var(--pf-muted);
  list-style: none;
}
.pf-quote-override > summary::-webkit-details-marker { display: none; }
.pf-quote-override > summary::before { content: "\25B8\00a0"; }
.pf-quote-override[open] > summary::before { content: "\25BE\00a0"; }
.pf-quote-override > *:not(summary) { margin: 0 0 var(--pf-s-2); }
.pf-field-stack {
  display: grid;
  gap: var(--pf-s-2);
  min-width: 0;
  font-size: .85rem;
  font-weight: 700;
}
.pf-field-stack input {
  min-height: var(--pf-tap-min);
  padding: var(--pf-s-2) var(--pf-s-3);
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-r-sm);
  background-color: var(--pf-bg);
  color: var(--pf-text);
  font: inherit;
  min-width: 0;
}
/* Save / Send pinned at the card bottom, side by side. */
.pf-quote-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pf-s-2);
}
.pf-quote-actions .pf-btn { flex: 1 1 auto; }
/* Persistent saved-state cue — so a saved quote is visibly recorded on the page,
   not just a transient toast (the "did anything happen?" fix). */
.pf-quote-saved { margin: 2px 0 0; font-size: .82rem; font-weight: 800; color: var(--pf-success); }
.pf-quote-hint { font-size: .78rem; }
/* Compose/send page inputs (a separate surface — kept). */
.pf-compose-form input,
.pf-compose-form textarea {
  min-height: var(--pf-tap-min);
  padding: var(--pf-s-2) var(--pf-s-3);
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-r-sm);
  background-color: var(--pf-bg);
  color: var(--pf-text);
  font: inherit;
  min-width: 0;
}
.pf-quote-send .pf-cockpit-next .pf-btn { width: 100%; }
.pf-compose-form {
  margin-top: var(--pf-s-4);
}

/* ── Quote send: PDF actions + delivery clarity + the email auto-send toggle
   (feat/quote-pdf-ui). All sit above the compose form. */
.pf-pdf-actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--pf-s-2);
  margin-top: var(--pf-s-3);
}
.pf-pdf-hint { font-size: .8rem; }
.pf-delivery {
  margin: var(--pf-s-3) 0 0;
  padding: var(--pf-s-2) var(--pf-s-3);
  border-left: 3px solid var(--pf-border);
  border-radius: var(--pf-r-sm);
  background: var(--pf-surface);
  font-size: .9rem;
}
.pf-delivery-send { border-left-color: var(--pf-success); }
.pf-delivery-paused { border-left-color: var(--pf-warning);
  background: color-mix(in srgb, var(--pf-warning) 8%, var(--pf-surface)); }
.pf-delivery-manual, .pf-delivery-mailer_off { border-left-color: var(--pf-muted); }
.pf-quiet-toggle {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--pf-s-2);
  margin-top: var(--pf-s-2);
}
.pf-quiet-state { font-size: .85rem; color: var(--pf-muted); }
.pf-quiet-state.is-paused { color: var(--pf-warning); font-weight: 600; }
.pf-assess-proof {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: var(--pf-s-3);
}
.pf-assess-proof figure {
  margin: 0;
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-r-md);
  overflow: hidden;
  background: var(--pf-surface);
}
.pf-assess-proof img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.pf-intake-thumbs {
  display: grid;
  gap: var(--pf-s-3);
  padding: var(--pf-s-4);
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-r-md);
  background: var(--pf-surface);
}
.pf-intake-thumbs-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pf-s-3);
}
.pf-intake-thumbs-head h2 {
  margin: 0;
  color: var(--pf-text);
  font-size: 1rem;
  letter-spacing: 0;
}
.pf-intake-thumbs-head span {
  color: var(--pf-muted);
  font-size: .82rem;
  font-weight: 800;
}
.pf-intake-thumb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7.5rem, 10rem));
  gap: var(--pf-s-3);
}
/* Fit photos (v35/v36) — standalone full-width card under the Photos / Files row.
   Deliberately OUTSIDE the fixed-height Photos card: the intake carousel there is
   flex-grow, so nesting this inside it collapsed the carousel (the disappearing-
   intake-photos bug). A plain thumb grid, auto height. */
.pf-fit-thumbs {
  display: grid;
  gap: var(--pf-s-3);
  padding: var(--pf-s-4);
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-r-md);
  background: var(--pf-surface);
}
/* Manual material capture (v35). */
.pf-material-capture-form summary { cursor: pointer; font-weight: 700; }
.pf-material-capture .pf-hint { margin: var(--pf-s-2) 0; }
.pf-intake-thumb {
  position: relative;
  margin: 0;
}
.pf-intake-thumb-link {
  display: block;
  border-radius: var(--pf-r-sm);
  outline-offset: 2px;
}
.pf-intake-thumb-link > img,
.pf-intake-thumb > img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-r-sm);
  background: var(--pf-bg);
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
/* Highlight the hovered/focused thumb while its preview is showing. */
.pf-intake-thumb:hover .pf-intake-thumb-link > img,
.pf-intake-thumb:focus-within .pf-intake-thumb-link > img {
  border-color: var(--pf-blue);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--pf-blue) 35%, transparent);
}
.pf-intake-thumb figcaption {
  margin-top: var(--pf-s-1);
  color: var(--pf-muted);
  font-size: .78rem;
  font-weight: 700;
}
/* Per-photo soft-delete ✕ (recoverable), top-right corner of the thumb. */
.pf-intake-thumb-del {
  position: absolute;
  top: var(--pf-s-1);
  right: var(--pf-s-1);
  z-index: 5;
  margin: 0;
}
.pf-intake-thumb-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: 1px solid var(--pf-border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--pf-surface) 88%, transparent);
  color: var(--pf-muted);
  font-size: .85rem;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}
.pf-intake-thumb-x:hover {
  border-color: var(--pf-alert);
  background: var(--pf-surface);
  color: var(--pf-alert);
}

/* ── Photo category (v37): corner badges · filter toggles · the popover tag menu.
   Accent per category — intake neutral · added terracotta · cad indigo · fit teal. */
.pf-cat-badge {
  position: absolute;
  left: var(--pf-s-1);
  bottom: var(--pf-s-1);
  z-index: 5;
  padding: 1px var(--pf-s-2);
  border: 0;
  border-radius: 999px;
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: #fff;
  background: var(--pf-muted);
  line-height: 1.45;
}
button.pf-cat-badge { cursor: pointer; }
.pf-cat-badge.is-intake { background: color-mix(in srgb, var(--pf-muted) 80%, #000); }
.pf-cat-badge.is-added  { background: var(--pf-terracotta); }
.pf-cat-badge.is-cad    { background: #6366F1; }
.pf-cat-badge.is-fit    { background: #0A7268; }  /* darkened for white-text contrast (AA) */
button.pf-cat-badge:hover { filter: brightness(1.12); }
button.pf-cat-badge:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
/* Per-photo description (v49): a compact inline editor under each thumb. Saves on
   change (HTMX) to the describe route; empty clears it. */
.pf-photo-suggest { margin-left: auto; font-size: .78rem; white-space: nowrap; }
.pf-photo-desc {
  width: 100%;
  margin-top: var(--pf-s-2);
  padding: .2rem .4rem;
  font-size: .76rem;
  color: var(--pf-text);
  background: var(--pf-surface);
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-r-sm);
}
.pf-photo-desc:focus-visible { outline: 2px solid var(--pf-accent); outline-offset: 1px; }
.pf-photo-desc::placeholder { color: var(--pf-muted); }

/* Filter toggle bar under the Photos head. */
.pf-photo-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--pf-s-1);
  margin-bottom: var(--pf-s-2);
}
.pf-photo-filter {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px var(--pf-s-2);
  border: 1px solid var(--pf-border);
  border-radius: 999px;
  background: var(--pf-surface);
  color: var(--pf-muted);
  font-size: .72rem;
  font-weight: 700;
  cursor: pointer;
}
.pf-photo-filter:hover { border-color: var(--pf-blue); color: var(--pf-text); }
.pf-photo-filter.is-active { background: var(--pf-blue); border-color: var(--pf-blue); color: #fff; }
.pf-photo-filter-n { font-variant-numeric: tabular-nums; opacity: .85; }
/* a tiny category dot on each non-All filter pill */
.pf-photo-filter.is-intake::before,
.pf-photo-filter.is-added::before,
.pf-photo-filter.is-cad::before,
.pf-photo-filter.is-fit::before {
  content: ""; width: 7px; height: 7px; border-radius: 999px; flex: none;
  background: color-mix(in srgb, var(--pf-muted) 80%, #000);
}
.pf-photo-filter.is-added::before { background: var(--pf-terracotta); }
.pf-photo-filter.is-cad::before   { background: #6366F1; }
.pf-photo-filter.is-fit::before   { background: #0D9488; }

/* The per-thumb tag menu — native popover (top layer, escapes the carousel clip). */
.pf-cat-menu {
  margin: 0;
  padding: var(--pf-s-2);
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-r-sm);
  background: var(--pf-surface);
  color: var(--pf-text);
  box-shadow: 0 10px 28px rgba(0,0,0,.45);
  min-width: 8.5rem;
}
.pf-cat-menu-head {
  margin: 0 0 var(--pf-s-1);
  font-size: .66rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--pf-muted);
}
.pf-cat-opt {
  display: flex;
  align-items: center;
  gap: var(--pf-s-2);
  width: 100%;
  padding: var(--pf-s-1) var(--pf-s-2);
  border: 0;
  border-radius: var(--pf-r-sm);
  background: transparent;
  color: var(--pf-text);
  font-size: .8rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.pf-cat-opt::before {
  content: ""; width: 9px; height: 9px; border-radius: 999px; flex: none;
  background: color-mix(in srgb, var(--pf-muted) 80%, #000);
}
.pf-cat-opt.is-added::before { background: var(--pf-terracotta); }
.pf-cat-opt.is-cad::before   { background: #6366F1; }
.pf-cat-opt.is-fit::before   { background: #0D9488; }
.pf-cat-opt-untag::before { background: transparent; border: 1px dashed var(--pf-muted); }
.pf-cat-opt:hover { background: color-mix(in srgb, var(--pf-blue) 18%, transparent); }
.pf-cat-opt.is-current { background: color-mix(in srgb, var(--pf-blue) 26%, transparent); font-weight: 800; }

/* HOVER preview: the full-res original shown on hover so the operator can read the
   part. position:FIXED + JS placement (ui.js) so it floats over EVERYTHING — the
   photo carousel is a scroll container that would otherwise clip an absolutely-
   positioned popout. ui.js toggles display + sets top/left on thumb hover; without
   JS the preview just stays hidden (the thumb still click-opens the full image). */
.pf-intake-preview {
  position: fixed;
  z-index: 100;
  display: none;
  width: min(34rem, 92vw);
  padding: var(--pf-s-2);
  border: 1px solid var(--pf-blue);
  border-radius: var(--pf-r-md);
  background: var(--pf-surface);
  box-shadow: 0 18px 42px rgba(15,32,48,.28);
  pointer-events: none;
}
.pf-intake-preview img {
  display: block;
  width: 100%;
  max-height: 34rem;
  object-fit: contain;
  border-radius: var(--pf-r-sm);
}
/* Moved caption context — shown only on the hover preview, above the image. The
   "Added …" marker is terra-cotta so operator-added photos stand out at a glance. */
.pf-intake-preview-head {
  display: block;
  margin-bottom: var(--pf-s-2);
  font-size: .78rem;
  font-weight: 700;
  color: var(--pf-muted);
}
.pf-intake-preview-added { color: var(--pf-terracotta); }
/* Display + placement is JS-driven (ui.js) for every thumb so the fixed preview
   floats over the carousel's scroll clipping (the old pure-CSS :hover rule is gone). */
.pf-intake-thumb--removed .pf-intake-thumb-link > img {
  opacity: .55;
  filter: grayscale(.4);
}

/* "N removed — show / restore" reveal. */
.pf-intake-removed > summary {
  cursor: pointer;
  color: var(--pf-muted);
  font-size: .82rem;
  font-weight: 800;
}
.pf-intake-removed[open] > summary {
  margin-bottom: var(--pf-s-2);
}
.pf-intake-thumb-grid--removed {
  margin-top: var(--pf-s-1);
}

/* Async uploader (P4b) — the request-page pf-photo-upload-* component, scoped to
   the console job strip (public.css scopes its copy under .pf-pubmain). */
.pf-async-upload .pf-upload-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pf-s-2) var(--pf-s-3);
  align-items: center;
  color: var(--pf-muted);
  font-size: .84rem;
}
.pf-async-upload .pf-upload-meta .is-error { color: var(--pf-alert); font-weight: 700; }
.pf-async-upload .pf-photo-upload-list { display: grid; gap: var(--pf-s-2); margin-top: var(--pf-s-2); }
.pf-async-upload .pf-photo-upload-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--pf-s-3);
  align-items: center;
  padding: var(--pf-s-2) var(--pf-s-3);
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-r-sm);
  background: var(--pf-surface);
}
.pf-async-upload .pf-photo-upload-main { display: grid; gap: var(--pf-s-1); min-width: 0; }
.pf-async-upload .pf-photo-upload-name {
  overflow: hidden;
  color: var(--pf-text);
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pf-async-upload .pf-photo-upload-status { color: var(--pf-muted); font-size: .8rem; font-weight: 700; }
.pf-async-upload .pf-photo-upload-row[data-status="done"] .pf-photo-upload-status { color: var(--pf-success); }
.pf-async-upload .pf-photo-upload-row[data-status="error"] {
  border-color: color-mix(in srgb, var(--pf-alert) 32%, var(--pf-border));
}
.pf-async-upload .pf-photo-upload-row[data-status="error"] .pf-photo-upload-status { color: var(--pf-alert); }
.pf-async-upload .pf-photo-progress {
  height: .45rem;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--pf-blue) 12%, var(--pf-border));
}
.pf-async-upload .pf-photo-progress span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--pf-blue);
  transition: width 120ms ease;
}
.pf-async-upload .pf-photo-upload-row[data-status="done"] .pf-photo-progress span { background: var(--pf-success); }
.pf-async-upload .pf-photo-upload-actions { display: flex; gap: var(--pf-s-2); justify-content: flex-end; }

@media (max-width: 860px) {
  .pf-console-shell,
  .pf-console-shell.is-sidebar-expanded,
  .pf-console-shell.is-sidebar-hidden {
    grid-template-columns: 1fr;
  }
  .pf-sidebar {
    position: static;
    height: auto;
    grid-template-rows: auto auto auto auto auto;
    gap: var(--pf-s-3);
    transform: none !important;
  }
  .pf-sidebar-nav {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
    gap: var(--pf-s-3);
    overflow: visible;
    padding-bottom: 0;
  }
  .pf-sidebar-nav section {
    min-width: 0;
  }
  .pf-sidebar-nav a {
    min-height: 3.1rem;
    padding: .55rem .65rem;
    white-space: normal;
  }
  .pf-settings-flyout[open] .pf-settings-panel {
    position: static;
    width: auto;
    box-shadow: none;
  }
  .pf-sidebar-tools {
    justify-content: flex-start;
  }
  .pf-page-head,
  .pf-page-grid,
  .pf-capture-grid,
  .pf-pricing-shell,
  .pf-home-grid,
  .pf-quote-form {
    grid-template-columns: 1fr;
  }
  .pf-home-map {
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  }
  .pf-page-actions {
    justify-content: flex-start;
  }
  .pf-pricing-save {
    position: static;
  }
  .pf-header {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--pf-s-2);
  }
  .pf-nav {
    width: 100%;
    overflow-x: auto;
    gap: var(--pf-s-3);
    flex-wrap: nowrap;
    padding-bottom: var(--pf-s-1);
  }
  .pf-nav a,
  .pf-nav .pf-link {
    white-space: nowrap;
  }
  .pf-nav-search input {
    width: 11rem;
  }
  .pf-cockpit-head,
  .pf-cockpit-grid,
  .pf-cockpit-tabs,
  .pf-cockpit-support,
  .pf-quote-form,
  .pf-job-grid {
    grid-template-columns: 1fr;
  }
  .pf-cockpit-next,
  .pf-job-rail {
    position: static;
  }
  .pf-cockpit-status-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .pf-quote-fields {
    grid-template-columns: 1fr;
  }
  .pf-stage-rail {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .pf-stage-step:nth-child(3n + 1) {
    border-left: 0;
  }
  .pf-stage-step:nth-child(n + 4) {
    border-top: 1px solid var(--pf-border);
  }
}


/* ── Unified job page (Variant A): wide LEFT dossier + sticky RIGHT rail ──
   ONE page renders full detail + every stage's controls at every stage. The
   .pf-job-core column holds the constant core (P2); .pf-job-rail is the
   contextual "do-next" workbench (P3 fills it). Every stage uses the same
   layout — Quoting's builder is compressed to fit the narrow rail rather than
   widening the grid. Scoped under the console; tokens from tokens.css. */
.pf-job-unified {
  display: grid;
  gap: var(--pf-s-3);
}
.pf-job-unified .pf-job-head h1 {
  margin: 0;
  letter-spacing: 0;
}
.pf-job-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(17rem, 0.92fr);
  gap: var(--pf-s-3);
  align-items: start;
}
/* ── Variant A dense-dossier blocks (left core) ──────────────────────────────
   The left column reads as a packed dossier, not a tall single stack: photos +
   files sit side by side, structured fields are a card grid, and the secondary
   records (flags/billing/comms/customer) flow in a 2-col mini-card grid. */
.pf-job-media {
  display: grid;   /* Photos | Files side by side (equal split) on every stage */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--pf-s-3);
  align-items: start;
}
.pf-job-media > * { margin: 0; min-width: 0; }
.pf-field-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: var(--pf-s-2);
}
.pf-field {
  display: grid;
  gap: 2px;
  padding: var(--pf-s-2);
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-r-sm);
  background: color-mix(in srgb, var(--pf-muted) 7%, transparent);
}
.pf-field span {
  color: var(--pf-muted);
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.pf-field strong { color: var(--pf-text); font-size: .86rem; font-weight: 700; }
/* the brief cards: label on its own line above the value (a later .pf-field rule
   forces display:block, which would otherwise run "CONDITIONBroken" together). */
.pf-field-grid .pf-field span { display: block; }
.pf-job-support {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--pf-s-3);
  align-items: start;
}
.pf-job-support > * { margin: 0; min-width: 0; }
/* two independent column stacks — each packs its own items so a short card
   (e.g. Risk/Use flags) never leaves a cross-row gap under it. */
.pf-job-support-col {
  display: flex;
  flex-direction: column;
  gap: var(--pf-s-3);
  min-width: 0;
}
.pf-job-support-col > * { margin: 0; }
/* The in-place brief edit form: a 2-col field grid; long fields + the deadline
   block + the action row span the full width. */
.pf-brief-form { flex: 1 1 100%; gap: var(--pf-s-2); }
.pf-brief-edit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--pf-s-2);
}
.pf-brief-edit-grid .pf-span-2,
.pf-brief-edit-grid .pf-deadline-edit { grid-column: 1 / -1; }
.pf-deadline-edit { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--pf-s-3); }
.pf-deadline-edit > label:first-child { flex: 0 0 auto; }
.pf-norush-check {
  display: flex; flex-direction: row; align-items: center; gap: 6px;
  font-weight: 600; text-transform: none; white-space: nowrap;
}
.pf-norush-check input { min-height: 0; width: auto; }
.pf-brief-edit-actions { display: flex; gap: var(--pf-s-2); margin-top: var(--pf-s-2); }
@media (max-width: 600px) { .pf-brief-edit-grid { grid-template-columns: minmax(0, 1fr); } }
/* Stack the dense blocks on narrow viewports. */
@media (max-width: 1100px) {
  .pf-job-media,
  .pf-job-support { grid-template-columns: minmax(0, 1fr); }
}
.pf-job-core {
  display: grid;
  gap: var(--pf-s-3);
  min-width: 0;
}
.pf-job-rail {
  position: sticky;
  top: var(--pf-s-4);
  display: grid;
  gap: var(--pf-s-3);
  align-content: start;
}
/* ── Contextual "do-next" rail panels (P5 density pass) ──────────────────────
   The rail carries the ONE thing to do at this stage; give each panel quiet card
   chrome so it reads as a distinct workbench without shouting. Signal budget:
   one primary action per panel, secondary/reverse moves recede (.pf-rail-secondary). */
.pf-job-rail .pf-rail-panel {
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-r-md);
  background: var(--pf-surface);
  padding: var(--pf-s-3);
  display: grid;
  gap: var(--pf-s-3);
}
.pf-job-rail .pf-rail-panel > * { margin: 0; }
.pf-job-rail [data-do-next] > .pf-rail-panel + .pf-rail-panel,
.pf-job-rail .pf-rail-panel .pf-section-h { margin-top: 0; }
.pf-job-rail .pf-eyebrow {
  margin: 0;
  color: var(--pf-blue);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
}
/* Secondary / reverse moves are intentionally calm — muted card, no card border. */
.pf-job-rail .pf-rail-secondary {
  background: var(--pf-bg);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pf-s-2);
}
.pf-job-rail .pf-rail-secondary .pf-eyebrow { flex-basis: 100%; }

/* Collapsible core sections (billing, comms/timeline). */
.pf-job-collapse {
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-r-md);
  background: var(--pf-surface);
  padding: 0 var(--pf-s-4) var(--pf-s-2);
}
.pf-job-collapse > summary {
  cursor: pointer;
  padding: var(--pf-s-3) 0;
  margin: 0;
}
.pf-job-collapse .pf-job-collapse-body {
  padding-bottom: var(--pf-s-2);
}

/* Constant-core dossier sections (brief / flags / customer) — quiet cards so the
   page scans top-to-bottom without competing chrome (P5 density pass). */
.pf-job-brief,
.pf-job-flags,
.pf-job-customer {
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-r-md);
  background: var(--pf-surface);
  padding: var(--pf-s-3);
  display: grid;
  gap: var(--pf-s-2);
}
.pf-job-brief > *,
.pf-job-flags > *,
.pf-job-customer > * { margin: 0; }
.pf-job-brief .pf-desc { line-height: 1.45; }

/* ── Compressed BRIEF band — full-width summary under the stage rail ──────────
   description shows in FULL (no clamp — customers often give more than two lines
   and the operator wants all of it); structured fields are inline chips; the full
   edit form stays a disclosure pinned to the right. */
.pf-job-brief--top {
  position: relative; /* containing block for the corner-pinned classify tag */
  display: flex;
  align-items: flex-start;
  gap: var(--pf-s-3);
  padding: var(--pf-s-2) var(--pf-s-3);
}
.pf-job-brief--top .pf-brief-body { flex: 1 1 auto; min-width: 0; display: grid; gap: 4px; }
.pf-brief-eyebrow {
  font-size: .62rem; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--pf-muted);
}
.pf-brief-desc {
  color: var(--pf-text); line-height: 1.4; font-size: .9rem; white-space: pre-line;
  overflow-wrap: anywhere;
}
/* Centered + higher-visibility chips — these are the at-a-glance details. A blue
   tint + brighter border lift them off the band; the value is full-contrast and a
   touch larger, the label reads in the accent. (Theme-aware via color-mix tokens.) */
.pf-brief-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.pf-brief-chip {
  display: inline-flex; align-items: baseline; gap: 5px;
  padding: 3px var(--pf-s-2); border-radius: var(--pf-r-sm);
  border: 1px solid color-mix(in srgb, var(--pf-blue) 32%, var(--pf-border));
  background: color-mix(in srgb, var(--pf-blue) 10%, var(--pf-bg));
  color: var(--pf-text); font-size: .82rem; font-weight: 600;
  white-space: nowrap; min-width: 0;
}
.pf-brief-chip b {
  color: color-mix(in srgb, var(--pf-blue) 62%, var(--pf-text));
  font-weight: 800; font-size: .62rem;
  text-transform: uppercase; letter-spacing: .04em;
}
/* friends-gesture lead pill — sits beside the stage pill in the job header.
   Warm terracotta so it reads instantly as "friend lane; price by hand",
   distinct from the stage-colored status pill next to it. */
.pf-stage-friend {
  background: var(--pf-terracotta);
  color: #fff;
}
/* Reorder provenance badge ("Reorder of PF-...") — a neutral OUTLINED link, not a
   status color, so it reads as a clone's lineage without competing with the stage pill. */
.pf-stage-reorder {
  background: transparent;
  border: 1px solid var(--pf-border);
  color: var(--pf-muted);
  text-decoration: none;
}
.pf-stage-reorder:hover { color: var(--pf-text); border-color: var(--pf-muted); }
/* "Reorder this part" disclosure under the header — compact, unobtrusive. */
.pf-reorder { margin: var(--pf-s-1) 0 0; }
.pf-reorder > summary { display: inline-flex; align-items: center; gap: var(--pf-s-1); cursor: pointer; }
.pf-reorder .pf-form-row { margin-top: var(--pf-s-2); }
/* The "Reorder source" panel: a quiet bordered block surfacing the pulled spec +
   the Unlink reverse on a job that's a reorder of another. */
.pf-reorder-source {
  margin: var(--pf-s-2) 0 0;
  padding: var(--pf-s-2) var(--pf-s-3);
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-r-md);
  background: var(--pf-surface);
}
.pf-reorder-source .pf-sub { margin: 0 0 var(--pf-s-1); }
.pf-reorder-source .pf-sub:last-child { margin-bottom: 0; }
/* The Edit toggle sits top-right of the read-state brief; the edit form replaces
   the whole band. */
.pf-brief-edit-trigger { flex: 0 0 auto; margin: 0; }
@media (max-width: 860px) { .pf-job-brief--top { flex-direction: column; } }
/* Risk / use flags row (under the chips) — faint/greyed by default; an ACTIVE flag
   pops in the alert color so only what's raised draws the eye. Now CLICKABLE
   (each is a <button> toggling the flag) so the cursor + hover say "actionable". */
.pf-brief-flags { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; }
.pf-brief-flag {
  padding: 2px var(--pf-s-2); border-radius: var(--pf-r-sm);
  border: 1px solid var(--pf-border); background: transparent;
  color: var(--pf-muted); opacity: .5;
  font-size: .68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .03em; white-space: nowrap;
}
.pf-brief-flag.is-on {
  opacity: 1; color: var(--pf-alert);
  border-color: color-mix(in srgb, var(--pf-alert) 55%, var(--pf-border));
  background: color-mix(in srgb, var(--pf-alert) 15%, transparent);
}
.pf-brief-flag-btn { cursor: pointer; font-family: inherit; }
.pf-brief-flag-btn:hover { opacity: 1; border-color: var(--pf-alert); }
.pf-brief-flag-btn:focus-visible { outline: 2px solid var(--pf-blue); outline-offset: 1px; }

/* Risk flags (left) + the click-to-edit classification tag (bottom-right, v37 —
   replaces the standalone _classification panel). The tag opens a small editor
   that posts to /classification and re-renders #sec-brief. */
.pf-brief-flagsrow { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--pf-s-2); min-height: 1.6rem; }
/* Flags centered across the request body; Classify is lifted out of the flow and
   pinned to the brief card's true bottom-right corner (the card is the containing
   block). The bounded 4-flag set, centered, never reaches the corner tag. */
.pf-brief-flagsrow .pf-brief-flags { justify-content: center; flex: 1 1 100%; }
.pf-brief-classify { position: absolute; right: var(--pf-s-3); bottom: var(--pf-s-2); flex: 0 0 auto; }
.pf-brief-classify > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.pf-brief-classify > summary::-webkit-details-marker { display: none; }
.pf-classify-add {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 1px var(--pf-s-2); border: 1px dashed var(--pf-border);
  border-radius: var(--pf-r-sm); color: var(--pf-muted); font-size: .72rem; font-weight: 700;
}
.pf-classify-add svg { width: 12px; height: 12px; }
.pf-brief-classify > summary:hover .pf-classify-add { border-color: var(--pf-blue); color: var(--pf-text); }
.pf-classify-form {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 20;
  display: grid; gap: var(--pf-s-2); width: 15rem; max-height: 60vh; overflow: auto;
  padding: var(--pf-s-3); border: 1px solid var(--pf-border); border-radius: var(--pf-r-sm);
  background: var(--pf-surface); box-shadow: 0 10px 28px rgba(0,0,0,.45);
}
.pf-classify-form .pf-hint { margin: 0; font-size: .72rem; }
/* Ghost button — quiet secondary action (Edit / Cancel), recedes until hovered. */
.pf-btn.pf-btn-ghost {
  background: transparent;
  border: 1px solid var(--pf-border);
  color: var(--pf-muted);
  font-weight: 700;
}
.pf-btn.pf-btn-ghost:hover {
  border-color: var(--pf-blue);
  color: var(--pf-text);
  background: color-mix(in srgb, var(--pf-blue) 12%, transparent);
}
.pf-brief-decline { text-align: center; color: var(--pf-alert); font-weight: 700; }

/* Subrow: customer/contact (left) + other-moves (right), pulled down just above
   the stage rail so neither floats with dead space under it. */
.pf-job-subrow {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: var(--pf-s-2) var(--pf-s-3);
}
.pf-job-subrow .pf-sub { margin: 0; }

/* ── Other-moves row — quiet RIGHT-justified reverse buttons above the stage rail
   (replaces the old "Other moves" rail card). Ghost style so they recede under the
   primary stage CTA; they brighten on hover. */
.pf-other-moves { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--pf-s-2); }
.pf-other-moves .pf-inline { margin: 0; }
.pf-btn.pf-other-move {
  background: transparent;
  border: 1px solid var(--pf-border);
  color: var(--pf-muted);
  font-size: .8rem;
  font-weight: 700;
  padding: 3px var(--pf-s-3);
}
.pf-btn.pf-other-move:hover {
  border-color: var(--pf-blue);
  color: var(--pf-text);
  background: color-mix(in srgb, var(--pf-blue) 12%, transparent);
}

/* Operator-attached job files (P4a) — constant-core section under the photos. */
.pf-job-files {
  display: grid;
  gap: var(--pf-s-2);
  padding: var(--pf-s-3);
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-r-md);
  background: var(--pf-surface);
  min-width: 0;   /* never let a long filename row expand the rail column */
}
.pf-job-files-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pf-s-3);
}
.pf-file-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--pf-s-1);
  min-width: 0;
}
/* Two-line row in the narrow rail: name (+meta) on top, actions below — so a long
   filename can't force the row (and the whole rail column) wide. */
.pf-file-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px var(--pf-s-3);
  padding: 5px var(--pf-s-3) 6px;   /* slim — name line + centered action boxes */
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-r-sm);
  background: var(--pf-bg);
  min-width: 0;
}
.pf-file-row--print-ready {
  border-color: var(--pf-blue);
  border-left-width: 3px;
}
.pf-file-main {
  display: flex;
  align-items: baseline;
  gap: var(--pf-s-2);
  min-width: 0;
  flex-wrap: nowrap;       /* name + meta stay on one line; the name ellipsis absorbs length */
  flex: 1 1 100%;          /* take the full width so the actions wrap to the line below */
}
.pf-file-star { color: var(--pf-blue); font-weight: 800; flex-shrink: 0; }
/* single line + ellipsis so a long .bgcode/.step name shows its START (most of the
   name) instead of shattering into a tall vertical stack; full name on hover (title). */
.pf-file-name {
  font-weight: 700;
  min-width: 0;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pf-file-meta { color: var(--pf-muted); font-size: .8rem; white-space: nowrap; flex-shrink: 0; }
/* ⓘ info affordance — size/date live in a hover/focus tooltip instead of inline,
   keeping the row narrow. The ⓘ sits at the end of the name line; the tip opens to
   the LEFT (the icon is at the right edge) so it never clips off the card. */
.pf-file-info {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  color: var(--pf-muted);
  cursor: help;
}
.pf-file-info:hover, .pf-file-info:focus-visible { color: var(--pf-text); }
.pf-file-tip {
  position: absolute;
  right: calc(100% + 6px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 40;
  display: none;
  white-space: nowrap;
  padding: 4px 8px;
  border-radius: var(--pf-r-sm);
  background: var(--pf-surface);
  border: 1px solid var(--pf-border);
  color: var(--pf-text);
  font-size: .75rem;
  font-weight: 600;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
}
.pf-file-info:hover .pf-file-tip,
.pf-file-info:focus-within .pf-file-tip { display: block; }
/* Actions sit on their own line (name above), centered, as slim text-sized boxes. */
.pf-file-actions {
  display: flex;
  flex: 1 1 100%;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--pf-s-2);
}
.pf-file-actions > a,
.pf-file-actions form button {
  display: inline-flex;
  align-items: center;
  padding: 1px var(--pf-s-2);
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-r-sm);
  background: var(--pf-bg);
  color: var(--pf-text);
  font-size: .75rem;
  font-weight: 700;
  line-height: 1.5;
  text-decoration: none;
  cursor: pointer;
}
.pf-file-actions > a:hover,
.pf-file-actions form button:hover { border-color: var(--pf-blue); color: var(--pf-blue); }
.pf-file-row--print-ready .pf-file-actions form button[title^="Clear"] {
  border-color: var(--pf-blue); color: var(--pf-blue);
}
/* At-rest uploader: a clean file-selector button shared by the photo + file
   uploaders (matches the request-page aesthetic). The async forms flow as a
   grid (control → progress list below), never flex, so progress rows stack. */
.pf-async-upload {
  display: grid;
  gap: var(--pf-s-2);
  padding-top: var(--pf-s-2);
  border-top: 1px dashed var(--pf-border);
}
.pf-upload-control {
  display: inline-flex;
  align-items: center;
  gap: var(--pf-s-2);
  font-weight: 600;
  font-size: .82rem;
  color: var(--pf-muted);
}
.pf-upload-control input[type="file"] {
  font: inherit;
  color: var(--pf-muted);
  min-height: 0;
  border: 0;
  padding: 0;
  background: none;
}

/* PR-4 (item E) — Files-card / intake "Add photos" uploader overflow fix.
   The native <input type=file> renders a long, unconstrained filename string
   ("No file chosen" / a 200-char path) after the ::file-selector-button, which
   blows out the card width. The async uploader already lists selected files in
   .pf-photo-upload-list, so that native text is redundant. Let the control wrap
   and cap to its container, constrain the input, and hide ONLY the native
   filename text while keeping the styled "Choose Files" button visible (the
   button has its own explicit color rule below, so it survives transparency). */
.pf-upload-control {
  flex-wrap: wrap;
  max-width: 100%;
}
.pf-upload-control input[type="file"] {
  min-width: 0;
  max-width: 100%;
  /* Hide the native filename string; ::file-selector-button keeps its own color. */
  color: transparent;
}
.pf-upload-control input[type="file"]::file-selector-button {
  font: inherit;
  font-weight: 700;
  margin-right: var(--pf-s-2);
  padding: var(--pf-s-2) var(--pf-s-3);
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-r-md);
  background: var(--pf-bg);
  color: var(--pf-text);
  cursor: pointer;
  transition: border-color .12s ease, color .12s ease;
}
.pf-upload-control input[type="file"]::file-selector-button:hover {
  border-color: var(--pf-blue);
  color: var(--pf-blue);
}

/* Shared uploader dropzone (v37): the file-picker control doubles as a drag-drop
   target. .is-dragging is the active affordance; a bare [data-upload-dropzone] on a
   plain form field (portfolio / capture / public intake) gets only the highlight. */
.pf-upload-dropzone {
  width: 100%;
  padding: var(--pf-s-3);
  border: 1px dashed color-mix(in srgb, var(--pf-border) 50%, var(--pf-blue));
  border-radius: var(--pf-r-sm);
  background: color-mix(in srgb, var(--pf-surface) 65%, transparent);
  cursor: pointer;
  transition: border-color .12s ease, background .12s ease;
  /* Stack + center: the card title sits on its own line, the "Choose Files" button
     centers below it, the hint centers under that. */
  justify-content: center;
  text-align: center;
}
/* width:100% forces the line break after the title so the button drops below it. */
.pf-upload-dropzone .pf-upload-label { width: 100%; font-weight: 700; color: var(--pf-text); }
.pf-upload-dropzone .pf-upload-hint { width: 100%; color: var(--pf-muted); font-size: .76rem; font-weight: 600; }
.pf-upload-dropzone:hover { border-color: var(--pf-blue); }
/* (the .is-dragging highlight is cross-surface — lives in tokens.css) */
/* The "Add as" category picker on the job-photo uploader. */
.pf-upload-extra { display: flex; flex-wrap: wrap; gap: var(--pf-s-3); align-items: center; }

/* Skip-email toggle (shared _skip_notification, used by every customer-facing
   action). ON (checked) = SKIP the email → amber/caution; OFF = the customer WILL
   be emailed → neutral. The label text flips with the state via :checked — pure
   CSS, CSP-safe (no inline JS). Replaces a bare native checkbox. */
.pf-skip-notify.pf-toggle {
  display: flex; align-items: center; justify-content: center; gap: var(--pf-s-2);
  cursor: pointer; font-weight: 600; font-size: .82rem; color: var(--pf-text);
}
.pf-toggle-input { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; }
.pf-toggle-track {
  position: relative; flex: none; width: 38px; height: 22px; border-radius: 999px;
  background: color-mix(in srgb, var(--pf-muted) 40%, transparent);
  border: 1px solid var(--pf-border);
  transition: background .15s ease, border-color .15s ease;
}
.pf-toggle-thumb {
  position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 999px;
  background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.4); transition: transform .15s ease;
}
.pf-toggle-input:checked ~ .pf-toggle-track {
  background: var(--pf-warning);
  border-color: color-mix(in srgb, var(--pf-warning) 60%, var(--pf-border));
}
.pf-toggle-input:checked ~ .pf-toggle-track .pf-toggle-thumb { transform: translateX(16px); }
.pf-toggle-input:focus-visible ~ .pf-toggle-track { outline: 2px solid var(--pf-blue); outline-offset: 2px; }
/* state text flips with the toggle */
.pf-toggle-on, .pf-toggle-off { display: none; }
.pf-toggle-input:checked ~ .pf-toggle-text .pf-toggle-on { display: inline; }
.pf-toggle-input:not(:checked) ~ .pf-toggle-text .pf-toggle-off { display: inline; }
.pf-toggle-input:checked ~ .pf-toggle-text { color: var(--pf-warning); font-weight: 700; }
.pf-upload-aslabel {
  display: inline-flex; align-items: center; gap: var(--pf-s-2);
  font-size: .8rem; font-weight: 700; color: var(--pf-muted);
}
.pf-upload-cat {
  padding: 2px var(--pf-s-2); border: 1px solid var(--pf-border); border-radius: var(--pf-r-sm);
  background: var(--pf-surface); color: var(--pf-text); font: inherit; font-size: .8rem;
}
/* Non-gating CAD-render step in the Design/RE rail. */
.pf-cad-step { margin-top: var(--pf-s-3); padding-top: var(--pf-s-3); border-top: 1px dashed var(--pf-border); }
.pf-cad-step .pf-section-h { margin-bottom: var(--pf-s-1); }

/* Command palette (Ctrl/⌘-K) — overlay over the console. */
.pf-palette {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(15, 32, 48, .45);
  display: flex; justify-content: center; align-items: flex-start;
  padding-top: 12vh;
}
.pf-palette[hidden] { display: none; }
.pf-palette-box {
  width: min(640px, 92vw);
  background: var(--pf-surface); color: var(--pf-text);
  border: 1px solid var(--pf-border); border-radius: var(--pf-r-lg);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
  overflow: hidden;
}
.pf-palette-input {
  width: 100%; box-sizing: border-box;
  padding: var(--pf-s-4) var(--pf-s-5);
  border: 0; border-bottom: 1px solid var(--pf-border);
  background: transparent; color: var(--pf-text);
  font-family: var(--pf-font); font-size: 1.1rem;
}
.pf-palette-input:focus { outline: none; }
.pf-palette-results { max-height: 50vh; overflow-y: auto; }
.pf-palette-results ul, .pf-search-results { list-style: none; margin: 0; padding: 0; }
.pf-palette-results li, .pf-search-results li { border-bottom: 1px solid var(--pf-border); }
.pf-palette-results li a, .pf-search-results li a {
  display: block; padding: var(--pf-s-3) var(--pf-s-5);
  color: var(--pf-text); text-decoration: none;
}
.pf-palette-results li a:hover, .pf-palette-results li a:focus { background: var(--pf-bg); }
.pf-palette-results .pf-muted, .pf-palette-hint { padding: var(--pf-s-3) var(--pf-s-5); color: var(--pf-muted); }
/* PR-2 item I: each result is one full-row link — job-id badge · customer ·
   stage chip · muted description, laid out on a single row that wraps the
   description under the rest on narrow widths. */
.pf-search-results li a.pf-search-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pf-s-2) var(--pf-s-3);
}
.pf-search-jobid {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--pf-text);
  white-space: nowrap;
}
.pf-search-customer {
  font-weight: 650;
  color: var(--pf-text);
}
.pf-search-desc {
  flex: 1 1 100%;
  min-width: 0;
  color: var(--pf-muted);
  font-size: .85rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pf-search-desc:empty { display: none; }
.pf-palette-hint { font-size: .8rem; border-top: 1px solid var(--pf-border); margin: 0; }

/* ops console — finance report (Phase 12) */
.pf-fin-asof { color: var(--pf-muted); font-size: .85rem; margin: var(--pf-s-1) 0 var(--pf-s-4); }
.pf-fin-note { color: var(--pf-muted); font-size: .8rem; margin: 0 0 var(--pf-s-3); }
.pf-stats {
  display: grid; gap: var(--pf-s-3);
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  margin: var(--pf-s-3) 0 var(--pf-s-4);
}
.pf-stat {
  background: var(--pf-surface); border: 1px solid var(--pf-border);
  border-left: 3px solid var(--pf-blue); border-radius: var(--pf-r-md);
  padding: var(--pf-s-3) var(--pf-s-4);
}
.pf-stat-accent-warn { border-left-color: var(--pf-warning); }
.pf-stat-accent-ok { border-left-color: var(--pf-success); }
.pf-stat-label { display: block; color: var(--pf-muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .5px; }
.pf-stat-value { display: block; font-size: 1.35rem; font-weight: 700; font-variant-numeric: tabular-nums; margin-top: 2px; }
.pf-stat-sub { display: block; color: var(--pf-muted); font-size: .75rem; }
.pf-chart-wrap { position: relative; height: 260px; margin: 0 0 var(--pf-s-5); }
.pf-table .pf-amt { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pf-bucket-90plus { color: var(--pf-alert); font-weight: 600; }
.pf-bucket-61-90 { color: var(--pf-warning); }

/* operator polish surfaces */
.pf-console-main .pf-page {
  display: grid;
  gap: var(--pf-s-5);
}
.pf-console-main .pf-page-head {
  max-width: none;
  margin: 0;
  padding: 0;
  text-align: left;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--pf-s-4);
  align-items: end;
}
.pf-console-main .pf-page-head h1 {
  margin: 0;
  color: var(--pf-text);
  font-size: 2rem;
  line-height: 1.1;
  letter-spacing: 0;
}
.pf-console-main .pf-page-sub {
  max-width: 52rem;
  margin: var(--pf-s-2) 0 0;
  color: var(--pf-muted);
}
.pf-console-main .pf-page-kicker {
  margin: 0 0 var(--pf-s-1);
  color: var(--pf-terracotta);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}
.pf-home-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(18rem, .8fr);
  gap: var(--pf-s-4);
  align-items: start;
}
.pf-home-queue {
  display: grid;
  gap: var(--pf-s-4);
}
.pf-home-signals {
  display: grid;
  gap: var(--pf-s-3);
  list-style: none;
  margin: 0;
  padding: 0;
}
.pf-home-signal {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--pf-s-3);
  align-items: center;
  padding: var(--pf-s-4);
  border: 1px solid var(--pf-border);
  border-left: 4px solid var(--pf-blue);
  border-radius: var(--pf-r-md);
  background: var(--pf-surface);
}
/* Semantic priority tiers (mapped from the raw 0–9 rank in home.html). The quiet
   tier keeps the default blue accent; only genuine exceptions get red/amber. */
.pf-home-signal.pf-pri-alert { border-left-color: var(--pf-alert); }
.pf-home-signal.pf-pri-warn { border-left-color: var(--pf-warning); }
.pf-home-signal-main {
  display: grid;
  gap: 2px;
  color: var(--pf-text);
  text-decoration: none;
}
.pf-home-signal-title {
  font-weight: 800;
}
.pf-home-signal-detail {
  color: var(--pf-muted);
  font-size: .9rem;
}
.pf-home-map {
  display: grid;
  gap: var(--pf-s-3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.pf-home-card {
  display: grid;
  gap: 2px;
  min-height: 8.5rem;
  padding: var(--pf-s-4);
  border: 1px solid var(--pf-border);
  border-left: 4px solid var(--pf-blue);
  border-radius: var(--pf-r-md);
  background: var(--pf-surface);
  color: var(--pf-text);
  text-decoration: none;
}
.pf-home-card:hover,
.pf-home-card:focus-visible {
  border-color: color-mix(in srgb, var(--pf-blue) 45%, var(--pf-border));
  box-shadow: 0 10px 24px rgba(15,32,48,.08);
  outline: none;
}
.pf-home-card.is-primary { border-left-color: var(--pf-alert); }
.pf-home-card.is-watch { border-left-color: var(--pf-warning); }
.pf-home-card span {
  color: var(--pf-muted);
  font-size: .74rem;
  font-weight: 800;
  text-transform: uppercase;
}
.pf-home-card strong {
  font-size: 1.75rem;
  line-height: 1;
}
.pf-home-card small {
  color: var(--pf-muted);
  font-size: .84rem;
}
.pf-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-r-sm);
  background: var(--pf-surface);
  color: var(--pf-text);
  cursor: pointer;
  text-decoration: none;
}
.pf-icon-btn:hover,
.pf-icon-btn:focus-visible,
.pf-icon-btn.pf-active {
  background: var(--pf-dark);
  color: #fff;
  outline: none;
}
.pf-stage-rail.is-moving .pf-stage-step {
  transition: background .16s ease, border-color .16s ease, color .16s ease;
}
.pf-stage-step.is-stage-pending {
  border-color: var(--pf-terracotta);
  background: color-mix(in srgb, var(--pf-terracotta) 14%, var(--pf-surface));
  color: var(--pf-text);
}
.pf-view-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--pf-s-2);
}
.pf-jobs-results {
  display: grid;
  gap: var(--pf-s-3);
}
:where(.pf-stage-chip, .pf-stage-pill, .pf-job-chip, .pf-jobs-table tbody tr[class*="stage-"], .pf-col[class*="stage-"], .pf-job[class*="stage-"],
       .pf-stage[class*="stage-"], .pf-job-rail[class*="stage-"], .pf-stage-rail[class*="stage-"], .pf-cockpit-side-stage[class*="stage-"]) {
  --stage-color: var(--pf-muted);
}
.stage-new { --stage-color: #2563EB; }
.stage-assessing { --stage-color: #C56630; }
.stage-quoting { --stage-color: #B45309; }
.stage-quote-sent { --stage-color: #7C3AED; }
.stage-deposit-paid { --stage-color: #0F766E; }
.stage-design-re { --stage-color: #0E7490; }
.stage-printing { --stage-color: #004B96; }
.stage-ready { --stage-color: #15803D; }
.stage-need-more-info { --stage-color: #B45309; }
.stage-declined { --stage-color: #B91C1C; }
.stage-lost { --stage-color: #7C3AED; }
.stage-completed { --stage-color: #64748B; }
.stage-unknown { --stage-color: var(--pf-muted); }
.pf-stage-filter {
  flex: 1 1 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--pf-s-2);
  padding-top: var(--pf-s-2);
}
.pf-filter-actions {
  flex: 1 1 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--pf-s-2);
  padding-top: var(--pf-s-1);
}
.pf-filter-select {
  width: min(100%, 15rem);
  text-align: center;
  text-align-last: center;
}
.pf-balance-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--pf-s-2);
  min-height: var(--pf-tap-min);
  padding: var(--pf-s-2) var(--pf-s-3);
  border: 1px solid color-mix(in srgb, var(--pf-warning) 26%, var(--pf-border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--pf-warning) 6%, var(--pf-surface));
  color: var(--pf-text);
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  user-select: none;
}
.pf-balance-toggle input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.pf-balance-toggle-mark {
  position: relative;
  display: inline-flex;
  width: 1.35rem;
  height: 1.35rem;
  border: 1px solid color-mix(in srgb, var(--pf-warning) 46%, var(--pf-border));
  border-radius: 999px;
  background: var(--pf-bg);
  box-shadow: inset 0 0 0 3px var(--pf-bg);
}
.pf-balance-toggle-mark::after {
  content: "";
  position: absolute;
  inset: .28rem;
  border-radius: 999px;
  background: transparent;
}
.pf-balance-toggle:has(input:checked) {
  border-color: var(--pf-warning);
  background: color-mix(in srgb, var(--pf-warning) 14%, var(--pf-surface));
  color: var(--pf-warning);
}
.pf-balance-toggle:has(input:checked) .pf-balance-toggle-mark::after {
  background: var(--pf-warning);
}
.pf-balance-toggle:focus-within {
  outline: 2px solid color-mix(in srgb, var(--pf-warning) 52%, transparent);
  outline-offset: 2px;
}
.pf-stage-chip,
.pf-stage-pill,
.pf-job-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--pf-s-1);
  min-height: 1.55rem;
  padding: 0 var(--pf-s-2);
  border: 1px solid color-mix(in srgb, var(--stage-color) 34%, var(--pf-border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--stage-color) 10%, var(--pf-surface));
  color: var(--stage-color);
  font-size: .72rem;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}
.pf-stage-pill {
  min-height: 2rem;
  cursor: pointer;
  font: inherit;
  font-size: .74rem;
}
.pf-stage-pill:hover,
.pf-stage-pill:focus-visible,
.pf-stage-pill.is-active {
  background: var(--stage-color);
  border-color: var(--stage-color);
  color: #fff;
  outline: none;
}
.pf-stage-pill[data-stage-filter=""] {
  --stage-color: var(--pf-dark);
}
.pf-entity-link,
.pf-entity-link:visited,
.pf-contact-action,
.pf-contact-action:visited,
.pf-job-chip:visited {
  color: var(--pf-blue);
  text-decoration: none;
}
.pf-entity-link {
  display: inline-flex;
  align-items: center;
  gap: var(--pf-s-1);
  max-width: 100%;
  border-radius: var(--pf-r-sm);
  font-weight: 800;
}
.pf-entity-link:hover,
.pf-entity-link:focus-visible,
.pf-contact-action:hover,
.pf-contact-action:focus-visible,
.pf-job-chip:hover,
.pf-job-chip:focus-visible {
  color: var(--pf-dark);
  background: color-mix(in srgb, var(--pf-blue) 8%, transparent);
  outline: none;
}
.pf-jobs-table th a {
  display: inline-flex;
  color: var(--pf-text);
  text-decoration: none;
}
.pf-jobs-table th a:hover,
.pf-jobs-table th a:focus-visible {
  color: var(--pf-blue);
}
.pf-job-cell-id,
.pf-job-cell-main {
  display: block;
  font-weight: 800;
}
.pf-job-cell-id {
  width: fit-content;
  padding: 2px var(--pf-s-2);
  border: 1px solid color-mix(in srgb, var(--pf-blue) 22%, var(--pf-border));
  border-radius: var(--pf-r-sm);
  background: color-mix(in srgb, var(--pf-blue) 6%, var(--pf-surface));
}
.pf-jobs-table tbody tr[class*="stage-"] td:first-child {
  box-shadow: inset 3px 0 0 var(--stage-color);
}
.pf-job-cell-desc {
  display: block;
  max-width: 28rem;
  overflow: hidden;
  color: var(--pf-muted);
  font-size: .82rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pf-badge-material {
  background: color-mix(in srgb, var(--pf-blue) 9%, var(--pf-surface));
  color: var(--pf-blue);
}
.pf-badge-watch {
  background: #FFF7ED;
  color: var(--pf-warning);
}
.pf-table-section-row td {
  background: color-mix(in srgb, var(--pf-muted) 9%, var(--pf-surface)) !important;
  color: var(--pf-muted);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}
.pf-table-section-row span {
  margin-right: var(--pf-s-2);
}
.pf-row-completed td {
  color: color-mix(in srgb, var(--pf-text) 76%, var(--pf-muted));
  background: color-mix(in srgb, var(--pf-muted) 5%, var(--pf-surface)) !important;
}
/* Terminal/voided rows recede (state-cue rule: inactive/terminal → dim, never a
   colored edge). Same muted-text + faint-tint treatment as completed jobs — applies
   to voided deductions AND voided billing rows (.pf-voided payments/documents), and
   to archived customers surfaced via the roster toggle (inactive housekeeping). */
.pf-row-done td,
.pf-row-void td,
.pf-row-archived td,
.pf-voided td {
  color: color-mix(in srgb, var(--pf-text) 76%, var(--pf-muted));
  background: color-mix(in srgb, var(--pf-muted) 5%, var(--pf-surface)) !important;
}
/* Files row state (pf-file-status-{tone}; tones from core.file_registry._TONE):
   success (linked/protected) = healthy, no special treatment;
   neutral (unclaimed/quarantined) = inactive housekeeping → dim/recede;
   warning (expired/orphaned) = low-urgency review → faint amber tint;
   danger (missing/deleted) = the real exception → sparing left-accent + faint
   red tint. Subtle by design — accent only the rows that warrant attention. */
.pf-file-status-neutral td {
  color: color-mix(in srgb, var(--pf-text) 76%, var(--pf-muted));
  background: color-mix(in srgb, var(--pf-muted) 5%, var(--pf-surface));
}
.pf-file-status-warning td {
  background: color-mix(in srgb, var(--pf-warning) 6%, transparent);
}
.pf-file-status-danger td {
  background: color-mix(in srgb, var(--pf-alert) 7%, transparent);
}
.pf-file-status-danger td:first-child {
  box-shadow: inset 3px 0 0 var(--pf-alert);
}
.pf-copy-field {
  display: inline-flex;
  align-items: center;
  gap: var(--pf-s-1);
  max-width: 100%;
}
.pf-copy-box {
  display: flex;
  width: 100%;
}
.pf-copy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-r-sm);
  background: var(--pf-bg);
  color: var(--pf-muted);
  cursor: pointer;
  flex: 0 0 auto;
}
.pf-copy-btn:hover,
.pf-copy-btn:focus-visible,
.pf-copy-btn.is-copied {
  border-color: color-mix(in srgb, var(--pf-success) 34%, var(--pf-border));
  color: var(--pf-success);
  outline: none;
}
/* Hover-revealed solid copy chip (console UI audit Theme 1 — locked affordance).
   Hidden at rest; revealed when its host row/cell is hovered, on keyboard focus
   within the host, or when the chip itself is focused (a11y — WCAG AA). Reuses the
   existing ui.js [data-copy] clipboard handler, which adds .is-copied on success. */
.pf-copy {
  opacity: 0; border: 1.5px solid #3f4956; background: #CDD5DD; color: #3f4956;
  border-radius: 6px; padding: 4px 6px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; vertical-align: middle;
  transition: opacity .1s, background .12s, border-color .12s, color .12s;
}
[data-theme="dark"] .pf-copy { border-color: #D9E0E6; background: #26384A; color: #D9E0E6; }
.pf-copy-host:hover .pf-copy, .pf-copy-host:focus-within .pf-copy, .pf-copy:focus-visible { opacity: 1; }
.pf-copy:hover { background: #DBE7F4; border-color: var(--pf-blue); color: var(--pf-blue); }
[data-theme="dark"] .pf-copy:hover { background: #2D4A63; border-color: var(--pf-console-link); color: var(--pf-console-link); }
.pf-copy.is-copied { border-color: var(--pf-success); color: var(--pf-success); }
/* --pf-success (#0F766E) is too dark on the dark chip fill (2.2:1); a mint reads on
   dark and stays semantically 'success' (~6:1) — WCAG AA non-text contrast. */
[data-theme="dark"] .pf-copy.is-copied { border-color: #34D399; color: #34D399; }
/* Same reason for SUCCESS TEXT on the dark console: --pf-success (#0F766E) is only
   ~3:1 on the dark bg (fails AA 4.5:1). Use the mint for .pf-ok and the is-ok vital
   value (e.g. the "viewed" line + the Quote-viewed vital) so success reads on dark. */
[data-theme="dark"] .pf-console-main :where(.pf-ok, .pf-vital.is-ok .pf-vital-value) { color: #34D399; }
.pf-contact-action {
  display: inline-flex;
  align-items: center;
  gap: var(--pf-s-1);
  max-width: 18rem;
  padding: 2px var(--pf-s-2);
  border-radius: var(--pf-r-sm);
  background: color-mix(in srgb, var(--pf-blue) 6%, transparent);
  font-weight: 700;
}
.pf-contact-action span {
  overflow: hidden;
  text-overflow: ellipsis;
}
.pf-job-chip {
  min-height: 1.75rem;
  font-size: .78rem;
}
.pf-customers-table td {
  vertical-align: middle;
}
.pf-message-card {
  display: grid;
  gap: var(--pf-s-4);
}
.pf-message-card textarea {
  width: 100%;
}
.pf-capture-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(17rem, 22rem);
  gap: var(--pf-s-4);
  align-items: start;
}
.pf-capture-assurance {
  display: grid;
  gap: var(--pf-s-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.pf-capture-assurance li {
  padding: var(--pf-s-3);
  border-left: 3px solid var(--pf-blue);
  border-radius: var(--pf-r-sm);
  background: var(--pf-bg);
}
.pf-pricing-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(15rem, 20rem);
  gap: 20px;
  align-items: start;
}
.pf-pricing-intro { max-width: 72ch; margin: 0 0 18px; color: var(--pf-muted); font-size: 12.5px; line-height: 1.5; }
.pf-pricing-form {
  display: grid;
  gap: 20px;
}
.pf-pricing-group {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}
.pf-pricing-group.is-changed { border: 0; }
.pf-pricing-group legend {
  width: 100%; padding: 0; margin: 0 0 12px;
}
.pf-pricing-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
}
.pf-pricing-card {
  display: grid;
  gap: 12px;
  padding: 14px 15px;
  border: 1px solid var(--pf-border);
  border-radius: var(--r-md);
  background: var(--pf-bg);
  box-shadow: var(--sh1);
}
.pf-pricing-card.is-changed {
  border-color: color-mix(in srgb, var(--pf-warning) 48%, var(--pf-border));
  background: color-mix(in srgb, var(--pf-warning) 4%, var(--pf-bg));
}
.pf-pricing-card-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: start;
}
.pf-pricing-card label {
  display: grid;
  gap: 3px;
  color: var(--pf-text);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
}
.pf-pricing-card code {
  color: var(--pf-muted);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
}
.pf-pricing-input-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}
.pf-pricing-control { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; min-width: 0; }
.pf-pricing-control input {
  min-height: var(--pf-tap-min);
  padding: var(--pf-s-2) var(--pf-s-3);
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-r-sm);
  background: var(--pf-bg);
  color: var(--pf-text);
  font: inherit;
  font-variant-numeric: tabular-nums;
  min-width: 0;
}
.pf-pricing-unit { color: var(--pf-muted); font-family: var(--mono); font-size: 11px; white-space: nowrap; }
.pf-pricing-reset[hidden] { display: none; }
.pf-pricing-default {
  color: var(--pf-muted);
  font-size: 11px;
}
.pf-pricing-save {
  position: sticky;
  top: var(--pf-s-4);
  display: grid;
  gap: var(--pf-s-3);
  padding: var(--pf-s-4);
  border: 1px solid var(--pf-border);
  border-left: 3px solid var(--pf-blue);
  border-radius: var(--pf-r-md);
  background: var(--pf-surface);
}
.pf-pricing-save .pf-btn {
  width: 100%;
}
.pf-pricing-change-count { margin: 0; color: var(--pf-muted); font-size: 12px; line-height: 1.45; }
@media (max-width: 860px) {
  .pf-pricing-shell { grid-template-columns: 1fr; }
  .pf-pricing-save { position: static; }
}

/* ops console - uploaded files manager */
.pf-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.pf-files-page .pf-page-actions form {
  margin: 0;
}
.pf-files-summary {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--pf-s-3);
}
.pf-files-stat {
  display: grid;
  gap: 2px;
  min-height: 6.4rem;
  padding: var(--pf-s-3);
  border: 1px solid var(--pf-border);
  border-left: 3px solid var(--pf-blue);
  border-radius: var(--pf-r-sm);
  background: var(--pf-surface);
}
.pf-files-stat.is-watch {
  border-left-color: var(--pf-warning);
}
.pf-files-stat.is-protected {
  border-left-color: var(--pf-success);
}
.pf-files-stat span {
  color: var(--pf-muted);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}
.pf-files-stat strong {
  overflow-wrap: anywhere;
  color: var(--pf-text);
  font-size: 1.35rem;
  line-height: 1.05;
}
.pf-files-stat small {
  color: var(--pf-muted);
  font-size: .8rem;
}
.pf-files-browser {
  display: grid;
  gap: var(--pf-s-4);
}
.pf-files-browser.htmx-request {
  opacity: .72;
}
.pf-files-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pf-s-2);
  color: var(--pf-muted);
  font-size: .88rem;
}
.pf-files-breadcrumb a {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding: 0 var(--pf-s-2);
  border-radius: var(--pf-r-sm);
  color: var(--pf-blue);
  font-weight: 800;
  text-decoration: none;
}
.pf-files-breadcrumb a:hover,
.pf-files-breadcrumb a:focus-visible,
.pf-files-breadcrumb a[aria-current="page"] {
  background: color-mix(in srgb, var(--pf-blue) 8%, transparent);
  color: var(--pf-dark);
  outline: none;
}
.pf-files-folders {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: var(--pf-s-3);
}
.pf-files-folder {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--pf-s-1) var(--pf-s-2);
  align-items: center;
  min-height: 4.6rem;
  padding: var(--pf-s-3);
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-r-sm);
  background: var(--pf-surface);
  color: var(--pf-text);
  text-decoration: none;
}
.pf-files-folder svg {
  color: var(--pf-blue);
}
.pf-files-folder span {
  overflow: hidden;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pf-files-folder small {
  grid-column: 2;
  color: var(--pf-muted);
  font-size: .78rem;
}
.pf-files-folder:hover,
.pf-files-folder:focus-visible {
  border-color: color-mix(in srgb, var(--pf-blue) 42%, var(--pf-border));
  box-shadow: 0 10px 22px rgba(15,32,48,.08);
  outline: none;
}
.pf-files-retention {
  display: grid;
  gap: var(--pf-s-3);
  padding: var(--pf-s-4);
  border: 1px solid var(--pf-border);
  border-left: 3px solid var(--pf-success);
  border-radius: var(--pf-r-md);
  background: var(--pf-surface);
}
.pf-files-retention-head {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--pf-s-3);
  align-items: start;
}
.pf-files-retention-head h2 {
  margin: 0;
  color: var(--pf-text);
  font-size: 1.15rem;
  line-height: 1.15;
}
.pf-files-retention-head p {
  margin: var(--pf-s-1) 0 0;
}
.pf-files-prune-preview {
  display: grid;
  gap: 2px;
  padding: var(--pf-s-3);
  border: 1px solid color-mix(in srgb, var(--pf-warning) 28%, var(--pf-border));
  border-radius: var(--pf-r-sm);
  background: color-mix(in srgb, var(--pf-warning) 7%, var(--pf-bg));
}
.pf-files-prune-preview span,
.pf-files-prune-preview small,
.pf-files-retention-meta {
  color: var(--pf-muted);
  font-size: .78rem;
}
.pf-files-prune-preview span {
  font-weight: 900;
  text-transform: uppercase;
}
.pf-files-prune-preview strong {
  color: var(--pf-warning);
  font-size: 1.65rem;
  line-height: 1;
}
.pf-files-retention-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pf-s-2);
}
.pf-files-retention-meta span {
  display: inline-flex;
  align-items: center;
  gap: var(--pf-s-1);
  min-height: 1.75rem;
  padding: 0 var(--pf-s-2);
  border: 1px solid var(--pf-border);
  border-radius: 999px;
  background: var(--pf-bg);
}
.pf-files-retention-meta strong {
  color: var(--pf-text);
}
.pf-files-retention-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--pf-s-3);
  align-items: end;
}
.pf-files-retention-form label {
  display: grid;
  gap: var(--pf-s-1);
  color: var(--pf-muted);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}
.pf-files-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--pf-s-2);
  padding-bottom: var(--pf-s-1);
  border-bottom: 1px solid var(--pf-border);
}
.pf-files-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--pf-s-2);
  min-height: 2.35rem;
  padding: 0 var(--pf-s-3);
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-r-sm);
  background: var(--pf-surface);
  color: var(--pf-text);
  font-size: .88rem;
  font-weight: 800;
  text-decoration: none;
}
.pf-files-tab strong {
  min-width: 1.45rem;
  padding: 2px var(--pf-s-1);
  border-radius: 999px;
  background: color-mix(in srgb, var(--pf-muted) 12%, transparent);
  color: var(--pf-muted);
  font-size: .72rem;
  text-align: center;
}
.pf-files-tab:hover,
.pf-files-tab:focus-visible,
.pf-files-tab.is-active {
  border-color: var(--pf-blue);
  color: var(--pf-blue);
  outline: none;
}
.pf-files-tab.is-active {
  background: color-mix(in srgb, var(--pf-blue) 7%, var(--pf-surface));
}
.pf-files-filter {
  display: grid;
  grid-template-columns: minmax(14rem, 1.5fr) repeat(4, minmax(9rem, 1fr)) auto;
  gap: var(--pf-s-3);
  align-items: end;
  padding: var(--pf-s-3);
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-r-md);
  background: var(--pf-surface);
}
.pf-files-filter label,
.pf-files-delete-confirm {
  display: grid;
  gap: var(--pf-s-1);
  min-width: 0;
  color: var(--pf-muted);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}
.pf-files-filter-actions,
.pf-files-bulk-actions,
.pf-files-row-actions,
.pf-files-drawer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pf-s-2);
  align-items: center;
}
.pf-files-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 24rem);
  gap: var(--pf-s-4);
  align-items: start;
}
.pf-files-layout.is-single {
  grid-template-columns: minmax(0, 1fr);
}
.pf-files-work {
  display: grid;
  gap: var(--pf-s-3);
  min-width: 0;
}
.pf-files-side {
  position: sticky;
  top: var(--pf-s-4);
  display: grid;
  gap: var(--pf-s-4);
  min-width: 0;
}
.pf-files-storage {
  display: grid;
  gap: var(--pf-s-3);
  padding: var(--pf-s-4);
  border: 1px solid var(--pf-border);
  border-left: 3px solid var(--pf-blue);
  border-radius: var(--pf-r-md);
  background: var(--pf-surface);
}
.pf-files-side-head h2 {
  margin: 0;
  color: var(--pf-text);
  font-size: 1.15rem;
  line-height: 1.15;
}
.pf-files-storage meter {
  width: 100%;
  height: .95rem;
}
.pf-files-storage-split,
.pf-files-upload-total,
.pf-files-kind-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--pf-s-2);
  align-items: center;
}
.pf-files-storage-split,
.pf-files-kind-row small,
.pf-files-upload-total span {
  color: var(--pf-muted);
  font-size: .8rem;
}
.pf-files-upload-total {
  padding: var(--pf-s-3);
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-r-sm);
  background: var(--pf-bg);
}
.pf-files-upload-total strong {
  color: var(--pf-text);
  font-size: 1.15rem;
}
.pf-files-kind-list {
  display: grid;
  gap: var(--pf-s-2);
}
.pf-files-kind-row {
  grid-template-columns: minmax(0, 1fr) auto auto;
  padding: var(--pf-s-2) 0;
  border-top: 1px solid var(--pf-border);
}
.pf-files-kind-row span {
  overflow: hidden;
  color: var(--pf-text);
  font-weight: 800;
  text-overflow: ellipsis;
  text-transform: capitalize;
  white-space: nowrap;
}
.pf-files-kind-row strong {
  color: var(--pf-blue);
  font-variant-numeric: tabular-nums;
}
.pf-files-bulk {
  display: flex;
  justify-content: space-between;
  gap: var(--pf-s-3);
  align-items: center;
  padding: var(--pf-s-3);
  border: 1px solid color-mix(in srgb, var(--pf-warning) 26%, var(--pf-border));
  border-radius: var(--pf-r-md);
  background: color-mix(in srgb, var(--pf-warning) 6%, var(--pf-surface));
}
.pf-files-bulk > div:first-child {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.pf-files-bulk strong {
  color: var(--pf-text);
}
.pf-files-bulk span {
  color: var(--pf-muted);
  font-size: .84rem;
}
.pf-files-bulk form {
  display: inline-flex;
  gap: var(--pf-s-2);
  align-items: end;
  margin: 0;
}
.pf-files-bulk .pf-btn:disabled,
.pf-files-row-actions .pf-btn:disabled {
  cursor: not-allowed;
  opacity: .45;
}
.pf-files-delete-confirm {
  width: 8.5rem;
}
.pf-files-delete-confirm code {
  color: var(--pf-alert);
  font-size: .72rem;
}
.pf-files-table-wrap {
  background: var(--pf-surface);
}
.pf-files-table td {
  vertical-align: middle;
}
.pf-files-select-col {
  width: 2.6rem;
  text-align: center;
}
.pf-files-select-col input {
  width: 1.05rem;
  height: 1.05rem;
  accent-color: var(--pf-blue);
}
.pf-files-lock {
  display: inline-flex;
  color: var(--pf-muted);
}
.pf-files-name {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: var(--pf-s-2);
  align-items: center;
  min-width: 14rem;
}
.pf-files-preview-link {
  position: relative;
  display: block;
  width: 3rem;
  height: 3rem;
  color: inherit;
  text-decoration: none;
}
.pf-files-name img,
.pf-files-thumb {
  width: 3rem;
  height: 3rem;
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-r-sm);
  background: var(--pf-bg);
}
.pf-files-name img {
  object-fit: cover;
}
.pf-files-thumb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--pf-muted);
}
.pf-files-file-link,
.pf-files-name small {
  display: block;
  max-width: 22rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pf-files-file-link {
  color: var(--pf-blue);
  font-weight: 900;
  text-decoration: none;
}
.pf-files-file-link:hover,
.pf-files-file-link:focus-visible {
  color: var(--pf-dark);
  outline: none;
  text-decoration: underline;
}
.pf-files-name small {
  color: var(--pf-muted);
  font-size: .78rem;
}
.pf-files-hover-preview {
  pointer-events: none;
  position: absolute;
  left: calc(100% + var(--pf-s-3));
  top: 50%;
  z-index: 20;
  display: none;
  width: min(34rem, calc(100vw - 6rem));
  max-width: 34rem;
  padding: var(--pf-s-2);
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-r-md);
  background: var(--pf-surface);
  box-shadow: 0 18px 42px rgba(15,32,48,.22);
  transform: translateY(-50%);
}
.pf-files-hover-preview img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 30rem;
  border: 0;
  border-radius: var(--pf-r-sm);
  object-fit: contain;
}
.pf-files-preview-link:hover .pf-files-hover-preview,
.pf-files-preview-link:focus-visible .pf-files-hover-preview {
  display: block;
}
.pf-files-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.55rem;
  padding: 0 var(--pf-s-2);
  border: 1px solid var(--pf-border);
  border-radius: 999px;
  background: var(--pf-bg);
  font-size: .72rem;
  font-weight: 900;
  white-space: nowrap;
}
.pf-tone-success {
  border-color: color-mix(in srgb, var(--pf-success) 34%, var(--pf-border));
  background: color-mix(in srgb, var(--pf-success) 9%, var(--pf-surface));
  color: var(--pf-success);
}
.pf-tone-warning {
  border-color: color-mix(in srgb, var(--pf-warning) 38%, var(--pf-border));
  background: color-mix(in srgb, var(--pf-warning) 10%, var(--pf-surface));
  color: var(--pf-warning);
}
.pf-tone-danger {
  border-color: color-mix(in srgb, var(--pf-alert) 38%, var(--pf-border));
  background: color-mix(in srgb, var(--pf-alert) 8%, var(--pf-surface));
  color: var(--pf-alert);
}
.pf-tone-neutral {
  color: var(--pf-muted);
}
.pf-files-row-actions {
  flex-wrap: nowrap;
}
.pf-files-row-actions form {
  margin: 0;
}
.pf-files-details {
  position: relative;
}
.pf-files-details summary {
  min-height: 2.5rem;
  padding: .55rem var(--pf-s-2);
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-r-sm);
  background: var(--pf-surface);
  color: var(--pf-text);
  cursor: pointer;
  font-size: .82rem;
  font-weight: 800;
  list-style: none;
  white-space: nowrap;
}
.pf-files-details summary::-webkit-details-marker {
  display: none;
}
.pf-files-details dl {
  position: absolute;
  right: 0;
  z-index: 4;
  display: grid;
  gap: var(--pf-s-2);
  width: min(22rem, calc(100vw - 3rem));
  margin: var(--pf-s-2) 0 0;
  padding: var(--pf-s-3);
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-r-md);
  background: var(--pf-surface);
  box-shadow: 0 18px 42px rgba(15,32,48,.16);
}
.pf-files-drawer {
  position: sticky;
  top: var(--pf-s-4);
  display: grid;
  gap: var(--pf-s-3);
  padding: var(--pf-s-4);
  border: 1px solid var(--pf-border);
  border-left: 3px solid var(--pf-blue);
  border-radius: var(--pf-r-md);
  background: var(--pf-surface);
}
.pf-files-drawer h2 {
  margin: 0;
  font-size: 1.05rem;
}
.pf-files-drawer dl,
.pf-files-details dl {
  grid-template-columns: minmax(6.5rem, auto) minmax(0, 1fr);
}
.pf-files-drawer dt,
.pf-files-details dt {
  color: var(--pf-muted);
  font-size: .72rem;
  font-weight: 900;
  text-transform: uppercase;
}
.pf-files-drawer dd,
.pf-files-details dd {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}
.pf-files-drawer code,
.pf-files-details code {
  color: var(--pf-text);
  font-size: .78rem;
}
.pf-files-drawer-preview,
.pf-files-drawer-empty {
  display: grid;
  place-items: center;
  min-height: 8rem;
  border: 1px dashed var(--pf-border);
  border-radius: var(--pf-r-md);
  background: var(--pf-bg);
  color: var(--pf-muted);
  text-align: center;
}
.pf-files-drawer-preview img {
  width: 100%;
  max-height: 14rem;
  object-fit: contain;
}
.pf-files-drawer-empty {
  gap: var(--pf-s-2);
  padding: var(--pf-s-4);
}
.pf-files-drawer-empty p {
  margin: 0;
}

@media (max-width: 860px) {
  .pf-console-main .pf-page-head {
    grid-template-columns: 1fr;
  }
  .pf-files-summary,
  .pf-files-folders,
  .pf-files-filter,
  .pf-files-layout,
  .pf-files-retention-head,
  .pf-files-retention-form {
    grid-template-columns: 1fr;
  }
  .pf-files-bulk {
    align-items: stretch;
    flex-direction: column;
  }
  .pf-files-bulk-actions,
  .pf-files-bulk form {
    align-items: stretch;
    flex-direction: column;
  }
  .pf-files-delete-confirm {
    width: 100%;
  }
  .pf-files-drawer {
    position: static;
  }
  .pf-files-side {
    position: static;
  }
  .pf-files-hover-preview {
    display: none !important;
  }
}

/* intake capture + draft review (Arc B) */
.pf-field { display: block; margin: 0 0 var(--pf-s-3); }
.pf-field-label { display: block; color: var(--pf-muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 2px; }
.pf-input { width: 100%; box-sizing: border-box; padding: var(--pf-s-2) var(--pf-s-3); border: 1px solid var(--pf-border); border-radius: var(--pf-r-sm); background: var(--pf-surface); color: inherit; font: inherit; }
.pf-field-uncertain .pf-input { border-color: var(--pf-warning); background: color-mix(in srgb, var(--pf-warning) 7%, transparent); }
.pf-uncertain-badge { display: inline-block; margin-left: var(--pf-s-2); color: var(--pf-warning); font-size: .68rem; font-weight: 600; text-transform: none; letter-spacing: 0; }
.pf-form-actions { display: flex; align-items: center; gap: var(--pf-s-3); margin-top: var(--pf-s-4); }
.pf-flags { list-style: none; margin: var(--pf-s-2) 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--pf-s-2); }
.pf-flag { background: color-mix(in srgb, var(--pf-warning) 12%, transparent); color: var(--pf-warning); border-radius: var(--pf-r-sm); padding: 2px var(--pf-s-2); font-size: .72rem; }
/* Unified page always lists all four use-flags (yes/no); a "no" must recede so the
   amber is reserved for an actual risk hit (signal budget / calm tech). */
.pf-flag.pf-flag-off { background: var(--pf-bg); color: var(--pf-muted); }
.pf-draft-images { display: grid; gap: var(--pf-s-3); grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); margin: var(--pf-s-3) 0; }
.pf-image-tag { text-align: center; }
.pf-image-tags { margin-top: var(--pf-s-1); }
.pf-tag-part_photo { background: var(--pf-success); }
.pf-tag-chat_screenshot { background: var(--pf-muted); }
.pf-discard-form { margin-top: var(--pf-s-4); }


/* Console-only dark-mode visibility pass. Public pages keep their light theme. */
[data-theme="dark"] .pf-console-body {
  --pf-console-link: #8CCBFF;
  --pf-console-link-hover: #D8EEFF;
  --pf-console-success: #5EEAD4;
  --pf-console-warning: #FBBF77;
  --pf-console-alert: #FCA5A5;
  --pf-console-accent: #F0A16C;
  --pf-console-neutral: #C7D2DE;
  --pf-console-focus: #9ED1FF;
}

[data-theme="dark"] .pf-console-main :where(
  a:not(.pf-btn):not(.pf-cta),
  .pf-link,
  .pf-job-actions .pf-link,
  .pf-cockpit-nav .pf-link,
  .pf-cockpit-tabs .pf-link,
  .pf-job-id,
  .pf-job-id a,
  .pf-entity-link,
  .pf-contact-action,
  .pf-contact-action:visited,
  .pf-job-chip:visited,
  .pf-files-breadcrumb a,
  .pf-files-file-link,
  .pf-add summary,
  .pf-breakdown .pf-customer td,
  .pf-pill-sent,
  .pf-badge-material,
  .pf-files-tab.is-active,
  .pf-files-tab.is-active span,
  .pf-files-kind-row strong,
  .pf-pricing-group legend
) {
  color: var(--pf-console-link);
}

[data-theme="dark"] .pf-console-main :where(
  .pf-link,
  .pf-entity-link,
  .pf-contact-action,
  .pf-job-chip,
  .pf-files-breadcrumb a,
  .pf-files-file-link,
  .pf-icon-btn,
  .pf-home-card,
  .pf-files-folder,
  .pf-files-tab,
  .pf-copy-btn
):focus-visible {
  outline: 2px solid color-mix(in srgb, var(--pf-console-focus) 70%, transparent);
  outline-offset: 2px;
}

[data-theme="dark"] .pf-console-main :where(
  .pf-entity-link:hover,
  .pf-entity-link:focus-visible,
  .pf-contact-action:hover,
  .pf-contact-action:focus-visible,
  .pf-job-chip:hover,
  .pf-job-chip:focus-visible,
  .pf-files-breadcrumb a:hover,
  .pf-files-breadcrumb a:focus-visible,
  .pf-files-breadcrumb a[aria-current="page"],
  .pf-files-file-link:hover,
  .pf-files-file-link:focus-visible
) {
  color: var(--pf-console-link-hover);
  background: color-mix(in srgb, var(--pf-console-link) 12%, transparent);
}

[data-theme="dark"] .pf-console-main :where(
  .pf-ok,
  .pf-job-quote,
  .pf-badge-good,
  .pf-badge-delivered,
  .pf-pill-delivered,
  .pf-pill-done,
  .pf-tone-success
) {
  color: var(--pf-console-success);
}

[data-theme="dark"] .pf-console-main :where(
  .pf-badge-watch,
  .pf-badge-pending,
  .pf-badge-changed,
  .pf-pill-failed,
  .pf-bucket-61-90,
  .pf-tone-warning,
  .pf-balance-toggle,
  .pf-balance-toggle:has(input:checked),
  .pf-files-prune-preview strong
) {
  color: var(--pf-console-warning);
}

[data-theme="dark"] .pf-console-main :where(
  .pf-error,
  .pf-danger,
  .pf-btn-danger,
  .pf-table .pf-err,
  .pf-bucket-90plus,
  .pf-badge-blocked,
  .pf-badge-failed,
  .pf-badge-dead,
  .pf-tone-danger,
  .pf-files-delete-confirm code
) {
  color: var(--pf-console-alert);
}

[data-theme="dark"] .pf-console-main :where(.pf-page-kicker, .pf-cockpit .pf-eyebrow) {
  color: var(--pf-console-accent);
}

[data-theme="dark"] .pf-console-main :where(.pf-error) {
  background: color-mix(in srgb, var(--pf-console-alert) 12%, var(--pf-surface));
  border-left-color: var(--pf-console-alert);
}

/* Persistent app-wide error banner (the ?err= swallow fix). Sits at the top of
   <main> so a failed-POST redirect's message is visible even on pages with no
   inline error render. Manual-dismiss only — it does NOT auto-fade like the
   success toast (ui.js leaves the auto-timer to [data-toast]). */
.pf-banner {
  display: flex; align-items: flex-start; gap: .75rem;
  margin: 0 0 1rem; padding: .7rem .9rem;
  border-radius: 8px; font-size: .92rem; line-height: 1.4;
}
.pf-banner-msg { flex: 1; }
.pf-banner-x {
  background: none; border: 0; font-size: 1.25rem; line-height: 1;
  cursor: pointer; color: inherit; opacity: .6; padding: 0 .15rem;
}
.pf-banner-x:hover { opacity: 1; }
.pf-banner-error { background: #FEF2F2; border-left: 4px solid #B91C1C; color: #7F1D1D; }
[data-theme="dark"] .pf-banner-error {
  background: color-mix(in srgb, var(--pf-console-alert) 14%, var(--pf-surface));
  border-left-color: var(--pf-console-alert);
  color: #fecaca;
}

[data-theme="dark"] .pf-console-main :where(.pf-badge, .pf-pill, .pf-files-status) {
  background: color-mix(in srgb, var(--pf-muted) 9%, var(--pf-surface));
}

[data-theme="dark"] .pf-console-main :where(.pf-badge-watch) {
  background: color-mix(in srgb, var(--pf-console-warning) 12%, var(--pf-surface));
}

[data-theme="dark"] .pf-console-main :where(.pf-tag) {
  background: color-mix(in srgb, var(--pf-terracotta) 72%, #000);
  color: #fff;
}

[data-theme="dark"] .pf-console-main :where(.pf-tone-success) {
  background: color-mix(in srgb, var(--pf-console-success) 11%, var(--pf-surface));
  border-color: color-mix(in srgb, var(--pf-console-success) 42%, var(--pf-border));
}

[data-theme="dark"] .pf-console-main :where(.pf-tone-warning) {
  background: color-mix(in srgb, var(--pf-console-warning) 12%, var(--pf-surface));
  border-color: color-mix(in srgb, var(--pf-console-warning) 44%, var(--pf-border));
}

[data-theme="dark"] .pf-console-main :where(.pf-tone-danger) {
  background: color-mix(in srgb, var(--pf-console-alert) 11%, var(--pf-surface));
  border-color: color-mix(in srgb, var(--pf-console-alert) 44%, var(--pf-border));
}

[data-theme="dark"] .pf-console-main .pf-files-breadcrumb a[aria-current="page"] {
  background: color-mix(in srgb, var(--pf-console-link) 12%, transparent);
  color: var(--pf-console-link-hover);
}

[data-theme="dark"] .pf-console-main :where(.pf-icon-btn:hover, .pf-icon-btn:focus-visible, .pf-icon-btn.pf-active) {
  background: color-mix(in srgb, var(--pf-console-link) 18%, var(--pf-surface));
  border-color: color-mix(in srgb, var(--pf-console-link) 48%, var(--pf-border));
  color: var(--pf-console-link-hover);
}

[data-theme="dark"] .pf-console-main :where(.pf-home-card:hover, .pf-home-card:focus-visible, .pf-files-folder:hover, .pf-files-folder:focus-visible) {
  border-color: color-mix(in srgb, var(--pf-console-link) 48%, var(--pf-border));
  box-shadow: 0 14px 28px rgba(0,0,0,.24);
}

[data-theme="dark"] .pf-console-main :where(
  .stage-new,
  .stage-assessing,
  .stage-quoting,
  .stage-quote-sent,
  .stage-deposit-paid,
  .stage-design-re,
  .stage-printing,
  .stage-ready,
  .stage-need-more-info,
  .stage-declined,
  .stage-completed,
  .stage-unknown
) {
  --stage-color: var(--pf-console-neutral);
}

[data-theme="dark"] .pf-console-main .stage-new { --stage-color: #8CCBFF; }
[data-theme="dark"] .pf-console-main .stage-assessing { --stage-color: #F0A16C; }
[data-theme="dark"] .pf-console-main .stage-quoting { --stage-color: #FBBF77; }
[data-theme="dark"] .pf-console-main .stage-quote-sent { --stage-color: #C4B5FD; }
[data-theme="dark"] .pf-console-main .stage-deposit-paid { --stage-color: #5EEAD4; }
[data-theme="dark"] .pf-console-main .stage-design-re { --stage-color: #67E8F9; }
[data-theme="dark"] .pf-console-main .stage-printing { --stage-color: #93C5FD; }
[data-theme="dark"] .pf-console-main .stage-ready { --stage-color: #86EFAC; }
[data-theme="dark"] .pf-console-main .stage-need-more-info { --stage-color: #FBBF77; }
[data-theme="dark"] .pf-console-main .stage-declined { --stage-color: #FCA5A5; }
[data-theme="dark"] .pf-console-main .stage-completed { --stage-color: #CBD5E1; }

[data-theme="dark"] .pf-console-main :where(.pf-stage-chip, .pf-stage-pill, .pf-job-chip) {
  background: color-mix(in srgb, var(--stage-color) 14%, var(--pf-surface));
  border-color: color-mix(in srgb, var(--stage-color) 45%, var(--pf-border));
  color: var(--stage-color);
}

[data-theme="dark"] .pf-console-main .pf-stage-pill[data-stage-filter=""] {
  --stage-color: var(--pf-console-neutral);
}

[data-theme="dark"] .pf-console-main :where(.pf-stage-pill:hover, .pf-stage-pill:focus-visible, .pf-stage-pill.is-active) {
  background: color-mix(in srgb, var(--stage-color) 24%, var(--pf-surface));
  color: var(--stage-color);
  box-shadow: inset 0 -2px 0 var(--stage-color);
}

[data-theme="dark"] .pf-console-main :where(.pf-table-section-row td) {
  background: color-mix(in srgb, var(--pf-muted) 14%, var(--pf-surface)) !important;
  color: var(--pf-console-neutral);
}

[data-theme="dark"] .pf-console-main :where(.pf-row-completed td) {
  color: color-mix(in srgb, var(--pf-text) 78%, var(--pf-muted));
  background: color-mix(in srgb, var(--pf-muted) 8%, var(--pf-surface)) !important;
}

/* dark variants for the P1b row-state cues (mirror .pf-row-completed's dark tint) */
[data-theme="dark"] .pf-console-main :where(.pf-row-done td, .pf-row-void td, .pf-row-archived td, .pf-voided td) {
  color: color-mix(in srgb, var(--pf-text) 78%, var(--pf-muted));
  background: color-mix(in srgb, var(--pf-muted) 8%, var(--pf-surface)) !important;
}
[data-theme="dark"] .pf-console-main :where(.pf-file-status-neutral td) {
  color: color-mix(in srgb, var(--pf-text) 78%, var(--pf-muted));
  background: color-mix(in srgb, var(--pf-muted) 8%, var(--pf-surface));
}
[data-theme="dark"] .pf-console-main :where(.pf-file-status-warning td) {
  background: color-mix(in srgb, var(--pf-console-warning) 9%, transparent);
}
[data-theme="dark"] .pf-console-main :where(.pf-file-status-danger td) {
  background: color-mix(in srgb, var(--pf-console-alert) 10%, transparent);
}
[data-theme="dark"] .pf-console-main .pf-file-status-danger td:first-child {
  box-shadow: inset 3px 0 0 var(--pf-console-alert);
}

[data-theme="dark"] .pf-console-main :where(.pf-files-hover-preview, .pf-files-details dl) {
  box-shadow: 0 18px 42px rgba(0,0,0,.32);
}

/* ══ Unified job page — "packed Variant A" density pass ════════════════════════
   Shawn wants the dossier packed like the concept: smaller type, tight padding,
   chip/KPI reads, short form controls. Scoped to .pf-job-unified so the rest of
   the console is untouched; token-based so light + dark both hold. Placed last so
   it wins by source order. */
.pf-job-unified { gap: var(--pf-s-2); font-size: .82rem; }
.pf-job-grid,
.pf-job-core,
.pf-job-media,
.pf-job-support { gap: var(--pf-s-2); }

/* Tighter cards everywhere in the core. */
.pf-job-unified .pf-job-brief,
.pf-job-unified .pf-job-flags,
.pf-job-unified .pf-job-customer,
.pf-job-unified .pf-job-files,
.pf-job-unified .pf-intake-thumbs,
.pf-job-unified .pf-rail-panel { padding: var(--pf-s-2) var(--pf-s-3); gap: var(--pf-s-2); }

/* Section headers: small caps, minimal margin. */
.pf-job-unified .pf-section-h { font-size: .68rem; margin: 0 0 2px; }

/* Short, dense form controls in the LEFT core (override the 44px touch min — this
   is a desktop power surface). Rail controls keep their normal size. */
.pf-job-core .pf-form,
.pf-job-core .pf-form-row { gap: var(--pf-s-2); }
.pf-job-core .pf-form input,
.pf-job-core .pf-form select,
.pf-job-core .pf-form textarea,
.pf-job-core .pf-form-row input,
.pf-job-core .pf-form-row select,
.pf-job-core .pf-input {
  min-height: 1.9rem;
  padding: 3px 8px;
  font-size: .78rem;
}
.pf-job-core .pf-form textarea { min-height: 2.6rem; }
.pf-job-core .pf-form label,
.pf-job-core .pf-form-row label { font-size: .66rem; gap: 3px; font-weight: 700; }
.pf-job-core .pf-btn,
.pf-job-core .pf-cta { min-height: 1.9rem; padding: 0 var(--pf-s-3); font-size: .78rem; }

/* Risk / use flags → inline chips (was a bulleted list + paragraph). */
.pf-job-flags .pf-flags { display: flex; flex-wrap: wrap; gap: 5px; list-style: none; margin: 0; padding: 0; }
.pf-job-flags .pf-flag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 8px; border: 1px solid var(--pf-border); border-radius: 999px;
  background: var(--pf-surface); color: var(--pf-text); font-size: .68rem; font-weight: 700;
}
.pf-job-flags .pf-flag-off { color: var(--pf-muted); }
.pf-job-flags .pf-muted { font-size: .68rem; line-height: 1.35; }

/* Billing: drop the duplicate inner heading (the collapse summary already says
   "Billing"), tighten the summary line + ledger table. */
.pf-job-collapse #billing { display: none; }
.pf-job-collapse > summary { padding: var(--pf-s-2) 0; font-size: .68rem; }
.pf-job-collapse { padding: 0 var(--pf-s-3) var(--pf-s-2); }
.pf-job-unified .pf-job-quote { font-size: .76rem; margin: 0 0 var(--pf-s-2); }
.pf-job-unified .pf-table th,
.pf-job-unified .pf-table td { padding: 3px 6px; font-size: .74rem; }
.pf-job-unified .pf-doclist { font-size: .74rem; }

/* Timeline: compact rows. */
.pf-job-unified .pf-timeline { gap: 4px; }
.pf-job-unified .pf-timeline li { font-size: .73rem; padding: 2px 0; }

/* Field cards: a touch tighter. */
.pf-job-unified .pf-field { padding: 5px 8px; }
.pf-job-unified .pf-brief .pf-desc,
.pf-job-unified .pf-job-brief .pf-desc { font-size: .82rem; line-height: 1.4; }

/* ── Media row: Photos + Files as FIXED-HEIGHT cards ───────────────────────────
   Both cards share ONE height (--pf-media-h) so they bottom-align with no dead
   space. Photos is a 3×2 carousel (6 per page, up to 12 photos / 2 pages) the
   operator swipes / wheel-scrolls / dot-clicks through; Files takes the same
   height and its list scrolls. Tune --pf-media-h — the single knob for both. */
.pf-job-media { --pf-media-h: 24rem; }
.pf-job-media .pf-intake-thumbs,
.pf-job-media .pf-job-files {
  height: var(--pf-media-h);
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--pf-s-2);
}
.pf-job-media .pf-job-files { overflow: hidden; }
.pf-job-media .pf-intake-thumbs { overflow: visible; }

/* Carousel: a horizontal scroll-snap track of full-width pages; each page is a
   3×2 grid of 6 thumbs. Native overflow-x = touch swipe; ui.js adds wheel→
   horizontal + dot sync. (The hover preview is position:fixed/JS-positioned so it
   still floats over everything despite this scroll container — see ui.js.) */
.pf-job-media .pf-photo-carousel {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--pf-s-2);
}
.pf-job-media .pf-photo-pages {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  scroll-behavior: smooth;
}
.pf-job-media .pf-photo-pages::-webkit-scrollbar { display: none; }
.pf-job-media .pf-photo-page {
  flex: 0 0 100%;
  min-width: 0;
  scroll-snap-align: start;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: var(--pf-s-2);
}
/* Page-indicator dots — white active, dim inactive; click to jump. */
.pf-job-media .pf-photo-dots { display: flex; justify-content: center; gap: 6px; flex-shrink: 0; }
.pf-job-media .pf-photo-dot {
  width: 7px; height: 7px; padding: 0;
  border: 0; border-radius: 50%;
  /* theme-aware: --pf-text is light in dark mode, dark in light mode, so the dots
     stay visible on the card surface in BOTH themes (a hardcoded #fff vanished in
     light mode). */
  background: color-mix(in srgb, var(--pf-text) 32%, transparent);
  cursor: pointer;
  transition: background .12s ease, transform .12s ease;
}
.pf-job-media .pf-photo-dot.is-active { background: var(--pf-text); transform: scale(1.18); }

/* Thumbnails fill their cell (override 4/3) so they grow with the page. */
.pf-job-media .pf-intake-thumb,
.pf-job-media .pf-intake-thumb-link { height: 100%; min-height: 0; }
.pf-job-media .pf-intake-thumb-link > img,
.pf-job-media .pf-intake-thumb > img {
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
}
/* Empty slot: a darkened tile padding a partly-filled page to a full 3×2. */
.pf-job-media .pf-intake-thumb-empty {
  height: 100%;
  min-height: 0;
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-r-sm);
  background: color-mix(in srgb, var(--pf-bg) 78%, #000);
}
/* The removed-photos grid keeps a simple 3-col layout inside its <details>. */
.pf-job-media .pf-intake-thumb-grid--removed {
  grid-template-columns: repeat(3, 1fr);
  gap: var(--pf-s-2);
}
/* Files: head + uploader stay pinned; the list takes the slack and scrolls. */
.pf-job-media .pf-file-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
/* Uploader: the "Add photos" / "Attach files" label stays LEFT-justified; only the
   Choose Files button is centered. The control spans full width (grid, 1 col): the
   label text sits left, the file input is justify-self:center. font-size:0 collapses
   the hidden "No file chosen" text so the input shrinks to the button width and the
   button itself ends up centered (the button's own font-size is restored below). */
.pf-job-media .pf-async-upload { justify-items: stretch; }
.pf-job-media .pf-upload-control {
  display: grid;
  gap: var(--pf-s-1);
  width: 100%;
  text-align: left;
}
.pf-job-media .pf-upload-control input[type="file"] {
  justify-self: center;
  font-size: 0;
}
.pf-job-media .pf-upload-control input[type="file"]::file-selector-button {
  font-size: .82rem;
}

/* ── Quick-tools band (Variant A) — dense jump strip atop the dossier ──────────
   8 compact buttons (2x4) with category-colored left borders; in-page anchors. */
/* ── Job VITALS cockpit — dense at-a-glance tiles (replaced the quick-tools band).
   The live operational pulse; a tile pops amber (needs attention) or green (good)
   only when relevant, so the eye lands on what's off. */
.pf-job-vitals {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--pf-blue) 24%, var(--pf-border));
  border-radius: var(--pf-r-md);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--pf-blue) 8%, transparent), transparent 6rem),
    var(--pf-surface);
}
.pf-vital {
  display: grid;
  gap: 1px;
  align-content: center;
  padding: 6px 9px;
  border: 1px solid var(--pf-border);
  border-left: 3px solid color-mix(in srgb, var(--pf-blue) 45%, var(--pf-border));
  border-radius: var(--pf-r-sm);
  background: var(--pf-bg);
  min-width: 0;
}
.pf-vital-label {
  color: var(--pf-muted);
  font-size: .58rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .05em;
}
.pf-vital-value {
  color: var(--pf-text);
  font-size: .92rem; font-weight: 800;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pf-vital.is-warn {
  border-color: color-mix(in srgb, var(--pf-warning) 45%, var(--pf-border));
  border-left-color: var(--pf-warning);
  background: color-mix(in srgb, var(--pf-warning) 13%, var(--pf-bg));
}
.pf-vital.is-warn .pf-vital-value { color: var(--pf-warning); }
.pf-vital.is-ok { border-left-color: color-mix(in srgb, var(--pf-success) 70%, var(--pf-border)); }
.pf-vital.is-ok .pf-vital-value { color: var(--pf-success); }
@media (max-width: 1100px) {
  .pf-job-vitals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── System Vitals strip (Home) — background-machinery health at a glance
   (ops-audit Theme 3). A row of status chips: quiet/neutral by default, amber
   when a vital (a dead backup, a dark scheduler, a full disk) needs the operator.
   Distinct from the per-job .pf-vital tiles above. */
.pf-vitals { margin-top: var(--pf-s-4); }
.pf-sysvitals-row {
  list-style: none; margin: var(--pf-s-2) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px;
}
.pf-sysvital {
  display: flex; align-items: center; gap: 8px; min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-r-sm);
  background: var(--pf-bg);
}
.pf-sysvital-dot {
  flex: none; width: 8px; height: 8px; border-radius: 50%;
  background: var(--pf-muted);
}
.pf-sysvital-text { display: grid; gap: 1px; min-width: 0; }
.pf-sysvital-label {
  color: var(--pf-muted);
  font-size: .58rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .05em;
}
.pf-sysvital-summary {
  color: var(--pf-text); font-size: .82rem; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pf-sysvital-ok .pf-sysvital-dot { background: var(--pf-success); }
.pf-sysvital-warn {
  border-color: color-mix(in srgb, var(--pf-warning) 45%, var(--pf-border));
  background: color-mix(in srgb, var(--pf-warning) 12%, var(--pf-bg));
}
.pf-sysvital-warn .pf-sysvital-dot { background: var(--pf-warning); }
.pf-sysvital-warn .pf-sysvital-summary { color: var(--pf-warning); }
/* off / idle keep the neutral (muted) dot — not a problem, just not active. */
@media (max-width: 1100px) {
  .pf-sysvitals-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── Dev-tools arm form (Audit danger zone) — inline password re-auth to unlock
   the testing tools (ops-audit critical gate). */
.pf-inline-form { margin-top: var(--pf-s-2); }
.pf-arm-form {
  display: flex; flex-wrap: wrap; gap: var(--pf-s-2);
  align-items: center;
}
.pf-arm-form .pf-input { width: auto; min-width: 12rem; flex: 0 1 14rem; }

/* ===== Contact Reach panel — PR-1 data features (exclude / data editor / self-exclusion) ===== */
/* Excluded referral row: muted + struck so it reads as "listed but not counted". */
.pf-excluded th,
.pf-excluded td { color: var(--pf-muted); text-decoration: line-through; }
.pf-excluded .pf-col-exclude input,
.pf-excluded .pf-col-actions { text-decoration: none; }  /* keep controls usable */
.pf-col-exclude { text-align: center; }
.pf-col-exclude input { width: 1.05rem; height: 1.05rem; cursor: pointer; }
/* Save-exclusions row + its live-preview hint. */
.pf-exclude-save {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pf-s-2);
  align-items: center;
  margin: var(--pf-s-2) 0 var(--pf-s-3);
}
.pf-exclude-hint { font-size: .8rem; }
/* Per-bucket data editor (count editor + raw tap-log). Reuses .pf-manage shell. */
.pf-data-editor-body { flex-direction: column; align-items: stretch; }
.pf-data-rows { margin: var(--pf-s-2) 0; }
.pf-data-rows .pf-input { min-width: 0; }
.pf-data-counts { margin-bottom: var(--pf-s-2); }
/* raw tap-log: collapsed + capped so the editor never becomes a wall of rows */
.pf-raw-taps { margin-top: var(--pf-s-2); }
.pf-raw-summary {
  cursor: pointer;
  font-size: .82rem;
  font-weight: 600;
  color: var(--pf-muted);
  padding: var(--pf-s-1) 0;
  list-style: none;
}
.pf-raw-summary::-webkit-details-marker { display: none; }
.pf-raw-summary::before { content: "▸ "; }
.pf-raw-taps[open] .pf-raw-summary::before { content: "▾ "; }
.pf-raw-more { font-size: .8rem; margin: var(--pf-s-1) 0 0; }
/* Self-exclusion (pf_notrack) device section. */
.pf-notrack {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pf-s-3);
  align-items: center;
  margin: var(--pf-s-3) 0;
  padding: var(--pf-s-2) var(--pf-s-3);
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-r-sm);
  background: var(--pf-bg);
}
.pf-notrack-state {
  display: flex;
  align-items: center;
  gap: var(--pf-s-1);
  margin: 0;
  color: var(--pf-muted);
  font-size: .86rem;
}
.pf-notrack-on { color: var(--pf-success); }
/* ── PR-3 (item J): stage-colored accent on "do next" stage-action CTAs ──
   These remain primary buttons (blue fill / forward affordance). We only add a
   pre-attentive stage-color CUE — a left accent bar driven by --stage-color —
   so the operator can tell at a glance which stage the action belongs to. The
   fill is NEVER tinted by --stage-color, so negative stages (Declined) can't
   turn the button red: red stays reserved for the Danger zone. --stage-color is
   in scope wherever a stage_class() sits on an ancestor (board .pf-job, the
   .pf-job-rail aside); it falls back to the button's own surface otherwise. */
.pf-stage-cta {
  position: relative;
  border-left: 3px solid color-mix(in srgb, var(--stage-color, #fff) 80%, #fff);
}
.pf-stage-cta:hover {
  border-left-color: var(--stage-color, #fff);
}

/* ===== Polished selects (console-wide) ======================================
   Native <select> renders an OS control (a white box in dark mode). appearance:
   none + a token surface + a custom chevron caret (data: URI, allowed by the CSP
   img-src) makes every console dropdown match the inputs. Listed selectors equal
   the styled-input contexts (so this later rule wins their `background` shorthand)
   plus the bare job/form selects that had only sizing. */
.pf-panel select,
.pf-search-panel select,
.pf-detail-side select,
.pf-cockpit-form select,
.pf-cockpit-subpanel select,
.pf-quote-fields select,
.pf-form select,
.pf-form-row select,
.pf-job-core .pf-form select,
.pf-job-core .pf-form-row select,
.pf-filter-select {
  appearance: none;
  -webkit-appearance: none;
  background-color: var(--pf-bg);
  color: var(--pf-text);
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-r-sm);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a929b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.55rem center;
  background-size: 0.7rem;
  padding-right: 1.7rem;
  cursor: pointer;
}
.pf-panel select:focus,
.pf-search-panel select:focus,
.pf-detail-side select:focus,
.pf-cockpit-form select:focus,
.pf-cockpit-subpanel select:focus,
.pf-quote-fields select:focus,
.pf-form select:focus,
.pf-form-row select:focus,
.pf-job-core .pf-form select:focus,
.pf-job-core .pf-form-row select:focus,
.pf-filter-select:focus {
  border-color: var(--pf-blue);
  outline: 2px solid color-mix(in srgb, var(--pf-blue) 35%, transparent);
  outline-offset: 1px;
}

/* ── PayPal invoice list (billing card) + "Paid" badge (board/table) ──────────
   Invoice lifecycle is shown SEPARATE from the money figure: Sent = amber
   (awaiting the customer), Paid = green. The board/table badge flags a job whose
   customer paid online and that you haven't progressed yet (auto-clears on advance). */
.pf-pp-invoices { list-style: none; margin: var(--pf-s-2) 0 0; padding: 0; display: grid; gap: 4px; }
.pf-pp-inv {
  display: flex; align-items: center; gap: var(--pf-s-2); font-size: .78rem;
  padding: 3px var(--pf-s-2); border-radius: var(--pf-r-sm); border: 1px solid var(--pf-border);
}
.pf-pp-inv-kind { font-weight: 700; }
.pf-pp-inv-status {
  margin-left: auto; font-weight: 800; text-transform: uppercase;
  font-size: .62rem; letter-spacing: .04em;
}
.pf-pp-inv-sent { border-color: color-mix(in srgb, var(--pf-alert) 40%, var(--pf-border)); }
.pf-pp-inv-sent .pf-pp-inv-status { color: var(--pf-alert); }
.pf-pp-inv-paid { border-color: color-mix(in srgb, var(--pf-success) 45%, var(--pf-border)); }
.pf-pp-inv-paid .pf-pp-inv-status { color: var(--pf-success); }
.pf-badge-paid {
  display: inline-block; font-size: .6rem; font-weight: 800; padding: 1px 6px;
  border-radius: 999px; white-space: nowrap;
  color: var(--pf-success);
  background: color-mix(in srgb, var(--pf-success) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--pf-success) 45%, var(--pf-border));
}

/* ── Settings console (/ops/settings) — reuses the pricing-page shell + form
   primitives; these are the few settings-only bits (test row, advanced disclosure). */
.pf-settings-advanced { margin: var(--pf-s-2) 0; }
.pf-settings-advanced > summary {
  cursor: pointer; color: var(--pf-blue); font-size: .8rem; font-weight: 700;
  width: max-content; padding: var(--pf-s-1) 0;
}
.pf-settings-advanced[open] > summary { margin-bottom: var(--pf-s-2); }
.pf-settings-test {
  display: flex; align-items: center; gap: var(--pf-s-3);
  margin-top: var(--pf-s-3); flex-wrap: wrap;
}
.pf-settings-test-result { font-size: .82rem; font-weight: 600; }
.pf-settings-test-result .pf-ok { color: var(--pf-success); }
.pf-settings-test-result .pf-error { color: var(--pf-alert); }

/* ══ Billing card redesign — full-width dossier centerpiece ════════════════════
   The job page's Billing card now spans the full dossier width (Photos + Files
   combined). Money summary hero (quote / paid / balance + a paid meter), PayPal-
   invoice pills, payments table, an inline record-payment row, and a quieter
   Documents zone. The same partial powers /jobs/{id}/billing. Token-based; placed
   last so it wins by source order. Progress width is set in JS (ui.js
   initBillingMeter) because the CSP forbids inline style attributes. */
.pf-billing {
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-r-md);
  background: var(--pf-bg);
  padding: var(--pf-s-4);
  display: grid;
  gap: var(--pf-s-4);
}
.pf-billing-title { margin: 0; }
.pf-billing-empty { margin: 0; color: var(--pf-muted); }

/* money summary hero */
.pf-billing-summary {
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-r-md);
  background: var(--pf-surface);
  padding: var(--pf-s-4);
  display: grid;
  gap: var(--pf-s-3);
}
.pf-bill-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pf-bill-stat {
  display: grid; gap: 4px; justify-items: center; text-align: center;
  padding: 0 var(--pf-s-3);
}
.pf-bill-stat + .pf-bill-stat { border-left: 1px solid var(--pf-border); }
.pf-bill-stat span {
  color: var(--pf-muted); font-size: .72rem; font-weight: 700; letter-spacing: .03em;
}
.pf-bill-stat strong {
  color: var(--pf-text); font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.pf-bill-stat-balance strong { color: var(--pf-blue); }
.pf-bill-meter { display: grid; gap: 6px; justify-items: center; }
.pf-bill-meter-track {
  width: 100%; height: 8px; border-radius: 999px; background: var(--pf-border); overflow: hidden;
}
.pf-bill-meter-fill {
  height: 100%; width: 0; border-radius: 999px; background: var(--pf-blue);
  transition: width .35s var(--pf-ease, ease);
}
.pf-bill-meter-label { color: var(--pf-muted); font-size: .72rem; font-weight: 600; }

/* per-zone subheading */
.pf-bill-block { display: grid; gap: var(--pf-s-2); }
.pf-bill-h {
  margin: 0; color: var(--pf-text); font-size: .7rem; font-weight: 800;
  letter-spacing: .05em; text-transform: uppercase;
}

/* Portfolio draft form — AI bar + photo picker (Completed closeout, v40). */
.pf-portfolio-aibar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pf-s-2); margin-bottom: var(--pf-s-2); }
.pf-portfolio-picker { border: 1px solid var(--pf-border); border-radius: var(--pf-r-sm); padding: var(--pf-s-2) var(--pf-s-3); margin: var(--pf-s-2) 0; }
.pf-portfolio-picker legend { color: var(--pf-muted); font-size: .72rem; font-weight: 700; letter-spacing: .03em; padding: 0 4px; }
.pf-portfolio-picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: var(--pf-s-2); }
.pf-portfolio-pick { position: relative; cursor: pointer; display: block; }
.pf-portfolio-pick img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--pf-r-sm); border: 2px solid transparent; display: block; }
.pf-portfolio-pick input { position: absolute; top: 4px; left: 4px; z-index: 1; }
.pf-portfolio-pick input:checked + img { border-color: var(--pf-blue); }
.pf-portfolio-pick-tag { position: absolute; bottom: 2px; right: 2px; background: rgba(0,0,0,.6); color: #fff; font-size: .6rem; padding: 1px 4px; border-radius: 3px; }

/* 'Paid another way' prompt: cancel the still-open PayPal invoice. Amber callout
   so it reads as a decision, not an error. */
.pf-invoice-prompt {
  display: grid; gap: var(--pf-s-3);
  border: 1px solid var(--pf-alert); border-left-width: 3px;
  border-radius: var(--pf-r-md);
  background: color-mix(in srgb, var(--pf-alert) 8%, var(--pf-surface));
  padding: var(--pf-s-3) var(--pf-s-4);
  margin-bottom: var(--pf-s-4);
}
.pf-invoice-prompt-msg { margin: 0; color: var(--pf-text); }
.pf-invoice-prompt-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pf-s-3); }

/* PayPal invoice pill: leading status dot (green paid / amber sent) */
.pf-pp-inv-cancel { margin-left: var(--pf-s-2); }
.pf-pp-inv-dot { width: 8px; height: 8px; border-radius: 999px; flex: 0 0 auto; background: var(--pf-muted); }
.pf-pp-inv-amt { color: var(--pf-muted); }
.pf-pp-inv-paid .pf-pp-inv-dot { background: var(--pf-success); }
.pf-pp-inv-sent .pf-pp-inv-dot { background: var(--pf-alert); }
.pf-bill-iconlink { margin-left: var(--pf-s-2); color: var(--pf-blue); display: inline-flex; align-items: center; }
.pf-bill-iconlink:hover { color: color-mix(in srgb, var(--pf-blue) 80%, #000); }

/* ledger */
.pf-ledger { width: 100%; }
.pf-ledger-act { text-align: right; white-space: nowrap; }

/* record-payment row */
.pf-bill-record { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pf-s-2); }
.pf-bill-record input[name="amount"] { flex: 1 1 8rem; min-width: 6rem; }
.pf-bill-record .pf-btn-primary { flex: 0 0 auto; margin-left: auto; }

/* documents: quiet generate-action buttons (icon + label) */
.pf-bill-docactions { display: flex; flex-wrap: wrap; gap: var(--pf-s-2); }
.pf-bill-docbtn { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.pf-bill-docbtn svg { flex: 0 0 auto; }

/* stored docs list */
.pf-doclist { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.pf-doc-row {
  display: flex; align-items: center; gap: var(--pf-s-2);
  padding: var(--pf-s-2) var(--pf-s-3);
  border: 1px solid var(--pf-border); border-radius: var(--pf-r-sm); background: var(--pf-surface);
}
.pf-doc-icon { display: inline-flex; color: var(--pf-muted); flex: 0 0 auto; }
.pf-doc-link { font-weight: 700; color: var(--pf-blue); }
.pf-doc-meta { color: var(--pf-muted); font-size: .82rem; }
.pf-doc-act { margin-left: auto; display: inline-flex; align-items: center; gap: var(--pf-s-3); white-space: nowrap; }

/* header: folded-in customer change disclosure (was its own card) */
.pf-sub-customer { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--pf-s-2); }
.pf-customer-edit > summary {
  cursor: pointer; color: var(--pf-blue); font-size: .76rem; font-weight: 600;
  list-style: none; width: max-content;
}
.pf-customer-edit > summary::-webkit-details-marker { display: none; }
.pf-customer-edit[open] > summary { margin-bottom: var(--pf-s-2); }
.pf-customer-edit .pf-form-row { flex-wrap: wrap; gap: var(--pf-s-2); }

/* comms timeline: capped + scrollable so a long history can't blow out the box */
.pf-timeline-scroll { max-height: 22rem; overflow-y: auto; }

/* ═══════════════════════════════════════════════════════════════════════════
   General emailing: comms card redesign · compose screen · /ops/templates.
   Tokens from tokens.css; the comms card matches the billing card chrome.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── communications card (a <details> styled as a card) ───────────────────── */
.pf-comms-card {
  background: var(--pf-surface); border: 1px solid var(--pf-border);
  border-radius: var(--pf-r-lg); padding: var(--pf-s-4) var(--pf-s-5);
  margin-top: var(--pf-s-5);
}
.pf-comms-card > summary { list-style: none; cursor: pointer; }
.pf-comms-card > summary::-webkit-details-marker { display: none; }
.pf-comms-head { display: flex; align-items: center; justify-content: space-between; gap: var(--pf-s-4); }
.pf-comms-title { display: inline-flex; align-items: center; gap: var(--pf-s-2); font-size: 1.05rem; font-weight: 700; color: var(--pf-text); }
.pf-comms-head-actions { display: inline-flex; align-items: center; gap: var(--pf-s-3); }
.pf-comms-compose { white-space: nowrap; }
.pf-comms-chev { color: var(--pf-muted); display: inline-flex; transition: transform .15s ease; }
.pf-comms-card[open] .pf-comms-chev { transform: rotate(180deg); }
.pf-comms-body { margin-top: var(--pf-s-3); }
.pf-comms-sub { color: var(--pf-muted); font-size: .85rem; margin: 0 0 var(--pf-s-3); }
.pf-logpast { border-top: 1px solid var(--pf-border); padding-top: var(--pf-s-2); margin-bottom: var(--pf-s-3); }
.pf-logpast > summary { display: inline-flex; align-items: center; gap: var(--pf-s-1); cursor: pointer; color: var(--pf-muted); font-size: .82rem; font-weight: 600; list-style: none; padding: var(--pf-s-1) 0; }
.pf-logpast > summary::-webkit-details-marker { display: none; }
.pf-logpast .pf-form { margin-top: var(--pf-s-2); gap: var(--pf-s-2); }

/* ── timeline: events recede; messages carry a colored chip ───────────────── */
.pf-tl-event, .pf-tl-comm { display: flex; align-items: baseline; gap: var(--pf-s-3); border-bottom: 1px solid var(--pf-border); padding: 5px 0; }
.pf-tl-event .pf-ts, .pf-tl-comm .pf-ts { flex: 0 0 6.2rem; font-size: .74rem; }
.pf-tl-dot { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: var(--pf-muted); align-self: center; }
.pf-tl-event .pf-tl-evlabel { color: var(--pf-muted); font-size: .8rem; }
/* overflow-wrap: anywhere — a long unbreakable token (e.g. a pay/<token> URL in a
   logged email) would otherwise spill past its box and force the whole left core
   column wide, overflowing under the sticky rail. Wrapping it keeps the card sized. */
.pf-tl-comm .pf-comm-body { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; color: var(--pf-text); font-size: .82rem; }
.pf-comm-chip { flex: 0 0 auto; display: inline-flex; align-items: center; white-space: nowrap; padding: 1px 9px; border-radius: 999px; font-size: .68rem; font-weight: 600; border: 1px solid var(--pf-border); color: var(--pf-muted); }
.pf-dir-outbound .pf-tl-dot { background: var(--pf-blue); }
.pf-dir-outbound .pf-comm-chip { color: var(--pf-blue); background: color-mix(in srgb, var(--pf-blue) 8%, transparent); border-color: color-mix(in srgb, var(--pf-blue) 28%, transparent); }
.pf-dir-inbound .pf-tl-dot { background: var(--pf-success); }
.pf-dir-inbound .pf-comm-chip { color: var(--pf-success); background: color-mix(in srgb, var(--pf-success) 9%, transparent); border-color: color-mix(in srgb, var(--pf-success) 28%, transparent); }
.pf-dir-internal .pf-tl-dot { background: var(--pf-muted); }
.pf-tl-retract { margin-left: auto; flex: 0 0 auto; opacity: 0; transition: opacity .12s ease; }
.pf-tl-comm:hover .pf-tl-retract, .pf-tl-comm:focus-within .pf-tl-retract { opacity: 1; }
.pf-tl-retract .pf-link { font-size: .74rem; }

/* ── focused compose screen ───────────────────────────────────────────────── */
.pf-compose { max-width: 760px; margin: 0 auto; padding: var(--pf-s-2) 0 var(--pf-s-6); }
.pf-compose h1 { margin: var(--pf-s-2) 0 var(--pf-s-1); }
.pf-compose-to { color: var(--pf-muted); margin: 0 0 var(--pf-s-3); }
.pf-compose-to strong { color: var(--pf-text); }
.pf-compose-form { display: grid; gap: var(--pf-s-4); margin-top: var(--pf-s-3); }
.pf-compose-row { display: grid; gap: var(--pf-s-2); font-weight: 600; font-size: .92rem; }
.pf-compose-row input, .pf-compose-select { font: inherit; padding: var(--pf-s-3); border: 1px solid var(--pf-border); border-radius: var(--pf-r-sm); background: var(--pf-bg); color: var(--pf-text); min-height: var(--pf-tap-min); }
.pf-compose-bodyhead { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--pf-s-3); }
.pf-compose-bodylabel { font-weight: 600; font-size: .92rem; }
.pf-compose-tools { display: inline-flex; align-items: center; gap: var(--pf-s-2); position: relative; }
.pf-compose-textarea { width: 100%; font: inherit; padding: var(--pf-s-3); border: 1px solid var(--pf-border); border-radius: var(--pf-r-sm); background: var(--pf-bg); color: var(--pf-text); resize: vertical; min-height: 14rem; }
.pf-compose-notice { color: var(--pf-success); font-size: .8rem; margin: var(--pf-s-1) 0 0; }
.pf-compose-shellnote { border-top: 1px solid var(--pf-border); padding-top: var(--pf-s-3); }
.pf-compose-actions { display: flex; align-items: center; justify-content: space-between; gap: var(--pf-s-3); margin-top: var(--pf-s-2); }
.pf-compose-actions-right { display: inline-flex; align-items: center; gap: var(--pf-s-4); }
.pf-delivery-no_address { border-left-color: var(--pf-muted); }
.pf-token-picker { position: relative; }
.pf-token-menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; width: 22rem; max-width: 80vw; background: var(--pf-bg); border: 1px solid var(--pf-border); border-radius: var(--pf-r-md); box-shadow: 0 10px 30px rgba(0,0,0,.14); padding: var(--pf-s-1); max-height: 18rem; overflow-y: auto; }
.pf-token-item { display: flex; align-items: baseline; gap: var(--pf-s-2); width: 100%; text-align: left; background: none; border: 0; cursor: pointer; padding: var(--pf-s-2); border-radius: var(--pf-r-sm); font: inherit; }
.pf-token-item:hover { background: var(--pf-surface); }
.pf-token-item code { color: var(--pf-blue); font-size: .8rem; flex: 0 0 auto; }
.pf-token-item span { color: var(--pf-muted); font-size: .78rem; }
.pf-mic { gap: var(--pf-s-1); }
.pf-mic.is-listening { color: var(--pf-alert); border-color: color-mix(in srgb, var(--pf-alert) 40%, var(--pf-border)); }
.pf-mic-state { font-size: .74rem; color: var(--pf-muted); }
.pf-weave { border: 1px solid var(--pf-border); border-radius: var(--pf-r-md); background: var(--pf-surface); padding: var(--pf-s-3) var(--pf-s-4); }
.pf-weave-head { display: inline-flex; align-items: center; gap: var(--pf-s-2); font-weight: 700; margin: 0 0 var(--pf-s-2); }
.pf-weave-row { display: flex; gap: var(--pf-s-2); }
.pf-weave-input { flex: 1 1 auto; font: inherit; padding: var(--pf-s-3); border: 1px solid var(--pf-border); border-radius: var(--pf-r-sm); background: var(--pf-bg); color: var(--pf-text); min-height: var(--pf-tap-min); }

/* ── /ops/templates editor ────────────────────────────────────────────────── */
.pf-token-ref { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pf-s-2); background: var(--pf-surface); border: 1px solid var(--pf-border); border-radius: var(--r-md); padding: var(--pf-s-3) var(--pf-s-4); margin-bottom: var(--pf-s-4); }
.pf-token-ref-label { display: inline-flex; align-items: center; gap: var(--pf-s-1); color: var(--pf-muted); font-weight: 600; font-size: .82rem; margin-right: var(--pf-s-2); }
.pf-token-chip {
  appearance: none; font-family: var(--mono); font-size: .72rem; line-height: 1.4;
  color: var(--link); background: var(--pf-tint-link);
  border: 1px solid color-mix(in srgb, var(--link) 24%, transparent);
  border-radius: 5px; padding: 4px 9px; cursor: pointer;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.pf-token-chip:hover { color: #fff; background: var(--link); border-color: var(--link); }
.pf-token-chip:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.pf-token-chip.is-copied { color: #fff; background: var(--pf-success); border-color: var(--pf-success); }
[data-theme="dark"] .pf-console-body .pf-token-chip:hover:not(.is-copied) { color: #08131f; }
.pf-templates-form { display: grid; gap: var(--pf-s-3); }
.pf-tmpl-card { overflow: hidden; background: var(--pf-bg); border: 1px solid var(--pf-border); border-radius: var(--r-lg); box-shadow: var(--sh1); }
.pf-tmpl-card > summary { list-style: none; cursor: pointer; padding: 14px 18px; }
.pf-tmpl-card > summary::-webkit-details-marker { display: none; }
.pf-tmpl-summary { display: flex; align-items: center; gap: 13px; }
.pf-tmpl-icon {
  display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 34px;
  color: var(--link); background: var(--pf-tint-link); border-radius: 8px;
}
.pf-tmpl-copy { display: grid; gap: 2px; flex: 1 1 auto; min-width: 0; }
.pf-tmpl-name { font-weight: 700; }
.pf-tmpl-desc { color: var(--pf-muted); font-size: .82rem; min-width: 0; }
.pf-tmpl-badge {
  flex: none; font-family: var(--mono); font-size: .55rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--link);
  background: var(--pf-tint-link); border: 1px solid color-mix(in srgb, var(--link) 26%, transparent);
  border-radius: 4px; padding: 2px 6px;
}
.pf-settings-badge { font-size: .68rem; font-weight: 600; color: var(--pf-warning); border: 1px solid color-mix(in srgb, var(--pf-warning) 35%, transparent); border-radius: 999px; padding: 1px 8px; }
/* settings "edited" pill sits inline after the field's config-key code */
.pf-settings-badge { margin-left: var(--pf-s-2); vertical-align: middle; }
.pf-tmpl-reset { font-size: .78rem; white-space: nowrap; }
.pf-tmpl-chev { color: var(--pf-muted); display: inline-flex; transition: transform .15s ease; }
.pf-tmpl-card[open] .pf-tmpl-chev { transform: rotate(180deg); }
.pf-tmpl-fields { display: grid; gap: var(--pf-s-3); padding: var(--pf-s-3) 18px 18px; border-top: 1px solid var(--pf-border); }
.pf-tmpl-field { display: grid; gap: var(--pf-s-2); font-weight: 600; font-size: .9rem; }
.pf-tmpl-field input, .pf-tmpl-textarea { font: inherit; padding: var(--pf-s-3); border: 1px solid var(--pf-border); border-radius: var(--pf-r-sm); background: var(--pf-bg); color: var(--pf-text); }
.pf-tmpl-textarea { resize: vertical; min-height: 9rem; line-height: 1.5; }
.pf-tmpl-reset-row { display: flex; align-items: center; min-height: 32px; }
.pf-tmpl-reset-row .pf-tech { color: var(--pf-muted); font-size: .68rem; }
.pf-templates-save { display: flex; align-items: center; justify-content: space-between; gap: var(--pf-s-3); padding-top: var(--pf-s-2); }
@media (max-width: 640px) {
  .pf-tmpl-summary { align-items: flex-start; }
  .pf-tmpl-badge { margin-left: auto; }
  .pf-tmpl-chev { display: none; }
  .pf-templates-save { align-items: stretch; flex-direction: column; }
}

/* ── email-customer toggle (inverted switch: green/ON = will email the customer) ── */
.pf-emailtoggle { margin: var(--pf-s-2) 0; }
.pf-switch { display: inline-flex; align-items: center; gap: var(--pf-s-2); cursor: pointer; }
.pf-switch > input { position: absolute; opacity: 0; width: 0; height: 0; }
.pf-switch-track { position: relative; flex: 0 0 auto; width: 42px; height: 24px; border-radius: 999px; background: var(--pf-success); transition: background .15s ease; }
.pf-switch-knob { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.3); transform: translateX(18px); transition: transform .15s ease; }
.pf-switch > input:checked + .pf-switch-track { background: var(--pf-muted); }
.pf-switch > input:checked + .pf-switch-track .pf-switch-knob { transform: translateX(0); }
.pf-switch > input:focus-visible + .pf-switch-track { outline: 2px solid var(--pf-blue); outline-offset: 2px; }
.pf-switch-label { font-weight: 600; font-size: .9rem; }
.pf-switch-on { color: var(--pf-success); }
.pf-switch-off { color: var(--pf-muted); display: none; }
.pf-switch > input:checked ~ .pf-switch-label .pf-switch-on { display: none; }
.pf-switch > input:checked ~ .pf-switch-label .pf-switch-off { display: inline; }

/* ── "What's New" changelog: sidebar unseen-dot + the entry list. ───────────── */
.pf-sidebar-nav a { position: relative; }  /* anchor for the unseen-dot */
.pf-nav-dot {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--pf-terracotta);
  box-shadow: 0 0 0 2px var(--pf-dark);
}
.pf-console-shell.is-sidebar-expanded .pf-nav-dot { top: 50%; right: 10px; transform: translateY(-50%); }

/* Tools row: filter input + collapsed jump-to TOC (H5 — disclosure/jump/filter). */
.pf-changelog-tools { margin-bottom: 18px; }
.pf-changelog-tools.pf-filters > .pf-search { margin-bottom: 0; }
.pf-changelog-filter { max-width: none; }
.pf-changelog-layout {
  display: grid; grid-template-columns: minmax(0, 1fr) 10rem;
  gap: 22px; align-items: start;
}
.pf-changelog-jump-list { list-style: none; margin: 0; padding: 6px 2px; display: flex; flex-direction: column; gap: 2px; }
.pf-changelog-jump-list a {
  display: block; padding: 7px 10px; border-radius: var(--r-sm);
  color: var(--pf-text); font-family: var(--mono); font-size: 11px;
  font-variant-numeric: tabular-nums; text-decoration: none;
}
.pf-changelog-jump-list a:hover,
.pf-changelog-jump-list a:focus-visible { color: var(--link); background: var(--pf-surface); text-decoration: none; }
.pf-changelog-jump-list a:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }

.pf-changelog { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.pf-changelog > li { min-width: 0; }
/* Each entry collapses into a <details>; the summary is the most-scannable line
   (date + title), the four-part prose lives inside. Newest two render open. */
.pf-changelog-entry {
  overflow: hidden;
  background: var(--pf-bg);
  border: 1px solid var(--pf-border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh1);
  scroll-margin-top: var(--pf-s-4);
}
.pf-logentry > .pf-changelog-summary {
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  padding: 15px 18px;
  list-style: none;
}
.pf-changelog-summary::-webkit-details-marker { display: none; }
.pf-changelog-summary::before {
  content: "▸";
  color: var(--pf-muted);
  font-size: 0.8em;
  transition: transform 0.12s ease;
}
.pf-changelog-entry[open] > .pf-changelog-summary::before { transform: rotate(90deg); }
.pf-logentry > summary .d { width: 74px; flex: none; font-family: var(--mono); font-size: 10.5px; color: var(--pf-muted); }
.pf-changelog-date { color: inherit; font: inherit; font-variant-numeric: tabular-nums; }
.pf-changelog-title { margin: 0; color: var(--pf-text); font-size: 14.5px; font-weight: 600; }
.pf-changelog-body { padding: 2px 18px 18px 92px; color: var(--pf-text); font-size: 13px; line-height: 1.6; }
.pf-changelog-body p { margin: 0 0 10px; }
.pf-changelog-body ul { margin: 0 0 10px; padding-left: 18px; color: var(--pf-muted); }
.pf-changelog-body li { margin-bottom: 5px; }
.pf-changelog-body :last-child { margin-bottom: 0; }
.pf-logentry > .pf-changelog-summary::before { display: none; }
.pf-logentry > .pf-changelog-summary::after {
  content: "\25B8"; margin-left: auto; color: var(--pf-muted); font-size: 11px;
  transition: transform var(--dur) var(--ease);
}
.pf-logentry[open] > .pf-changelog-summary::after { transform: rotate(90deg); }
.pf-changelog-monthrail { position: sticky; top: 20px; min-width: 0; }
.pf-changelog-monthrail .pf-eyebrow { margin-bottom: 8px; }
/* Filter: non-matching entries are removed from flow. */
.pf-cl-hidden { display: none; }
@media (max-width: 760px) {
  .pf-changelog-layout { grid-template-columns: 1fr; }
  .pf-changelog-monthrail { position: static; grid-row: 1; }
  .pf-changelog-monthrail .pf-eyebrow { margin-bottom: 6px; }
  .pf-changelog-monthrail-list {
    overflow-x: auto; flex-direction: row; padding-bottom: 8px;
    scrollbar-width: thin; overscroll-behavior-inline: contain;
  }
  .pf-changelog-monthrail-list li { flex: 0 0 auto; }
  .pf-changelog-monthrail-list a { white-space: nowrap; }
}
@media (max-width: 640px) {
  .pf-whatsnew-eyebrow { display: none !important; }
  .pf-logentry > .pf-changelog-summary { align-items: flex-start; gap: 9px; padding: 13px 14px; }
  .pf-logentry > summary .d { width: 66px; }
  .pf-changelog-body { padding: 2px 14px 15px; }
}

/* ── Quote acceptance (v42): status line + the copyable share link on the billing card. */
.pf-accept-status { display: flex; align-items: center; gap: var(--pf-s-2); flex-wrap: wrap; margin: 0 0 var(--pf-s-2); }
.pf-accept-ok { color: var(--pf-success, #15803D); }
.pf-accept-link { display: flex; align-items: center; gap: var(--pf-s-2); flex-wrap: wrap; margin: 0; }
.pf-accept-url {
  font-size: .82rem; background: var(--pf-surface); border: 1px solid var(--pf-border);
  border-radius: var(--pf-r-sm); padding: 2px var(--pf-s-2); word-break: break-all;
}

/* ── Forward quote revision (Theme A): the "Rev N" tag + the revise disclosure. */
.pf-rev-tag {
  font-size: .72rem; font-weight: 700; vertical-align: middle;
  background: var(--pf-surface); border: 1px solid var(--pf-border);
  border-radius: var(--pf-r-sm); padding: 1px 6px; color: var(--pf-muted);
}
.pf-revise { margin-top: var(--pf-s-2); }
.pf-revise > summary { display: inline-flex; cursor: pointer; list-style: none; }
.pf-revise > summary::-webkit-details-marker { display: none; }
.pf-revise-form { margin-top: var(--pf-s-3); }

/* ============================================================================
   Portfolio Studio (Phase B) — the completed-jobs entry point + facts capture.
   Internal-tool aesthetic: dense, functional, reuses the console tokens.
   ========================================================================== */

.pf-studio-estat {
  font-size: .72rem; font-weight: 600; padding: 3px 8px; border-radius: var(--pf-r-sm, 6px);
  border: 1px solid var(--pf-border); color: var(--pf-muted); white-space: nowrap;
}
.pf-studio-estat.is-published { color: var(--pf-success); border-color: color-mix(in srgb, var(--pf-success) 40%, var(--pf-border)); }
.pf-studio-estat.is-draft { color: var(--pf-blue); border-color: color-mix(in srgb, var(--pf-blue) 40%, var(--pf-border)); }

/* Facts status pill — Captured (ok) / N of 5 (part) / Capture facts (none). */
.pf-studio-fpill {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font-size: .74rem; font-weight: 600; padding: 4px 10px;
  border-radius: 999px; border: 1px solid var(--pf-border);
  background: var(--pf-bg); color: var(--pf-text);
}
.pf-studio-fpill.is-btn { cursor: pointer; }
.pf-studio-fpill.is-btn:hover { border-color: var(--pf-blue); color: var(--pf-blue); }
.pf-studio-fpill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--pf-muted); }
.pf-studio-fpill.ok { color: var(--pf-success); border-color: color-mix(in srgb, var(--pf-success) 40%, var(--pf-border)); }
.pf-studio-fpill.ok .dot { background: var(--pf-success); }
.pf-studio-fpill.part { color: var(--pf-warning); border-color: color-mix(in srgb, var(--pf-warning) 40%, var(--pf-border)); }
.pf-studio-fpill.part .dot { background: var(--pf-warning); }
.pf-studio-fpill.none .dot { background: var(--pf-blue); }

/* Inline facts editor. */
.pf-studio-facts { margin: 12px 0 2px; display: flex; flex-direction: column; gap: 10px; }
.pf-studio-facts-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.pf-studio-fact-chip {
  display: inline-flex; gap: 6px; align-items: baseline;
  font-size: .74rem; padding: 4px 9px; border: 1px solid var(--pf-line);
  border-radius: var(--pf-r-sm, 6px); background: var(--pf-surface);
}
.pf-studio-fact-chip .k { color: var(--pf-muted); text-transform: uppercase; font-size: .64rem; letter-spacing: .03em; }
.pf-studio-fact-chip .v { color: var(--pf-text); font-weight: 600; }
.pf-studio-facts-invite {
  display: flex; gap: 8px; align-items: flex-start; margin: 0;
  font-size: .82rem; color: var(--pf-text); padding: 10px 12px;
  border-radius: var(--pf-r-sm, 6px);
  background: color-mix(in srgb, var(--pf-blue) 6%, var(--pf-surface));
}
.pf-studio-fact-f { display: flex; flex-direction: column; gap: 4px; }
.pf-studio-fact-lab { font-size: .78rem; font-weight: 600; color: var(--pf-text); }
.pf-studio-fact-f textarea { width: 100%; resize: vertical; }
.pf-studio-facts-ft { display: flex; align-items: center; gap: 8px; }
.pf-studio-spacer { flex: 1; }


/* Portfolio Studio B2 — authoring editor (split editor + live preview) + facts panel. */
.pf-studio-saved {
  font-size: .74rem; font-weight: 600; color: var(--pf-muted);
  padding: 4px 10px; border-radius: 999px; border: 1px solid var(--pf-border);
}
.pf-studio-saved.is-on { color: var(--pf-success); border-color: color-mix(in srgb, var(--pf-success) 40%, var(--pf-border)); }

.pf-studio-authoring { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: var(--pf-s-3, 16px); align-items: start; }
.pf-studio-editor-col { display: flex; flex-direction: column; gap: var(--pf-s-3, 16px); min-width: 0; }
.pf-studio-preview-col { position: sticky; top: 12px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }

.pf-studio-panel { border: 1px solid var(--pf-border); border-radius: var(--pf-r-md, 10px); background: var(--pf-bg); padding: 14px 16px; }
.pf-studio-panel-hd { display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; }
.pf-studio-panel-hd.static { cursor: default; margin-bottom: 10px; }
.pf-studio-panel-hd::-webkit-details-marker { display: none; }
.pf-studio-panel-title { font-weight: 600; color: var(--pf-text); }
.pf-studio-facts-panel[open] .pf-studio-panel-hd svg:last-child { transform: rotate(180deg); }
.pf-studio-facts-panel .pf-studio-panel-hd svg:last-child { transition: transform var(--pf-ease, .15s); color: var(--pf-muted); }
.pf-studio-facts-panel.needs { border-color: color-mix(in srgb, var(--pf-blue) 40%, var(--pf-border)); background: color-mix(in srgb, var(--pf-blue) 3%, var(--pf-bg)); }
.pf-studio-facts-panel .pf-studio-facts { margin-top: 12px; }
/* AI-first facts panel (Phase 1): Propose row, unsaved-proposal notice, dictate block. */
.pf-studio-facts-ai { display: flex; align-items: center; gap: var(--pf-s-3, 8px); flex-wrap: wrap; margin-top: 12px; }
.pf-studio-facts-notice { margin: 8px 0 0; font-size: .8rem; color: var(--pf-muted); }
.pf-studio-facts-dictate { margin-top: 12px; border-top: 1px dashed var(--pf-border); padding-top: 10px; }
.pf-studio-facts-dictate-hd { display: flex; align-items: center; gap: 6px; cursor: pointer; font-size: .8rem; font-weight: 600; color: var(--pf-text); }
.pf-studio-facts-dictate-hd::-webkit-details-marker { display: none; }
.pf-studio-facts-dictate[open] .pf-studio-facts-dictate-hd { margin-bottom: 8px; }
/* Steer-the-AI box: sits above the Draft-with-AI launcher. */
.pf-studio-steer { margin-bottom: 12px; }
.pf-studio-steer #studio-steer-saved { font-size: .74rem; color: var(--pf-muted); font-weight: 500; }

.pf-studio-ed-f { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.pf-studio-ed-lab { display: flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 600; color: var(--pf-text); }
.pf-studio-ed-lab .req { color: var(--pf-alert, #B4232A); }
.pf-studio-ed-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pf-studio-input {
  width: 100%; padding: 8px 10px; border: 1px solid var(--pf-border);
  border-radius: var(--pf-r-sm, 6px); background: var(--pf-bg); color: var(--pf-text);
  font: inherit; font-size: .86rem;
}
.pf-studio-input:focus { outline: none; border-color: var(--pf-blue); box-shadow: 0 0 0 2px color-mix(in srgb, var(--pf-blue) 20%, transparent); }
.pf-studio-input.big { font-size: 1rem; font-weight: 600; }
textarea.pf-studio-input { resize: vertical; }
.pf-studio-spec-row { display: grid; grid-template-columns: 200px 1fr; gap: 10px; margin-bottom: 8px; }

.pf-studio-preview-hd { display: flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 600; color: var(--pf-muted); }
.pf-studio-preview { border: 1px solid var(--pf-line); border-radius: var(--pf-r-md, 10px); overflow: hidden; background: var(--pf-surface); }

/* The public-entry preview card — light ground (the public page is light), fixed look
   so it reads as the public will regardless of the console theme. */
.pf-studio-pub { background: #FFFFFF; color: #1F2933; }
.pf-studio-pub-hero { aspect-ratio: 16 / 10; background: #EEF2F6; display: flex; align-items: center; justify-content: center; }
.pf-studio-pub-missing { color: #8494A4; font-size: .8rem; text-align: center; padding: 16px; }
.pf-studio-pub-missing.sm { padding: 10px 0; font-size: .76rem; text-align: left; }
.pf-studio-pub-pad { padding: 18px 20px 24px; }
.pf-studio-pub-eyebrow { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #004B96; }
.pf-studio-pub-h1 { font-size: 1.35rem; line-height: 1.25; margin: 8px 0 10px; color: #0F2030; }
.pf-studio-pub-h1.is-empty, .pf-studio-pub-sum.is-empty { color: #A6B2BE; font-weight: 400; }
.pf-studio-pub-sum { font-size: .92rem; margin: 0 0 14px; }
.pf-studio-pub-specs { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 14px; }
.pf-studio-pub-spec { border: 1px solid #E3EAF1; border-radius: 6px; padding: 6px 10px; min-width: 84px; }
.pf-studio-pub-spec .k { font-size: .62rem; text-transform: uppercase; letter-spacing: .03em; color: #6B7785; }
.pf-studio-pub-spec .v { font-size: .84rem; font-weight: 600; color: #1F2933; }
.pf-studio-pub-story p { font-size: .88rem; line-height: 1.55; margin: 0 0 10px; }

/* B2b — preview media: hero fills the hero box; before/after diptych; gallery grid. */
.pf-studio-pub-hero, .pf-studio-pub-gcell { position: relative; }
.pf-studio-pub-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* P2-2: a small tag marks a clip in the preview (the still shown is its poster frame). */
.pf-studio-clip-tag { position: absolute; top: 6px; left: 6px; background: rgba(15, 32, 48, .78);
  color: #fff; border-radius: var(--pf-r-pill, 999px); padding: 1px 8px; font-size: .68rem;
  font-weight: 600; letter-spacing: .04em; text-transform: uppercase; pointer-events: none; }
/* P0-2: non-blocking publish-panel note (e.g. a clip hero without video-tools output). */
.pf-studio-warn { display: flex; gap: 6px; align-items: flex-start; margin: 10px 0 0;
  background: color-mix(in srgb, var(--pf-warning) 14%, transparent);
  border-left: 3px solid var(--pf-warning); border-radius: var(--pf-r-sm); padding: 7px 10px; }
.pf-studio-pub-ba { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 14px; }
.pf-studio-pub-ba-cell { margin: 0; }
.pf-studio-pub-ba-cell .lab { font-size: .62rem; text-transform: uppercase; letter-spacing: .04em; color: #6B7785; margin: 0 0 4px; }
.pf-studio-pub-ba-cell img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; display: block; background: #EEF2F6; }
.pf-studio-pub-ba-cell .pf-studio-pub-missing.sm { aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; border: 1px dashed #D6DEE6; border-radius: 6px; padding: 0; }
.pf-studio-pub-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 14px 0 0; }
.pf-studio-pub-gcell { margin: 0; }
.pf-studio-pub-gcell img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 6px; display: block; background: #EEF2F6; }
.pf-studio-pub-gcell figcaption { font-size: .7rem; color: #6B7785; margin-top: 4px; line-height: 1.3; }

/* B2b — the photo-pool panel (editor column): job photos, role controls, caption/alt. */
.pf-studio-pool-count { font-size: .74rem; color: var(--pf-muted); }
.pf-studio-pool-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 12px; }
/* P2-1: full-width divider before the Studio-origin media (grabbed stills / AI results). */
.pf-studio-pool-divider { grid-column: 1 / -1; font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--pf-muted); border-top: 1px solid var(--pf-border); padding-top: 8px; margin-top: 2px; }
.pf-studio-pool-item { border: 1px solid var(--pf-border); border-radius: var(--pf-r-md, 10px); padding: 8px; display: flex; flex-direction: column; gap: 8px; }
.pf-studio-pool-item.is-tagged { border-color: color-mix(in srgb, var(--pf-blue) 45%, var(--pf-border)); background: color-mix(in srgb, var(--pf-blue) 3%, var(--pf-bg)); }
.pf-studio-pool-thumb { position: relative; }
.pf-studio-pool-thumb img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--pf-r-sm, 6px); display: block; background: #EEF2F6; }
.pf-studio-pool-badge { position: absolute; left: 6px; top: 6px; padding: 2px 7px; border-radius: 999px; font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: #fff; background: var(--pf-blue); }
.pf-studio-pool-roles { display: flex; flex-wrap: wrap; gap: 4px; }
.pf-studio-role-btn { flex: 1 1 auto; padding: 4px 6px; font-size: .7rem; font-weight: 600; border: 1px solid var(--pf-border); border-radius: var(--pf-r-sm, 6px); background: var(--pf-bg); color: var(--pf-muted); cursor: pointer; }
.pf-studio-role-btn:hover { border-color: var(--pf-blue); color: var(--pf-text); }
.pf-studio-role-btn.is-on { background: var(--pf-blue); border-color: var(--pf-blue); color: #fff; }
.pf-studio-pool-meta { display: flex; flex-direction: column; gap: 6px; }
.pf-studio-pool-meta .pf-studio-input { font-size: .78rem; padding: 6px 8px; }
/* Phase 2 edit-in-place: the Remove-background action row, the in-flight badge, the cutout
   before/after, and the Delete/Download action row. */
.pf-studio-pool-editrow { display: flex; align-items: center; gap: 6px; }
.pf-studio-pool-editing { position: absolute; right: 6px; top: 6px; padding: 2px 7px; border-radius: 999px; font-size: .62rem; font-weight: 700; color: #fff; background: var(--pf-blue); }
.pf-studio-pool-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.pf-studio-pool-del { display: inline; }
.pf-studio-pool-ba { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.pf-studio-pool-ba-cell { margin: 0; }
.pf-studio-pool-ba-cell img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--pf-r-sm, 6px); display: block; background: #EEF2F6; }
.pf-studio-pool-ba-cell figcaption { font-size: .64rem; text-transform: uppercase; letter-spacing: .03em; color: var(--pf-muted); text-align: center; margin-top: 3px; }

/* B3a — publish panel: readiness checklist, consent receipt, lifecycle actions. */
.pf-studio-publish { display: flex; flex-direction: column; gap: 12px; }
.pf-studio-check { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.pf-studio-check li { display: flex; align-items: center; gap: 8px; font-size: .82rem; color: var(--pf-text); }
.pf-studio-check li .mk { flex: none; width: 15px; height: 15px; border-radius: 50%; border: 1.5px solid var(--pf-border); position: relative; }
.pf-studio-check li.ok .mk { background: var(--pf-success); border-color: var(--pf-success); }
.pf-studio-check li.ok .mk::after { content: ""; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px; border: solid #fff; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.pf-studio-check li.no .mk { border-color: var(--pf-alert, #B4232A); }
.pf-studio-check li.no { color: var(--pf-text); }
.pf-studio-check li.rec { color: var(--pf-muted); }
.pf-studio-check li .rq { margin-left: auto; font-size: .64rem; text-transform: uppercase; letter-spacing: .03em; color: var(--pf-muted); }
.pf-studio-consent { display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--pf-border); border-radius: var(--pf-r-sm, 6px); padding: 10px 12px; }
.pf-studio-consent.is-on { border-color: color-mix(in srgb, var(--pf-success) 40%, var(--pf-border)); background: color-mix(in srgb, var(--pf-success) 4%, var(--pf-bg)); }
.pf-studio-consent-hd { display: flex; align-items: center; gap: 6px; font-size: .82rem; font-weight: 600; color: var(--pf-text); }
.pf-studio-consent-row { display: flex; gap: 8px; }
.pf-studio-publish-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pf-studio-publish-actions form { margin: 0; }

/* B3b — draft-of-live: the "unpublished edits" chip + update/revert actions. */
.pf-studio-live { border: 1px solid var(--pf-border); border-radius: var(--pf-r-sm, 6px); padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.pf-studio-live.is-dirty { border-color: color-mix(in srgb, var(--pf-warn, #B9770B) 45%, var(--pf-border)); background: color-mix(in srgb, var(--pf-warn, #B9770B) 5%, var(--pf-bg)); }
.pf-studio-live-hd { display: flex; align-items: center; gap: 7px; font-size: .82rem; font-weight: 600; color: var(--pf-text); }
.pf-studio-live-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--pf-warn, #B9770B); }
.pf-studio-live-hd.clean { color: var(--pf-muted); font-weight: 500; }
.pf-studio-live-hd.clean .pf-studio-live-dot { background: var(--pf-success); }
.pf-studio-live-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.pf-studio-live-actions form { margin: 0; }

/* Addendum item 3 — authoring stacks (editor above preview) below 1180px. */
@media (max-width: 1180px) {
  .pf-studio-authoring { grid-template-columns: 1fr; }
  .pf-studio-preview-col { position: static; order: -1; }
}
@media (max-width: 560px) {
  .pf-studio-ed-2 { grid-template-columns: 1fr; }
  .pf-studio-spec-row { grid-template-columns: 1fr; }
  .pf-studio-pool-grid { grid-template-columns: 1fr; }
  .pf-studio-pub-gallery { grid-template-columns: repeat(2, 1fr); }
}

/* Portfolio Studio — curation (C2a): the entry management surface. */
.pf-inline-form { display: inline; }
.pf-chip-rank { background: var(--pf-accent, var(--pf-alert)); color: #fff; }
.pf-btn-danger { background: var(--pf-alert); border-color: var(--pf-alert); color: #fff; }
.pf-btn-danger:hover { filter: brightness(.92); }

/* Curation C2b — featured zone + reorder controls. */
.pf-btn-icon { padding-left: var(--pf-s-2); padding-right: var(--pf-s-2); }

/* HTMX request indicator (hidden until its request is in flight). */
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { display: inline; }

/* AI assist drawer (Phase E) — the "Draft with AI" review panel above the editor. */
.pf-studio-ai { margin: 0 0 var(--pf-s-3); }
.pf-studio-ai-launch { display: flex; align-items: center; gap: var(--pf-s-3); flex-wrap: wrap; }
.pf-studio-ai-ind { color: var(--pf-muted); font-size: .85rem; }
.pf-studio-ai-drawer:empty { display: none; }
.pf-studio-ai-panel {
  margin-top: var(--pf-s-3);
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-r-sm);
  background: color-mix(in srgb, var(--pf-blue, #2f6fed) 6%, var(--pf-surface));
  padding: var(--pf-s-3);
}
.pf-studio-ai-top { display: flex; align-items: center; gap: var(--pf-s-2); margin-bottom: var(--pf-s-2); }
.pf-studio-ai-title { font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.pf-studio-ai-badge { font-size: .72rem; padding: 2px 8px; border-radius: 999px; margin-left: auto; }
.pf-studio-ai-badge.ok { background: color-mix(in srgb, #2f9e5a 22%, transparent); color: #7fe0a3; }
.pf-studio-ai-badge.warn { background: color-mix(in srgb, #c9862b 24%, transparent); color: #f0c987; }
.pf-studio-ai-badge.muted { background: color-mix(in srgb, var(--pf-muted) 20%, transparent); color: var(--pf-muted); }
.pf-studio-ai-top .pf-btn-ghost { margin-left: 4px; }
.pf-studio-ai-form > .pf-muted { margin: 0 0 var(--pf-s-2); }
.pf-studio-aif { border-top: 1px solid var(--pf-border); padding: var(--pf-s-2) 0; }
.pf-studio-aif:first-of-type { border-top: 0; }
.pf-studio-aif-hd { display: flex; align-items: center; gap: var(--pf-s-2); margin-bottom: 4px; }
.pf-studio-aif-use { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: .9rem; }
.pf-studio-aif-hd .pf-btn { margin-left: auto; }
.pf-studio-aif-specs .pf-studio-spec-row { margin-bottom: 4px; }
.pf-studio-ai-roles { display: flex; flex-wrap: wrap; gap: var(--pf-s-2); }
.pf-studio-ai-role { margin: 0; text-align: center; }
.pf-studio-ai-role img { width: 84px; height: 64px; object-fit: cover; border-radius: var(--pf-r-sm); display: block; }
.pf-studio-ai-role figcaption { font-size: .72rem; color: var(--pf-muted); margin-top: 2px; }
.pf-studio-ai-foot { display: flex; gap: var(--pf-s-2); margin-top: var(--pf-s-3); }

/* ---------------------------------------------------------------------------
   Portfolio Studio — social pack screen (F1b-2). Platform tabs + format sub-tabs
   + a template filmstrip drive an on-demand card preview; the compose column edits
   the caption and records a manual post. Mirrors the authoring two-column shape.
   --------------------------------------------------------------------------- */
.pf-social-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: var(--pf-s-3, 16px); align-items: start; }
.pf-social-left { display: flex; flex-direction: column; gap: var(--pf-s-3, 16px); min-width: 0; }
.pf-social-right { display: flex; flex-direction: column; gap: var(--pf-s-3, 16px); min-width: 0; }

.pf-social-preview-wrap { display: flex; flex-direction: column; align-items: center; gap: var(--pf-s-2); justify-content: center; padding: var(--pf-s-3, 16px); background: var(--pf-panel, var(--pf-bg)); border: 1px solid var(--pf-border); border-radius: var(--pf-r-md, 10px); }
.pf-social-preview { width: 100%; max-width: 340px; height: auto; border-radius: var(--pf-r-sm, 6px); box-shadow: 0 2px 12px rgba(0, 0, 0, .18); background: #fff; }
.pf-social-stage { overflow: hidden; line-height: 0; }
.pf-social-stage .pf-card-stage { display: block; width: 100%; height: auto; }
.pf-social-stage foreignObject > div { width: 100%; height: 100%; }
.pf-social-stage-status { margin: 0; padding: 8px 10px; line-height: 1.35; font-size: .8rem; color: var(--pf-alert); background: var(--pf-bg); }
#pf-social-download-card[aria-disabled="true"] { opacity: .55; pointer-events: none; }

.pf-social-controls { display: flex; flex-direction: column; gap: var(--pf-s-3, 16px); }
.pf-social-ctl { display: flex; flex-direction: column; gap: 6px; }
.pf-social-ctl-lab { display: flex; align-items: center; gap: var(--pf-s-2); font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--pf-muted); }
.pf-social-ctl-lab .pf-btn { margin-left: auto; text-transform: none; letter-spacing: 0; }

/* Shared toggle-chip look for the platform tabs, format sub-tabs, and filmstrip. */
.pf-social-tabs, .pf-social-fmts, .pf-social-film { display: flex; flex-wrap: wrap; gap: 6px; }
.pf-social-tab, .pf-social-fmt, .pf-social-film-btn {
  font: inherit; font-size: .85rem; cursor: pointer;
  padding: 6px 12px; border: 1px solid var(--pf-border); border-radius: 999px;
  background: var(--pf-bg); color: var(--pf-text); transition: border-color .1s, background .1s;
}
.pf-social-tab:hover, .pf-social-fmt:hover, .pf-social-film-btn:hover { border-color: color-mix(in srgb, var(--pf-blue) 45%, var(--pf-border)); }
.pf-social-tab.is-active, .pf-social-fmt.is-active, .pf-social-film-btn.is-active {
  border-color: var(--pf-blue); background: color-mix(in srgb, var(--pf-blue) 12%, transparent);
  color: var(--pf-text); font-weight: 600;
}
.pf-social-film-btn { border-radius: var(--pf-r-sm, 6px); }
.pf-social-rec-badge { font-size: .68rem; font-weight: 600; padding: 1px 6px; margin-left: 6px; border-radius: 999px; background: color-mix(in srgb, var(--pf-terracotta) 20%, transparent); color: var(--pf-terracotta); }

.pf-social-compose { display: flex; flex-direction: column; gap: var(--pf-s-2); border: 1px solid var(--pf-border); border-radius: var(--pf-r-md, 10px); background: var(--pf-bg); padding: var(--pf-s-3, 16px); }
.pf-social-caption-actions { display: flex; flex-wrap: wrap; gap: var(--pf-s-2); }
.pf-social-post-actions { display: flex; flex-wrap: wrap; gap: var(--pf-s-2); margin-top: var(--pf-s-2); }
.pf-social-post-actions .pf-btn { flex: 1 1 auto; justify-content: center; }
.pf-social-carousel-opt { display: flex; align-items: center; gap: var(--pf-s-2); margin-top: 6px; font-size: .82rem; color: var(--pf-muted); }
/* The carousel controls hide on a story-only platform (JS toggles [hidden]); beat the .pf-btn display. */
#pf-social-carousel-btn[hidden], .pf-social-carousel-opt[hidden] { display: none; }

.pf-social-posted { border: 1px solid var(--pf-border); border-radius: var(--pf-r-md, 10px); background: var(--pf-bg); padding: var(--pf-s-3, 16px); }
.pf-social-posted-hd { font-size: .95rem; margin: 0 0 var(--pf-s-2); }
.pf-social-posted-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pf-social-posted-row { display: flex; align-items: center; gap: var(--pf-s-2); flex-wrap: wrap; padding: 6px 0; border-top: 1px solid var(--pf-border); }
.pf-social-posted-row:first-child { border-top: 0; }
.pf-social-posted-what { font-weight: 600; }
.pf-social-posted-when { color: var(--pf-muted); font-size: .8rem; }
.pf-social-posted-row .pf-inline-form { margin-left: auto; }

@media (max-width: 1180px) {
  .pf-social-grid { grid-template-columns: 1fr; }
}

/* Portfolio Studio — Clips panel (G2, operator clip upload). */
.pf-clip-upload { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pf-s-2); margin-bottom: var(--pf-s-2); }
.pf-clip-file { font: inherit; font-size: .85rem; max-width: 100%; }
.pf-clip-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--pf-s-2); }
.pf-clip { margin: 0; border: 1px solid var(--pf-border); border-radius: var(--pf-r-sm, 6px); overflow: hidden; }
.pf-clip-vid { width: 100%; display: block; max-height: 320px; background: #000; }
.pf-clip-meta { display: flex; align-items: center; justify-content: space-between; gap: var(--pf-s-2); padding: 6px 10px; background: var(--pf-bg); }
.pf-clip-meta form { margin: 0; }
.pf-clip-dur { font-size: .8rem; color: var(--pf-muted); font-variant-numeric: tabular-nums; }
.pf-clip-acts { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: var(--pf-s-2); }
.pf-clip-acts form { margin: 0; }
/* the meta row wraps so the hero pill + duration + the (now several) actions never overflow a card */
.pf-clip-meta { flex-wrap: wrap; }
/* P2-3: promote a video already attached to the job into the entry as a clip. */
.pf-clip-fromfiles { margin: 8px 0 0; font-size: .85rem; }
.pf-clip-fromfiles summary { cursor: pointer; color: var(--pf-muted); }
.pf-clip-fromfiles-list { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.pf-clip-fromfiles-list li { display: flex; align-items: center; justify-content: space-between; gap: var(--pf-s-2); }
.pf-clip-fromfiles-list form { margin: 0; }
.pf-clip-fromfiles-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Higgsfield ops panel (G4) — enqueue an honest-lane op per media row + the queue list. */
.pf-hf-sources { display: flex; flex-direction: column; gap: var(--pf-s-2); margin-bottom: var(--pf-s-3); }
.pf-hf-enqueue { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pf-s-2); margin: 0; }
.pf-hf-src-label { flex: 1 1 auto; min-width: 8rem; font-size: .8rem; color: var(--pf-muted); }
.pf-hf-op { width: auto; padding: var(--pf-s-2) var(--pf-s-3); border: 1px solid var(--pf-border); border-radius: var(--pf-r-sm); background: var(--pf-surface); color: inherit; font: inherit; font-size: .85rem; }
.pf-hf-queue-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.pf-hf-item { display: flex; align-items: center; gap: var(--pf-s-2); font-size: .8rem; }
.pf-hf-item-note { color: var(--pf-muted); }
/* P2-1: a thumbnail + jump-link for a done op's result media row. */
.pf-hf-thumb { width: 28px; height: 28px; object-fit: cover; border-radius: var(--pf-r-sm); border: 1px solid var(--pf-border); }
.pf-hf-item-link { text-decoration: none; }
.pf-hf-item-link:hover { text-decoration: underline; }
/* per-op enqueue params (P2-5) + queue-row cancel/release actions (P1-2) */
.pf-hf-param { padding: var(--pf-s-2) var(--pf-s-3); border: 1px solid var(--pf-border); border-radius: var(--pf-r-sm); background: var(--pf-surface); color: inherit; font: inherit; font-size: .85rem; }
.pf-hf-num { width: 5.5rem; }
.pf-hf-item-acts { margin-left: auto; display: flex; align-items: center; gap: var(--pf-s-2); }
.pf-hf-item-acts form { margin: 0; }
.pf-pill-claimed { color: var(--pf-blue); }
/* G5 runner control card (Curate) + the per-entry read-only liveness echo. */
.pf-hf-runner-status,
.pf-hf-runner-echo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pf-s-2); font-size: .8rem; margin-bottom: var(--pf-s-2); }
.pf-hf-runner-echo { margin-bottom: var(--pf-s-3); }
.pf-hf-runner-controls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pf-s-3); }
.pf-hf-runner-controls form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pf-s-2); margin: 0; }
.pf-hf-runner-auto, .pf-hf-runner-sched, .pf-hf-runner-interval, .pf-hf-runner-window { font-size: .8rem; color: var(--pf-muted); }
.pf-hf-sched-input { width: 9rem; padding: var(--pf-s-2) var(--pf-s-3); border: 1px solid var(--pf-border); border-radius: var(--pf-r-sm); background: var(--pf-surface); color: inherit; font: inherit; font-size: .85rem; }
.pf-hf-runner-controls .pf-hint { flex-basis: 100%; }

/* ── Mail (unified inbox, v55) ────────────────────────────────────────────── */
.pf-row-unread td { font-weight: 600; }
.pf-unread-dot { display: inline-block; width: .5rem; height: .5rem; margin-right: var(--pf-s-2);
  border-radius: 50%; background: var(--pf-console-link); vertical-align: middle; }
.pf-assign-row { display: flex; gap: var(--pf-s-2); align-items: center; flex-wrap: wrap; }
.pf-mail-thread { display: flex; flex-direction: column; gap: var(--pf-s-4); }
.pf-mail-msg { border: 1px solid var(--pf-border); border-radius: var(--pf-r-md);
  padding: var(--pf-s-3) var(--pf-s-4); background: var(--pf-surface); }
.pf-mail-msg.pf-dir-outbound { border-left: 3px solid var(--pf-console-link); }
.pf-mail-msg.pf-dir-inbound { border-left: 3px solid var(--pf-console-accent); }
.pf-mail-msg-head { display: flex; gap: var(--pf-s-3); align-items: baseline; flex-wrap: wrap;
  margin-bottom: var(--pf-s-2); }
.pf-mail-from { font-weight: 600; }
.pf-mail-body { white-space: pre-wrap; word-break: break-word; margin: 0; font: inherit;
  font-size: .9rem; line-height: 1.5; }
.pf-mail-attachments { display: flex; gap: var(--pf-s-2); align-items: center; flex-wrap: wrap;
  margin-top: var(--pf-s-3); }
.pf-mail-msg-foot { display: flex; gap: var(--pf-s-4); align-items: center; flex-wrap: wrap;
  margin-top: var(--pf-s-3); font-size: .85rem; }
.pf-mail-iframe { width: 100%; height: 28rem; margin-top: var(--pf-s-2);
  border: 1px solid var(--pf-border); border-radius: var(--pf-r-sm); background: #fff; }
.pf-tl-thread { margin-left: var(--pf-s-2); }

/* ============================================================================
   CONSOLE REDESIGN - OPS / RECORDS (PR E1): Mail, Mail thread, Outbox,
   Customers, Customer detail, Customer message. Scoped under .pf-rd so the
   not-yet-migrated pages keep the old vocabulary. Ported from
   docs/console-redesign/{console.css,console-pages.css,console-board.css};
   the package's --pf-tint-blue maps to this app's --pf-tint-link (its .pf-tag
   analog). The old superseded mail rules above are left for the family-G cleanup.
   ========================================================================== */

/* Sub-view tab bar (Inbox / Outbox) - package console.css .pf-sectabs */
.pf-rd .pf-sectabs{display:flex; gap:2px; margin:0 0 22px; border-bottom:1px solid var(--pf-border); overflow-x:auto;}
.pf-rd .pf-sectabs::-webkit-scrollbar{height:0;}
.pf-rd .pf-sectab{display:inline-flex; align-items:center; gap:7px; padding:11px 15px; border:0; background:transparent; color:var(--pf-muted); font:600 13px/1 var(--pf-font); text-decoration:none; white-space:nowrap; cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; transition:color var(--dur) var(--ease);}
.pf-rd .pf-sectab:hover{color:var(--pf-text); text-decoration:none;}
.pf-rd .pf-sectab.is-on{color:var(--act); border-bottom-color:var(--act);}
.pf-rd .pf-sectab .pf-icon{width:15px; height:15px;}
.pf-rd .pf-sectab-n{font-family:var(--mono); font-size:10px; color:var(--pf-muted); background:var(--pf-surface-2); border-radius:var(--r-pill); padding:1px 7px;}
.pf-rd .pf-sectab.is-on .pf-sectab-n{color:var(--act); background:var(--act-tint);}

/* Section head (the "Needs attention / Open / Archived" group labels + note) */
.pf-rd .pf-section-label{display:flex; align-items:center; gap:10px; margin:2px 2px 8px;}
.pf-rd .pf-sec-note{margin:0 2px 12px; color:var(--pf-muted); font-size:12.5px; line-height:1.5;}
.pf-rd .pf-mail-sec{margin-bottom:28px;}
.pf-rd .pf-mail-sec:last-child{margin-bottom:0;}

/* Attention count pill: warm variant of .pf-count - package console-pages.css */
.pf-rd .pf-count-warn{color:var(--pf-warning); background:var(--pf-tint-warm); border-color:color-mix(in srgb,var(--pf-warning) 34%,transparent);}

/* Job chip (mono PF-id link inside a table cell) - package .pf-jobchip */
.pf-rd .pf-jobchip{display:inline-flex; align-items:center; font-family:var(--mono); font-size:10.5px; font-weight:600; color:var(--link); background:var(--pf-tint-link); border:1px solid color-mix(in srgb,var(--link) 24%,transparent); border-radius:5px; padding:3px 8px; text-decoration:none;}
.pf-rd .pf-jobchip:hover{border-color:color-mix(in srgb,var(--link) 50%,transparent);}

/* Counterparty cell (unread dot + name) - replaces the mockup's inline flex */
.pf-rd .pf-cparty{display:inline-flex; align-items:center; gap:8px;}

/* Outbox: quiet-mode panel (the .pf-callout carries the box; .is-warn = paused),
   the narrow feed filter input, muted error cell, and the purge foot. */
.pf-rd .pf-quiet-panel{margin-bottom:22px;}
.pf-rd .pf-quiet-panel.is-warn{border-left-color:var(--pf-warning); background:var(--pf-tint-warm);}
.pf-rd .pf-quiet-status{display:flex; align-items:center; gap:8px; font-weight:600; font-size:13.5px; color:var(--pf-text); margin:0 0 6px;}
.pf-rd .pf-quiet-act{margin-top:10px;}
.pf-rd .pf-input.pf-input-sm{width:auto; max-width:160px;}
.pf-rd .pf-jtable td.pf-err{color:var(--pf-muted); font-size:12px; max-width:22rem; word-break:break-word;}
.pf-rd .pf-feed-cap-note{text-align:right;}
.pf-rd .pf-feed-foot{display:flex; justify-content:flex-end; margin-top:12px;}

/* Customers roster - package console-pages.css .pf-standing / .pf-cid / .pf-returning.
   The base .pf-standing renders neutral so an unmapped standing still reads. */
.pf-rd .pf-standing{display:inline-flex; align-items:center; font-family:var(--mono); font-size:9.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; padding:3px 9px; border-radius:var(--r-pill); border:1px solid var(--pf-border); color:var(--pf-muted); background:var(--pf-surface-2); white-space:nowrap;}
.pf-rd .pf-standing.good{color:var(--pf-success); border-color:color-mix(in srgb,var(--pf-success) 34%,transparent); background:var(--pf-tint-success);}
.pf-rd .pf-standing.watch{color:var(--pf-warning); border-color:color-mix(in srgb,var(--pf-warning) 34%,transparent); background:var(--pf-tint-warm);}
.pf-rd .pf-cid{font-family:var(--mono); font-size:10px; color:var(--pf-muted); margin-top:3px;}
.pf-rd .pf-returning{display:inline-flex; align-items:center; font-family:var(--mono); font-size:9px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--act); border:1px solid color-mix(in srgb,var(--act) 34%,transparent); background:var(--act-tint); border-radius:5px; padding:2px 6px; margin-left:8px;}
.pf-rd .pf-cname-cell{display:flex; flex-direction:column;}
.pf-rd .pf-cname-cell .cname{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.pf-rd .pf-add{margin-top:20px;}
.pf-rd .pf-add > summary{cursor:pointer; font-weight:600; font-size:13px; color:var(--link); display:inline-flex; align-items:center; gap:7px; padding:6px 0;}
.pf-rd .pf-add-grid{display:flex; gap:12px; flex-wrap:wrap; margin:12px 0;}
.pf-rd .pf-add-grid .pf-input{width:auto; flex:1 1 180px;}

/* Detail-page side cards + mono tech label + kv lines (Customer message + detail
   asides). Ported from package console.css/console-job.css. */
.pf-rd .pf-side-card{border:1px solid var(--pf-border); border-radius:var(--r-md); padding:13px 14px; background:var(--pf-surface);}
.pf-rd .pf-side-card + .pf-side-card{margin-top:14px;}
.pf-rd .pf-side-card .sc-h{font-family:var(--mono); font-size:9px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--pf-muted); margin-bottom:9px;}
.pf-rd .pf-tech{font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.02em; color:var(--pf-muted); text-transform:uppercase; white-space:nowrap;}
.pf-rd .pf-kv-line{padding:7px 0; font-size:12.5px; border-bottom:1px solid var(--pf-border);}
.pf-rd .pf-kv-line:last-child{border-bottom:0;}
.pf-rd .pf-kv-line .pf-tech{display:block; margin-bottom:2px;}

/* Mail thread: assignment side-card strip, message .pf-dcard bubbles + headers,
   and the View-formatted disclosure. Bubble .pf-mail-* selectors are re-scoped
   under .pf-rd here (the unscoped originals stay for non-migrated surfaces). */
.pf-rd .pf-side-card.pf-assign-card{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:16px;}
.pf-rd .pf-assign-tx{flex:1 1 300px;}
.pf-rd .pf-assign-tx p{font-size:12.5px; color:var(--pf-text); margin:0;}
.pf-rd .pf-assign-act{display:flex; gap:8px; flex-wrap:wrap; align-items:center;}
.pf-rd .pf-mail-thread{display:flex; flex-direction:column; gap:14px; margin-bottom:16px;}
.pf-rd .pf-msg-card{margin:0;}
.pf-rd .pf-msg-card.pf-dir-outbound{border-left:3px solid color-mix(in srgb,var(--pf-success) 55%,var(--pf-border));}
.pf-rd .pf-msg-card.pf-dir-inbound{border-left:3px solid color-mix(in srgb,var(--link) 45%,var(--pf-border));}
.pf-rd .pf-dcard-h{display:flex; align-items:center; gap:10px; margin-bottom:12px;}
.pf-rd .pf-dcard-h h3{font-size:14px; font-weight:600;}
.pf-rd .pf-msg-ts{margin-left:auto; font-size:12px; color:var(--pf-muted);}
.pf-rd .pf-mail-body{white-space:pre-wrap; font-family:inherit; font-size:13.5px; line-height:1.6; color:var(--pf-text); margin:0;}
.pf-rd .pf-mail-attachments{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:12px;}
.pf-rd .pf-mail-msg-foot{display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-top:12px;}
.pf-rd .pf-disclosure{border:1px solid var(--pf-border); border-radius:var(--r-sm); overflow:hidden;}
.pf-rd .pf-disclosure > summary{padding:9px 12px; cursor:pointer; font-size:12.5px; font-weight:600; color:var(--link); list-style:none; display:flex; align-items:center; gap:8px; background:var(--pf-surface);}
.pf-rd .pf-disclosure > summary::-webkit-details-marker{display:none;}
.pf-rd .pf-disclosure > summary::before{content:"\25B8"; font-size:10px; transition:transform var(--dur);}
.pf-rd .pf-disclosure[open] > summary::before{transform:rotate(90deg);}
.pf-rd .pf-disclosure-body{padding:12px;}
.pf-rd .pf-mail-iframe{width:100%; height:220px; border:1px solid var(--pf-border); border-radius:8px; background:#fff; margin-top:8px;}

/* Customer detail: contact field grid, static (non-link) job rows, timeline
   event rows for recent communication. Reuses .pf-ljob / .pf-dcard / .pf-side-card. */
.pf-rd .pf-fgrid{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.pf-rd .pf-fgrid .pf-field.full{grid-column:1 / -1;}
.pf-rd .pf-detail-list{display:flex; flex-direction:column;}
.pf-rd .pf-ljob.is-static{cursor:default;}
.pf-rd .pf-ljob.is-static:hover{background:transparent;}
.pf-rd .pf-ev{display:flex; gap:12px; padding:9px 2px; font-size:12.5px; border-bottom:1px solid var(--pf-border);}
.pf-rd .pf-ev:last-child{border-bottom:0;}
.pf-rd .pf-ev .when{flex:none; width:104px; color:var(--pf-muted); font-size:11.5px;}
.pf-rd .pf-ev .lab{flex:1; min-width:0; color:var(--pf-text); line-height:1.5;}
.pf-rd .pf-detail-save{margin-top:14px;}
.pf-rd .pf-side-card .pf-select{width:100%;}
.pf-rd .pf-side-card form .pf-btn{margin-top:10px;}
@media(max-width:640px){ .pf-rd .pf-fgrid{grid-template-columns:1fr;} .pf-rd .pf-ev .when{width:auto;} }

/* G8B: customer communication detail containment and accessible form geometry.
   These refinements stay inside the E1 customer and Mail detail surfaces. */
.pf-rd.pf-detail-page,
.pf-rd.pf-message-page,
.pf-rd.pf-thread-page{min-width:0;}
.pf-rd.pf-detail-page .pf-phead-tx,
.pf-rd.pf-message-page .pf-phead-tx,
.pf-rd.pf-thread-page .pf-phead-tx,
.pf-rd.pf-detail-page .pf-two > *,
.pf-rd.pf-message-page .pf-two > *{min-width:0;}
.pf-rd.pf-detail-page .pf-phead h1{
  display:flex; min-width:0; align-items:center; gap:6px 8px; flex-wrap:wrap;
}
.pf-rd.pf-detail-page .pf-detail-name,
.pf-rd.pf-message-page .pf-message-name,
.pf-rd.pf-thread-page .pf-thread-subject,
.pf-rd.pf-thread-page .pf-thread-counterpart,
.pf-rd.pf-thread-page .pf-thread-address{overflow-wrap:anywhere;}
.pf-rd.pf-message-page .pf-crumb,
.pf-rd.pf-thread-page .pf-crumb{min-width:0; flex-wrap:wrap;}
.pf-rd.pf-message-page .pf-crumb a,
.pf-rd.pf-thread-page .pf-crumb a{min-width:0; overflow-wrap:anywhere;}

.pf-rd.pf-detail-page .pf-fgrid .pf-field{min-width:0;}
.pf-rd.pf-detail-page .pf-fgrid .pf-input,
.pf-rd.pf-detail-page .pf-fgrid .pf-select{box-sizing:border-box; width:100%; min-width:0;}
.pf-rd.pf-detail-page .pf-dcard-h{min-width:0; align-items:flex-start; flex-wrap:wrap;}
.pf-rd.pf-detail-page .pf-dcard-h h3{min-width:0; overflow-wrap:anywhere;}
.pf-rd.pf-detail-page .pf-dcard-h .pf-count{
  max-width:100%; white-space:normal; overflow-wrap:anywhere;
}
.pf-rd.pf-detail-page .pf-ljob-main .top b,
.pf-rd.pf-detail-page .pf-ljob-main .desc,
.pf-rd.pf-detail-page .pf-ev .lab{overflow-wrap:anywhere;}
.pf-rd.pf-detail-page .pf-side-card,
.pf-rd.pf-message-page .pf-side-card,
.pf-rd.pf-message-page .pf-kv-line{min-width:0; overflow-wrap:anywhere;}

.pf-rd.pf-message-page .pf-message-card{grid-template-columns:minmax(0,1fr); min-width:0;}
.pf-rd.pf-message-page .pf-message-card > *{min-width:0; max-width:100%;}
.pf-rd.pf-message-page .pf-copy-box{box-sizing:border-box; min-width:0;}
.pf-rd.pf-message-page .pf-copy-box .pf-input{flex:1 1 auto; min-width:0;}
.pf-rd.pf-message-page .pf-copy-box .pf-copy-btn{width:38px; height:38px;}
.pf-rd.pf-message-page .pf-message-card .pf-note{overflow-wrap:anywhere;}
.pf-rd.pf-message-page .pf-message-card textarea{box-sizing:border-box; min-width:0;}

.pf-rd.pf-thread-page .pf-side-card.pf-assign-card,
.pf-rd.pf-thread-page .pf-assign-tx,
.pf-rd.pf-thread-page .pf-assign-act{min-width:0;}
.pf-rd.pf-thread-page .pf-assign-act > form{max-width:100%;}
.pf-rd.pf-thread-page .pf-assign-row{min-width:0; max-width:100%;}
.pf-rd.pf-thread-page .pf-assign-row .pf-select{
  box-sizing:border-box; flex:1 1 22rem; width:min(32rem,100%); min-width:0; max-width:100%;
}
.pf-rd.pf-thread-page .pf-msg-card{min-width:0;}
.pf-rd.pf-thread-page .pf-msg-card .pf-dcard-h{min-width:0; align-items:flex-start; flex-wrap:wrap;}
.pf-rd.pf-thread-page .pf-mail-from{min-width:0; overflow-wrap:anywhere;}
.pf-rd.pf-thread-page .pf-msg-ts{white-space:nowrap;}
.pf-rd.pf-thread-page .pf-attach-item{
  display:inline-flex; min-width:0; max-width:100%; align-items:center; gap:6px; flex-wrap:wrap;
}
.pf-rd.pf-thread-page .pf-attach-link{
  min-width:0; max-width:100%; white-space:normal; overflow-wrap:anywhere;
}
.pf-rd.pf-thread-page .pf-mail-msg-foot,
.pf-rd.pf-thread-page .pf-mail-formatted,
.pf-rd.pf-thread-page .pf-disclosure-body{box-sizing:border-box; min-width:0; max-width:100%;}
.pf-rd.pf-thread-page .pf-mail-iframe{display:block; box-sizing:border-box; min-width:0; max-width:100%;}
.pf-rd.pf-thread-page .pf-reply-card,
.pf-rd.pf-thread-page .pf-reply-card .pf-compose-form,
.pf-rd.pf-thread-page #pf-body-wrap,
.pf-rd.pf-thread-page .pf-weave-row,
.pf-rd.pf-thread-page .pf-compose-actions{min-width:0;}
.pf-rd.pf-thread-page .pf-reply-card .pf-compose-textarea,
.pf-rd.pf-thread-page .pf-weave-input{box-sizing:border-box; width:100%; min-width:0;}

@media(max-width:640px){
  .pf-rd.pf-detail-page .pf-phead-actions,
  .pf-rd.pf-message-page .pf-phead-actions,
  .pf-rd.pf-thread-page .pf-phead-actions{width:100%; min-width:0; flex-wrap:wrap;}
  .pf-rd.pf-detail-page .pf-phead-actions > .pf-btn,
  .pf-rd.pf-message-page .pf-phead-actions > .pf-btn,
  .pf-rd.pf-thread-page .pf-phead-actions > form,
  .pf-rd.pf-thread-page .pf-phead-actions .pf-btn{flex:1 1 100%; width:100%;}
  .pf-rd.pf-detail-page .pf-dcard,
  .pf-rd.pf-message-page .pf-dcard,
  .pf-rd.pf-thread-page .pf-dcard{padding:16px 14px;}
  .pf-rd.pf-detail-page .pf-dcard-h .pf-count{flex:1 1 100%;}
  .pf-rd.pf-detail-page .pf-ev{align-items:flex-start; flex-direction:column; gap:4px;}
  .pf-rd.pf-detail-page .pf-ljob-act{width:100%; justify-content:flex-start;}
  .pf-rd.pf-message-page .pf-copy-box .pf-copy-btn{width:44px; height:44px;}
  .pf-rd.pf-message-page .pf-form-actions .pf-btn{width:100%;}

  .pf-rd.pf-thread-page .pf-side-card.pf-assign-card{align-items:stretch; flex-direction:column;}
  .pf-rd.pf-thread-page .pf-assign-act{align-items:stretch; flex-direction:column; width:100%;}
  .pf-rd.pf-thread-page .pf-assign-act > form,
  .pf-rd.pf-thread-page .pf-assign-row,
  .pf-rd.pf-thread-page .pf-assign-act .pf-btn{width:100%; max-width:none;}
  .pf-rd.pf-thread-page .pf-assign-row .pf-select{
    flex:0 0 44px; width:100%; height:44px; min-height:44px; max-width:none;
  }
  .pf-rd.pf-thread-page .pf-assign-row{align-items:stretch; flex-direction:column;}
  .pf-rd.pf-thread-page .pf-msg-card .pf-dcard-h{gap:7px 9px;}
  .pf-rd.pf-thread-page .pf-mail-from{flex:1 1 calc(100% - 6rem);}
  .pf-rd.pf-thread-page .pf-msg-ts{width:100%; margin-left:0;}
  .pf-rd.pf-thread-page .pf-attach-item{align-items:stretch; width:100%;}
  .pf-rd.pf-thread-page .pf-attach-link{flex:1 1 12rem;}
  .pf-rd.pf-thread-page .pf-mail-msg-foot{align-items:stretch; flex-direction:column;}
  .pf-rd.pf-thread-page .pf-mail-formatted,
  .pf-rd.pf-thread-page .pf-mail-msg-foot > .pf-btn{width:100%;}
  .pf-rd.pf-thread-page .pf-weave-row{align-items:stretch; flex-direction:column;}
  .pf-rd.pf-thread-page .pf-weave-row .pf-btn,
  .pf-rd.pf-thread-page .pf-compose-actions .pf-btn{width:100%;}
}

/* ============================================================================
   CONSOLE REDESIGN - OPS (PR E2): Reconcile, Audit, Files + Trash, Printers.
   Scoped under .pf-rd; reuses the PR A-E1 primitives, adds only the gaps below.
   Ported from docs/console-redesign/{reconcile,audit,files,trash,printers}.html
   + console-pages.css. Old superseded rules stay for the family-G cleanup.
   ========================================================================== */

/* Generic warm callout (no-spools notice, warnings) */
.pf-rd .pf-callout.is-warn{border-left-color:var(--pf-warning); background:var(--pf-tint-warm);}

/* Generic Ops section spacer (Audit/Files/Printers section groups) */
.pf-rd .pf-ops-sec{margin-bottom:24px;}

/* Reconcile: section spacing + the spool-match inline form */
.pf-rd .pf-recon-sec{margin-bottom:24px;}
.pf-rd .pf-recon-form{display:flex; gap:8px; align-items:center; min-width:0;}
.pf-rd .pf-recon-form .pf-select{flex:1 1 150px; min-width:120px;}

/* Audit: armed-state callout + the arm form row */
.pf-rd .pf-callout.is-ok{border-left-color:var(--pf-success); background:var(--pf-tint-success);}
.pf-rd .pf-arm-form{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:10px;}
.pf-rd .pf-audit-links{margin:12px 0;}

/* Trash: the purge <details> (summary = danger button, revealed typed-confirm form) */
.pf-rd .pf-trash-actions{display:flex; gap:8px; align-items:flex-start; flex-wrap:wrap;}
.pf-rd .pf-trash-purge > summary{list-style:none; cursor:pointer;}
.pf-rd .pf-trash-purge > summary::-webkit-details-marker{display:none;}
.pf-rd .pf-trash-form{display:flex; flex-direction:column; gap:8px; align-items:flex-start; padding:12px 14px; margin-top:8px; border:1px solid var(--pf-border); border-radius:var(--r-sm); background:var(--pf-surface); max-width:320px;}
.pf-rd .pf-trash-form label{display:block; font-size:12.5px; color:var(--pf-text);}
.pf-rd .pf-trash-form code{font-family:var(--mono); background:var(--pf-surface-2); border-radius:4px; padding:1px 5px;}

/* G1: Printers fleet-control hub. Aggregate bridge health, status composition,
   thermal readouts, progress, latest-still honesty, and the existing controls. */
.pf-rd.pf-printers-page .pf-hub{display:flex; flex-direction:column; gap:20px;}
.pf-rd.pf-printers-page .pf-hub-ribbon{position:relative; overflow:hidden; border-radius:var(--r-lg); background:var(--pf-dark); color:var(--pf-on-dark); border:1px solid rgba(255,255,255,.09); box-shadow:var(--sh2); padding:20px 24px; display:grid; grid-template-columns:auto minmax(300px,1fr) auto; gap:30px; align-items:center;}
.pf-rd.pf-printers-page .pf-hub-ribbon::before{content:""; position:absolute; inset:0; pointer-events:none; background-image:linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px); background-size:26px 26px;}
.pf-rd.pf-printers-page .pf-hub-ribbon > *{position:relative;}
.pf-rd.pf-printers-page .rb-lead .rl-eyebrow{font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--pf-blue-lite); display:flex; align-items:center; gap:8px;}
.pf-rd.pf-printers-page .rb-lead .rl-eyebrow::before{content:""; width:14px; height:1.5px; background:var(--pf-blue-lite); opacity:.8;}
.pf-rd.pf-printers-page .rb-lead .rl-big{font-size:40px; font-weight:700; line-height:1; margin-top:9px; letter-spacing:-.02em; font-variant-numeric:tabular-nums;}
.pf-rd.pf-printers-page .rb-lead .rl-big b{color:var(--pf-terra-lite);}
.pf-rd.pf-printers-page .rb-lead .rl-sub{font-size:12px; color:rgba(226,234,241,.64); margin-top:6px;}
.pf-rd.pf-printers-page .pf-hub-mid{display:flex; flex-direction:column; gap:12px; min-width:0;}
.pf-rd.pf-printers-page .pf-hub-counts{display:flex; gap:10px; flex-wrap:wrap;}
.pf-rd.pf-printers-page .hc{flex:1 1 0; min-width:88px; border:1px solid rgba(255,255,255,.09); border-radius:var(--r-md); background:rgba(255,255,255,.03); padding:11px 13px;}
.pf-rd.pf-printers-page .hc-top{display:flex; align-items:center; gap:9px;}
.pf-rd.pf-printers-page .hc-dot{width:9px; height:9px; border-radius:50%; background:var(--_c,var(--pf-muted-dark)); flex:none;}
.pf-rd.pf-printers-page .hc-n{font-size:23px; font-weight:700; line-height:1; font-variant-numeric:tabular-nums; margin-left:auto;}
.pf-rd.pf-printers-page .hc-l{font-family:var(--mono); font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:rgba(226,234,241,.62); margin-top:8px;}
.pf-rd.pf-printers-page .hc.printing{--_c:var(--pf-success);}
.pf-rd.pf-printers-page .hc.idle{--_c:var(--pf-blue-lite);}
.pf-rd.pf-printers-page .hc.attention{--_c:var(--pf-warning);}
.pf-rd.pf-printers-page .hc.offline{--_c:var(--pf-muted-dark);}
.pf-rd.pf-printers-page .hc.printing .hc-dot,.pf-rd.pf-printers-page .hc.attention .hc-dot{animation:pf-printer-beacon 1.9s var(--ease) infinite;}
.pf-rd.pf-printers-page .pf-hub-compose{height:10px; border-radius:var(--r-pill); overflow:hidden; display:flex; gap:2px; background:rgba(255,255,255,.05);}
.pf-rd.pf-printers-page .pf-hub-compose > span{display:block; height:100%; border-radius:2px; flex:1 1 0;}
.pf-rd.pf-printers-page .pf-hub-compose > .printing{background:var(--pf-success);}
.pf-rd.pf-printers-page .pf-hub-compose > .idle{background:var(--pf-blue-lite);}
.pf-rd.pf-printers-page .pf-hub-compose > .attention{background:var(--pf-warning);}
.pf-rd.pf-printers-page .pf-hub-compose > .offline{background:var(--pf-muted-dark);}
.pf-rd.pf-printers-page .pf-hub-compose.is-empty{border:1px dashed rgba(255,255,255,.18);}
.pf-rd.pf-printers-page .pf-hub-bridge{display:flex; flex-direction:column; gap:9px; align-items:flex-end; text-align:right; white-space:nowrap;}
.pf-rd.pf-printers-page .pf-hub-bp{display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:#5EE0B0; border:1px solid rgba(94,224,176,.34); background:rgba(94,224,176,.12); border-radius:var(--r-pill); padding:5px 12px;}
.pf-rd.pf-printers-page .pf-hub-bp .hc-dot{--_c:#5EE0B0; animation:pf-printer-beacon 1.9s var(--ease) infinite;}
.pf-rd.pf-printers-page .pf-hub-bp.is-quiet{color:var(--pf-muted); border-color:var(--pf-border); background:var(--pf-surface-2);}
.pf-rd.pf-printers-page .pf-hub-bp.is-quiet .hc-dot{--_c:var(--pf-muted); animation:none;}
.pf-rd.pf-printers-page .pf-hub-bridge .bmeta{font-family:var(--mono); font-size:10.5px; color:rgba(226,234,241,.58); letter-spacing:.02em;}
.pf-rd.pf-printers-page .pf-eq{display:inline-flex; align-items:flex-end; gap:2.5px; height:15px;}
.pf-rd.pf-printers-page .pf-eq i{width:3px; border-radius:1px; background:#5EE0B0; height:35%; transform-origin:bottom;}
.pf-rd.pf-printers-page .pf-eq.live i{animation:pf-printer-eq 1s var(--ease) infinite;}
.pf-rd.pf-printers-page .pf-eq i:nth-child(2){animation-delay:.12s;}
.pf-rd.pf-printers-page .pf-eq i:nth-child(3){animation-delay:.28s;}
.pf-rd.pf-printers-page .pf-eq i:nth-child(4){animation-delay:.42s;}
.pf-rd.pf-printers-page .pf-eq i:nth-child(5){animation-delay:.6s;}

.pf-rd.pf-printers-page .pf-hub-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(420px,1fr)); gap:16px;}
.pf-rd.pf-printers-page .pf-machine{--_c:var(--pf-border-strong); position:relative; overflow:hidden; border:1px solid var(--pf-border); border-radius:var(--r-lg); background:var(--pf-bg); box-shadow:var(--sh1); display:flex; flex-direction:column; transition:box-shadow var(--dur) var(--ease),border-color var(--dur) var(--ease);}
.pf-rd.pf-printers-page .pf-machine:hover{box-shadow:var(--sh2);}
.pf-rd.pf-printers-page .pf-machine::before{content:""; position:absolute; top:0; left:0; right:0; height:3px; background:var(--_c); z-index:1;}
.pf-rd.pf-printers-page .pf-machine.printing{--_c:var(--pf-success);}
.pf-rd.pf-printers-page .pf-machine.idle{--_c:var(--pf-muted);}
.pf-rd.pf-printers-page .pf-machine.attention{--_c:var(--pf-warning);}
.pf-rd.pf-printers-page .pf-machine.error{--_c:var(--pf-alert); border-color:color-mix(in srgb,var(--pf-alert) 34%,transparent);}
.pf-rd.pf-printers-page .pf-machine.offline{--_c:var(--pf-border-strong);}
.pf-rd.pf-printers-page .pf-machine-h{display:flex; align-items:center; gap:12px; padding:16px 18px 13px;}
.pf-rd.pf-printers-page .pf-machine-h .mh-tx{min-width:0;}
.pf-rd.pf-printers-page .pf-machine-h h3{font-family:var(--mono); font-size:15px; font-weight:600; letter-spacing:.01em; color:var(--pf-text); margin:0;}
.pf-rd.pf-printers-page .pf-machine-h .mh-model{font-size:11px; color:var(--pf-muted); margin-top:3px;}
.pf-rd.pf-printers-page .pf-mstat{margin-left:auto; display:inline-flex; align-items:center; gap:7px; font-family:var(--mono); font-size:9.5px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--_c); border:1px solid color-mix(in srgb,var(--_c) 36%,transparent); background:color-mix(in srgb,var(--_c) 12%,transparent); border-radius:var(--r-pill); padding:5px 11px; flex:none;}
.pf-rd.pf-printers-page .pf-mstat .live{width:7px; height:7px; border-radius:50%; background:var(--_c);}
.pf-rd.pf-printers-page .pf-machine.printing .pf-mstat .live,.pf-rd.pf-printers-page .pf-machine.error .pf-mstat .live{animation:pf-printer-beacon 1.9s var(--ease) infinite;}
.pf-rd.pf-printers-page .pf-machine-body{display:grid; grid-template-columns:132px minmax(0,1fr); gap:20px; padding:6px 18px 14px; align-items:center;}
.pf-rd.pf-printers-page .pf-ring{position:relative; width:132px; height:132px; flex:none;}
.pf-rd.pf-printers-page .pf-ring svg{width:100%; height:100%; transform:rotate(-90deg);}
.pf-rd.pf-printers-page .pf-ring .track{fill:none; stroke:var(--pf-border); stroke-width:9;}
.pf-rd.pf-printers-page .pf-ring .fill{fill:none; stroke:var(--_c); stroke-width:9; stroke-linecap:round; animation:pf-printer-ring-charge .7s var(--ease) both;}
.pf-rd.pf-printers-page .pf-ring.blank .fill{stroke:var(--pf-border-strong); stroke-dasharray:2.5 7; stroke-dashoffset:0; animation:none;}
.pf-rd.pf-printers-page .pf-ring .ctr{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;}
.pf-rd.pf-printers-page .pf-ring .ctr .pct{font-size:27px; font-weight:700; letter-spacing:-.02em; font-variant-numeric:tabular-nums; color:var(--pf-text); line-height:1;}
.pf-rd.pf-printers-page .pf-ring .ctr .st{font-family:var(--mono); font-size:8px; letter-spacing:.11em; text-transform:uppercase; color:var(--_c);}
.pf-rd.pf-printers-page .pf-ring.blank .ctr .pct{font-size:18px; color:var(--pf-muted);}
.pf-rd.pf-printers-page .pf-readout{display:flex; flex-direction:column; gap:11px; min-width:0;}
.pf-rd.pf-printers-page .pf-gauge{display:grid; grid-template-columns:30px minmax(50px,1fr) auto; align-items:center; gap:10px;}
.pf-rd.pf-printers-page .pf-gauge .gl{font-family:var(--mono); font-size:9px; letter-spacing:.05em; text-transform:uppercase; color:var(--pf-muted);}
.pf-rd.pf-printers-page .pf-gauge .gt{position:relative; height:8px; border-radius:var(--r-pill); background:var(--pf-surface-2); border:1px solid var(--pf-border); overflow:hidden;}
.pf-rd.pf-printers-page .pf-gauge .gt > i{display:block; height:100%; background:var(--act); border-radius:var(--r-pill); transition:width .6s var(--ease);}
.pf-rd.pf-printers-page .pf-gauge.warn .gt > i{background:var(--pf-warning);}
.pf-rd.pf-printers-page .pf-gauge .gv{font-family:var(--mono); font-size:11px; font-variant-numeric:tabular-nums; color:var(--pf-text); white-space:nowrap;}
.pf-rd.pf-printers-page .pf-gauge .gv .tg{color:var(--pf-muted);}
.pf-rd.pf-printers-page .pf-mmeta{display:flex; flex-direction:column; gap:6px; margin-top:3px; padding-top:11px; border-top:1px solid var(--pf-border);}
.pf-rd.pf-printers-page .pf-mmeta .mr{display:flex; align-items:baseline; gap:9px; font-size:12px; min-width:0;}
.pf-rd.pf-printers-page .pf-mmeta .mr .k{font-family:var(--mono); font-size:8.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--pf-muted); width:46px; flex:none;}
.pf-rd.pf-printers-page .pf-mmeta .mr .v{color:var(--pf-text); min-width:0;}
.pf-rd.pf-printers-page .pf-mmeta .mr .v.mono{font-family:var(--mono); font-size:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.pf-rd.pf-printers-page .pf-mmeta .mr .v.eta{color:var(--_c); font-weight:600;}
.pf-rd.pf-printers-page .pf-mmeta .mr.alert{align-items:flex-start; border-left:2px solid var(--_c); padding-left:8px;}
.pf-rd.pf-printers-page .pf-mmeta .mr.alert .v{line-height:1.35; color:var(--pf-text);}
.pf-rd.pf-printers-page .pf-feed{position:relative; margin:0 18px 14px; min-height:104px; border-radius:var(--r-md); overflow:hidden; border:1px solid var(--pf-border); background:var(--pf-dark); display:grid; place-items:center; text-decoration:none;}
.pf-rd.pf-printers-page .pf-feed::before{content:""; position:absolute; inset:0; pointer-events:none; background:repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 4px); z-index:1;}
.pf-rd.pf-printers-page .pf-feed img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.72;}
.pf-rd.pf-printers-page .pf-feed .fl-tag{position:absolute; top:9px; left:9px; z-index:2; display:inline-flex; align-items:center; gap:6px; white-space:nowrap; font-family:var(--mono); font-size:8px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.86); background:rgba(0,0,0,.42); border:1px solid rgba(255,255,255,.16); border-radius:5px; padding:3px 8px;}
.pf-rd.pf-printers-page .pf-feed .fl-tag .hc-dot{--_c:var(--pf-terra-lite); width:6px; height:6px;}
.pf-rd.pf-printers-page .pf-feed .fl-mid{position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; gap:6px; color:rgba(226,234,241,.58); font-family:var(--mono); font-size:10px; letter-spacing:.04em;}
.pf-rd.pf-printers-page .pf-feed .fl-mid .pf-icon{width:22px; height:22px; opacity:.7;}
.pf-rd.pf-printers-page .pf-feed .fl-open{position:absolute; bottom:9px; right:9px; z-index:2; font-family:var(--mono); font-size:9px; letter-spacing:.06em; color:rgba(255,255,255,.7); border:1px solid rgba(255,255,255,.2); border-radius:5px; padding:3px 8px; background:rgba(0,0,0,.28);}
.pf-rd.pf-printers-page .pf-feed:hover .fl-open{color:#fff; background:rgba(255,255,255,.12);}
.pf-rd.pf-printers-page .pf-machine-live{display:flex; align-items:center; gap:10px; min-height:28px; padding:0 18px 13px; font-family:var(--mono); font-size:10.5px; letter-spacing:.02em; color:var(--pf-muted);}
.pf-rd.pf-printers-page .pf-machine-live .pf-eq i{background:var(--_c);}
.pf-rd.pf-printers-page .pf-ts-stale{color:var(--pf-warning);}
.pf-rd.pf-printers-page .pf-machine-ctrl{display:flex; gap:7px; flex-wrap:wrap; padding:12px 18px; border-top:1px solid var(--pf-border); background:var(--pf-surface); margin-top:auto;}
.pf-rd.pf-printers-page .pf-machine .pf-printer-adv{margin:0; border:0; border-top:1px solid var(--pf-border); border-radius:0;}
.pf-rd.pf-printers-page .pf-printer-adv > summary{margin:0;}
.pf-rd.pf-printers-page .pf-printer-adv .pf-recon-form{margin-bottom:8px; flex-wrap:wrap;}
.pf-rd.pf-printers-page .pf-printer-adv .pf-recon-form:last-child{margin-bottom:0;}
.pf-rd.pf-printers-page .pf-printer-adv input:disabled{cursor:not-allowed; opacity:.45;}
.pf-rd.pf-printers-page .pf-rcmd{padding:18px 20px 20px; min-width:0; max-width:100%;}
.pf-rd.pf-printers-page .pf-rcmd-head{display:flex; align-items:center; gap:12px; margin-bottom:6px;}
.pf-rd.pf-printers-page .pf-rcmd-head .pf-hub-bp{margin-left:auto;}
.pf-rd.pf-printers-page .pf-rcmd-title{display:flex; align-items:baseline; gap:14px; margin:6px 0 12px;}
.pf-rd.pf-printers-page .pf-rcmd-title h2{font-size:15px; font-weight:600; color:var(--pf-text); margin:0;}
.pf-rd.pf-printers-page .pf-rcmd-title > span{margin-left:auto; color:var(--pf-muted); font-size:12px;}
.pf-rd.pf-printers-page .pf-rcmd-table{width:100%; border-collapse:collapse; font-size:12.5px;}
.pf-rd.pf-printers-page .pf-rcmd-table th{font-family:var(--mono); font-size:8.5px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--pf-muted); text-align:left; padding:8px 10px; border-bottom:1px solid var(--pf-border); white-space:nowrap;}
.pf-rd.pf-printers-page .pf-rcmd-table td{padding:9px 10px; border-bottom:1px solid var(--pf-border); color:var(--pf-text); vertical-align:middle;}
.pf-rd.pf-printers-page .pf-rcmd-table td:first-child{font-family:var(--mono); font-size:11.5px;}
.pf-rd.pf-printers-page .pf-rcmd-table tr:last-child td{border-bottom:0;}
.pf-rd.pf-printers-page .pf-rcmd-table .pf-chip{font-size:10px; padding:2px 8px;}
.pf-rd.pf-printers-page .pf-rcmd-table .pf-rcmd-empty{text-align:center; color:var(--pf-muted); padding:22px 10px; font-family:var(--pf-font);}

@keyframes pf-printer-beacon{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--_c) 55%,transparent);}70%{box-shadow:0 0 0 6px transparent;}100%{box-shadow:0 0 0 0 transparent;}}
@keyframes pf-printer-eq{0%,100%{transform:scaleY(.35);}50%{transform:scaleY(1);}}
@keyframes pf-printer-ring-charge{from{stroke-dashoffset:339.3;}}
@media(max-width:1080px){
  .pf-rd.pf-printers-page .pf-hub-ribbon{grid-template-columns:1fr; gap:18px;}
  .pf-rd.pf-printers-page .pf-hub-bridge{align-items:flex-start; text-align:left;}
}
@media(max-width:900px){
  .pf-rd.pf-printers-page .pf-rcmd-table .hide-sm{display:none;}
}
@media(max-width:560px){
  .pf-rd.pf-printers-page .pf-hub-grid{grid-template-columns:1fr;}
  .pf-rd.pf-printers-page .pf-hub-ribbon{padding:18px;}
  .pf-rd.pf-printers-page .pf-hub-counts{display:grid; grid-template-columns:1fr 1fr;}
  .pf-rd.pf-printers-page .pf-machine-body{grid-template-columns:1fr; justify-items:center;}
  .pf-rd.pf-printers-page .pf-readout{width:100%;}
  .pf-rd.pf-printers-page .pf-feed{margin-left:14px; margin-right:14px;}
  .pf-rd.pf-printers-page .pf-rcmd-title{align-items:flex-start; flex-direction:column; gap:3px;}
  .pf-rd.pf-printers-page .pf-rcmd-title > span{margin-left:0;}
}
@media(prefers-reduced-motion:reduce){
  .pf-rd.pf-printers-page .hc-dot,.pf-rd.pf-printers-page .pf-eq i,.pf-rd.pf-printers-page .pf-mstat .live,.pf-rd.pf-printers-page .pf-ring .fill{animation:none !important;}
  .pf-rd.pf-printers-page .pf-ring .fill,.pf-rd.pf-printers-page .pf-gauge .gt > i{transition:none;}
}

/* ============================================================================
   CONSOLE REDESIGN - REPORTS / SETTINGS (PR E3): Login, Seed, Reset, Templates,
   Pricing, What's New, Settings, Contact, and the Reports trio (Finance/Metrics/
   Review). Scoped under .pf-rd; reuses the PR A-E2 primitives, adds only gaps.
   ========================================================================== */

/* Login (exact /login only): standalone blueprint ground with the shared head,
   nonce, theme bootstrap, service worker, and script plumbing left in base.html. */
.pf-login-body{min-width:0; min-height:100vh; min-height:100dvh; overflow-x:hidden; background:var(--pf-dark);}
.pf-login-main{width:100%; max-width:none; min-height:100vh; min-height:100dvh; margin:0; padding:0;}
.pf-rd.pf-login-page{
  display:grid; place-items:center; box-sizing:border-box; width:100%; min-width:0;
  min-height:100vh; min-height:100dvh; padding:24px 16px; background-color:var(--pf-dark);
  background-image:linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:34px 34px;
}
.pf-rd.pf-login-page .pf-login-card{
  box-sizing:border-box; width:100%; max-width:380px; min-width:0; display:flex; flex-direction:column;
  gap:14px; padding:30px 30px 26px; border-color:var(--pf-border); box-shadow:var(--sh3);
}
.pf-rd.pf-login-page .pf-login-brand{display:flex; flex-direction:column; align-items:center; gap:5px; margin-bottom:5px; text-align:center;}
.pf-rd.pf-login-page .pf-login-badge{
  display:grid; place-items:center; width:52px; height:52px; margin-bottom:9px; padding:8px;
  border:1px solid color-mix(in srgb,#fff 18%,transparent); border-radius:13px; background:var(--pf-dark);
}
.pf-rd.pf-login-page .pf-login-badge img{display:block; width:100%; height:100%; object-fit:contain;}
.pf-rd.pf-login-page .pf-login-brand h1{margin:0; color:var(--pf-text); font-size:19px; font-weight:700; line-height:1.2;}
.pf-rd.pf-login-page .pf-login-brand p{margin:0; color:var(--pf-muted); font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase;}
.pf-rd.pf-login-page .pf-login-card .pf-field{min-width:0; margin:0;}
.pf-rd.pf-login-page .pf-login-card .pf-field > label{position:static; transform:none; margin:0 0 6px; pointer-events:auto;}
.pf-rd.pf-login-page .pf-input{box-sizing:border-box; width:100%; min-width:0; min-height:44px; font-size:14px;}
.pf-rd.pf-login-page .pf-login-code{font-family:var(--mono); letter-spacing:.3em;}
.pf-rd.pf-login-page .pf-btn.lg{min-height:44px; height:auto; padding-block:10px; font-size:14px;}
.pf-rd.pf-login-page .pf-btn.is-primary{color:#1A0C04;}
.pf-rd.pf-login-page .pf-btn.is-primary:hover{
  background:color-mix(in srgb,var(--act) 88%,#fff); border-color:color-mix(in srgb,var(--act) 88%,#fff); color:#1A0C04;
}
.pf-rd.pf-login-page .pf-error{
  margin:0; padding:9px 12px; border:1px solid color-mix(in srgb,var(--pf-alert) 30%,transparent);
  border-radius:var(--r-sm); background:var(--pf-tint-alert); color:var(--pf-alert); font-size:12.5px; line-height:1.45;
}
.pf-rd.pf-login-page :where(.pf-input,.pf-btn):focus-visible{outline:2px solid var(--focus); outline-offset:2px;}
.pf-rd.pf-login-page .pf-login-foot{text-align:center; font-family:var(--mono); font-size:10px; letter-spacing:.03em; color:var(--pf-muted); margin-top:4px;}
[data-theme="dark"] .pf-login-body{
  --pf-bg:#101C29; --pf-surface:#0F1B29; --pf-border:#294256; --pf-border-strong:#3A5266;
  --pf-text:#E7EDF3; --pf-muted:#9AAAB8; --act:#E8925A; --act-ink:#F2A874; --focus:#7DB7F2;
  --pf-alert:#FCA5A5; --pf-tint-alert:#301A20;
  --sh3:0 16px 40px rgba(0,0,0,.42),0 4px 12px rgba(0,0,0,.28);
}
@media(max-width:420px){
  .pf-rd.pf-login-page{padding:18px 14px;}
  .pf-rd.pf-login-page .pf-login-card{padding:24px 20px 22px;}
}

/* Seed / Reset: stacked tool forms as .pf-dcard panels */
.pf-rd .pf-tool-form{display:flex; flex-direction:column; gap:10px; align-items:flex-start; margin-bottom:14px;}
.pf-rd .pf-tool-form label{display:block; font-size:12.5px; color:var(--pf-text);}
.pf-rd .pf-tool-form code{font-family:var(--mono); background:var(--pf-surface-2); border-radius:4px; padding:1px 5px;}

/* ============================================================================
   PR F: Portfolio Studio (s2) — the unified studio surface.
   The studio is a dark creative-tool surface in BOTH console themes (audit D4):
   .pf-studio-rd pins a dark palette unconditionally, so the ported s2-* classes
   and the existing app components rendered inside (spotlight, HF runner) all read
   dark whether the console is light or dark. Tabs are server routes (no fixed
   overlay / no data-studio-tab visibility CSS): each page renders only its view.
   ========================================================================== */
.pf-rd.pf-studio-rd,
.pf-rd .pf-studio-rd{
  /* app dark tokens, pinned */
  --pf-bg:#0B1620; --pf-surface:#13212E; --pf-surface-2:#0F1B29; --pf-border:#1F3242;
  --pf-text:#E7EDF2; --pf-muted:#93A1AD; --act:#E8925A; --act-ink:#F2A874;
  --act-tint:rgba(197,102,48,.16); --link:#8CCBFF;
  /* mock s2 names the ported rules consume */
  --pf-navy:#0B1620; --pf-ink:#EDF2F7; --pf-terracotta:#C56630; --pf-terracotta-2:#E89A5E;
  --pf-terra-dk:#b35828; --pf-blue:#004B96; --pf-blue-2:#0A6BD1; --pf-blue-on-dark:#8CCBFF;
  --pf-font:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --pf-font-mono:var(--mono,ui-monospace,"SF Mono",monospace);
  --s2-surface:#0C1622; --s2-surface-2:#101D2A; --s2-line:#1F3242;
  color:var(--pf-text);
  background:var(--pf-navy);
  border-radius:16px 0 0 16px;   /* match the frame's left rounding; edge-to-edge full-screen studio */
  overflow:hidden;
  margin:0;
}
/* Edge-to-edge: on studio pages the surface fills the whole frame — drop the console
   main's padding + max-width cap and let the studio stretch full height. Scoped via :has
   so only studio pages change; non-:has browsers fall back to the inset panel gracefully. */
.pf-console-main:has(.pf-studio-rd){max-width:none; padding:0; display:flex; flex-direction:column;}
.pf-console-main:has(.pf-studio-rd) > .pf-studio-rd{flex:1;}

/* top bar (normal flow — not the mock's fixed overlay) */
.pf-studio-rd .s2-bar{display:flex; align-items:center; gap:14px; min-height:52px; padding:0 16px;
  background:var(--pf-navy); border-bottom:1px solid var(--s2-line);}
.pf-studio-rd .s2-brand{display:flex; align-items:center; gap:9px; min-width:0; flex:none;}
.pf-studio-rd .s2-brand-badge{width:26px; height:26px; border-radius:6px; display:inline-flex; align-items:center;
  justify-content:center; background:var(--pf-terracotta); color:#fff;}
.pf-studio-rd .s2-brand strong{font-size:13.5px; letter-spacing:.01em; color:var(--pf-ink); white-space:nowrap;}
.pf-studio-rd .s2-tabs{display:flex; align-items:flex-end; gap:2px; align-self:flex-end;}
.pf-studio-rd .s2-tabs a{position:relative; display:inline-flex; align-items:center; gap:8px; height:38px;
  padding:0 16px; border-radius:9px 9px 0 0; font:600 13px/1 var(--pf-font); color:var(--pf-muted);
  text-decoration:none; background:transparent;}
.pf-studio-rd .s2-tabs a:hover{background:rgba(255,255,255,.06); color:#dbe5ee;}
.pf-studio-rd .s2-tabs a.on{background:var(--s2-surface); color:#fff;}
.pf-studio-rd .s2-spacer{flex:1;}
.pf-studio-rd .s2-baract{display:flex; align-items:center; gap:8px;}
.pf-studio-rd .s2-btn{appearance:none; border:1px solid var(--s2-line); background:rgba(255,255,255,.05);
  color:var(--pf-ink); font:600 12.5px/1 var(--pf-font); padding:0 14px; border-radius:9px; cursor:pointer;
  display:inline-flex; align-items:center; gap:7px; height:34px; flex:none; text-decoration:none;}
.pf-studio-rd .s2-btn:hover{border-color:var(--pf-blue);}
.pf-studio-rd .s2-btn.hot{background:var(--pf-terracotta); border-color:transparent; color:#fff;}

/* view body */
.pf-studio-rd .s2-view-inner{max-width:1080px; margin:0 auto; padding:26px 26px 48px;}
.pf-studio-rd .s2-view-head{display:flex; align-items:flex-start; justify-content:space-between; gap:24px; margin-bottom:22px;}
.pf-studio-rd .s2-view-kicker{font:700 10px/1 var(--pf-font-mono); letter-spacing:.14em; text-transform:uppercase;
  color:var(--pf-terracotta-2); margin:0 0 8px;}
.pf-studio-rd .s2-view-head h1{margin:0; font-size:28px; letter-spacing:-.02em; color:#fff;}
.pf-studio-rd .s2-view-sub{margin:8px 0 0; max-width:62ch; color:var(--pf-muted); font-size:14px; line-height:1.5;}
.pf-studio-rd .s2-view-chips{display:flex; gap:8px; flex-wrap:wrap; flex:none;}
.pf-studio-rd .s2-vchip{font:600 12px/1 var(--pf-font); color:var(--pf-muted); background:rgba(255,255,255,.05);
  border:1px solid var(--s2-line); border-radius:999px; padding:7px 11px; white-space:nowrap;}

/* search filter */
.pf-studio-rd .s2-filter{display:flex; gap:8px; align-items:center; margin:0 0 20px;}
.pf-studio-rd .s2-filter input{flex:1; min-width:0; height:36px; padding:0 12px; border-radius:9px;
  border:1px solid var(--s2-line); background:var(--s2-surface); color:var(--pf-text); font:400 13px/1 var(--pf-font);}
.pf-studio-rd .s2-filter input::placeholder{color:var(--pf-muted);}

/* zones */
.pf-studio-rd .s2-zone{margin-bottom:26px;}
.pf-studio-rd .s2-zonehd{display:flex; align-items:baseline; gap:10px; margin-bottom:12px; padding-bottom:8px;
  border-bottom:1px solid var(--s2-line);}
.pf-studio-rd .s2-zonehd h3{margin:0; font-size:15px; color:#fff; display:flex; align-items:baseline; gap:8px;}
.pf-social-workspace-list .s2-zonehd h2,.pf-social-workspace-shell .s2-zonehd h2{
  margin:0; font-size:15px; color:#fff; display:flex; align-items:baseline; gap:8px;}
.pf-studio-rd .s2-zonecount{font:700 11px/1 var(--pf-font-mono); color:var(--pf-muted); background:rgba(255,255,255,.06);
  border-radius:999px; padding:3px 8px;}
.pf-studio-rd .s2-zonehint{font-size:12px; color:var(--pf-muted);}
.pf-studio-rd .s2-zonebody{display:flex; flex-direction:column; gap:10px;}
.pf-studio-rd .s2-zoneempty{padding:18px; text-align:center; color:var(--pf-muted); font-size:12.5px;
  border:1px dashed var(--s2-line); border-radius:10px;}
.pf-social-workspace-create{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; align-items:end;
  border:1px solid var(--s2-line); border-radius:12px; background:var(--s2-surface); padding:14px;}
.pf-social-workspace-create label{grid-column:1/-1; color:var(--pf-muted); font:700 10px/1 var(--pf-font-mono);
  letter-spacing:.1em; text-transform:uppercase;}
.pf-social-workspace-create .pf-input,.pf-social-workspace-create .s2-vbtn,
.pf-social-workspace-row .s2-vbtn{min-height:44px;}
.pf-social-workspace-create .s2-vbtn,.pf-social-workspace-row .s2-vbtn{display:inline-flex; align-items:center; justify-content:center;}
.pf-social-workspace-empty{display:flex; flex-direction:column; gap:7px; line-height:1.5;}
.pf-social-workspace-empty strong{color:#fff; font-size:14px;}
.pf-social-workspace-error{margin:0 0 18px;}
.pf-social-workspace-grounding,.pf-social-workspace-upload{
  border:1px solid var(--s2-line); border-radius:12px; background:var(--s2-surface); padding:16px;}
.pf-social-workspace-fields{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px;}
.pf-social-workspace-field{display:flex; flex-direction:column; gap:7px; min-width:0; color:#fff;
  font:700 11px/1.2 var(--pf-font-mono); letter-spacing:.08em; text-transform:uppercase;}
.pf-social-workspace-field-wide{grid-column:1/-1;}
.pf-social-workspace-field .pf-studio-input{width:100%; min-width:0; min-height:44px; resize:vertical;
  font-family:var(--pf-font); font-weight:400; letter-spacing:normal; text-transform:none;}
.pf-social-workspace-field textarea.pf-studio-input{padding-top:11px; line-height:1.45;}
.pf-social-workspace-field small,.pf-social-workspace-form-actions span,.pf-social-workspace-upload p{
  color:var(--pf-muted); font:400 12px/1.45 var(--pf-font); letter-spacing:normal; text-transform:none;}
.pf-social-workspace-form-actions{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:16px;}
.pf-social-workspace-form-actions .s2-vbtn,.pf-social-workspace-upload .s2-vbtn{min-height:44px;
  display:inline-flex; align-items:center; justify-content:center;}
.pf-social-workspace-upload{display:flex; gap:12px; align-items:end; flex-wrap:wrap;}
.pf-social-workspace-upload label{display:flex; flex:1 1 320px; min-width:0; flex-direction:column; gap:7px;
  color:#fff; font:700 11px/1.2 var(--pf-font-mono); letter-spacing:.08em; text-transform:uppercase;}
.pf-social-workspace-upload input[type="file"]{width:100%; min-height:44px; padding:8px; color:var(--pf-text);
  border:1px solid var(--s2-line); border-radius:9px; background:rgba(255,255,255,.035); font-family:var(--pf-font);}
.pf-social-workspace-upload p{flex:1 0 100%; margin:0;}
.pf-social-workspace-media-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:12px;}
.pf-social-workspace-media{min-width:0; overflow:hidden; border:1px solid var(--s2-line); border-radius:12px;
  background:var(--s2-surface);}
.pf-social-workspace-media>img{display:block; width:100%; aspect-ratio:4/3; object-fit:cover; background:#0a141f;}
.pf-social-workspace-media>div{display:flex; justify-content:space-between; align-items:center; gap:10px; padding:10px 12px;}
.pf-social-workspace-media strong,.pf-social-workspace-removed-list strong{min-width:0; color:#fff; font-size:12px;}
.pf-social-workspace-media form,.pf-social-workspace-removed-list form{margin:0;}
.pf-social-workspace-removed{margin-top:4px; border:1px solid var(--s2-line); border-radius:10px;
  background:rgba(255,255,255,.025);}
.pf-social-workspace-removed>summary{cursor:pointer; padding:12px 14px; color:var(--pf-muted); font-size:12px;}
.pf-social-workspace-removed-list{display:grid; gap:1px; border-top:1px solid var(--s2-line);}
.pf-social-workspace-removed-list article{display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:10px;
  align-items:center; min-height:44px; padding:8px 14px; background:rgba(255,255,255,.018);}
.pf-social-workspace-removed-list article>span{display:grid; place-items:center; width:32px; height:32px;
  border-radius:7px; color:var(--pf-muted); background:rgba(255,255,255,.05);}

/* job / entry rows */
.pf-studio-rd .s2-jobrow{display:grid; grid-template-columns:72px 1fr auto; gap:16px; align-items:center;
  border:1px solid var(--s2-line); border-radius:12px; background:var(--s2-surface); padding:12px 14px;}
.pf-studio-rd .s2-jobrow.has-rank{grid-template-columns:34px 72px 1fr auto;}
.pf-studio-rd .s2-jobrow.is-fresh{border-color:color-mix(in srgb, var(--pf-terracotta) 45%, transparent);
  background:color-mix(in srgb, var(--pf-terracotta) 7%, var(--s2-surface));}
.pf-studio-rd .s2-jobrow.is-editing{grid-template-columns:1fr;}
.pf-studio-rd .s2-rank{display:flex; flex-direction:column; align-items:center; gap:4px; font:800 16px/1 var(--pf-font);
  color:var(--pf-terracotta-2);}
.pf-studio-rd .s2-rank .hero{font:700 7.5px/1 var(--pf-font-mono); letter-spacing:.06em; text-transform:uppercase;
  color:#fff; background:var(--pf-terracotta); border-radius:4px; padding:2px 4px;}
.pf-studio-rd .s2-jobthumb{width:72px; height:90px; border-radius:8px; overflow:hidden; background:#0a141f;
  display:flex; align-items:center; justify-content:center; color:var(--pf-muted);}
.pf-studio-rd .s2-jobthumb img{width:100%; height:100%; object-fit:cover; display:block;}
.pf-studio-rd .s2-jobmain{min-width:0;}
.pf-studio-rd .s2-jobtop{display:flex; align-items:center; gap:9px; flex-wrap:wrap;}
.pf-studio-rd .s2-jobtitle{font-weight:700; font-size:16px; color:#fff;}
.pf-studio-rd .s2-jobmeta{color:var(--pf-muted); font-size:12.5px; margin-top:4px;}
.pf-studio-rd .s2-jmono{font-family:var(--pf-font-mono);}
.pf-studio-rd .s2-jobsub{color:var(--pf-muted); font-size:12.5px; margin-top:4px;}
.pf-studio-rd .s2-jobsub code{font-family:var(--pf-font-mono);}
.pf-studio-rd .s2-jobsub .standalone{color:var(--pf-terracotta-2);}
.pf-studio-rd .s2-jobacts{display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; align-items:center;}
.pf-studio-rd .s2-jobacts form{margin:0;}
.pf-studio-rd .s2-vpill{font:700 9px/1 var(--pf-font-mono); letter-spacing:.08em; text-transform:uppercase;
  border:1px solid var(--s2-line); border-radius:999px; padding:5px 8px; color:var(--pf-muted);
  display:inline-flex; align-items:center; gap:5px;}
.pf-studio-rd .s2-vpill.is-published{color:#4ADE80; border-color:rgba(74,222,128,.35); background:rgba(74,222,128,.1);}
.pf-studio-rd .s2-vpill.is-draft{color:var(--pf-blue-on-dark); border-color:rgba(140,203,255,.3);}
.pf-studio-rd .s2-vpill.is-none{color:var(--pf-muted);}
.pf-studio-rd .s2-vpill.is-fresh{color:var(--pf-terracotta-2); border-color:transparent;
  background:color-mix(in srgb, var(--pf-terracotta) 18%, transparent);}
.pf-studio-rd .s2-vpill .dot{width:6px; height:6px; border-radius:999px; background:currentColor; opacity:.8;}
.pf-studio-rd .s2-vbtn{appearance:none; cursor:pointer; border:1px solid var(--s2-line); background:rgba(255,255,255,.05);
  color:var(--pf-ink); font:600 12px/1 var(--pf-font); padding:0 12px; height:32px; border-radius:8px;
  display:inline-flex; align-items:center; gap:6px; text-decoration:none;}
.pf-studio-rd .s2-vbtn:hover{border-color:var(--pf-blue);}
.pf-studio-rd .s2-vbtn.hot{background:var(--pf-terracotta); border-color:transparent; color:#fff;}
.pf-studio-rd .s2-vbtn.hot:hover{background:var(--pf-terra-dk);}
.pf-studio-rd .s2-vbtn.icon{padding:0 9px; min-width:34px; justify-content:center;}
.pf-studio-rd .s2-vbtn.ghost{background:transparent;}
.pf-studio-rd .s2-vbtn.danger{color:#FCA5A5; border-color:rgba(252,165,165,.3);}
.pf-studio-rd .s2-vbtn:disabled{opacity:.4; cursor:default;}

/* inline facts editor (kept from the row partial) + purge details, dark-scoped */
.pf-studio-rd .s2-facts{display:flex; flex-direction:column; gap:12px; width:100%;}
.pf-studio-rd .s2-facts-ft{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.pf-studio-rd .s2-facts-ft .spacer{flex:1;}
.pf-studio-rd .s2-purge{position:relative;}
.pf-studio-rd .s2-purge > summary{list-style:none; cursor:pointer;}
.pf-studio-rd .s2-purge-form{margin-top:8px; padding:12px; border:1px solid rgba(252,165,165,.3); border-radius:10px;
  background:rgba(252,165,165,.06); display:flex; flex-direction:column; gap:8px;}
.pf-studio-rd .s2-purge-form p{color:var(--pf-muted); font-size:12.5px; margin:0;}
.pf-studio-rd .s2-purge-form input{height:34px; padding:0 10px; border-radius:8px; border:1px solid var(--s2-line);
  background:var(--s2-surface); color:var(--pf-text);}
.pf-studio-rd .s2-hint{color:var(--pf-muted); font-size:12px;}

/* keep the HF runner panel include readable on the dark ground */
.pf-studio-rd .pf-panel{background:var(--s2-surface); border-color:var(--s2-line);}

/* PR F c4: Posts tab — coverage grid + platform filter + posted ledger (all dark-scoped) */
.pf-studio-rd .s2-cov-zone{margin-bottom:26px;}
.pf-studio-rd .s2-covgrid{display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); gap:12px;}
.pf-studio-rd .s2-covcard{border:1px solid var(--s2-line); border-radius:12px; background:var(--s2-surface); padding:13px 15px;
  display:flex; flex-direction:column; gap:11px;}
.pf-studio-rd .s2-covcard .cc-title{font-weight:700; font-size:14px; color:#fff; text-decoration:none;}
.pf-studio-rd .s2-covcard a.cc-title:hover{color:var(--pf-blue-on-dark);}
.pf-studio-rd .s2-cov{display:inline-flex; align-items:center; gap:6px; flex-wrap:wrap;}
.pf-studio-rd .s2-cov-ch{display:inline-flex; align-items:center; justify-content:center; min-width:30px; height:20px; padding:0 7px;
  border-radius:6px; border:1px solid var(--s2-line); font:700 9.5px/1 var(--pf-font-mono); letter-spacing:.04em; color:var(--pf-muted);}
.pf-studio-rd .s2-cov-ch.done{color:#fff; border-color:transparent;}
.pf-studio-rd .s2-cov-ch.done.is-site{background:#5B6B7A;}
.pf-studio-rd .s2-cov-ch.done.is-ig{background:var(--pf-terracotta);}
.pf-studio-rd .s2-cov-ch.done.is-fb{background:var(--pf-blue);}
.pf-studio-rd .s2-cov-ch.done.is-wa{background:#1F8A5B;}
.pf-studio-rd .s2-cov-ch.todo{border-style:dashed; opacity:.6;}

/* toolbar: search + platform filter links */
.pf-studio-rd .s2-view-toolbar{display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-bottom:18px;}
.pf-studio-rd .s2-view-search{flex:1; min-width:220px; display:flex;}
.pf-studio-rd .s2-view-search input{flex:1; height:36px; padding:0 12px; border-radius:9px; border:1px solid var(--s2-line);
  background:var(--s2-surface); color:var(--pf-text); font:400 13px/1 var(--pf-font);}
.pf-studio-rd .s2-view-search input::placeholder{color:var(--pf-muted);}
.pf-studio-rd .s2-view-chipf{display:flex; gap:5px;}
.pf-studio-rd .s2-view-chipf a{display:inline-flex; align-items:center; height:30px; padding:0 12px; border-radius:8px;
  border:1px solid var(--s2-line); background:var(--s2-surface); color:var(--pf-muted); font:600 12px/1 var(--pf-font);
  text-decoration:none;}
.pf-studio-rd .s2-view-chipf a:hover{color:#fff; border-color:var(--pf-blue);}
.pf-studio-rd .s2-view-chipf a.on{background:var(--pf-blue); border-color:transparent; color:#fff;}
.pf-studio-rd .s2-view-chipf a.on.is-ig{background:var(--pf-terracotta);}
.pf-studio-rd .s2-view-chipf a.on.is-wa{background:#1F8A5B;}

/* posted ledger — flat horizontal rows */
.pf-studio-rd .s2-postlist{display:flex; flex-direction:column; gap:10px;}
.pf-studio-rd .s2-postrow{display:grid; grid-template-columns:auto 1fr auto; gap:14px; align-items:center;
  border:1px solid var(--s2-line); border-radius:12px; background:var(--s2-surface); padding:12px 15px;}
.pf-studio-rd .s2-pbadge{display:inline-flex; align-items:center; justify-content:center; min-width:26px; height:20px; padding:0 7px;
  border-radius:6px; font:700 10px/1 var(--pf-font-mono); color:#fff; background:#5B6B7A;}
.pf-studio-rd .s2-pbadge.is-ig{background:var(--pf-terracotta);}
.pf-studio-rd .s2-pbadge.is-fb{background:var(--pf-blue);}
.pf-studio-rd .s2-pbadge.is-wa{background:#1F8A5B;}
.pf-studio-rd .s2-postrow .pr-title{font-weight:700; font-size:14px; color:#fff;}
.pf-studio-rd .s2-postrow .pr-meta{color:var(--pf-muted); font-size:12px; margin-top:3px;}
.pf-studio-rd .s2-postrow .pr-acts{display:flex; gap:8px; align-items:center;}
.pf-studio-rd .s2-postrow .pr-acts form{margin:0;}
.pf-studio-rd .s2-postempty2{text-align:center; color:var(--pf-muted); font-size:13px; padding:36px;
  border:1px dashed var(--s2-line); border-radius:12px;}

/* H6 manual Social calendar and combined pack lifecycle. */
.pf-studio-rd .s2-status-pill{display:inline-flex; align-items:center; min-height:20px; padding:3px 7px;
  border:1px solid var(--s2-line); border-radius:999px; font:700 8px/1 var(--pf-font-mono);
  letter-spacing:.07em; text-transform:uppercase; vertical-align:middle; white-space:nowrap;}
.pf-studio-rd .s2-status-pill.is-draft{color:#9dc9f2; border-color:rgba(105,169,230,.38); background:rgba(105,169,230,.1);}
.pf-studio-rd .s2-status-pill.is-scheduled{color:#f2c879; border-color:rgba(228,180,79,.4); background:rgba(228,180,79,.1);}
.pf-studio-rd .s2-status-pill.is-posted{color:#80d7b1; border-color:rgba(74,222,128,.35); background:rgba(74,222,128,.09);}
.pf-studio-rd .s2-posts-calendar{min-width:0; margin:0 0 22px; padding:15px;
  border:1px solid var(--s2-line); border-radius:12px; background:var(--s2-surface);}
.pf-studio-rd .s2-posts-calendar .s2-zonehd{align-items:flex-start; justify-content:space-between;}
.pf-studio-rd .s2-posts-calendar .s2-zonehd > div{min-width:0;}
.pf-studio-rd .s2-cadence-hint{margin:0; color:#f2c879; font-size:10px; line-height:1.45;}
.pf-studio-rd .s2-week-strip{display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:5px; min-width:0;}
.pf-studio-rd .s2-week-day{display:grid; grid-template-columns:1fr auto; grid-template-areas:"weekday count" "day count" "month count";
  min-width:0; min-height:58px; padding:6px; border:1px solid var(--s2-line); border-radius:8px;
  background:rgba(255,255,255,.025); color:var(--pf-muted);}
.pf-studio-rd .s2-week-day span{grid-area:weekday; overflow:hidden; font:700 7px/1 var(--pf-font-mono); text-transform:uppercase;}
.pf-studio-rd .s2-week-day strong{grid-area:day; color:var(--pf-text); font-size:13px; line-height:1.15;}
.pf-studio-rd .s2-week-day small{grid-area:month; font:600 7px/1 var(--pf-font-mono); text-transform:uppercase;}
.pf-studio-rd .s2-week-day i{grid-area:count; align-self:center; display:grid; width:18px; height:18px; place-items:center;
  border-radius:999px; color:transparent; font:700 8px/1 var(--pf-font-mono); font-style:normal;}
.pf-studio-rd .s2-week-day.is-today{border-color:rgba(105,169,230,.58); background:rgba(105,169,230,.08);}
.pf-studio-rd .s2-week-day.has-posts{border-color:rgba(228,135,79,.55);}
.pf-studio-rd .s2-week-day.has-posts i{color:#fff; background:var(--pf-terracotta);}
.pf-studio-rd .s2-schedule-queue{display:flex; flex-direction:column; gap:7px; min-width:0; margin:10px 0 0; padding:0; list-style:none;}
.pf-studio-rd .s2-schedule-row{display:flex; align-items:center; justify-content:space-between; gap:10px; min-width:0;
  padding:9px 10px; border:1px solid var(--s2-line); border-radius:8px; background:rgba(255,255,255,.025);}
.pf-studio-rd .s2-schedule-row > div:first-child{display:flex; flex-direction:column; gap:3px; min-width:0;}
.pf-studio-rd .s2-schedule-row strong{color:var(--pf-text); font-size:10px;}
.pf-studio-rd .s2-schedule-row span{min-width:0; color:var(--pf-muted); font-size:9px; line-height:1.35; overflow-wrap:anywhere;}
.pf-studio-rd .s2-schedule-row.is-overdue{border-color:rgba(252,165,165,.35);}
.pf-studio-rd .s2-schedule-actions{display:flex; align-items:center; gap:7px; flex:none;}
.pf-studio-rd .s2-schedule-actions form{margin:0;}
.pf-studio-rd .s2-posts-toolbar{margin-bottom:10px;}
.pf-studio-rd .s2-post-filter-row{display:flex; align-items:center; gap:5px; min-width:0; margin:0 0 8px; overflow-x:auto; scrollbar-width:thin;}
.pf-studio-rd .s2-post-filter-row > span{flex:none; min-width:58px; color:var(--pf-muted); font:700 8px/1 var(--pf-font-mono);
  letter-spacing:.08em; text-transform:uppercase;}
.pf-studio-rd .s2-post-filter-row a{display:inline-flex; flex:none; align-items:center; height:29px; padding:0 10px;
  border:1px solid var(--s2-line); border-radius:8px; background:var(--s2-surface); color:var(--pf-muted);
  font:600 11px/1 var(--pf-font); text-decoration:none;}
.pf-studio-rd .s2-post-filter-row a:hover{color:#fff; border-color:var(--pf-blue);}
.pf-studio-rd .s2-post-filter-row a.on{color:#fff; border-color:transparent; background:#29435b;}
.pf-studio-rd .s2-post-filter-row a.on.is-draft{background:#315f86;}
.pf-studio-rd .s2-post-filter-row a.on.is-scheduled{background:#8a6225;}
.pf-studio-rd .s2-post-filter-row a.on.is-posted{background:#267052;}
.pf-studio-rd .s2-postrow .pr-main{min-width:0;}
.pf-studio-rd .s2-postrow .pr-title{display:flex; align-items:center; gap:7px; flex-wrap:wrap; overflow-wrap:anywhere;}

/* ============================================================================
   CONSOLE REDESIGN - PR E3: Reports charts (Finance / Metrics / Review)
   Pure CSS charts that replace the Chart.js <canvas> renderers. Geometry is
   expressed with static .pf-h-*/.pf-w-* percentage utilities (5% steps) rather
   than inline styles: the console style-src is nonce-locked and the nonce is
   MINTED PER REQUEST, so an inline style="--h:61%" is blocked outright AND a
   nonce'd <style> block would carry a nonce that no longer matches the document
   after an HTMX content-swap. Static classes apply unconditionally, so these
   pages render correctly on full load and on swap with ZERO chart JS - retiring
   the Reports trio from the PFRenders re-init seam. Value labels carry the exact
   figure; only the bar SIZE quantizes to 5% (invisible for a read-only report).
   Components ported/adapted from docs/console-redesign/console-pages.css
   (.pf-bars/.pf-hbars/.pf-funnel). Palette: --link (blue) default, --act
   (terracotta) = current period, --pf-warning = bottleneck, --pf-alert =
   negative/severe. All scoped under .pf-rd (redesign pages only).
   ========================================================================== */

/* Geometry utilities (percentage; consumed only by the chart primitives). */
.pf-h-0{height:0}.pf-h-5{height:5%}.pf-h-10{height:10%}.pf-h-15{height:15%}.pf-h-20{height:20%}.pf-h-25{height:25%}.pf-h-30{height:30%}.pf-h-35{height:35%}.pf-h-40{height:40%}.pf-h-45{height:45%}.pf-h-50{height:50%}.pf-h-55{height:55%}.pf-h-60{height:60%}.pf-h-65{height:65%}.pf-h-70{height:70%}.pf-h-75{height:75%}.pf-h-80{height:80%}.pf-h-85{height:85%}.pf-h-90{height:90%}.pf-h-95{height:95%}.pf-h-100{height:100%}
.pf-w-0{width:0}.pf-w-5{width:5%}.pf-w-10{width:10%}.pf-w-15{width:15%}.pf-w-20{width:20%}.pf-w-25{width:25%}.pf-w-30{width:30%}.pf-w-35{width:35%}.pf-w-40{width:40%}.pf-w-45{width:45%}.pf-w-50{width:50%}.pf-w-55{width:55%}.pf-w-60{width:60%}.pf-w-65{width:65%}.pf-w-70{width:70%}.pf-w-75{width:75%}.pf-w-80{width:80%}.pf-w-85{width:85%}.pf-w-90{width:90%}.pf-w-95{width:95%}.pf-w-100{width:100%}

/* Chart card caption (title + monospaced scale note). */
.pf-rd .pf-chart-cap{display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:16px;}
.pf-rd .pf-chart-cap h3{font-size:13.5px; font-weight:600; color:var(--pf-text);}
.pf-rd .pf-chart-cap .tech{font-family:var(--mono); font-size:10px; letter-spacing:.04em; color:var(--pf-muted); text-transform:uppercase; white-space:nowrap;}

/* Vertical bar chart (time series). Bar height comes from a .pf-h-* class. */
.pf-rd .pf-bars{display:flex; align-items:flex-end; gap:3%; height:170px; padding-bottom:24px; position:relative; border-bottom:1px solid var(--pf-border);}
.pf-rd .pf-bars::before{content:""; position:absolute; left:0; right:0; top:0; border-top:1px dashed var(--pf-border); opacity:.7;}
.pf-rd .pf-bars .b{flex:1; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; height:100%; position:relative; min-width:0;}
.pf-rd .pf-bars .b > i{width:66%; max-width:40px; background:var(--link); border-radius:4px 4px 0 0; display:block; position:relative;}
.pf-rd .pf-bars .b.act > i{background:var(--act);}
.pf-rd .pf-bars .b.is-alert > i{background:var(--pf-alert);}
.pf-rd .pf-bars .b:hover > i{filter:brightness(1.08);}
.pf-rd .pf-bars .b > i > b{position:absolute; bottom:100%; left:50%; transform:translateX(-50%); margin-bottom:4px; font-family:var(--mono); font-size:9.5px; font-weight:600; color:var(--pf-text); white-space:nowrap; opacity:0; transition:opacity var(--dur);}
.pf-rd .pf-bars .b:hover > i > b{opacity:1;}
.pf-rd .pf-bars .b > em{position:absolute; bottom:-21px; left:0; right:0; text-align:center; font-family:var(--mono); font-size:9px; font-style:normal; letter-spacing:.02em; color:var(--pf-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

/* Horizontal bars (buckets, dwell). Fill width comes from a .pf-w-* class. */
.pf-rd .pf-hbars{display:flex; flex-direction:column; gap:11px;}
.pf-rd .pf-hbar{display:grid; grid-template-columns:120px 1fr auto; align-items:center; gap:14px; font-size:12.5px;}
.pf-rd .pf-hbar .hl{color:var(--pf-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.pf-rd .pf-hbar .track{height:15px; background:var(--pf-surface-2); border-radius:var(--r-pill); overflow:hidden; border:1px solid var(--pf-border);}
.pf-rd .pf-hbar .track > i{display:block; height:100%; background:var(--link); border-radius:var(--r-pill);}
.pf-rd .pf-hbar.is-warn .track > i{background:var(--pf-warning);}
.pf-rd .pf-hbar.is-alert .track > i{background:var(--pf-alert);}
.pf-rd .pf-hbar.bottleneck .track > i{background:var(--pf-warning);}
.pf-rd .pf-hbar.bottleneck .hl{color:var(--pf-warning); font-weight:600;}
.pf-rd .pf-hbar .hv{font-family:var(--mono); font-size:11.5px; font-variant-numeric:tabular-nums; color:var(--pf-text); text-align:right; min-width:52px;}

/* Funnel (centered decreasing bars). Segment width comes from a .pf-w-* class. */
.pf-rd .pf-funnel{display:flex; flex-direction:column; gap:5px; align-items:center; padding:4px 0;}
.pf-rd .pf-funnel .seg{min-width:130px; background:color-mix(in srgb,var(--link) 16%,transparent); border:1px solid color-mix(in srgb,var(--link) 30%,transparent); color:var(--pf-text); border-radius:var(--r-sm); padding:9px 14px; display:flex; align-items:center; justify-content:space-between; gap:14px; font-size:12.5px;}
.pf-rd .pf-funnel .seg b{font-weight:600;}
.pf-rd .pf-funnel .seg .n{font-family:var(--mono); font-size:12px; font-variant-numeric:tabular-nums;}
.pf-rd .pf-funnel .seg.warn{background:var(--pf-tint-warm); border-color:color-mix(in srgb,var(--pf-warning) 34%,transparent); color:var(--pf-warning);}

/* Empty-chart note (mirrors the table .pf-empty voice). */
.pf-rd .pf-chart-empty{color:var(--pf-muted); font-size:12.5px; padding:22px 4px; text-align:center;}

/* Weekly-review highlights (the lede list inside a .pf-callout). */
.pf-rd .pf-review-hl{margin:0; padding-left:18px; display:flex; flex-direction:column; gap:5px;}
.pf-rd .pf-review-hl li{font-size:13px; color:var(--pf-text); line-height:1.45;}

/* htmx indicator rules, ported verbatim from htmx's default injected <style>
   (we set includeIndicatorStyles:false in the base.html htmx-config meta so htmx
   no longer injects an un-nonced <style> that the console style-src blocks - PR
   E3). Behaviour is identical; used by the Studio HTMX surfaces (.htmx-indicator). */
.htmx-indicator{opacity:0}
.htmx-request .htmx-indicator{opacity:1; transition:opacity 200ms ease-in;}
.htmx-request.htmx-indicator{opacity:1; transition:opacity 200ms ease-in;}

/* ============================================================================
   PREDEPLOY G7: Studio hub coverage, completion facts offer, phone stacking.
   Coverage reuses the Posts-tab chips. The phone rules stay Studio-scoped so
   the shared job/table primitives elsewhere in the console do not move.
   ========================================================================== */
.pf-studio-rd .s2-row-coverage{display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-top:9px;}
.pf-studio-rd .s2-cov-label{font:700 9px/1 var(--pf-font-mono); letter-spacing:.07em;
  color:var(--pf-muted); white-space:nowrap;}
.pf-job-page .pf-facts-offer{display:flex; align-items:center; justify-content:space-between; gap:18px;}
.pf-job-page .pf-facts-offer-actions{display:flex; align-items:center; gap:12px; flex:none;}

@media(max-width:560px){
  .pf-social-workspace-create{grid-template-columns:minmax(0,1fr);}
  .pf-social-workspace-create label{grid-column:auto;}
  .pf-social-workspace-create .s2-vbtn,.pf-social-workspace-row .s2-vbtn{width:100%;}
  .pf-social-workspace-fields{grid-template-columns:minmax(0,1fr);}
  .pf-social-workspace-field-wide{grid-column:auto;}
  .pf-social-workspace-grounding,.pf-social-workspace-upload{padding:12px;}
  .pf-social-workspace-form-actions{align-items:stretch; flex-direction:column;}
  .pf-social-workspace-form-actions .s2-vbtn,.pf-social-workspace-upload .s2-vbtn{width:100%;}
  .pf-social-workspace-media-grid{grid-template-columns:minmax(0,1fr);}
  .pf-studio-rd .s2-bar{min-height:0; padding:8px 10px; flex-wrap:wrap;}
  .pf-studio-rd .s2-tabs{order:3; width:100%; align-self:auto; overflow-x:auto; overflow-y:hidden;}
  .pf-studio-rd .s2-tabs a{height:34px; padding:0 12px; white-space:nowrap;}
  .pf-studio-rd .s2-baract{margin-left:auto; flex-wrap:wrap;}
  .pf-studio-rd .s2-view-inner{padding:20px 14px 40px;}
  .pf-studio-rd .s2-view-head{display:block; margin-bottom:18px;}
  .pf-studio-rd .s2-view-chips{margin-top:14px;}
  .pf-studio-rd .s2-zonehd{align-items:flex-start; flex-wrap:wrap;}
  .pf-studio-rd .s2-zonehint{width:100%; line-height:1.4;}
  .pf-studio-rd .s2-filter{align-items:stretch; flex-wrap:wrap;}
  .pf-studio-rd .s2-filter input{flex-basis:100%; width:100%;}
  .pf-studio-rd .s2-view-toolbar{align-items:stretch;}
  .pf-studio-rd .s2-view-search{min-width:100%;}
  .pf-studio-rd .s2-view-chipf{max-width:100%; overflow-x:auto;}
  .pf-studio-rd .s2-jobrow,
  .pf-studio-rd .s2-jobrow.has-rank,
  .pf-studio-rd .s2-jobrow.is-editing{grid-template-columns:minmax(0,1fr); gap:10px; align-items:start; padding:12px;}
  .pf-studio-rd .s2-jobthumb{display:none;}
  .pf-studio-rd .s2-rank{align-items:center; flex-direction:row; justify-self:start;}
  .pf-studio-rd .s2-jobmain{width:100%; min-width:0;}
  .pf-studio-rd .s2-jobtop{align-items:flex-start;}
  .pf-studio-rd .s2-jobtitle{width:100%; line-height:1.3; overflow-wrap:anywhere;}
  .pf-studio-rd .s2-jobmeta,
  .pf-studio-rd .s2-jobsub{line-height:1.45; word-break:normal; overflow-wrap:anywhere;}
  .pf-studio-rd .s2-jmono{white-space:nowrap;}
  .pf-studio-rd .s2-jobacts{width:100%; justify-content:flex-start; align-items:center;}
  .pf-studio-rd .s2-row-coverage,
  .pf-studio-rd .s2-cov{max-width:100%;}
  .pf-studio-rd .s2-facts-ft .spacer{display:none;}
  .pf-studio-rd .s2-facts-ft{justify-content:flex-start;}
  .pf-studio-rd .s2-postrow{grid-template-columns:auto minmax(0,1fr);}
  .pf-studio-rd .s2-postrow .pr-acts{grid-column:1/-1; justify-content:flex-start; flex-wrap:wrap;}
  .pf-studio-rd .s2-posts-calendar{padding:10px;}
  .pf-studio-rd .s2-posts-calendar .s2-zonehd{display:flex;}
  .pf-studio-rd .s2-week-strip{gap:3px;}
  .pf-studio-rd .s2-week-day{min-height:54px; padding:4px;}
  .pf-studio-rd .s2-week-day i{width:15px; height:15px;}
  .pf-studio-rd .s2-schedule-row{align-items:flex-start; flex-direction:column;}
  .pf-studio-rd .s2-schedule-actions{width:100%; flex-wrap:wrap;}
  .pf-studio-rd .s2-post-filter-row > span{min-width:54px;}
  .pf-job-page .pf-facts-offer{align-items:flex-start; flex-direction:column;}
  .pf-job-page .pf-facts-offer-actions{flex-wrap:wrap;}
}

/* ============================================================================
   G3 FILES + TRASH
   Registry truth, lifecycle-safe bulk actions, and responsive job-only Trash.
   Page-scoped: no root-token changes.
   ========================================================================== */
.pf-rd.pf-files-page,.pf-rd.pf-trash-page{max-width:1440px;}
.pf-rd.pf-files-page .pf-sectabs,.pf-rd.pf-trash-page .pf-sectabs{margin-bottom:18px;}
.pf-rd .pf-statrow{display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px; margin-bottom:20px;}
.pf-rd .pf-statrow .pf-stat{display:grid; gap:4px; min-width:0; padding:13px 14px; border-left:3px solid var(--pf-border-strong);}
.pf-rd .pf-statrow .pf-stat.is-watch{border-left-color:var(--pf-warning);}
.pf-rd .pf-statrow .pf-stat.is-protected{border-left-color:var(--pf-success);}
.pf-rd .pf-statrow .pf-stat > span{font-family:var(--mono); font-size:9px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--pf-muted);}
.pf-rd .pf-statrow .pf-stat > strong{font-size:21px; line-height:1.1; color:var(--pf-text); overflow-wrap:anywhere;}
.pf-rd .pf-statrow .pf-stat > small{font-size:11px; color:var(--pf-muted);}

.pf-rd.pf-files-page .pf-files-grid{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(290px,340px);
  grid-template-areas:"browser storage" "browser retention"; gap:18px; align-items:start;
}
.pf-rd.pf-files-page .pf-fbrowse{grid-area:browser; min-width:0;}
.pf-rd.pf-files-page .pf-meter-card{grid-area:storage;}
.pf-rd.pf-files-page .pf-retain-card{grid-area:retention;}
.pf-rd.pf-files-page .pf-dcard{padding:17px 18px;}
.pf-rd.pf-files-page .pf-dcard-head{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:14px;}
.pf-rd.pf-files-page .pf-dcard-head h2{margin:4px 0 0; font-size:16px; color:var(--pf-text);}
.pf-rd.pf-files-page .pf-dcard-head > strong{font-family:var(--mono); font-size:11px; color:var(--pf-muted);}

.pf-rd .pf-meter-bar{display:block; width:100%; height:12px; overflow:hidden; border-radius:6px; background:var(--pf-surface-2);}
.pf-rd .pf-meter-seg.is-jobs,.pf-rd .pf-meter-dot.is-jobs{fill:var(--act); background:var(--act);}
.pf-rd .pf-meter-seg.is-intake,.pf-rd .pf-meter-dot.is-intake{fill:var(--link); background:var(--link);}
.pf-rd .pf-meter-seg.is-snapshots,.pf-rd .pf-meter-dot.is-snapshots{fill:var(--stage-printing); background:var(--stage-printing);}
.pf-rd .pf-meter-seg.is-documents,.pf-rd .pf-meter-dot.is-documents{fill:var(--pf-success); background:var(--pf-success);}
.pf-rd .pf-meter-seg.is-other-disk,.pf-rd .pf-meter-dot.is-other-disk{fill:var(--pf-border-strong); background:var(--pf-border-strong);}
.pf-rd .pf-meter-seg.is-free,.pf-rd .pf-meter-dot.is-free{fill:var(--pf-surface-2); background:var(--pf-surface-2);}
.pf-rd .pf-meter-total{display:flex; justify-content:space-between; gap:10px; margin:9px 0 13px; color:var(--pf-muted); font-size:11px;}
.pf-rd .pf-meter-total strong{color:var(--pf-text);}
.pf-rd .pf-meter-legend{display:grid; gap:8px;}
.pf-rd .pf-meter-legend > div{display:grid; grid-template-columns:8px minmax(0,1fr) auto; align-items:center; gap:7px; font-size:11.5px;}
.pf-rd .pf-meter-legend small{grid-column:2; color:var(--pf-muted);}
.pf-rd .pf-meter-legend strong{grid-column:3; grid-row:1 / span 2; font-family:var(--mono); font-size:10.5px; color:var(--pf-text);}
.pf-rd .pf-meter-dot{width:8px; height:8px; border-radius:2px;}
.pf-rd .pf-meter-note{margin:13px 0 0; font-size:11px; line-height:1.45;}

.pf-rd .pf-fbrowse{background:var(--pf-bg); border:1px solid var(--pf-border); border-radius:var(--r-lg); box-shadow:var(--sh1); padding:18px;}
.pf-rd .pf-files-breadcrumb{display:flex; flex-wrap:nowrap; align-items:center; gap:7px; min-width:0; margin-bottom:13px; overflow-x:auto; color:var(--pf-muted); font-size:11.5px; white-space:nowrap;}
.pf-rd .pf-files-breadcrumb a{color:var(--link); text-decoration:none;}
.pf-rd .pf-files-breadcrumb a[aria-current="page"]{color:var(--pf-text); font-weight:600;}
.pf-rd .pf-folders{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; margin-bottom:15px;}
.pf-rd .pf-folder-tile{display:grid; grid-template-columns:auto minmax(0,1fr); gap:2px 8px; align-items:center; min-width:0; padding:10px 11px; color:var(--pf-text); text-decoration:none; background:var(--pf-surface); border:1px solid var(--pf-border); border-radius:var(--r-md);}
.pf-rd .pf-folder-tile:hover{border-color:var(--pf-border-strong); text-decoration:none;}
.pf-rd .pf-folder-tile.is-protected{border-color:color-mix(in srgb,var(--pf-warning) 38%,var(--pf-border)); background:var(--pf-tint-warm);}
.pf-rd .pf-folder-tile .pf-icon,.pf-rd .pf-folder-tile > svg{grid-row:1 / span 2; color:var(--act);}
.pf-rd .pf-folder-tile span{min-width:0; overflow:hidden; text-overflow:ellipsis; font-size:12px; font-weight:600;}
.pf-rd .pf-folder-tile small{min-width:0; color:var(--pf-muted); font-size:10px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.pf-rd .pf-tabs.pf-files-tabs{display:flex; gap:4px; overflow-x:auto; margin:0 0 13px; padding:3px; background:var(--pf-surface-2); border:1px solid var(--pf-border); border-radius:var(--r-md);}
.pf-rd .pf-tabs .pf-tab{display:inline-flex; align-items:center; gap:7px; flex:0 0 auto; min-height:34px; padding:0 10px; border-radius:6px; color:var(--pf-muted); font-size:11.5px; font-weight:600; text-decoration:none;}
.pf-rd .pf-tabs .pf-tab strong{font-family:var(--mono); font-size:9px; padding:2px 5px; border-radius:var(--r-pill); background:var(--pf-bg); border:1px solid var(--pf-border);}
.pf-rd .pf-tabs .pf-tab.is-on{background:var(--pf-dark); color:#fff;}
[data-theme="dark"] .pf-console-body .pf-rd .pf-tabs .pf-tab.is-on{background:var(--link); color:#08131f;}
.pf-rd .pf-fbrowse .pf-filters{display:grid; grid-template-columns:minmax(150px,1.6fr) repeat(4,minmax(90px,1fr)) auto; gap:9px; align-items:end; margin:0 0 14px; padding:12px; border-radius:var(--r-md); box-shadow:none;}
.pf-rd .pf-fbrowse .pf-filters label{display:grid; gap:5px; min-width:0; color:var(--pf-muted); font-family:var(--mono); font-size:9px; font-weight:600; letter-spacing:.07em; text-transform:uppercase;}
.pf-rd .pf-fbrowse .pf-filters .pf-input{height:36px; min-width:0; padding:7px 9px; font-family:var(--font); font-size:12px; letter-spacing:normal; text-transform:none;}
.pf-rd .pf-filter-actions{display:flex; flex-wrap:nowrap; align-items:flex-end; gap:7px;}
.pf-rd .pf-filter-actions .pf-btn{height:36px; padding:0 11px;}

.pf-rd .pf-files-bulk[hidden]{display:none !important;}
.pf-rd .pf-bulkbar{display:flex; justify-content:space-between; align-items:center; gap:14px; margin-bottom:12px; padding:11px 12px; border:1px solid color-mix(in srgb,var(--act) 35%,var(--pf-border)); border-radius:var(--r-md); background:var(--act-tint);}
.pf-rd .pf-bulkbar > div:first-child{display:grid; gap:2px; font-size:11px; color:var(--pf-muted);}
.pf-rd .pf-bulkbar > div:first-child strong{color:var(--pf-text);}
.pf-rd .pf-bulk-actions{display:flex; align-items:flex-end; flex-wrap:wrap; justify-content:flex-end; gap:8px;}
.pf-rd .pf-bulk-actions form{display:flex; align-items:flex-end; gap:8px; margin:0;}
.pf-rd .pf-bulk-actions .pf-btn{height:34px; padding:0 10px; font-size:11.5px;}
.pf-rd .pf-bulk-actions .pf-btn span{color:inherit; font-size:inherit;}
.pf-rd .pf-files-delete-confirm{display:grid; gap:3px; color:var(--pf-muted); font-size:10px;}
.pf-rd .pf-files-delete-confirm .pf-input{width:104px; height:34px; padding:6px 8px;}

.pf-rd .pf-ftable-wrap{overflow:visible;}
.pf-rd .pf-ftable{width:100%; table-layout:fixed;}
.pf-rd .pf-ftable th:nth-child(1){width:48px;}
.pf-rd .pf-ftable th:nth-child(3){width:105px;}
.pf-rd .pf-ftable th:nth-child(4){width:105px;}
.pf-rd .pf-ftable th:nth-child(5){width:70px;}
.pf-rd .pf-ftable th:nth-child(6){width:55px;}
.pf-rd .pf-ftable th:nth-child(7){width:85px;}
.pf-rd .pf-ftable th:nth-child(8){width:70px;}
.pf-rd .pf-ftable tbody tr{cursor:default;}
.pf-rd .pf-ftable tbody tr.pf-file-status-warning{box-shadow:inset 3px 0 0 var(--pf-warning);}
.pf-rd .pf-ftable tbody tr.pf-file-status-danger{box-shadow:inset 3px 0 0 var(--pf-alert);}
.pf-rd .pf-ftable tbody tr.pf-file-status-success{box-shadow:inset 3px 0 0 var(--pf-success);}
.pf-rd .pf-files-select-col{width:48px; text-align:center;}
.pf-rd .pf-files-check{display:inline-grid; place-items:center; width:44px; height:44px; cursor:pointer;}
.pf-rd .pf-files-check input{width:17px; height:17px; accent-color:var(--act);}
.pf-rd .pf-files-lock{display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; color:var(--pf-muted);}
.pf-rd.pf-files-page .pf-file-name{display:flex; align-items:center; gap:10px; min-width:0; max-width:100%;}
.pf-rd.pf-files-page .pf-file-name > div{min-width:0;}
.pf-rd.pf-files-page .pf-file-preview,.pf-rd.pf-files-page .pf-file-icon{position:relative; display:grid; place-items:center; flex:0 0 38px; width:38px; height:38px; border:1px solid var(--pf-border); border-radius:7px; background:var(--pf-surface); color:var(--pf-muted);}
.pf-rd.pf-files-page .pf-file-preview > img{width:100%; height:100%; object-fit:cover; border-radius:6px;}
.pf-rd.pf-files-page .pf-file-link{display:block; min-width:0; color:var(--link); font-weight:600; overflow-wrap:anywhere; white-space:normal;}
.pf-rd.pf-files-page .pf-file-link.is-disabled{color:var(--pf-muted);}
.pf-rd.pf-files-page .pf-file-name small{display:block; margin-top:3px; color:var(--pf-muted); font-size:9.5px; overflow-wrap:anywhere; white-space:normal;}
.pf-rd.pf-files-page .pf-files-hover-preview{display:none; position:absolute; left:44px; top:0; z-index:20; width:220px; max-height:220px; padding:4px; background:var(--pf-bg); border:1px solid var(--pf-border); border-radius:var(--r-md); box-shadow:var(--sh2); transform:none; pointer-events:none;}
.pf-rd.pf-files-page .pf-files-hover-preview img{display:block; max-width:100%; max-height:210px; margin:auto;}
@media (hover:hover){.pf-rd.pf-files-page .pf-file-preview:hover .pf-files-hover-preview{display:block;}}
.pf-rd.pf-files-page .pf-file-actions{display:flex; align-items:center; flex-wrap:wrap; gap:6px;}
.pf-rd.pf-files-page .pf-file-actions form{margin:0;}
.pf-rd.pf-files-page .pf-file-details{position:relative;}
.pf-rd.pf-files-page .pf-file-details > summary{cursor:pointer; color:var(--link); font-size:11px;}
.pf-rd.pf-files-page .pf-file-details[open] dl{position:absolute; right:0; z-index:15; width:min(310px,80vw); margin:7px 0 0; padding:11px; background:var(--pf-bg); border:1px solid var(--pf-border); border-radius:var(--r-md); box-shadow:var(--sh2);}
.pf-rd.pf-files-page .pf-file-details dt{font-family:var(--mono); font-size:9px; text-transform:uppercase; color:var(--pf-muted);}
.pf-rd.pf-files-page .pf-file-details dd{margin:2px 0 8px; overflow-wrap:anywhere; font-size:11px;}
.pf-rd.pf-files-page .pf-file-details dd:last-child{margin-bottom:0;}
.pf-rd .pf-tone-success{--_c:var(--pf-success);}.pf-rd .pf-tone-warning{--_c:var(--pf-warning);}.pf-rd .pf-tone-danger{--_c:var(--pf-alert);}.pf-rd .pf-tone-neutral{--_c:var(--pf-muted);}

.pf-rd .pf-retain-card > p{margin:0 0 13px; color:var(--pf-muted); font-size:11.5px; line-height:1.5;}
.pf-rd .pf-retain-count{display:grid; text-align:right;}
.pf-rd .pf-retain-count strong{font-size:20px; color:var(--pf-text);}
.pf-rd .pf-retain-count span{font-size:9.5px; color:var(--pf-muted);}
.pf-rd .pf-retain-meta{display:grid; gap:7px; margin-bottom:14px; padding:11px; border-radius:var(--r-md); background:var(--pf-surface); color:var(--pf-muted); font-size:10.5px;}
.pf-rd .pf-retain-meta strong{color:var(--pf-text);}
.pf-rd .pf-retain-form{display:grid; grid-template-columns:1fr 1fr; gap:9px;}
.pf-rd .pf-retain-form label{display:grid; gap:4px; min-width:0; color:var(--pf-muted); font-size:10px;}
.pf-rd .pf-retain-form .pf-input{height:34px; padding:6px 8px;}
.pf-rd .pf-retain-form .pf-btn{grid-column:1 / -1;}
.pf-rd .pf-retain-prune{display:grid; gap:6px; margin-top:11px; padding-top:11px; border-top:1px solid var(--pf-border);}
.pf-rd .pf-retain-prune small{color:var(--pf-muted); font-size:10px; line-height:1.4;}

.pf-rd .pf-trash-callout{display:flex; align-items:flex-start; gap:12px; margin-bottom:16px; padding:14px 16px; color:var(--pf-text); background:var(--pf-tint-link); border:1px solid color-mix(in srgb,var(--link) 30%,var(--pf-border)); border-radius:var(--r-md);}
.pf-rd .pf-trash-callout > .pf-icon{flex:none; color:var(--link);}
.pf-rd .pf-trash-callout p{margin:4px 0 0; color:var(--pf-muted); font-size:12px; line-height:1.45;}
.pf-rd .pf-trash-statrow{grid-template-columns:repeat(4,minmax(0,1fr));}
.pf-rd .pf-trash-table tbody tr{cursor:default;}
.pf-rd .pf-trash-table td:nth-child(3){max-width:34ch;}
.pf-rd .pf-trash-actions{display:flex; align-items:flex-start; flex-wrap:wrap; gap:7px;}
.pf-rd .pf-trash-purge{position:relative;}
.pf-rd .pf-trash-purge > summary{list-style:none;}
.pf-rd .pf-trash-purge > summary::-webkit-details-marker{display:none;}
.pf-rd .pf-trash-form{position:static; width:min(330px,80vw); display:grid; gap:10px; margin-top:7px; padding:12px; background:var(--pf-bg); border:1px solid var(--pf-border); border-radius:var(--r-md); box-shadow:var(--sh2);}
.pf-rd .pf-trash-form label{display:grid; gap:5px; color:var(--pf-muted); font-size:11px;}

@media (max-width:1180px){
  .pf-rd .pf-statrow{grid-template-columns:repeat(3,minmax(0,1fr));}
  .pf-rd .pf-trash-statrow{grid-template-columns:repeat(2,minmax(0,1fr));}
  .pf-rd.pf-files-page .pf-files-grid{display:flex; flex-direction:column;}
  .pf-rd.pf-files-page .pf-files-grid > *{width:100%;}
  .pf-rd .pf-folders{grid-template-columns:repeat(4,minmax(0,1fr));}
}
@media (max-width:1399px){
  .pf-rd .pf-fbrowse .pf-filters{grid-template-columns:repeat(3,minmax(0,1fr));}
  .pf-rd .pf-fbrowse .pf-filters label:first-of-type{grid-column:span 2;}
  .pf-rd .pf-filter-actions{grid-column:1 / -1; justify-content:flex-end;}
  .pf-rd .pf-ftable th:nth-child(5),.pf-rd .pf-ftable td:nth-child(5),
  .pf-rd .pf-ftable th:nth-child(6),.pf-rd .pf-ftable td:nth-child(6),
  .pf-rd .pf-ftable th:nth-child(7),.pf-rd .pf-ftable td:nth-child(7){display:none;}
}
@media (max-width:900px){
  .pf-rd .pf-ftable th:nth-child(5),.pf-rd .pf-ftable td:nth-child(5),
  .pf-rd .pf-ftable th:nth-child(6),.pf-rd .pf-ftable td:nth-child(6),
  .pf-rd .pf-ftable th:nth-child(7),.pf-rd .pf-ftable td:nth-child(7){display:none;}
}
@media (max-width:640px){
  .pf-rd.pf-files-page .pf-phead-actions,.pf-rd.pf-files-page .pf-phead-actions form,.pf-rd.pf-files-page .pf-phead-actions .pf-btn{width:100%;}
  .pf-rd .pf-statrow{grid-template-columns:repeat(2,minmax(0,1fr));}
  .pf-rd .pf-folders{grid-template-columns:repeat(2,minmax(0,1fr));}
  .pf-rd .pf-fbrowse{padding:13px;}
  .pf-rd .pf-fbrowse .pf-filters{grid-template-columns:1fr;}
  .pf-rd .pf-fbrowse .pf-filters label:first-of-type{grid-column:auto;}
  .pf-rd .pf-filter-actions,.pf-rd .pf-filter-actions .pf-btn{width:100%;}
  .pf-rd .pf-filter-actions .pf-btn{flex:1;}
  .pf-rd .pf-bulkbar{align-items:stretch; flex-direction:column;}
  .pf-rd .pf-bulk-actions{display:grid; grid-template-columns:1fr 1fr; justify-content:stretch;}
  .pf-rd .pf-bulk-actions form,.pf-rd .pf-bulk-actions .pf-btn{width:100%;}
  .pf-rd .pf-bulk-actions form[data-files-bulk-form="delete"]{grid-column:1 / -1; display:grid; grid-template-columns:1fr auto;}
  .pf-rd .pf-files-delete-confirm .pf-input{width:100%;}
  .pf-rd .pf-ftable-wrap,.pf-rd .pf-trash-table-wrap{overflow:visible; border:0; box-shadow:none; background:transparent;}
  .pf-rd .pf-ftable,.pf-rd .pf-ftable tbody,.pf-rd .pf-trash-table,.pf-rd .pf-trash-table tbody{display:block; width:100%;}
  .pf-rd .pf-ftable thead,.pf-rd .pf-trash-table thead{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}
  .pf-rd .pf-ftable thead tr,.pf-rd .pf-trash-table thead tr,
  .pf-rd .pf-ftable thead th,.pf-rd .pf-trash-table thead th{display:block; width:1px; height:1px; min-width:0; padding:0; overflow:hidden;}
  .pf-rd .pf-ftable tbody tr{display:grid; grid-template-columns:44px minmax(0,1fr); gap:7px 10px; margin-bottom:10px; padding:10px 10px 12px; background:var(--pf-bg); border:1px solid var(--pf-border); border-radius:var(--r-md); box-shadow:var(--sh1);}
  .pf-rd .pf-ftable tbody td{display:block; padding:0; border:0; min-width:0; white-space:normal; overflow-wrap:anywhere;}
  .pf-rd .pf-ftable tbody td:nth-child(1){grid-column:1; grid-row:1 / span 6;}
  .pf-rd .pf-ftable tbody td:nth-child(2){grid-column:2; grid-row:1;}
  .pf-rd .pf-ftable tbody td:nth-child(3),.pf-rd .pf-ftable tbody td:nth-child(4),.pf-rd .pf-ftable tbody td:nth-child(8){grid-column:2; display:grid; grid-template-columns:92px minmax(0,1fr); align-items:start; gap:8px;}
  .pf-rd .pf-ftable tbody td[data-label]::before,.pf-rd .pf-trash-table tbody td[data-label]::before{content:attr(data-label); color:var(--pf-muted); font-family:var(--mono); font-size:9px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;}
  .pf-rd.pf-files-page .pf-file-name{min-width:0; max-width:none; white-space:normal;}
  .pf-rd.pf-files-page .pf-file-name > div,.pf-rd.pf-files-page .pf-file-link,.pf-rd.pf-files-page .pf-file-name small{min-width:0; white-space:normal;}
  .pf-rd.pf-files-page .pf-files-hover-preview{display:none !important;}
  .pf-rd.pf-files-page .pf-file-actions{align-items:flex-start;}
  .pf-rd.pf-files-page .pf-file-details{width:100%;}
  .pf-rd.pf-files-page .pf-file-details[open] dl{position:static; width:100%; box-shadow:none;}
  .pf-rd .pf-ftable tbody td.pf-empty{grid-column:1 / -1; grid-row:auto; display:block; padding:18px; text-align:center;}
  .pf-rd .pf-retain-form{grid-template-columns:1fr;}
  .pf-rd .pf-retain-form .pf-btn{grid-column:auto;}
  .pf-rd .pf-trash-callout{padding:12px;}
  .pf-rd .pf-trash-table tbody tr{display:grid; gap:8px; margin-bottom:10px; padding:12px; background:var(--pf-bg); border:1px solid var(--pf-border); border-radius:var(--r-md); box-shadow:var(--sh1);}
  .pf-rd .pf-trash-table tbody td{display:grid; grid-template-columns:92px minmax(0,1fr); gap:8px; min-width:0; max-width:none !important; padding:0; border:0;}
  .pf-rd .pf-trash-table tbody td.pf-empty{display:block; grid-template-columns:none; padding:18px; text-align:center;}
  .pf-rd .pf-trash-actions{display:grid; gap:7px;}
  .pf-rd .pf-trash-actions form,.pf-rd .pf-trash-actions .pf-btn{width:100%;}
  .pf-rd .pf-trash-purge{width:100%;}
  .pf-rd .pf-trash-form{position:static; width:100%; box-shadow:none;}
}
@media (max-width:360px){
  .pf-rd .pf-statrow,.pf-rd .pf-folders{grid-template-columns:1fr;}
  .pf-rd .pf-bulk-actions{grid-template-columns:1fr;}
  .pf-rd .pf-bulk-actions form[data-files-bulk-form="delete"]{grid-column:auto; grid-template-columns:1fr;}
  .pf-rd .pf-ftable tbody tr{grid-template-columns:38px minmax(0,1fr); gap-inline:8px;}
  .pf-rd .pf-ftable tbody td:nth-child(3),.pf-rd .pf-ftable tbody td:nth-child(4),.pf-rd .pf-ftable tbody td:nth-child(8){grid-template-columns:1fr; gap:3px;}
}

/* ============================================================================
   G2: standalone job billing. The shared billing partial keeps every job-page
   route and control; these rules only reorganize its standalone presentation.
   ========================================================================== */
.pf-rd.pf-billing-page{max-width:1180px;}
.pf-rd.pf-billing-page .pf-phead h1{display:flex; align-items:center; flex-wrap:wrap; gap:10px;}
.pf-rd.pf-billing-page .pf-phead h1 .pf-chip{font-size:12px; letter-spacing:0;}
.pf-rd.pf-billing-page .pf-billing-jobid{font-family:var(--mono);}
.pf-rd.pf-billing-page .pf-billing-customer{max-width:76ch; overflow-wrap:anywhere;}

.pf-rd.pf-billing-page .pf-bill-facts{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)) minmax(220px,1.6fr);
  gap:1px; margin-bottom:20px; overflow:hidden;
  border:1px solid var(--pf-border); border-radius:var(--r-lg); background:var(--pf-border);
  box-shadow:var(--sh1);
}
.pf-rd.pf-billing-page .pf-bill-facts .f{
  min-width:0; padding:13px 15px; background:var(--pf-bg);
  display:flex; flex-direction:column; justify-content:center; gap:5px;
}
.pf-rd.pf-billing-page .pf-bill-facts .fl{
  color:var(--pf-muted); font-family:var(--mono); font-size:9px; font-weight:600;
  letter-spacing:.09em; text-transform:uppercase;
}
.pf-rd.pf-billing-page .pf-bill-facts .fv{
  color:var(--pf-text); font-size:18px; font-weight:700; font-variant-numeric:tabular-nums;
}
.pf-rd.pf-billing-page .pf-bill-facts .is-due .fv{color:var(--pf-warning);}
.pf-rd.pf-billing-page .pf-bill-facts .is-credit .fv{color:var(--pf-success);}
.pf-rd.pf-billing-page .pf-bill-invoice-state{display:flex; align-items:center; min-height:25px;}
.pf-rd.pf-billing-page .pf-bill-fact-progress{align-content:center;}
.pf-rd.pf-billing-page .pf-bill-fact-progress .pf-bill-meter-label{text-align:left;}

.pf-rd.pf-billing-page .pf-billing-layout{
  grid-template-columns:minmax(0,1fr) minmax(280px,340px); gap:20px; align-items:start;
}
.pf-rd.pf-billing-page .pf-billing-main{min-width:0;}
.pf-rd.pf-billing-page .pf-billing-rail{display:flex; flex-direction:column; gap:14px;}
.pf-rd.pf-billing-page .pf-billing--standalone{
  border:0; border-radius:0; background:transparent; box-shadow:none; padding:0;
  display:flex; flex-direction:column; gap:14px;
}
.pf-rd.pf-billing-page .pf-billing--standalone .pf-bill-block{
  margin:0; padding:18px 20px; border:1px solid var(--pf-border); border-radius:var(--r-lg);
  background:var(--pf-bg); box-shadow:var(--sh1);
}
.pf-rd.pf-billing-page .pf-billing--standalone .pf-bill-block--payments,
.pf-rd.pf-billing-page .pf-billing--standalone .pf-bill-block--changes{overflow-x:auto;}
.pf-rd.pf-billing-page .pf-billing--standalone .pf-bill-note--expiry{
  margin:0; padding:12px 14px; border:1px solid var(--pf-warning);
  border-left-width:3px; border-radius:var(--r-md);
  background:color-mix(in srgb,var(--pf-warning) 8%,var(--pf-surface)); color:var(--pf-text);
}
.pf-rd.pf-billing-page .pf-billing--standalone .pf-bill-h{
  color:var(--pf-text); font-size:13px; letter-spacing:0; text-transform:none;
}

.pf-rd.pf-billing-page .pf-bill-block--record .pf-bill-record{
  display:grid; grid-template-columns:minmax(120px,1fr) minmax(110px,.7fr) minmax(110px,.7fr) auto;
  align-items:center; gap:10px;
}
.pf-rd.pf-billing-page .pf-bill-block--record input[name="amount"]{grid-column:1; min-width:0; width:100%;}
.pf-rd.pf-billing-page .pf-bill-block--record select[name="kind"]{grid-column:2; min-width:0; width:100%;}
.pf-rd.pf-billing-page .pf-bill-block--record select[name="method"]{grid-column:3; min-width:0; width:100%;}
.pf-rd.pf-billing-page .pf-bill-block--record .pf-bill-advanced{grid-column:1 / 4; grid-row:2;}
.pf-rd.pf-billing-page .pf-bill-block--record .pf-bill-record > .pf-btn{grid-column:4; grid-row:1;}
.pf-rd.pf-billing-page .pf-bill-advanced > summary{
  width:max-content; cursor:pointer; color:var(--pf-blue); font-size:12px; font-weight:700;
}
.pf-rd.pf-billing-page .pf-bill-advanced[open] > summary{margin-bottom:9px;}
.pf-rd.pf-billing-page .pf-bill-advanced-body{display:flex; align-items:center; flex-wrap:wrap; gap:8px;}
.pf-rd.pf-billing-page .pf-fhint{margin:0; color:var(--pf-muted); font-size:12px;}

.pf-rd.pf-billing-page .pf-bill-block--documents{display:flex; flex-direction:column;}
.pf-rd.pf-billing-page .pf-bill-block--documents > .pf-doclist{margin:10px 0 0;}
.pf-rd.pf-billing-page .pf-bill-block--documents > .pf-bill-docactions{margin:0 0 10px;}
.pf-rd.pf-billing-page .pf-doc-row{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto auto; gap:10px; align-items:center;
}
.pf-rd.pf-billing-page .pf-doc-name{display:grid; gap:2px; min-width:0;}
.pf-rd.pf-billing-page .pf-doc-name > strong{font-size:12.5px;}
.pf-rd.pf-billing-page .pf-doc-name .pf-doc-link{overflow-wrap:anywhere;}
.pf-rd.pf-billing-page .pf-doc-row.pf-voided .pf-doc-name{text-decoration:line-through;}
.pf-rd.pf-billing-page .pf-doc-row.pf-voided .pf-chip,
.pf-rd.pf-billing-page .pf-doc-row.pf-voided .pf-doc-act{opacity:1; text-decoration:none;}

.pf-rd.pf-billing-page .pf-billing-money-card{padding:18px 20px;}
.pf-rd.pf-billing-page .pf-billing-money-stack{display:grid; gap:10px; margin-top:13px;}
.pf-rd.pf-billing-page .pf-billing-money-stat{
  display:grid; gap:3px; padding:12px 13px; border:1px solid var(--pf-border);
  border-left:3px solid var(--pf-border-strong); border-radius:var(--r-md); background:var(--pf-surface);
}
.pf-rd.pf-billing-page .pf-billing-money-stat.is-hot{
  border-left-color:var(--pf-warning); background:color-mix(in srgb,var(--pf-warning) 8%,var(--pf-surface));
}
.pf-rd.pf-billing-page .pf-billing-money-stat.is-credit{
  border-left-color:var(--pf-success); background:color-mix(in srgb,var(--pf-success) 8%,var(--pf-surface));
}
.pf-rd.pf-billing-page .pf-billing-money-stat .lbl{
  color:var(--pf-muted); font-family:var(--mono); font-size:9px; letter-spacing:.08em; text-transform:uppercase;
}
.pf-rd.pf-billing-page .pf-billing-money-stat .val{
  color:var(--pf-text); font-size:21px; font-variant-numeric:tabular-nums;
}
.pf-rd.pf-billing-page .pf-billing-money-stat.is-hot .val{color:var(--pf-warning);}
.pf-rd.pf-billing-page .pf-billing-money-stat.is-credit .val{color:var(--pf-success);}
.pf-rd.pf-billing-page .pf-billing-money-stat .desc{color:var(--pf-muted); font-size:11.5px;}
.pf-rd.pf-billing-page .pf-billing-cancel-card{padding:18px 20px;}
.pf-rd.pf-billing-page .pf-billing-cancel-card p{margin:0 0 12px; color:var(--pf-muted); font-size:12px; line-height:1.5;}
.pf-rd.pf-billing-page .pf-billing-cancel-actions{display:flex; align-items:center; flex-wrap:wrap; gap:10px;}

@media (max-width:980px){
  .pf-rd.pf-billing-page .pf-billing-layout{grid-template-columns:1fr;}
  .pf-rd.pf-billing-page .pf-billing-main,
  .pf-rd.pf-billing-page .pf-billing-rail{grid-column:1; grid-row:auto;}
  .pf-rd.pf-billing-page .pf-billing-rail{position:static;}
  .pf-rd.pf-billing-page .pf-bill-facts{grid-template-columns:repeat(3,minmax(0,1fr));}
  .pf-rd.pf-billing-page .pf-bill-fact-progress{grid-column:span 2;}
}

@media (max-width:640px){
  .pf-rd.pf-billing-page .pf-phead-actions,
  .pf-rd.pf-billing-page .pf-phead-actions .pf-btn{width:100%;}
  .pf-rd.pf-billing-page .pf-bill-facts{grid-template-columns:repeat(2,minmax(0,1fr));}
  .pf-rd.pf-billing-page .pf-bill-fact-progress{grid-column:1 / -1;}
  .pf-rd.pf-billing-page .pf-billing--standalone .pf-bill-block{padding:15px;}
  .pf-rd.pf-billing-page .pf-bill-block--record .pf-bill-record{display:flex; flex-direction:column; align-items:stretch;}
  .pf-rd.pf-billing-page .pf-bill-block--record .pf-bill-record > input,
  .pf-rd.pf-billing-page .pf-bill-block--record .pf-bill-record > select,
  .pf-rd.pf-billing-page .pf-bill-block--record .pf-bill-record > details,
  .pf-rd.pf-billing-page .pf-bill-block--record .pf-bill-record > .pf-btn{width:100%;}
  .pf-rd.pf-billing-page .pf-bill-block--record .pf-bill-record > input[name="amount"]{flex:0 0 auto; max-width:none;}
  .pf-rd.pf-billing-page .pf-bill-advanced-body{align-items:stretch; flex-direction:column;}
  .pf-rd.pf-billing-page .pf-bill-advanced-body > *{width:100%;}
  .pf-rd.pf-billing-page .pf-bill-advanced-body > input{max-width:none;}
  .pf-rd.pf-billing-page .pf-pp-inv{align-items:flex-start; flex-wrap:wrap;}
  .pf-rd.pf-billing-page .pf-pp-inv-cancel{width:100%; margin-left:0;}
  .pf-rd.pf-billing-page .pf-pp-inv-cancel .pf-link{min-height:32px;}
  .pf-rd.pf-billing-page .pf-doc-row{grid-template-columns:auto minmax(0,1fr) auto;}
  .pf-rd.pf-billing-page .pf-doc-row .pf-doc-act{grid-column:2 / -1; margin-left:0; justify-content:flex-end; flex-wrap:wrap;}
  .pf-rd.pf-billing-page .pf-bill-docactions .pf-inline,
  .pf-rd.pf-billing-page .pf-bill-docactions .pf-btn{width:100%;}
  .pf-rd.pf-billing-page .pf-bill-block--po .pf-form-row{align-items:stretch; flex-direction:column;}
  .pf-rd.pf-billing-page .pf-bill-block--po .pf-form-row > *{width:100%;}
  .pf-rd.pf-billing-page .pf-bill-block--po .pf-form-row > input{max-width:none;}
  .pf-rd.pf-billing-page .pf-bill-block--changes .pf-co-form{align-items:stretch; flex-direction:column;}
  .pf-rd.pf-billing-page .pf-bill-block--changes .pf-co-form > *{width:100%;}
  .pf-rd.pf-billing-page .pf-bill-block--changes .pf-co-form > input{max-width:none;}
  .pf-rd.pf-billing-page .pf-bill-block--payments{overflow-x:visible;}
  .pf-rd.pf-billing-page .pf-bill-block--payments .pf-ledger thead{
    position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
  }
  .pf-rd.pf-billing-page .pf-bill-block--payments .pf-ledger,
  .pf-rd.pf-billing-page .pf-bill-block--payments .pf-ledger tbody{display:block; width:100%;}
  .pf-rd.pf-billing-page .pf-bill-block--payments .pf-ledger tr{
    display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 12px;
    padding:10px 0; border-bottom:1px solid var(--pf-border);
  }
  .pf-rd.pf-billing-page .pf-bill-block--payments .pf-ledger tr:last-child{border-bottom:0;}
  .pf-rd.pf-billing-page .pf-bill-block--payments .pf-ledger td{padding:0; border:0; min-width:0;}
  .pf-rd.pf-billing-page .pf-bill-block--payments .pf-ledger td[data-label]::before{
    content:attr(data-label); display:block; margin:0 0 2px; color:var(--pf-muted);
    font-family:var(--mono); font-size:9px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  }
  .pf-rd.pf-billing-page .pf-bill-block--payments .pf-ledger td:nth-child(1){grid-column:1; grid-row:1; white-space:nowrap;}
  .pf-rd.pf-billing-page .pf-bill-block--payments .pf-ledger td:nth-child(2){grid-column:2; grid-row:1; text-align:right;}
  .pf-rd.pf-billing-page .pf-bill-block--payments .pf-ledger td:nth-child(3){grid-column:1; grid-row:2;}
  .pf-rd.pf-billing-page .pf-bill-block--payments .pf-ledger td:nth-child(4){grid-column:2; grid-row:2; text-align:right;}
  .pf-rd.pf-billing-page .pf-bill-block--payments .pf-ledger td:nth-child(5){grid-column:1 / -1; grid-row:3; text-align:right;}
  .pf-rd.pf-billing-page .pf-bill-block--payments .pf-ledger tr.pf-voided{
    background:color-mix(in srgb,var(--pf-muted) 8%,var(--pf-surface)); border-radius:var(--r-sm);
    padding-left:8px; padding-right:8px;
  }
  .pf-rd.pf-billing-page .pf-bill-block--payments .pf-ledger tr.pf-voided td{background:transparent !important;}
}

/* ============================================================================
   CONSOLE REDESIGN - SETTINGS (PR G4): integration cards, status, fields.
   Scoped to the settings page so legacy pricing/quote field and switch rules do
   not collide. The mock's inline geometry is expressed here for the strict CSP.
   ========================================================================== */
.pf-rd.pf-settings-page .pf-phead-actions{max-width:430px; flex-wrap:wrap; justify-content:flex-end;}

.pf-rd.pf-settings-page .pf-cfg-status{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:18px;
  padding:14px 16px; border:1px solid var(--pf-border); border-left:3px solid var(--act);
  border-radius:var(--r-md); background:var(--act-tint);
}
.pf-rd.pf-settings-page .pf-cfg-status .st-tx{flex:1 1 420px; min-width:0;}
.pf-rd.pf-settings-page .pf-cfg-status h2{font-size:13.5px; font-weight:600; color:var(--pf-text);}
.pf-rd.pf-settings-page .pf-cfg-status p{margin:4px 0 0; color:var(--pf-muted); font-size:12.5px; line-height:1.5;}
.pf-rd.pf-settings-page .pf-cfg-status form{flex:none; margin:0;}

.pf-rd.pf-settings-page .pf-settings-layout{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(240px,270px);
  gap:20px; align-items:start;
}
.pf-rd.pf-settings-page .pf-cfg{display:flex; flex-direction:column; gap:16px; min-width:0;}
.pf-rd.pf-settings-page .pf-cfg-section.pf-dcard{padding:0; overflow:hidden;}
.pf-rd.pf-settings-page .pf-cfg-head{
  display:flex; align-items:center; gap:11px; padding:13px 17px;
  border-bottom:1px solid var(--pf-border); background:var(--pf-surface);
}
.pf-rd.pf-settings-page .pf-cfg-head h2{font-size:14px; font-weight:600; color:var(--pf-text);}
.pf-rd.pf-settings-page .pf-cfg-head .pf-chip{margin-left:auto;}
.pf-rd.pf-settings-page .pf-cfg-icon{
  width:30px; height:30px; flex:none; display:grid; place-items:center;
  border:1px solid var(--pf-border); border-radius:8px;
  background:var(--pf-bg); color:var(--link);
}
.pf-rd.pf-settings-page .pf-cfg-body{
  display:flex; flex-direction:column; gap:15px; padding:16px 18px 18px;
}
.pf-rd.pf-settings-page .pf-fgrid{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px 14px;
}
.pf-rd.pf-settings-page .pf-field{display:flex; flex-direction:column; min-width:0; margin:0;}
.pf-rd.pf-settings-page .pf-field > label{
  display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin:0 0 6px;
  color:var(--pf-text); font-family:var(--font); font-size:12px;
  font-weight:600; letter-spacing:normal; text-transform:none;
  position:static; inset:auto; transform:none; pointer-events:auto; transition:none;
}
.pf-rd.pf-settings-page .pf-code{
  padding:1px 6px; border-radius:4px; background:var(--pf-surface-2);
  color:var(--pf-muted); font-family:var(--mono); font-size:9.5px;
  font-weight:500; letter-spacing:.02em;
}
.pf-rd.pf-settings-page .pf-settings-badge{
  margin-left:0; padding:1px 5px; border-color:color-mix(in srgb,var(--link) 28%,transparent);
  border-radius:4px; background:var(--pf-tint-link); color:var(--link);
  font-family:var(--mono); font-size:8px; font-weight:600;
  letter-spacing:.07em; line-height:1.35; text-transform:uppercase;
}
.pf-rd.pf-settings-page .pf-field > .pf-input,
.pf-rd.pf-settings-page .pf-field > .pf-select{
  width:100%; min-width:0; min-height:42px; padding:9px 11px;
  border:1px solid var(--pf-border-strong); border-radius:var(--r-sm);
  background:var(--pf-bg); color:var(--pf-text); font:inherit; font-size:13.5px;
}
.pf-rd.pf-settings-page .pf-field > .pf-select{padding-right:30px; cursor:pointer;}
.pf-rd.pf-settings-page .pf-field > .pf-input:focus,
.pf-rd.pf-settings-page .pf-field > .pf-select:focus{
  outline:2px solid var(--focus); outline-offset:1px; border-color:var(--focus);
}
.pf-rd.pf-settings-page .pf-field > .pf-input:disabled{
  cursor:not-allowed; color:var(--pf-muted); background:var(--pf-surface-2); opacity:.8;
}
.pf-rd.pf-settings-page .pf-fhint{
  display:block; margin-top:5px; color:var(--pf-muted);
  font-size:11px; line-height:1.45;
}
.pf-rd.pf-settings-page .pf-secret-edit{
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; align-items:stretch;
}
.pf-rd.pf-settings-page .pf-secret-edit > .pf-input{min-width:0; width:100%;}
.pf-rd.pf-settings-page .pf-secret-view{height:auto; min-height:42px;}

.pf-rd.pf-settings-page .pf-secret-dialog{
  width:min(520px,calc(100vw - 32px)); max-width:520px; max-height:calc(100vh - 32px);
  max-height:calc(100dvh - 32px);
  margin:auto; padding:0; overflow:auto;
  border:1px solid var(--pf-border-strong); border-radius:var(--r-lg);
  background:var(--pf-bg); color:var(--pf-text); box-shadow:var(--sh3);
}
.pf-rd.pf-settings-page .pf-secret-dialog::backdrop{
  background:rgba(7,14,22,.72); backdrop-filter:blur(3px);
}
.pf-rd.pf-settings-page .pf-secret-dialog > form{display:grid; gap:17px; margin:0; padding:20px;}
.pf-rd.pf-settings-page .pf-secret-dialog-head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
  padding-bottom:14px; border-bottom:1px solid var(--pf-border);
}
.pf-rd.pf-settings-page .pf-secret-dialog-head h2{
  margin:5px 0 0; color:var(--pf-text); font-size:19px; line-height:1.2;
}
.pf-rd.pf-settings-page .pf-secret-dialog > form > .pf-note{margin:0;}
.pf-rd.pf-settings-page .pf-secret-auth-fields{display:grid; gap:13px;}
.pf-rd.pf-settings-page .pf-secret-auth-fields .pf-field{display:grid; gap:6px;}
.pf-rd.pf-settings-page .pf-secret-auth-fields .pf-field > span,
.pf-rd.pf-settings-page .pf-secret-result > label{
  color:var(--pf-text); font-size:12px; font-weight:600;
}
.pf-rd.pf-settings-page .pf-secret-auth-fields .pf-input,
.pf-rd.pf-settings-page .pf-secret-result .pf-input{
  width:100%; min-width:0; min-height:42px; padding:9px 11px;
  border:1px solid var(--pf-border-strong); border-radius:var(--r-sm);
  background:var(--pf-bg); color:var(--pf-text); font:inherit; font-size:13.5px;
}
.pf-rd.pf-settings-page .pf-secret-dialog .pf-error{margin:0;}
.pf-rd.pf-settings-page .pf-secret-result{
  display:grid; gap:7px; padding:13px;
  border:1px solid color-mix(in srgb,var(--pf-success) 35%,var(--pf-border));
  border-radius:var(--r-md); background:color-mix(in srgb,var(--pf-success) 7%,var(--pf-surface));
}
.pf-rd.pf-settings-page .pf-secret-result[hidden]{display:none;}
.pf-rd.pf-settings-page .pf-secret-value{
  font-family:var(--mono); font-size:12.5px; direction:ltr;
}
.pf-rd.pf-settings-page .pf-secret-result-foot{
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
}
.pf-rd.pf-settings-page .pf-secret-result-foot .pf-note{margin:0;}
.pf-rd.pf-settings-page .pf-secret-dialog-actions{
  display:flex; justify-content:flex-end; gap:10px;
  padding-top:15px; border-top:1px solid var(--pf-border);
}

.pf-rd.pf-settings-page .pf-cfg-toggle{
  display:flex; align-items:flex-start; gap:14px; width:100%; min-width:0;
  padding:2px 0; cursor:pointer;
}
.pf-rd.pf-settings-page .pf-cfg-toggle + .pf-cfg-toggle{
  padding-top:13px; border-top:1px solid var(--pf-border);
}
.pf-rd.pf-settings-page .pf-cfg-toggle .tx{min-width:0; flex:1;}
.pf-rd.pf-settings-page .pf-cfg-label{
  display:flex; align-items:center; gap:7px; flex-wrap:wrap;
  color:var(--pf-text); font-size:13px; font-weight:600;
}
.pf-rd.pf-settings-page .pf-cfg-toggle .pf-toggle{
  min-width:44px; min-height:32px; flex:none; display:inline-flex;
  align-items:center; justify-content:flex-end; margin-top:0;
}

.pf-rd.pf-settings-page .pf-cfg-adv{margin-top:1px;}
.pf-rd.pf-settings-page .pf-cfg-adv > summary{font-size:12px;}
.pf-rd.pf-settings-page .pf-cfg-adv .pf-disclosure-body{
  display:flex; flex-direction:column; gap:14px; padding:14px;
}
.pf-rd.pf-settings-page .pf-cfg-test{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin-top:1px; padding-top:14px; border-top:1px solid var(--pf-border);
}
.pf-rd.pf-settings-page .pf-settings-test-result{
  display:inline-flex; align-items:center; min-height:24px; color:var(--pf-muted);
  font-family:var(--mono); font-size:10px; letter-spacing:.03em;
}
.pf-rd.pf-settings-page .pf-settings-test-result.ok{color:var(--pf-success);}
.pf-rd.pf-settings-page .pf-settings-test-result.alert{color:var(--pf-alert);}
.pf-rd.pf-settings-page .pf-settings-test-result > .pf-ok,
.pf-rd.pf-settings-page .pf-settings-test-result > .pf-error{
  display:inline-flex; align-items:center; gap:6px; flex-wrap:wrap; margin:0;
}
.pf-rd.pf-settings-page .pf-settings-test-stamp{
  color:inherit; font:inherit; letter-spacing:inherit; white-space:nowrap; opacity:.86;
}
.pf-rd.pf-settings-page .pf-cfg-test-email{margin-top:-4px; padding-top:0; border-top:0;}
.pf-rd.pf-settings-page .pf-cfg-test-email .pf-input{
  width:auto; min-width:190px; max-width:270px; height:34px; flex:1 1 190px; padding:7px 10px;
}

.pf-rd.pf-settings-page .pf-two-aside{position:sticky; top:20px;}
.pf-rd.pf-settings-page .pf-save-panel{
  padding:18px; border:1px solid var(--pf-border); border-radius:var(--r-lg);
  background:var(--pf-bg); box-shadow:var(--sh2);
}
.pf-rd.pf-settings-page .pf-save-panel h2{margin:0 0 8px; color:var(--pf-text); font-size:14px;}
.pf-rd.pf-settings-page .pf-save-panel p{margin:0 0 14px; color:var(--pf-muted); font-size:12px; line-height:1.5;}
.pf-rd.pf-settings-page .pf-save-panel .pf-note{
  margin:11px 0 0; padding-top:11px; border-top:1px solid var(--pf-border); font-size:11px;
}

@media (max-width:900px){
  .pf-rd.pf-settings-page .pf-settings-layout{grid-template-columns:1fr;}
  .pf-rd.pf-settings-page .pf-two-aside{position:static;}
}
@media (max-width:720px){
  .pf-rd.pf-settings-page .pf-fgrid{grid-template-columns:1fr;}
}
@media (max-width:640px){
  .pf-rd.pf-settings-page .pf-phead-actions{width:100%; max-width:none;}
  .pf-rd.pf-settings-page .pf-phead-actions .pf-btn{flex:1 1 calc(50% - 5px);}
  .pf-rd.pf-settings-page .pf-cfg-status{align-items:stretch;}
  .pf-rd.pf-settings-page .pf-cfg-status form,
  .pf-rd.pf-settings-page .pf-cfg-status .pf-btn{width:100%;}
  .pf-rd.pf-settings-page .pf-cfg-head{padding:12px 14px;}
  .pf-rd.pf-settings-page .pf-cfg-body{padding:15px 14px 16px;}
  .pf-rd.pf-settings-page .pf-cfg-test .pf-btn,
  .pf-rd.pf-settings-page .pf-cfg-test-email .pf-input{width:100%; max-width:none; flex-basis:100%;}
  .pf-rd.pf-settings-page .pf-cfg-test-email .pf-btn{width:100%;}
  .pf-rd.pf-settings-page .pf-secret-dialog{
    width:calc(100vw - 20px); max-height:calc(100vh - 20px);
    max-height:calc(100dvh - 20px);
  }
  .pf-rd.pf-settings-page .pf-secret-dialog > form{padding:16px;}
  .pf-rd.pf-settings-page .pf-secret-dialog-actions{align-items:stretch; flex-direction:column;}
  .pf-rd.pf-settings-page .pf-secret-dialog-actions .pf-btn{width:100%;}
}

/* Portfolio Studio Social H2: normal-flow composer workspace. Card pixels stay in
   social-cards.css; these rules style only the operator controls around the stage. */
.pf-studio-social{
  --s2-work-bg:#0b1118; --s2-panel:#111a24; --s2-panel-2:#162230;
  --s2-line:#263646; --s2-text:#eef4f8; --s2-muted:#93a4b3;
  --s2-accent:#e4874f; --s2-blue:#69a9e6;
  --s2-bar:52px; --s2-tb:46px; --s2-left:236px; --s2-right:372px;
}
.pf-studio-social .s2-bar{
  position:relative; z-index:25; height:var(--s2-bar); min-height:var(--s2-bar);
  padding:0 14px;
}
.pf-studio-social .s2-mobile-actions-toggle.s2-btn{display:none;}
.pf-studio-social .s2-mobile-actions-menu{display:flex; align-items:center; gap:8px;}
.pf-studio-social.is-composer .s2-view-inner{max-width:none; padding:22px 22px 48px;}
.pf-studio-social.is-composer .s2-view-head{margin-bottom:26px;}
.pf-studio-social.is-composer .s2-view-kicker{
  margin-bottom:8px; font:700 10px/1 var(--pf-font-mono); letter-spacing:.14em;
}
.pf-studio-social #pf-social{min-width:0;}
.pf-studio-social .s2-composer{min-width:0; color:var(--s2-text);}
.pf-studio-social .s2-sub{
  display:flex; align-items:center; gap:12px; min-width:0; margin-bottom:18px;
  padding:12px; overflow-x:auto; border:1px solid var(--s2-line);
  border-radius:10px; background:var(--s2-work-bg); box-shadow:0 8px 28px rgba(0,0,0,.16);
  scrollbar-width:thin;
}
.pf-studio-social .s2-sub > *{flex:none;}
.pf-studio-social .s2-sub-current{display:flex; align-items:center; gap:8px; min-width:150px;}
.pf-studio-social .s2-sub-back{display:inline-flex; align-items:center; gap:3px; color:var(--s2-muted); font-size:12px; text-decoration:none;}
.pf-studio-social .s2-sub-template{max-width:210px; overflow:hidden; color:var(--s2-text); font-size:13px; font-weight:700; text-overflow:ellipsis; white-space:nowrap;}
.pf-studio-social .s2-sub-group{display:flex; align-items:center; gap:6px;}
.pf-studio-social .s2-sub-label{
  color:var(--s2-muted); font:700 10px/1 var(--pf-font-mono);
  letter-spacing:.12em; text-transform:uppercase;
}
.pf-studio-social .s2-control-label{
  color:var(--s2-muted); font:700 9px/1 var(--pf-font-mono);
  letter-spacing:.12em; text-transform:uppercase;
}
.pf-studio-social .s2-eyebrow{
  color:var(--s2-muted); font:700 9.5px/1 var(--pf-font-mono);
  letter-spacing:.14em; text-transform:uppercase;
}
.pf-studio-social .s2-semantic-eyebrow{
  color:var(--s2-muted); font:600 .72rem/1.2 var(--pf-font);
  letter-spacing:.12em; text-transform:uppercase;
}
.pf-studio-social .s2-sub-context,.pf-studio-social .s2-format-chip,.pf-studio-social .s2-manual-badge{
  display:inline-flex; align-items:center; min-height:24px; padding:4px 8px;
  border:1px solid var(--s2-line); border-radius:999px; color:var(--s2-muted);
  font-family:var(--mono); font-size:9px; letter-spacing:.06em; text-transform:uppercase;
}
.pf-studio-social .s2-sub-spacer{flex:1 0 12px;}
.pf-studio-social .s2-segment{display:inline-flex; align-items:center; gap:4px; padding:4px; border:1px solid var(--s2-line); border-radius:7px; background:#0a1017;}
.pf-studio-social .s2-control-form{display:inline-flex; margin:0;}
.pf-studio-social .s2-seg-btn,
.pf-studio-social .pf-social-tab,
.pf-studio-social .pf-social-fmt{
  min-height:31px; padding:7px 8px; border:0; border-radius:5px; background:transparent;
  color:var(--s2-muted); font-family:var(--font); font-size:11px; font-weight:650; cursor:pointer;
}
.pf-studio-social .s2-seg-btn:hover,
.pf-studio-social .pf-social-tab:hover,
.pf-studio-social .pf-social-fmt:hover{color:var(--s2-text); background:var(--s2-panel-2);}
.pf-studio-social .s2-seg-btn.is-active,
.pf-studio-social .s2-seg-btn[aria-pressed="true"],
.pf-studio-social .pf-social-tab.is-active,
.pf-studio-social .pf-social-fmt.is-active{
  color:#fff; background:#29435b; box-shadow:inset 0 0 0 1px rgba(105,169,230,.24);
}
.pf-studio-social .s2-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:32px;
  padding:7px 10px; border:1px solid var(--s2-line); border-radius:7px;
  background:var(--s2-panel); color:var(--s2-text); font-size:11px; font-weight:650;
  line-height:1.1; text-decoration:none; white-space:nowrap; cursor:pointer;
}
.pf-studio-social .s2-btn:hover{border-color:#45637e; background:var(--s2-panel-2);}
.pf-studio-social .s2-btn[disabled]{opacity:.5; cursor:not-allowed; pointer-events:none;}

.pf-studio-social .s2-composer-grid{
  display:grid; grid-template-columns:var(--s2-left) minmax(0,1fr) var(--s2-right);
  grid-template-areas:"slot stage rail"; gap:18px; align-items:start; min-width:0;
}
.pf-studio-social .s2-slotbar{grid-area:slot;}
.pf-studio-social .s2-stage{grid-area:stage; position:sticky; top:16px; min-width:0;}
.pf-studio-social .s2-rail{grid-area:rail;}
.pf-studio-social .s2-slotbar,.pf-studio-social .s2-rail{
  min-width:0; overflow:hidden; border:1px solid var(--s2-line); border-radius:10px;
  background:var(--s2-panel); box-shadow:0 8px 28px rgba(0,0,0,.14);
}
.pf-studio-social .s2-rail-head-actions{display:flex; align-items:center; gap:7px;}
.pf-studio-social .s2-mobile-slot-toggle,.pf-studio-social .s2-mobile-sheet-head,
.pf-studio-social .s2-bottombar{display:none;}
.pf-studio-social .s2-rail-head,.pf-studio-social .s2-assets-head,.pf-studio-social .s2-publish-heading{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.pf-studio-social .s2-rail-head{padding:18px 20px; border-bottom:1px solid var(--s2-line);}
.pf-studio-social .s2-rail-head h2,.pf-studio-social .s2-assets-head h3,.pf-studio-social .s2-publish-heading h2{
  margin:3px 0 0; color:var(--s2-text); font-size:14px; line-height:1.25;
}
.pf-studio-social .s2-slotbar-list{display:flex; flex-direction:column; gap:6px; padding:12px;}
.pf-studio-social .s2-slot{
  display:grid; grid-template-columns:24px minmax(0,1fr) 8px; align-items:center; gap:7px;
  width:100%; min-width:0; padding:10px 12px; border:1px solid transparent; border-radius:7px;
  background:transparent; color:var(--s2-text); text-align:left; cursor:pointer;
}
.pf-studio-social .s2-slot:hover{background:var(--s2-panel-2);}
.pf-studio-social .s2-slot.is-active,.pf-studio-social .s2-slot[aria-pressed="true"]{border-color:#3d5d78; background:#192a39;}
.pf-studio-social .s2-slot-icon{display:grid; place-items:center; width:24px; height:24px; border-radius:6px; background:#223244; color:var(--s2-blue);}
.pf-studio-social .s2-slot strong,.pf-studio-social .s2-slot small{display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.pf-studio-social .s2-slot strong{font-size:12px;}.pf-studio-social .s2-slot small{margin-top:3px; color:var(--s2-muted); font-size:10px; text-transform:capitalize;}
.pf-studio-social .s2-slot-dot{width:6px; height:6px; border-radius:50%; background:var(--s2-accent);}
.pf-studio-social .s2-slotctl,.pf-studio-social .s2-control-block,.pf-studio-social .s2-enhance{
  display:flex; flex-direction:column; gap:10px; padding:14px 16px; border-top:1px solid var(--s2-line);
}
.pf-studio-social .s2-slotctl h3{margin:0; color:var(--s2-text); font-size:13px;}
.pf-studio-social .s2-slot-current{display:flex; align-items:center; gap:8px; min-width:0; padding:7px; border-radius:7px; background:#0c141c;}
.pf-studio-social .s2-slot-current img{width:34px; height:34px; flex:none; border-radius:5px; object-fit:cover;}
.pf-studio-social .s2-slot-current span{overflow:hidden; color:var(--s2-muted); font-size:11px; text-overflow:ellipsis; white-space:nowrap;}
.pf-studio-social .s2-slot-actions{display:flex; align-items:center; gap:6px; flex-wrap:wrap;}
.pf-studio-social .s2-slot-actions .pf-link{font-size:9px;}
.pf-studio-social .s2-layer-panel{
  display:flex; flex-direction:column; gap:9px; padding:14px 16px;
  border-top:1px solid var(--s2-line);
}
.pf-studio-social .s2-layer-panel-head{display:flex; align-items:center; justify-content:space-between; gap:8px;}
.pf-studio-social .s2-layer-list{display:flex; flex-direction:column; gap:8px;}
.pf-studio-social .s2-layer-item{
  display:flex; flex-direction:column; gap:8px; min-width:0; padding:8px;
  border:1px solid var(--s2-line); border-radius:8px; background:#0d151d;
}
.pf-studio-social .s2-layer-item.is-unavailable{border-color:#8b6335;}
.pf-studio-social .s2-layer-item-head{display:flex; align-items:center; gap:5px; min-width:0;}
.pf-studio-social .s2-layer-select{
  display:grid; grid-template-columns:32px minmax(0,1fr); align-items:center; gap:7px;
  min-width:0; flex:1 1 auto; padding:0; border:0; background:transparent;
  color:var(--s2-text); text-align:left; cursor:pointer;
}
.pf-studio-social .s2-layer-select img{width:32px; height:32px; border-radius:5px; object-fit:contain; background:#17222d;}
.pf-studio-social .s2-layer-select strong,.pf-studio-social .s2-layer-select small{display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.pf-studio-social .s2-layer-select strong{font-size:10px;}.pf-studio-social .s2-layer-select small{margin-top:2px; color:var(--s2-muted); font-size:8px;}
.pf-studio-social .s2-layer-item.is-selected{border-color:var(--s2-blue); box-shadow:inset 0 0 0 1px rgba(105,169,230,.24);}
.pf-studio-social .s2-layer-select[aria-pressed="true"]{color:#fff;}
.pf-studio-social .s2-layer-nudges{display:grid; grid-template-columns:repeat(4,1fr); gap:4px;}
.pf-studio-social .s2-layer-nudges form{display:block; min-width:0;}
.pf-studio-social .s2-layer-nudges .s2-icon-btn{width:100%; min-height:27px;}
.pf-studio-social .s2-range-form{display:flex; flex-direction:column; gap:5px; margin:0;}
.pf-studio-social .s2-range-form label{display:flex; justify-content:space-between; color:var(--s2-muted); font-size:11px;}
.pf-studio-social .s2-range-form output{color:var(--s2-text); font-family:var(--mono);}
.pf-studio-social .s2-range-form input[type="range"]{width:100%; accent-color:var(--s2-accent);}
.pf-studio-social .s2-position-controls{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px;}
.pf-studio-social .s2-reframe-help{margin:0; line-height:1.45;}
.pf-studio-social [data-social-reframe][aria-pressed="true"]{
  border-color:var(--s2-blue); background:#183047; color:#fff;
}
.pf-studio-social .s2-reframe-reset{align-self:flex-start;}
.pf-studio-social .s2-empty{margin:0; padding:12px; color:var(--s2-muted); font-size:10px; line-height:1.45;}
.pf-studio-social .s2-isolate-status{display:flex; flex-direction:column; gap:5px; color:var(--s2-muted); font-size:9px; line-height:1.4;}
.pf-studio-social .s2-isolate-status form{display:flex; margin:0;}
.pf-studio-social .s2-copy-editor{
  display:flex; min-width:0; flex-direction:column; gap:10px; padding:14px 16px;
  border-top:1px solid var(--s2-line);
}
.pf-studio-social .s2-copy-head{display:flex; min-width:0; flex-direction:column; gap:3px;}
.pf-studio-social .s2-copy-fields{display:flex; min-width:0; flex-direction:column; gap:10px;}
.pf-studio-social .s2-copy-field{
  min-width:0; padding:10px; border:1px solid var(--s2-line); border-radius:7px;
  background:#0d151d;
}
.pf-studio-social .s2-copy-field.is-missing{border-color:#8b6335; background:#17140f;}
.pf-studio-social .s2-copy-form{display:flex; min-width:0; flex-direction:column; gap:6px; margin:0;}
.pf-studio-social .s2-copy-form label{
  display:flex; min-width:0; align-items:center; justify-content:space-between; gap:7px;
  color:var(--s2-text); font-size:11px; font-weight:700;
}
.pf-studio-social .s2-copy-form label small{color:#e5c878; font-size:7px; font-weight:650; text-transform:uppercase;}
.pf-studio-social .s2-copy-form .pf-input{
  box-sizing:border-box; width:100%; min-width:0; border-color:var(--s2-line);
  background:#0b1219; color:var(--s2-text); font-size:11px; resize:vertical;
}
.pf-studio-social .s2-copy-actions{display:flex; min-width:0; align-items:center; gap:7px; flex-wrap:wrap;}
.pf-studio-social .s2-copy-actions .pf-link{font-size:9px;}
.pf-studio-social .s2-testimonial-evidence{
  display:flex; min-width:0; flex-direction:column; gap:10px; padding:14px 16px;
  border-top:1px solid var(--s2-line); background:#101821;
}
.pf-studio-social .s2-testimonial-evidence > .pf-hint{
  margin:0; overflow-wrap:anywhere; line-height:1.45;
}
.pf-studio-social .s2-testimonial-form{
  display:flex; min-width:0; flex-direction:column; gap:9px; margin:0;
}
.pf-studio-social .s2-testimonial-form .pf-field{min-width:0; margin:0;}
.pf-studio-social .s2-testimonial-form .pf-field-label{
  display:block; margin-bottom:4px; color:var(--s2-text); font-size:10px;
  font-weight:700; overflow-wrap:anywhere;
}
.pf-studio-social .s2-testimonial-form .pf-input{
  box-sizing:border-box; width:100%; max-width:100%; min-width:0;
  border-color:var(--s2-line); background:#0b1219; color:var(--s2-text);
  font-size:11px;
}
.pf-studio-social .s2-testimonial-form textarea.pf-input{resize:vertical;}
.pf-studio-social .s2-testimonial-receipt{
  display:flex; min-width:0; flex-direction:column; gap:9px; padding-top:12px;
  border-top:1px solid var(--s2-line);
}
.pf-studio-social .s2-testimonial-receipt > .pf-hint{
  margin:0; overflow-wrap:anywhere;
}
.pf-studio-social .s2-testimonial-actions{
  display:flex; min-width:0; align-items:center; gap:8px; flex-wrap:wrap;
}
.pf-studio-social .s2-testimonial-actions form{margin:0;}
.pf-studio-social .s2-testimonial-actions .pf-link{font-size:9px;}
.pf-studio-social .s2-format-chip.is-warn{border-color:#8b6335; color:#e5c878;}

.pf-studio-social .s2-swatches{display:flex; gap:6px; flex-wrap:wrap;}
.pf-studio-social .s2-swatch{width:25px; height:25px; padding:0; border:1px solid #3a4c5e; border-radius:6px; background:#fff; color:#0b1118; cursor:pointer;}
.pf-studio-social .s2-swatch.is-active,.pf-studio-social .s2-swatch[aria-pressed="true"]{outline:2px solid var(--s2-accent); outline-offset:1px;}
.pf-studio-social .s2-swatch.is-none{background:#101923; color:var(--s2-muted);}
.pf-studio-social .s2-swatch-white{background:#fff;}.pf-studio-social .s2-swatch-surface{background:#fafbfc;}
.pf-studio-social .s2-swatch-navy{background:#0f2030;}.pf-studio-social .s2-swatch-blue{background:#004b96;}
.pf-studio-social .s2-swatch-terracotta{background:#c56630;}
.pf-studio-social .s2-swatch-art{overflow:hidden; background:#17222d;}
.pf-studio-social .s2-swatch-art img{display:block; width:100%; height:100%; object-fit:cover;}
.pf-studio-social .s2-text-schemes{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:5px; min-width:0;}
.pf-studio-social .s2-text-schemes .s2-control-form{width:100%; min-width:0;}
.pf-studio-social .s2-text-scheme{
  display:grid; width:100%; min-width:0; min-height:30px; padding:0; place-items:center;
  border:1px solid #3a4c5e; border-radius:6px; color:#1f2933; cursor:pointer;
  font-family:var(--font); font-size:11px; font-weight:700;
}
.pf-studio-social .s2-text-scheme-ink{background:#edf2f7;}
.pf-studio-social .s2-text-scheme-inkwash{background:linear-gradient(180deg,#d8e1e9,#c4d0da);}
.pf-studio-social .s2-text-scheme-inkpanel{background:#f4f7fa; box-shadow:inset 0 0 0 1px rgba(31,41,51,.12);}
.pf-studio-social .s2-text-scheme-light{background:#0f2030; color:#edf2f7;}
.pf-studio-social .s2-text-scheme-lightscrim{background:linear-gradient(180deg,#46586a,#2a3b4b); color:#fff;}
.pf-studio-social .s2-text-scheme:hover{border-color:var(--s2-blue);}
.pf-studio-social .s2-text-scheme.is-auto{outline:1px dashed rgba(197,102,48,.72); outline-offset:1px;}
.pf-studio-social .s2-text-scheme.is-active,.pf-studio-social .s2-text-scheme[aria-pressed="true"]{outline:2px solid var(--s2-accent); outline-offset:1px;}
.pf-studio-social .s2-text-scheme:focus-visible{outline:2px solid var(--focus); outline-offset:2px;}

.pf-studio-social .s2-stage .s2-frame{
  min-height:640px; padding:28px; border-color:var(--s2-line); background:var(--s2-work-bg);
}
.pf-studio-social .s2-stage .pf-social-preview{width:100%; max-width:640px; border-radius:7px; background:#fff; box-shadow:0 12px 34px rgba(0,0,0,.35);}
.pf-studio-social .pf-social-stage{position:relative;}
.pf-studio-social .pf-card-stage > foreignObject{pointer-events:none;}
.pf-studio-social .s2-stage-copy-layer{
  position:absolute; z-index:3; top:0; left:0; display:block; width:100%; height:auto;
  overflow:visible; pointer-events:none;
}
.pf-studio-social .s2-stage-copy-hit{overflow:visible; pointer-events:all;}
.pf-studio-social .s2-stage-copy-target{
  display:block; box-sizing:border-box; width:100%; height:100%; min-width:0;
  min-height:0; margin:0; padding:0; border:2px solid transparent; border-radius:8px;
  background:transparent; color:transparent; font-size:0; cursor:text;
  touch-action:manipulation;
}
.pf-studio-social .s2-stage-copy-target:hover{
  border-color:rgba(255,255,255,.78); background:rgba(105,169,230,.08);
  box-shadow:inset 0 0 0 1px rgba(15,32,48,.52);
}
.pf-studio-social .s2-stage-copy-target:focus-visible{
  border-color:#fff; outline:3px solid var(--s2-blue); outline-offset:-5px;
  background:rgba(105,169,230,.13); box-shadow:inset 0 0 0 1px rgba(15,32,48,.68);
}
.pf-studio-social .s2-composer.is-hydrating .s2-stage-copy-layer,
.pf-studio-social .pf-social-stage.is-reframing .s2-stage-copy-layer{
  visibility:hidden; pointer-events:none;
}
.pf-studio-social .s2-composer.is-layer-source-dragging .s2-stage-copy-layer,
.pf-studio-social .s2-composer.is-layer-source-dragging .s2-stage-copy-hit,
.pf-studio-social .s2-composer.is-layer-source-dragging .s2-stage-copy-target{
  pointer-events:none;
}
.pf-studio-social .s2-reframe-overlay{
  position:absolute; inset:0; z-index:4; display:block; width:100%; height:100%;
  overflow:visible; pointer-events:none; touch-action:none; user-select:none;
}
.pf-studio-social .s2-reframe-ghost{
  opacity:.35; pointer-events:none; user-select:none;
  filter:drop-shadow(0 10px 24px rgba(0,0,0,.34));
}
.pf-studio-social .s2-reframe-frame{
  fill:transparent; stroke:var(--s2-accent); stroke-width:3;
  vector-effect:non-scaling-stroke; pointer-events:none;
}
.pf-studio-social .s2-reframe-outline{
  fill:transparent; stroke:#fff; stroke-width:3;
  stroke-dasharray:12 8; vector-effect:non-scaling-stroke; pointer-events:all; cursor:move;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.75));
}
.pf-studio-social .s2-reframe-hit{
  fill:transparent; stroke:transparent; stroke-width:44;
  vector-effect:non-scaling-stroke; pointer-events:all;
}
.pf-studio-social .s2-reframe-handle{
  fill:#fff; stroke:var(--s2-blue); stroke-width:4; vector-effect:non-scaling-stroke;
  pointer-events:none; filter:drop-shadow(0 1px 2px rgba(0,0,0,.65));
}
.pf-studio-social .s2-reframe-handle-nw,
.pf-studio-social .s2-reframe-handle-se,
.pf-studio-social .s2-reframe-hit-nw,
.pf-studio-social .s2-reframe-hit-se{cursor:nwse-resize;}
.pf-studio-social .s2-reframe-handle-ne,
.pf-studio-social .s2-reframe-handle-sw,
.pf-studio-social .s2-reframe-hit-ne,
.pf-studio-social .s2-reframe-hit-sw{cursor:nesw-resize;}
.pf-studio-social .s2-reframe-overlay:focus{outline:none;}
.pf-studio-social .s2-reframe-overlay:focus .s2-reframe-outline{
  stroke:var(--s2-blue); stroke-width:5;
}
.pf-studio-social .s2-reframe-overlay.is-dirty .s2-reframe-outline{stroke:#f0c46c;}
.pf-studio-social .s2-reframe-overlay.is-saving .s2-reframe-outline,
.pf-studio-social .s2-reframe-overlay.is-saving .s2-reframe-hit,
.pf-studio-social .s2-reframe-overlay.is-saving .s2-reframe-handle{cursor:progress;}
.pf-studio-social .pf-floating-layer-control{outline:none;}
.pf-studio-social .pf-floating-layer-hit{fill:transparent; pointer-events:all; cursor:grab; touch-action:none;}
.pf-studio-social .pf-floating-layer-outline{fill:none; stroke:transparent; stroke-width:6; pointer-events:none;}
.pf-studio-social .pf-floating-layer-resize-hit{
  display:none; fill:transparent; stroke:none; stroke-width:0;
  vector-effect:non-scaling-stroke; pointer-events:all; cursor:nwse-resize; touch-action:none;
}
.pf-studio-social .pf-floating-layer-resize{
  display:none; fill:#fff; stroke:#004b96; stroke-width:6px;
  vector-effect:non-scaling-stroke; pointer-events:all; cursor:nwse-resize; touch-action:none;
}
.pf-studio-social .pf-floating-layer-control.is-selected .pf-floating-layer-outline,
.pf-studio-social .pf-floating-layer-control:focus-visible .pf-floating-layer-outline{stroke:#1b78cf; stroke-dasharray:14 9;}
.pf-studio-social .pf-floating-layer-control.is-selected .pf-floating-layer-resize,
.pf-studio-social .pf-floating-layer-control:focus-visible .pf-floating-layer-resize,
.pf-studio-social .pf-floating-layer-control.is-selected .pf-floating-layer-resize-hit,
.pf-studio-social .pf-floating-layer-control:focus-visible .pf-floating-layer-resize-hit{display:block;}
.pf-studio-social .pf-floating-layer-control.is-dragging .pf-floating-layer-hit{cursor:grabbing;}
.pf-studio-social .s2-stage.is-layer-drop-target .pf-social-preview{outline:3px solid var(--s2-accent); outline-offset:4px;}
.pf-studio-social .s2-readiness{
  box-sizing:border-box; width:100%; max-width:640px; margin-top:14px; padding:11px 12px;
  border:1px solid #2d7257; border-radius:8px; background:#0d1d18; color:#80d7b1;
  font-size:9px; line-height:1.45;
}
.pf-studio-social .s2-readiness strong{display:block; color:inherit; font-size:10px;}
.pf-studio-social .s2-readiness.is-missing{border-color:#8b6335; background:#1b160e; color:#e5c878;}
.pf-studio-social .s2-readiness ul{display:flex; gap:5px; flex-wrap:wrap; margin:6px 0 0; padding:0; list-style:none;}
.pf-studio-social .s2-readiness a{
  display:inline-flex; min-height:25px; align-items:center; padding:3px 7px;
  border:1px solid currentColor; border-radius:6px; color:inherit; font-weight:700;
  text-decoration:none;
}
.pf-studio-social .s2-readiness a:hover{text-decoration:underline;}
.pf-studio-social .s2-readiness a:focus-visible,
.pf-studio-social .s2-bottombar button:focus-visible,
.pf-studio-social .s2-mobile-slot-toggle:focus-visible,
.pf-studio-social .s2-mobile-sheet-head .s2-icon-btn:focus-visible,
.pf-studio-social .s2-libseg button:focus-visible,
.pf-studio-social .s2-asset-filter button:focus-visible,
.pf-studio-social .s2-search:focus-visible,
.pf-studio-social .pf-social-film-btn:focus-visible{
  outline:2px solid var(--s2-blue); outline-offset:2px;
}

.pf-studio-social .s2-stack{
  min-width:0; margin-top:10px; overflow:hidden; border:1px solid var(--s2-line);
  border-radius:10px; background:var(--s2-work-bg); color:var(--s2-text);
  box-shadow:0 8px 28px rgba(0,0,0,.14);
}
.pf-studio-social .s2-stack-head{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:9px 11px; border-bottom:1px solid var(--s2-line);
}
.pf-studio-social .s2-stack-head h2{display:flex; align-items:center; gap:6px; margin:2px 0 0; color:var(--s2-text); font-size:11px;}
.pf-studio-social .s2-stack-head-side{display:flex; min-width:0; align-items:flex-end; flex-direction:column; gap:5px;}
.pf-studio-social .s2-stack-head-actions{display:flex; align-items:center; justify-content:flex-end; gap:5px; flex-wrap:wrap;}
.pf-studio-social .s2-stack-head-btn{
  min-height:28px; padding:5px 8px; border:1px solid var(--s2-line); border-radius:6px;
  background:var(--s2-panel); color:var(--s2-text); font-size:9px; font-weight:700; cursor:pointer;
}
.pf-studio-social .s2-stack-head-btn:hover{border-color:#45637e; background:var(--s2-panel-2);}
.pf-studio-social .s2-stack-head-btn.is-danger{border-color:#704747; color:#ffb0a7;}
.pf-studio-social .s2-stack-head-btn:focus-visible{outline:2px solid var(--s2-blue); outline-offset:2px;}
.pf-studio-social .s2-count{color:var(--s2-muted); font-family:var(--mono); font-size:8px; font-weight:600;}
.pf-studio-social .s2-note{margin:0; color:var(--s2-muted); font-size:9px; line-height:1.4;}
.pf-studio-social .s2-stack-list{
  display:flex; gap:8px; min-width:0; margin:0; padding:9px; overflow-x:auto;
  list-style:none; scrollbar-width:thin; scroll-snap-type:x proximity;
}
.pf-studio-social .s2-stacktile{
  display:flex; flex:0 0 126px; flex-direction:column; gap:5px; min-width:0; padding:5px;
  border:1px solid var(--s2-line); border-radius:8px; background:#0d151d;
  scroll-snap-align:start;
}
.pf-studio-social .s2-stacktile.is-current{border-color:var(--s2-accent); box-shadow:inset 0 0 0 1px rgba(228,135,79,.25);}
.pf-studio-social .s2-stack-select{
  display:flex; flex-direction:column; gap:5px; width:100%; min-width:0; padding:0;
  border:0; background:transparent; color:var(--s2-text); text-align:left; cursor:pointer;
}
.pf-studio-social .s2-stack-select:focus-visible{outline:2px solid var(--s2-blue); outline-offset:2px; border-radius:5px;}
.pf-studio-social .s2-stack-thumb{display:grid; width:100%; aspect-ratio:4/3; place-items:center; overflow:hidden; border-radius:5px; background:#17222d; color:var(--s2-muted); font-family:var(--mono); font-size:12px;}
.pf-studio-social .s2-stack-thumb img{width:100%; height:100%; object-fit:cover;}
.pf-studio-social .s2-stack-meta{display:grid; grid-template-columns:17px minmax(0,1fr); align-items:center; gap:4px; min-width:0; font-size:8px;}
.pf-studio-social .s2-stack-meta strong{display:grid; width:17px; height:17px; place-items:center; border-radius:50%; background:#24384a; font-family:var(--mono); font-size:7px;}
.pf-studio-social .s2-stack-meta span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.pf-studio-social .s2-stack-actions{display:grid; grid-template-columns:1fr 1fr 1fr; gap:3px;}
.pf-studio-social .s2-stack-actions form{display:block; min-width:0;}
.pf-studio-social .s2-stack-actions button{
  display:grid; width:100%; min-height:27px; padding:0; place-items:center; border:1px solid var(--s2-line);
  border-radius:5px; background:#111c27; color:var(--s2-muted); cursor:pointer;
}
.pf-studio-social .s2-stack-actions button:hover:not([disabled]){border-color:#45637e; color:var(--s2-text); background:var(--s2-panel-2);}
.pf-studio-social .s2-stack-actions button[disabled]{opacity:.32; cursor:not-allowed;}

.pf-studio-social .s2-stack-review{
  display:flex; box-sizing:border-box; width:100%; min-width:0; max-width:680px; min-height:0;
  margin:0 auto; flex-direction:column; overflow:hidden; border:1px solid var(--s2-line);
  border-radius:10px; background:var(--s2-work-bg); color:var(--s2-text);
  box-shadow:0 8px 28px rgba(0,0,0,.18);
}
.pf-studio-social .s2-stack-review[hidden]{display:none;}
.pf-studio-social .s2-stack-review-head{
  display:flex; flex:none; align-items:center; justify-content:space-between; gap:12px;
  padding:12px; border-bottom:1px solid var(--s2-line); background:#0d151e;
}
.pf-studio-social .s2-stack-review-head h2{margin:2px 0 0; color:var(--s2-text); font-size:14px; line-height:1.3;}
.pf-studio-social .s2-stack-review-head h2:focus{outline:none;}
.pf-studio-social .s2-stack-review-head h2:focus-visible{outline:2px solid var(--s2-blue); outline-offset:4px;}
.pf-studio-social .s2-stack-review-body{min-height:0; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin;}
.pf-studio-social .s2-stack-review-status{margin:0; padding:18px; color:var(--s2-muted); font-size:10px; line-height:1.5;}
.pf-studio-social .s2-stack-review-body > .s2-btn{margin:0 18px 18px;}
.pf-studio-social .s2-stack-review-list{
  display:flex; min-width:0; flex-direction:column; gap:14px; margin:0; padding:14px;
  list-style:none;
}
.pf-studio-social .s2-stack-review-item{min-width:0;}
.pf-studio-social .s2-stack-review-card{
  display:flex; box-sizing:border-box; width:100%; min-width:0; flex-direction:column; gap:9px;
  padding:8px; overflow:hidden; border:1px solid var(--s2-line); border-radius:9px;
  background:#0d151d; color:var(--s2-text); text-align:left; cursor:pointer;
}
.pf-studio-social .s2-stack-review-card:hover{border-color:#486784; background:#142231;}
.pf-studio-social .s2-stack-review-card:focus-visible{outline:2px solid var(--s2-blue); outline-offset:2px;}
.pf-studio-social .s2-stack-review-card svg{
  display:block; width:100%; max-width:100%; height:auto; overflow:hidden; border-radius:6px;
  background:#fff; box-shadow:0 8px 24px rgba(0,0,0,.28); pointer-events:none;
}
.pf-studio-social .s2-stack-review-meta{display:flex; min-width:0; align-items:baseline; gap:7px; padding:0 2px 2px;}
.pf-studio-social .s2-stack-review-meta strong{font-size:10px;}
.pf-studio-social .s2-stack-review-meta span{overflow:hidden; color:var(--s2-muted); font-size:9px; text-overflow:ellipsis; white-space:nowrap;}

@media (min-width:900px){
  .pf-studio-social .s2-stage.is-stack-reviewing{
    display:flex; max-height:calc(100dvh - 32px); flex-direction:column; overflow:hidden;
  }
  .pf-studio-social .s2-stage.is-stack-reviewing .s2-stack-review{flex:1 1 auto;}
  .pf-studio-social .s2-stage.is-stack-reviewing .s2-stack{flex:0 0 auto;}
}

.pf-studio-social .s2-libseg{display:grid; grid-template-columns:1fr 1fr; padding:10px; border-bottom:1px solid var(--s2-line); background:#0d151e;}
.pf-studio-social .s2-libseg button{min-height:36px; border:0; border-bottom:2px solid transparent; background:transparent; color:var(--s2-muted); font-size:12px; font-weight:700; cursor:pointer;}
.pf-studio-social .s2-libseg button[aria-selected="true"]{border-bottom-color:var(--s2-accent); color:var(--s2-text);}
.pf-studio-social .s2-rail [role="tabpanel"]{padding:16px;}
.pf-studio-social .s2-search{min-height:36px; margin-bottom:12px; border-color:var(--s2-line); background:#0b1219; color:var(--s2-text); font-size:12px;}
.pf-studio-social .ss-tpl-list{display:flex; flex-flow:column nowrap; gap:12px; max-height:760px; overflow-x:hidden; overflow-y:auto;}
.pf-studio-social .s2-template-family{display:flex; flex-direction:column; gap:6px; width:100%; min-width:0;}
.pf-studio-social .s2-template-family > h3{
  margin:4px 3px; color:var(--pf-terracotta-2); font:700 10.5px/1 var(--pf-font-mono);
  letter-spacing:.14em; text-transform:uppercase;
}
.pf-studio-social .pf-social-film-btn.ss-tpl{
  display:grid; grid-template-columns:86px minmax(0,1fr); gap:10px; position:relative;
  width:100%; min-width:0; padding:10px 12px; border:1px solid var(--s2-line); border-radius:8px;
  background:#0d151d; color:var(--s2-text); text-align:left;
}
.pf-studio-social .pf-social-film-btn.ss-tpl:hover{border-color:#486784; background:#142231;}
.pf-studio-social .pf-social-film-btn.ss-tpl.is-active{border-color:var(--s2-accent); box-shadow:inset 0 0 0 1px rgba(228,135,79,.25);}
.pf-studio-social .ss-tpl > img{width:86px; height:108px; border-radius:8px; object-fit:cover; background:#17222d;}
.pf-studio-social .ss-tpl-copy{display:flex; flex-direction:column; gap:4px; min-width:0;}
.pf-studio-social .ss-tpl-copy strong{overflow:hidden; font-size:.9rem; text-overflow:ellipsis; white-space:nowrap;}
.pf-studio-social .ss-tpl-copy small{color:var(--s2-muted); font-size:.68rem; line-height:1.4;}
.pf-studio-social .ss-tpl-chips{display:flex; gap:3px; flex-wrap:wrap;}
.pf-studio-social .ss-tpl-chips span{
  padding:3px 5px 2px; border:1px solid var(--s2-line); border-radius:5px;
  color:var(--s2-muted); font:700 9.5px/1 var(--pf-font-mono);
  letter-spacing:.04em; text-transform:uppercase;
}
.pf-studio-social .ss-tpl .pf-social-rec-badge{position:absolute; top:7px; right:7px; margin:0; font-size:8px;}
.pf-studio-social .s2-assets-head{margin:3px 0 8px;}
.pf-studio-social .s2-assets-head-copy{min-width:0;}
.pf-studio-social .s2-assets-head-copy span{display:block; overflow:hidden; margin-top:2px; color:var(--s2-muted); font-size:8px; text-overflow:ellipsis; white-space:nowrap;}
.pf-studio-social #s2-asset-filter-status{flex:none; color:var(--s2-muted); font-family:var(--mono); font-size:8px;}
.pf-studio-social .s2-shared-library{
  margin:0 0 12px; padding:10px; border:1px solid #486784; border-radius:9px;
  background:#0b1219;
}
.pf-studio-social .s2-shared-library-head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:8px;
}
.pf-studio-social .s2-shared-library-head-copy{min-width:0;}
.pf-studio-social .s2-shared-library-head h3{
  margin:3px 0 0; color:var(--s2-text); font-size:14px; line-height:1.25;
}
.pf-studio-social .s2-shared-library-platform{
  max-width:45%; overflow:hidden; padding:3px 5px; border:1px solid var(--s2-line);
  border-radius:5px; color:var(--s2-muted); font:700 7px/1 var(--pf-font-mono);
  letter-spacing:.08em; text-overflow:ellipsis; text-transform:uppercase; white-space:nowrap;
}
.pf-studio-social .s2-shared-library-intro,
.pf-studio-social .s2-shared-library-status,
.pf-studio-social .s2-shared-library-empty{
  margin:7px 0 0; color:var(--s2-muted); font-size:8px; line-height:1.45;
}
.pf-studio-social .s2-shared-library-status.is-error{color:#ffb0a7;}
.pf-studio-social .s2-shared-library-grid{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px;
  max-height:min(260px,34dvh); overflow-x:hidden; overflow-y:auto;
  overscroll-behavior:contain; margin-top:9px; padding-right:2px; scrollbar-width:thin;
}
.pf-studio-social .s2-shared-library-choice{
  display:flex; min-width:0; overflow:hidden; flex-direction:column;
  border:1px solid var(--s2-line); border-radius:8px; background:#111c27;
}
.pf-studio-social .s2-shared-library-preview{
  position:relative; width:100%; aspect-ratio:4/3; overflow:hidden; background:#17222d;
}
.pf-studio-social .s2-shared-library-preview img{
  display:block; width:100%; height:100%; object-fit:contain;
}
.pf-studio-social .s2-shared-library-kind{
  position:absolute; top:4px; left:4px; max-width:calc(100% - 8px); overflow:hidden;
  padding:2px 4px; border-radius:4px; background:rgba(6,13,20,.86); color:#c9d7e3;
  font:700 6px/1.2 var(--pf-font-mono); letter-spacing:.06em;
  text-overflow:ellipsis; text-transform:uppercase; white-space:nowrap;
}
.pf-studio-social .s2-shared-library-copy{
  display:flex; min-width:0; flex:1; flex-direction:column; gap:2px; padding:7px;
}
.pf-studio-social .s2-shared-library-copy strong{
  overflow:hidden; color:var(--s2-text); font-size:9px; line-height:1.3;
  text-overflow:ellipsis; white-space:nowrap;
}
.pf-studio-social .s2-shared-library-copy span,
.pf-studio-social .s2-shared-library-copy small{
  color:var(--s2-muted); font-size:7px; line-height:1.35; overflow-wrap:anywhere;
}
.pf-studio-social .s2-shared-library-place{
  min-height:30px; margin:0 6px 6px; padding:5px 6px; border:1px solid #486784;
  border-radius:6px; background:#183047; color:#fff; font-size:8px; font-weight:700;
  cursor:pointer;
}
.pf-studio-social .s2-shared-library-place:hover{background:#21425f;}
.pf-studio-social .s2-shared-library-place[disabled],
.pf-studio-social .s2-shared-library-place[aria-disabled="true"]{
  opacity:.5; cursor:not-allowed;
}
.pf-studio-social .s2-shared-library-place:focus-visible{
  outline:2px solid var(--s2-blue); outline-offset:2px;
}
.pf-studio-social .s2-shared-library-actions{
  display:flex; flex-wrap:wrap; gap:6px; margin-top:8px;
}
.pf-studio-social .s2-asset-filter{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:3px; margin:0 0 9px; padding:3px; border:1px solid var(--s2-line); border-radius:8px; background:#0b1219;}
.pf-studio-social .s2-asset-filter button{min-width:0; min-height:28px; padding:4px 3px; border:0; border-radius:6px; background:transparent; color:var(--s2-muted); font-size:8px; font-weight:700; cursor:pointer;}
.pf-studio-social .s2-asset-filter button:hover{color:var(--s2-text); background:var(--s2-panel-2);}
.pf-studio-social .s2-asset-filter button.is-active,.pf-studio-social .s2-asset-filter button[aria-pressed="true"]{color:#fff; background:#29435b; box-shadow:inset 0 0 0 1px rgba(105,169,230,.24);}
.pf-studio-social .s2-upload-row{
  display:flex; flex-direction:column; gap:5px; margin:0 0 9px; padding:8px;
  border:1px dashed #486784; border-radius:8px; background:#0b1219;
}
.pf-studio-social .s2-upload-row > label{color:var(--s2-text); font-size:10px; font-weight:700;}
.pf-studio-social .s2-upload-input{
  box-sizing:border-box; width:100%; min-height:36px; overflow:hidden; padding:3px;
  border:1px solid var(--s2-line); border-radius:6px; background:#111c27;
  color:var(--s2-muted); font:600 8px/1.3 var(--mono); cursor:pointer;
}
.pf-studio-social .s2-upload-input::file-selector-button{
  min-height:28px; margin-right:7px; padding:4px 8px; border:1px solid #486784;
  border-radius:5px; background:#183047; color:#fff; font:700 9px/1 var(--pf-font);
  cursor:pointer;
}
.pf-studio-social .s2-upload-input:hover::file-selector-button{background:#21425f;}
.pf-studio-social .s2-upload-input:focus-visible{outline:2px solid var(--s2-blue); outline-offset:2px;}
.pf-studio-social .s2-upload-status{margin:0; color:var(--s2-muted); font-size:8px; line-height:1.4;}
.pf-studio-social .s2-upload-status.is-error{color:#ffb0a7;}
.pf-studio-social .s2-upload-undo{
  display:flex; align-items:center; justify-content:space-between; gap:8px; margin:0 0 9px;
  padding:7px 8px; border:1px solid #486784; border-radius:8px; background:#101d29;
  color:var(--s2-text); font-size:9px; line-height:1.35;
}
.pf-studio-social .s2-upload-undo span{min-width:0; overflow-wrap:anywhere;}
.pf-studio-social .s2-upload-restore,.pf-studio-social .s2-upload-remove{
  min-height:30px; padding:5px 8px; border:1px solid #486784; border-radius:6px;
  background:#183047; color:#fff; font-size:8px; font-weight:700; cursor:pointer;
}
.pf-studio-social .s2-upload-restore:hover,.pf-studio-social .s2-upload-remove:hover{background:#21425f;}
.pf-studio-social .s2-upload-restore:focus-visible,.pf-studio-social .s2-upload-remove:focus-visible{outline:2px solid var(--s2-blue); outline-offset:2px;}
.pf-studio-social .s2-assets-browser{max-height:760px; overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin;}
.pf-studio-social .s2-assets-browser.is-upload-drop-target{
  outline:2px dashed var(--s2-blue); outline-offset:-4px; border-radius:8px;
  background:rgba(105,169,230,.08);
}
.pf-studio-social .s2-assets-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px;}
.pf-studio-social .s2-asset-card{display:flex; position:relative; flex-direction:column; min-width:0; margin:0; padding-bottom:25px;}
.pf-studio-social .s2-asset-card img{cursor:grab;}
.pf-studio-social .s2-asset-card img:active{cursor:grabbing;}
.pf-studio-social .s2-asset-form{display:block; min-width:0;}
.pf-studio-social .s2-upload-remove-form{display:block; margin-top:4px;}
.pf-studio-social .s2-upload-remove{width:100%;}
.pf-studio-social .s2-asset{display:block; position:relative; width:100%; min-width:0; aspect-ratio:1; overflow:hidden; padding:0; border:1px solid var(--s2-line); border-radius:8px; background:#0d151d; color:var(--s2-text); text-align:left; cursor:pointer;}
.pf-studio-social .s2-asset:hover{border-color:#486784; transform:translateY(-1px);}
.pf-studio-social .s2-asset:focus-visible{outline:2px solid var(--s2-blue); outline-offset:2px;}
.pf-studio-social .s2-asset.is-active,.pf-studio-social .s2-asset[aria-pressed="true"]{border-color:var(--s2-accent); box-shadow:inset 0 0 0 1px rgba(228,135,79,.32);}
.pf-studio-social .s2-asset img{display:block; width:100%; height:100%; object-fit:cover; background:#17222d;}
.pf-studio-social .s2-asset-cut img{box-sizing:border-box; padding:6px; object-fit:contain; background:linear-gradient(45deg,#16232f 25%,transparent 25%,transparent 75%,#16232f 75%) 0 0/14px 14px,linear-gradient(45deg,#16232f 25%,#0f1a24 25%,#0f1a24 75%,#16232f 75%) 7px 7px/14px 14px;}
.pf-studio-social .s2-asset-art img{box-sizing:border-box; padding:5px; object-fit:contain; background:#17222d;}
.pf-studio-social .s2-asset-label{position:absolute; right:0; bottom:0; left:0; overflow:hidden; padding:14px 5px 4px; color:#dce6ef; background:linear-gradient(0deg,rgba(6,13,20,.94),transparent); font-size:8px; line-height:1.2; text-overflow:ellipsis; white-space:nowrap;}
.pf-studio-social .s2-asset-kind{position:absolute; top:4px; left:4px; max-width:calc(100% - 8px); overflow:hidden; padding:2px 4px; border-radius:4px; background:rgba(6,13,20,.86); color:#c9d7e3; font-family:var(--mono); font-size:6px; line-height:1.2; text-overflow:ellipsis; text-transform:uppercase; white-space:nowrap;}
.pf-studio-social .s2-asset-pin-form{position:absolute; right:0; bottom:0; left:0;}
.pf-studio-social .s2-asset-pin{
  display:flex; align-items:center; justify-content:center; gap:3px; width:100%; min-height:23px;
  padding:3px 5px; border:1px solid var(--s2-line); border-radius:5px; background:#111c27;
  color:var(--s2-text); font-size:8px; font-weight:700; cursor:pointer;
}
.pf-studio-social .s2-asset-pin:hover{border-color:#486784; background:#192a39;}
.pf-studio-social .s2-asset-pin[disabled]{opacity:.48; cursor:not-allowed;}
.pf-studio-social .s2-layer-cap-note{
  margin:0 0 9px; padding:8px 9px; border:1px solid #8b6335; border-radius:7px;
  background:#1b160e; color:#e5c878; font-size:9px; line-height:1.45;
}
.pf-studio-social .s2-layer-cap-note[hidden]{display:none;}
.pf-studio-social .s2-asset-hover-preview{
  position:fixed; z-index:1250; top:110px; right:390px; width:264px; overflow:hidden; border:1px solid #486784;
  border-radius:10px; background:#0d151d; box-shadow:0 18px 46px rgba(0,0,0,.48); pointer-events:none;
}
.pf-studio-social .s2-asset-hover-preview[hidden]{display:none;}
.pf-studio-social .s2-asset-hover-preview img{display:block; width:100%; max-height:300px; object-fit:contain; background:#17222d;}
.pf-studio-social .s2-asset-hover-preview span{display:block; padding:8px 10px; color:var(--s2-text); font-size:10px; font-weight:700;}
.pf-studio-social .s2-assets-empty{margin-top:4px; text-align:center;}

body.s2-publish-open{overflow:hidden;}
.pf-studio-social .s2-frombar{
  display:flex; align-items:center; gap:10px; margin:0 0 10px; padding:9px 11px;
  border:1px solid var(--s2-line); border-radius:8px; background:var(--s2-panel);
  color:var(--s2-muted); font-size:10px; line-height:1.4;
}
.pf-studio-social .s2-frombar span{flex:1 1 auto; min-width:0;}
.pf-studio-social .s2-frombar a{flex:none; color:var(--s2-text); font-weight:700; text-decoration:none;}
.pf-studio-social .s2-frombar a:hover{text-decoration:underline;}
.pf-studio-social .s2-scrim{
  position:fixed; z-index:1190; inset:0; background:rgba(3,8,13,.7); backdrop-filter:blur(2px);
}
.pf-studio-social .s2-publish{
  display:flex; position:fixed; z-index:1200; top:0; right:0; bottom:0; flex-direction:column;
  box-sizing:border-box; width:min(430px,calc(100vw - 18px)); min-width:0; overflow:hidden;
  border-left:1px solid var(--s2-line); background:var(--s2-work-bg); color:var(--s2-text);
  box-shadow:-18px 0 54px rgba(0,0,0,.42);
}
.pf-studio-social .s2-publish[hidden],.pf-studio-social .s2-scrim[hidden]{display:none;}
.pf-studio-social .s2-publish-drawer-head{
  flex:none; margin:0; padding:14px 16px; border-bottom:1px solid var(--s2-line); background:#0d151e;
}
.pf-studio-social .s2-publish-head-actions{display:flex; align-items:center; gap:7px;}
.pf-studio-social .s2-icon-btn{
  display:grid; width:31px; height:31px; padding:0; place-items:center; border:1px solid var(--s2-line);
  border-radius:7px; background:var(--s2-panel); color:var(--s2-text); cursor:pointer;
}
.pf-studio-social .s2-icon-btn:hover{border-color:#45637e; background:var(--s2-panel-2);}
.pf-studio-social .s2-publish-body{
  display:flex; flex:1 1 auto; flex-direction:column; gap:10px; min-height:0; padding:12px;
  overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain;
}
.pf-studio-social .s2-publish .pf-social-compose{display:flex; flex-direction:column; gap:10px; padding:0; border:0; background:transparent;}
.pf-studio-social .s2-publish .s2-block,.pf-studio-social .s2-publish .pf-social-posted{
  display:flex; flex-direction:column; gap:9px; min-width:0; margin:0; padding:12px;
  border:1px solid var(--s2-line); border-radius:9px; background:var(--s2-panel); color:var(--s2-text);
}
.pf-studio-social .s2-publish .s2-block-head{display:flex; align-items:center; justify-content:space-between; gap:10px;}
.pf-studio-social .s2-publish .s2-block h2,.pf-studio-social .s2-publish .s2-block h3{margin:0; color:var(--s2-text); font-size:11px;}
.pf-studio-social .s2-publish .pf-field-label,.pf-studio-social .s2-publish .pf-social-posted-hd{color:var(--s2-text);}
.pf-studio-social .s2-publish .pf-input{border-color:var(--s2-line); background:#0b1219; color:var(--s2-text);}
.pf-studio-social .s2-publish .pf-textarea{min-height:150px; resize:vertical;}
.pf-studio-social .s2-publish .s2-capmeta{display:flex; align-items:center; gap:5px; flex-wrap:wrap; color:var(--s2-muted); font-family:var(--mono); font-size:8px; text-transform:uppercase;}
.pf-studio-social .s2-publish .s2-hashtags{margin:0; overflow-wrap:anywhere; line-height:1.55;}
.pf-studio-social .s2-publish .s2-hashtags strong{display:block; margin-bottom:2px; color:var(--s2-text); font-size:8px; text-transform:uppercase;}
.pf-studio-social .s2-publish .pf-social-post-actions{display:grid; grid-template-columns:1fr 1fr; gap:6px; margin:0;}
.pf-studio-social .s2-publish .pf-social-post-actions .pf-btn{width:100%; min-width:0;}
.pf-studio-social .s2-publish .pf-social-post-actions .pf-btn:first-child{grid-column:1/-1;}
.pf-studio-social .s2-publish .pf-btn.is-disabled{opacity:.5; pointer-events:none;}
.pf-studio-social .s2-publish .s2-save-post{flex-direction:row; align-items:center; justify-content:space-between;}
.pf-studio-social .s2-publish .s2-save-post > div:first-child{min-width:0;}
.pf-studio-social .s2-publish .s2-save-post > .pf-social-post-actions{flex:0 0 170px;}
.pf-studio-social .s2-publish .s2-save-post .pf-btn{flex:none;}
.pf-studio-social .s2-publish .s2-schedule-compose{display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:7px; min-width:0;}
.pf-studio-social .s2-publish .s2-schedule-compose .pf-field{display:flex; min-width:0; flex-direction:column; gap:5px;}
.pf-studio-social .s2-publish input[type="datetime-local"]{box-sizing:border-box; width:100%; min-width:0; color-scheme:dark;}
.pf-studio-social .s2-publish .s2-schedule-board .s2-week-strip{margin-top:2px;}
.pf-studio-social .s2-publish .s2-cadence-hint{padding:8px; border-radius:7px; background:rgba(228,180,79,.08);}
.pf-studio-social .s2-publish .s2-schedule-row{background:#0d151e;}
.pf-studio-social .s2-publish .s2-schedule-actions .pf-link{font-size:9px;}
.pf-studio-social .s2-publish .pf-social-posted-list{gap:0;}
.pf-studio-social .s2-publish .s2-log-row{padding:8px 0;}
.pf-studio-social .s2-ai-pop{width:min(560px,calc(100vw - 18px));}
.pf-studio-social .s2-ai-intro,.pf-studio-social .s2-ai-proposal,.pf-studio-social .s2-ai-error{
  padding:12px; border:1px solid var(--s2-line); border-radius:9px; background:var(--s2-panel);
}
.pf-studio-social .s2-ai-intro p,.pf-studio-social .s2-ai-error p{margin:0; color:var(--s2-muted); font-size:10px; line-height:1.55;}
.pf-studio-social .s2-ai-start,.pf-studio-social .s2-ai-proposal form{display:flex; flex-direction:column; gap:10px; margin:0;}
.pf-studio-social .s2-ai-start .pf-field{display:flex; flex-direction:column; gap:5px;}
.pf-studio-social .s2-ai-pop .pf-textarea{
  box-sizing:border-box; width:100%; min-height:62px; border-color:var(--s2-line);
  background:#0b1219; color:var(--s2-text); resize:vertical;
}
.pf-studio-social .s2-ai-actions{display:flex; align-items:center; gap:7px; flex-wrap:wrap;}
.pf-studio-social .s2-ai-actions .pf-btn{min-width:0;}
.pf-studio-social .s2-ai-result:empty,.pf-studio-social .s2-ai-error-status:empty{display:none;}
.pf-studio-social .s2-ai-error-status{min-width:0;}
.pf-studio-social .s2-ai-proposal{display:flex; min-width:0; flex-direction:column; gap:9px;}
.pf-studio-social .s2-ai-proposal-head,.pf-studio-social .s2-ai-field-head{
  display:flex; min-width:0; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px;
}
.pf-studio-social .s2-ai-proposal-head h3{margin:2px 0 0; color:var(--s2-text); font-size:13px;}
.pf-studio-social .s2-ai-live{padding:3px 6px; border:1px solid var(--s2-line); border-radius:999px; color:var(--s2-muted); font-family:var(--mono); font-size:7px; text-transform:uppercase;}
.pf-studio-social .s2-ai-live.is-ok{border-color:#2d7257; color:#80d7b1;}
.pf-studio-social .s2-ai-live.is-fallback{border-color:#7b6335; color:#e5c878;}
.pf-studio-social .s2-ai-fields,.pf-studio-social .s2-ai-plan{display:flex; flex-direction:column; gap:8px; margin:0; padding:0;}
.pf-studio-social .s2-ai-field,.pf-studio-social .s2-ai-slide{
  display:flex; min-width:0; flex-direction:column; gap:6px; padding:9px; border:1px solid var(--s2-line);
  border-radius:7px; background:#0d151e;
}
.pf-studio-social .s2-ai-field-head label,.pf-studio-social .s2-ai-field-head strong{color:var(--s2-text); font-size:10px;}
.pf-studio-social .s2-ai-field-head strong span{display:inline-grid; width:19px; height:19px; margin-right:4px; place-items:center; border-radius:50%; background:#24384a; font-family:var(--mono); font-size:8px;}
.pf-studio-social .s2-ai-field-head .pf-link{font-size:9px;}
.pf-studio-social .s2-ai-slide{list-style:none;}
.pf-studio-social .s2-ai-slide label{display:flex; flex-direction:column; gap:4px; color:var(--s2-muted); font-size:8px; text-transform:uppercase;}
.pf-studio-social .s2-ai-error{border-color:#8f4545;}
.pf-studio-social .s2-ai-error strong{display:block; margin-bottom:4px; color:#ffb0a7; font-size:10px;}

@media (max-width:959px) and (min-width:900px){
  .pf-studio-social.is-composer .s2-composer-grid{
    grid-template-columns:190px minmax(0,1fr) 280px;
    grid-template-areas:"slot stage rail"; gap:0;
  }
  .pf-studio-social .ss-tpl-list{max-height:520px;}
  .pf-studio-social .s2-stage .pf-social-preview,
  .pf-studio-social .s2-readiness{max-width:600px;}
}
@media (min-width:900px){
  /* The package's desktop Social workspace is a docked instrument, not three
     floating cards. Keep the server-rendered DOM in normal flow while restoring
     its literal edge joins and full-height, independently scrolling rails. */
  .pf-frame:has(.pf-studio-social.is-composer){height:100dvh; min-height:0; overflow:hidden;}
  .pf-frame:has(.pf-studio-social.is-composer) > .pf-console-footer{display:none;}
  .pf-console-main:has(.pf-studio-social.is-composer) > .pf-studio-social.is-composer{
    flex:1 1 0; height:auto; max-height:none; min-height:0;
  }
  .pf-studio-social.is-composer{
    display:flex; width:100%; height:auto; max-height:none; min-height:0;
    flex-direction:column; overflow:hidden; border-radius:0;
  }
  .pf-studio-social.is-composer .s2-view-inner{
    display:flex; width:100%; flex:1 1 auto; min-height:0; flex-direction:column;
    margin:0; padding:0;
  }
  .pf-studio-social.is-composer .s2-view-head{display:none;}
  .pf-studio-social.is-composer #pf-social,
  .pf-studio-social.is-composer #pf-social-composer{
    display:flex; flex:1 1 auto; min-height:0; flex-direction:column;
  }
  .pf-studio-social.is-composer .s2-frombar{
    flex:none; margin:0; border-width:0 0 1px; border-radius:0;
  }
  .pf-studio-social.is-composer .s2-sub{
    box-sizing:border-box; flex:none; height:var(--s2-tb); min-height:var(--s2-tb);
    gap:10px; margin:0; padding:0 14px; border-width:0 0 1px; border-radius:0;
    box-shadow:none;
  }
  .pf-studio-social.is-composer .s2-composer-grid{
    flex:1 1 0; min-height:0; grid-template-rows:minmax(0,1fr);
    gap:0; align-items:stretch; overflow:hidden;
  }
  .pf-studio-social.is-composer .s2-slotbar,
  .pf-studio-social.is-composer .s2-rail-right{
    height:100%; min-height:0; border:0;
    border-radius:0; box-shadow:none;
  }
  .pf-studio-social.is-composer .s2-slotbar{
    overflow-x:hidden; overflow-y:auto; border-right:1px solid var(--s2-line);
  }
  .pf-studio-social.is-composer .s2-rail-right{
    display:flex; flex-direction:column; overflow:hidden;
    border-left:1px solid var(--s2-line);
  }
  .pf-studio-social.is-composer .s2-slotbar > .s2-rail-head{
    position:sticky; top:0; z-index:2; box-sizing:border-box;
    height:40px; min-height:40px; padding:0 12px; background:#101d2a;
  }
  .pf-studio-social.is-composer .s2-slotbar-list{padding:10px;}
  .pf-studio-social.is-composer .s2-railhd{
    display:flex; box-sizing:border-box; height:40px; min-height:40px;
    align-items:center; gap:8px; padding:3px 8px 2px;
    border-bottom:1px solid var(--s2-line); background:#101d2a;
  }
  .pf-studio-social.is-composer .s2-railhd .s2-libseg{
    display:flex; flex:1; padding:2px; border:1px solid var(--s2-line);
    border-radius:9px; background:#0d151e;
  }
  .pf-studio-social.is-composer .s2-railhd .s2-libseg button{
    flex:1; min-height:28px; padding:7px 11px; border:0; border-radius:7px;
  }
  .pf-studio-social.is-composer .s2-railhd .s2-libseg button[aria-selected="true"]{
    background:#29435b; color:var(--s2-text);
  }
  .pf-studio-social.is-composer .s2-rail-right [role="tabpanel"]{
    flex:1 1 auto; min-height:0; overflow-y:auto;
  }
  .pf-studio-social.is-composer .s2-stage:not(.is-stack-reviewing){
    position:relative; top:auto; height:100%; min-height:0; overflow:auto;
  }
  .pf-studio-social.is-composer .s2-stage .s2-frame{
    box-sizing:border-box; min-height:100%; border:0;
    border-radius:0; box-shadow:none;
  }
  .pf-studio-social.is-composer .s2-publish{top:var(--s2-bar);}
}
@media (min-width:900px) and (max-width:1279px){
  .pf-studio-social .s2-bar{gap:8px;}
  .pf-studio-social .s2-mobile-actions-menu{gap:6px;}
}
@media (max-width:1099px){
  .pf-studio-social .s2-mobile-actions-toggle.s2-btn{
    display:inline-flex; min-width:44px;
  }
  .pf-studio-social .s2-mobile-actions-menu{
    display:none; position:absolute; top:calc(100% + 6px); right:0; z-index:40;
    box-sizing:border-box; width:min(240px,calc(100vw - var(--pf-side-collapsed) - 20px));
    padding:8px; flex-direction:column; align-items:stretch; gap:6px;
    border:1px solid var(--s2-line); border-radius:10px; background:var(--s2-panel);
    box-shadow:0 16px 42px rgba(0,0,0,.42);
  }
  .pf-studio-social .s2-baract.is-mobile-actions-open .s2-mobile-actions-menu{display:flex;}
  .pf-studio-social .s2-mobile-actions-menu .s2-btn{
    width:100%; min-height:44px; justify-content:flex-start;
  }
}
@media (max-width:899px){
  .pf-studio-social{
    --s2-mobile-bar-height:67px; --s2-mobile-inspector-height:58px;
    padding-bottom:calc(var(--s2-mobile-bar-height) + var(--s2-mobile-inspector-height) + env(safe-area-inset-bottom));
  }
  .pf-studio-social .s2-bar{
    height:var(--s2-bar); min-height:var(--s2-bar); flex-wrap:nowrap;
    gap:8px; padding:0 10px;
  }
  .pf-studio-social .s2-spacer{display:none;}
  .pf-studio-social .s2-tabs{order:0; width:auto; min-width:0; flex:1;}
  .pf-studio-social .s2-tabs a{min-width:0; flex:1; justify-content:center;}
  .pf-studio-social .s2-composer-grid{display:block;}
  .pf-studio-social .s2-stage .s2-frame{min-height:0;}
  .pf-studio-social .s2-stage{position:static;}
  .pf-studio-social .s2-stage.is-stack-reviewing{max-height:none; overflow:visible;}
  .pf-studio-social .s2-stack-review{max-width:100%; max-height:none;}
  .pf-studio-social .s2-stack-review-body{overflow:visible;}
  .pf-studio-social .s2-bottombar{
    display:flex; position:fixed; right:0; bottom:0; left:0; z-index:1210; gap:8px;
    box-sizing:border-box; min-height:var(--s2-mobile-bar-height);
    padding:8px 10px calc(8px + env(safe-area-inset-bottom));
    border-top:1px solid var(--s2-line); background:rgba(11,17,24,.96);
    box-shadow:0 -10px 30px rgba(0,0,0,.34); backdrop-filter:blur(12px);
  }
  .pf-studio-social .s2-bottombar button{
    display:inline-flex; flex:1 1 0; min-width:0; min-height:46px; align-items:center;
    justify-content:center; gap:6px; padding:7px; border:1px solid var(--s2-line);
    border-radius:9px; background:var(--s2-panel); color:var(--s2-text);
    font-size:11px; font-weight:700; cursor:pointer;
  }
  .pf-studio-social .s2-bottombar button.is-active,
  .pf-studio-social .s2-bottombar button[aria-expanded="true"]{
    border-color:var(--s2-accent); color:#fff; background:#2c211d;
  }
  .pf-studio-social .s2-bottombar button[disabled]{opacity:.5; cursor:not-allowed;}
  .pf-studio-social .s2-slotbar{
    display:block; position:fixed; right:10px;
    bottom:calc(var(--s2-mobile-bar-height) + env(safe-area-inset-bottom) + 8px); left:10px;
    z-index:1120; max-height:calc(72dvh - var(--s2-mobile-bar-height));
    border-radius:11px; box-shadow:0 12px 36px rgba(0,0,0,.38);
  }
  .pf-studio-social .s2-slotbar .s2-rail-head{
    box-sizing:border-box; min-height:58px; padding:5px 8px;
  }
  .pf-studio-social .s2-slotbar:not(.is-mobile-expanded) > :not(.s2-rail-head){display:none;}
  .pf-studio-social .s2-slotbar.is-mobile-expanded{overflow-x:hidden; overflow-y:auto;}
  .pf-studio-social .s2-mobile-slot-toggle{display:grid; width:44px; height:44px;}
  .pf-studio-social .s2-text-scheme{min-height:44px;}
  .pf-studio-social .s2-slotbar.is-mobile-expanded .s2-mobile-slot-toggle svg{transform:rotate(180deg);}
  .pf-studio-social .s2-rail-right{
    display:flex; position:fixed; right:8px;
    bottom:calc(var(--s2-mobile-bar-height) + env(safe-area-inset-bottom)); left:8px;
    z-index:1200; height:min(74dvh,720px); max-height:calc(100dvh - var(--s2-mobile-bar-height) - 12px);
    flex-direction:column; overflow:hidden; border-radius:15px 15px 0 0;
    visibility:hidden; pointer-events:none;
    transform:translateY(calc(100% + var(--s2-mobile-bar-height) + 24px));
    transition:transform .22s ease; box-shadow:0 -18px 52px rgba(0,0,0,.48);
  }
  .pf-studio-social .s2-rail-right.is-mobile-open{
    visibility:visible; pointer-events:auto; transform:translateY(0);
  }
  .pf-studio-social .s2-mobile-sheet-head{
    display:flex; flex:none; align-items:center; justify-content:space-between; padding:8px 10px;
    border-bottom:1px solid var(--s2-line); background:#0d151e;
  }
  .pf-studio-social .s2-mobile-sheet-head .s2-icon-btn{width:44px; height:44px;}
  .pf-studio-social .s2-libseg button,
  .pf-studio-social .s2-search,
  .pf-studio-social .s2-asset-filter button,
  .pf-studio-social .s2-upload-input,
  .pf-studio-social .s2-readiness a{min-height:44px;}
  .pf-studio-social .s2-layer-item-head > .s2-control-form .s2-icon-btn{
    width:44px; height:44px;
  }
  .pf-studio-social .s2-layer-nudges .s2-icon-btn{min-height:44px;}
  .pf-studio-social .s2-asset-card{padding-bottom:46px;}
  .pf-studio-social .s2-asset-pin{min-height:44px;}
  .pf-studio-social .s2-shared-library-place,
  .pf-studio-social .s2-shared-library-actions .s2-btn{min-height:44px;}
  .pf-studio-social .s2-upload-remove,.pf-studio-social .s2-upload-restore{min-width:48px; min-height:48px;}
  .pf-studio-social .s2-stack-head-btn{min-height:44px; padding:8px 11px;}
  .pf-studio-social .s2-stack-review-head .s2-btn,
  .pf-studio-social .s2-stack-review-body > .s2-btn{min-height:44px; white-space:normal;}
  .pf-studio-social .s2-mobile-sheet-head::before{
    content:""; position:absolute; top:5px; left:50%; width:42px; height:4px;
    border-radius:999px; background:rgba(255,255,255,.2); transform:translateX(-50%);
  }
  .pf-studio-social .s2-rail [role="tabpanel"]{min-height:0; padding:10px; overflow-y:auto;}
  .pf-studio-social .ss-tpl-list{max-height:none;}
  .pf-studio-social .s2-assets-browser{max-height:none;}
  .pf-studio-social .s2-assets-grid{grid-template-columns:repeat(auto-fill,minmax(88px,1fr));}
  .pf-studio-social .s2-publish{
    top:auto; right:8px; bottom:calc(var(--s2-mobile-bar-height) + env(safe-area-inset-bottom)); left:8px;
    width:auto; height:min(78dvh,760px); max-height:calc(100dvh - var(--s2-mobile-bar-height) - 12px);
    border:1px solid var(--s2-line); border-radius:15px 15px 0 0;
    box-shadow:0 -18px 52px rgba(0,0,0,.48);
  }
  /* The production shell keeps a 70px collapsed rail at phone widths. Fixed
     Social controls belong to the content frame, not above its visible footer. */
  .pf-app .pf-studio-social .s2-bottombar{left:var(--pf-side-collapsed);}
  .pf-app .pf-studio-social .s2-slotbar{left:calc(var(--pf-side-collapsed) + 10px);}
  .pf-app .pf-studio-social .s2-rail-right,
  .pf-app .pf-studio-social .s2-publish{
    left:calc(var(--pf-side-collapsed) + 8px); width:auto;
  }
  /* Palette ownership is explicit: the Library closes before open, and the
     persistent mobile chrome drops below the palette backdrop while it owns focus. */
  body.pf-palette-open .pf-studio-social .s2-bottombar,
  body.pf-palette-open .pf-studio-social .s2-slotbar,
  body.pf-palette-open .pf-studio-social .s2-rail-right{z-index:90;}
  /* Search remains the one sidebar pointer target above the Library scrim so
     either palette opener can take modal ownership. The rest of the rail still
     lands on the shared scrim and closes the Library. */
  body.s2-library-open .pf-app .pf-side{z-index:1220; pointer-events:none;}
  body.s2-library-open .pf-app .pf-side-search{pointer-events:auto;}
}
@media (max-width:899px) and (prefers-reduced-motion:reduce){
  .pf-studio-social .s2-rail-right,
  .pf-studio-social .s2-mobile-slot-toggle svg,
  .pf-studio-social .s2-asset{transition:none;}
  .pf-studio-social .s2-asset:hover{transform:none;}
}
@media (max-width:520px){
  .pf-studio-social .s2-brand > span:last-child{display:none;}
  .pf-studio-social .s2-tabs a{padding:0 10px;}
  .pf-studio-social .s2-view-inner{padding-inline:10px;}
  .pf-studio-social .s2-sub{margin-inline:-2px; border-radius:8px;}
  .pf-studio-social .s2-sub-spacer{display:none;}
  .pf-studio-social .s2-stage .s2-frame{padding:10px;}
  .pf-studio-social .s2-stack-head{align-items:flex-start; flex-direction:column;}
  .pf-studio-social .s2-stack-head-side{width:100%; align-items:flex-start;}
  .pf-studio-social .s2-stack-head-actions{width:100%; justify-content:flex-start;}
  .pf-studio-social .s2-stack-review-head{align-items:flex-start; padding:10px;}
  .pf-studio-social .s2-stack-review-list{gap:10px; padding:8px;}
  .pf-studio-social .s2-stack-review-card{padding:6px;}
  .pf-studio-social .s2-publish{width:calc(100vw - 10px);}
  .pf-studio-social .s2-publish-drawer-head{align-items:flex-start; padding:12px;}
  .pf-studio-social .s2-publish-body{padding:8px;}
  .pf-studio-social .s2-publish .pf-social-post-actions{grid-template-columns:1fr;}
  .pf-studio-social .s2-publish .pf-social-post-actions .pf-btn:first-child{grid-column:auto;}
  .pf-studio-social .s2-publish .s2-save-post{align-items:stretch; flex-direction:column;}
  .pf-studio-social .s2-publish .s2-save-post > .pf-social-post-actions{flex-basis:auto;}
  .pf-studio-social .s2-publish .s2-save-post .pf-btn{width:100%;}
  .pf-studio-social .s2-publish .s2-schedule-compose{grid-template-columns:1fr;}
  .pf-studio-social .s2-frombar{align-items:flex-start; flex-direction:column;}
  .pf-studio-social .s2-ai-actions{align-items:stretch; flex-direction:column;}
  .pf-studio-social .s2-ai-actions .pf-btn{width:100%;}
}
@media (max-width:360px){
  .pf-studio-social .s2-mobile-actions-toggle span{display:none;}
  .pf-studio-social .s2-tabs a{padding-inline:3px; font-size:10px;}
}

/* ============================================================================
   G8A: console safety, compose clarity, and narrow-screen record cards.
   These rules are page-scoped. Shared root tokens and route behavior stay intact.
   ========================================================================== */
.pf-rd.pf-tools-page,
.pf-rd.pf-compose-page,
.pf-rd.pf-contact-page,
.pf-rd.pf-customers-page,
.pf-rd.pf-mail-page,
.pf-rd.pf-reconcile-page,
.pf-rd.pf-audit-page{min-width:0;}

/* Seed and Reset: make the armed state and backup-first boundary unmistakable. */
.pf-rd.pf-tools-page .pf-armed{
  display:flex; align-items:flex-start; gap:12px; margin-bottom:22px; padding:13px 16px;
  border:1px solid color-mix(in srgb,var(--pf-warning) 40%,transparent);
  border-left:3px solid var(--pf-warning); border-radius:var(--r-md);
  background:var(--pf-tint-warm); color:var(--pf-text); font-size:13px; line-height:1.5;
}
.pf-rd.pf-tools-page .pf-armed > svg{width:18px; height:18px; flex:none; margin-top:1px; color:var(--pf-warning);}
.pf-rd.pf-tools-page .pf-armed strong{font-weight:600;}
.pf-rd.pf-tools-page .pf-armed.is-danger{
  border-color:color-mix(in srgb,var(--pf-alert) 38%,transparent);
  border-left-color:var(--pf-alert); background:var(--pf-tint-alert);
}
.pf-rd.pf-tools-page .pf-armed.is-danger > svg{color:var(--pf-alert);}
.pf-rd.pf-tools-page .pf-rsec,
.pf-rd.pf-contact-page .pf-rsec{min-width:0; margin-bottom:24px;}
.pf-rd.pf-tools-page .pf-rsec-h,
.pf-rd.pf-contact-page .pf-rsec-h{
  display:flex; align-items:baseline; gap:12px; min-width:0; margin-bottom:12px; flex-wrap:wrap;
}
.pf-rd.pf-tools-page .pf-rsec-h h2,
.pf-rd.pf-contact-page .pf-rsec-h h3{margin:0; color:var(--pf-text); font-size:15px; font-weight:600;}
.pf-rd.pf-tools-page .pf-rsec-h .sub,
.pf-rd.pf-contact-page .pf-rsec-h .sub{color:var(--pf-muted); font-size:12px;}
.pf-rd.pf-tools-page .pf-tools-layout{grid-template-columns:minmax(0,1fr) minmax(290px,.6fr);}
.pf-rd.pf-tools-page .pf-cfg-section{
  min-width:0; overflow:hidden; border:1px solid var(--pf-border); border-radius:var(--r-lg);
  background:var(--pf-bg); box-shadow:var(--sh1);
}
.pf-rd.pf-tools-page .pf-cfg-head,
.pf-rd.pf-contact-page .pf-cfg-head{
  display:flex; align-items:center; gap:10px; padding:13px 17px;
  border-bottom:1px solid var(--pf-border); background:var(--pf-surface);
}
.pf-rd.pf-tools-page .pf-cfg-head h2,
.pf-rd.pf-contact-page .pf-cfg-head h2{margin:0; color:var(--pf-text); font-size:14px; font-weight:600;}
.pf-rd.pf-tools-page .pf-cfg-body,
.pf-rd.pf-contact-page .pf-cfg-body{display:flex; min-width:0; flex-direction:column; gap:15px; padding:16px 18px 18px;}
.pf-rd.pf-tools-page .pf-tool-form{align-items:stretch; min-width:0; margin:0;}
.pf-rd.pf-tools-page .pf-tool-choice + .pf-tool-choice{padding-top:15px; border-top:1px solid var(--pf-border);}
.pf-rd.pf-tools-page .pf-tool-copy strong{display:block; color:var(--pf-text); font-size:13px;}
.pf-rd.pf-tools-page .pf-tool-copy p{margin:4px 0 0; color:var(--pf-muted); font-size:12px; line-height:1.5;}
.pf-rd.pf-tools-page .pf-tool-choice > .pf-btn{align-self:flex-start;}
.pf-rd.pf-tools-page .pf-tool-inline{display:flex; align-items:end; gap:9px; flex-wrap:wrap;}
.pf-rd.pf-tools-page .pf-tool-inline label{display:grid; gap:5px; min-width:120px;}
.pf-rd.pf-tools-page .pf-danger-card{
  overflow:hidden; border:1px solid color-mix(in srgb,var(--pf-alert) 34%,transparent);
  border-radius:var(--r-lg); background:var(--pf-bg); box-shadow:var(--sh1);
}
.pf-rd.pf-tools-page .pf-danger-card .dh{
  display:flex; align-items:center; gap:10px; padding:13px 17px;
  border-bottom:1px solid var(--pf-border); background:var(--pf-tint-alert); color:var(--pf-alert);
}
.pf-rd.pf-tools-page .pf-danger-card .dh h2{margin:0; font-size:14px; font-weight:600;}
.pf-rd.pf-tools-page .pf-danger-card .db{padding:16px 18px;}
.pf-rd.pf-tools-page .pf-danger-card .db > p{margin:0 0 14px; color:var(--pf-muted); font-size:12.5px; line-height:1.55;}
.pf-rd.pf-tools-page .pf-typed{display:flex; align-items:center; gap:9px; min-width:0; flex-wrap:wrap;}
.pf-rd.pf-tools-page .pf-typed .pf-input{width:min(100%,200px); font-family:var(--mono); letter-spacing:.06em;}
.pf-rd.pf-tools-page .pf-danger-form label{color:var(--pf-text); font-size:12px; font-weight:600;}
.pf-rd.pf-tools-page .pf-danger-form code{color:var(--pf-alert);}
.pf-rd.pf-tools-page .pf-danger-form .pf-typed-hint{margin:0; color:var(--pf-muted); font-family:var(--mono); font-size:10px; line-height:1.4;}

/* Compose: job identity, delivery truth, and one bounded action surface. */
.pf-rd.pf-compose-page{width:min(960px,100%); margin:0 auto; padding:2px 0 34px;}
.pf-rd.pf-compose-page .pf-job-head{margin-bottom:16px;}
.pf-rd.pf-compose-page .pf-job-cust .name{color:var(--pf-text); font-weight:600;}
.pf-rd.pf-compose-page .pf-compose-context{
  display:flex; align-items:center; gap:9px 12px; min-width:0; margin-bottom:16px; padding:11px 14px;
  border:1px solid var(--pf-border); border-left:3px solid var(--link); border-radius:var(--r-md);
  background:var(--pf-surface); flex-wrap:wrap;
}
.pf-rd.pf-compose-page .pf-compose-context-label{
  color:var(--pf-muted); font-family:var(--mono); font-size:9.5px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase;
}
.pf-rd.pf-compose-page .pf-compose-context .pf-delivery{
  display:inline-flex; align-items:center; gap:7px; min-width:0; margin:0; padding:0 0 0 10px;
  border:0; border-left:1px solid var(--pf-border); border-radius:0; background:transparent;
  color:var(--pf-text); font-size:12.5px;
}
.pf-rd.pf-compose-page .pf-compose-context-note{color:var(--pf-muted); font-size:11.5px;}
.pf-rd.pf-compose-page .pf-compose-form.pf-dcard{display:grid; gap:16px; min-width:0; margin:0; padding:20px 22px;}
.pf-rd.pf-compose-page .pf-compose-fieldgrid{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:14px; min-width:0;}
.pf-rd.pf-compose-page .pf-compose-row{min-width:0; color:var(--pf-text); font-size:12px; font-weight:600;}
.pf-rd.pf-compose-page .pf-compose-row input,
.pf-rd.pf-compose-page .pf-compose-select{box-sizing:border-box; width:100%; min-width:0;}
.pf-rd.pf-compose-page .pf-compose-row .pf-hint{font-weight:400;}
.pf-rd.pf-compose-page .pf-compose-bodyhead{min-width:0;}
.pf-rd.pf-compose-page .pf-compose-tools{min-width:0; flex-wrap:wrap; justify-content:flex-end;}
.pf-rd.pf-compose-page .pf-token-menu{max-width:min(22rem,calc(100vw - 36px));}
.pf-rd.pf-compose-page .pf-compose-textarea{box-sizing:border-box; min-width:0;}
.pf-rd.pf-compose-page .pf-weave-row{min-width:0;}
.pf-rd.pf-compose-page .pf-compose-actions{min-width:0; padding-top:14px; border-top:1px solid var(--pf-border);}

/* Contact: full-width operations stay in the main column; summary remains visible. */
.pf-rd.pf-contact-page{max-width:1440px;}
.pf-rd.pf-contact-page .pf-contact-layout{grid-template-columns:minmax(0,1fr) minmax(250px,300px);}
.pf-rd.pf-contact-page .pf-contact-main{display:grid; gap:20px; min-width:0;}
.pf-rd.pf-contact-page .pf-contact-card{min-width:0; overflow:hidden; padding:0;}
.pf-rd.pf-contact-page .pf-contact-card .pf-fgrid{grid-template-columns:repeat(2,minmax(0,1fr));}
.pf-rd.pf-contact-page .pf-contact-card .pf-field{min-width:0;}
.pf-rd.pf-contact-page .pf-contact-card .pf-input{box-sizing:border-box; min-width:0;}
.pf-rd.pf-contact-page .pf-contact-reach{min-width:0; padding:18px 20px 20px;}
.pf-rd.pf-contact-page .pf-reach-band{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:12px 0 22px;}
.pf-rd.pf-contact-page .pf-reach-band .pf-notrack{align-content:start; min-width:0; margin:0;}
.pf-rd.pf-contact-page .pf-rsec-h .pf-trash-jump{margin-left:auto;}
.pf-rd.pf-contact-page .pf-jtable-wrap{max-width:100%; min-width:0;}
.pf-rd.pf-contact-page .pf-contact-table{min-width:620px;}
.pf-rd.pf-contact-page .pf-contact-table tbody tr{cursor:default;}
.pf-rd.pf-contact-page .pf-contact-table th,
.pf-rd.pf-contact-page .pf-contact-table td{white-space:normal; overflow-wrap:anywhere;}
.pf-rd.pf-contact-page .pf-contact-data-wrap{max-width:100%;}
.pf-rd.pf-contact-page .pf-data-rows{min-width:560px; margin:0;}
.pf-rd.pf-contact-page .pf-manage,
.pf-rd.pf-contact-page .pf-tool-row,
.pf-rd.pf-contact-page .pf-col-actions{min-width:0;}
.pf-rd.pf-contact-page .pf-contact-summary{display:flex; flex-direction:column; gap:14px;}
.pf-rd.pf-contact-page .pf-contact-summary-card{padding:17px 18px;}
.pf-rd.pf-contact-page .pf-contact-totals{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:13px;}
.pf-rd.pf-contact-page .pf-contact-totals > div{min-width:0; padding:10px; border:1px solid var(--pf-border); border-radius:var(--r-sm); background:var(--pf-surface);}
.pf-rd.pf-contact-page .pf-contact-totals span{display:block; color:var(--pf-muted); font-family:var(--mono); font-size:8.5px; letter-spacing:.07em; text-transform:uppercase;}
.pf-rd.pf-contact-page .pf-contact-totals strong{display:block; margin-top:5px; color:var(--pf-text); font-size:23px; font-variant-numeric:tabular-nums;}
.pf-rd.pf-contact-page .pf-contact-total-line{margin:12px 0 8px; color:var(--pf-muted); font-size:12px;}
.pf-rd.pf-contact-page .pf-contact-total-line strong{color:var(--pf-text); font-family:var(--mono); font-size:16px;}

@media (max-width:1180px){
  .pf-rd.pf-tools-page .pf-tools-layout,
  .pf-rd.pf-contact-page .pf-contact-layout{grid-template-columns:minmax(0,1fr);}
  .pf-rd.pf-tools-page .pf-two-aside,
  .pf-rd.pf-contact-page .pf-two-aside{position:static;}
}
@media (max-width:760px){
  .pf-rd.pf-contact-page .pf-reach-band{grid-template-columns:minmax(0,1fr);}
}
@media (max-width:640px){
  .pf-rd.pf-tools-page .pf-phead-actions,
  .pf-rd.pf-tools-page .pf-phead-actions .pf-btn{width:100%;}
  .pf-rd.pf-tools-page .pf-armed{padding:12px;}
  .pf-rd.pf-tools-page .pf-cfg-body,
  .pf-rd.pf-tools-page .pf-danger-card .db{padding:14px;}
  .pf-rd.pf-tools-page .pf-tool-inline{align-items:stretch; flex-direction:column;}
  .pf-rd.pf-tools-page .pf-tool-inline .pf-btn,
  .pf-rd.pf-tools-page .pf-typed .pf-input,
  .pf-rd.pf-tools-page .pf-typed .pf-btn{width:100%; max-width:none;}

  .pf-rd.pf-compose-page{
    overflow-x:clip; padding-bottom:calc(84px + env(safe-area-inset-bottom));
  }
  .pf-rd.pf-compose-page .pf-job-head-actions,
  .pf-rd.pf-compose-page .pf-job-head-actions .pf-btn{width:100%; margin-left:0;}
  .pf-rd.pf-compose-page .pf-compose-context{align-items:flex-start;}
  .pf-rd.pf-compose-page .pf-compose-context .pf-delivery{width:100%; padding:8px 0 0; border-left:0; border-top:1px solid var(--pf-border);}
  .pf-rd.pf-compose-page .pf-compose-form.pf-dcard{max-width:100%; padding:15px 14px 0;}
  .pf-rd.pf-compose-page .pf-compose-fieldgrid{grid-template-columns:minmax(0,1fr);}
  .pf-rd.pf-compose-page .pf-compose-bodyhead{align-items:flex-start; flex-direction:column;}
  .pf-rd.pf-compose-page .pf-compose-tools{width:100%; justify-content:flex-start;}
  .pf-rd.pf-compose-page .pf-token-picker{width:100%; max-width:100%;}
  .pf-rd.pf-compose-page .pf-token-menu{
    top:auto; right:0; bottom:calc(100% + 4px); left:0; width:auto; max-width:none;
    max-height:min(18rem,calc(100dvh - 24px));
  }
  .pf-rd.pf-compose-page .pf-weave-row{align-items:stretch; flex-direction:column;}
  .pf-rd.pf-compose-page .pf-weave-row .pf-btn{width:100%;}
  .pf-rd.pf-compose-page .pf-compose-actions{
    position:sticky; z-index:5; bottom:0; display:grid; grid-template-columns:minmax(0,1fr);
    box-sizing:border-box; gap:8px; max-width:calc(100% + 28px); margin:0 -14px;
    padding:11px 14px calc(11px + env(safe-area-inset-bottom));
    border-top:1px solid var(--pf-border); background:var(--pf-bg); box-shadow:0 -8px 18px rgba(15,32,48,.1);
  }
  .pf-rd.pf-compose-page .pf-compose-actions > .pf-btn{width:100%;}
  .pf-rd.pf-compose-page .pf-compose-actions-right{display:grid; grid-template-columns:1fr 1fr; gap:8px; width:100%;}
  .pf-rd.pf-compose-page .pf-compose-actions-right .pf-btn{width:100%;}

  .pf-rd.pf-mail-page .pf-phead-actions{width:100%; min-width:0; flex-wrap:wrap;}
  .pf-rd.pf-mail-page .pf-mail-import{
    display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; width:100%; min-width:0;
  }
  .pf-rd.pf-mail-page .pf-file-input{box-sizing:border-box; width:100%; min-width:0; max-width:100%;}

  .pf-rd.pf-contact-page .pf-phead-actions{width:100%; flex-wrap:wrap;}
  .pf-rd.pf-contact-page .pf-phead-actions .pf-btn{flex:1 1 calc(50% - 5px);}
  .pf-rd.pf-contact-page .pf-contact-card .pf-fgrid{grid-template-columns:minmax(0,1fr);}
  .pf-rd.pf-contact-page .pf-contact-reach{padding:14px;}
  .pf-rd.pf-contact-page .pf-rsec-h{align-items:flex-start; flex-direction:column; gap:5px;}
  .pf-rd.pf-contact-page .pf-rsec-h .pf-trash-jump{margin-left:0;}
  .pf-rd.pf-contact-page .pf-tool-row{align-items:stretch; flex-direction:column;}
  .pf-rd.pf-contact-page .pf-tool-row label,
  .pf-rd.pf-contact-page .pf-tool-row .pf-input,
  .pf-rd.pf-contact-page .pf-tool-row .pf-btn{width:100%; max-width:none;}
  .pf-rd.pf-contact-page .pf-manage{align-items:stretch; flex-direction:column;}
  .pf-rd.pf-contact-page .pf-col-actions{flex-wrap:wrap;}

  /* Customers, Mail, Reconcile, and Audit become readable cards at 393px. */
  .pf-rd .pf-mobile-cards-wrap{overflow:visible; border:0; border-radius:0; background:transparent; box-shadow:none;}
  .pf-rd .pf-jtable.pf-mobile-cards,
  .pf-rd .pf-jtable.pf-mobile-cards tbody{display:block; width:100%; min-width:0;}
  .pf-rd .pf-jtable.pf-mobile-cards thead{
    position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
  }
  .pf-rd .pf-jtable.pf-mobile-cards tbody{display:grid; gap:10px;}
  .pf-rd .pf-jtable.pf-mobile-cards tbody tr{
    display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 12px; min-width:0;
    padding:12px; border:1px solid var(--pf-border); border-radius:var(--r-md);
    background:var(--pf-bg); box-shadow:var(--sh1); cursor:default;
  }
  .pf-rd .pf-jtable.pf-mobile-cards tbody td{
    display:block; min-width:0; padding:0; border:0; text-align:left;
    white-space:normal; overflow-wrap:anywhere;
  }
  .pf-rd .pf-jtable.pf-mobile-cards tbody td.hide-sm{display:none;}
  .pf-rd .pf-jtable.pf-mobile-cards tbody td[data-label]::before{
    content:attr(data-label); display:block; margin-bottom:4px; color:var(--pf-muted);
    font-family:var(--mono); font-size:8.5px; font-weight:600; letter-spacing:.07em; text-transform:uppercase;
  }
  .pf-rd .pf-jtable.pf-mobile-cards tbody td.pf-mobile-card-main,
  .pf-rd .pf-jtable.pf-mobile-cards tbody td.pf-mobile-card-actions,
  .pf-rd .pf-jtable.pf-mobile-cards tbody td.pf-mobile-card-empty{grid-column:1 / -1;}
  .pf-rd .pf-jtable.pf-mobile-cards tbody td.pf-mobile-card-actions{display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding-top:2px;}
  .pf-rd .pf-jtable.pf-mobile-cards tbody td.pf-mobile-card-empty{padding:14px; text-align:center;}
  .pf-rd .pf-jtable.pf-mobile-cards tbody td.pf-mobile-card-empty::before{content:none;}
  .pf-rd .pf-jtable.pf-mobile-cards .pf-contact-action{max-width:100%; min-width:0;}
  .pf-rd .pf-jtable.pf-mobile-cards .pf-contact-action span{min-width:0; overflow-wrap:anywhere;}
  .pf-rd.pf-mail-page .pf-mail-table td[data-label="Subject"]{font-weight:600;}
  .pf-rd.pf-reconcile-page .pf-recon-form{align-items:stretch; flex-direction:column; width:100%;}
  .pf-rd.pf-reconcile-page .pf-recon-form .pf-select,
  .pf-rd.pf-reconcile-page .pf-recon-form .pf-btn{width:100%; min-width:0;}
}

/* Social Shared Library manager. The composer rail remains visually separate:
   this surface owns custody and permission truth, not card placement. */
.pf-social-library{
  --s2-panel:var(--s2-surface); --s2-panel-2:var(--s2-surface-2);
  --s2-text:var(--pf-text); --s2-muted:var(--pf-muted);
  --s2-terra:var(--pf-terracotta);
}
.pf-social-library .s2-view-inner{display:flex; flex-direction:column; gap:18px;}
.pf-social-library-head{align-items:flex-end;}
.pf-social-library-counts{display:flex; gap:8px; flex-wrap:wrap;}
.pf-social-library-counts span{
  display:flex; align-items:baseline; gap:5px; padding:8px 11px;
  border:1px solid var(--s2-line); border-radius:8px;
  background:var(--s2-panel); color:var(--s2-muted); font-size:10px;
}
.pf-social-library-counts strong{color:var(--s2-text); font-size:15px;}
.pf-studio-rd .pf-social-library-import-grid{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px;
}
.pf-social-library-import-card,
.pf-social-library-asset{
  border:1px solid var(--s2-line); border-radius:10px; background:var(--s2-panel);
}
.pf-social-library-import-card > summary,
.pf-social-library-new-receipt > summary{
  display:flex; align-items:center; gap:7px; padding:12px; cursor:pointer;
  color:var(--s2-text); font-size:12px; font-weight:700; list-style:none;
}
.pf-social-library-import-card > summary::-webkit-details-marker,
.pf-social-library-new-receipt > summary::-webkit-details-marker{display:none;}
.pf-social-library-import-card > summary::after,
.pf-social-library-new-receipt > summary::after{
  content:"+"; margin-left:auto; color:var(--s2-muted); font-family:var(--mono);
}
.pf-social-library-import-card[open] > summary::after,
.pf-social-library-new-receipt[open] > summary::after{content:"-";}
.pf-social-library-import-card > form,
.pf-social-library-new-receipt > form{
  display:flex; flex-direction:column; gap:10px; padding:0 12px 12px;
}
.pf-social-library .pf-field{display:flex; flex-direction:column; gap:5px; min-width:0;}
.pf-social-library .pf-field-label,
.pf-social-library-checks legend{
  color:var(--s2-muted); font-family:var(--mono); font-size:8px;
  letter-spacing:.08em; text-transform:uppercase;
}
.pf-social-library .pf-field-hint{color:var(--s2-muted); font-size:9px; line-height:1.45;}
.pf-social-library .pf-textarea{min-height:76px; resize:vertical;}
.pf-social-library-permission-grid{display:grid; grid-template-columns:1fr 1fr; gap:8px;}
.pf-social-library-checks{
  display:flex; gap:7px 12px; flex-wrap:wrap; margin:0; padding:9px;
  border:1px solid var(--s2-line); border-radius:7px;
}
.pf-social-library-checks legend{padding:0 4px;}
.pf-social-library-checks label,
.pf-social-library-confirm{
  display:flex; align-items:flex-start; gap:6px; color:var(--s2-text);
  font-size:9px; line-height:1.4;
}
.pf-social-library-checks input,
.pf-social-library-confirm input{flex:0 0 auto; margin-top:1px; accent-color:var(--s2-terra);}
.pf-social-library-confirm{
  padding:9px; border:1px solid rgba(228,180,79,.32); border-radius:7px;
  background:rgba(228,180,79,.06);
}
.pf-social-library-source-preview,
.pf-social-library-preview{
  background-color:#d5d8dc;
  background-image:
    linear-gradient(45deg,#b8bdc3 25%,transparent 25%),
    linear-gradient(-45deg,#b8bdc3 25%,transparent 25%),
    linear-gradient(45deg,transparent 75%,#b8bdc3 75%),
    linear-gradient(-45deg,transparent 75%,#b8bdc3 75%);
  background-position:0 0,0 8px,8px -8px,-8px 0;
  background-size:16px 16px;
}
.pf-social-library-source-preview{
  display:flex; align-items:center; justify-content:center; min-height:150px;
  overflow:hidden; border:1px solid var(--s2-line); border-radius:8px;
}
.pf-social-library-source-preview.is-empty{padding:16px; background:#08111a;}
.pf-social-library-source-preview img{
  display:block; width:100%; height:180px; object-fit:contain;
}
.pf-social-library-source-preview span{
  color:var(--s2-muted); font-size:9px; line-height:1.45; text-align:center;
}
.pf-social-library-source-pager,
.pf-social-library-asset-pager,
.pf-social-library-history-pager{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  color:var(--s2-muted); font-family:var(--mono); font-size:8px;
}
.pf-social-library-source-pager a{color:var(--s2-text);}
.pf-social-library-history-pager a{color:var(--s2-text);}
.pf-social-library-asset-pager{justify-content:center; margin-top:12px;}
.pf-studio-rd .pf-social-library-assets{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px;}
.pf-social-library-asset{display:grid; grid-template-columns:154px minmax(0,1fr); overflow:hidden;}
.pf-social-library-asset.is-removed{opacity:.82;}
.pf-social-library-preview{position:relative; min-height:210px;}
.pf-social-library-preview img{width:100%; height:100%; min-height:210px; object-fit:contain;}
.pf-social-library-preview .s2-vpill{position:absolute; top:9px; left:9px;}
.pf-social-library-asset-body{display:flex; flex-direction:column; gap:10px; min-width:0; padding:12px;}
.pf-social-library-title-row{display:flex; align-items:flex-start; justify-content:space-between; gap:10px;}
.pf-social-library-title-row h3{margin:0; color:var(--s2-text); font-size:14px; overflow-wrap:anywhere;}
.pf-social-library-title-row p{margin:3px 0 0; color:var(--s2-muted); font-size:9px;}
.pf-social-library-usage{display:flex; align-items:flex-end; flex-direction:column; gap:3px; color:var(--s2-muted); font-family:var(--mono); font-size:8px; white-space:nowrap;}
.pf-social-library-usage .is-blocked{color:#ffb0a7;}
.pf-social-library-integrity{
  margin:0; padding:8px; border:1px solid #8f4545; border-radius:7px;
  background:rgba(143,69,69,.12); color:#ffb0a7; font-size:9px;
}
.pf-social-library-integrity.is-checking{
  border-color:var(--s2-line); background:rgba(255,255,255,.025); color:var(--s2-muted);
}
.pf-social-library-integrity.is-valid{
  border-color:rgba(95,185,134,.45); background:rgba(95,185,134,.08); color:#a9e7c2;
}
.pf-social-library-label-form{display:flex; gap:7px;}
.pf-social-library-label-form .pf-input{min-width:0; flex:1;}
.pf-social-library-provenance,
.pf-social-library-receipts{display:flex; flex-direction:column; gap:6px;}
.pf-social-library-provenance h4,
.pf-social-library-receipts h4{
  margin:0; color:var(--s2-muted); font-family:var(--mono); font-size:8px;
  letter-spacing:.08em; text-transform:uppercase;
}
.pf-social-library-provenance > span,
.pf-social-library-empty{margin:0; color:var(--s2-muted); font-size:9px;}
.pf-social-library-receipt{
  padding:9px; border:1px solid var(--s2-line); border-radius:8px; background:#0d151e;
}
.pf-social-library-receipt.is-revoked,
.pf-social-library-receipt.is-expired{border-color:#5a4f45;}
.pf-social-library-receipt-head{display:flex; align-items:center; justify-content:space-between; gap:8px;}
.pf-social-library-receipt-head strong{color:var(--s2-text); font-size:10px;}
.pf-social-library-receipt > p{margin:7px 0; color:var(--s2-text); font-size:9px; line-height:1.45; overflow-wrap:anywhere;}
.pf-social-library-receipt dl{display:flex; flex-direction:column; gap:4px; margin:0 0 8px;}
.pf-social-library-receipt dl > div{display:grid; grid-template-columns:76px minmax(0,1fr); gap:8px;}
.pf-social-library-receipt dt{color:var(--s2-muted); font-family:var(--mono); font-size:8px;}
.pf-social-library-receipt dd{margin:0; color:var(--s2-text); font-size:8px; overflow-wrap:anywhere;}
.pf-social-library-receipt .pf-social-library-revoked-at{
  margin:7px 0 0; color:#ffb0a7; font-family:var(--mono); font-size:8px;
}
.pf-social-library-new-receipt{border:1px dashed var(--s2-line); border-radius:8px;}
.pf-social-library-lifecycle{display:flex; justify-content:flex-end; margin-top:auto; padding-top:2px;}
.pf-social-library-lifecycle form{margin:0;}

@media (max-width:1180px){
  .pf-studio-rd .pf-social-library-import-grid{grid-template-columns:1fr;}
  .pf-studio-rd .pf-social-library-assets{grid-template-columns:1fr;}
}
@media (max-width:680px){
  .pf-social-library-head{align-items:flex-start;}
  .pf-social-library-counts{width:100%;}
  .pf-social-library-counts span{flex:1;}
  .pf-social-library-permission-grid{grid-template-columns:1fr;}
  .pf-social-library-asset{grid-template-columns:1fr;}
  .pf-social-library-preview,
  .pf-social-library-preview img{min-height:180px; max-height:280px;}
  .pf-social-library-title-row{flex-direction:column;}
  .pf-social-library-usage{align-items:flex-start; flex-direction:row;}
  .pf-social-library-label-form{align-items:stretch; flex-direction:column;}
  .pf-social-library-receipt dl > div{grid-template-columns:1fr; gap:2px;}
  .pf-social-library-source-pager{align-items:flex-start; flex-wrap:wrap;}
}