/* PiXELBURGH Citizen Dashboard D2 — shared, scoped presentation primitives.
 * Dashboard ONLY. No body, Astra, artist-site, profile, or application selectors.
 * Structure and privacy come from the existing PB-Core Surface registry.
 */
.pb-surface--dashboard {
  --pb-d2-bg: rgba(9, 19, 35, .82);
  --pb-d2-raised: rgba(18, 34, 54, .86);
  --pb-d2-inset: rgba(9, 22, 39, .67);
  --pb-d2-stroke: rgba(137, 197, 222, .25);
  --pb-d2-stroke-focus: rgba(120, 225, 249, .73);
  --pb-d2-text: #ecf5fa;
  --pb-d2-muted: #abc2d0;
  --pb-d2-accent: #91e7f4;
  --pb-d2-radius: 18px;
  --pb-d2-shadow: 0 18px 46px rgba(0, 0, 0, .32);
  width: 100%;
  max-width: 1480px;
  margin-inline: auto;
  color: var(--pb-d2-text);
  gap: 16px;
  padding: clamp(10px, 2vw, 28px);
  align-items: stretch;
  min-width: 0;
}
.pb-surface--dashboard, .pb-surface--dashboard * { box-sizing: border-box; }
.pb-surface--dashboard > :is(.pb-dash-d1, .pb-dash-d2__hero, .pb-wrap) { width:100%; min-width:0; }

/* Presentation shell replaces the redundant dashboard identity ribbon only. */
.pb-surface--dashboard .pb-dash-d2__hero {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(14px, 2.2vw, 28px);
  padding: clamp(20px, 3.1vw, 42px);
  border: 1px solid var(--pb-d2-stroke);
  border-radius: 24px;
  background: linear-gradient(112deg, rgba(17, 46, 69, .88), rgba(12, 22, 42, .89) 64%), var(--pb-d2-bg);
  box-shadow: var(--pb-d2-shadow);
  overflow: hidden;
  isolation: isolate;
}
.pb-surface--dashboard .pb-dash-d2__hero::after {
  content:""; position:absolute; pointer-events:none; z-index:-1;
  right: -10%; top: -160%; height: 360%; aspect-ratio: 1;
  background: radial-gradient(circle, rgba(112, 197, 245, .17), rgba(109, 102, 194, .06) 39%, transparent 65%);
}
.pb-surface--dashboard .pb-dash-d2__hero-copy { flex: 1 1 340px; min-width: 0; }
.pb-surface--dashboard .pb-dash-d2__eyebrow {
  margin: 0 0 10px; color: var(--pb-d2-accent);
  font-size: 11px; font-weight: 750; letter-spacing: .14em; text-transform: uppercase;
}
.pb-surface--dashboard .pb-dash-d2__hero h1 {
  color: var(--pb-d2-text); font-size: clamp(27px, 3.1vw, 46px);
  letter-spacing: -.03em; font-weight: 750; line-height: 1.14;
  text-transform: none; margin: 0 0 10px;
}
.pb-surface--dashboard .pb-dash-d2__hero-copy > p:last-child {
  font-size: clamp(13px, 1vw, 15px); line-height: 1.6;
  color: var(--pb-d2-muted); margin: 0; max-width: 650px;
}
.pb-surface--dashboard .pb-dash-d2__quick {
  display: flex; flex-wrap: wrap; gap: 8px;
  align-items: center; flex: 0 1 auto;
}
.pb-surface--dashboard .pb-dash-d2__quick-link {
  display: inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height: 42px; padding: 9px 14px;
  border: 1px solid rgba(150, 205, 228, .29);
  border-radius: 11px; background: rgba(8, 25, 44, .65);
  color: #d8eef8; text-decoration: none; font-size: 13px; font-weight: 650;
  white-space: nowrap;
}
.pb-surface--dashboard .pb-dash-d2__quick-link:is(:hover,:focus-visible) {
  background: rgba(57, 108, 135, .35); border-color: var(--pb-d2-stroke-focus);
  color: #fff;
}
.pb-surface--dashboard .pb-dash-d2__quick-link.is-primary {
  background: #b0e9f2; color: #0b2637; border-color: #b0e9f2;
}

