/* settings — page-scoped styles. Owned by this page only.
   Shared primitives live in planner/planner.css and are READ-ONLY from here.
   Scope every rule under [data-view="settings"] so it cannot leak to another page.

   Four ideas hold this page together:

   1. This page is six INDEPENDENT groups, not one 36-input form. So the PAGE
      is a grid, not a stack: the two small groups pair up on a wide screen and
      the two genuinely wide ones (the rate matrix, the contract's rules) take
      a full row. An earlier version capped every panel at 760px and left-
      aligned it, which is right for one column of inputs and wrong for six
      unrelated cards — it left half a 1920px window empty and ran to 5200px.
   2. The FORMS are still capped, at --set-form, and each control is still
      capped to its content. Widening the layout must not produce a 900px
      number box, so the cap moved from the panel to the .form inside it.
   3. The label owns the whole track, the control owns only as much of it as
      its longest plausible value needs. That is why "Free to reduce until"
      sits on one line above a 6rem number box instead of wrapping to three.
   4. The rate grid is the one thing that must never be squeezed — it is a
      matrix of quoted money, so it gets boxed right-aligned tabular figures,
      a column that sizes to the figures rather than to the window, and on a
      phone it folds into one labelled card per rate rather than scrolling
      Tier 2 off the right edge where a wrong number can hide.

   Anything that enumerates is a list (.readout, .rules, .ruleset), never a
   middot-separated sentence: reference data read under pressure needs one
   line per item, its figure legible and its deadline shown as a date. */

[data-view="settings"]{
  --set-form:46rem;    /* every form on this page — the CONTROLS, not the card */
  --set-pair:1280px;   /* below this the page is one column, top to bottom */
}

[data-view="settings"] .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

/* ── the page ──────────────────────────────────────────────────────────── */
/* .view > * is a flex column in the design system; this page needs a grid, and
   settings.css loads after planner.css so the same-specificity override lands.
   One column by default: phones, tablets and small laptops read top to bottom. */
.view > [data-view="settings"]{display:grid;align-items:stretch;gap:var(--s6);
  grid-template-columns:minmax(0,1fr)}

/* The design system caps .panel--form at 760px. That cap is the bug on this
   page — it belongs to the form, not to the card around it. */
[data-view="settings"] > .panel{max-width:none;min-width:0;
  display:flex;flex-direction:column;
  scroll-margin-top:calc(var(--h-topbar,56px) + var(--s4))}
/* Paired cards stretch to the taller of the two, so the derived figures stay
   on the bottom edge of the card instead of floating in the middle of it. */
[data-view="settings"] > .panel > .panel__foot{margin-top:auto}

@media (min-width:1280px){
  /* Two independent small groups sit side by side; the rate matrix, the
     checklist repeater and the contract's rules keep a full row each. */
  .view > [data-view="settings"]{grid-template-columns:repeat(2,minmax(0,1fr))}
  [data-view="settings"] > .jump,
  /* seven dates read as one schedule — half a row would stack them into a
     two-column list nobody can scan across */
  [data-view="settings"] > #g-dates,
  [data-view="settings"] > #g-party,
  [data-view="settings"] > #g-rooms,
  [data-view="settings"] > #g-contract{grid-column:1/-1}
}

/* ── the index ─────────────────────────────────────────────────────────── */
/* Buttons, not links: the app routes on location.hash, so an href="#g-rooms"
   would be read as a view id and bounce you back to Guests. Nothing is hidden
   behind this — every group it names is on the page under it either way. */
[data-view="settings"] .jump{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center}
[data-view="settings"] .jump button{display:inline-flex;align-items:center;
  min-height:var(--h-ctl-md);padding:0 .7rem;cursor:pointer;
  background:var(--surface);color:var(--mocha);border:1px solid var(--line);border-radius:999px;
  font:inherit;font-size:var(--ft-meta);line-height:1}
[data-view="settings"] .jump button:hover{border-color:var(--taupe);background:var(--sand);
  color:var(--ink)}
[data-view="settings"] .jump button:focus-visible{outline:2px solid var(--terracotta);
  outline-offset:2px}

