/* Plate Cost -- every page's base, and the working screens.

   THE SHOP FRONT (the sales page, signing in, terms) wears shopfront.css on
   top of this, generated by the JTS kit and scoped to body.shopfront.

   LIGHT, WITH ONE EGGPLANT. A new price is typed in on a phone, often in a
   kitchen or a walk-in, in poor light or bright sun (spec A.8): the page is
   warm white paper, the ink near-black, the one colour a deep eggplant
   (9.4:1 on white), and every button a thumb presses is at least 44px tall.
   Over target says so in words as well as in its red. (Never orange on a
   dark ground: JT, 2026-09-28.) The layout and the pieces are Lead Math's,
   so the JTS tools work the same way under the hand. */

:root {
  --bg:          #f7f5f2;         /* the page: warm, very light grey */
  --surface:     #ffffff;         /* cards, tables */
  --surface-2:   #f2eeea;         /* header rows, totals */
  --surface-3:   #e9e2dc;         /* hover, the tab you are on */
  --line:        #e0d8d0;
  --field:       #b9aca0;         /* the edge of a box you type in: 2.3:1, seen in sun */
  --ink:         #1b1714;
  --dim:         #5e534a;         /* 7.1:1 on white */
  --accent:      #702a6e;         /* eggplant, 9.4:1 on white */
  --accent-soft: #f5edf4;         /* the eggplant, as a wash behind things */
  --on-accent:   #ffffff;
  --good:        #15703a;
  --warn:        #8a5300;
  --bad:         #b42318;
  --r:           12px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding: 0 22px 90px;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.55 -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); }

