/* Price Sync: the parts only the price app has. Loaded after ui.css, the stylesheet the three admin apps share as
 * identical copies (Inventory Sync, Image Order Sync, Price Sync). It adds no hue and one size: --fs-figure (20px), for
 * the one line of the check that says what a save touches. Everything else uses the tokens of ui.css.
 * Red (--urgent) keeps its one meaning: something is wrong and needs you now (a save that stopped part-way, a price
 * the app cannot use).
 *
 * The one loud thing on the style screen is the price itself: the price boxes use the page-title size.
 * Old prices are never struck through: in a shop, a struck-through price means the crossed-out "was" price.
 */
:root { --fs-figure: 20px; }

/* Panels here that are not lists: the shared rule ".panel > * + *" (a hairline between rows) does not apply. */
.panel.price-form > * + *, .panel.touch-panel > * + *, .panel.saved > * + * { border-top: 0; }

/* ------------------------------------------------------------------ PriceForm, PriceBox */
.price-form { padding: var(--s4) var(--s5) var(--s5); display: grid; gap: var(--s5); }
.price-form > .no-box { border-top: 1px solid var(--rule); padding-top: var(--s5); }
@media (max-width: 700px) { .price-form { padding: var(--s4); } }
.box { display: grid; gap: var(--s2); }
.box + .box { border-top: 1px solid var(--rule); padding-top: var(--s5); }
.box > label { font-size: var(--fs-subject); font-weight: 600; justify-self: start; }
.money { position: relative; width: 12rem; max-width: 100%; }
.money .cur { position: absolute; left: var(--s3); top: 0; bottom: 0; display: flex; align-items: center; font-size: var(--fs-h1); font-weight: 600; color: var(--ink-2); pointer-events: none; }
.money input {
  width: 100%; min-height: 52px; padding: 0 var(--s3) 0 calc(var(--s3) + 16px);
  font: inherit; font-size: var(--fs-h1); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink);
  background: var(--surface); border: 1px solid var(--rule-strong); border-radius: var(--r-control);
}
.money input::placeholder { color: var(--ink-3); font-size: var(--fs-body); font-weight: 400; opacity: 1; }
.money input[aria-invalid="true"] { border: 2px solid var(--urgent); }
.covers { color: var(--ink-2); max-width: var(--measure); }
.two-now { max-width: var(--measure); }
.box-error { color: var(--urgent); font-weight: 600; max-width: var(--measure); }
.jump { max-width: var(--measure); }
.no-box { color: var(--ink-2); max-width: var(--measure); }
.form-act { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4); padding-top: var(--s4); border-top: 1px solid var(--rule); }
.form-act .act-note { color: var(--ink-3); font-size: 14px; flex: 1 1 16rem; }
@media (max-width: 700px) { .form-act .btn { flex: 1 1 100%; } }

/* ------------------------------------------------------------------ RoleNote: the line under the head of a split or shared style */
.style-meta { color: var(--ink-3); font-size: 14px; }

/* ------------------------------------------------------------------ PageList rows: the words wrap, the two links stay at the right */
.pages-list .page > div { flex: 1 1 22rem; min-width: 0; }
.pages-list .page .p-links { flex: none; }

/* ------------------------------------------------------------------ PricesToday */
.today-rows > li { padding: var(--s3) var(--s5); display: grid; grid-template-columns: minmax(10rem, 0.9fr) minmax(14rem, 1.6fr); gap: 2px var(--s5); align-items: baseline; }
@media (max-width: 700px) { .today-rows > li { grid-template-columns: 1fr; padding: var(--s3) var(--s4); } }
.today-rows .t-name { font-weight: 600; }
.today-rows .t-kind { color: var(--ink-2); font-size: 14px; font-weight: 400; display: block; }
.today-rows .t-prices { display: grid; gap: 2px; font-variant-numeric: tabular-nums; }
.today-rows .t-two { font-weight: 600; }

/* ------------------------------------------------------------------ TouchLine: what a save touches, the one loud line of the check */
.touch { font-size: var(--fs-figure); line-height: 1.3; font-weight: 600; text-wrap: balance; }
.touch-sub { color: var(--ink-2); max-width: var(--measure); }
.touch-panel { padding: var(--s4) var(--s5); display: grid; gap: var(--s2); }
@media (max-width: 700px) { .touch-panel { padding: var(--s4); } }

