/* Clickable signal tiles, change-loop steps, the Data Room "Signal & change" view, and the breakdown modal. */
.signal-tile, .change-process-node, .signal-step { font:inherit; color:inherit; text-align:left; cursor:pointer; }
.signal-tile { --tone:var(--cyan); position:relative; display:block; width:100%; transition:border-color .15s, transform .15s, background .15s; }
.signal-tile:hover, .signal-tile:focus-visible { border-color:color-mix(in srgb, var(--tone) 55%, var(--line)); transform:translateY(-2px); }
.signal-tile .metric-value { color:var(--ink-strong); }
.signal-more { position:absolute; top:16px; right:16px; color:var(--tone); font:500 9px var(--font-mono); opacity:0; transition:opacity .15s; }
.signal-tile:hover .signal-more, .signal-tile:focus-visible .signal-more { opacity:1; }
.change-process-node:focus-visible { outline:2px solid var(--process-color); outline-offset:3px; }

.tone-cyan { --tone:var(--cyan); }.tone-blue { --tone:var(--blue); }.tone-violet { --tone:var(--violet); }.tone-gold { --tone:var(--gold); }.tone-coral { --tone:var(--coral); }.tone-green { --tone:var(--green); }.tone-white { --tone:var(--ink); }

/* Data Room view */
.signal-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(170px, 1fr)); gap:10px; }
.signal-grid .metric { min-height:0; }
.signal-loop { display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); gap:8px; counter-reset:step; }
.signal-step { --tone:var(--cyan); display:grid; align-content:start; gap:8px; min-height:132px; padding:12px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface-card-2); transition:border-color .15s, background .15s; }
.signal-step:hover, .signal-step:focus-visible { border-color:color-mix(in srgb, var(--tone) 60%, var(--line)); background:color-mix(in srgb, var(--tone) 8%, transparent); }
.signal-step-top { display:flex; justify-content:space-between; align-items:center; color:var(--tone); font:600 9px var(--font-mono); }
.signal-step-top i { width:8px; height:8px; border-radius:50%; border:1px solid var(--tone); }
.signal-step.is-on .signal-step-top i { background:var(--tone); box-shadow:0 0 10px var(--tone); }
.signal-step strong { color:var(--ink-strong); font:600 16px var(--font-display); }
.signal-step small { color:var(--muted); font-size:11px; line-height:1.45; }
@media (max-width:900px) { .signal-loop { grid-template-columns:repeat(4, minmax(0, 1fr)); } }
@media (max-width:560px) { .signal-loop { grid-template-columns:repeat(2, minmax(0, 1fr)); } }

