/* ==========================================================================
   Draysey Woods — private admin page
   Mobile first on purpose: Charles sets his dates on a phone, not at a desk.
   Brand tokens come from style.css; nothing new is invented here.
   ========================================================================== */

body.admin {
  background: var(--olive);
  color: var(--cream);
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.admin__bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 1rem 1.15rem;
  border-bottom: 1px solid var(--line);
}
.admin__brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; color: var(--cream); }
.admin__brand svg { width: 30px; height: 30px; color: var(--lime); flex: none; }
.admin__brand > span { display: flex; flex-direction: column; line-height: 1.2; }
.admin__brand b { font-family: var(--font-display); font-weight: 500; font-size: 1.02rem; }
.admin__brand span span { font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-soft); }

.admin__signout {
  background: transparent; border: 1px solid var(--line);
  color: var(--muted); border-radius: 999px;
  padding: .45rem 1rem; font-size: .84rem;
}
.admin__signout:hover { color: var(--cream); border-color: var(--muted-soft); }

.admin__main { flex: 1; display: flex; align-items: flex-start; justify-content: center; padding: 2rem 1.15rem 3rem; }

/* On a phone the sign in panel is short and the page is tall, so left at the top
   it reads as a page that failed to finish loading. Centre it, but only while the
   panel is the small one: the calendar view fills the screen and must stay at the
   top or the first row hides under the fold. */
@media (min-height: 620px) {
  .admin__main:has(> section:not([hidden]):not(.admin__panel--wide)) { align-items: center; padding-bottom: 6rem; }
}

.admin__panel { width: 100%; max-width: 27rem; }
.admin__panel--wide { max-width: 60rem; }
.admin__panel h1 { font-size: clamp(1.6rem, 6vw, 2.1rem); margin: 0 0 .55rem; font-weight: 400; }
.admin__lede { color: var(--muted); margin: 0 0 1.6rem; font-size: .97rem; }
.admin__muted { color: var(--muted-soft); font-size: .9rem; }

.admin__wide { width: 100%; justify-content: center; }

.admin__label { display: block; font-size: .8rem; letter-spacing: .09em; text-transform: uppercase; color: var(--muted-soft); margin-bottom: .5rem; }

/* Wide, spaced digits: this is read off a phone screen and typed with a thumb. */
.admin__code {
  width: 100%; padding: .85rem 1rem; margin-bottom: .5rem;
  background: var(--olive-deep); color: var(--cream);
  border: 1px solid var(--line); border-radius: 12px;
  font-size: 1.65rem; letter-spacing: .42em; text-align: center;
  font-variant-numeric: tabular-nums;
}
.admin__code:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; border-color: var(--lime); }
.admin__code::placeholder { letter-spacing: .3em; color: rgba(243,241,196,.25); }

.admin__error { color: #ffb4a2; font-size: .88rem; min-height: 0; margin: 0; }
.sheet .admin__error:not(:empty) { margin-top: .6rem; }
#code-error { min-height: 1.3em; margin: 0 0 1rem; }
.admin__note  { color: var(--muted-soft); font-size: .88rem; min-height: 1.3em; margin: 1rem 0 0; }

.admin__link {
  display: block; margin: 1.25rem auto 0; background: none; border: 0;
  color: var(--muted); font-size: .9rem; text-decoration: underline; text-underline-offset: 3px;
}
.admin__link:hover { color: var(--cream); }

.admin__placeholder {
  border: 1px dashed var(--line); border-radius: 14px;
  padding: 1.5rem; background: rgba(0,0,0,.14);
}
.admin__placeholder p { margin: 0 0 .6rem; }
.admin__placeholder p:last-child { margin-bottom: 0; }

.admin__test {
  margin: 1rem 0 0; padding: .7rem .9rem; border-radius: 10px;
  background: rgba(186,218,85,.12); border: 1px solid rgba(186,218,85,.3);
  color: var(--cream); font-size: .87rem;
}
.admin__test b { font-variant-numeric: tabular-nums; letter-spacing: .2em; }

.admin__foot { padding: 1.4rem 1.15rem 2rem; border-top: 1px solid var(--line-soft); }
.admin__foot p { margin: 0; color: var(--muted-soft); font-size: .8rem; text-align: center; }

button[disabled] { opacity: .55; cursor: not-allowed; }

/* ==========================================================================
   The calendar
   Charles sets a season, not a night. Two taps set a range, the months stack
   and scroll, and every cell says what it is in words. No dots, no legend and
   no fractions: if a screen needs a key, the screen is wrong.
   ========================================================================== */

.cal__types { display: flex; gap: .4rem; margin: .2rem 0 .55rem; overflow-x: auto; padding-bottom: .3rem; }
.cal__type {
  flex: none; padding: .6rem 1rem; min-height: 44px; border-radius: 999px; font-size: .9rem;
  background: transparent; border: 1px solid var(--line); color: var(--muted); white-space: nowrap;
}
.cal__type[aria-selected="true"] { background: var(--lime); border-color: var(--lime); color: var(--ink); font-weight: 600; }

/* Claw back the page gutter on a phone. Every pixel here is cell width, and a
   cell has to hold a short sentence, not a number. */
.cal { margin-inline: -.55rem; }

.cal__month + .cal__month { margin-top: .3rem; }
.cal__month-head {
  position: sticky; top: 0; z-index: 5; margin: 0;
  background: var(--olive); padding: .75rem .55rem .35rem;
  font-family: var(--font-display); font-weight: 500;
}
.cal__month-name { display: block; font-size: 1.12rem; }
.cal__wk { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-top: .45rem; }
.cal__wk span { text-align: center; font-family: var(--font-body); font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-soft); }

.cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; padding: 0 .55rem; }

.cal__day {
  min-height: 62px; border-radius: 8px; padding: .28rem .1rem .26rem;
  background: var(--olive-deep); border: 1px solid transparent; color: var(--muted);
  display: flex; flex-direction: column; align-items: center; gap: .08rem;
  font-size: .62rem; line-height: 1.22; text-align: center;
  overflow-wrap: normal; word-break: normal; hyphens: none;
}
.cal__day--blank { background: transparent; border: 0; pointer-events: none; min-height: 0; }
.cal__day--past  { opacity: .3; pointer-events: none; }
.cal__num  { font-size: .95rem; line-height: 1.1; color: var(--cream); font-variant-numeric: tabular-nums; }
/* One step down from the cell's own size (the same .12rem step the 34rem query
   uses to go the other way), so a phone-width cell has room for "Someone is"
   and "booking" as two whole words each, never a mid-word break. */
.cal__word { display: block; font-size: .5rem; }

.cal__day--open  { background: rgba(186,218,85,.18); border-color: rgba(186,218,85,.36); color: var(--cream); }
.cal__day--open .cal__num { color: var(--cream-bright); }
/* Mixed only happens on All pitches, and it must not read as either state. */
.cal__day--mixed {
  background: repeating-linear-gradient(135deg, rgba(186,218,85,.17) 0 5px, rgba(0,0,0,.16) 5px 10px);
  border-color: rgba(186,218,85,.3); color: var(--cream);
}
/* A night Pitchup and the calendar do not agree about. "Needs you" is the only
   thing on this page he has to act on, so it is warm and it is not subtle.
   "Being fixed" is quiet, because that one is ours, not his. The salmon is the
   one already used by .admin__error; no new hue is introduced. */
