/*
 * The price screens. Everything here is either a summary row or a big, plain
 * choice -- the two shapes D-037 settled on. Sizes follow app.css: 18-21px
 * body, 44px+ targets, because the person reading it is 75.
 */

.loading { font-size: 19px; color: var(--ink-soft); }

.pricebad {
  border: 2px solid var(--stop);
  background: #fdf2f0;
  color: var(--stop);
  border-radius: 12px;
  padding: 16px 18px;
  font-size: 18px;
  line-height: 1.5;
  margin: 0 0 20px;
}

/* The sentence that says, in words, what she has chosen. */
.plainly {
  background: var(--go-tint);
  border-radius: 12px;
  padding: 22px 24px;
  margin: 0 0 26px;
  text-align: left;
}
.plainly p { font: 500 25px/1.35 var(--serif); margin: 0; letter-spacing: -.01em; }
.plainly__also {
  font: 400 19px/1.5 var(--sans) !important;
  color: var(--ink-soft);
  margin-top: 10px !important;
}

.sumhead {
  font: 600 14px/1 var(--sans);
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: .12em;
  margin: 26px 0 10px;
  text-align: left;
}
.sumlist { border-top: 1px solid var(--rule); margin: 0 0 20px; }
.sumrow {
  display: grid;
  grid-template-columns: 1fr max-content max-content;
  gap: 18px;
  align-items: baseline;
  padding: 15px 2px;
  border-bottom: 1px solid var(--rule);
  text-align: left;
}
.sumrow--wrap { grid-template-columns: 1fr max-content; }
.sumrow__key { font-size: 18px; color: var(--ink-soft); }
.sumrow__val { font: 600 19px/1.35 var(--sans); font-variant-numeric: tabular-nums; }
.sumrow__val--soft { display: block; font-weight: 400; font-size: 17px; margin-top: 5px; }

/* A link that is really a button. 44px of height, not 13px of underline. */
.linkish {
  font: 500 18px/1 var(--sans);
  color: var(--ink);
  background: none;
  border: 0;
  border-bottom: 1.5px solid var(--rule);
  padding: 10px 2px;
  cursor: pointer;
}
.linkish:hover { color: var(--go); border-bottom-color: var(--go); }
.linkish:focus-visible { outline: 3px solid var(--mark); outline-offset: 3px; }