h1, h2, h3 { line-height: 1.15; text-wrap: balance; }
.lead { font-size: 17px; max-width: 66ch; }
.tiny { font-size: 12.5px; }
.dim { color: var(--dim); }
.n { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.nb { white-space: nowrap; }   /* a phrase that must not break */
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.row-between { display: flex; gap: 10px 18px; align-items: flex-end;
               justify-content: space-between; flex-wrap: wrap; }
.row-between h2 { margin-bottom: 10px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden;
           clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }
.bad-text { color: var(--bad); }
.good-text { color: var(--good); }
code { font-size: 13px; background: var(--surface-2); padding: 1px 5px; border-radius: 5px; }

/* ---- the public header (layout.html) ------------------------------------ */
.top {
  max-width: 1180px;
  margin: 0 auto;
  padding: 16px 0 10px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.brand { display: flex; align-items: center; gap: 9px; color: inherit;
         text-decoration: none; width: fit-content; }
.jts-mark { width: 30px; height: 30px; flex: none; }
.brand-name { font-weight: 700; }
.say-btn {
  margin-left: auto;
  color: var(--dim);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 5px 12px;
}
.sf-nav { margin-left: auto; display: flex; align-items: center; gap: 8px;
          flex-wrap: wrap; justify-content: flex-end; }
.sf-nav a { color: var(--dim); text-decoration: none; font-size: 14px; }
.sf-nav .sf-tools { display: inline-flex; align-items: center; gap: 7px; }
.sf-nav .sf-tools svg { width: 16px; height: 16px; }
.cog { margin-left: 6px; text-decoration: none; font-size: 19px;
       color: var(--dim); padding: 2px 6px; }
.cog:hover { color: var(--ink); }
.cog.on { color: var(--accent); }

main { max-width: 1180px; margin: 0 auto; }

.pagehead { margin: 22px 0 10px; }
.pagehead h1 { margin: 0 0 4px; }
.crumb { margin: 18px 0 0; font-size: 14px; }

.card {
  --pad-y: 20px; --pad-x: 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: var(--pad-y) var(--pad-x);
  margin: 18px 0;
}
.card h2 { margin: 0 0 10px; font-size: 20px; }
.card h3 { margin: 18px 0 6px; font-size: 16px; }
h2.sub { margin: 30px 0 4px; font-size: 20px; }
/* The WHOLE closed card opens it, not only the strip with its words (QA
   #331): its title row reaches out over the card's own padding. */
details.card > summary { cursor: pointer; margin: calc(-1 * var(--pad-y)) calc(-1 * var(--pad-x));
                         padding: var(--pad-y) var(--pad-x); border-radius: var(--r); }
details.card[open] > summary { margin-bottom: 0; padding-bottom: 10px; }

/* ---- forms ---------------------------------------------------------------- */
.fld { display: flex; flex-direction: column; gap: 5px; margin: 0 0 14px;
       min-width: 0; border: 0; padding: 0; }
.fld-label { font-weight: 600; font-size: 14px; }
.fld-label i { font-style: normal; color: var(--dim); font-weight: 400; }
/* On the public pages the shared sheet draws a <label for> round its box as a
   block, so the words need their own line and room under them: the 3px focus
   ring (2px out) must not touch them. */
body.shopfront form > label.fld[for] > .fld-label { display: block; margin-bottom: 8px; }
.fld-note { color: var(--dim); font-size: 13.5px; margin: 4px 0 14px; max-width: 62ch; }
/* An error says what is wrong right under the box it is about (STANDARDS
   section 7), not only in a banner at the top. */
.fld-error { color: var(--bad); font-size: 14px; font-weight: 600; margin: -8px 0 12px; }
html body .fld input[aria-invalid="true"], html body .fld textarea[aria-invalid="true"],
html body .fld select[aria-invalid="true"] { border-color: var(--bad); }
.narrow-card { max-width: 560px; }
/* Terms and Privacy: the JTS part (shared, pushed by the kit) and the Lead Math
   part, read as one page with even headings. */
.legal-card { max-width: 820px; }
.jts-legal h2 { font-size: 20px; margin: 28px 0 8px; }
.legal-card > .jts-legal:first-child > h2:first-child { margin-top: 0; }
.jts-legal + .jts-legal { border-top: 1px solid var(--line); margin-top: 26px; padding-top: 4px; }
.jts-legal h3 { font-size: 16px; margin: 18px 0 6px; }
.jts-legal ul { padding-left: 20px; margin: 0 0 10px; }
.jts-legal li { margin: 0 0 8px; }
.jts-legal p { margin: 0 0 10px; }
.jts-legal-date { color: var(--dim); font-size: 13.5px; margin-top: 18px; }
.contact-card { max-width: 760px; }
.fld-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
           gap: 0 16px; }
/* A box with its own hint under it ("8 characters or more"): the hint sits
   close under the box, and the next row keeps its usual space. */
.fld-cell { min-width: 0; margin: 0 0 14px; }
.fld-cell > .fld { margin-bottom: 0; }
.fld-cell > .fld-note { margin: 5px 0 0; }
.fld-cell > .fld-error { margin: 6px 0 0; }
.radio-set { display: grid; gap: 8px; }
/* The company form's rows take the form's whole width, so its boxes sit
   side by side on a wide screen instead of in one thin column (a .stack
   lines its children up at the start, which shrank the rows to fit). */
.stack > .fld-row.fill { justify-self: stretch; }

/* EVERY KIND OF BOX, including one with no type at all: `input[type=text]`
   does not match <input name="x">, which is how Shop Rate once shipped ten
   raw boxes on a page of a different colour. */
input[type=text], input[type=email], input[type=tel], input[type=password],
input[type=number], input[type=search], input[type=url], input[type=date],
input[type=time], input:not([type]), select, textarea {
  width: 100%;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--field);
  border-radius: 9px;
  padding: 9px 11px;
  font: inherit;
  font-size: max(16px, 1em);  /* under 16px, Safari on an iPhone zooms the page
                                 in on a tap (QA #331) */
  min-width: 0;
}
input[type=file] { font: inherit; font-size: 14px; max-width: 100%; }
select { padding-right: 8px; }
textarea { min-height: 70px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
input:disabled, select:disabled, textarea:disabled { opacity: .6; }
input[readonly] { background: var(--surface-2); }
.check { display: flex; align-items: flex-start; gap: 8px; font-size: 14.5px; cursor: pointer;
         margin: 0 0 10px; }
.check input { width: 18px; height: 18px; accent-color: var(--accent); flex: none; margin: 2px 0 0; }
.w-s { max-width: 90px; }
.w-m { max-width: 160px; }

button, .go {
  display: inline-block;
  background: var(--accent);
  color: var(--on-accent);
  border: 0;
  border-radius: 9px;
  padding: 10px 18px;
  font-family: inherit; font-size: 15px; font-weight: 600; line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
}
button:disabled, .go[aria-disabled] { opacity: .45; cursor: not-allowed; }
button:focus-visible, .go:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn-quiet, button.btn-quiet {
  display: inline-block;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--field);
  border-radius: 9px;
  padding: 8px 14px;
  font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
}
.btn-quiet:hover { border-color: var(--accent); }
.danger, button.danger {
  background: none;
  color: var(--bad);
  border: 1px solid rgba(197, 42, 42, .45);
  border-radius: 9px;
  padding: 8px 14px;
  font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1.2;
  cursor: pointer;
}
.danger:hover { background: rgba(197, 42, 42, .06); }
button.linkbtn {
  background: none; border: 0; padding: 0 2px; color: var(--accent);
  font-size: 13.5px; font-weight: 600; text-decoration: underline;
  text-underline-offset: 3px; cursor: pointer;
}
button.linkbtn.bad-text { color: var(--bad); }
.linkish { color: var(--dim); text-decoration: underline; text-underline-offset: 3px; }
.linkish:hover { color: var(--ink); }
form.inline { display: inline; margin: 0; }
.inline-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 12px 0 0; }
.inline-form input:not([type=file]):not([type=checkbox]):not([type=radio]),
.inline-form select { width: auto; flex: 1 1 160px; }
.inline-form .w-s { flex: 0 1 80px; }
.inline-form .w-m { flex: 0 1 160px; }
/* A box inside a .fld label sits under its words (the label is a column),
   so the row's flex basis belongs on the LABEL: on the box it became the
   box's HEIGHT -- the 160px-tall boxes of QA #328. */