/* ------------------------------------------------------------------ ChangeList: one row per color and place, before and after */
.changes > li { padding: var(--s3) var(--s5); display: grid; grid-template-columns: minmax(11rem, 1fr) minmax(15rem, 1.3fr); gap: 2px var(--s5); align-items: baseline; }
@media (max-width: 700px) { .changes > li { grid-template-columns: 1fr; padding: var(--s3) var(--s4); gap: var(--s1); } }
.changes .c-name { font-weight: 600; }
.changes .c-where { color: var(--ink-2); font-size: 14px; font-weight: 400; display: block; }
.changes .c-lines { display: grid; gap: 2px; font-variant-numeric: tabular-nums; }
.changes .c-label { color: var(--ink-2); }
.changes .was { color: var(--ink-2); }
.changes .now { font-weight: 600; }
.changes .stays { color: var(--ink-3); }
.same-fold { padding: var(--s2) var(--s5) var(--s3); }
@media (max-width: 700px) { .same-fold { padding: var(--s2) var(--s4) var(--s3); } }
.same-fold .fold-body ul { display: grid; gap: var(--s1); }

/* ------------------------------------------------------------------ PageWriteList: pages in the order they are saved, and how each went */
.writes > li { padding: var(--s3) var(--s5); display: grid; grid-template-columns: 1.75rem minmax(0, 1fr) auto; gap: 2px var(--s3); align-items: baseline; }
@media (max-width: 700px) { .writes > li { grid-template-columns: 1.5rem minmax(0, 1fr); padding: var(--s3) var(--s4); } }
.writes .w-n { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.writes .w-name { font-weight: 600; }
.writes .w-state { justify-self: end; text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 700px) { .writes .w-state { grid-column: 2; justify-self: start; text-align: left; } }
.writes .w-state.done { font-weight: 600; }
.writes .w-state.wait { color: var(--ink-3); }
.writes .w-state.bad { color: var(--urgent); font-weight: 600; }
.writes .w-note { grid-column: 2 / -1; color: var(--ink-2); font-size: 14px; max-width: var(--measure); }
.writes .w-links { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: 0 var(--s4); font-size: 14px; }
.writes .w-links a { min-height: var(--tap); display: inline-flex; align-items: center; }

/* ------------------------------------------------------------------ SavedPanel: the confirmation after a save */
.saved { padding: var(--s4) var(--s5); display: grid; gap: var(--s3); }
@media (max-width: 700px) { .saved { padding: var(--s4); } }
.saved .s-line { max-width: var(--measure); }
.saved .s-check { color: var(--ink-2); max-width: var(--measure); }

/* ------------------------------------------------------------------ Result rows of Find a style */
.result .prices { font-variant-numeric: tabular-nums; }
.result .read-only { color: var(--ink-2); }
.styles-letter { font-size: var(--fs-h2); font-weight: 600; margin: var(--s5) 0 var(--s2); }

/* ------------------------------------------------------------------ History: who and how it ended, under the sentence */
.entry .e-who { color: var(--ink-2); font-size: 14px; }
.entry .e-act { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); align-items: center; }
.entry .e-end { font-size: 14px; font-weight: 600; }
.entry .e-end.bad { color: var(--urgent); }

/* ------------------------------------------------------------------ the gift card's amounts (read-only) */
table.amounts { border-collapse: collapse; width: 100%; max-width: 320px; font-variant-numeric: tabular-nums; }
table.amounts th, table.amounts td { text-align: right; padding: 6px var(--s3); border-bottom: 1px solid var(--rule); }
table.amounts th:first-child, table.amounts td:first-child { text-align: left; padding-left: 0; }
table.amounts thead th { font-weight: 600; color: var(--ink-2); font-size: 14px; }

/* ================================================================== added in the build (review of 3 Oct 2026) */

/* The box's lines: a bold lead for what is wrong now. */
.box .b-line { max-width: var(--measure); }

/* The check: a far-off price must be confirmed before Save works (M4). The box is a 44 px target. */
.far { display: grid; gap: var(--s2); }
.far-confirm { display: inline-flex; align-items: center; gap: var(--s2); min-height: var(--tap); cursor: pointer; font-weight: 600; justify-self: start; }
.far-confirm input { width: 20px; height: 20px; margin: 0; accent-color: var(--ink); flex: none; }

/* The check: lines for changes the person may not have meant, and what is already right (M3). */
.attention { display: grid; gap: var(--s2); max-width: var(--measure); }
.already { color: var(--ink-2); max-width: var(--measure); }
.check-act { display: grid; gap: var(--s3); }
.check-act .clears + .clears { margin-top: 0; }
.not-changed { display: grid; gap: var(--s2); max-width: var(--measure); color: var(--ink-2); }
.not-changed a { min-height: var(--tap); display: inline-flex; align-items: center; }
.hint { color: var(--ink-3); font-size: 14px; margin-top: var(--s2); }

/* A refusal or a state with a short list of what changed (copy.md I2). */
.state .s-lines { display: grid; gap: var(--s1); max-width: var(--measure); }
.state .s-lines li { color: var(--ink); }

/* The red notice of a save that did not finish holds its two buttons (design.md 3.7). */
.notice .act { margin-top: var(--s2); }
.notice .next { margin-top: var(--s1); }