/* The D1 directory and all module wrappers share a common visual language. */
.pb-surface--dashboard .pb-dash-d1,
.pb-surface--dashboard .pb-wrap {
  border: 1px solid var(--pb-d2-stroke);
  border-radius: var(--pb-d2-radius);
  background: linear-gradient(180deg, rgba(255,255,255,.022), transparent 23%), var(--pb-d2-bg);
  box-shadow: var(--pb-d2-shadow);
  color: var(--pb-d2-text);
}
.pb-surface--dashboard .pb-dash-d1 { padding: clamp(17px, 2vw, 28px); }
.pb-surface--dashboard .pb-dash-d1__intro h2 {
  font-size: clamp(20px, 2vw, 27px); font-weight: 750; color:var(--pb-d2-text);
}
.pb-surface--dashboard .pb-dash-d1__intro p, .pb-surface--dashboard .pb-dash-d1__help,
.pb-surface--dashboard .pb-dash-d1__item-name small { color:var(--pb-d2-muted); }
.pb-surface--dashboard .pb-dash-d1__counts {
  background: var(--pb-d2-inset); border:1px solid var(--pb-d2-stroke);
  color:var(--pb-d2-muted); border-radius:11px;
}
.pb-surface--dashboard .pb-dash-d1__details > summary {
  min-height: 44px; border-radius:11px; background:var(--pb-d2-inset);
  border-color:var(--pb-d2-stroke); color:var(--pb-d2-accent);
}
.pb-surface--dashboard .pb-dash-d1__filters {
  grid-template-columns: minmax(0, 1.6fr) minmax(130px, 1fr) minmax(130px, 1fr);
  gap: 8px 12px;
}
.pb-surface--dashboard .pb-dash-d1__filters :is(input,select) {
  width: 100%; min-height: 44px; border-radius:10px; background:#101e30;
  border:1px solid rgba(140, 191, 215, .35); color:var(--pb-d2-text);
  padding:10px 12px; font-size:14px;
}
.pb-surface--dashboard .pb-dash-d1__filters :is(input,select):focus-visible {
  outline:2px solid var(--pb-d2-stroke-focus); outline-offset:2px;
}
.pb-surface--dashboard .pb-dash-d1__item {
  border-radius:12px; background:var(--pb-d2-inset); border-color:var(--pb-d2-stroke);
  min-height:84px;
}
.pb-surface--dashboard .pb-dash-d1__jump { color:var(--pb-d2-accent); }