/* ── panels ────────────────────────────────────────────────────────────── */
[data-view="settings"] .panel__head--sub{border-top:1px solid var(--line);border-bottom:0}
[data-view="settings"] .panel__head--sub h3{font-size:1rem}
[data-view="settings"] .panel__body--tight{padding:var(--s4) var(--s5)}
[data-view="settings"] .panel__body--split{border-top:1px solid var(--line);
  display:grid;align-items:start;gap:var(--s6) var(--s5);
  grid-template-columns:repeat(auto-fit,minmax(min(19rem,100%),1fr))}
[data-view="settings"] .panel__body--split .grp + .grp{margin-top:0}
/* an empty repeater shouldn't cost 100px of nothing */
[data-view="settings"] #reserved.empty{padding:var(--s4) var(--s5);text-align:left}

/* Terms on the left, what they currently cost on the right — the same reading
   order as the single column, laid side by side once there is room for both. */
[data-view="settings"] .pair{display:grid;align-items:start;gap:var(--s6);
  grid-template-columns:minmax(0,1fr)}
[data-view="settings"] .pair__a,[data-view="settings"] .pair__b{min-width:0}
[data-view="settings"] .pair__b > :first-child{margin-top:0}
@media (min-width:1280px){
  [data-view="settings"] .pair{grid-template-columns:minmax(0,26rem) minmax(0,1fr)}
}

/* ── the form grid ─────────────────────────────────────────────────────── */
[data-view="settings"] .form{display:grid;align-items:start;gap:var(--s5) var(--s4);
  grid-template-columns:repeat(auto-fill,minmax(11rem,1fr));max-width:var(--set-form)}
[data-view="settings"] .field{max-width:none;min-width:0}
/* labels wrap instead of overflowing, and carry their unit as a plain-case
   suffix so the label itself stays short */
[data-view="settings"] .field > span{font-size:var(--ft-label);letter-spacing:.1em;
  flex-wrap:wrap;line-height:1.35;gap:.3rem;min-height:2.2em;align-items:flex-end}
[data-view="settings"] .field > span i{font-size:var(--ft-label);letter-spacing:.02em;
  text-transform:none;color:var(--muted)}
/* the control is capped to its content; the label keeps the whole track */
[data-view="settings"] .field > input,
[data-view="settings"] .field > select{max-width:var(--ctl,100%)}
[data-view="settings"] .field[data-size=num]{--ctl:6rem}
[data-view="settings"] .field[data-size=money]{--ctl:8rem}
[data-view="settings"] .field[data-size=date]{--ctl:11.5rem}
[data-view="settings"] .field[data-size=short]{--ctl:14rem}
[data-view="settings"] .field[data-size=name]{--ctl:22rem;grid-column:1/-1}
[data-view="settings"] .field[data-size=notes]{--ctl:none;grid-column:1/-1}

/* ── key dates ─────────────────────────────────────────────────────────── */
/* Seven independent deadlines, so seven independent cells rather than a form
   grid — each one carries its own derived line and its own complaint, and
   those are different heights, which a shared baseline would fight.
   `align-items:start` keeps a two-line warning from stretching its neighbours.
   The control is the platform's date input at its natural width (--ctl from
   .field[data-size=date]); the text under it takes the whole track. */
[data-view="settings"] .kd-list{display:grid;align-items:start;
  gap:var(--s5) var(--s5);grid-template-columns:repeat(auto-fill,minmax(min(17rem,100%),1fr))}
[data-view="settings"] .kd-lead{margin:0 0 var(--s5);max-width:var(--w-prose);
  font-size:var(--ft-meta);color:var(--muted);line-height:var(--lh-ui)}
[data-view="settings"] .kd-lead b{color:var(--ink)}

/* The point of the panel: what the date MEANS, in the same cell as the date.
   Kept at body weight and full colour — it is the answer, not a footnote. */
[data-view="settings"] .kd__when{color:var(--ink);font-variant-numeric:tabular-nums}
[data-view="settings"] .kd__when i{font-style:normal;color:var(--muted)}
/* the static explanation of the field, below the live figures */
[data-view="settings"] .kd__hint{color:var(--muted)}
/* Warned, not blocked: the field keeps whatever was typed and says why it
   looks wrong. Empty by default, and it takes no room while it is. */
[data-view="settings"] .kd__warn{display:none;color:var(--bad)}
[data-view="settings"] .kd[data-kind=warn] .kd__warn{display:block}
[data-view="settings"] .kd[data-kind=warn] > input{border-color:var(--bad-line)}
[data-view="settings"] .kd[data-kind=warn] > span:first-child{color:var(--bad)}