.inline-form > .fld { flex: 1 1 160px; min-width: 0; }
.inline-form > .fld:has(.w-s) { flex: 0 1 96px; }
.inline-form > .fld:has(.w-m) { flex: 0 1 176px; }
.inline-form .fld input:not([type=file]):not([type=checkbox]):not([type=radio]),
.inline-form .fld select { flex: none; width: 100%; }
.stack { display: grid; gap: 8px; margin: 8px 0; justify-items: start; }
/* Not a tick box: one stretched to the full width pushed its words off the
   side of Settings on a phone. */
.stack input:not([type=file]):not([type=checkbox]):not([type=radio]), .stack select { width: 100%; }

/* ---- messages -------------------------------------------------------------- */
.warn {
  border-left: 4px solid var(--warn);
  background: rgba(161, 98, 7, .08);
  padding: 10px 14px;
  border-radius: 6px;
  margin: 0 0 14px;
}
.warn.bad { border-color: var(--bad); background: rgba(197, 42, 42, .07); }
.warn.good { border-color: var(--good); background: rgba(21, 128, 61, .08); }
.warn ul { margin: 6px 0 0; padding-left: 18px; }
.notice {
  max-width: 1180px;
  margin: 8px auto;
  padding: 9px 14px;
  border-radius: 8px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  font-size: 14px;
}
.notice.warn-line { border-color: var(--warn); }
.dl-notice { color: var(--dim); font-size: 13px; max-width: 80ch; margin: 18px 0;
             padding: 10px 14px; border: 1px dashed var(--field); border-radius: 8px;
             background: var(--surface); }

/* ---- tables and pills -------------------------------------------------------- */
/* Positioned, so a screen-reader-only word inside a table that scrolls is
   clipped with it instead of widening the whole page on a phone. */
.scroll { overflow-x: auto; position: relative; }
.tbl { border-collapse: collapse; width: 100%; font-size: 14px; }
.tbl th, .tbl td { padding: 8px 10px; border-bottom: 1px solid var(--line);
                   text-align: left; vertical-align: top; }
.tbl th { font-size: 12px; text-transform: uppercase; letter-spacing: .06em;
          color: var(--dim); font-weight: 600; }
/* Money lines up on the right, digit under digit. (.tbl td would otherwise
   win over .n and left-align every column of figures.) */
.tbl .n { text-align: right; }
.tbl tfoot th { background: var(--surface-2); color: var(--ink); font-size: 13px; }
.tbl.small { font-size: 13px; }
.tbl.small td, .tbl.small th { padding: 6px 8px; }
.tbl tr.row-bad td, .tbl tr.row-bad th { background: rgba(197, 42, 42, .05); }
.desk section { margin: 26px 0; }
.desk .tbl td form { display: inline-flex; gap: 6px; align-items: center; margin: 0; }
.desk .tbl select { width: auto; padding: 5px 8px; font-size: 13px; }
.desk .tbl button { padding: 5px 10px; font-size: 13px; }
.pill {
  display: inline-block;
  border-radius: 999px;
  padding: 1px 9px;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid var(--line);
  color: var(--dim);
  white-space: nowrap;
  vertical-align: middle;
}
.pill.new, .pill.trial, .pill.st-submitted { border-color: var(--accent); color: var(--accent); }
.pill.good, .pill.paying, .pill.comped, .pill.st-approved, .pill.st-paid { border-color: var(--good); color: var(--good); }
.pill.st-partially_paid { border-color: var(--warn); color: var(--warn); }
.pill.bad, .pill.lapsed, .pill.stopped, .pill.trialover, .pill.st-rejected { border-color: var(--bad); color: var(--bad); }
.plain-list { list-style: none; margin: 0; padding: 0; }
.plain-list li { padding: 8px 0; border-bottom: 1px solid var(--line); }
.plain-list li:last-child { border-bottom: 0; }

.foot { max-width: 1180px; margin: 60px auto 0; padding-top: 18px;
        border-top: 1px solid var(--line); }
.foot a { color: var(--dim); }
.foot p { margin: 0 0 6px; }

/* ===========================================================================
   THE OFFICE'S SCREENS
   =========================================================================== */
.app-top {
  max-width: 1320px;
  margin: 0 auto;
  padding: 14px 0 12px;
  display: flex;
  align-items: center;
  gap: 10px 16px;
  flex-wrap: wrap;
}
.app-brand { display: flex; align-items: center; gap: 10px; color: var(--ink);
             text-decoration: none; min-width: 0; }