/* The big plain choices. */
.choice { display: grid; gap: 12px; margin: 0 0 24px; text-align: left; }
.choice__opt {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  border: 1.5px solid var(--rule);
  border-radius: 12px;
  padding: 16px 18px;
  background: var(--paper-card);
  cursor: pointer;
}
.choice__opt--on { border-color: var(--go); background: var(--go-tint); }
.choice__opt:focus-within { outline: 3px solid var(--mark); outline-offset: 3px; }
.choice__opt input { width: 26px; height: 26px; margin: 0; flex: none; accent-color: #1d5c3f; }
.choice__name { font: 600 19px/1.3 var(--sans); }
.choice__sub { display: block; font-size: 16px; font-weight: 400; color: var(--ink-soft); margin-top: 3px; }

.question { font: 600 18px/1.35 var(--sans); margin: 0 0 12px; text-align: left; }

/*
 * Her usual price: STATED, not chosen.
 *
 * Quiet and green-tinted so it reads as a fact about her prices rather than a
 * control she has failed to operate -- it is the ground the discount rungs
 * stand on, and there is nothing here to press. D-058.
 */
.base {
  display: flex;
  gap: 12px;
  align-items: baseline;
  flex-wrap: wrap;
  background: var(--go-tint);
  border-radius: 10px;
  padding: 14px 16px;
  margin: 0 0 18px;
  font-size: 18px;
  text-align: left;
}
.base__k { font-weight: 600; white-space: nowrap; }
.base__v { color: var(--ink-soft); flex: 1 1 260px; }

/* Money boxes. Wide enough for "$1,250" without the caret hiding. */
.amounts { display: grid; gap: 14px; margin: 0 0 22px; text-align: left; }
.amount {
  display: grid;
  grid-template-columns: 1fr 130px;
  gap: 16px;
  align-items: center;
}
.amount__what { font-size: 18px; }
.amount input {
  font: 600 20px/1 var(--sans);
  padding: 15px 14px;
  border: 1.5px solid var(--rule);
  border-radius: 10px;
  background: var(--paper-card);
  color: var(--ink);
  width: 100%;
}
.amount input:focus-visible { outline: 3px solid var(--mark); outline-offset: 2px; }

.exitnote { font-size: 15px; line-height: 1.5; color: var(--ink-soft); text-align: center; margin: 14px 0 0; }
.btn + .btn--quiet { margin-top: 12px; }
.bill__note { font-size: 16px; color: var(--ink-soft); margin: 16px 0 22px; text-align: left; }

@media (max-width: 460px) {
  .sumrow { grid-template-columns: 1fr max-content; row-gap: 6px; }
  .sumrow .linkish { grid-column: 2; justify-self: end; }
  .amount { grid-template-columns: 1fr 110px; }
}

/* Suggestions she ticks. Nothing is ticked until she ticks it. */
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 8px; }
.chip {
  font: 600 18px/1 var(--sans);
  color: var(--ink);
  background: var(--paper-card);
  border: 1.5px solid var(--rule);
  border-radius: 999px;
  padding: 15px 20px;          /* 48px tall: hittable by a 75-year-old */
  cursor: pointer;
}
.chip:hover { border-color: var(--go); color: var(--go); }
.chip:focus-visible { outline: 3px solid var(--mark); outline-offset: 3px; }
.chip--on { background: var(--go); border-color: var(--go); color: #fff; }
.chip--on:hover { background: var(--go-dark); border-color: var(--go-dark); color: #fff; }
.chips__add { display: flex; gap: 8px; }
.chips__add input {
  font: 500 18px/1 var(--sans);
  padding: 15px 16px;
  width: 170px;
  border: 1.5px dashed var(--rule);
  border-radius: 999px;
  background: none;
  color: var(--ink);
}
.chips__add input:focus-visible { outline: 3px solid var(--mark); outline-offset: 2px; }
.chip--add { border-style: dashed; color: var(--go); }
.chips__bad { color: var(--stop); font-size: 16px; margin: 8px 0 0; text-align: left; }
.chips__note { color: var(--ink-soft); font-size: 16px; line-height: 1.5; margin: 8px 0 20px; text-align: left; }
.amount__bad { color: var(--stop); font-size: 16px; line-height: 1.45; margin: 6px 0 0; text-align: left; }

/* The working, shown only where the app does arithmetic on her behalf. */
.examples { margin: 0 0 24px; text-align: left; }
.examples__head { font: 600 17px/1.3 var(--sans); color: var(--ink-soft); margin: 0 0 8px; }
.examples__list { margin: 0; padding-left: 22px; }
.examples__list li { font-size: 19px; line-height: 1.55; margin-bottom: 6px; }

.includes__box {
  display: block;
  width: 100%;
  font: 400 19px/1.5 var(--sans);
  color: var(--ink);
  background: var(--paper-card);
  border: 1.5px solid var(--rule);
  border-radius: 10px;
  padding: 15px 16px;
  resize: vertical;
}
.includes__box:focus-visible { outline: 3px solid var(--mark); outline-offset: 2px; }
.who-row { display: grid; grid-template-columns: 1fr 130px; gap: 16px; align-items: center;
           padding: 15px 2px; border-bottom: 1px solid var(--rule); text-align: left; }
.who-row__name { font: 600 19px/1.3 var(--sans); }
.who-row__usual { display: block; font-size: 16px; font-weight: 400; color: var(--ink-soft); margin-top: 3px; }
.who-row input {
  font: 600 19px/1 var(--sans); padding: 14px 12px; width: 100%;
  border: 1.5px solid var(--rule); border-radius: 10px;
  background: var(--paper-card); color: var(--ink);
}
.who-row input:focus-visible { outline: 3px solid var(--mark); outline-offset: 2px; }
/* The message slot keeps its line whether or not there is a message in it. A
   confirmation that appears and pushes the Back button out from under her
   finger costs her a whole press -- see studentRow(). */
.who-row__msg { grid-column: 1 / -1; min-height: 21px; margin-top: -12px; }
.who-row__bad { color: var(--stop); font-size: 16px; margin: 4px 0 0; }
.who-row__saved { color: var(--go); font-size: 16px; margin: 4px 0 0; }
@media (max-width: 460px) { .who-row { grid-template-columns: 1fr 110px; } }

/* One row per subject: its name, how it is priced, and a way to remove it. */
/* Three children -- name, price, Change -- so three columns. With two they
   wrapped and Change landed underneath, adrift in the middle of the row. */
.subj { display: grid; grid-template-columns: 1fr max-content max-content; gap: 10px 16px;
        align-items: center;
        padding: 14px 2px; border-bottom: 1px solid var(--rule); text-align: left; }
.subj__name { font: 600 19px/1.3 var(--sans); }
.subj__how { display: block; font-size: 16px; font-weight: 400; color: var(--ink-soft); margin-top: 3px; }
.subj__price { font: 600 19px/1 var(--sans); font-variant-numeric: tabular-nums; }
.subj__name { align-self: center; }
.subj__edit { grid-column: 1 / -1; display: grid; gap: 12px; padding: 6px 0 4px; }
.subj__edit input[type=text] {
  font: 500 19px/1 var(--sans); padding: 14px 14px; width: 100%;
  border: 1.5px solid var(--rule); border-radius: 10px;
  background: var(--paper-card); color: var(--ink);
}
.subj__edit input:focus-visible { outline: 3px solid var(--mark); outline-offset: 2px; }
.subj__row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/*
 * ⚠️ `.btn--sm` MOVED TO app.css ON 9 SEPTEMBER -- do not put it back here.
 *
 * It was defined only in this file, which `prices.html` links and
 * `teacher.html` does not. So the moment the calendar used it, the button
 * rendered as a full-width 22px slab on a page that had never heard of the
 * class -- L-64's known gap: a class can be DEFINED and still be missing, and
 * check_public.mjs gives a `.js` module the union of every stylesheet because
 * any page could import it.
 *
 * A general button size belongs with the general buttons. Two definitions of
 * one thing is L-49/L-65 waiting to happen.
 */
.subj__bad { color: var(--stop); font-size: 16px; margin: 0; }

/* ------------------------------------------------------------ add buttons
 *
 * These were written into the MOCKUP stylesheet and never into this one, so on
 * the live site they fell back to the browser's own button — a small grey pill
 * with the hint running inline beside the label. The owner spotted it the day
 * it deployed, and he was right that it was too small to see.
 *
 * Sized for the person actually using this. WCAG 2.5.8 (AA) asks for 24x24 CSS
 * pixels; 2.5.5 (AAA) asks for 44x44, which is also Apple's guidance and close
 * to Google's 48. A 75-year-old is exactly who AAA exists for, so these are
 * 60px tall and full width -- there is no reason to be stingy with a button
 * that has a whole row to itself.
 */
.addbtn {
  display: block;
  width: 100%;
  min-height: 60px;
  text-align: left;
  border: 2px dashed #cfc7b8;
  border-radius: 12px;
  padding: 17px 20px;
  margin: 0 0 20px;
  background: var(--paper-card);
  color: var(--go);
  font: 600 19px/1.35 var(--sans);
  cursor: pointer;
}
.addbtn:hover { border-color: var(--go); border-style: solid; background: var(--go-tint); }
.addbtn:active { transform: translateY(1px); }
.addbtn:focus-visible { outline: 3px solid var(--mark); outline-offset: 3px; }

/* Its own line, always. Inline is how it read as one long unreadable label. */
.addbtn__sub {
  display: block;
  font: 400 16px/1.45 var(--sans);
  color: var(--ink-soft);
  margin-top: 5px;
}

/* The row's own Change button had the same problem: a bare .linkish inside a
   grid cell collapsed to a thin underlined word. Give it a real hit area. */
.subj .linkish, .who-row .linkish, .sumrow .linkish {
  min-height: 44px;
  padding: 11px 6px;
}

/* The reassuring note under a set of choices — "a free one still goes in the
   diary". Same story as .addbtn: written into the mockup stylesheet, never into
   this one, so it rendered as unstyled body text on the live site. */
.because {
  background: var(--go-tint);
  border-radius: 12px;
  padding: 16px 18px;
  margin: 0 0 22px;
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-soft);
  text-align: left;
}
.because strong { color: var(--ink); font-weight: 600; }