/* Price Change Review — tool styles. Uses site tokens from src/styles/tokens.css.
   Class and id names are the contract with app.js; rename only together. */

.tool-intro { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--space-7); align-items: end; padding-block: var(--space-7) var(--space-5); }
.tool-intro h1 { font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem); margin-bottom: var(--space-4); }
.tool-intro .lead { font-size: var(--text-lg); color: var(--muted); max-width: 34rem; margin: 0; }
.intro-note { border-left: 3px solid var(--accent); padding: var(--space-2) 0 var(--space-2) var(--space-5); }
.intro-note > span { display: block; font-size: var(--text-xs); font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--muted); }
.intro-note p { font-size: var(--text-xl); line-height: 1.4; margin: var(--space-2) 0; }
.intro-note small { display: block; font-size: var(--text-sm); color: var(--muted); }

.guide-link { margin: 0; font-size: var(--text-md); }
.guide-link a { display: inline-flex; align-items: center; min-height: var(--tap); font-weight: 600; }

.examples { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; padding-block: var(--space-3) var(--space-6); }
.examples > span { font-size: var(--text-xs); font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--muted); margin-right: var(--space-3); }

.tool button {
  cursor: pointer; font: 500 var(--text-sm)/1.2 var(--font-body);
  min-height: var(--tap); padding: 0 var(--space-4);
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--ink);
  border-radius: var(--radius-sm); transition: background-color .15s ease;
}
.tool button:hover { background: var(--surface-muted); }
.tool button.selected, .tool button[aria-pressed="true"] { background: var(--primary); color: #fff; border-color: var(--primary); }
.tool button.primary { background: var(--primary); color: #fff; border-color: var(--primary); font-size: var(--text-md); font-weight: 600; padding: 0 var(--space-5); margin-top: var(--space-3); }
.tool button.primary:hover { background: var(--primary-hover); }
.tool button:disabled { opacity: .5; cursor: not-allowed; }

.layout { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: var(--space-6); align-items: start; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-5); }
.inputs { position: sticky; top: var(--space-4); }

.section-title { display: flex; align-items: center; gap: var(--space-3); }
.section-title h2, .scenario h2 { font-size: var(--text-xl); }
.step { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--accent-soft); font: 700 var(--text-xs) var(--font-display); }

.tool .muted { font-size: var(--text-sm); color: var(--muted); margin: var(--space-2) 0 var(--space-4); }
.tool small, .tool .small { display: block; font-size: var(--text-sm); line-height: 1.55; color: var(--muted); }

.tool label { display: block; font-size: var(--text-sm); font-weight: 600; line-height: 1.4; margin: var(--space-4) 0 var(--space-1); }
.tool input[type=number] {
  display: block; width: 100%; min-height: var(--tap); margin-top: var(--space-1);
  padding: var(--space-2) var(--space-3);
  font: 500 var(--text-lg)/1.2 var(--font-body); color: var(--ink); font-variant-numeric: tabular-nums;
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
}
.tool input[type=number]:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
.tool input::placeholder { color: var(--muted); font-size: var(--text-sm); }
.pair, .three { display: grid; gap: var(--space-3); }
.pair { grid-template-columns: 1fr 1fr; }
.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.three input[type=number] { font-size: var(--text-md); padding-inline: var(--space-2); }
.pair label, .three label { align-self: end; }

.tool details { margin: var(--space-4) 0; }
.tool summary { display: flex; align-items: center; min-height: var(--tap); cursor: pointer; font-size: var(--text-sm); font-weight: 600; color: var(--primary); }
.tool details p { font-size: var(--text-sm); }

.baseline { background: var(--surface-muted); border-radius: var(--radius-sm); padding: var(--space-4); font-size: var(--text-sm); line-height: 2; margin: var(--space-5) 0 var(--space-6); font-variant-numeric: tabular-nums; }
.baseline strong { float: right; }

.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); margin: var(--space-4) 0 var(--space-5); }
.card { border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-5) var(--space-4); background: var(--surface); }
.card .tag { display: block; font-size: var(--text-xs); font-weight: 700; letter-spacing: var(--tracking-label); color: var(--muted); }
.price { font: 700 var(--text-2xl)/1.2 var(--font-display); margin: var(--space-2) 0 var(--space-1); }
.rule { border-top: 1px solid var(--line); margin-top: var(--space-4); padding-top: var(--space-4); }
.big { font: 700 2rem/1.1 var(--font-display); letter-spacing: -0.02em; }
.card p { font-size: var(--text-sm); margin: var(--space-2) 0; }
.card .alert, .alert { color: var(--alert); font-weight: 700; }

.scenario { margin: var(--space-5) 0; }
.scenario-heading { display: flex; justify-content: space-between; gap: var(--space-4); align-items: center; }
.tool .switch { display: inline-flex; gap: var(--space-2); align-items: center; min-height: var(--tap); margin: 0; font-size: var(--text-sm); white-space: nowrap; cursor: pointer; }
.tool input[type=checkbox] { width: 22px; height: 22px; accent-color: var(--primary); margin: 0; }
#unknown { font-size: var(--text-md); color: var(--muted); margin-bottom: 0; }

.range-inputs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); margin: var(--space-4) 0; }
.tool fieldset { min-width: 0; margin: 0; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: var(--space-3); }
.tool legend { font-size: var(--text-sm); font-weight: 700; padding: 0 var(--space-1); }
.range-inputs label { margin: var(--space-1) 0; font-size: var(--text-xs); }
.range-inputs input[type=number] { font-size: var(--text-md); }

