/* AI savings lens (js/views/savings.js): department rows with range bars, capability tables, integration evidence. */

.sv-links { margin: .8rem 0 1.2rem; display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.sv-sec, .sv-dept { margin-top: 2.6rem; scroll-margin-top: calc(var(--topbar-h) + 16px); }
.sv-h3 { margin: 1.6rem 0 .6rem; font-size: 1rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 600; }

.sv-rows { display: grid; gap: 4px; margin-top: 1rem; }
.sv-row { display: grid; grid-template-columns: 15rem minmax(8rem, 1fr) 10rem 11rem 6.5rem 7rem; gap: 1rem; align-items: center;
  padding: .55rem .7rem; border-radius: 10px; color: var(--fg); text-decoration: none; }
.sv-row:hover, .sv-row:focus-visible { background: color-mix(in srgb, var(--accent) 9%, transparent); }
.sv-row .n { font-weight: 500; }
.sv-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: .6rem; background: var(--dc, var(--accent)); box-shadow: 0 0 8px var(--dc, transparent); }
.sv-dept { padding-left: 1.1rem; border-left: 3px solid color-mix(in srgb, var(--dc, var(--line)) 70%, transparent); }
.sv-dept .sechead .eyebrow { color: var(--dc, var(--accent2)); }
.sv-today { margin: .4rem 0 1rem; max-width: 75ch; }
.sv-today strong { color: var(--dc, var(--fg)); }
.sv-row .v { text-align: right; }
.sv-row .v small, .sv-mini small { color: var(--muted); font-weight: 400; }
.sv-row .p, .sv-row .w { color: var(--muted); font-size: .9em; }
.sv-row .p { text-align: right; }
.sv-note { color: var(--muted); font-size: .9em; font-style: italic; }
.sv-track { position: relative; height: 14px; }
.sv-track i { position: absolute; top: 0; height: 100%; border-radius: 0 4px 4px 0; }
.sv-track .b { left: 0; background: var(--accent); }
.sv-track .r { background: color-mix(in srgb, var(--accent) 38%, transparent); border-left: 2px solid var(--bg); }

.sv-tablewrap { overflow-x: auto; }
.sv-table { width: 100%; border-collapse: collapse; font-size: .92em; }
.sv-table th { text-align: left; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 600;
  padding: .5rem .6rem; border-bottom: 1px solid var(--line); white-space: nowrap; }
.sv-table td { padding: .7rem .6rem; border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent); vertical-align: top; }
.sv-table .r { text-align: right; white-space: nowrap; }
.sv-table .strong { font-weight: 600; }
.sv-table .cn { font-weight: 600; }
.sv-table .cn a { color: var(--fg); }
.sv-table .cn a:hover { color: var(--accent2); }
.sv-table .cp { color: var(--fg); margin-top: .2rem; max-width: 44ch; }
.sv-table .cw, .sv-table .cl { color: var(--muted); font-size: .9em; margin-top: .25rem; max-width: 44ch; }
.sv-gap { margin: .9rem 0 0; color: var(--muted); }
.sv-gap strong { color: var(--fg); font-weight: 600; }
.sv-why { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; margin-top: 1.2rem; }
.sv-why p { margin: .3rem 0 0; }
.sv-why > div { padding-left: .9rem; border-left: 2px solid var(--line); }

.sv-ev { grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr)); gap: 14px; margin-top: 1rem; }
.sv-evcard p { margin: .5rem 0 0; }
.sv-ba { display: flex; align-items: baseline; gap: .8rem; margin-top: .6rem; font-size: 2.2rem; font-weight: 600; letter-spacing: -0.02em; }
.sv-ba .was { color: var(--warm, var(--muted)); text-decoration: line-through; text-decoration-thickness: 2px; opacity: .85; }
.sv-ba .arr { color: var(--muted); font-weight: 300; }
.sv-ba .now { color: var(--accent2); }
.sv-bal { color: var(--muted); }

.sv-formula { margin-top: 1rem; line-height: 2.2; }
.sv-list { margin: .6rem 0 0; padding-left: 1.2rem; display: grid; gap: .45rem; }

.sv-mini { display: grid; gap: .25rem; margin: 1rem 0 0; padding: 14px 18px; text-decoration: none; color: var(--fg);
  border-color: color-mix(in srgb, var(--accent2) 35%, var(--line)); }
.sv-mini .v { font-size: 1.7rem; font-weight: 600; letter-spacing: -0.01em; }
.sv-mini .l { color: var(--muted); font-size: .9em; }
.sv-mini:hover { border-color: var(--accent2); }

@media (max-width: 1000px) {
  .sv-row { grid-template-columns: 1fr auto; }
  .sv-row .sv-track, .sv-row .sv-note { grid-column: 1 / -1; }
  .sv-row .p, .sv-row .c, .sv-row .w { display: none; }
  .sv-why { grid-template-columns: 1fr; }
}