.cal__day--needs { background: rgba(255,180,162,.16); border-color: rgba(255,180,162,.6); color: var(--cream); }
.cal__day--needs .cal__num { color: var(--cream-bright); }
.cal__word--needs  { color: #ffb4a2; font-weight: 600; }
.cal__word--fixing { color: var(--muted-soft); }

.cal__day--sel  { background: rgba(186,218,85,.28); border-color: rgba(186,218,85,.5); color: var(--cream); }
.cal__day--edge { background: var(--lime); border-color: var(--lime); }
.cal__day--edge .cal__num, .cal__day--edge .cal__word { color: var(--ink); }
.cal__day:focus-visible { outline: 2px solid var(--cream-bright); outline-offset: 1px; }
/* Where a tapped list line lands, so the eye finds the night it just scrolled to. */
.cal__day--found { outline: 2px solid var(--cream-bright); outline-offset: 2px; }

@media (min-width: 34rem) {
  .cal { margin-inline: 0; }
  .cal__month-head { padding-inline: 0; }
  .cal__grid { padding: 0; gap: 5px; }
  .cal__wk   { gap: 5px; }
  .cal__wk span { font-size: .7rem; }
  .cal__month-name { font-size: 1.4rem; }
  .cal__day { min-height: 82px; font-size: .74rem; padding: .45rem .3rem; gap: .12rem; }
  .cal__num { font-size: 1.08rem; }
  .cal__word { font-size: .74rem; }
}

/* ==========================================================================
   The nights that do not agree, listed above the grid
   One sentence a night, saying whose job it is. Tapping a line scrolls to the
   night. No icons and no severity chips: the sentence is the signal.
   ========================================================================== */
.dis {
  margin: .1rem 0 1rem;
  padding: .8rem .95rem .2rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(0,0,0,.16);
}
.dis__head { margin: 0 0 .15rem; }
/* The count is a BUTTON now (2026-09-10): it opens the grouped detail. It keeps
   its own class rather than borrowing .dis__line, so nothing shares its
   specificity and the flex that the caret needs cannot be beaten by a
   display:block from elsewhere. That is the 2026-09-07 failure, one element
   along: .dis__line--fold above .dis__line lost its caret because block won
   over flex and a ::before carrying width and height on a non-replaced inline
   box renders as nothing at all. CHECK THE CARET IN A SCREENSHOT, not the DOM:
   six DOM assertions passed while it was invisible. */
.dis__count {
  display: flex; align-items: center; gap: .5rem;
  width: 100%; min-height: 44px; margin: 0 0 .12rem; padding: 0;
  border: 0; background: none; text-align: left; cursor: pointer;
  font-family: var(--font-body); font-weight: 600;
  font-size: 1.02rem; line-height: 1.35; color: #ffb4a2;
}
.dis__count::before {
  content: ''; flex: none; width: 8px; height: 9px;
  background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%);
  transition: transform .15s;
}
.dis__count:hover { color: #ffd0c2; }
.dis__count:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; border-radius: 8px; }

.dis__when {
  display: block;
  font-family: var(--font-body); font-weight: 600;
  font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted-soft);
}
/* Not a label but a sentence, so not in caps. */
.dis__when--stale {
  text-transform: none; letter-spacing: 0;
  font-size: .9rem; font-weight: 500; line-height: 1.45;
  color: var(--muted);
}

/* ---- the sentences ---------------------------------------------------- */
.dis__line {
  display: block; width: 100%; min-height: 44px;
  margin: 0; padding: .65rem 0; border: 0; background: none;
  text-align: left; cursor: pointer;
  font-family: var(--font-body); font-size: .95rem; line-height: 1.45;
  color: var(--muted);
}
.dis__line--needs { color: #ffb4a2; }
.dis__line:hover { color: var(--cream-bright); }
.dis__line--needs:hover { color: #ffd0c2; }
.dis__line:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; border-radius: 8px; }

/* The one line about what is in hand. It sits ABOVE the scroll box, with the
   count and the checked line, because it is reassurance: it says some of this
   needs nothing from him. Inside the box it disappeared below the fold exactly
   when the list was longest, which is when the reassurance was most wanted.
   These rules must stay BELOW .dis__line: they share its specificity, so put
   above it the display:block would win and the caret would collapse. */
.dis__line--fold {
  display: flex; align-items: center; gap: .55rem;
  min-height: 40px; padding: .5rem 0 .6rem;
  color: var(--muted-soft);
}
.dis__line--fold:hover { color: var(--cream); }
.dis__line--fold::before {
  content: ''; flex: none; width: 8px; height: 9px;
  background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%);
  transition: transform .15s;
}
.dis__line--fold[aria-expanded="true"]::before { transform: rotate(90deg); }