.table-scroll { overflow-x: auto; }
.tool table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); margin: var(--space-4) 0 var(--space-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.tool th { text-align: right; font-size: var(--text-xs); font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--muted); padding: var(--space-2); border-bottom: 1px solid var(--line); }
.tool td { text-align: right; padding: var(--space-3) var(--space-2); border-bottom: 1px solid var(--line); }
.tool th:first-child, .tool td:first-child { text-align: left; }

.verdict { padding: var(--space-3) 0; border-bottom: 1px solid var(--line); font-size: var(--text-sm); }
.verdict strong, .verdict span { display: block; }
.verdict span { color: var(--muted); margin-top: var(--space-1); }
.verdict.falls strong, .verdict.stock strong, .verdict.nonpositive strong, .verdict.paused strong { color: var(--alert); }
.verdict.holds strong { color: var(--primary); }

.insight { background: var(--accent-soft); border-left: 3px solid var(--primary); padding: var(--space-4); font-size: var(--text-sm); margin-top: var(--space-4); }

.next { background: var(--surface-muted); }
.next .eyebrow { margin-bottom: var(--space-2); }
.next h2 { font-size: var(--text-xl); margin-bottom: var(--space-3); }
.next p, .next li { font-size: var(--text-md); }
.next ol { padding-left: var(--space-5); }
.next li { padding: var(--space-1) 0; }
.save-note { margin-top: var(--space-2); }

.error { color: var(--alert); font-size: var(--text-sm); font-weight: 500; margin: var(--space-3) 0 0; }
.error:empty { display: none; }

.tool-footer { border-top: 1px solid var(--line); margin-top: var(--space-7); padding-top: var(--space-5); display: flex; justify-content: space-between; gap: var(--space-6); font-size: var(--text-sm); color: var(--muted); }
.tool-footer p { max-width: 42rem; margin: 0; }
.tool-footer strong { color: var(--ink); font-size: var(--text-md); }

[hidden] { display: none !important; }

@media (max-width: 1080px) {
  .layout { grid-template-columns: 320px minmax(0, 1fr); gap: var(--space-5); }
  .cards { gap: var(--space-2); }
  .card { padding: var(--space-4) var(--space-3); }
  .big { font-size: 1.625rem; }
  .scenario-heading { display: block; }
  .range-inputs { grid-template-columns: 1fr; }
  .range-inputs .pair { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 820px) {
  .tool-intro { grid-template-columns: 1fr; gap: var(--space-4); padding-top: var(--space-6); }
  .intro-note { display: none; }
  .layout { display: block; }
  .inputs { position: static; margin-bottom: var(--space-6); }
  .tool-footer { display: block; }
  .tool-footer > div { margin-top: var(--space-4); }
}
@media (max-width: 600px) {
  .examples > span { width: 100%; margin-bottom: var(--space-1); }
  .examples button { flex: 1 1 calc(50% - var(--space-2)); }
  .panel { padding: var(--space-4); }
  .cards { grid-template-columns: 1fr; }
  .card { display: grid; grid-template-columns: 110px minmax(0, 1fr); column-gap: var(--space-4); padding: var(--space-4); }
  .card > .tag, .card > .price, .card > small { grid-column: 1; }
  .card > .rule { grid-column: 2; grid-row: 1 / span 3; margin: 0; padding: 0 0 0 var(--space-4); border-top: 0; border-left: 1px solid var(--line); }
  .price { font-size: var(--text-xl); }
  .table-scroll table { white-space: normal; }
  .table-scroll thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .table-scroll tbody { display: grid; gap: var(--space-3); }
  .table-scroll tr { display: block; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); }
  .table-scroll td { display: flex; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) 0; border: 0; }
  .table-scroll td:first-child { font-weight: 700; }
  .table-scroll td::before { content: attr(data-label); font-weight: 400; color: var(--muted); text-align: left; flex-shrink: 0; }
}

@media print {
  .examples, .guide-link, .switch, #download, .save-note, .tool details:not([open]) { display: none !important; }
  .layout { display: block; }
  .inputs { position: static; }
  .panel, .card { break-inside: avoid; }
  .tool-intro { padding-block: 0 var(--space-4); }
  .tool-intro h1 { font-size: 2rem; }
}

/* 1.1.0 additions */
.card .whole { margin-top: var(--space-2); color: var(--ink); }
.quick { display: none; margin: var(--space-4) 0 0; padding: var(--space-3) var(--space-4); background: var(--accent-soft); border-radius: var(--radius-sm); font-size: var(--text-sm); line-height: 1.7; font-variant-numeric: tabular-nums; }
.quick:empty { display: none !important; }
.quick a { display: inline-flex; min-height: var(--tap); align-items: center; font-weight: 600; }
.save-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.save-actions #print { margin-top: var(--space-3); }
.print-summary { display: none; }
@media (max-width: 820px) { .quick { display: block; } }
@media print {
  .inputs, .scenario, .next, .tool-footer, .site-footer { display: none !important; }
  .print-summary { display: block; white-space: pre-wrap; font: 10.5pt/1.5 ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; margin: 0 var(--gutter); color: #000; }
  .cards { grid-template-columns: repeat(3, 1fr); }
}
.tool-links { list-style: none; margin: var(--space-2) 0 0; padding: 0; }
.tool-links a { display: inline-flex; align-items: center; min-height: var(--tap); font-weight: 600; }
.tool-footer .small { margin: 0; }