/* The reform's Your deal, for one product (26 October 2026). Every colour is a var(--r-*) token from the
   shell; this file types no hex. The answer, the path and the lever are the lever kit's (lever.css); this sheet
   dresses what sits around them. Class prefix yd-. Nothing here moves: the kit's own motion is the page's. */

.yd-example{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:0;min-width:0}
.yd-chip{color:var(--r-muted);border:1px solid var(--r-rule);background:var(--r-surface);border-radius:999px;padding:2px 12px;max-width:100%}
.yd-muted{color:var(--r-muted)}
.yd-kit{display:flex;flex-direction:column;gap:12px;min-width:0}
.yd-kit .rl-profit{font-size:26px}
.yd-nowrap{white-space:nowrap}
.yd-link{display:inline-flex;align-items:center;min-height:44px;font-weight:700;color:var(--r-anchor)}

/* Buttons. */
.yd-button{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 20px;border:2px solid var(--r-anchor);border-radius:8px;background:var(--r-surface);color:var(--r-anchor);font:inherit;font-weight:700;text-decoration:none;cursor:pointer;box-sizing:border-box}
.yd-button:hover{background:var(--r-tint)}
.yd-primary{background:var(--r-anchor);color:var(--r-surface)}
.yd-primary:hover{background:var(--r-anchor-hover)}
.yd-wide{width:100%}

/* Sections. */
.yd-ways,.yd-gap,.yd-keep,.yd-limits,.yd-shared,.yd-pot,.yd-clears{display:flex;flex-direction:column;gap:12px;min-width:0}
.yd-scroll{overflow-x:auto;min-width:0}
.yd-table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.yd-table caption{text-align:left;color:var(--r-muted);padding:0 0 10px}
.yd-table th,.yd-table td{text-align:left;vertical-align:top;padding:10px 8px;border-top:1px solid var(--r-rule);font-weight:400}
.yd-table thead th{background:var(--r-tint);color:var(--r-muted);font-weight:500;border-top:0}
.yd-table .n{text-align:right}
.yd-table tbody th{font-weight:400}
.yd-sub{display:block;color:var(--r-muted);font-size:15px}
.yd-levers{display:block;margin-top:4px}
.yd-tag{display:inline-block;border:1px solid var(--r-anchor);color:var(--r-anchor);border-radius:4px;padding:0 6px;font-size:14px;font-weight:700}
.yd-verdict{font-weight:700}
.yd-verdict[data-holds="0"]{color:var(--r-breach)}
.yd-rate{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin-top:8px}
.yd-rate input[type=text]{min-height:44px;width:96px;box-sizing:border-box;border:1px solid var(--r-muted);border-radius:8px;padding:0 10px;font:inherit}

/* The gap and the two ways out. */
.yd-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0}
.yd-facts>div{background:var(--r-surface);border:1px solid var(--r-rule);border-radius:8px;padding:12px;min-width:0}
.yd-facts dt{color:var(--r-muted);font-size:15px}
.yd-facts dd{margin:4px 0 0;font-size:20px;font-weight:700}
.yd-outs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.yd-out{background:var(--r-surface);border:1px solid var(--r-rule);border-radius:8px;padding:16px;min-width:0}
.yd-out h3{margin:0 0 6px;font-size:19px}

/* Everything below the lever is the deal as agreed. One line says so; once the sliders leave the agreed stop
   (the kit sets data-rl-off on its own root, the flag the opening sentence hides on) the sections are dimmed and
   the line says they have not moved. */
.yd-asagreed{display:flex;flex-direction:column;gap:32px;min-width:0}
.yd-asagreed-label{margin:0;color:var(--r-muted)}
.yd-asagreed-label .yd-off{display:none}
.r-main:has(.rl-kit[data-rl-off="1"]) .yd-asagreed-label .yd-on{display:none}
.r-main:has(.rl-kit[data-rl-off="1"]) .yd-asagreed-label .yd-off{display:inline}
/* The fold's grid count is about the deal as written: once the sliders move, its summary says so instead. */
.f-sum .yd-off{display:none}
.r-main:has(.rl-kit[data-rl-off="1"]) .f-sum .yd-on{display:none}
.r-main:has(.rl-kit[data-rl-off="1"]) .f-sum .yd-off{display:inline}
.r-main:has(.rl-kit[data-rl-off="1"]) .yd-asagreed>:not(.yd-asagreed-label){opacity:.5;transition:opacity .2s var(--r-ease)}

/* Why and Show the working, closed. */
.yd-why,.yd-working{background:var(--r-surface);border:1px solid var(--r-rule);border-radius:12px;padding:0 20px}
.yd-why .r-disclosure-summary,.yd-working .r-disclosure-summary{justify-content:flex-start;flex-wrap:wrap;gap:4px 16px}
.yd-why .r-disclosure-summary .r-chevron,.yd-working .r-disclosure-summary .r-chevron{margin-left:auto}
.yd-why-body{display:flex;flex-direction:column;gap:20px;padding:0 0 20px}
.yd-why-body h3{margin:0 0 8px;font-size:19px}
.yd-stand{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px}
.yd-seal{margin:0}