.app-brand-words { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.app-brand-words b { font-size: 16px; white-space: nowrap; overflow: hidden;
                     text-overflow: ellipsis; max-width: 42vw; }
.app-brand-words span { font-size: 12px; color: var(--accent); font-weight: 700;
                        letter-spacing: .08em; text-transform: uppercase; }
/* The tabs wrap rather than run off the side: seven of them do not fit on
   a phone in one row, and a page wider than the phone zooms out whole
   (bug list 2026-10-04, #139). */
.app-nav { display: flex; flex-wrap: wrap; gap: 4px; margin-left: 8px; margin-right: auto;
           min-width: 0; }
.app-nav a {
  color: var(--dim);
  text-decoration: none;
  font-weight: 600;
  font-size: 14.5px;
  padding: 7px 12px;
  border-radius: 8px;
  white-space: nowrap;
}
.app-nav a:hover { color: var(--ink); background: var(--surface-2); }
.app-nav a.on { color: var(--ink); background: var(--surface-3); }
.pay-link {
  color: var(--accent);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 600;
  border: 1px solid rgba(112, 42, 110, .4);
  border-radius: 8px;
  padding: 5px 11px;
}
.app-top .cog { margin-left: 0; }

.app-banner, .app-flash, .app-tip {
  max-width: 1320px;
  margin: 0 auto 12px;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 14.5px;
  border: 1px solid var(--line);
  background: var(--surface);
}
.app-banner { border-color: rgba(112, 42, 110, .3); background: var(--accent-soft); }
.app-banner.warn { border-color: rgba(197, 42, 42, .4); background: rgba(197, 42, 42, .06); }
.app-flash { border-color: rgba(21, 128, 61, .35); background: rgba(21, 128, 61, .07); }
.app-tip { border-color: rgba(112, 42, 110, .3); background: var(--accent-soft); margin: 12px 0; }
.app-main { max-width: 1320px; margin: 0 auto; }
.app-bg .foot { max-width: 1320px; }

.empty {
  text-align: center;
  padding: 44px 20px;
  border: 1px dashed var(--field);
  border-radius: var(--r);
  margin: 18px 0;
  background: var(--surface);
}
.empty h2 { margin: 0 0 6px; }

/* ---- figures: the money at the top of a page ---------------------------- */
.figs { display: grid; gap: 12px; margin: 16px 0;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }
.fig {
  display: flex; flex-direction: column; gap: 2px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent);
  border-radius: 10px;
  padding: 14px 16px;
  color: var(--ink);
  text-decoration: none;
  min-width: 0;
}
a.fig:hover { border-color: var(--accent); }
.fig.bad { border-top-color: var(--bad); }
.fig.bad .fig-n { color: var(--bad); }
.fig-label { font-size: 12px; text-transform: uppercase; letter-spacing: .07em;
             color: var(--dim); font-weight: 700; }
.fig-n { font-size: clamp(22px, 2.6vw, 30px); font-weight: 800; letter-spacing: -.01em;
         font-variant-numeric: tabular-nums; line-height: 1.15; }
.fig .dim { font-size: 13px; }
.warn-card { border-color: rgba(197, 42, 42, .35); }

.jumps { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; }
.jumps a { font-size: 13.5px; font-weight: 600; color: var(--dim); text-decoration: none;
           border: 1px solid var(--line); background: var(--surface);
           border-radius: 999px; padding: 4px 11px; }
.jumps a:hover, .jumps a.on { color: var(--accent); border-color: var(--accent); }

.dl-first .dl-todo { margin: 6px 0 0; padding-left: 22px; }
.dl-todo li { margin: 0 0 10px; }
.dl-todo li.done { color: var(--dim); text-decoration: line-through; }

.howgot { margin: 12px 0 0; }
.howgot > summary { cursor: pointer; color: var(--accent); font-weight: 600; font-size: 14px; }
.howgot .trace th { text-transform: none; letter-spacing: 0; font-size: 13px; color: var(--ink);
                    width: 46%; }
.howgot .trace td { font-variant-numeric: tabular-nums; }
.danger-zone { border-color: rgba(197, 42, 42, .25); }
.danger-zone details summary { cursor: pointer; font-weight: 600; margin: 12px 0 8px; }
.dl-sum { font-variant-numeric: tabular-nums; }
.dl-sum td:first-child { color: var(--dim); }
.dl-sum tr.due td { font-weight: 800; font-size: 16px; background: var(--accent-soft);
                    border-top: 2px solid var(--accent); border-bottom: 2px solid var(--accent); }

