/* ─────────────────────────────────────────────────────────────────
   PlaybookUI · Luxury redesign (2026-04-24)

   Design language: Hermès / LV商务奢侈
     · Pure white surface, deep-black ink, brand-blue accent only
     · No gradients, no shadows, no rounded pills, no colored badges
     · Hairline borders rgba(0,0,0,0.06)
     · Generous whitespace (24-28px padding, 16-22px gaps)
     · Typography reversal: large light-weight numbers, small uppercase labels
     · Status colors limited to deep conservative shades
     · Pts / time / category as plain text, not pills

   Class prefix: .pbu-*
   Variable cascade: var(--tm-*, fallback) — themed inside ops-client.html;
                     fallback values applied on public pages.
   ───────────────────────────────────────────────────────────────── */

/* 2026-04-25: local --pbu-* tokens aligned to official design-tokens.css
   (src/api/static/design-tokens.css). Fallback values match the tm-*
   spec so public pages (no tm-* definitions) still render correctly. */
:root,
.pbu-root {
  --pbu-ink:        var(--tm-ink, #0a0e1a);      /* cold near-black */
  --pbu-ink-2:      var(--tm-ink-2, #3f4358);
  --pbu-ink-3:      var(--tm-ink-3, #8b8fa5);
  --pbu-ink-4:      var(--tm-ink-4, #b7bac7);
  --pbu-line:       var(--tm-line, #ececee);     /* hairline */
  --pbu-line-soft:  rgba(10,14,26,0.03);
  --pbu-hover:      rgba(10,14,26,0.02);
  --pbu-brand:      var(--tm-brand, #1d2650);    /* deep navy */
  --pbu-accent:     var(--tm-accent, #2563eb);   /* royal blue — site accent */
  --pbu-accent-ink: var(--tm-accent-ink, #1e40af);
  --pbu-quick:      var(--tm-ok-ink, #0a6347);   /* deploy/success green */
  --pbu-input:      var(--tm-warn-ink, #7a400b);
  --pbu-critical:   var(--tm-fail-ink, #8e1616);
  --pbu-track:      var(--tm-bg-3, #eef0f4);
}

.pbu-root {
  font: 14px/1.6 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  color: var(--pbu-ink);
  background: transparent;
  -webkit-font-smoothing: antialiased;
}

.pbu-empty { padding:48px 28px; color:var(--pbu-ink-3); text-align:center; font-size:14px; letter-spacing:0.005em }
.pbu-empty a { color:var(--pbu-brand); font-weight:500; text-decoration:none; border-bottom:1px solid currentColor }

/* ── Sample banner (public-only, when isSample=true) ───────────────── */
.pbu-sample { padding:28px 28px 24px; border-bottom:1px solid var(--pbu-line) }
.pbu-sample-tag { display:inline-block; font-size:10.5px; font-weight:600; padding:0; letter-spacing:0.16em; text-transform:uppercase; color:var(--pbu-ink-3); margin-bottom:12px }
.pbu-sample h3 { font-size:17px; font-weight:500; color:var(--pbu-ink); margin-bottom:6px; letter-spacing:-0.005em }
.pbu-sample p { font-size:13px; color:var(--pbu-ink-3); margin-bottom:16px; line-height:1.55 }
.pbu-sample .pbu-cta { display:inline-block; font-size:13px; font-weight:500; color:var(--pbu-brand); text-decoration:none; padding:0; border:none; background:none; border-bottom:1px solid currentColor }
.pbu-sample .pbu-cta:hover { color:var(--pbu-ink) }

/* ── Public-mode hero (big score boxes — public pages only) ──────── */
.pbu-header { padding:36px 28px 28px; border-bottom:1px solid var(--pbu-line) }
.pbu-header-label { font-size:11px; font-weight:600; color:var(--pbu-ink-3); text-transform:uppercase; letter-spacing:0.16em; margin-bottom:18px }
.pbu-header h1 { font-size:24px; font-weight:500; letter-spacing:-0.015em; margin-bottom:6px; color:var(--pbu-ink) }
.pbu-header-meta { font-size:12.5px; color:var(--pbu-ink-3); margin-bottom:22px; letter-spacing:0.005em }
.pbu-score-row { display:flex; gap:48px; align-items:baseline; margin-bottom:6px }
.pbu-score-box { flex:1 }
.pbu-score-big { font-size:54px; font-weight:300; letter-spacing:-0.04em; color:var(--pbu-ink); line-height:1; font-feature-settings:"tnum" 1 }
.pbu-score-lbl { font-size:10.5px; color:var(--pbu-ink-3); margin-top:10px; text-transform:uppercase; letter-spacing:0.16em; font-weight:500 }
.pbu-score-arrow { font-size:32px; color:var(--pbu-ink-4); align-self:center; font-weight:300 }
.pbu-header-actions { margin-top:22px; display:flex; gap:14px }

/* ── Embedded-mode brand-category banner (geo partitioned) ──────── */
.pbu-banner { padding:14px 28px; font-size:12.5px; color:var(--pbu-ink-2); border-top:1px solid var(--pbu-line); border-bottom:1px solid var(--pbu-line); background:var(--pbu-line-soft); letter-spacing:0.005em }
.pbu-banner-icon { display:none }
.pbu-banner b { color:var(--pbu-ink); font-weight:600 }

/* ── Embedded-mode hero (luxury — no gradient bg, big light numbers) */
.pbu-journey {
  padding:36px 28px 28px;
  background:transparent;
  border-bottom:1px solid var(--pbu-line);
}
.pbu-journey-label {
  font-size:11px; font-weight:600;
  text-transform:uppercase; letter-spacing:0.16em;
  color:var(--pbu-ink-3); margin-bottom:18px;
}
.pbu-journey-top {
  display:flex; align-items:baseline; gap:24px;
  margin-bottom:6px;
}
.pbu-journey-score {
  font-size:64px; font-weight:300; line-height:1;
  letter-spacing:-0.045em; color:var(--pbu-ink);
  font-feature-settings:"tnum" 1;
}
.pbu-journey-score sub {
  font-size:18px; color:var(--pbu-ink-4); font-weight:300;
  margin-left:4px; vertical-align:baseline; letter-spacing:normal;
}
.pbu-journey-arrow {
  font-size:24px; color:var(--pbu-ink-4); font-weight:300;
}
.pbu-journey-target {
  font-size:32px; font-weight:300; line-height:1;
  letter-spacing:-0.025em; color:var(--pbu-ink-3);
  font-feature-settings:"tnum" 1;
}
.pbu-journey-grades {
  display:flex; gap:24px;
  font-size:10.5px; font-weight:500;
  text-transform:uppercase; letter-spacing:0.18em;
  color:var(--pbu-ink-3);
  margin-bottom:24px;
}
.pbu-journey-grades span:nth-child(2) { color:var(--pbu-quick) }  /* target = positive deep green */
.pbu-progress {
  position:relative; height:1px;          /* true hairline, was 2px */
  background:var(--pbu-track); margin-bottom:24px;
  overflow:hidden;
}
.pbu-progress-fill {
  height:100%; background:var(--pbu-ink);  /* deep black, max contrast vs track */
  transition:width 0.4s ease;
}
.pbu-journey-meta {
  display:flex; flex-wrap:wrap;
  font-size:12px; color:var(--pbu-ink-3);
  letter-spacing:0.005em;
}
.pbu-journey-meta > div {
  display:inline-flex; align-items:baseline; gap:8px;  /* gap separates b from text */
  padding-right:24px;
}
.pbu-journey-meta > div + div {
  border-left:1px solid var(--pbu-line);
  padding-left:24px;
}
.pbu-journey-meta b {
  color:var(--pbu-ink); font-weight:500;
  font-feature-settings:"tnum" 1;
}

/* ── Section — luxury divider, top hairline only ──────────────────── */
.pbu-section { background:transparent !important }
.pbu-section + .pbu-section .pbu-section-head { border-top:1px solid var(--pbu-line) }
.pbu-section-head {
  display:flex; align-items:baseline;
  padding:28px 28px 24px;                    /* was 36px+28px — tighter */
  font-size:11px; font-weight:600;
  letter-spacing:0.20em; text-transform:uppercase;
  color:var(--pbu-ink-2);
}
.pbu-section-head.pbu-collapsible { cursor:pointer; user-select:none; transition:color 0.1s }
.pbu-section-head.pbu-collapsible:hover { color:var(--pbu-ink) }
.pbu-section-title { flex:1 }
.pbu-section-meta {
  font-size:10.5px; font-weight:400;          /* was 11px 500 — quieter */
  letter-spacing:0.04em; text-transform:none;
  color:var(--pbu-ink-4);
  font-feature-settings:"tnum" 1;
}
.pbu-section-icon { display:none }
.pbu-caret {
  display:inline-block; transition:transform 0.15s;
  color:var(--pbu-ink-4); font-size:9px;
  margin-right:8px; vertical-align:1px;
}
.pbu-section-head.pbu-open .pbu-caret { transform:rotate(90deg) }
.pbu-section-body { display:none }
.pbu-section-body.pbu-open { display:block }
.pbu-section > .pbu-section-body:not(.pbu-collapse) { display:block }

/* ── Item — pure paragraph, no chrome, separated by whitespace ──── */
/* Defensive !important: kill any inherited .card-style bg/radius/shadow
   that might leak in from ops-client.html or browser cache. luxury
   means there is NO box around items — they're typographic paragraphs. */
.pbu-card {
  padding:0 28px 32px !important;
  background:transparent !important;
  border:none !important;
  border-radius:0 !important;
  box-shadow:none !important;
  position:relative;
  transition:opacity 0.12s;
}
.pbu-card:last-child { padding-bottom:36px !important }
.pbu-card:hover .pbu-card-actions { opacity:1 }

.pbu-card-row1 {
  display:flex; align-items:baseline; gap:24px;
}
.pbu-title {
  flex:1; min-width:0;
  font-size:15px; font-weight:500;
  color:var(--pbu-ink); letter-spacing:-0.005em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.pbu-pts {
  font-size:13.5px; font-weight:500; color:var(--pbu-ink);
  white-space:nowrap; flex-shrink:0;
  font-feature-settings:"tnum" 1; letter-spacing:0.005em;
}
.pbu-pts::before { content:"+" }
.pbu-time {
  font-size:12px; font-weight:400; color:var(--pbu-ink-4);
  white-space:nowrap; flex-shrink:0;
  min-width:64px; text-align:right;
}

.pbu-desc {
  font-size:13px; color:var(--pbu-ink-3);
  margin-top:10px; line-height:1.6;        /* was 6px — more breathing */
  letter-spacing:0.005em;
}

.pbu-manual-hint {
  margin-top:10px; padding-left:14px;
  border-left:1px solid var(--pbu-ink-4);
  font-size:12.5px; font-style:italic;
  color:var(--pbu-ink-3); line-height:1.55;
  letter-spacing:0.005em;
}

/* Action: inline at end of row1, reserves space, opacity-toggled on hover.
   Was absolute-positioned which caused it to overlap title/pts/time. */
.pbu-card-actions {
  flex-shrink:0;
  min-width:96px;     /* reserve "Deploy →" / "Open Generate →" width */
  text-align:right;
  opacity:0;
  transition:opacity 0.15s;
}
.pbu-card:hover .pbu-card-actions { opacity:1 }

/* ── Public flat layout (accordion — for /web-readiness public) ── */
.pbu-action-card {
  padding:0 28px 28px !important;
  background:transparent !important;
  border:none !important;
  border-radius:0 !important;
  box-shadow:none !important;
  cursor:pointer;
}
.pbu-action-card:last-child { padding-bottom:36px !important }
.pbu-action-head {
  display:flex; align-items:baseline; gap:18px;
}
.pbu-status-icon { display:none }
.pbu-action-title {
  flex:1; font-size:15px; font-weight:500;
  color:var(--pbu-ink); letter-spacing:-0.005em;
}
.pbu-action-impact {
  font-size:13px; font-weight:500;
  color:var(--pbu-ink); white-space:nowrap;
  font-feature-settings:"tnum" 1;
}
.pbu-action-impact::before { content:"+" }
.pbu-action-chevron {
  color:var(--pbu-ink-4); font-size:9px;
  transition:transform 0.15s;
  margin-left:4px;
}
.pbu-action-card.pbu-open .pbu-action-chevron { transform:rotate(90deg) }
.pbu-action-body {
  display:none; padding-top:14px;
  font-size:13px; color:var(--pbu-ink-3); line-height:1.6;
  letter-spacing:0.005em;
}
.pbu-action-card.pbu-open .pbu-action-body { display:block }
.pbu-action-body .pbu-label {
  font-size:10.5px; font-weight:600;
  color:var(--pbu-ink-3);
  text-transform:uppercase; letter-spacing:0.14em;
  margin:14px 0 5px;
}
.pbu-action-body .pbu-label:first-child { margin-top:0 }
.pbu-time-chip {
  display:inline-block;
  font-size:11.5px; color:var(--pbu-ink-3); margin-bottom:10px;
  letter-spacing:0.005em;
}
.pbu-platform-note {
  font-size:12.5px; color:var(--pbu-ink-2);
  margin-top:10px; padding-left:14px;
  border-left:1px solid var(--pbu-brand);
  font-style:italic; letter-spacing:0.005em;
}
.pbu-not-feasible {
  font-size:12.5px; color:var(--pbu-critical);
  margin-top:10px; padding-left:14px;
  border-left:1px solid var(--pbu-critical);
  font-style:italic; letter-spacing:0.005em;
}

/* ── Brand: week-grouped layout (THE GEO Playbook) ────────────────── */
.pbu-week { background:transparent }
.pbu-week-head {
  display:flex; align-items:baseline; gap:18px;
  padding:22px 28px 12px;
  cursor:pointer; transition:color 0.1s;
  border-top:1px solid var(--pbu-line);
}
.pbu-week:first-of-type .pbu-week-head { border-top:none }
.pbu-week-head:hover { color:var(--pbu-ink) }
.pbu-week-num {
  font-size:11px; font-weight:600;
  letter-spacing:0.16em; text-transform:uppercase;
  color:var(--pbu-ink-3);
  white-space:nowrap;
}
.pbu-week-num.pbu-gap { color:var(--pbu-critical) }
.pbu-week-title {
  flex:1; font-size:11px; font-weight:600;
  letter-spacing:0.14em; text-transform:uppercase;
  color:var(--pbu-ink-3);
}
.pbu-week-count {
  font-size:11px; font-weight:500; letter-spacing:0.04em;
  color:var(--pbu-ink-4);
  font-feature-settings:"tnum" 1;
}
.pbu-week-chevron {
  color:var(--pbu-ink-4); font-size:9px;
  transition:transform 0.15s; margin-left:4px;
}
.pbu-week.pbu-open .pbu-week-chevron { transform:rotate(90deg) }
.pbu-week-body { display:none }
.pbu-week.pbu-open .pbu-week-body { display:block }

.pbu-task {
  padding:0 28px 28px !important;
  background:transparent !important;
  border:none !important;
  border-radius:0 !important;
  box-shadow:none !important;
}
.pbu-task-row1 {
  display:flex; align-items:baseline; gap:18px;
  margin-bottom:5px;
}
.pbu-cat-pill {
  font-size:10.5px; font-weight:500;
  letter-spacing:0.14em; text-transform:uppercase;
  color:var(--pbu-ink-3);
  white-space:nowrap; padding:0; background:none;
  border:none; border-radius:0;
}
.pbu-task-title {
  flex:1; min-width:0;
  font-size:14.5px; font-weight:500;
  color:var(--pbu-ink); letter-spacing:-0.005em;
}
.pbu-task-desc {
  font-size:13px; color:var(--pbu-ink-3);
  line-height:1.5; margin-bottom:6px;
  letter-spacing:0.005em;
}
.pbu-task-badges {
  display:flex; gap:18px; align-items:baseline;
  font-size:11.5px; color:var(--pbu-ink-4);
  letter-spacing:0.005em;
}
.pbu-badge {
  font-size:11.5px; font-weight:400;
  padding:0; background:none; border:none; border-radius:0;
  color:var(--pbu-ink-4);
}
.pbu-badge-impact {
  color:var(--pbu-ink); font-weight:500;
  font-feature-settings:"tnum" 1;
}
.pbu-badge-easy   { color:var(--pbu-quick) }
.pbu-badge-medium { color:var(--pbu-input) }
.pbu-badge-hard   { color:var(--pbu-critical) }
.pbu-badge-who    { color:var(--pbu-ink-4) }

/* All category pill colors removed — luxury uses uniform gray text. */
.pbu-cat-schema, .pbu-cat-technical, .pbu-cat-content, .pbu-cat-backlinks,
.pbu-cat-reddit, .pbu-cat-citation, .pbu-cat-pr, .pbu-cat-measurement,
.pbu-cat-gap, .pbu-cat-gbp, .pbu-cat-community, .pbu-cat-default {
  color:var(--pbu-ink-3); background:none;
}
.pbu-cat-gap { color:var(--pbu-critical) }

/* ── Card focus highlight (used by ops _nbaScrollToCard) ── */
@keyframes pbu-card-focus {
  0%   { background:#fff8e1 }
  100% { background:transparent }
}
.pbu-card.pbu-card-focus { animation:pbu-card-focus 1.6s ease-out }