/* Core-owned Surface wrapper styling: avoid overriding app internals. */
.pb-surface--dashboard .pb-wrap { position:relative; overflow:visible; }
.pb-surface--dashboard .pb-wrap:has(.pb-wrap__options[open]) { z-index:15; }
.pb-surface--dashboard .pb-wrap.is-disabled { opacity:.88; }
.pb-surface--dashboard .pb-wrap.is-featured { border-color:rgba(140, 218, 239, .43); }
.pb-surface--dashboard .pb-wrap__tape { display:none; }
.pb-surface--dashboard .pb-wrap__hdr {
  padding: 13px clamp(14px, 1.9vw, 24px);
  background: linear-gradient(90deg, rgba(35, 70, 95, .33), rgba(20, 33, 56, .35));
  border-bottom: 1px solid rgba(147, 201, 224, .18);
  border-radius: var(--pb-d2-radius) var(--pb-d2-radius) 0 0;
  flex-wrap:wrap; gap:10px;
  align-items:center; cursor:default;
}
.pb-surface--dashboard .pb-wrap.is-closed .pb-wrap__hdr {
  border-bottom-color:transparent;
  border-radius: var(--pb-d2-radius);
}
.pb-surface--dashboard .pb-wrap__disclosure {
  flex: 1 1 260px; min-height:43px; padding:2px 0;
  cursor:pointer;
}
.pb-surface--dashboard .pb-wrap__left { align-items:center; gap:12px; }
.pb-surface--dashboard .pb-wrap__icon {
  display:grid; place-items:center; flex:0 0 38px; height:38px;
  background:rgba(80, 143, 167, .14); border:1px solid rgba(142, 212, 228, .18);
  border-radius:11px; font-size:19px;
}
.pb-surface--dashboard .pb-wrap__name {
  display:block; font-size: clamp(13px,1.1vw,15px); font-weight:750;
  color:var(--pb-d2-text); letter-spacing:.045em;
}
.pb-surface--dashboard .pb-wrap__seg { color:var(--pb-d2-muted); letter-spacing:.10em; }
.pb-surface--dashboard .pb-wrap__chev { padding: 0 3px; font-size:19px; color:#c6e8f1; }
.pb-surface--dashboard .pb-wrap__right { align-items:center; justify-content:flex-end; gap:8px; }
.pb-surface--dashboard .pb-wrap__btn {
  display:inline-flex; justify-content:center; align-items:center;
  padding:8px 11px; min-height:36px; border-radius:10px;
  border:1px solid rgba(153, 204, 227, .3); background:rgba(12, 30, 48, .88);
  color:var(--pb-d2-text); font-size:12px; font-weight:650; letter-spacing:.03em;
  cursor:pointer; box-shadow:none;
}
.pb-surface--dashboard .pb-wrap__btn--power { min-width:55px; min-height:42px; }
.pb-surface--dashboard .pb-wrap__btn--power[data-pb-state="1"] {
  background:rgba(31, 108, 90, .30); border-color:rgba(126, 220, 186, .48); color:#b6f7de;
}
.pb-surface--dashboard .pb-wrap__btn--power[data-pb-state="0"] { color:#c0ccd2; }
.pb-surface--dashboard .pb-wrap__btn:is(:hover,:focus-visible),
.pb-surface--dashboard .pb-wrap__options > summary:is(:hover,:focus-visible) {
  border-color:var(--pb-d2-stroke-focus); background:rgba(35, 77, 104, .47); color:#fff;
}
.pb-surface--dashboard :is(.pb-wrap__btn,.pb-wrap__disclosure,.pb-wrap__options > summary,.pb-dash-d2__quick-link):focus-visible {
  outline:2px solid #8ae8fa; outline-offset:3px;
}
.pb-surface--dashboard .pb-wrap__options { position:relative; flex:0 0 auto; }
.pb-surface--dashboard .pb-wrap__options > summary {
  display:flex; align-items:center; justify-content:center; gap:10px;
  min-height:42px; padding:9px 14px;
  border:1px solid rgba(153,204,227,.33); background:rgba(12,30,48,.8);
  border-radius:10px; list-style:none; cursor:pointer; color:var(--pb-d2-text);
  font-size:12px; font-weight:700;
}
.pb-surface--dashboard .pb-wrap__options > summary::-webkit-details-marker { display:none; }
.pb-surface--dashboard .pb-wrap__options[open] > summary span { transform:rotate(180deg); }
.pb-surface--dashboard .pb-wrap__options-menu {
  position:absolute; z-index:30; top:calc(100% + 8px); right:0;
  width:min(360px, calc(100vw - 38px)); padding:14px;
  border:1px solid rgba(148, 210, 231, .40); border-radius:15px;
  background:#0e2033; box-shadow:0 22px 54px rgba(0,0,0,.65);
}
.pb-surface--dashboard .pb-wrap__options-heading {
  margin:0 0 6px; font-size:11px; font-weight:800; letter-spacing:.12em;
  text-transform:uppercase; color:var(--pb-d2-accent);
}
.pb-surface--dashboard .pb-wrap__options-row {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:9px 0; min-height:52px;
  border-bottom:1px solid rgba(163, 202, 223, .12);
  color:var(--pb-d2-muted); font-size:12px;
}
.pb-surface--dashboard .pb-wrap__options-row > span:first-child { flex:1 1 auto; }
.pb-surface--dashboard .pb-wrap__options-actions { display:inline-flex; gap:5px; }
.pb-surface--dashboard .pb-wrap__private-label { padding:5px 8px; border-radius:8px; }
.pb-surface--dashboard .pb-wrap__options-help {
  padding-top:12px; margin:0; font-size:11px; line-height:1.5; color:var(--pb-d2-muted);
}
.pb-surface--dashboard .pb-wrap__body {
  padding: clamp(16px, 2vw, 26px);
  background:rgba(5, 18, 31, .2);
  color:var(--pb-d2-text); min-width:0; border-radius:0 0 var(--pb-d2-radius) var(--pb-d2-radius);
}
.pb-surface--dashboard .pb-wrap__body[hidden] { display:none; }
.pb-surface--dashboard .pb-wrap__status {
  margin:0; border-top:1px solid rgba(155, 202, 219, .16);
  font-size:12px; padding:9px 20px; color:#b8f5e1; background:rgba(11,75,60,.34);
}
.pb-surface--dashboard .pb-wrap__status.is-error { color:#ffd7d7; background:rgba(110,24,40,.45); }

/* Dashboard-only primitives for incremental adoption by Core-owned modules. */
.pb-surface--dashboard .pb-d2-panel { border:1px solid var(--pb-d2-stroke); border-radius:14px; padding:16px; background:var(--pb-d2-inset); }
.pb-surface--dashboard .pb-d2-field { display:grid; gap:7px; font-size:13px; color:var(--pb-d2-muted); }
.pb-surface--dashboard .pb-d2-input { width:100%; min-height:44px; border:1px solid var(--pb-d2-stroke); border-radius:10px; color:var(--pb-d2-text); background:var(--pb-d2-inset); padding:9px 12px; }
.pb-surface--dashboard .pb-d2-button { min-height:42px; border:1px solid var(--pb-d2-stroke); border-radius:10px; color:var(--pb-d2-text); background:var(--pb-d2-raised); padding:9px 14px; cursor:pointer; }

@media (max-width:820px) {
  .pb-surface--dashboard .pb-dash-d1__filters { grid-template-columns:1fr; }
  .pb-surface--dashboard .pb-dash-d1__filters label,
  .pb-surface--dashboard .pb-dash-d1__filters :is(input,select) { grid-row:auto; }
  .pb-surface--dashboard .pb-dash-d1__filters label:nth-of-type(2) { grid-row:3; }
  .pb-surface--dashboard .pb-dash-d1__filters label:nth-of-type(3) { grid-row:5; }
  .pb-surface--dashboard .pb-dash-d1__filters select#pb-dash-d1-filter { grid-row:4; }
  .pb-surface--dashboard .pb-dash-d1__filters select#pb-dash-d2-category { grid-row:6; }
  .pb-surface--dashboard .pb-dash-d2__quick { width:100%; }
}
@media (max-width:560px) {
  .pb-surface--dashboard { padding:8px; gap:12px; }
  .pb-surface--dashboard .pb-dash-d2__hero { border-radius:16px; padding:19px 16px; }
  .pb-surface--dashboard .pb-dash-d2__quick-link { flex:1 1 auto; }
  .pb-surface--dashboard .pb-wrap__hdr { padding:10px 12px; }
  .pb-surface--dashboard .pb-wrap__right { width:100%; justify-content:space-between; }
  .pb-surface--dashboard .pb-wrap__options { margin-left:auto; }
  .pb-surface--dashboard .pb-wrap__options-menu { right:-2px; }
  .pb-surface--dashboard .pb-wrap__body { padding:14px; }
}
@media (prefers-reduced-motion:reduce) {
  .pb-surface--dashboard *, .pb-surface--dashboard *::before, .pb-surface--dashboard *::after { scroll-behavior:auto; transition-duration:.01ms; animation-duration:.01ms; }
}
@media (prefers-reduced-transparency:reduce) {
  .pb-surface--dashboard .pb-dash-d2__hero,
  .pb-surface--dashboard :is(.pb-dash-d1,.pb-wrap) { background:#0e2033; }
}
/* Override inherited mobile column/flex-basis rules from the original Surface CSS.
   Without this, a disclosure button with flex-basis:260px can inflate to a 260px-high header. */
@media (max-width:820px) {
  .pb-surface--dashboard .pb-wrap__hdr {
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
    gap:8px 12px;
  }
  .pb-surface--dashboard .pb-wrap__disclosure {
    flex:initial;
    width:auto;
    min-width:0;
    min-height:44px;
  }
  .pb-surface--dashboard .pb-wrap__right {
    width:auto;
    justify-content:flex-end;
  }
}
@media (max-width:420px) {
  .pb-surface--dashboard .pb-wrap__hdr { grid-template-columns:minmax(0,1fr); }
  .pb-surface--dashboard .pb-wrap__right { width:100%; justify-content:flex-end; }
}

/* D2.1 — Mobile space and PROXY ID readability.
 * Scoped to Citizen Dashboard: the official PDF/standalone credential and
 * public profile rendering retain their original compositions.
 */
.pb-surface--dashboard .pb-wrap__body > *,
.pb-surface--dashboard .pb-wrap__body .pb-proxy-id-office,
.pb-surface--dashboard .pb-proxy-id-office__viewer,
.pb-surface--dashboard .pb-proxy-id-office__preview {
  min-width:0;
  max-width:100%;
  box-sizing:border-box;
}
@media (max-width:680px) {
  .pb-surface--dashboard .pb-wrap__body {
    padding:clamp(10px,3vw,15px);
  }
  .pb-surface--dashboard .pb-proxy-id-office {
    width:100%;
    margin:8px 0;
    padding:clamp(11px,3vw,16px);
  }
  .pb-surface--dashboard .pb-proxy-id-office__preview {
    width:100%;
    margin-top:12px;
  }
  .pb-surface--dashboard .pb-proxy-id-card {
    width:100%;
    aspect-ratio:auto;
    min-height:0;
    height:auto;
    overflow:visible;
    border-radius:13px;
  }
  .pb-surface--dashboard .pb-proxy-id-card__head {
    padding:13px 14px 11px;
    gap:8px;
    flex-wrap:wrap;
  }
  .pb-surface--dashboard .pb-proxy-id-card__head strong {font-size:clamp(12px,3.4vw,15px)}
  .pb-surface--dashboard .pb-proxy-id-card__head span {font-size:9px;letter-spacing:.08em}
  .pb-surface--dashboard .pb-proxy-id-card__head b {font-size:10px;overflow-wrap:anywhere}
  .pb-surface--dashboard .pb-proxy-id-card__body {
    grid-template-columns:minmax(58px,76px) minmax(0,1fr);
    align-items:start;
    gap:12px;
    padding:13px 14px;
  }
  .pb-surface--dashboard .pb-proxy-id-card__avatar {width:100%;max-width:76px;border-radius:9px}
  .pb-surface--dashboard .pb-proxy-id-card__identity {padding-top:0}
  .pb-surface--dashboard .pb-proxy-id-card__identity h3 {font-size:clamp(16px,4.5vw,22px);white-space:normal;overflow-wrap:anywhere}
  .pb-surface--dashboard .pb-proxy-id-card__handle {font-size:11px;margin-top:6px}
  .pb-surface--dashboard .pb-proxy-id-card__identity dl {margin:12px 0 0}
  .pb-surface--dashboard .pb-proxy-id-card__identity dl>div {display:grid;grid-template-columns:minmax(58px,auto) minmax(0,1fr);gap:5px;padding:5px 0}
  .pb-surface--dashboard .pb-proxy-id-card__identity dt {font-size:9px}
  .pb-surface--dashboard .pb-proxy-id-card__identity dd {font-size:10px;white-space:normal;overflow-wrap:anywhere}
  .pb-surface--dashboard .pb-proxy-id-card__glyph {
    grid-column:1/-1;
    display:flex;
    flex-direction:column;
    align-items:center;
    padding:10px 0 0;
    border-top:1px solid rgba(95,214,255,.11);
  }
  .pb-surface--dashboard .pb-proxy-id-card__glyph img,
  .pb-surface--dashboard .pb-proxy-id-card__glyph>span {
    width:clamp(132px,35vw,156px);
    height:clamp(132px,35vw,156px);
    max-width:100%;
    border-radius:8px;
  }
  .pb-surface--dashboard .pb-proxy-id-card__glyph small {font-size:10px;margin-top:7px;letter-spacing:.07em}
  .pb-surface--dashboard .pb-proxy-id-card__foot {
    position:static;
    display:flex;
    flex-wrap:wrap;
    gap:4px 13px;
    margin:0 14px 13px;
    padding-top:11px;
    font-size:9px;
    line-height:1.4;
    letter-spacing:.025em;
  }
}
@media(max-width:380px) {
  .pb-surface--dashboard .pb-proxy-id-card__body {gap:9px;padding:11px}
  .pb-surface--dashboard .pb-proxy-id-card__identity dl>div {grid-template-columns:minmax(0,1fr)}
  .pb-surface--dashboard .pb-proxy-id-card__foot {margin:0 11px 11px}
}