/* "How sharp are we" (PG-95). Tokens from tickets.css (mirrors app.html :root). */
.sharp-workspace { overflow:auto; }
.segmented { display:inline-flex; padding:3px; gap:2px; border:1px solid var(--line2); border-radius:9px; background:var(--panel); }
.seg { border:0; background:transparent; color:var(--dim); font-size:12px; font-weight:600; padding:6px 11px; border-radius:6px; min-height:30px; }
.seg:hover { color:var(--ivory); }
.seg[aria-pressed="true"] { background:var(--chip); color:var(--ivory); box-shadow:inset 0 0 0 1px var(--line2); }
.sharp-tiles { display:grid; grid-template-columns:1.3fr repeat(5,minmax(0,1fr)); border:1px solid var(--line2); border-radius:12px; background:linear-gradient(110deg,#211c13 0%,var(--panel) 46%); padding:18px 0; flex:none; }
.tile { padding:0 20px; border-left:1px solid var(--line); min-width:0; }
.tile:first-child { border-left:0; padding-left:26px; }
.tile-label { font-size:12px; color:var(--dim); }
.tile-value { font-size:26px; font-weight:600; letter-spacing:-.6px; line-height:1.25; margin:8px 0 5px; }
.tile-hero .tile-value { font:600 40px/1.06 var(--serif); letter-spacing:-1.4px; margin-top:5px; }
.tile-unavailable { font:600 17px/1.3 var(--sans); color:var(--mute); letter-spacing:0; margin:13px 0 9px; }
.tile-cap { font-size:12px; color:var(--mute); line-height:1.4; }
.sharp-body { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(320px,1fr); gap:16px; margin-top:16px; flex:1; min-height:0; }
.sharp-panel { border:1px solid var(--line); border-radius:12px; background:var(--panel); padding:16px 18px; min-width:0; display:flex; flex-direction:column; min-height:0; }
.panel-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.panel-head h2 { font:600 17px/1.3 var(--serif); letter-spacing:-.01em; }
.panel-note { font-size:12px; color:var(--mute); line-height:1.5; margin-bottom:8px; }
.sharp-panel .report-scroll { border:0; background:transparent; border-radius:0; }
.sharp-panel .report-table th[scope="row"] { position:static; background:none; text-align:left; font-size:12.5px; color:var(--ivory); font-weight:600; border-bottom:1px solid rgba(149,141,123,.09); }
.rel-chart { flex:1; min-height:220px; }
.rel-svg { width:100%; max-width:440px; height:auto; display:block; margin:0 auto; }
/* tickets.css strokes every svg child; the chart sets its own. */
.rel-svg * { stroke:none; }
.rel-svg .grid { stroke:var(--line); stroke-width:1; }
.rel-svg .ref { stroke:var(--mute); stroke-width:1.5; stroke-dasharray:4 4; }
.rel-svg .tick, .rel-svg .axis { fill:var(--mute); font:12px var(--sans); }
.rel-svg .dot { fill:var(--pre); stroke:var(--panel); stroke-width:2; }
.rel-svg .hit { fill:transparent; }
.rel-svg .rel-dot:hover .dot, .rel-svg .rel-dot:focus .dot { fill:var(--ivory); }
.rel-svg .rel-dot:focus { outline:none; }
.rel-svg .rel-dot:focus-visible .dot { stroke:var(--pre); stroke-width:3; }
.rel-table { margin-top:8px; font-size:12px; color:var(--dim); }
.rel-table summary { cursor:pointer; padding:4px 0; }
.rel-table table { margin-top:6px; }
@media (max-width:1200px) { .sharp-tiles { grid-template-columns:repeat(3,minmax(0,1fr)); row-gap:18px; } .tile:nth-child(4) { border-left:0; padding-left:26px; } .sharp-body { grid-template-columns:1fr; } }
@media (max-width:640px) { .sharp-tiles { grid-template-columns:1fr 1fr; } .tile { border-left:0; padding:0 16px !important; } .tile-hero { grid-column:1 / -1; } }