/* P34 - Design360 pin reports (Review import for design files, Pin connections, Power rails, BOM vs schematic, the Import
 * dialog). Buttons, chips, cards, banners, tabs, the segmented control, inputs, radios, dialogs, tables and empty states
 * are the Hub's own primitives (ui.css: the s360-* classes); only the layouts those primitives are put into are here.
 * Every rule sits under `.p34`, the wrapper the pin screens draw inside, so nothing leaks into the other screens, and
 * every colour, radius, space and type size is a Hub token (tokens.css), never a literal. */

/* ---- head */
.p34 .p34-back{margin:8px 0 0 -10px}
.p34 .p34-back svg{flex:none}
.p34 .p34-vchip{vertical-align:middle;margin-left:var(--space-s)}
.p34 .s360-tabs{margin:0 0 var(--space-l);flex-wrap:wrap;gap:var(--space-l) var(--space-xl)}
.p34 .s360-tab{background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;cursor:pointer;display:inline-flex;align-items:center;gap:var(--space-xs)}
.p34 .s360-tab .s360-chip{margin-left:0}

/* ---- tiles and banners */
.p34 .rr-stats{margin-bottom:14px}
.p34 .d3-stat[data-pin-go]{cursor:pointer}
.p34 .d3-stat[data-pin-go]:hover{border-color:var(--stroke-2)}
.p34 .d3-stat .v small{font-size:13px;font-weight:600;color:var(--fg-3)}
.p34 > .s360-banner,.p34 .p34-gapcard{margin-bottom:14px}
.p34 .s360-banner svg{width:18px;height:18px}
.p34 .s360-banner > div{min-width:0}
.p34 .p34-gapcard{border-color:var(--warning);background:var(--warning-bg)}
.p34 .p34-gapcard .ph{font:var(--t-body1) var(--font-ui);color:var(--fg-2);margin-top:var(--space-xs);line-height:1.5}
.p34 .p34-lnk{height:auto;padding:0 2px;border-radius:var(--radius-sm);color:var(--brand-violet);font:var(--t-body1-strong) var(--font-ui);white-space:nowrap;box-shadow:none}
.p34 .p34-lnk:hover{background:none;text-decoration:underline}

/* ---- layout */
.p34 .p34-grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
.p34 .p34-side{display:grid;grid-template-columns:240px minmax(0,1fr);gap:14px;align-items:start}
@media (max-width:1000px){.p34 .p34-grid2,.p34 .p34-side{grid-template-columns:minmax(0,1fr)}}
.p34 .p34-stack{display:grid;gap:14px;min-width:0}
.p34 .p34-stack > *,.p34 .p34-side > *,.p34 .p34-grid2 > *{min-width:0}
.p34 .p34-scroll{min-width:0;max-width:100%}
.p34 .p34-cardhead{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-m);flex-wrap:wrap;margin-bottom:var(--space-s)}
.p34 .p34-cardhead h3 .mono{font-size:16px}
.p34 .p34-padhead{padding:var(--space-l) var(--space-l) var(--space-s);margin-bottom:0}
.p34 .p34-chiprow{display:flex;gap:6px;flex-wrap:wrap}
.p34 .p34-sech{text-transform:none;letter-spacing:0;font-family:var(--font-ui)}
.p34 .p34-flushtable{border:0;border-top:1px solid var(--stroke-1);border-radius:0 0 var(--radius-2xl) var(--radius-2xl)}
.p34 .p34-bar{display:flex;gap:var(--space-s);align-items:center;justify-content:flex-end;flex-wrap:wrap;margin-top:var(--space-l);padding-top:14px;border-top:1px solid var(--stroke-1)}
.p34 .p34-bar .grow{flex:1}
.p34 .p34-bar .ph{font-size:12px;color:var(--fg-3)}
.p34 .p34-explain{margin-top:var(--space-s);color:var(--fg-2);line-height:1.7}
.p34 .p34-ul{margin:0;padding-left:16px}
.p34 .p34-ul li{margin:0 0 2px}

