@import url("../_shared/TOKENS.css");


/* CM2-owned interaction surface. The shared token file remains authoritative. */
.cache-visual { width: 100%; }
.cache-caption, .cache-print { margin: 12px 0 0; color: var(--muted); font-size: 18px; line-height: 1.25; }
.cache-explorer { display: grid; grid-template-columns: auto minmax(180px, 1fr) auto auto auto; gap: 10px; align-items: center; margin-top: 16px; padding: 14px; border: 1px solid var(--line); background: rgba(255,255,255,.58); }
.cache-explorer label, .cache-explorer select, .cache-explorer button { font-size: 18px; }
.cache-explorer label { color: var(--blue); font-weight: 700; }
.cache-explorer select, .cache-explorer button { min-height: 40px; padding: 7px 10px; }
.cache-status { grid-column: 1 / -1; margin: 0; padding: 8px 10px; border-left: 4px solid var(--caution); background: #f2e4da; font-size: 24px; }
.cache-result-row { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
.cache-result { padding: 6px 10px; border: 1px solid var(--line); font-family: var(--sans); font-size: 24px; background: #f4f4ee; }
.cache-result.reused { border-color: var(--blue); background: var(--pale); }
.cache-result.first-miss { border-color: var(--caution); background: #f2e4da; font-weight: 700; }
.cache-result.rebuild { border-color: var(--blue); background: var(--pale); }
.sequence [data-cache-step].changed { color: var(--caution); border-color: var(--caution); background: #f2e4da; }
.anchor-wrap { display: flex; flex-direction: column; gap: 10px; min-height: 0; width: 100%; }
.anchor-visual { display: block; width: 100%; height: auto; max-height: 410px; min-height: 0; }
.anchor-visual text { font-family: var(--sans); }
.anchor-visual .svg-kicker { font-size: 21px; font-weight: 700; letter-spacing: .11em; fill: var(--blue); }
.anchor-visual .svg-title { font-size: 28px; font-weight: 600; fill: var(--ink); }
.anchor-visual .svg-copy { font-size: 20px; fill: var(--muted); }
.anchor-visual .svg-label { font-size: 21px; font-weight: 700; letter-spacing: .02em; fill: var(--ink); }
.anchor-visual .svg-label.danger { fill: var(--danger); }
.anchor-visual .svg-arrow { fill: none; stroke: var(--blue); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.anchor-visual .svg-arrow.healthy { stroke: var(--healthy); }
.anchor-visual .svg-arrow.caution { stroke: var(--caution); }
.anchor-visual .svg-arrow-label { font-size: 19px; font-weight: 700; fill: var(--blue); }
.anchor-visual .svg-arrow-label.healthy { fill: var(--healthy); }
.anchor-visual .svg-boundary-label { font-size: 18px; fill: var(--muted); }
.anchor-visual .svg-boundary-label.caution { fill: var(--caution); }
.anchor-visual .svg-boundary-label.danger { fill: var(--danger); }
.anchor-visual .svg-causal, .anchor-visual .svg-cache-step, .anchor-visual .svg-identity-arrow { transition: opacity .18s ease; }
.anchor-visual .svg-causal.is-muted, .anchor-visual .svg-cache-step.is-muted, .anchor-visual .svg-identity-arrow.is-muted { opacity: .15; }
.anchor-controls { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
.anchor-controls button { font-size: 17px; padding: 6px 12px; border-color: var(--blue); }
.anchor-controls button[aria-pressed="true"] { background: var(--pale); border-color: var(--blue); }
.anchor-status { font-size: 18px; color: var(--muted); margin-left: 6px; }
.svg-workstation { fill: rgba(115,123,131,.08); stroke: var(--inactive); stroke-width: 2; }
.svg-context-boundary { fill: rgba(184,121,17,.09); stroke: var(--caution); stroke-width: 4; stroke-dasharray: 10 7; }
.svg-input-card, .svg-builder-card, .svg-identity-card { fill: rgba(255,255,255,.58); stroke: var(--blue); stroke-width: 2; }
.svg-filter-card { fill: rgba(19,127,120,.10); stroke: var(--healthy); stroke-width: 2; }
.svg-excluded-card { fill: rgba(184,121,17,.12); stroke: var(--caution); stroke-width: 2; }
.svg-outside-card { fill: rgba(167,53,52,.08); stroke: var(--danger); stroke-width: 2; stroke-dasharray: 6 5; }
.svg-digest-card { fill: rgba(19,127,120,.12); stroke: var(--healthy); stroke-width: 3; }
.svg-registry-card { fill: rgba(24,99,138,.08); stroke: var(--blue); stroke-width: 3; }
.svg-callout.caution { fill: rgba(184,121,17,.12); stroke: var(--caution); stroke-width: 2; }
.svg-cache-card { fill: rgba(255,255,255,.58); stroke: var(--blue); stroke-width: 2; transition: fill .18s ease, stroke .18s ease, opacity .18s ease; }
.svg-cache-step.is-reused rect { fill: rgba(19,127,120,.14); stroke: var(--healthy); stroke-width: 3; }
.svg-cache-step.is-first rect { fill: rgba(184,121,17,.18); stroke: var(--caution); stroke-width: 5; }
.svg-cache-step.is-dependent rect { fill: rgba(24,99,138,.08); stroke: var(--blue); stroke-width: 3; }
.svg-cache-step.is-first .svg-boundary-label { fill: var(--caution); font-weight: 700; }
.svg-cache-step.is-reused .svg-boundary-label { fill: var(--healthy); }
.mono { font-family: var(--mono) !important; font-size: 25px !important; }
.context-visual .svg-label { font-size: 18px; }
.cache-visual .svg-kicker { font-size: 22px; }
.cache-visual .svg-title { font-size: 25px; }
.cache-visual .svg-copy, .cache-visual .svg-boundary-label { font-size: 24px; }
.identity-visual .svg-title { font-size: 25px; }
.narrow-only { display: none; }
.narrow-summary { border-top: 2px solid var(--line); border-bottom: 2px solid var(--line); padding: 10px 0; gap: 8px; }
.narrow-step { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: 7px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.narrow-step:last-child { border-bottom: 0; }
.narrow-step b { font-size: 19px; color: var(--blue); }
.narrow-step span { font-size: 19px; color: var(--ink); }
.narrow-step small { grid-column: 1 / -1; font-size: 17px; color: var(--muted); }
.narrow-callout { padding: 10px 12px; border-left: 4px solid var(--caution); background: var(--paper); font-size: 18px; color: var(--ink); }
@media (max-width: 700px) { .cache-explorer { grid-template-columns: 1fr 1fr; } .cache-explorer label { grid-column: 1 / -1; } .cache-explorer select { grid-column: 1 / -1; } .cache-explorer button { width: 100%; } }
@media (max-width: 700px) { .flow { gap: 8px; justify-content: flex-start; } .flow .node { min-width: 30%; max-width: 45%; flex: 0 1 30%; } .flow .arrow { flex: 0 0 auto; font-size: 22px; } }
@media screen and (min-width: 1600px) { .anchor-visual { max-height: 500px; } .anchor-visual .svg-copy { font-size: 22px; } .anchor-visual .svg-title { font-size: 31px; } }
@media screen and (min-width: 1600px) { .cache-visual .svg-kicker { font-size: 21px; } .cache-visual .svg-title { font-size: 23px; } .cache-visual .svg-copy, .cache-visual .svg-boundary-label { font-size: 22px; } }
@media screen and (min-width: 701px) and (max-width: 1300px) {
  .cache-anchor .anchor-visual { height: 280px; max-height: 280px; flex: 0 0 280px; }
  .cache-anchor .cache-caption { display: none; }
  .cache-anchor .cache-explorer { padding: 7px; gap: 6px; }
  .cache-anchor .cache-explorer select, .cache-anchor .cache-explorer button { min-height: 36px; padding: 5px 8px; }
  .cache-anchor .cache-status { font-size: 19px; padding: 4px 8px; }
}
@media screen and (max-width: 700px) {
  .anchor-visual { display: none; }
  .narrow-only { display: grid; }
  .context-anchor .anchor-controls, .identity-anchor .anchor-controls { display: none; }
  .anchor-controls { justify-content: flex-start; }
  .anchor-controls button { font-size: 15px; padding: 6px 8px; }
  .anchor-status { font-size: 15px; margin-left: 0; }
  .cache-explorer { margin-top: 8px; }
  .cache-status { font-size: 19px; }
  .cache-result { font-size: 18px; }
}
@media print {
  .cache-explorer, .anchor-controls { display: none !important; }
  .anchor-visual { max-height: 390px !important; }
  .anchor-visual .svg-causal, .anchor-visual .svg-cache-step, .anchor-visual .svg-identity-arrow { opacity: 1 !important; }
  .cache-anchor .cache-caption { display: none; }
  .cache-anchor .anchor-visual { height: 280px !important; max-height: 280px !important; flex: 0 0 280px; }
  .cache-print { margin: 0; font-size: 22px; }
}