/* The block is a summary sitting on top of the thing it summarises, so it must
   never push the calendar off a 390 x 844 screen. THE ACCEPTANCE TEST IS THAT
   THE FIRST ROW OF CALENDAR DATES STAYS VISIBLE.

   Only the sentences scroll. The count, the checked line and the folded line
   are all outside this box and cannot scroll away, and the folded line's own
   detail is INSIDE it, so opening that line cannot grow the panel: measured
   below, the first row lands on the same pixel open or closed.

   Measured 2026-09-07 on the deployed preview, with the worst case this design
   allows: eleven waiting nights listed, the folded line, and its three nights
   open. Headroom is the gap between the bottom of the first calendar row and
   the bottom of the viewport, so bigger is safer and negative fails.

     value    390x844   1280x900
     26dvh     +20px      +22px
     24dvh     +37px      +40px
     22dvh     +54px      +58px    <- shipped
     20dvh     +71px      +76px

   RE-MEASURED 2026-09-10, because the count line changed from a static block to
   a 44px flex button with a caret and the note below says to re-measure when
   anything above the box gains a line. The grouped list is also CLOSED by
   default now, so the default case is shorter than any figure above; the worst
   case is unchanged, because the detail opens INSIDE the box and cannot grow the
   panel. Figures from that re-measurement are recorded next to this table.

   Chromium only, at those two viewports. NOT checked on a real iPhone, where
   browser chrome moves dvh under you. The headroom is the margin that covers
   that; it is a margin, not a proof. Re-measure if anything above the box gains
   a line: the header gaining the count line is what took 26dvh from +46px to
   +20px. (Earlier figures for 34dvh and 30dvh were taken before that line
   existed and no longer apply.) */
.dis__body {
  max-height: 22dvh; overflow-y: auto; overscroll-behavior: contain;
  border-top: 1px solid var(--line-soft);
}
/* Only the edge with more beyond it fades, so a box scrolled to the top does
   not dim its own first line. */
.dis__body--fade-top {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22px);
          mask-image: linear-gradient(to bottom, transparent 0, #000 22px);
}
.dis__body--fade-bot {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent 100%);
          mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent 100%);
}
.dis__body--fade-top.dis__body--fade-bot {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%);
}

/* ---- the sheet --------------------------------------------------------
   The detail is FULL HEIGHT over the page, not a box inside it. That is what
   retired the 22dvh argument rather than settling it: the inline part never
   expands, so its height stopped being a tradeoff. Every problem fits, and the
   sheet scrolls if they do not.

   `display: flex` here means the hidden attribute would be overridden, which is
   the same class of trap as the caret on 2026-09-07, so the [hidden] rule below
   MUST stay below this one. */
.sheet {
  position: fixed; inset: 0; z-index: 60;
  display: flex; flex-direction: column;
  background: rgba(10, 12, 10, .82);
}
.sheet[hidden] { display: none; }
.sheet__bar {
  flex: none; display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: max(.9rem, env(safe-area-inset-top)) 1.15rem .9rem;
  background: #1d211c; border-bottom: 1px solid var(--line-soft);
}
.sheet__title {
  margin: 0; font-family: var(--font-body); font-weight: 600;
  font-size: 1.05rem; line-height: 1.3; color: #ffb4a2;
}
.sheet__close {
  flex: none; min-height: 44px; min-width: 64px; padding: 0 .9rem;
  border: 1px solid var(--line-soft); border-radius: 10px;
  background: none; cursor: pointer;
  font-family: var(--font-body); font-size: .95rem; color: var(--cream);
}
.sheet__close:hover { color: var(--cream-bright); border-color: var(--muted-soft); }
.sheet__close:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.sheet__body {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  background: #1d211c;
  padding: .2rem 1.15rem max(1.2rem, env(safe-area-inset-bottom));
}
/* The page behind must not scroll under the sheet, or a phone moves the calendar
   while the sheet is scrolling too. */
html.is-sheet, html.is-sheet body { overflow: hidden; }

/* ---- one problem, many nights ----------------------------------------- */
/* Deliberately NO `display` on .dis__group. The hidden attribute is what the
   "And N more problems." line toggles, and any display here would beat it. If a
   display is ever needed, the [hidden] rule below has to stay below it. */
.dis__group { padding: .55rem 0; }
.dis__group[hidden] { display: none; }
.dis__problem {
  margin: 0 0 .4rem;
  font-family: var(--font-body); font-size: .95rem; line-height: 1.45;
  color: #ffb4a2;
}
.dis__dates { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem; }
.dis__dates li + li { border-top: 0; }        /* the list rule below is for problems, not dates */
.dis__date {
  display: inline-flex; align-items: center; min-height: 44px;
  margin: 0; padding: 0 .7rem; border: 1px solid var(--line-soft); border-radius: 8px;
  background: none; cursor: pointer;
  font-family: var(--font-body); font-size: .88rem; color: var(--cream);
}
.dis__date:hover { color: var(--cream-bright); border-color: var(--muted-soft); }
.dis__date:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
/* An unreadable date is shown and not tappable, so it must not look tappable. */
.dis__date--flat { cursor: default; color: var(--muted-soft); border-style: dashed; }
.dis__date--flat:hover { color: var(--muted-soft); border-color: var(--line-soft); }
.dis__more {
  display: block; width: 100%; min-height: 44px;
  margin: 0; padding: .5rem 0; border: 0; background: none;
  text-align: left; cursor: pointer;
  font-family: var(--font-body); font-size: .92rem; color: var(--muted-soft);
}
.dis__more:hover { color: var(--cream); }
.dis__more:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; border-radius: 8px; }