/* ── derived figures ───────────────────────────────────────────────────── */
/* What the inputs above currently add up to. A list of value/label pairs, so
   three numbers read as three numbers. Sat on the bottom edge of its card. */
[data-view="settings"] .readout{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s6);
  list-style:none;margin:var(--s5) 0 0;padding:0}
[data-view="settings"] .panel__foot > .readout{margin:0;flex:1 1 auto}
[data-view="settings"] .readout li{min-width:0}
[data-view="settings"] .readout b{display:block;font-family:var(--display);font-weight:400;
  font-size:1.25rem;line-height:1.15;color:var(--ink);font-variant-numeric:tabular-nums}
[data-view="settings"] .readout span{display:block;margin-top:.1rem;font-size:var(--ft-label);
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
[data-view="settings"] .readout li[data-kind=warn] b{color:var(--gold-ink)}
[data-view="settings"] .readout li[data-kind=bad] b{color:var(--bad)}

/* ── contract terms, as reference data ─────────────────────────────────── */
[data-view="settings"] .rules__h{margin:var(--s6) 0 var(--s3);font-family:var(--ui);
  font-size:var(--ft-label);font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted)}
[data-view="settings"] .rules{margin:0;border-top:1px solid var(--line)}
[data-view="settings"] .rule{display:grid;gap:.1rem var(--s4);
  grid-template-columns:minmax(0,13rem) minmax(0,1fr);align-items:baseline;
  padding:var(--s3) 0;border-bottom:1px solid var(--line)}
[data-view="settings"] .rule dt{font-size:var(--ft-meta);color:var(--muted)}
[data-view="settings"] .rule dd{margin:0;min-width:0;display:flex;flex-wrap:wrap;
  align-items:baseline;gap:.15rem var(--s3)}
[data-view="settings"] .rule dd b{font-size:var(--ft-body);font-weight:700;color:var(--ink);
  font-variant-numeric:tabular-nums;white-space:nowrap}
[data-view="settings"] .rule dd span{font-size:var(--ft-meta);color:var(--muted);
  font-variant-numeric:tabular-nums}
[data-view="settings"] .rule[data-kind=bad] dd b{color:var(--bad)}
[data-view="settings"] .rule[data-kind=bad] dd span{color:var(--bad)}

/* short parallel statements — four rules about filling rooms are four lines */
[data-view="settings"] .ruleset{margin:var(--s3) 0 0;padding:0 0 0 1.05rem;
  max-width:var(--w-prose);font-size:var(--ft-meta);color:var(--muted);line-height:var(--lh-ui)}
[data-view="settings"] .ruleset li{margin-bottom:.2rem}
[data-view="settings"] .ruleset li::marker{color:var(--muted)}
[data-view="settings"] .ruleset b{color:var(--ink)}

/* ── consequences ──────────────────────────────────────────────────────── */
/* Distinct from .hint, which only explains: this one says what breaks
   elsewhere when you change the control next to it. */
[data-view="settings"] .says{margin-top:var(--s4);padding:var(--s3);border-radius:2px;
  background:var(--surface-2);border:1px solid var(--line);
  font-size:var(--ft-meta);color:var(--muted);line-height:var(--lh-ui);
  max-width:var(--w-prose)}
[data-view="settings"] .says[data-kind=loud]{border-color:var(--terracotta);color:var(--ink)}
[data-view="settings"] .says + .tools{margin-top:var(--s4)}

/* ── field groups ──────────────────────────────────────────────────────── */
[data-view="settings"] .grp{border:0;margin:0;padding:0;min-width:0}
[data-view="settings"] .grp + .grp{margin-top:var(--s6)}
[data-view="settings"] .grp > legend{float:left;width:100%;padding:0 0 var(--s2);
  margin-bottom:var(--s4);border-bottom:1px solid var(--line);
  font-size:var(--ft-label);font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted)}
[data-view="settings"] .grp > legend + *{clear:both}

/* ── remove buttons ────────────────────────────────────────────────────── */
/* .x is only styled inside .rec by the design system, so the ones in the rate
   grid arrive as bare browser buttons. One shape everywhere, and a real focus
   ring on every control that didn't have one. */
