/* SOFT 17 — Fees: "the house cut".
   A table-fee figure with its wedge chip and betting slip, the Broken Chip Bar (50 / 30 / 20),
   the House Tab calculator on thermal paper with margin notes, and the back of the tab.
   Everything sits in the pages layer; shared objects come from style.css. */
@layer pages{

  /* ───────── shared bits ───────── */
  .fees-kicker{color:var(--fg-3)}
  .fees-intro,.fees-split,.fees-calc,.fees-back{padding-block-end:var(--section)}

  /* ───────── title block ───────── */
  .fees-title{display:flex;flex-direction:column;gap:var(--space-s);max-inline-size:880px}
  .fees-title .h1{max-inline-size:none}

  /* ───────── the table fee ───────── */
  .fee-table{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--gap-out);margin-block-start:clamp(var(--space-xl),5vw,var(--space-2xl))}
  .fee-table__figure{display:flex;flex-direction:column;gap:var(--space-s);min-inline-size:0}
  .fee-table__rate{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-m)}
  .fee-table__pct{white-space:nowrap}
  /* a 56px ivory chip with a 1.8deg wedge cut out, edged in suit red */
  .wedge-chip{position:relative;flex:none;inline-size:56px;block-size:56px;border-radius:50%;background:conic-gradient(from 32deg,var(--suit) 0deg 2deg,transparent 2deg 3.8deg,var(--suit) 3.8deg 5.8deg,var(--ivory) 5.8deg 360deg);box-shadow:var(--shadow-rest)}
  .wedge-chip::after{content:"";position:absolute;inset:15%;border:1px dashed rgb(20 10 15 / .35);border-radius:50%}
  .fee-table__copy{flex:1 1 320px;display:flex;flex-direction:column;gap:var(--space-s);min-inline-size:0;max-inline-size:520px}
  .fee-table__body{max-inline-size:44ch;color:var(--fg-2)}

  /* the worked example: an ivory betting slip with a torn top */
  .fee-slip{flex:0 0 auto;inline-size:min(100%,264px)}
  .fee-slip__paper{display:flex;flex-direction:column;gap:var(--space-xs);padding:calc(var(--space-m) + 8px) var(--space-m) var(--space-m)}
  .fee-slip__head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-xs);padding-block-end:var(--space-xs);border-block-end:1px solid var(--rule)}
  .fee-slip__no{color:var(--red)}
  .fee-slip__lines{gap:var(--space-2xs)}
  .fee-slip__fee{color:var(--red)}
  .fee-slip__total{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-2xs);padding-block-start:var(--space-xs)}
  .fee-slip__pay{font-size:var(--fs-15);font-weight:500;color:var(--fg-2)}
  .fee-slip__sum{font-size:56px;line-height:.85;letter-spacing:-.04em}
  .fee-slip__note{font-size:var(--fs-14);line-height:var(--lh-14);color:var(--fg-2)}

  /* ───────── the Broken Chip Bar ───────── */
  .fees-split{--c:40px;display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:var(--gap-out)}
  .fees-split__head{flex:1 1 280px;display:flex;flex-direction:column;gap:var(--space-s);min-inline-size:0;max-inline-size:360px}
  .fees-split__note{color:var(--fg-3)}

  .chip-bar{--chunk-gap:var(--space-s);display:flex;flex:0 1 auto;gap:var(--chunk-gap);max-inline-size:100%;margin:0;padding:0}
  /* each chunk is exactly as wide as its chips, so its numeral can scale with its own share */
  .chip-bar__chunk{flex:0 0 calc(var(--n) * var(--c) + (var(--n) - 1) * 2px);min-inline-size:0;container-type:inline-size;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"share share" "chips chips" "spot name" "text text";align-content:start;align-items:center;column-gap:var(--space-xs)}
  .chip-bar__share{grid-area:share;margin-block-end:var(--space-s);font-size:clamp(40px,40cqi,168px);line-height:.8;white-space:nowrap}
  /* side by side, every numeral stands on the same line as the tallest (50), so the chips form one bar */
  @media (min-width:768px){.chip-bar__share{display:flex;align-items:flex-end;min-block-size:calc((4 * var(--c) + 7.2px) * .8)}}
  .chip-bar__pct{margin-inline-start:.08em;font-size:.36em;font-weight:400;letter-spacing:0;vertical-align:top}
  .chip-bar__chunk--jackpot .chip-bar__share{color:var(--citron)}
  .chip-bar__chips{grid-area:chips;display:flex;gap:2px;margin-block-end:var(--space-s)}
  .bar-chip{position:relative;flex:none;inline-size:var(--c);block-size:var(--c);border-radius:50%;background-color:var(--bar-chip)}
  .bar-chip::after{content:"";position:absolute;inset:15%;border:1px dashed var(--bar-ring);border-radius:50%}
  .chip-bar__chunk--company{--bar-chip:var(--cover);--bar-ring:rgb(245 239 223 / .4)}
  .chip-bar__chunk--company .bar-chip{box-shadow:inset 0 0 0 1px var(--hair-strong)}
  .chip-bar__chunk--rebates{--bar-chip:var(--ivory);--bar-ring:rgb(20 10 15 / .35)}
  .chip-bar__chunk--jackpot{--bar-chip:var(--citron);--bar-ring:rgb(20 10 15 / .35)}
  .chip-bar__spot{grid-area:spot;inline-size:64px;block-size:64px}
  .chip-bar__name{grid-area:name;font:600 var(--fs-body)/1.25 var(--font-sans);letter-spacing:0}
  .chip-bar__text{grid-area:text;margin-block-start:var(--space-2xs);font-size:var(--fs-15);line-height:var(--lh-15);color:var(--fg-2)}

  /* snap-apart: fees.js marks the bar [data-snap]; the chunks sit joined until it scrolls in,
     then spring to --space-s apart. Wide screens with motion on only. */
  @media (min-width:768px){
    .chip-bar__chunk{transition:translate 240ms cubic-bezier(.34,1.56,.64,1)}
    html.js-motion:not([data-motion="off"]) .chip-bar[data-snap]:not(.is-split) .chip-bar__chunk--company{translate:calc(var(--chunk-gap) - 2px) 0}
    html.js-motion:not([data-motion="off"]) .chip-bar[data-snap]:not(.is-split) .chip-bar__chunk--jackpot{translate:calc(2px - var(--chunk-gap)) 0}
  }
  @media (prefers-reduced-motion:reduce){.chip-bar__chunk{transition:none}}
  html[data-motion="off"] .chip-bar__chunk{transition:none}

  /* ───────── run the numbers: the House Tab ───────── */
  .fees-calc__head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--space-s) var(--space-xl);margin-block-end:var(--gap-out)}
  .fees-calc__head .h2{max-inline-size:none}
  .fees-calc__intro{max-inline-size:36ch;color:var(--fg-2)}

  .house-tab{--note-line:clamp(32px,4vw,64px);position:relative;inline-size:min(100%,480px);margin-inline:auto}
  .house-tab__body{display:flex;flex-direction:column;gap:var(--gap-in);padding:var(--space-xl) var(--pad) var(--pad);border-radius:var(--r-paper) var(--r-paper) 0 0}
  /* the punched hole: the bar showing through */
  .house-tab__hole{position:absolute;inset-block-start:14px;inset-inline-start:50%;inline-size:16px;block-size:16px;margin-inline-start:-8px;border-radius:50%;background-color:var(--bar);box-shadow:var(--shadow-inset)}
  .house-tab__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--space-3xs) var(--space-xs);padding-block-end:var(--gap-in);border-block-end:1px solid var(--rule)}
  .house-tab__serial{font:400 var(--fs-14)/1 var(--font-mono);color:var(--fg-2)}

  /* editable sentence rows */
  .tab-field{position:relative;display:flex;flex-direction:column;gap:var(--space-3xs);--note-y:22px}
  .tab-field__line{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-3xs) var(--space-2xs)}
  .tab-input{box-sizing:content-box;field-sizing:content;inline-size:9ch;min-inline-size:4ch;max-inline-size:min(15ch,calc(100% - 8px));block-size:44px;padding:0 4px;border:0;border-block-end:2px solid var(--cover);border-radius:0;background:transparent;color:var(--bar);font:400 28px/1 var(--font-serif);font-variation-settings:"opsz" 72;letter-spacing:-.01em;text-align:center}
  @supports (field-sizing:content){.tab-input{inline-size:auto}}
  .tab-input:focus-visible{outline:2px solid var(--focus);outline-offset:4px}
  .tab-input[aria-invalid="true"]{border-block-end-color:var(--suit)}
  /* the hint line is always reserved, so an error never moves the tab */
  .tab-hint{min-block-size:20px;font-size:var(--fs-14);line-height:20px;color:var(--suit)}

  /* the answer column */
  .tab-answers{display:flex;flex-direction:column;gap:var(--space-xs);padding-block-start:var(--gap-in);border-block-start:1px solid var(--rule)}
  .tab-row{position:relative;display:flex;flex-direction:column;gap:var(--space-3xs);--note-y:10px}
  .tab-row .leader{font:700 16px/1.3 var(--font-mono)}
  .tab-row .leader>:first-child{min-inline-size:0}
  .tab-row .leader>output{flex:none;text-align:end}
  .tab-row--total{margin-block-start:var(--space-3xs);padding-block-start:var(--space-xs);--note-y:25px}
  .tab-row--total .leader{font-size:20px}

  /* margin notes: inline under their rows on narrow screens … */
  .tab-note{padding-inline-start:var(--space-s);border-inline-start:1px solid var(--rule);font:italic 300 var(--fs-body)/1.35 var(--font-serif);color:var(--fg-2)}
  /* … and hung in the margins on leader lines from 1024px */
  @media (min-width:1024px){
    .house-tab{--note-w:min(200px,calc((min(100vw,var(--max)) - 2 * var(--gutter) - 480px) / 2 - var(--pad) - var(--note-line) - 24px))}
    .tab-note{position:absolute;inset-block-start:var(--note-y);display:flex;align-items:center;inline-size:max-content;padding:0;border:0;color:var(--text-2);translate:0 -50%}
    .tab-note>span{max-inline-size:var(--note-w);margin-inline-start:var(--space-xs)}
    .tab-note::before{content:"";flex:none;inline-size:var(--note-line);block-size:6px;margin-inline-start:-3px;background:radial-gradient(circle 3px at 3px 50%,var(--ivory) 92%,transparent 100%) no-repeat,linear-gradient(rgb(245 239 223 / .4),rgb(245 239 223 / .4)) 0 50% / 100% 1px no-repeat}
    .tab-note--right{inset-inline-start:calc(100% + var(--pad))}
    .tab-note--left{inset-inline-end:calc(100% + var(--pad));flex-direction:row-reverse;text-align:end}
    .tab-note--left>span{margin-inline:0 var(--space-xs)}
    .tab-note--left::before{margin-inline:0 -3px;background:radial-gradient(circle 3px at calc(100% - 3px) 50%,var(--ivory) 92%,transparent 100%) no-repeat,linear-gradient(rgb(245 239 223 / .4),rgb(245 239 223 / .4)) 0 50% / 100% 1px no-repeat}
  }

  /* three tear-off stubs, 5 / 3 / 2, joined by perforations */
  .house-tab__stubs{display:flex;margin-block-start:-1px;border-radius:0;border-block-start:2px dashed var(--perf-paper)}
  .tab-stub{flex:var(--n) 1 0;min-inline-size:96px;display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-xs);padding:var(--space-s) var(--space-xs) calc(var(--space-m) + 8px)}
  .tab-stub+.tab-stub{min-inline-size:104px;border-inline-start:1.5px dashed var(--perf-paper)}
  .tab-stub .stamp{padding-inline:var(--space-xs)}
  .tab-stub .stamp.is-pending{visibility:hidden}
  .tab-stub__amt{max-inline-size:100%;font:700 var(--fs-15)/1.2 var(--font-mono);overflow-wrap:anywhere}

  .fees-calc__summary{max-inline-size:44ch;margin:var(--gap-out) auto 0;text-align:center;font:italic 400 clamp(17px,15.89px + .286vw,20px)/1.4 var(--font-serif);color:var(--fg-2);text-wrap:balance}

  /* ───────── back of the tab ───────── */
  .fees-back{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:var(--gap-out)}
  .fees-back__print{flex:1 1 460px;display:flex;flex-direction:column;gap:var(--space-s);min-inline-size:0;max-inline-size:62ch;color:var(--fg-2)}
  .fees-back__print .title{margin-block-end:var(--space-2xs);color:var(--fg)}
  .fees-back__print strong{color:var(--fg)}
  .fees-back__links{display:flex;flex-wrap:wrap;gap:var(--space-2xs) 28px;margin-block-start:var(--space-2xs)}
  .fees-back__quiet{text-decoration-color:var(--hair-strong)}
  .fees-back__quiet:hover{text-decoration-color:var(--citron)}

  .fees-contracts{flex:1 1 320px;display:flex;flex-direction:column;gap:var(--space-s);min-inline-size:0;max-inline-size:520px}
  .fees-contracts__head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-xs) var(--space-m);min-block-size:44px}
  .contract-list{border-block-end:1px solid var(--rule)}
  .contract-row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-s);min-block-size:72px;padding-block:var(--space-xs);border-block-start:1px solid var(--rule)}
  .contract-row__text{display:flex;flex-direction:column;gap:var(--space-3xs);min-inline-size:0}
  .contract-row__name{font-weight:600;line-height:1.3}
  .contract-row__addr{font:400 var(--fs-15)/1.3 var(--font-mono);color:var(--fg-3);overflow-wrap:anywhere}
  .contract-row__addr a{color:var(--fg);text-decoration-color:var(--hair-strong);text-underline-offset:4px}
  .contract-row__addr a:hover{color:var(--fg);text-decoration-color:var(--citron)}
  .contract-row__status{margin-inline-start:var(--space-xs);font:500 var(--fs-14)/1.3 var(--font-sans);color:var(--fg-2)}
  .contract-row__lock{inline-size:18px;block-size:18px;margin-inline-end:13px;color:var(--fg-3)}
  .contract-row__copy{display:flex;flex:none;align-items:center;justify-content:center;inline-size:44px;block-size:44px;border:1px solid var(--hair);border-radius:var(--r-ticket);background-color:var(--board-2);color:var(--ivory);transition:background-color var(--dur-1) var(--ease-out)}
  .contract-row__copy:hover{background-color:var(--board)}
  .contract-row__copy .i{inline-size:18px;block-size:18px}

  /* ───────── 640–1199: the slip moves beside the figure and its sentence ───────── */
  /* the copy column stops at its measure; whatever is left is the slip's column, and the slip
     sits centred in it, so wide tablets get two balanced columns instead of an empty middle */
  @media (min-width:640px) and (max-width:1199.98px){
    .fee-table{display:grid;grid-template-columns:minmax(0,520px) minmax(264px,1fr);grid-template-areas:"figure slip" "copy slip";align-items:center;column-gap:var(--gap-out);row-gap:var(--space-l)}
    .fee-table__figure{grid-area:figure;align-self:end}
    .fee-table__copy{grid-area:copy;align-self:start}
    .fee-slip{grid-area:slip;inline-size:264px;justify-self:center}
  }

  @media (max-width:1023.98px){
    .fees-split{--c:32px}
    .chip-bar__spot{inline-size:48px;block-size:48px}
  }

  /* ───────── the split between the phone stack and the 1280 desktop row ───────── */
  /* 640–1099: the head runs as one row above the bar, the line on the left and the note on the right */
  @media (min-width:640px) and (max-width:1099.98px){
    .fees-split__head{flex:1 1 100%;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"kicker kicker" "title note";align-items:end;gap:var(--space-s) var(--gap-out);max-inline-size:none}
    .fees-split__head>.fees-kicker{grid-area:kicker}
    .fees-split__head>.title{grid-area:title;max-inline-size:40ch;text-wrap:balance}
    .fees-split__note{grid-area:note;max-inline-size:28ch}
  }
  /* 768–1279: the bar fills the width it is given. Each chunk grows by its chip count, so every chip
     stays the same size (capped at 48px); the numerals still scale with their own chunk, and the
     tallest one (50) is worked out from each chunk's own width so all three stand on one line */
  @media (min-width:768px) and (max-width:1279.98px){
    .chip-bar__chunk{flex:var(--n) 1 calc((var(--n) - 1) * 2px);max-inline-size:calc(var(--n) * 48px + (var(--n) - 1) * 2px)}
    .chip-bar__chips{align-items:flex-start}
    .bar-chip{flex:1 1 0;inline-size:auto;block-size:auto;min-inline-size:0;aspect-ratio:1}
    .chip-bar__share{--c-fit:calc((100cqi - (var(--n) - 1) * 2px) / var(--n));min-block-size:calc(clamp(40px, 4 * var(--c-fit) + 7.2px, 168px) * .8)}
  }
  /* 768–1099: the bar takes its own full row under the head */
  @media (min-width:768px) and (max-width:1099.98px){
    .chip-bar{flex:1 1 100%}
  }
  /* 1100–1279: head and bar share the row (as at 1280+), the bar taking all the room the head leaves */
  @media (min-width:1100px) and (max-width:1279.98px){
    .fees-split{flex-wrap:nowrap}
    .chip-bar{flex:1 1 866px}
  }

  /* 1024–1179: the margin notes get shorter leader lines and the space the safety margin held back,
     so each note keeps to one or two balanced lines */
  @media (min-width:1024px) and (max-width:1179.98px){
    .house-tab{--note-line:var(--space-l);--note-w:min(200px,calc((100vw - 2 * var(--gutter) - 480px) / 2 - var(--pad) - var(--note-line) - var(--space-xs)))}
    .tab-note>span{text-wrap:balance}
  }

  /* below the point where the fine print and the contract addresses sit side by side,
     the addresses run to the same measure as the fine print above them */
  @media (max-width:879.98px){
    .fees-contracts{max-inline-size:62ch}
  }

  /* ───────── phones (below the nav switch) ───────── */
  @media (max-width:767.98px){
    /* the chunks stack as rows; numerals keep their share order at fixed sizes */
    .chip-bar{flex-direction:column;flex:1 1 100%;gap:var(--space-l)}
    .chip-bar__chunk{flex:none}
    .chip-bar__chunk--company .chip-bar__share{font-size:64px}
    .chip-bar__chunk--rebates .chip-bar__share{font-size:48px}
    .chip-bar__chunk--jackpot .chip-bar__share{font-size:40px}
    .chip-bar__share{margin-block-end:var(--space-xs)}
    .chip-bar__chips{margin-block-end:var(--space-xs)}
    .chip-bar__text{max-inline-size:40ch}

    /* the tab runs full width and straight */
    .house-tab{--tilt:0deg;inline-size:100%}
    .house-tab__body{padding-inline:var(--pad-compact)}
    .fees-calc__head{align-items:flex-start}
  }
  /* 640–767: each chunk becomes a ledger line. The figure and its chips hold a left column as wide as
     the ten company chips, so the three bars line up; the spot, name and caption fill the right */
  @media (min-width:640px) and (max-width:767.98px){
    .fees-split__head{grid-template-columns:calc(10 * var(--c) + 18px) minmax(0,1fr);column-gap:var(--space-m)}
    .chip-bar__chunk{grid-template-columns:calc(10 * var(--c) + 18px) 0 auto minmax(0,1fr);grid-template-areas:"share . spot name" "chips . text text";align-items:center;column-gap:var(--space-xs)}
    .chip-bar__share{align-self:end}
    .chip-bar__chips{align-self:start;margin-block-end:0}
    .chip-bar__text{align-self:start;max-inline-size:none;margin-block-start:0}
  }
  @media (max-width:639.98px){
    .fee-table{align-items:flex-start;gap:var(--space-l)}
    .fee-slip{margin-inline-start:var(--space-2xs)}
    .fees-split{--c:28px}
  }
}