/* The sticky bar on a phone is one button of at most 64px, and it never sits over the verdict: the page
   scrolls under it, and the shell leaves room (scroll-padding) so nothing stops behind it. */
@media (max-width:767px){
  /* The title bar already names the page, and the blurb waits for the desktop: the path and the lever
     come as early as the answer allows. */
  .yd-h1{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .yd-blurb{display:none}
  .r-has-actions .r-actions{padding:8px 16px;gap:0}
  .r-has-actions .r-actions .yd-button{min-height:46px;max-height:46px}
  .yd-kit .rl-legend{font-size:13px;gap:2px 12px}
  .yd-kit .rl-horizon{margin-bottom:2px}
  .yd-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .yd-outs{grid-template-columns:minmax(0,1fr)}
  .yd-kit .rl-profit{font-size:22px}
  /* The ways table is a card for each row on a phone. */
  .yd-ways-table thead,.yd-pot-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .yd-ways-table,.yd-ways-table tbody,.yd-ways-table tr,.yd-ways-table th,.yd-ways-table td,
  .yd-pot-table,.yd-pot-table tbody,.yd-pot-table tr,.yd-pot-table th,.yd-pot-table td{display:block}
  .yd-ways-table tr,.yd-pot-table tr{background:var(--r-surface);border:1px solid var(--r-rule);border-radius:8px;margin-bottom:12px;padding:6px 12px}
  .yd-ways-table th,.yd-ways-table td,.yd-pot-table th,.yd-pot-table td{border-top:0;padding:6px 0}
  .yd-ways-table td::before,.yd-pot-table td::before{content:attr(data-label);display:block;color:var(--r-muted);font-size:14px}
}

/* Several products (branch yourdeal-multi): what breaks, drawn. The stock bars are server-drawn SVG with no
   text in it; the numbers are in the table under each, so no colour carries a meaning alone. */
.yd-limits-head{display:flex;gap:12px;align-items:flex-start}
.yd-limits-head p{margin:0 0 4px}
.yd-limits-mark{flex:none;line-height:0}
.yd-stock{display:flex;flex-direction:column;gap:8px;min-width:0}
.yd-stock-caption{margin:0}
.yd-keys{display:flex;flex-wrap:wrap;gap:4px 16px;margin:0;font-size:15px}
.yd-key::before{content:"";display:inline-block;width:12px;height:12px;margin-right:6px;vertical-align:-1px;background:var(--r-ink)}
.yd-key-under::before{background:var(--r-breach)}
.yd-key-out::before{background:var(--r-surface);border:2px solid var(--r-breach);box-sizing:border-box}
.yd-stock-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.yd-stock-one{margin:0;background:var(--r-surface);border:1px solid var(--r-rule);border-radius:8px;padding:12px;min-width:0;display:flex;flex-direction:column;gap:6px}
.yd-stock-one figcaption{display:flex;flex-direction:column;gap:2px}
.yd-svg{display:block;width:100%;height:96px;overflow:visible}
.yd-svg *{vector-effect:non-scaling-stroke}
.yd-base{stroke:var(--r-rule);stroke-width:1}
.yd-bar{fill:var(--r-ink)}
.yd-bar[data-state="under"]{fill:var(--r-breach)}
.yd-bar[data-state="out"]{fill:var(--r-surface);stroke:var(--r-breach);stroke-width:2}
.yd-buffer{stroke:var(--r-anchor);stroke-width:2;stroke-dasharray:6 4}
.yd-bar-months{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--yd-n),minmax(0,1fr));font:700 12px/1 var(--r-font);letter-spacing:.06em;text-transform:uppercase;color:var(--r-muted)}
.yd-bar-months li{text-align:center;padding:2px 0}
.yd-buffer-text{margin:0;font-size:15px}
.yd-stock-table td[data-state="under"],.yd-stock-table td[data-state="out"]{color:var(--r-breach);font-weight:700}
.yd-against{font-size:13px;white-space:normal}
.yd-shared-list{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px}
.yd-cuts{display:flex;flex-direction:column;gap:6px}
.yd-cuts h3{margin:0;font-size:19px}
.yd-cuts-list{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px}
.yd-pot-table tr[data-holds="0"] .yd-verdict{color:var(--r-breach)}
@media (max-width:767px){.yd-stock-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:767px){.yd-ways-table caption,.yd-pot-table caption{display:block;width:auto}}
.yd-clears-list{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:8px}
.yd-sub[data-holds="0"]{color:var(--r-breach);font-weight:700}
.yd-pot-table .yd-sub[data-holds="0"]{margin-top:0}