/* Modal */
body.sig-open { overflow:hidden; }
.sig-backdrop { position:fixed; inset:0; z-index:90; display:grid; place-items:center; padding:18px; background:rgba(1,8,13,.76); backdrop-filter:blur(8px); animation:sig-fade .15s ease-out; }
.sig-modal { --tone:var(--cyan); width:min(640px, 100%); max-height:calc(100vh - 36px); overflow:auto; padding:24px; background:var(--modal-bg); border:1px solid var(--line-strong); border-top:3px solid var(--tone); border-radius:20px; box-shadow:0 30px 100px rgba(0,0,0,.5); animation:sig-rise .2s ease-out; }
.sig-head { display:flex; justify-content:space-between; align-items:start; gap:15px; margin-bottom:14px; }
.sig-head .eyebrow { color:var(--tone); }
.sig-head h2 { margin:6px 0 0; font:600 clamp(26px, 4vw, 34px) var(--font-display); letter-spacing:-.02em; color:var(--ink-strong); }
.sig-head p { margin:4px 0 0; color:var(--muted); font-size:14px; }
.sig-head .close-btn { flex:none; font-size:20px; line-height:1; cursor:pointer; }
.sig-value { display:flex; align-items:baseline; gap:10px; margin:0 0 6px; color:var(--tone); font:600 44px/1 var(--font-display); letter-spacing:-.02em; }
.sig-value small { color:var(--muted); font:500 10px var(--font-mono); letter-spacing:0; }
.sig-lede { margin:0 0 16px; color:var(--ink); font-size:14px; line-height:1.6; }
.sig-meta { display:grid; gap:0; margin:0 0 16px; border-top:1px solid var(--line); }
.sig-meta div { display:grid; grid-template-columns:130px 1fr; gap:12px; padding:9px 0; border-bottom:1px solid var(--line); }
.sig-meta dt { color:var(--dim); font:500 10px var(--font-mono); text-transform:uppercase; letter-spacing:.08em; padding-top:2px; }
.sig-meta dd { margin:0; color:var(--ink); font-size:13px; line-height:1.5; }
.sig-cols { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.sig-block { margin:0 0 16px; }
.sig-block h4 { margin:0 0 7px; color:var(--muted); font:500 10px var(--font-mono); text-transform:uppercase; letter-spacing:.1em; }
.sig-block ul { margin:0; padding-left:17px; color:var(--ink); font-size:13px; line-height:1.55; }
.sig-block li::marker { color:var(--tone); }
.sig-note { margin:8px 0 0; color:var(--muted); font-size:12px; line-height:1.5; }
.sig-ladder { display:grid; grid-template-columns:repeat(4, 1fr); gap:4px; margin:0; padding:0; list-style:none; }
.sig-ladder li { padding:8px 6px; border:1px solid var(--line); border-radius:8px; color:var(--dim); font:500 10px var(--font-mono); text-align:center; }
.sig-ladder li.is-reached { color:var(--tone); border-color:color-mix(in srgb, var(--tone) 50%, var(--line)); background:color-mix(in srgb, var(--tone) 8%, transparent); }
.sig-here { display:grid; gap:3px; margin:0 0 16px; padding:11px 13px; border-radius:10px; border:1px dashed var(--line-strong); }
.sig-here.is-on { border-style:solid; border-color:color-mix(in srgb, var(--tone) 50%, var(--line)); background:color-mix(in srgb, var(--tone) 7%, transparent); }
.sig-here span { color:var(--tone); font:500 9px var(--font-mono); text-transform:uppercase; letter-spacing:.1em; }
.sig-here strong { color:var(--ink); font-size:13px; font-weight:500; }
.sig-bars { display:grid; gap:7px; }
.sig-bar { display:grid; grid-template-columns:minmax(0, 1.2fr) minmax(0, 1fr) auto; gap:10px; align-items:center; font-size:12px; }
.sig-bar span { min-width:0; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sig-bar small { display:block; color:var(--dim); font-size:10px; }
.sig-bar b { height:8px; border-radius:4px; background:linear-gradient(90deg, var(--tone) var(--w), var(--surface-card-2) var(--w)); }
.sig-bar em { color:var(--muted); font:500 11px var(--font-mono); font-style:normal; }
.sig-actions { display:flex; flex-wrap:wrap; gap:8px; margin:4px 0 0; }
.sig-stepnav { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:18px; padding-top:12px; border-top:1px solid var(--line); }
.sig-dots { display:flex; gap:5px; }
.sig-dots i { width:6px; height:6px; border-radius:50%; background:var(--line-strong); }
.sig-dots i.is-current { background:var(--tone); }
@keyframes sig-fade { from { opacity:0; } }
@keyframes sig-rise { from { opacity:0; transform:translateY(10px); } }
@media (max-width:560px) { .sig-modal { padding:18px; }.sig-cols { grid-template-columns:1fr; }.sig-meta div { grid-template-columns:1fr; gap:3px; }.sig-ladder { grid-template-columns:1fr 1fr; } }
@media (prefers-reduced-motion:reduce) { .sig-backdrop, .sig-modal { animation:none; } }

/* Live values: sparklines, weekly trend, linked records, steward notes */
.signal-spark { display:block; width:100%; height:24px; margin:8px 0 2px; overflow:visible; }
.signal-spark polyline { fill:none; stroke:var(--tone); stroke-width:2; stroke-linejoin:round; stroke-linecap:round; vector-effect:non-scaling-stroke; }
.signal-spark circle { fill:var(--tone); stroke:var(--modal-bg); stroke-width:2; vector-effect:non-scaling-stroke; }
.signal-step em { color:var(--tone); font:500 9px var(--font-mono); font-style:normal; text-transform:uppercase; letter-spacing:.08em; }
.sig-trend svg { display:block; width:100%; height:96px; }
.sig-trend rect { fill:var(--tone); }
.sig-trend rect:hover { fill:var(--ink-strong); }
.sig-trend-axis { display:flex; justify-content:space-between; margin-top:6px; padding-top:6px; border-top:1px solid var(--line); color:var(--dim); font:500 10px var(--font-mono); }
.sig-records { display:grid; gap:6px; }
.sig-record { display:grid; gap:2px; width:100%; padding:9px 12px; color:var(--ink); text-align:left; text-decoration:none; font:inherit; background:var(--surface-card-2); border:1px solid var(--line); border-radius:10px; cursor:pointer; }
.sig-record:hover, .sig-record:focus-visible { border-color:color-mix(in srgb, var(--tone) 55%, var(--line)); }
.sig-record.is-static { cursor:default; }
.sig-record.is-static:hover { border-color:var(--line); }
.sig-record strong { color:var(--ink-strong); font-size:13px; font-weight:600; }
.sig-record small { color:var(--muted); font-size:11px; }
.sig-quote { margin:0 0 8px; padding:10px 13px; border-left:3px solid var(--tone); background:var(--surface-card-2); border-radius:0 10px 10px 0; }
.sig-quote p { margin:0 0 5px; color:var(--ink); font-size:13px; line-height:1.55; }
.sig-quote footer { color:var(--dim); font:500 10px var(--font-mono); }
.sig-note-form textarea, .sig-queue textarea { width:100%; padding:9px 11px; color:var(--ink); background:var(--surface-input); border:1px solid var(--line-strong); border-radius:9px; font:inherit; font-size:13px; resize:vertical; }
.sig-note-form .sig-actions { margin-top:8px; }
.sig-queue { display:grid; gap:10px; }
.sig-queue-card { display:grid; gap:8px; padding:12px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface-card-2); }
.sig-queue-card p { margin:0; font-size:13px; }
.sig-queue-head { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.sig-queue-head small { color:var(--muted); font-size:11px; flex:1; }