.dis__list, .dis__sub { list-style: none; margin: 0; padding: 0; }
.dis__list li + li, .dis__sub li + li { border-top: 1px solid var(--line-soft); }
.dis__sub { padding-left: 1.35rem; }
.dis__sub + .dis__list { border-top: 1px solid var(--line-soft); }
.dis__sub .dis__line { font-size: .9rem; padding: .5rem 0; min-height: 0; color: var(--muted-soft); }

@media (min-width: 34rem) {
  .dis { padding: 1rem 1.15rem .3rem; }
  /* The panel is as wide as the calendar, which is far wider than a sentence
     should be. Hold the line length, not the panel. */
  .dis__line { font-size: 1rem; max-width: 68ch; }
  /* Same reason as .dis__line: the panel is as wide as the calendar, which is far
     wider than a sentence should be. Hold the line, not the panel. */
  .dis__problem { font-size: 1rem; max-width: 68ch; }
  .dis__when--stale { max-width: 68ch; }
  .dis__count { font-size: 1.1rem; }
  .dis__sub .dis__line { font-size: .95rem; }
}

/* How many of each you have. Read only in this version, on purpose. */
.cal__ring { color: var(--muted-soft); font-size: .88rem; margin: 0 0 .4rem; }

/* ==========================================================================
   The bar at the bottom: what is selected, in words, and what to do with it.
   It docks rather than covering: he keeps tapping while it is open.
   ========================================================================== */
.bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; justify-content: center; pointer-events: none; }
.bar__inner {
  pointer-events: auto; width: 100%; max-width: 34rem;
  background: var(--olive-mid); border: 1px solid var(--line); border-bottom: 0;
  border-radius: 18px 18px 0 0; padding: .75rem 1rem calc(.8rem + env(safe-area-inset-bottom));
  box-shadow: 0 -18px 40px rgba(0,0,0,.5); max-height: 65dvh; overflow-y: auto;
}
.bar__what { margin: 0 0 .55rem; font-size: 1.06rem; color: var(--cream-bright); }
/* Side by side from the narrowest screen up: stacked, these two buttons cost a whole extra
   row of height on the phone, and the bar was 38% of the screen. */
.bar__actions { display: flex; flex-direction: row; gap: .5rem; margin-top: .7rem; }
.bar__said { margin: 0 0 .7rem; font-size: 1.02rem; color: var(--cream-bright); }
.bar__list { list-style: none; margin: 0 0 .95rem; padding: 0; color: var(--muted); font-size: .9rem; }
.bar__list li { padding: .4rem 0; border-top: 1px solid var(--line-soft); }
.bar .admin__link { margin-top: .55rem; }
/* RE-MEASURE WHEN THE BAR'S CONTENTS CHANGE. The Pitchup switch and its helper line are coming
   out of this bar as part of finishing the architecture pivot (on_pitchup is going entirely), so
   the 239px measured on 2026-09-08 is not the final height and the bar gets shorter for free.
   Nothing here breaks when that happens -- the height is measured, not written down -- but the
   FIGURES in the notes will need retaking, and "the bar is 28% of the screen" will be stale.
   The page reserves EXACTLY the bar's height, measured and published as --bar-h by admin.js.
   It used to reserve a flat 21rem, which was a guess that happened to be 16px out for the
   picking pane and is simply wrong for the others, since the result pane's height depends on
   how many nights it lists. */
body.admin--picking .admin__main { padding-bottom: calc(var(--bar-h, 21rem) + 1.25rem); }

