/* schedule-ask.css — screen 48, the "Ask availability" section
   (plan schedule-interview-simplify, slice B, card B3).
   Additive to recruiting.css + recruiting-color.css; loads after them.
   Every rule here is new; nothing in the installed sheets is edited. */

/* Three modes, not four: at the slide-over's full width the switch is one
   row of three, and the chosen mode's line spans the whole row. */
@container (min-width: 56rem) {
  .rec-choices--modes:has(> .rec-choice:nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rec-choices--modes:has(> .rec-choice:nth-child(3):last-child) > .rec-choice:has(input:checked) .rec-choice__sub { width: calc(300% + 4px); }
}

/* Next [N] days · At least [N] times: two inline number fields side by side,
   one column when the slide-over is narrow. Reuses rec-hours__inline. */
.rec-ask__rules { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem 1.25rem; }
.rec-ask__rules .rec-hours__inline { margin-top: 0; font-size: 0.9rem; color: var(--hs-ink); }
.rec-ask__rules .rec-hours__inline .rec-input[type="number"] { width: 4.5rem; text-align: center; font-variant-numeric: tabular-nums; font-weight: 600; }
.rec-ask__rules .rec-input[aria-invalid="true"] { border-color: var(--ub-danger); }
.rec-ask__err { color: var(--ub-danger); }

/* Focus on the ask's own fields: 2px purple, 3:1+ on white. */
.rec-ask .rec-input:focus-visible,
.rec-ask .rec-select:focus-visible { outline: 2px solid var(--pp-mid); outline-offset: 1px; }

/* "What Ada is asked": the one-line preview of the candidate's brief. */
.rec-ask__preview { display: flex; flex-direction: column; gap: 0.35rem; padding: 0.85rem 1rem; border: 1px solid var(--pp-line); border-radius: var(--ub-radius-sm); background: var(--pp-tint); }
.rec-ask__k { margin: 0; font-family: var(--ub-font-mono); font-size: 0.6rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--pp-mid); }
.rec-ask__line { margin: 0; font-size: 0.95rem; font-weight: 600; line-height: 1.45; color: var(--pp-ink); text-wrap: pretty; }
.rec-ask__line--empty { font-weight: 400; color: var(--hs-ink-soft); }
.rec-ask__preview .rec-form__help { color: var(--hs-ink-soft); }

/* The answer: the candidate's ranges and the times each holds. */
.rec-ask__ranges { margin: 0.75rem 0 0; padding: 0; list-style: none; border: 1px solid var(--hs-line); border-radius: var(--ub-radius-sm); overflow: hidden; }
.rec-ask__ranges li { display: grid; grid-template-columns: minmax(6.5rem, auto) 1fr auto; align-items: baseline; gap: 0.75rem; padding: 0.5rem 0.8rem; border-top: 1px solid var(--hs-line); font-size: 0.85rem; }
.rec-ask__ranges li:first-child { border-top: 0; }
.rec-ask__day { font-weight: 700; color: var(--hs-ink); }
.rec-ask__t { font-variant-numeric: tabular-nums; color: var(--hs-ink); }
.rec-ask__n { font-size: 0.78rem; color: var(--hs-ink-soft); }

/* ARTBOARD ONLY — not for static/css. Contains the fixed slide-over and scrim
   inside a frame so several states sit on one canvas. */
.rec-ask-frame { position: relative; width: 1100px; height: 900px; overflow: hidden; transform: translateZ(0); display: block !important; min-height: 0 !important; border-radius: 6px; box-shadow: 0 1px 2px rgba(24, 18, 43, 0.08), 0 12px 32px rgba(24, 18, 43, 0.1); }
.rec-ask-frame .rec-scrim { inset: 0; }