/* ---- tables (inside .s360-table-wrap) */
.p34 .s360-table-wrap td,.p34 .s360-table-wrap th{vertical-align:middle}
.p34 .s360-table-wrap .r{text-align:right}
.p34 .s360-table-wrap tbody tr[data-pin-go]{cursor:pointer}
.p34 .s360-table-wrap tbody tr[data-pin-go]:hover td{background:var(--bg-row-hover)}
.p34 .s360-table-wrap tr.p34-hl td{background:var(--danger-bg)}
.p34 .s360-table-wrap tr.p34-hlw td{background:var(--warning-bg)}
.p34 .s360-table-wrap tr.p34-sel td{background:var(--brand-violet-50)}
.p34 .s360-table-wrap input[type=checkbox]{accent-color:var(--brand-violet);width:15px;height:15px}
.p34 .p34-chips .s360-chip{margin:1px var(--space-xs) 1px 0}
.p34 .dim{color:var(--fg-4)}
.p34 .p34-ref{cursor:pointer}
.p34 .p34-ok{color:var(--success);font-weight:600}
.p34 .p34-bad{color:var(--danger);font-weight:600}
.p34 .p34-src{display:block;font-size:12px;color:var(--fg-3);margin-top:2px}

/* pin types: a small swatch and a word (no colour carries meaning alone) */
.p34 .p34-ptype{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--fg-2);white-space:nowrap}
.p34 .p34-ptype::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--c,var(--fg-4))}
.p34 .p34-ptype[data-cls=power]{--c:var(--brand-violet)}
.p34 .p34-ptype[data-cls=ground]{--c:var(--fg-3)}
.p34 .p34-ptype[data-cls=analog]{--c:var(--success)}
.p34 .p34-ptype[data-cls=high_speed]{--c:var(--info)}
.p34 .p34-ptype[data-cls=control]{--c:var(--warning)}
.p34 .p34-ptype[data-cls=nc]{--c:var(--stroke-2)}
.p34 .p34-legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--fg-3);margin:6px 0 10px}

/* ---- check list and key/value rows */
.p34 .p34-check{display:flex;gap:10px;align-items:flex-start;padding:9px 0;border-bottom:1px solid var(--stroke-1);font:var(--t-body1) var(--font-ui)}
.p34 .p34-check:last-child{border-bottom:0}
.p34 .p34-check .dot{flex:none;width:20px;height:20px;border-radius:var(--radius-circle);display:grid;place-items:center;font:700 11px/1 var(--font-ui);margin-top:1px}
.p34 .p34-check .dot.ok{background:var(--success-bg);color:var(--success)}
.p34 .p34-check .dot.warn{background:var(--warning-bg);color:var(--warning)}
.p34 .p34-check .dot.info{background:var(--info-bg);color:var(--info)}
.p34 .p34-check .t{flex:1;min-width:0}
.p34 .p34-check .t b{display:block;font-weight:600}
.p34 .p34-check .t span{color:var(--fg-3);font-size:12px}
.p34 .p34-pri{display:flex;align-items:center;gap:var(--space-s);font-size:12px;color:var(--fg-2)}
.p34 .p34-pri svg{width:15px;height:15px;color:var(--brand-violet);flex:none}
.p34 .p34-kv{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;font:var(--t-body1) var(--font-ui);margin:0}
.p34 .p34-kv dt{color:var(--fg-3)}
.p34 .p34-kv dd{margin:0;color:var(--fg-1)}