/* What to say to your buyer (wave 7, first piece): the counter-deal's terms, how far each can go, and the message.
   A walk-away bar is drawn beside its words and never carries the numbers alone. Class prefix yd-say. */
.yd-say{display:flex;flex-direction:column;gap:12px;min-width:0}
.yd-say-terms{list-style:none;margin:0;padding:0;background:var(--r-surface);border-top:3px solid var(--r-ink)}
.yd-say-term{display:flex;flex-direction:column;gap:6px;padding:16px 20px;border-bottom:1px solid var(--r-rule);min-width:0}
.yd-say-k{font-weight:700}
.yd-say-ask,.yd-say-walk{overflow-wrap:anywhere}
.yd-say-walk{display:flex;align-items:center;gap:12px}
.yd-say-bar{position:relative;flex:0 0 96px;height:10px;background:var(--r-rule)}
.yd-say-bar i{position:absolute;left:0;top:0;bottom:0;width:var(--walk);background:var(--r-ink)}
.yd-say-bar[data-holds="high"] i{left:var(--walk);width:auto;right:0}
.yd-say-bar b{position:absolute;top:-6px;bottom:-6px;width:3px;left:var(--walk);background:var(--r-breach)}
.yd-say-bar s{position:absolute;top:-8px;width:14px;height:26px;margin-left:-7px;left:var(--past);background:var(--r-signal);box-shadow:inset 0 0 0 2px var(--r-ink)}
.yd-say-msg{display:flex;flex-direction:column;gap:10px;background:var(--r-surface);border-top:3px solid var(--r-ink);padding:20px;min-width:0}
.yd-say-msg h3{margin:0;font-size:19px}
.yd-say-msg p{margin:0}
.yd-say-label{color:var(--r-muted);font-size:17px}
.yd-say-side{display:flex;flex-direction:column;gap:12px;min-width:0}
.yd-say-side h2{margin:0}
.yd-say-lead{margin:0}
.yd-say-msg textarea{box-sizing:border-box;width:100%;min-height:16em;border:1px solid var(--r-muted);border-radius:8px;padding:12px;font:inherit;line-height:1.5;overflow-wrap:anywhere;resize:vertical}
.yd-say-actions{display:flex;flex-wrap:wrap;gap:12px}
@media (max-width:767px){
  .yd-say-term{padding:14px 16px}
  .yd-say-walk{flex-direction:column;align-items:flex-start;gap:8px}
  .yd-say-bar{flex:none;width:100%;max-width:240px}
  .yd-say-actions .yd-button{width:100%}
}

/* The empty Your deal (U3, board A1-first-run): "What are you deciding?", the eight boxes, one primary button. Class
   prefix fr-. Tokens only, like every reform sheet. Two columns of boxes on a desktop, one on a phone. */
.fr{display:flex;flex-direction:column;gap:12px;min-width:0;padding:20px;border:1px solid var(--r-rule);border-radius:12px;background:var(--r-surface)}
.fr-h{margin:0;font-size:22px}
.fr-lead{margin:0;font-weight:500}
.fr-form{display:flex;flex-direction:column;gap:16px;min-width:0}
.fr-side{border:0;margin:0;padding:0;min-width:0}
.fr-seg{display:flex;flex-wrap:wrap;gap:8px}
.fr-seg-opt{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border:1px solid var(--r-rule);border-radius:8px;background:var(--r-page)}
.fr-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 20px;min-width:0}
.fr-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.fr-field[hidden]{display:none}
.fr-label{font-weight:700}
.fr-hint{margin:0;color:var(--r-muted);font-size:17px}
.fr-box{display:flex;align-items:center;gap:8px;min-width:0}
.fr-unit{color:var(--r-muted);white-space:nowrap}
.fr-input{flex:1 1 auto;min-width:0;width:100%;min-height:44px;padding:0 12px;border:1px solid var(--r-rule);border-radius:8px;background:var(--r-page);color:var(--r-ink);font:inherit;font-variant-numeric:tabular-nums;box-sizing:border-box}
.fr-input:focus{outline:2px solid var(--r-anchor);outline-offset:1px}
.fr-field-error .fr-input{border-color:var(--r-breach)}
.fr-error{margin:0;color:var(--r-breach);font-weight:700;font-size:17px}
.fr-errors{padding:12px 14px;border-left:4px solid var(--r-breach);background:var(--r-tint)}
.fr-errors p{margin:0}
.fr-rest{margin:0}
.fr-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px}
.fr-answer-label{margin:8px 0 0}
.fr-empty{margin:0;padding:16px 0;color:var(--r-muted)}
.fr-status{margin:12px 0 0;min-height:1.4em}
.fr-live[aria-busy="true"]{opacity:.6}
@media (prefers-reduced-motion:no-preference){.fr-live{transition:opacity .15s ease}}
@media (max-width:767px){
  .fr{padding:16px}
  .fr-grid{grid-template-columns:minmax(0,1fr)}
  .fr-actions .yd-button{width:100%}
}