@media (min-width: 34rem) {
  .bar { justify-content: flex-end; padding: 0 1.5rem 1.5rem; }
  /* An action bar is sized by its contents, not by the window. Two buttons and a line of
     text do not need 34rem once the bar is floating rather than spanning the screen.
     Narrowed 2026-09-09 (Avara). The phone keeps the full width above, where it is right. */
  .bar__inner { border-radius: 18px; border-bottom: 1px solid var(--line); max-width: 26rem; }
  body.admin--picking .admin__main { padding-bottom: 4rem; }   /* the bar floats, nothing to clear */
}

/* The switch, unchanged from the sign in build. */
.toggle { display: flex; gap: .85rem; align-items: flex-start; cursor: pointer; }
.toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.toggle__track { flex: none; width: 46px; height: 28px; border-radius: 999px; background: var(--olive-deep); border: 1px solid var(--line); position: relative; transition: background .15s; margin-top: .1rem; }
.toggle__dot { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--muted-soft); transition: transform .15s, background .15s; }
.toggle input:checked + .toggle__track { background: rgba(186,218,85,.28); border-color: var(--lime); }
.toggle input:checked + .toggle__track .toggle__dot { transform: translateX(18px); background: var(--lime); }
.toggle input:focus-visible + .toggle__track { outline: 2px solid var(--lime); outline-offset: 2px; }
.toggle__text b { display: block; font-weight: 600; font-size: .93rem; }
.toggle__text small { display: block; color: var(--muted-soft); font-size: .8rem; margin-top: .1rem; line-height: 1.4; }

/* The bar stacks the switch, this line and the buttons, so it needs its own
   breathing room rather than the settings block spacing. */
.bar .cal__ring { margin: .85rem 0 0; }

/* ==========================================================================
   How many pitches he has. Added 2026-09-22.
   Two states from one block: a single quiet line once it is answered, and a
   proper ask before it is. Loud only while it is the thing stopping him.
   Tokens are the page's own; nothing new is invented here.
   ========================================================================== */
.pitches { margin: 0 0 1.5rem; }

/* answered: one line, deliberately close to the note styling so it reads as
   background information rather than as another thing to do */
.pitches__line {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .7rem;
  margin: 0; font-size: .9rem; color: var(--muted-soft);
}
.pitches__summary { font-variant-numeric: tabular-nums; }
/* .admin__link centres itself and adds a big top margin, which is right for a
   standalone action and wrong for one sitting inline at the end of a sentence */
.pitches__change { display: inline; margin: 0; font-size: .85rem; }

.pitches__warn {
  margin: .55rem 0 0; padding: .6rem .75rem;
  border: 1px solid rgba(255,180,162,.5); border-radius: 8px;
  background: rgba(255,180,162,.1);
  color: var(--cream); font-size: .86rem; line-height: 1.45;
}

/* not answered yet: the ask */
.pitches__ask {
  padding: 1.05rem 1.1rem 1.15rem;
  border: 1px solid rgba(186,218,85,.34); border-radius: 12px;
  background: rgba(186,218,85,.07);
}
.pitches__h   { margin: 0 0 .4rem; font-size: 1.06rem; line-height: 1.25; color: var(--cream-bright); }
.pitches__why { margin: 0 0 1rem; font-size: .9rem; line-height: 1.5; color: var(--muted); }

.pitches__rows { display: flex; flex-direction: column; gap: .55rem; }
.pitches__row {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  /* 44px of height so it is a comfortable tap target on the phone he uses */
  min-height: 44px;
  padding: .3rem .1rem;
}
.pitches__name { font-size: .95rem; color: var(--cream); }
.pitches__num {
  width: 4.5rem; min-height: 44px; padding: .4rem .55rem;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--olive-deep); color: var(--cream-bright);
  font: inherit; font-size: 1.05rem; text-align: center;
  font-variant-numeric: tabular-nums;
}
.pitches__num:focus-visible { outline: 2px solid var(--cream-bright); outline-offset: 1px; }

.pitches__acts { margin-top: 1rem; }
.pitches__acts .btn { width: 100%; }
.pitches__acts .admin__link { margin-top: .9rem; }
.pitches__ask .admin__error:not(:empty) { margin: .75rem 0 0; }

@media (min-width: 720px) {
  .pitches__ask { padding: 1.2rem 1.35rem 1.3rem; }
  .pitches__row { max-width: 26rem; }
  .pitches__acts .btn { width: auto; min-width: 11rem; }
}