[data-view="settings"] .x{display:inline-flex;align-items:center;justify-content:center;
  width:var(--h-ctl-md);height:var(--h-ctl-md);padding:0;flex:none;
  background:none;border:1px solid transparent;border-radius:2px;
  color:var(--muted);font-size:1.15rem;line-height:1;cursor:pointer}
[data-view="settings"] .x:hover{color:var(--bad);border-color:var(--bad-line);background:#fff}
[data-view="settings"] .x:focus-visible{outline:2px solid var(--terracotta);outline-offset:2px}
[data-view="settings"] .chip:focus-visible{outline:2px solid var(--terracotta);outline-offset:2px}
[data-view="settings"] .tablewrap:focus-visible{outline:2px solid var(--terracotta);
  outline-offset:-2px}

/* ── repeater rows: reserved tables, and the bridal checklist ──────────── */
/* Placed explicitly rather than auto-flowed: the × stays on the line it
   deletes, and the wide field (tag chips / "what it means") is a second row
   until there is room to put it on the first. */
[data-view="settings"] .rec{display:grid;align-items:end;gap:var(--s3) var(--s4);
  grid-template-columns:minmax(0,8rem) minmax(0,1fr) var(--h-ctl-md);
  padding:var(--s4) var(--s5)}
[data-view="settings"] .rec > .field[data-size=num]{grid-area:1/1}
[data-view="settings"] .rec > .field[data-size=short]{grid-area:1/2}
[data-view="settings"] .rec > .x{grid-area:1/3;margin:0;align-self:end}
[data-view="settings"] .rec > .field[data-size=notes]{grid-area:2/1/3/4;max-width:none}
[data-view="settings"] .rec .chips{gap:var(--s2)}

/* A CHECKLIST step goes on one line once its list is wide enough to hold one.
   Eight steps at two lines each is 400px of scroll for no reason. Measured
   against the list, not the window: the same .rec markup sits in a half-width
   card (reserved tables) and a full-width one (the checklist), and the window
   cannot tell them apart. Below the threshold there is no room for a readable
   description, so the second line comes back.

   Reserved-table rows are deliberately NOT included: their wide field is nine
   tag chips, which want a line of their own at any width.

   The description stops at 44rem — it is prose and wants a measure, not a
   1400px slot — and the × follows it instead of drifting to the far edge of
   the card with nothing in between. The trailing track soaks up the rest. */
[data-view="settings"] .recs{container-type:inline-size}
@container (min-width:50rem){
  /* "Applies to" is placed explicitly before the × — left to auto-flow it landed
     in the trailing track, which put the delete button between two fields. */
  [data-view="settings"] .rec[data-step]{align-items:end;grid-template-columns:
    minmax(0,8rem) minmax(0,15rem) minmax(0,40rem) minmax(0,11rem) var(--h-ctl-md) minmax(0,1fr)}
  [data-view="settings"] .rec[data-step] > .field[data-size=notes]{grid-area:1/3}
  [data-view="settings"] .rec[data-step] > .field[data-size=date]{grid-area:1/4}
  [data-view="settings"] .rec[data-step] > .x{grid-area:1/5}
}

/* ── the resort rate grid ──────────────────────────────────────────────── */
[data-view="settings"] .resort{border-top:1px solid var(--line)}
[data-view="settings"] #resorts > .resort:first-child{border-top:0}
[data-view="settings"] .resort__head{display:flex;gap:var(--s4);align-items:flex-start;
  padding:var(--s5) var(--s5) var(--s4)}
/* min-width:0 or the grid inside refuses to shrink and pushes the page wide */
[data-view="settings"] .resort__head > .form{flex:1 1 auto;min-width:0}
/* the resort's name and its tier labels are one line of identity, not three:
   five tracks is a name (two of them) plus up to three tier labels */
[data-view="settings"] .resort__head > .form{max-width:60rem}
[data-view="settings"] .resort__head .field[data-size=name]{grid-column:span 2}
[data-view="settings"] .resort__foot{padding:var(--s5)}

[data-view="settings"] .rates{border-top:1px solid var(--line);background:var(--surface-2)}
[data-view="settings"] .rates__head{display:flex;flex-wrap:wrap;align-items:baseline;
  gap:var(--s1) var(--s4);padding:var(--s4) var(--s5) var(--s3)}
[data-view="settings"] .rates__head h4{margin:0;font-family:var(--display);font-weight:400;
  font-size:1rem;letter-spacing:.01em}
[data-view="settings"] .rates .tablewrap{background:var(--surface);
  border-block:1px solid var(--line)}
[data-view="settings"] .rates__foot{padding:var(--s3) var(--s5)}

/* Wide screens: the quote grid keeps the left of the card and the resort's
   own settings (child rate, what the resort threw in) move alongside it
   instead of underneath. The grid column is sized `auto`, so it is as wide as
   the figures actually are and grows if a third tier is added — never the
   other way round. A tier column must never be pushed out of sight. */
@media (min-width:1280px){
  [data-view="settings"] .resort{display:grid;align-items:start;
    grid-template-columns:auto minmax(0,1fr)}
  [data-view="settings"] .resort__head{grid-column:1/-1}
  [data-view="settings"] .resort__foot{border-top:1px solid var(--line)}
}

/* Content-sized, not stretched: the figure columns stay as narrow as the
   figures, and all the slack collapses into the (empty) last column, so the
   grid reads as one tight block at the left instead of a 900px band of white. */
[data-view="settings"] .dt--rates td:not(:last-child),
[data-view="settings"] .dt--rates th:not(:last-child){width:1%}
[data-view="settings"] .dt--rates td:last-child,
[data-view="settings"] .dt--rates th:last-child{width:auto}
[data-view="settings"] .dt--rates th{vertical-align:bottom;padding:var(--s3) var(--s4)}
[data-view="settings"] .dt--rates th i{display:block;margin-top:.15rem;font-style:normal;
  font-weight:400;font-size:var(--ft-meta);letter-spacing:.01em;text-transform:none;
  color:var(--muted)}
[data-view="settings"] .dt--rates td{padding:var(--s2) var(--s4);height:var(--h-ctl-lg)}
[data-view="settings"] .dt--rates tbody tr{cursor:default}
/* a hairline before the first money column: nights/occupancy are the key,
   the tiers are the figures */
[data-view="settings"] .dt--rates th:nth-child(3),
[data-view="settings"] .dt--rates td:nth-child(3){border-left:1px solid var(--line)}

/* These cells ARE the form — undo the app's borderless-inside-a-row treatment
   and align every figure on its last digit. */
[data-view="settings"] table.dt--rates tbody tr td input{
  width:5rem;min-width:0;max-width:none;height:var(--h-ctl);
  text-align:right;font-size:var(--ft-body);font-variant-numeric:tabular-nums;
  background:#fff;border:1px solid var(--line-strong)}
/* money is wider than a night count */
[data-view="settings"] table.dt--rates tbody tr td:nth-child(n+3) input{width:7.5rem}
[data-view="settings"] table.dt--rates tbody tr td input:hover{border-color:var(--taupe)}
[data-view="settings"] table.dt--rates tbody tr td input:focus{border-color:var(--terracotta);
  box-shadow:0 0 0 3px rgba(194,112,61,.15)}
/* spinners fight a right-aligned money column and are useless at $1,961.23 */
[data-view="settings"] .dt--rates input[type=number]{appearance:textfield;-moz-appearance:textfield}
[data-view="settings"] .dt--rates input[type=number]::-webkit-outer-spin-button,
[data-view="settings"] .dt--rates input[type=number]::-webkit-inner-spin-button{
  -webkit-appearance:none;margin:0}
[data-view="settings"] .dt--rates td .x{margin-left:auto}
[data-view="settings"] .dt--rates .empty{padding:var(--s5);text-align:left}

/* ── tablet ────────────────────────────────────────────────────────────── */
@media (max-width:767px){
  [data-view="settings"] .rule{grid-template-columns:minmax(0,1fr);gap:.15rem;
    padding:var(--s3) 0}
}

/* ── phones ────────────────────────────────────────────────────────────── */
@media (max-width:639px){
  [data-view="settings"] .panel__body,
  [data-view="settings"] .panel__head,
  [data-view="settings"] .panel__foot,
  [data-view="settings"] .rec,
  [data-view="settings"] .resort__head,
  [data-view="settings"] .resort__foot,
  [data-view="settings"] .rates__head,
  [data-view="settings"] .rates__foot,
  [data-view="settings"] #reserved.empty{padding-inline:var(--s4)}

  [data-view="settings"] .form{grid-template-columns:minmax(0,1fr);gap:var(--s4)}
  /* one column: let the control fill it, the 6rem cap is a desktop nicety */
  [data-view="settings"] .field[data-size=num]{--ctl:8rem}
  [data-view="settings"] .field[data-size=money]{--ctl:10rem}
  [data-view="settings"] .field[data-size=date],
  [data-view="settings"] .field[data-size=short],
  [data-view="settings"] .field[data-size=name]{--ctl:100%}
  [data-view="settings"] .field > span{min-height:0}

  [data-view="settings"] .rec{grid-template-columns:minmax(0,1fr) var(--h-ctl-lg)}
  [data-view="settings"] .rec > .field[data-size=num]{grid-area:1/1}
  [data-view="settings"] .rec > .x{grid-area:1/2;align-self:end}
  [data-view="settings"] .rec > .field[data-size=short]{grid-area:2/1/3/3}
  [data-view="settings"] .rec > .field[data-size=notes]{grid-area:3/1/4/3}

  [data-view="settings"] .resort__head{flex-wrap:wrap}
  [data-view="settings"] .readout{gap:var(--s3) var(--s5)}

  [data-view="settings"] .tools--stack{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s2)}
  [data-view="settings"] .tools--stack .btn{width:100%}
  [data-view="settings"] .panel__head .tools{width:100%}
  [data-view="settings"] .panel__head .tools .btn{flex:1 1 auto}

  /* The matrix folds into one card per rate. Nothing is off-screen, so a wrong
     figure has nowhere to hide. */
  [data-view="settings"] .rates .tablewrap{overflow-x:visible;padding:var(--s4);
    background:var(--surface-2)}
  [data-view="settings"] .dt--rates thead{position:absolute;width:1px;height:1px;
    overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  [data-view="settings"] .dt--rates,
  [data-view="settings"] .dt--rates tbody,
  [data-view="settings"] .dt--rates tr,
  [data-view="settings"] .dt--rates td{display:block;width:auto;min-width:0}
  /* nights + sharing are the key to the row, so they share a line and read as
     a pair; the money each combination costs gets a line of its own */
  [data-view="settings"] .dt--rates tr{display:grid;grid-template-columns:1fr 1fr;
    gap:0 var(--s3);background:var(--surface);border:1px solid var(--line);
    border-radius:2px;padding:var(--s3) var(--s4);margin-bottom:var(--s3)}
  [data-view="settings"] .dt--rates td:nth-child(1),
  [data-view="settings"] .dt--rates td:nth-child(2){display:block}
  [data-view="settings"] .dt--rates td:nth-child(1)::before,
  [data-view="settings"] .dt--rates td:nth-child(2)::before{display:block;margin-bottom:.2rem}
  [data-view="settings"] .dt--rates td:nth-child(n+3){grid-column:1/-1}
  [data-view="settings"] .dt--rates tr:last-child{margin-bottom:0}
  /* the desktop `width:1%` column trick would leave a 3px block here */
  [data-view="settings"] .dt--rates td:not(:last-child),
  [data-view="settings"] .dt--rates td:last-child,
  [data-view="settings"] .dt--rates th:not(:last-child){width:auto}
  [data-view="settings"] .dt--rates td{border:0;height:auto;padding:var(--s1) 0;
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,9rem);align-items:center;gap:var(--s3)}
  [data-view="settings"] .dt--rates td::before{content:attr(data-label);
    font-size:var(--ft-label);font-weight:700;letter-spacing:.1em;text-transform:uppercase;
    color:var(--muted)}
  [data-view="settings"] .dt--rates td:nth-child(3){border-left:0;
    border-top:1px solid var(--line);margin-top:var(--s2);padding-top:var(--s3)}
  [data-view="settings"] table.dt--rates tbody tr td input,
  [data-view="settings"] table.dt--rates tbody tr td:nth-child(n+3) input{
    width:100%;max-width:none;height:var(--h-ctl-lg)}
  [data-view="settings"] .dt--rates td.shrink:last-child{border-top:1px solid var(--line);
    margin-top:var(--s2);padding-top:var(--s2)}
}

@media print{
  [data-view="settings"] .x,[data-view="settings"] .says,
  [data-view="settings"] .jump{display:none}
}