/* Original pixel artwork. Layout informed by UI UX Pro Max's hierarchy,
   reflow, contrast and multi-series chart guidance. No upstream art copied. */
.craft-detail-symbols{position:absolute;width:0;height:0;overflow:hidden}
#detail{width:min(1040px,calc(100vw - 32px));max-width:1040px;max-height:92dvh;padding:24px;background:var(--inventory);border:4px solid #464951;box-shadow:inset 3px 3px #ffffff80,inset -3px -3px #0003,8px 8px #0005;scrollbar-gutter:stable;--terminal-edge:#92969f;--terminal-panel:#fffdf8;--terminal-slot:#e6e9ef;--terminal-muted:#51546a}
[data-appearance=dark] #detail{--terminal-edge:#655a7b;--terminal-panel:#272234;--terminal-slot:#211c2e;--terminal-muted:#c5b9d7;border-color:#857095}
#detail>.dialog-heading{margin:-20px -20px 20px;padding:18px 22px;background:var(--terminal-slot);border-bottom:3px solid var(--terminal-edge);box-shadow:inset 0 3px #ffffff20;color:var(--ink);position:relative}
#detail>.dialog-heading:before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:4px;background:#b43d42;box-shadow:4px 0 #e2a261}
#detail .dialog-heading h2{color:var(--ink);text-shadow:none;font-size:23px;line-height:1.45;margin:4px 0 0;font-family:var(--readable-font,system-ui,sans-serif)}
#detail .dialog-heading .eyebrow{color:var(--terminal-muted);font:11px/1.5 system-ui,sans-serif;letter-spacing:1.2px}
#detail .dialog-heading .icon-button{width:38px;height:38px;display:grid;place-items:center}
.detail-section-title{display:flex;align-items:center;gap:10px;font:700 17px/1.4 system-ui,sans-serif!important;color:var(--ink);margin:0 0 16px!important;min-width:0}
.detail-section-title>svg{width:38px;height:38px;padding:5px;flex-shrink:0;background:var(--terminal-slot);border:2px solid var(--terminal-edge);box-shadow:inset 2px 2px #0002,inset -2px -2px #ffffff50;shape-rendering:crispEdges}
.detail-section-title small{display:block;font:12px/1.6 system-ui,sans-serif;color:var(--terminal-muted);margin-top:2px}
.detail-section-index{margin-left:auto;color:var(--terminal-muted);font:12px/1 monospace;letter-spacing:2px;border-bottom:2px solid var(--terminal-edge);padding-bottom:4px}
.detail-equipment{padding:18px;background:var(--terminal-panel);border:2px solid var(--terminal-edge);box-shadow:inset 2px 2px #ffffff30,inset -2px -2px #0001}
#detail-content .resource-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
#detail-content .resource-grid>div{background:var(--terminal-slot);padding:12px;border:2px solid var(--terminal-edge);box-shadow:inset 2px 2px #0002,inset -2px -2px #ffffff30;min-width:0}
#detail-content .meter-label{font-size:14px;gap:6px}#detail-content .metric-foot{font:13px/1.6 system-ui,sans-serif;white-space:normal;overflow-wrap:anywhere}
#detail .detail-table{grid-template-columns:repeat(3,minmax(0,1fr));padding:0;border:0;background:transparent;gap:0 18px;margin-top:18px}
#detail .detail-item{padding:10px 0;background:transparent;box-shadow:none;border-bottom:1px solid var(--line);min-width:0}
#detail .detail-item small{font:12px/1.5 system-ui,sans-serif;color:var(--terminal-muted);margin-bottom:4px}
#detail .detail-item span{font:14px/1.6 system-ui,sans-serif;font-variant-numeric:tabular-nums;color:var(--ink);overflow-wrap:anywhere}
#detail #network-history{margin-top:18px;border:2px solid var(--terminal-edge);padding:18px;background:var(--terminal-panel);--network-paper:var(--terminal-slot);--network-ink:var(--ink);--network-line:var(--terminal-edge)}
#detail .network-history-head{align-items:flex-start}#detail .network-history-head .detail-section-title{flex:1;min-width:230px}#detail .network-ranges{gap:8px}
#detail :is(.network-ranges button,#network-task,#network-tcp-day,[data-network-retry]){min-height:38px;border-radius:0;border:2px solid var(--terminal-edge);box-shadow:inset 1px 1px #ffffff50,inset -1px -1px #0002;font-size:14px}
#detail .network-ranges button[aria-pressed=true]{background:#7b3e44;border-color:#63343b;color:#fff6e1;box-shadow:inset 2px 2px #0002,inset -2px -2px #ffffff30}
[data-appearance=dark] #detail .network-ranges button[aria-pressed=true]{background:#64517f;border-color:#a48abf}
#detail .network-task-filter{margin:0 0 10px;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
#detail .network-explainer{font-size:12px!important;opacity:1;color:var(--terminal-muted)!important}
.network-chart-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
#detail .network-chart{margin:10px 0 0;padding:14px 10px 8px;border-radius:0;border:2px solid var(--terminal-edge);box-shadow:inset 2px 2px #0002}
#detail .network-chart h4{padding:0 4px 8px;font-size:15px;border-bottom:1px solid var(--line);margin-bottom:8px}
#detail .network-chart svg{min-height:0}#detail .chart-grid{opacity:.55}
#detail .tcp-payload-history{margin-top:20px;padding-top:20px;border-top:3px double var(--terminal-edge)}
#detail .tcp-carrier-row{display:grid;grid-template-columns:180px minmax(0,1fr);align-items:center;gap:16px;padding:12px;background:var(--terminal-slot);border:2px solid var(--terminal-edge);box-shadow:inset 2px 2px #0002;margin:10px 0}
#detail .tcp-carrier-heading{margin:0;display:flex;flex-direction:column;align-items:flex-start;gap:3px}#detail .tcp-carrier-heading strong{display:flex;align-items:center;gap:6px;font-size:14px}#detail .tcp-carrier-heading>span{font-size:12px;color:var(--terminal-muted);padding-left:28px}.tcp-repeater{width:22px;height:22px;shape-rendering:crispEdges}
#detail .tcp-hour-grid{gap:4px}#detail .tcp-hour-grid i{height:26px;border:1px solid var(--terminal-edge);box-shadow:inset 1px 2px #ffffff40,inset -1px -3px #0003}
#detail .tcp-hour-label{font-size:12px;color:var(--terminal-muted)}#detail>.detail-note{font:12px/1.5 system-ui,sans-serif;border:0;margin:12px 0 0;padding:0;color:var(--terminal-muted)}
@media(max-width:850px){.network-chart-grid{grid-template-columns:minmax(0,1fr)}#detail-content .resource-grid{grid-template-columns:repeat(2,minmax(0,1fr))}#detail .detail-table{grid-template-columns:repeat(2,minmax(0,1fr))}#detail .tcp-carrier-row{grid-template-columns:minmax(0,1fr);gap:8px}#detail .tcp-carrier-heading{flex-direction:row;align-items:center;justify-content:space-between}#detail .tcp-carrier-heading>span{padding:0}}
@media(max-width:540px){#detail{width:calc(100vw - 20px);padding:12px;scrollbar-gutter:auto}#detail>.dialog-heading{margin:-8px -8px 12px;padding:12px}#detail .dialog-heading h2{font-size:19px}.detail-equipment,#detail #network-history{padding:12px}.detail-section-title{font-size:16px!important}#detail .detail-table{gap:0 12px}#detail-content .resource-grid{gap:8px}#detail-content .resource-grid>div{padding:8px}#detail .detail-item span{font-size:14px}#detail .detail-cpu{grid-column:1/-1}#detail .network-history-head{gap:0}#detail .network-ranges{margin-bottom:12px}#detail .network-chart{padding:12px 2px 6px}#detail .tcp-carrier-row{padding:8px}#detail .tcp-hour-grid{gap:2px}#detail .tcp-hour-grid i{height:22px}}

#detail .chart-hit{fill-opacity:0;pointer-events:all}#detail .chart-hit:hover{fill-opacity:1}#detail .metric-foot .capacity-line{display:flex;justify-content:space-between;gap:5px;flex-wrap:wrap}#detail #close-detail{font-family:system-ui,sans-serif;font-size:26px;line-height:1;padding:0;text-shadow:none}
#detail .metric-foot>span{display:block}

#detail .snapshot-notice{font:13px/1.65 system-ui,sans-serif;padding:10px 12px;border-left:3px solid #b78534;background:var(--terminal-slot);color:var(--terminal-muted);margin:0 0 14px}.node-card.offline .resource-miner *,.detail-equipment.is-snapshot .resource-miner *,.node-card.offline .workshop-gear,.detail-equipment.is-snapshot .workshop-gear{animation-play-state:paused!important}