/* Work Package Interfaces view (skill 07). Every rule is scoped to .if-scope so it cannot
   clash with Tailwind classes elsewhere in the app. Colors: Skills/_shared/brand.md. */
.if-scope{
  --bg:#F7F6F3; --panel:#ffffff; --ink:#1D2226; --ink-2:#454F57; --ink-3:#5B6770;
  --rule:#E0DDD6; --rule-2:#EEECE7; --accent:#146B46; --accent-soft:#EDF7F1;
  /* sequential: brand light → dark green */
  --s1:#D3EDDD; --s2:#A9DCBD; --s3:#7CC79C; --s4:#4FAE7B; --s5:#1B8A5A; --s6:#0C442D;
  /* relationship types keep their report colors: FS Site Green, SS Safety Orange, FF Blueprint, SF Rose */
  --fs:#1B8A5A; --ss:#F28C28; --ff:#2F6FB3; --sf:#D46A9A;
  --out:#8E5BB5; --in:#D9A21B;
  --crit:#C62828; --warn:#B85A12; --warn-ring:#E0A800; --ok:#146B46;
  --crit-bg:#FBE9E8; --warn-bg:#FEF4EA; --ok-bg:#EDF7F1; --info-bg:#EEECE7;
  --diag:#EEECE7; --col:#5B6770;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
#if-view{display:grid;gap:22px;color:var(--ink);font-size:14px;line-height:1.5}
#if-view h2,#if-view h3,#if-view h4{margin:0}
#if-view .mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
/* title block */
#if-view .tb{display:grid;grid-template-columns:1fr auto;border:1.5px solid #0F2E25;background:var(--panel);border-radius:10px;overflow:hidden}
#if-view .tb-main{padding:18px 20px;display:grid;gap:6px;border-right:1.5px solid #0F2E25}
#if-view .tb-main h2{font-size:24px;font-weight:800;letter-spacing:-.01em;line-height:1.15}
#if-view .tb-main p{margin:0;color:var(--ink-2);max-width:72ch;font-size:13px}
#if-view .eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
#if-view .tb-grid{display:grid;grid-template-columns:repeat(2,minmax(120px,1fr))}
#if-view .tb-grid div{padding:9px 14px;border-bottom:1px solid var(--rule);border-left:1px solid var(--rule)}
#if-view .tb-grid div:nth-child(odd){border-left:0}
#if-view .tb-grid b{display:block;font-family:var(--mono);font-size:14px;font-weight:500}
@media (max-width:760px){#if-view .tb{grid-template-columns:1fr}#if-view .tb-main{border-right:0;border-bottom:1.5px solid #0F2E25}}
/* KPIs */
#if-view .kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
#if-view .kpi{background:var(--panel);border:1px solid var(--rule);border-radius:10px;padding:12px 14px;display:grid;gap:2px}
#if-view .kpi b{font-family:var(--mono);font-size:24px;font-weight:500;line-height:1.1}
#if-view .kpi span{color:var(--ink-2);font-size:12.5px}
/* plates */
#if-view .plate{background:var(--panel);border:1px solid var(--rule);border-radius:10px;display:grid;min-width:0}
#if-view .plate-h{display:grid;grid-template-columns:auto 1fr;column-gap:12px;row-gap:4px;align-items:baseline;padding:14px 18px 10px;border-bottom:1px solid var(--rule-2)}
#if-view .plate-h .no{font-family:var(--mono);font-size:11.5px;color:var(--accent);border:1px solid var(--accent);padding:1px 6px;border-radius:3px}
#if-view .plate-h h3{font-size:17px;font-weight:700}
#if-view .plate-h p{grid-column:1/-1;margin:0;color:var(--ink-2);max-width:90ch;font-size:13px}
#if-view .plate-b{padding:14px 18px 18px;min-width:0;display:grid;gap:12px}
#if-view .scroll{overflow-x:auto}
#if-view .legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--ink-2);align-items:center}
#if-view .sw{display:inline-block;width:12px;height:12px;border-radius:2px;vertical-align:-1px;margin-right:5px}
#if-view .note{font-size:12px;color:var(--ink-3);margin:0}
#if-view h4.sub{font-size:13.5px;font-weight:700}
/* heatmap */
#if-view table.hm{border-collapse:separate;border-spacing:2px;font-size:12px}
#if-view .hm th{font-weight:600;color:var(--ink-2);text-align:right;padding:0 8px 0 0;white-space:nowrap}
#if-view .hm thead th{height:120px;vertical-align:bottom;padding:0;text-align:left}
#if-view .hm thead th>div{transform:rotate(-55deg);transform-origin:left bottom;width:28px;white-space:nowrap;translate:14px -4px}
#if-view .hm td{width:44px;height:32px;text-align:center;font-family:var(--mono);border-radius:3px;cursor:pointer}
#if-view .hm td.z{cursor:default;color:var(--ink-3)}
#if-view .hm td.dg{background:var(--diag);color:var(--ink-3);cursor:default}
#if-view .hm td.sel{outline:2px solid var(--ink);outline-offset:1px}
#if-view .hm td:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
#if-view .hm .tot{font-family:var(--mono);color:var(--ink-2);cursor:default}
#if-view .hm.static td{cursor:default}
/* bars */
#if-view .grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:20px}
#if-view .grid2>*{min-width:0}
#if-view .bars{display:grid;gap:7px;margin-top:8px}
#if-view .bar-row{display:grid;grid-template-columns:minmax(130px,220px) 1fr 52px;gap:10px;align-items:center;font-size:12.5px}
#if-view .bar-row .lbl{color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#if-view .bar-track{display:flex;gap:2px;height:15px}
#if-view .bar-track i{display:block;height:100%}
#if-view .bar-track i:last-child{border-radius:0 4px 4px 0}
#if-view .bar-row .v{font-family:var(--mono);text-align:right}
/* floors */
#if-view table.fm{border-collapse:separate;border-spacing:2px;font-size:11px}
#if-view .fm th{font-weight:600;color:var(--ink-2);padding:0 8px 0 0;text-align:right;white-space:nowrap}
#if-view .fm thead th{text-align:center;padding:0 0 4px;font-family:var(--mono);font-weight:500;color:var(--ink-3)}
#if-view .fm td{width:26px;min-width:26px;height:26px;text-align:center;font-family:var(--mono);border-radius:3px}
#if-view .fm td.y{background:var(--s4);color:#fff}
#if-view .fm td.y2{background:var(--s6);color:#fff}
#if-view .fm td.n{background:var(--crit-bg);color:var(--crit)}
#if-view .fm td.na{background:var(--diag);color:var(--ink-3)}
#if-view .fm td.off{box-shadow:inset 0 0 0 2px var(--warn-ring)}
/* driving path */
#if-view .path{display:flex;flex-wrap:wrap;align-items:stretch}
#if-view .step{flex:1 1 160px;min-width:0;border:1px solid var(--rule);border-left:4px solid var(--crit);padding:10px 12px;display:grid;gap:3px;background:var(--panel)}
#if-view .step+.step{margin-left:-1px}
#if-view .step b{font-size:13px}
#if-view .step span{font-size:12px;color:var(--ink-2)}
#if-view .step .mono{font-size:11px;color:var(--ink-3)}
/* chips, findings, checklist */
#if-view .chip{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:3px 8px;border-radius:999px;height:max-content;width:max-content;white-space:nowrap}
#if-view .chip.h{background:var(--crit-bg);color:var(--crit)}
#if-view .chip.m{background:var(--warn-bg);color:var(--warn)}
#if-view .chip.l{background:var(--ok-bg);color:var(--accent)}
#if-view .chip.i,#if-view .chip.na{background:var(--info-bg);color:var(--ink-2)}
#if-view .chip.g{background:var(--ok-bg);color:var(--ok)}
#if-view .find{display:grid;gap:10px}
#if-view .f{display:grid;grid-template-columns:92px 1fr;gap:14px;border-top:1px solid var(--rule-2);padding-top:10px}
#if-view .f:first-child{border-top:0;padding-top:0}
#if-view .f h4{margin:0 0 2px;font-size:14px;font-weight:700}
#if-view .f p{margin:0;color:var(--ink-2);max-width:92ch}
#if-view .refs{font-family:var(--mono);font-size:11.5px;color:var(--ink-3);margin-top:4px}
@media (max-width:520px){#if-view .f{grid-template-columns:1fr;gap:6px}}
#if-view table.ex{border-collapse:collapse;width:100%;font-size:13px}
#if-view .ex th,#if-view .ex td{border-bottom:1px solid var(--rule-2);padding:8px 10px;text-align:left;vertical-align:top}
#if-view .ex th{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
#if-view .ex td.n{font-family:var(--mono);text-align:right}
/* register + toolbars */
#if-view .tools{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
#if-view .tools input,#if-view .tools select{font:inherit;font-size:13px;padding:7px 10px;border:1px solid var(--rule);background:var(--bg);color:var(--ink);border-radius:6px;min-width:0}
#if-view .tools input{flex:1 1 220px}
#if-view .tools button{font:inherit;font-size:13px;padding:7px 12px;border:1px solid var(--rule);background:var(--panel);color:var(--ink);border-radius:6px;cursor:pointer}
#if-view .tools button:hover{background:var(--bg)}
#if-view .tools button[aria-pressed="true"]{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}
#if-view .tools :focus-visible{outline:2px solid var(--accent);outline-offset:1px}
#if-view .reg-sum{font-size:12px;color:var(--ink-2)}
#if-view table.reg{border-collapse:collapse;width:100%;font-size:12.5px;min-width:960px}
#if-view .reg th{position:sticky;top:0;background:var(--panel);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);font-weight:600;text-align:left;padding:8px;border-bottom:1px solid var(--rule)}
#if-view .reg td{padding:6px 8px;border-bottom:1px solid var(--rule-2);vertical-align:top}
#if-view .reg tr:nth-child(even) td{background:#FBFAF8}
#if-view .reg td.c{font-family:var(--mono);white-space:nowrap}
#if-view .reg td.n{font-family:var(--mono);text-align:right;white-space:nowrap}
#if-view .reg-frame{max-height:520px;overflow:auto;border:1px solid var(--rule-2);border-radius:6px}
#if-view .tt{display:inline-block;font-family:var(--mono);font-size:11px;padding:0 5px;border-radius:3px;color:#fff}
#if-view .tt.SS{color:var(--ink)}
#if-view .flag{font-size:10.5px;font-weight:600;letter-spacing:.04em;padding:1px 6px;border-radius:999px;margin-right:3px;white-space:nowrap}
#if-view .flag.cp{background:var(--crit-bg);color:var(--crit)}
#if-view .flag.of{background:var(--warn-bg);color:var(--warn)}
#if-view .flag.lo{background:var(--info-bg);color:var(--ink-2)}
#if-view .flag.py{background:var(--ok-bg);color:var(--accent)}
/* 3D stage */
#if-view .stage{position:relative;height:560px;border:1px solid var(--rule-2);border-radius:6px;background:var(--panel);overflow:hidden;touch-action:none;cursor:grab}
#if-view .stage.drag{cursor:grabbing}
#if-view .stage canvas{display:block;width:100%;height:100%}
#if-view .lbls{position:absolute;inset:0;pointer-events:none}
#if-view .lbl3{position:absolute;transform:translate(-50%,-100%);white-space:nowrap;text-align:center;font-size:11.5px;font-weight:600;color:var(--ink);text-shadow:0 0 3px #fff,0 0 3px #fff}
#if-view .lbl3 small{display:block;font-family:var(--mono);font-weight:400;font-size:10px;color:var(--ink-3)}
#if-view .nogl{position:absolute;inset:0;display:grid;place-items:center;padding:24px;text-align:center;color:var(--ink-2)}
#if-view .nogl[hidden]{display:none}
@media (max-width:620px){#if-view .stage{height:420px}#if-view .lbl3{font-size:10px}#if-view .lbl3 small{display:none}}
#if-tip{position:fixed;pointer-events:none;background:#1D2226;color:#fff;font-size:12px;padding:7px 10px;border-radius:4px;max-width:320px;z-index:60;line-height:1.4}
#if-tip[hidden]{display:none}
@media (prefers-reduced-motion:reduce){#if-view *{transition:none!important}}