/* site2 skin — tiprentbill.com style blocks, verbatim, in document order */
  :root{
    --bg:#f5f6f8; --card:#ffffff; --ink:#14161a; --ink-2:#5b6270; --ink-3:#667085;
    --line:#e3e6ec; --line-2:#eef0f4; --accent:#1f6feb; --accent-soft:#e8f0fe;
    --ok:#0f7b46; --warn:#8a5300;
    --radius:14px; --radius-sm:10px;
    --tap:46px;
  }
  
  *,*::before,*::after{box-sizing:border-box}
  html{-webkit-text-size-adjust:100%}
  body{
    margin:0; background:var(--bg); color:var(--ink);
    font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"PingFang SC","Microsoft YaHei",sans-serif;
    padding:16px 14px 40px;
  }
  .wrap{max-width:560px; margin:0 auto}

  /* A visible ring for keyboard users, on every focusable control. Pointer
     users never see it (:focus-visible), so nothing gets noisier. */
  :where(a,button,input,summary):focus-visible{outline:2px solid var(--accent); outline-offset:2px}

  /* ---------- header ---------- */
  header{margin:0 0 16px}
  h1{font-size:1.5rem; line-height:1.25; margin:0 0 6px; letter-spacing:-.015em}
  .tagline{margin:0; color:var(--ink-2); font-size:.95rem}

  /* ---------- cards ---------- */
  .card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:16px}

  /* ---------- amount ---------- */
  .field-label{display:block; font-size:.82rem; font-weight:600; color:var(--ink-2); margin:0 0 6px; letter-spacing:.01em}
  .amount-row{display:flex; align-items:center; gap:8px; background:var(--bg); border:1px solid var(--line); border-radius:var(--radius-sm); padding:0 12px; min-width:0}
  .amount-row:focus-within{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}
  .amount-row .cur{font-size:1.5rem; font-weight:600; color:var(--ink-3); flex:none}
  #bill{
    flex:1 1 auto; min-width:0; width:100%; border:0; background:transparent; color:var(--ink);
    font-size:1.75rem; font-weight:700; padding:11px 0; outline:none; letter-spacing:-.02em;
    font-variant-numeric:tabular-nums;
  }
  #bill:disabled{color:var(--ink-2)}
  input[type=text],input[type=number]{
    -webkit-appearance:none; appearance:none; border-radius:var(--radius-sm);
  }

  /* ---------- people ---------- */
  .people{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:14px}
  .stepper{display:flex; align-items:center; gap:2px; background:var(--bg); border:1px solid var(--line); border-radius:var(--radius-sm); flex:none}
  .stepper button{
    width:var(--tap); height:var(--tap); border:0; background:transparent; color:var(--ink);
    font-size:1.4rem; font-weight:600; line-height:1; cursor:pointer; border-radius:var(--radius-sm);
  }
  .stepper button:active{background:var(--accent-soft)}
  .stepper button:disabled{color:var(--ink-3); cursor:default}
  #peopleVal{
    width:3em; min-width:0; min-height:var(--tap); padding:0; text-align:center;
    font-size:1.2rem; font-weight:700; font-variant-numeric:tabular-nums;
    background:transparent; border:0; color:var(--ink); -moz-appearance:textfield;
  }
  .pnote{margin:6px 0 0; font-size:.83rem; font-weight:600; color:var(--accent)}
  .pnote[hidden]{display:none}
  /* The amount box and the people stepper share one line. The stepper sits to
     the right of the amount and above the keys, so an open panel can never land
     on it — that was the reason tapping + did nothing while a panel was open.
     The amount box keeps at least 140px at 390 wide, and all three touch
     targets stay at the 46px tap size, stretched to the amount box's height. */
  .moneyline{display:flex; align-items:stretch; gap:8px}
  .moneyline .amount-row{flex:1 1 auto; min-width:140px}
  .moneyline .people{margin:0; flex:none; display:flex; align-items:stretch}
  .moneyline .stepper{align-items:stretch}
  .moneyline .stepper button{height:auto; min-height:var(--tap)}
  .moneyline #peopleVal{width:2.6em; height:auto; min-height:var(--tap)}

  /* ---------- switches ---------- */
  .switches{display:flex; flex-wrap:wrap; gap:8px; margin-top:14px}
  .sw{
    flex:1 1 calc(50% - 4px); min-width:0;
    display:flex; align-items:center; justify-content:center; gap:7px;
    min-height:var(--tap); padding:9px 10px; cursor:pointer;
    background:var(--bg); border:1px solid var(--line); border-radius:var(--radius-sm);
    color:var(--ink-2); font-size:.9rem; font-weight:600; user-select:none;
    transition:background .12s, border-color .12s, color .12s;
  }
  .sw .dot{width:9px; height:9px; border-radius:50%; background:var(--ink-3); flex:none; transition:background .12s}
  .sw[aria-pressed=true]{background:var(--accent-soft); border-color:var(--accent); color:var(--accent)}
  .sw[aria-pressed=true] .dot{background:var(--accent)}
  @media (hover:hover){
    .sw:hover{border-color:var(--accent); color:var(--accent)}
    .seg button:hover{border-color:var(--accent); color:var(--accent)}
    .additem:hover{background:var(--accent-soft)}
    .reset:hover{color:var(--accent); border-color:var(--accent)}
    .who button:hover{border-color:var(--accent); color:var(--accent)}
  }

  /* ---------- panels ---------- */
  .panel{display:none; margin-top:12px; padding:12px; background:var(--bg); border:1px solid var(--line-2); border-radius:var(--radius-sm)}
  .panel.open{display:block}
  .panel .hint{margin:0 0 10px; font-size:.83rem; color:var(--ink-2)}
  .seg{display:flex; gap:6px; flex-wrap:wrap}
  .seg button{
    flex:1 1 auto; min-width:60px; min-height:42px; padding:7px 10px; cursor:pointer;
    background:var(--card); border:1px solid var(--line); border-radius:9px;
    color:var(--ink-2); font-size:.86rem; font-weight:600;
  }
  .seg button[aria-pressed=true]{background:var(--accent); border-color:var(--accent); color:#fff}
  .seg.pct button{flex:1 1 0}
  .inline{display:flex; gap:8px; align-items:center; margin-top:10px; min-width:0}
  .inline input[type=text]{
    flex:1 1 auto; min-width:0; width:100%; min-height:var(--tap); padding:10px 12px;
    background:var(--card); border:1px solid var(--line); color:var(--ink); font-size:1rem; outline:none;
  }
  .inline input[type=text]:focus{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}
  .inline .suffix{flex:none; color:var(--ink-3); font-size:.9rem; font-weight:600}

  /* ---------- items ---------- */
  .item{border:1px solid var(--line); border-radius:var(--radius-sm); padding:10px; margin-bottom:8px; background:var(--card)}
  .item-top{display:flex; gap:8px; align-items:center; min-width:0}
  .item-top input.item-name{flex:1 1 auto; min-width:0; width:100%; min-height:44px; padding:9px 10px; background:var(--bg); border:1px solid var(--line); color:var(--ink); font-size:1rem; outline:none}
  .item-top input.item-amt{flex:0 0 96px; width:96px; min-height:44px; padding:9px 10px; background:var(--bg); border:1px solid var(--line); color:var(--ink); font-size:1rem; text-align:right; outline:none; font-variant-numeric:tabular-nums}
  .item-top input:focus{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}
  .item-top .del{flex:none; width:40px; height:44px; border:1px solid var(--line); background:var(--bg); color:var(--ink-3); border-radius:9px; font-size:1.1rem; cursor:pointer; line-height:1}
  .who{display:flex; flex-wrap:wrap; gap:6px; margin-top:9px}
  .who .lbl{font-size:.78rem; color:var(--ink-3); align-self:center; margin-right:2px}
  .who button{
    min-width:40px; min-height:36px; padding:5px 10px; cursor:pointer;
    background:var(--bg); border:1px solid var(--line); border-radius:999px;
    color:var(--ink-3); font-size:.8rem; font-weight:700;
  }
  .who button[aria-pressed=true]{background:var(--accent); border-color:var(--accent); color:#fff}
  .additem{
    width:100%; min-height:var(--tap); margin-top:2px; cursor:pointer;
    background:transparent; border:1px dashed var(--line); border-radius:var(--radius-sm);
    color:var(--accent); font-size:.92rem; font-weight:600;
  }
  .warn{margin:9px 0 0; font-size:.83rem; color:var(--warn)}

  /* ---------- result ----------
     Pinned to the bottom of the screen, not the bottom of the document. On a
     calculator the number has to stay in view while the switches are being
     tapped, and the panels are tall enough to push a sticky card off screen.
     The space it takes is reserved on the body by script, so nothing ends up
     stranded underneath it. */
  .result{
    /* Aligned to the same column as .wrap, so its edges line up with the card
       above it on every width: 14px gutters when narrow, 560px max when wide. */
    position:fixed; bottom:0; left:50%; transform:translateX(-50%); z-index:5;
    width:calc(100% - 28px); max-width:560px;
    padding:14px 14px calc(14px + env(safe-area-inset-bottom, 0px));
    border-radius:var(--radius) var(--radius) 0 0;
    background:var(--card); border:1px solid var(--line); border-bottom:0;
    box-shadow:0 -6px 20px rgba(0,0,0,.07);
  }
  
  /* A landscape phone leaves the fixed bar only about 200px of page, so it sits
     on top of the amount box and the key row and a tap on a key lands on the
     bar instead. Below 545px of viewport height the bar joins the flow, right
     after the calculator card, and the whole card stays reachable. */
  @media (max-height: 545px){
    .result{
      position:static; left:auto; bottom:auto; transform:none; z-index:auto;
      width:auto; max-width:none; margin-top:10px;
      border-radius:var(--radius); border-bottom:1px solid var(--line);
      box-shadow:0 1px 2px rgba(0,0,0,.06);
    }
  }
  
  .result .cap{font-size:.82rem; font-weight:600; color:var(--ink-2); margin:0 0 2px}
  .result .big{font-size:2.35rem; font-weight:800; letter-spacing:-.03em; line-height:1.05; font-variant-numeric:tabular-nums}
  .result .big .cur{font-size:1.5rem; font-weight:700; vertical-align:.08em; margin-right:1px}

  /* the per-person table: who pays what, what the parts add up to, and how far
     that is from the bill */
  .ptable-wrap{margin-top:10px; max-height:26vh; overflow-y:auto; -webkit-overflow-scrolling:touch; border-top:1px solid var(--line-2)}
  .ptable{width:100%; border-collapse:collapse; font-size:.92rem; font-variant-numeric:tabular-nums}
  .ptable th,.ptable td{padding:7px 0; text-align:right; vertical-align:top}
  .ptable th:first-child,.ptable td:first-child{text-align:left; padding-right:10px}
  .ptable thead th{
    position:sticky; top:0; z-index:1; background:var(--card);
    font-size:.7rem; font-weight:700; color:var(--ink-3); text-transform:uppercase; letter-spacing:.05em;
    padding:6px 0 5px; border-bottom:1px solid var(--line-2);
  }
  .ptable tbody th{font-weight:500; color:var(--ink-2); max-width:12em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .ptable tbody td{border-bottom:1px solid var(--line-2); color:var(--ink-2)}
  .ptable tbody td.pay{color:var(--ink); font-weight:700}
  .ptable tbody tr:last-child th,.ptable tbody tr:last-child td{border-bottom:0}
  .ptable .zero{color:var(--ink-3)}
  .ptable tfoot th,.ptable tfoot td{padding-top:8px; border-top:1px solid var(--line-2); font-weight:700; color:var(--ink)}
  .ptable tfoot th{font-weight:600; color:var(--ink-2)}

  /* one note, two faces: the cent remainder when rounding is off, who pays
     more or less once it is on */
  .remainder{margin:10px 0 0; padding-top:9px; border-top:1px solid var(--line-2); font-size:.82rem; line-height:1.5; color:var(--ink-2)}
  .remainder b{color:var(--ink); font-weight:600}

  .breakdown{margin:10px 0 0; padding-top:9px; border-top:1px solid var(--line-2); font-size:.86rem; color:var(--ink-2); display:flex; flex-wrap:wrap; gap:4px 14px}
  .breakdown b{color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums}
  .formula{margin:8px 0 0; font-size:.76rem; color:var(--ink-3); line-height:1.45}
  .reset{margin-top:10px; width:100%; min-height:44px; cursor:pointer; background:transparent; border:1px solid var(--line); border-radius:var(--radius-sm); color:var(--ink-2); font-size:.88rem; font-weight:600}

  /* ---------- privacy ---------- */
  .privacy{margin:16px 0 0; font-size:.82rem; line-height:1.5; color:var(--ink-2); text-align:center}

  /* ---------- intro ---------- */
  .intro{margin:18px 0 0; font-size:.88rem; line-height:1.55; color:var(--ink-2)}
  .intro b{color:var(--ink)}

  /* ---------- worked example: the line-by-line table ---------- */
  .worked{margin-top:30px}
  .worked h2{font-size:1.1rem; margin:0 0 8px; letter-spacing:-.01em}
  .worked h3{font-size:.95rem; margin:22px 0 4px; letter-spacing:-.005em}
  .worked p{margin:0 0 10px; font-size:.94rem; line-height:1.55; color:var(--ink-2)}
  .worked p b{color:var(--ink)}
  .worked .lede{font-size:.9rem; color:var(--ink-2); margin:0 0 4px}
  .tblwrap{margin:16px 0 0; overflow-x:auto; -webkit-overflow-scrolling:touch}
  .wk{width:100%; border-collapse:collapse; font-size:.8rem; font-variant-numeric:tabular-nums}
  .wk caption{text-align:left; font-size:.82rem; font-weight:600; color:var(--ink-2); padding:0 0 8px}
  .wk th,.wk td{padding:8px 6px; text-align:right; border-bottom:1px solid var(--line-2); white-space:nowrap}
  .wk th{font-size:.68rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-3); border-bottom:1px solid var(--line)}
  .wk th:first-child,.wk td:first-child{text-align:left; white-space:normal}
  .wk td.b,.wk th.b{text-align:left; color:var(--ink-3); font-size:.72rem; font-weight:400; text-transform:none; letter-spacing:0}
  .wk tr.tot td{font-weight:700; border-top:1px solid var(--line); border-bottom:0; color:var(--ink)}
  .wk tr.tot td.b{font-weight:600; color:var(--ink-2)}
  .wk td.z{color:var(--ink-3)}
  .wk .exact{font-size:.68rem; color:var(--ink-3); font-weight:400; display:block; line-height:1.35}
  .warn-note{margin:10px 0 0; padding:9px 11px; background:var(--card); border:1px solid var(--line); border-left:3px solid var(--warn); border-radius:var(--radius-sm); font-size:.8rem; line-height:1.55; color:var(--ink-2)}
  .warn-note b{color:var(--ink)}
  .steps{margin:12px 0 0; padding:0; list-style:none; counter-reset:rm}
  .steps li{counter-increment:rm; position:relative; padding:0 0 0 26px; margin:0 0 8px; font-size:.9rem; line-height:1.55; color:var(--ink-2)}
  .steps li::before{content:counter(rm); position:absolute; left:0; top:1px; width:18px; height:18px; border-radius:50%; background:var(--accent-soft); color:var(--accent); font-size:.68rem; font-weight:700; display:flex; align-items:center; justify-content:center}
  .steps li b{color:var(--ink)}

  /* ---------- faq ---------- */
  .faq{margin-top:30px}
  .faq h2{font-size:1.1rem; margin:0 0 12px; letter-spacing:-.01em}
  .faq details{background:var(--card); border:1px solid var(--line); border-radius:var(--radius-sm); margin-bottom:8px; overflow:hidden}
  .faq summary{
    cursor:pointer; padding:13px 14px; font-weight:600; font-size:.95rem; list-style:none;
    display:flex; justify-content:space-between; gap:12px; align-items:flex-start;
  }
  .faq summary::-webkit-details-marker{display:none}
  .faq summary::after{content:"+"; flex:none; color:var(--ink-3); font-weight:400; font-size:1.15rem; line-height:1}
  .faq details[open] summary::after{content:"–"}
  .faq .a{padding:0 14px 14px; margin:0; color:var(--ink-2); font-size:.92rem}
  .faq .a b{color:var(--ink)}
  footer{margin-top:26px; font-size:.78rem; color:var(--ink-3); text-align:center}
  .foot-nav{display:flex; flex-wrap:wrap; gap:0 16px; justify-content:center; margin-top:6px; font-size:.82rem}
  .foot-nav a{color:var(--ink-2); text-decoration:none; padding:12px 4px; display:inline-flex; align-items:center}
  .foot-nav a:hover{color:var(--accent); text-decoration:underline}

  /* ---------- short screens ----------
     The result card is pinned to the bottom of the screen so the answer is always
     in view. On a short screen that pin can sit on top of the switches, so on
     short viewports we tighten the whole column until the natural layout fits
     above the card and nothing is covered. */
  @media (max-height:740px){
    body{padding:8px 12px 16px}
    header{margin:0 0 8px}
    h1{font-size:1.25rem; margin-bottom:3px}
    .tagline{font-size:.86rem}
    .card{padding:11px}
    #billHint{display:none}
    .amount-row .cur{font-size:1.3rem}
    #bill{font-size:1.5rem; padding:7px 0}
    .people{margin-top:9px}
    .switches{margin-top:9px; gap:6px}
    .sw{min-height:42px; padding:7px 8px; font-size:.86rem}
    .result{margin-top:8px; padding:10px 12px}
    .result .big{font-size:1.9rem}
    .ptable-wrap{max-height:22vh}
    .breakdown{margin-top:8px; padding-top:7px; font-size:.8rem}
    .formula{margin-top:6px; font-size:.72rem}
    .reset{margin-top:8px; min-height:38px}
  }
  @media (max-height:620px){
    .result .big{font-size:1.6rem}
    .result .cap{font-size:.76rem}
    .ptable-wrap{max-height:18vh}
  }
  /* the trimmings fold away when the bar would otherwise take too much of the
     screen — set by script, so the number always stays the biggest thing there.
     The table and the remainder note never fold: they are the answer. */
  body.compactcard .breakdown,
  body.compactcard .formula,
  body.compactcard .reset{display:none}
  body.compactcard .result{padding:9px 12px calc(9px + env(safe-area-inset-bottom, 0px))}
  body.compactcard .result .big{font-size:1.9rem}
  body.compactcard .ptable-wrap{max-height:18vh; margin-top:7px}
  body.compactcard .remainder{margin-top:7px; padding-top:7px}
  /* ---------- the open panel owns the middle of the screen ----------
     While a panel is open the card folds to its headline figure: the answer
     stays on screen and the panel gets the height it needs to show the
     controls without an inner scroll. Nothing leaves the DOM — the table, the
     formula, the copy button and the reset all come back the moment the panel
     closes, so the copy builder and a screen reader still see every row.
     The chip row is not in this list on purpose: above 1024px it stays visible
     even with a panel open (the phone rule below is what hides it there). */
  body.panelopen #result .ptable-wrap,
  body.panelopen #result .remainder,
  body.panelopen #result .formula,
  body.panelopen #result .copybtn,
  body.panelopen #result .copymsg,
  body.panelopen #result .reset{display:none}
  body.panelopen #result{padding-top:9px; padding-bottom:calc(9px + env(safe-area-inset-bottom, 0px))}
  /* Under 545px the card normally sits in the flow and scrolls with the page.
     While a panel is open it becomes a thin bar pinned to the bottom instead,
     so the panel has the whole middle of the screen; closing the panel puts it
     straight back into the flow. */
  @media (max-height: 545px){
    body.panelopen .result{
      position:fixed; left:50%; bottom:0; transform:translateX(-50%);
      width:calc(100% - 28px); max-width:560px; z-index:5; margin-top:0;
      border-radius:var(--radius) var(--radius) 0 0; border-bottom:0;
      box-shadow:0 -6px 20px rgba(0,0,0,.07);
    }
  }
  /* Chips: on a wide screen they are always there, folded or not. On a phone
     they are gone — three of them in a 324px card either wrap onto a second
     line or need a smaller font, and both were ruled out. */
  @media (min-width: 1024px){
    body.compactcard .breakdown{display:flex; margin-top:4px; padding-top:4px}
  }
  @media (max-width: 1023px){
    .breakdown{display:none}
  }
  /* the amount of the thing the panel is about, and the running total */
  .panline{
    display:flex; align-items:baseline; justify-content:space-between; gap:10px;
    margin:0; font-size:16px; color:var(--ink-2); font-variant-numeric:tabular-nums;
  }
  .panline b{color:var(--ink); font-weight:700}
  .panline.head{margin:0 0 10px; padding-bottom:8px; border-bottom:1px solid var(--line-2)}
  .panline.foot{margin:12px 0 0; padding-top:8px; border-top:1px solid var(--line-2)}
  .panline.foot b{font-size:20px}
.ad-slot{margin:28px 0 0;padding-top:22px;border-top:1px solid var(--line);max-width:640px}
.ad-label{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);margin-bottom:10px}
.ad-body{max-width:100%}
.ad-slot--text .ad-body{font-size:16px;font-weight:700;line-height:1.5}
.ad-slot--text .ad-body a{display:inline-block;min-height:44px;line-height:44px;text-decoration:underline}
.ad-slot--text .ad-body img{width:1px;height:1px;border:0;vertical-align:middle}
  /* ---------- worked example: folded on a phone ----------
     The line-by-line table is the tallest block on the page (1,244px at 390
     wide). On a phone it starts folded behind a one-line summary; the table
     itself never leaves the DOM, and above 640px the summary is hidden and the
     block is open, so a desktop renders exactly what it rendered before. */
  .wk-fold > summary{
    display:block; cursor:pointer; padding:9px 11px;
    background:var(--accent-soft); border:1px solid var(--accent); border-radius:var(--radius-sm);
    list-style:none;
  }
  .wk-fold > summary::-webkit-details-marker{display:none}
  .wk-fold > summary:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
  .wk-lead{display:block; font-size:.85rem; font-weight:700; color:var(--accent); line-height:1.3}
  .wk-sub{display:block; margin-top:3px; font-size:.72rem; color:var(--ink-2); line-height:1.4}
  .wk-hide{display:none; font-size:.8rem; font-weight:700; color:var(--accent)}
  .wk-fold[open] .wk-lead,.wk-fold[open] .wk-sub{display:none}
  .wk-fold[open] .wk-hide{display:block}
  @media (min-width: 641px){
    .wk-fold > summary{display:none}
  }
  /* the explanation sits under the controls now: on a short screen the panel
     scrolls, and what has to be reachable without scrolling is the control */
  .opts .panel .hint:last-child{
    margin:10px 0 0; padding-top:8px; border-top:1px solid var(--line-2);
  }
  /* ===== shell polish (2026-10-16) =========================================
     A self-contained visual layer appended AFTER the page's own stylesheet.
     It touches only the shell: type scale, spacing rhythm, radii, control
     shapes, hover/focus/disabled states. No markup, copy, formula, colour
     token or layout structure is changed. Everything here overrides by
     source order at equal specificity, so the block above stays byte-intact.
     ---------------------------------------------------------------------- */

  /* --- R4: one type scale, four tiers instead of ~three dozen steps -------
     Exactly four sizes on the page: 32 (display) · 20 (heading/big control)
     · 16 (body) · 13 (meta). Every rule below pins an explicit px so no rem,
     no em and no UA default can slip a fifth size in. Weights are left to the
     page's own design, but every size resolves to one of the four. */
  html,body{font-size:16px}
  h1{font-size:32px; line-height:1.2}
  .worked h2,.faq h2,.worked h3{font-size:20px}
  .tagline,.pnote,.field-label,.panel .hint,.inline .suffix,
  .sw,.additem,.seg button,.warn,.warn-note,.steps li,.worked p,.worked .lede,
  .faq .a,.faq summary,.intro,.privacy,.breakdown,.reset,.item-top input,
  .wk,.wk th,.wk td,.ptable,.ptable th,.ptable td,.foot-nav,.foot-nav a,
  #peopleVal,.result .big .cur,.amount-row .cur,.stepper button{
    font-size:16px;
  }
  .result .cap,.remainder,.wk caption,.wk td.b,.wk th.b,.wk .exact,.who .lbl,
  .who button,.ad-label,.ptable thead th,.wk th,footer,.steps li::before,
  .formula,.item-top .del,.who .lbl{font-size:13px}
  #bill,.result .big{font-size:32px}
  .faq summary::after{font-size:20px}
  .amount-row .cur{font-size:20px}
  .stepper button{font-size:20px}
  #peopleVal{font-size:20px}
  .result .big .cur{font-size:20px}

  /* --- R5: one spacing set, multiples of 8 only --------------------------
     The page mixes 7/9/10/11/12/13/14/18/22/26/28/30. These rules pull the
     shell's own rhythm onto the 8 grid; horizontal paddings that are purely
     optical (e.g. inside pills) follow the same grid. */
  body{padding:16px 16px 40px}
  header{margin:0 0 16px}
  .card{padding:16px}
  .field-label{margin:0 0 8px}
  .amount-row{padding:0 16px}
  #bill{padding:16px 0}
  .people{margin-top:16px; gap:16px}
  .pnote{margin:8px 0 0}
  .switches{margin-top:16px; gap:8px}
  .sw{padding:8px 16px; gap:8px}
  .sw .dot{width:8px; height:8px}
  .panel{margin-top:16px; padding:16px}
  .panel .hint{margin:0 0 16px}
  .seg{gap:8px}
  .seg button{padding:8px 16px; min-height:48px}
  .inline{gap:8px; margin-top:16px}
  .inline input[type=text]{padding:16px}
  .item{padding:16px; margin-bottom:8px}
  .item-top{gap:8px}
  .item-top input.item-name,.item-top input.item-amt{padding:8px 16px; min-height:48px}
  .item-top .del{width:48px; height:48px}
  .who{gap:8px; margin-top:8px}
  .who button{padding:8px 16px; min-height:40px}
  .additem{margin-top:8px}
  .warn{margin:8px 0 0}
  .result{padding:16px 16px calc(16px + env(safe-area-inset-bottom, 0px))}
  .result .cap{margin:0 0 8px}
  .ptable-wrap{margin-top:16px}
  .ptable th,.ptable td{padding:8px 0}
  .ptable thead th{padding:8px 0}
  .ptable tfoot th,.ptable tfoot td{padding-top:8px}
  .remainder{margin:16px 0 0; padding-top:8px}
  .breakdown{margin:16px 0 0; padding-top:8px; gap:8px 16px}
  .formula{margin:8px 0 0}
  .reset{margin-top:16px; min-height:48px}
  .privacy{margin:16px 0 0}
  .intro{margin:16px 0 0}
  .worked{margin-top:32px}
  .worked h2{margin:0 0 8px}
  .worked h3{margin:24px 0 8px}
  .worked p{margin:0 0 16px}
  .worked .lede{margin:0 0 8px}
  .tblwrap{margin:16px 0 0}
  .wk caption{padding:0 0 8px}
  .wk th,.wk td{padding:8px}
  .warn-note{margin:16px 0 0; padding:16px}
  .steps{margin:16px 0 0}
  .steps li{padding:0 0 0 32px; margin:0 0 8px}
  .steps li::before{width:24px; height:24px}
  .faq{margin-top:32px}
  .faq h2{margin:0 0 16px}
  .faq details{margin-bottom:8px}
  .faq summary{padding:16px; gap:16px}
  .faq .a{padding:0 16px 16px}
  footer{margin-top:32px}
  .foot-nav{gap:0 16px; margin-top:8px}
  .foot-nav a{padding:16px 8px; min-height:48px}
  .ad-slot{margin:32px 0 0; padding-top:16px}
  .ad-label{margin-bottom:8px}

  /* --- R3: every tappable target reaches 44px ----------------------------
     The two prose links were 17px tall. They become inline-flex rows with a
     44px hit area without changing a single word or moving them in the flow. */
  .privacy a,.intro a,.faq .a a,.remainder a,.breakdown a,.worked p a{
    display:inline-flex; align-items:center; min-height:44px; padding:0 4px;
  }
  .ad-slot--text .ad-body a{min-height:48px; line-height:48px}

  /* --- R7: complete state set -------------------------------------------
     Hover / focus-visible / active / disabled for the shell's own controls.
     (The page already ships :focus-visible and :active; these fill the gaps
     and unify the ring on the polished shapes.) */
  @media (hover:hover){
    .seg button:hover,.additem:hover,.reset:hover,.who button:hover,
    .foot-nav a:hover{color:var(--accent); border-color:var(--accent)}
    .seg button:hover,.who button:hover{background:var(--accent-soft)}
    .item-top .del:hover{color:var(--accent); border-color:var(--accent)}
  }
  .seg button:active,.additem:active,.reset:active,.who button:active{transform:translateY(1px)}
  #bill:disabled,.inline input[type=text]:disabled,.item-top input:disabled{
    color:var(--ink-3); cursor:not-allowed;
  }
  .seg button:disabled,.additem:disabled,.reset:disabled,.who button:disabled,
  .sw:disabled{
    color:var(--ink-3); border-color:var(--line-2); cursor:not-allowed; opacity:.6;
  }
  .sw[aria-disabled=true]{color:var(--ink-3); border-color:var(--line-2); opacity:.6; cursor:not-allowed}

  /* --- type rhythm: one line-height per tier --------------------------- */
  h1{letter-spacing:-.02em}
  .worked h2,.faq h2{letter-spacing:-.01em; line-height:1.3}
  body{line-height:1.6}
  .result .big{line-height:1.05}
  .privacy,.intro,.remainder,.breakdown,.formula,.worked p,.worked .lede,
  .warn-note,.steps li,.faq .a{line-height:1.55}

  /* --- radii: one pair, on the 8 grid --------------------------------- */
  :root{--radius:16px; --radius-sm:8px}
  /* the two controls that hardcoded their own radius are pulled onto the pair */
  .seg button,.item-top .del{border-radius:8px}

  /* --- surfaces: one soft elevation, one hairline --------------------- */
  .card{border-color:var(--line-2)}
  .result{box-shadow:0 -8px 24px rgba(0,0,0,.07)}
  

  /* --- short screens: keep the trimmed values on the grid too --------- */
  @media (max-height:740px){
    body{padding:8px 16px 16px}
    header{margin:0 0 8px}
    h1{font-size:32px; margin-bottom:8px}
    .tagline{font-size:16px}
    .card{padding:8px}
    .amount-row .cur{font-size:20px}
    #bill{font-size:32px; padding:8px 0}
    .people{margin-top:8px}
    .switches{margin-top:8px; gap:8px}
    .sw{min-height:48px; padding:8px 16px; font-size:16px}
    .result{margin-top:8px; padding:8px 16px}
    .result .big{font-size:32px}
    .breakdown{margin-top:8px; padding-top:8px; font-size:16px}
    .formula{margin-top:8px; font-size:13px}
    .reset{margin-top:8px; min-height:48px}
  }
  @media (max-height:620px){
    .result .big{font-size:32px}
    .result .cap{font-size:13px}
  }
  body.compactcard .result{padding:8px 16px calc(8px + env(safe-area-inset-bottom, 0px))}
  body.compactcard .result .big{font-size:32px}
  body.compactcard .ptable-wrap{margin-top:8px}
  body.compactcard .remainder{margin-top:8px; padding-top:8px}

  /* ---------- option strip: one row, panel floats in place ----------
     Five short keys, one row, no scrolling and no wrapping at any width. The
     copy was shortened first (By item, Round), then padding and gap, and only
     then the size — 12px is the floor, and the tap target stays at 44px.
     The panel is an overlay at every width, above the pinned result bar, so
     opening one never moves the page: scroll position and the top of the
     amount box stay exactly where they were. */
  .opts{position:relative}
  .opts .switches{margin-top:8px; flex-wrap:nowrap; gap:5px}
  .opts .sw{
    flex:0 1 auto; min-width:0; min-height:44px; padding:6px 8px; gap:5px;
    font-size:12px; letter-spacing:0; white-space:nowrap;
  }
  /* The key row is the only place on this page where the type is pinned. Five
     keys have to stay on one line; a system font scale that grows them turns
     the row into a wrapped or a clipped one. text-size-adjust is the switch
     that stops the mobile font scale, and the px size is what makes 100% and
     130% render identically. It is scoped to the row on purpose — no other
     element on the page gets a lock here. */
  .opts .switches,
  .opts .switches .sw,
  .opts .switches .sw .dot{
    -webkit-text-size-adjust:100%;
    text-size-adjust:100%;
  }
  .opts .switches .sw{font-size:12px}
  .opts .sw .dot{width:6px; height:6px}
  .opts .panel{
    position:absolute; top:calc(100% + 8px); left:0; width:100%; z-index:6;
    margin:0; max-height:60vh; overflow-y:auto; -webkit-overflow-scrolling:touch;
    box-shadow:0 12px 28px rgba(0,0,0,.18);
  }
  /* no room below the key row: open upwards instead of hanging off the screen */
  .opts .panel.up{top:auto; bottom:calc(100% + 8px)}
  

  /* ---------- copy breakdown ---------- */
  .copybtn{
    margin-top:10px; width:100%; min-height:44px; cursor:pointer;
    background:var(--accent-soft); border:1px solid var(--accent); border-radius:var(--radius-sm);
    color:var(--accent); font-size:.88rem; font-weight:700;
  }
  .copybtn[data-state=done]{background:var(--ok); border-color:var(--ok); color:#fff}
  .copybtn:disabled{background:transparent; border-color:var(--line); color:var(--ink-3); cursor:default}
  .copymsg{margin:7px 0 0; font-size:.78rem; line-height:1.45; color:var(--warn)}
  .copytext{
    margin-top:7px; width:100%; min-height:96px; padding:8px 10px;
    background:var(--bg); border:1px solid var(--line); border-radius:var(--radius-sm); color:var(--ink);
    font:12px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; resize:vertical;
  }
.brandline{display:flex;align-items:flex-start;gap:0;margin:0 0 12px;padding:0;border:0;background:none}.brandline .bn{font-size:28px;line-height:1.25;font-weight:800;letter-spacing:-.01em;color:var(--ink,#14161a)}.brandline .bt{font-size:13px;line-height:28px;font-weight:500;color:var(--ink-2,#5b6270);max-width:150.56px;text-wrap:balance}@media (min-width:768px){.brandline .bn{font-size:44px}.brandline .bt{max-width:236.59px}}
.toolbar{margin:0 0 10px;padding:8px 9px;background:var(--card,#fff);border:1px solid var(--line,#e3e6ec);border-radius:var(--radius,14px)}.tb-cats{display:flex;flex-wrap:wrap;gap:5px}.tb-cat{display:inline-flex;align-items:center;min-height:28px;padding:3px 9px;border-radius:999px;border:1px solid var(--line,#e3e6ec);background:var(--bg,#f5f6f8);color:var(--ink-2,#5b6270);font-size:.73rem;font-weight:700;text-decoration:none;line-height:1.15;white-space:nowrap}.tb-cat:hover{color:var(--ink,#14161a);border-color:var(--accent,#1f6feb)}.tb-cat.on{background:var(--accent,#1f6feb);border-color:var(--accent,#1f6feb);color:#fff}.tb-tools{display:flex;flex-wrap:wrap;gap:0 9px;margin:6px 0 0;padding:6px 2px 0;border-top:1px solid var(--line-2,#eef0f4)}.tb-tool{color:var(--ink-3,#8a919e);font-size:.72rem;font-weight:600;text-decoration:none;line-height:1.5;white-space:nowrap}.tb-tool:hover{color:var(--accent,#1f6feb);text-decoration:underline}.tb-tool.on{color:var(--accent,#1f6feb);font-weight:800;text-decoration:underline;text-underline-offset:2px}@media (max-width:640px){.toolbar{margin:0 0 8px;padding:6px 0 6px 8px}.tb-cats{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;gap:5px;padding-right:8px;scrollbar-width:none;-webkit-overflow-scrolling:touch}.tb-cats::-webkit-scrollbar{display:none}.tb-cat{flex:0 0 auto;font-size:.71rem;padding:3px 8px;min-height:26px}.tb-tools{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;gap:0 10px;margin:5px 0 0;padding:5px 8px 0 0;scrollbar-width:none;-webkit-overflow-scrolling:touch}.tb-tools::-webkit-scrollbar{display:none}.tb-tool{flex:0 0 auto;font-size:.71rem}}
/* ---- site4 shell compat ---- */
main.wrap{max-width:560px;margin:0 auto}
.brandline{display:grid;grid-template-columns:min-content;align-items:start;gap:0}
.brandline .bt{max-width:none}
p{margin:1em 0}
.card .panel{display:block;background:none;border:0;border-radius:0;box-shadow:none;padding:0;margin-top:0}
.card .panel + .panel{margin-top:18px;padding-top:18px;border-top:1px solid var(--line-2)}
.card:empty,.ad-slot:empty,.privacy:empty,.intro:empty,.tagline:empty,.faq:empty,.worked:empty{display:contents}
.card{overflow-x:auto}
.worked .copy{padding-bottom:0}
.foot-nav{margin-bottom:0;max-width:none}