@media (max-width: 640px) {
  body { padding: 0 14px 70px; }
  .app-nav { margin-left: 0; order: 3; width: 100%; gap: 2px 0; }
  .app-nav a { padding: 8px 10px; font-size: 14.5px; }
  .card { --pad-y: 16px; --pad-x: 16px; }
  .figs { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* ===========================================================================
   THE SALES PAGE'S OWN PIECES (the rest is shopfront.css)
   =========================================================================== */
.dl-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px;
            grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.dl-steps li {
  position: relative;
  border: 2px solid var(--line);
  border-radius: 14px;
  padding: 44px 18px 18px;
  background: var(--surface);
}
.dl-steps li::before {
  content: counter(list-item);
  position: absolute;
  top: 12px;
  left: 18px;
  font-weight: 800;
  font-size: 20px;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.dl-steps h3 { margin: 0 0 6px; font-size: 17px; }
.dl-steps p { margin: 0; color: var(--dim); }

.dl-show { display: grid; grid-template-columns: minmax(0, 460px) minmax(0, 1fr);
           gap: 28px 40px; align-items: start; }
/* The example sheet: white paper on a faint ruled ground, the way a
   sheet of figures leaves the office. */
.dl-sheet {
  margin: 0;
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 18px 18px 14px;
  box-shadow: 0 18px 50px rgba(17, 26, 43, .14);
  background-image: linear-gradient(var(--accent-soft) 1px, transparent 1px),
                    linear-gradient(90deg, var(--accent-soft) 1px, transparent 1px);
  background-size: 22px 22px;
}
.dl-sheet-head { display: flex; flex-direction: column; margin: 0 0 10px; }
.dl-sheet-head b { font-size: 18px; color: var(--accent); }
.dl-sheet-head span { font-size: 13px; color: var(--dim); }
.dl-sheet .dl-sum { background: rgba(255, 255, 255, .92); }
.dl-sheet figcaption { margin-top: 10px; }
body.shopfront .dl-sheet td, body.shopfront .dl-sheet th { font-size: 14px; }
.dl-points { display: grid; gap: 18px; }
.dl-points div { border-top: 2px solid var(--accent); padding-top: 12px; }
.dl-points b { display: block; margin: 0 0 4px; font-size: 17px; }
.dl-points p { margin: 0; color: var(--dim); }
.dl-plans { display: grid; gap: 14px; margin: 0 0 14px;
            grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.dl-plan { border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px;
           background: var(--surface); }
.dl-plan h3 { margin: 0 0 6px; }
.dl-plan .amount, .dl-price .amount { font-size: clamp(32px, 4vw, 46px); font-weight: 800;
                                      letter-spacing: -.02em; line-height: 1; margin: 0 0 6px; }
.dl-plan .amount small { font-size: 15px; font-weight: 600; color: var(--dim); letter-spacing: 0; }
.dl-price { display: grid; gap: 18px 36px;
            grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); align-items: start; }
.dl-price ul { margin: 0; padding-left: 18px; }
.dl-price li { margin: 0 0 6px; }
.dl-rule { border-left: 4px solid var(--accent); padding: 10px 14px;
           background: var(--surface-2); border-radius: 6px; margin-top: 0; }
.dl-start { max-width: 820px; }
.dl-contact { font-size: 15px; }
.dl-contact a { font-weight: 600; }
@media (max-width: 820px) {
  .dl-show { grid-template-columns: minmax(0, 1fr); }
}


/* ===========================================================================
   PLATE COST'S OWN PIECES
   =========================================================================== */
/* EVERY BUTTON A THUMB PRESSES IN THE APP IS 44PX OR MORE (spec A.8): a new
   price is typed in on a phone, one-handed, often with the other hand full. */
.app-main button, .app-main .go, .app-main .btn-quiet { min-height: 44px; }
.app-main a.btn-quiet, .app-main a.go { display: inline-flex; align-items: center; justify-content: center; }
.app-flash.in-card { margin: 0 0 10px; }
.sample-bar { max-width: 1320px; margin: 0 auto 12px; padding: 12px 14px; border-radius: 10px;
              background: #fff6e0; border: 1px solid #d9b45c; font-size: 15px; }
.sample-bar a { font-weight: 700; }
.pay-link { min-height: 36px; display: inline-flex; align-items: center; }
.app-nav .count { display: inline-block; min-width: 20px; padding: 0 6px; border-radius: 999px;
                  background: var(--bad); color: #fff; font-size: 12px; line-height: 20px;
                  text-align: center; margin-left: 2px; }
.pc-ro { font-size: 14px; color: var(--dim); background: var(--surface-2); border-radius: 8px;
         padding: 8px 12px; margin: 0 0 12px; }
.pc-rule { font-size: 13px; color: var(--dim); margin: 6px 0 4px; max-width: 80ch; }
.howgot .trace { table-layout: fixed; }
.howgot .trace th, .howgot .trace td { overflow-wrap: anywhere; white-space: normal; }
.howgot .trace td { font-variant-numeric: tabular-nums; }
.pc-up, .pc-over-text { color: var(--bad); font-weight: 700; }
.pc-down { color: var(--good); font-weight: 700; }
.pill.st-ok { border-color: var(--good); color: var(--good); }
.pill.st-over { border-color: var(--bad); color: #fff; background: var(--bad); }
.pill.st-no_price, .pill.st-empty { border-color: var(--warn); color: var(--warn); }
.pill.st-cant_cost { border-color: var(--bad); color: var(--bad); }
.pill.sub { border-color: var(--accent); color: var(--accent); }
.pc-big { font-size: 1.15em; }
.pc-why { white-space: normal; font-size: 13px; font-weight: 600; }
.pc-region { white-space: nowrap; }

/* ---- the search box and filters ------------------------------------------ */
.pc-search { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: flex-end; margin: 4px 0 14px; }
.pc-search .fld { flex: 1 1 240px; margin: 0; }
.pc-search input { min-height: 44px; font-size: 16px; }
.pc-filters { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 12px; }
.pc-filters a { min-height: 40px; display: inline-flex; align-items: center; padding: 0 13px;
                border: 1px solid var(--line); border-radius: 999px; background: var(--surface);
                color: var(--dim); text-decoration: none; font-weight: 600; font-size: 14px; }
.pc-filters a.on { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }

/* ---- ingredients: one card each, a big New price on a phone --------------- */
.pc-ings { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px;
           grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); }
.pc-ing { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
          padding: 14px 16px; min-width: 0; scroll-margin-top: 12px; }
.pc-ing:target { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.pc-ing-top { display: flex; justify-content: space-between; gap: 4px 12px; align-items: baseline; }
.pc-ing-name { font-size: 17px; font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
.pc-ing-price { font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pc-ing-meta { color: var(--dim); font-size: 14px; margin: 2px 0 4px; overflow-wrap: anywhere; }
.pc-ing-cost { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0 0 6px; font-size: 14px;
               font-variant-numeric: tabular-nums; }
.pc-ing-cost.big { font-size: 17px; font-weight: 700; }
.pc-newprice > summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center;
  min-height: 48px; padding: 0 18px; border-radius: 10px; border: 1.5px solid var(--accent);
  color: var(--accent); font-weight: 700; font-size: 16px; margin-top: 4px; }
.pc-newprice > summary::-webkit-details-marker { display: none; }
.pc-newprice[open] > summary { background: var(--accent-soft); }
.pc-newprice-form { display: grid; gap: 4px; margin: 10px 0 0; }
.pc-newprice-form input { min-height: 48px; font-size: 18px; }
.pc-newprice-form .go { min-height: 48px; font-size: 16px; justify-self: start; }
.pc-price-card .pc-newprice-form { max-width: 420px; }
.pc-add > summary { cursor: pointer; font-weight: 700; font-size: 17px; min-height: 44px;
                    display: flex; align-items: center; gap: 10px; list-style: none; }
.pc-add > summary::-webkit-details-marker { display: none; }
.pc-add > summary::before {
  content: "+"; flex: none; width: 30px; height: 30px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid var(--accent); color: var(--accent); font-size: 20px; line-height: 1; }
.pc-add[open] > summary::before { content: "\2212"; }
.pc-add form { margin-top: 12px; }
.pc-pack { margin: 0 0 4px; }
.pc-pack-row { display: grid; gap: 0 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); }
.pc-dens { margin: 0 0 14px; }
.pc-dens > summary { cursor: pointer; color: var(--accent); font-weight: 600; font-size: 14px; min-height: 44px;
                     display: flex; align-items: center; }
.pc-dens-row { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: flex-end; }
.pc-dens-row .fld { margin: 0; flex: 0 1 auto; }
.pc-dens-row input, .pc-dens-row select { min-width: 84px; }
.pc-dens-says { padding: 0 2px 12px; font-weight: 600; }

/* ---- recipe and plate lines ------------------------------------------------ */
.pc-lines { list-style: none; margin: 0; padding: 0; }
.pc-line { border-bottom: 1px solid var(--line); padding: 10px 0; min-width: 0; scroll-margin-top: 12px; }
.pc-line:last-child { border-bottom: 0; }
.pc-line:target { background: var(--accent-soft); }
.pc-line.bad { background: rgba(197, 42, 42, .05); }
.pc-line-top { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 4px 14px;
               align-items: baseline; }
.pc-line-what { font-weight: 700; overflow-wrap: anywhere; }
.pc-line-what a { color: var(--ink); }
.pc-line-amt { color: var(--dim); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pc-line-cost { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; text-align: right; }
.pc-line-why { margin: 4px 0 0; }
.pc-line .howgot { margin: 4px 0 0; }
.pc-line .howgot > summary { font-size: 13px; padding: 9px 0; }
.pc-line-edit > summary { cursor: pointer; font-size: 13px; color: var(--dim); padding: 9px 0; }
.pc-line-edit .inline-form { margin: 6px 0 0; align-items: flex-end; }
.pc-line-edit .fld { margin: 0; }
.pc-total { margin: 12px 0 0; padding: 10px 12px; background: var(--accent-soft); border-radius: 10px;
            font-variant-numeric: tabular-nums; }
.pc-addline { border-top: 2px solid var(--line); margin-top: 16px; padding-top: 6px; scroll-margin-top: 12px; }
.pc-addline h3 { margin: 10px 0 8px; }
.pc-addline-row { display: grid; gap: 0 14px; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); }
.pc-addline select, .pc-addline input { min-height: 44px; font-size: 16px; }
.pc-add3 { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.pc-add-one { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; background: var(--surface);
              min-width: 0; }
.pc-add-one h4 { margin: 0 0 8px; font-size: 15px; }
.pc-add-one select, .pc-add-one input { min-height: 44px; font-size: 16px; }
.pc-qty-unit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 0 10px; }

/* ---- a menu item's figures --------------------------------------------------- */
.pc-figs { display: grid; gap: 12px; margin: 10px 0 16px;
           grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.pc-fig { display: flex; flex-direction: column; gap: 2px; background: var(--surface);
          border: 1px solid var(--line); border-top: 3px solid var(--accent); border-radius: 10px;
          padding: 14px 16px; min-width: 0; }
.pc-fig.bad { border-top-color: var(--bad); }
.pc-fig.bad .fig-n { color: var(--bad); }
.pc-fig .dim { font-size: 13px; }
.pc-fig .howgot { margin: 6px 0 0; }
.pc-fig .howgot > summary { font-size: 13px; padding: 9px 0; }
.pc-fig:has(> .howgot[open]) { grid-column: 1 / -1; }
.pc-use { margin-top: 8px; }
.pc-menu th[scope=row] a { color: var(--ink); font-weight: 700; }
.pc-menu td, .pc-menu th { white-space: nowrap; }
.pc-menu th[scope=row] { white-space: normal; min-width: 11em; }

/* ---- alerts ------------------------------------------------------------------ */
.pc-alert { border-left: 4px solid var(--warn); }
.pc-alert.bad { border-left-color: var(--bad); }
.pc-alert.done { background: var(--surface-2); border-left-color: var(--field); }
.pc-alert-words { margin: 0 0 4px; font-size: 16px; }
.pc-over-list { margin: 6px 0 10px; padding-left: 20px; }
.pc-over-list li { margin: 0 0 4px; }
.pc-changes li { overflow-wrap: anywhere; }
.pc-first .pc-todo { margin: 6px 0 0; padding-left: 22px; }
.pc-todo li { margin: 0 0 10px; }

/* ---- settings ------------------------------------------------------------------ */
.pc-tz { width: 100%; max-width: 460px; gap: 6px; }
.pc-tz select, .pc-tz input { min-height: 44px; font-size: 16px; }
.pc-tz .fld-note { margin: 2px 0 0; }
.pc-vendors .inline-form { margin: 0; }
.pc-vendors input { flex: 1 1 180px; }
.pc-vd-n { font-size: 13px; white-space: nowrap; }
.plain-set { border: 0; margin: 0; padding: 0; min-width: 0; }
.save-sum { color: var(--dim); font-size: 13.5px; margin: 0; min-height: 1em; }
#units > summary { cursor: pointer; font-weight: 700; font-size: 17px; min-height: 44px; display: flex; align-items: center; }

/* ---- the front page's worked example --------------------------------------- */
.pc-ex { display: grid; gap: 16px; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; }
.pc-ex-side { display: grid; gap: 16px; min-width: 0; }
.pc-ex .dl-sheet { padding: 16px; min-width: 0; }
.pc-ex .dl-sum td:first-child { overflow-wrap: anywhere; }
.pc-ex .dl-sum .dim { font-size: 12.5px; }
.pc-alert-ex .pc-alert-words { font-size: 15px; margin: 0 0 8px; }
.pc-points { margin-top: 22px; }
.pc-faq dt { font-weight: 700; font-size: 16.5px; margin: 16px 0 4px; }
.pc-faq dt:first-child { margin-top: 0; }
.pc-faq dd { margin: 0; color: var(--dim); max-width: 70ch; }
.pc-shot { margin: 0; min-width: 0; }
.pc-shot img { display: block; width: 100%; height: auto; border: 1px solid var(--line);
  border-radius: 12px; box-shadow: 0 10px 30px rgba(27, 23, 20, .12); background: #fff; }
.pc-shot figcaption { margin-top: 12px; font-size: 14px; color: var(--dim); }
.pc-shot figcaption a { color: var(--accent); font-weight: 600; }
@media (max-width: 860px) {
  .pc-ex { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .pc-addline-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pc-addline-row .pc-what { grid-column: 1 / -1; }
  .pc-line-top { grid-template-columns: minmax(0, 1fr) auto; }
  .pc-line-amt { grid-column: 1; grid-row: 2; }
  .pc-line-cost { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
}

/* The app header in ONE ROW on a phone, the way Lead Math does it: the name,
   Subscribe (on the free days) and ONE Menu button; the tabs and Settings
   open under it as a list with big rows. The class js-menu is put on <html>
   by the page's own script; without it the tabs wrap under the name. */
.menu-btn { display: none; }
.app-nav a.in-menu { display: none; }
@media (max-width: 900px) {
  html.js-menu .app-top { flex-wrap: wrap; gap: 8px 10px; padding: 10px 0; }
  html.js-menu .app-top .app-brand { flex: 1 1 0; min-width: 0; }
  html.js-menu .app-top .app-brand-words b { max-width: none; }
  html.js-menu .app-top .pay-link { order: 1; flex: none; }
  html.js-menu .app-top .cog { display: none; }
  html.js-menu .app-top .menu-btn {
    order: 2; flex: none; display: inline-flex; align-items: center; gap: 9px;
    min-height: 44px; padding: 8px 13px; font-size: 15px; font-weight: 600;
    background: var(--surface); color: var(--ink);
    border: 1px solid var(--field); border-radius: 10px; cursor: pointer; }
  .menu-icon, .menu-icon::before, .menu-icon::after {
    display: block; width: 18px; height: 2px; border-radius: 2px; background: currentColor; }
  .menu-icon { position: relative; }
  .menu-icon::before, .menu-icon::after { content: ""; position: absolute; left: 0; }
  .menu-icon::before { top: -6px; }
  .menu-icon::after { top: 6px; }
  html.js-menu .app-top .app-nav { display: none; order: 3; width: 100%; margin: 0; }
  html.js-menu .app-top .app-nav.open {
    display: flex; flex-direction: column; align-items: stretch; gap: 2px;
    padding: 6px 0 4px; border-top: 1px solid var(--line); }
  html.js-menu .app-top .app-nav.open a { font-size: 16px; padding: 12px 10px; min-height: 44px; }
  html.js-menu .app-top .app-nav.open a.in-menu { display: block; }
}

/* A row's own heading reads as words, not as a column heading. */
.tbl tbody th { text-transform: none; letter-spacing: 0; font-size: 14px; color: var(--ink);
                font-weight: 600; }
.tbl.small tbody th { font-size: 13px; }
/* The menu: a table on a wide screen, one card a dish on a phone. */
.pc-menu-cards { display: none; list-style: none; margin: 0; padding: 0; gap: 10px; }
.pc-mcard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
            padding: 12px 14px; min-width: 0; }
.pc-mcard.bad { border-color: rgba(180, 35, 24, .45); border-left: 4px solid var(--bad); }
.pc-mcard-top { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline;
                justify-content: space-between; }
.pc-mcard-top a { font-weight: 700; font-size: 16px; color: var(--ink); overflow-wrap: anywhere; }
.pc-mcard-figs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px 12px;
                 margin: 8px 0 0; }
.pc-mcard-figs dt { font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em;
                    color: var(--dim); font-weight: 700; }
.pc-mcard-figs dd { margin: 0; font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pc-overs li { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline;
               justify-content: space-between; }
.pc-overs-figs { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline;
                 font-variant-numeric: tabular-nums; }
.pc-alert-items { margin: 8px 0 10px; }
.pc-alert-items li.bad { background: rgba(197, 42, 42, .05); padding-left: 8px; padding-right: 8px;
                         border-radius: 6px; }
/* The menu is cards up to a tablet held upright: at 737-768px its table
   cut the Suggested column off (QA #330). */
@media (max-width: 860px) {
  .pc-menu-cards { display: grid; }
  .pc-menu-card { display: none; }
}
@media (max-width: 640px) {
  .pc-figs { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  /* Menu price and plate cost side by side; food cost and the suggested
     price each a whole row, so neither sits beside an empty half, and the
     button to use the suggested price runs the full width (QA #329). */
  .pc-fig-fc, .pc-fig-sug { grid-column: 1 / -1; }
  .pc-fig-sug form, .pc-fig-sug .pc-use { width: 100%; }
  .pc-fig .fig-n { font-size: 24px; }
}


/* jts-more: written by jtsapps_site/kit/push_hublink.py */
/* The way out to the rest of the JTS tools, top of every app's Settings.
   Quiet -- it is a door, not a thing being sold, so it is outlined rather
   than filled and sits where the gear in the header already is. Its own
   colours: the six stylesheets do not share a button rule. */
/* NO NEGATIVE MARGIN. -8px pulled the button's box down over the
   <h1> by 4px -- harmless here because the button still won the
   hit test, but an overlapping box stealing a click is a fault
   this project has already chased once, and it is not worth
   carrying for four pixels. Measured clear at 1700 and 430 wide. */
.jts-more{display:flex;justify-content:flex-end;margin:0 0 2px}
.jts-more-btn{display:inline-block;text-decoration:none;
  padding:7px 14px;border-radius:8px;font-size:13px;font-weight:600;
  color:var(--accent,#7bc043);background:transparent;
  border:1px solid var(--line,#2b323c)}
.jts-more-btn:hover{border-color:var(--accent,#7bc043);
  background:rgba(127,127,127,.10)}
/* end jts-more */

/* ---- the feedback box in Settings --------------------------------------
   Written by jtsapps_site/kit/push_feedback.py. */
.jts-feedback textarea { width: 100%; min-height: 92px; resize: vertical; }
.jts-feedback .fb-row {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  margin: 10px 0 0;
}
/* keyed on the ELEMENT inside this card, because the global rule stretches
   a select across its row and a class-keyed reset would miss one added
   later */
.jts-feedback .fb-row select { width: auto; flex: 0 1 auto; max-width: 100%; }
.jts-feedback .fb-row .go { margin-left: auto; }
/* the kind box carries its own label (STANDARDS 7); the label sits in the
   row and keeps the select its natural width */
.jts-feedback .fb-row .fb-kind-l { flex: 1 1 220px; margin: 0; }
.jts-feedback .fb-row .go { align-self: flex-end; }
/* The feedback card: its labels as Lead Math has them. */
.jts-feedback .f { display: flex; flex-direction: column; gap: 5px; font-weight: 600; font-size: 14px; }
.jts-feedback h3 { margin-top: 0; }