/* The style screen: the box covers lines sit closer to their box than the next box. */
.box .covers + .covers { margin-top: calc(-1 * var(--s1)); }
.page .p-status { color: var(--ink-2); font-weight: 400; }
.notes { display: grid; gap: var(--s2); margin-top: var(--s2); }
.notes p { color: var(--ink-2); max-width: var(--measure); }
.reread { font-size: 14px; }

/* Read-only styles: the reason in place of the boxes. */
.read-only { padding: var(--s5); display: grid; gap: var(--s2); justify-items: start; }
@media (max-width: 700px) { .read-only { padding: var(--s4); } }
.read-only h2 { font-size: var(--fs-subject); font-weight: 600; }
.read-only p { color: var(--ink-2); max-width: var(--measure); }

/* Results and All styles: a split title's half is named by its colors under the name (review S6). */
.result .sub, .s-row .sub { color: var(--ink-2); font-size: 14px; }
.s-row { padding: var(--s3) var(--s5); display: grid; gap: 2px; }
@media (max-width: 700px) { .s-row { padding: var(--s3) var(--s4); } }
.s-row .name { font-weight: 600; }
.s-row .name a { min-height: var(--tap); display: inline-flex; align-items: center; }
.s-row .text { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.s-row .bold { font-weight: 600; }

/* History entries: Undo sits under the sentence. */
.entry .e-act .btn { min-height: var(--tap); }

/* The admin's own menu (App Bridge reads it; it is never drawn inside the page). */
s-app-nav { display: none; }
/* A screen change moves focus to its title so a screen reader starts there; the title is not a control, so no ring. */
.page-head h1:focus { outline: none; }
/* "No change: 4 variants" sits a little apart from the list of changes. */
.changes + .same-fold { margin-top: var(--s2); }
/* The read-only panel is one block, not a list: no hairlines between its parts. */
.panel.read-only > * + * { border-top: 0; }
.read-only .ro-today { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
/* A state shown under a crumb, with no page head between them. */
.crumb + .panel { margin-top: var(--s3); }

/* ================================================================== review of 3 Oct 2026 (clarity) */

/* F12: a link that stands alone in its line is a tap target of its own (44 px on a phone), as .s-row .name a already is:
 * a result's name, the crumb, "See all ...", and the style's name in a History entry. */
.result .name a, .crumb a, .more a, .entry .e-subject a { min-height: var(--tap); display: inline-flex; align-items: center; }
.entry .e-subject { font-weight: 600; margin-bottom: calc(-1 * var(--s2)); }

/* F3: one quiet line next to a disabled button while the app reads Shopify (a live region: "Reading all 4 pages ..."). */
.working { color: var(--ink-2); font-size: 14px; flex: 1 1 14rem; }

/* F4: the far-off price box again next to Save, and the reason under a Save that is off. */
.far--again { padding-top: var(--s1); }
.act .save-needs { flex: 1 1 14rem; }

/* F11: a sentence most pages share, said once above the list; drafts as one short list. */
.pages-shared { display: grid; gap: var(--s2); margin-bottom: var(--s3); max-width: var(--measure); }
.pages-shared p { color: var(--ink-2); }
.draft-list { display: grid; gap: var(--s1); list-style: disc; padding-left: var(--s5); }
.draft-list a { min-height: var(--tap); display: inline-flex; align-items: center; }

/* F15: "Read again" on its own line under the read time, so the 44 px button leaves no uneven gap in the sentence. */
.reread-line { margin-top: calc(-1 * var(--s2)); }

/* F19: one plain line under the gift card's amounts when one costs less than it is worth. */
.amounts-note { font-weight: 600; max-width: var(--measure); }

/* ================================================================== the sale price per color (owner, 3 Oct 2026) */

/* The sale colors' boxes: one group, named once ("Sale prices"), each box labelled with its color and what it covers.
 * The group's name has the size of the "Full price" label; a color's name is body size, so the prices stay the loudest
 * thing. A hairline between the colors, as between the boxes. The hairline between the group and the Full price box is
 * drawn on a wrapper (.sale-part), never on the fieldset, so it sits above the "Sale prices" heading instead of running
 * through it (review of 3 Oct 2026, CL-7). */
.sale-group { border: 0; margin: 0; padding: 0; min-width: 0; }
.sale-group > legend { padding: 0; font-size: var(--fs-subject); font-weight: 600; }
.sale-group > .group-note { margin-top: var(--s1); color: var(--ink-2); max-width: var(--measure); }
.sale-group > .box { margin-top: var(--s4); }
.sale-group > .box + .box { border-top: 1px solid var(--rule); padding-top: var(--s4); }
.sale-group .box > label { font-size: var(--fs-body); }
.box + .sale-part, .sale-part + .box { border-top: 1px solid var(--rule); padding-top: var(--s5); }