/* ---- the part list of Pin connections */
.p34 .p34-psearch{padding:var(--space-s) var(--space-s) var(--space-xs)}
.p34 .p34-plist{display:flex;flex-direction:column;gap:2px;max-height:620px;overflow:auto;padding:0 6px 6px}
.p34 .p34-pitem{display:flex;align-items:center;gap:var(--space-s);padding:7px 9px;border-radius:var(--radius-lg);border:0;background:none;text-align:left;font:inherit;cursor:pointer;color:var(--fg-1)}
.p34 .p34-pitem:hover{background:var(--bg-row-hover)}
.p34 .p34-pitem[data-on="true"]{background:var(--brand-violet-50);color:var(--brand-violet)}
.p34 .p34-pitem .rf{font:600 12px/1 var(--font-mono);width:34px;flex:none}
.p34 .p34-pitem .mp{font-size:12px;color:var(--fg-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}
.p34 .p34-pitem[data-on="true"] .mp{color:var(--brand-violet)}
.p34 .p34-pitem .fl{width:7px;height:7px;border-radius:var(--radius-circle);background:var(--warning);flex:none}

/* ---- alternates: one card per alternate */
.p34 .p34-alt{border:1px solid var(--stroke-1);border-radius:var(--radius-lg);padding:12px 14px;display:flex;gap:var(--space-m);align-items:flex-start;flex-wrap:wrap;background:var(--bg-card)}
.p34 .p34-alt + .p34-alt{margin-top:var(--space-s)}
.p34 .p34-alt.bad{border-color:var(--danger);background:var(--danger-bg)}
.p34 .p34-alt .who{min-width:180px;flex:1 1 180px}
.p34 .p34-alt .who b{font-family:var(--font-mono);font-size:13px}
.p34 .p34-alt .who span{display:block;font-size:12px;color:var(--fg-3)}
.p34 .p34-alt .why{flex:2 1 280px;font:var(--t-body1) var(--font-ui);line-height:1.5}
.p34 .p34-alt .act{display:flex;gap:6px;align-items:center;flex-wrap:wrap}

/* ---- the power tree (colours are classes so the tree wears the Hub's tokens) */
.p34 .p34-tree{width:100%;height:auto;display:block}
.p34 .p34-tree text{font-family:var(--font-ui)}
.p34 .p34-tree .t1{font-size:13px;font-weight:700;fill:var(--fg-1)}
.p34 .p34-tree .t2{font-size:11.5px;fill:var(--fg-3)}
.p34 .p34-tree .en{font-size:11px;fill:var(--warning)}
.p34 .p34-tree .rl{fill:var(--bg-card);stroke-width:1.5}
.p34 .p34-tree .p34-n-rail .rl{stroke:var(--brand-teal)}
.p34 .p34-tree .p34-n-reg .rl{stroke:var(--brand-violet)}
.p34 .p34-tree .p34-n-ext .rl{stroke:var(--fg-4)}
.p34 .p34-tree .sel .rl{fill:var(--brand-violet-50);stroke-width:2.5}
.p34 .p34-tree .edge{stroke:var(--fg-4);stroke-width:1.5}
.p34 .p34-tree .head{fill:var(--fg-4)}
.p34 .p34-tree g[data-pin-go]{cursor:pointer}
.p34 .p34-tree g[data-pin-go]:hover .rl{stroke-width:2.5}

/* ---- decisions (the amber difference to settle) */
.p34 .p34-decide + .p34-decide{margin-top:var(--space-l);padding-top:14px;border-top:1px solid var(--stroke-1)}
.p34 .p34-decide-h{margin-top:var(--space-m);font:var(--t-body1-strong) var(--font-ui);color:var(--fg-1)}
.p34 .p34-decide-p{font:var(--t-body1) var(--font-ui);margin:10px 0 0;line-height:1.55;color:var(--fg-2)}
.p34 .p34-decidecard{border-color:var(--danger)}
.p34 .p34-radio{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid var(--stroke-1);border-radius:var(--radius-lg);cursor:pointer;font:var(--t-body1) var(--font-ui);margin-top:var(--space-s)}
.p34 .p34-radio input{margin-top:2px;flex:none}
.p34 .p34-radio:has(input:checked){border-color:var(--brand-violet);background:var(--brand-violet-50)}
.p34 .p34-radio span{color:var(--fg-3);font-size:12px;display:block}
.p34 .p34-why-in{width:220px;max-width:100%;height:28px;margin-top:2px}

/* ---- dialogs (the .s360-dialog contract, plus what is inside them) */
.p34 .s360-dialog .p34-dlg-note{margin-top:14px}
.p34 .s360-dialog .p34-kv{font:var(--t-body1) var(--font-ui)}
@media (max-width:720px){.p34 .d3-review-head{position:static}.p34 .d3-review-head .sto-sub{display:none}}
@media (max-width:480px){.p34 .p34-alt .act{width:100%}.p34 .p34-padhead{padding:var(--space-m)}}