/* ═══════════════════════════════════════════════════════════════════════
   diary.css — the Sales diary, as a shared component

   Ported from Sales `assets/bdr.css` (the `.b-cal` block and §84 "The diary,
   as a page") so that After hours re-uses the diary rather than inventing a
   calendar of its own. Class names are kept exactly, so a rule fixed in one
   repo can be carried to the other line for line. The two differences:

   - px became rem (÷16). At 1536 the root is 16px and every value lands
     where Sales draws it; above 1536 it grows with the rest of Knowledge.
   - Sales' type tokens (--t-ui, --t-small, --t-micro, --t-body, --t-deck,
     --t-settle) are Sales-only, so they are set here on `.b-cal` at the
     values Sales gives them.

   The dot kinds at the bottom are After hours' own, in the slot where Sales
   keeps its meeting kinds.
   ═══════════════════════════════════════════════════════════════════════ */

@keyframes b-surface-in { from { opacity: 0; transform: translateY(0.375rem); } to { opacity: 1; transform: none; } }

.b-cal {
  --t-body: 1rem; --t-ui: 0.875rem; --t-small: 0.875rem; --t-micro: 0.75rem;
  --t-deck: 1.125rem; --t-settle: 220ms;
  /* Sales' body sets 1.5 and the diary inherits it; Knowledge's does not. */
  line-height: 1.5;
  margin-top: 1rem; max-width: 45rem;
}
.b-cal-head {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.625rem; padding: 0.125rem 0.125rem 0.75rem; margin-bottom: 0.625rem;
  border-bottom: 1px solid var(--card-border);
}
.b-cal-month {
  display: flex; align-items: center; gap: 0.625rem; margin: 0; min-width: 0;
  font-size: 1rem; font-weight: var(--fw-bold); color: var(--d50);
  letter-spacing: -0.02em;
  line-height: 1.25;
}
.b-cal-count {
  min-width: 1.5rem; text-align: center; padding: 0.1875rem 0.5rem; border-radius: var(--r-pill);
  font-size: var(--t-micro); font-weight: var(--fw-semibold); color: var(--d200);
  background: var(--card-bg); border: 1px solid var(--card-border);
  font-variant-numeric: tabular-nums; line-height: 1.25;
}
.b-cal-nav { display: flex; align-items: center; gap: 0.5rem; }
.b-cal-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; flex: none;
  border-radius: var(--r-pill); cursor: pointer;
  color: var(--d200); background: none; border: 1px solid var(--card-border);
  font-family: inherit; font-size: var(--t-ui); font-weight: var(--fw-semibold);
  transition: color var(--t-fast), border-color var(--t-fast),
    background-color var(--t-fast), transform 160ms var(--ease-out);
}
.b-cal-btn.is-word { width: auto; padding: 0 0.875rem; }
.b-cal-btn svg { width: 1rem; height: 1rem; }
.b-cal-btn:hover { color: var(--d50); border-color: var(--card-border-hover); }
.b-cal-btn:active { transform: scale(0.96); }
.b-cal-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.b-cal-panel {
  padding: 0.5rem; border-radius: var(--r-lg);
  background: var(--card-bg); border: 1px solid var(--card-border);
}
.b-cal-week { display: grid; grid-template-columns: repeat(7, 1fr); padding: 0.125rem 0 0.25rem; }
.b-cal-wd {
  text-align: center; font-size: var(--t-micro); font-weight: var(--fw-semibold);
  color: var(--d200);
}
.b-cal-wd.is-end { color: var(--ink-muted); }
.b-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); }

.b-cal-day {
  position: relative; height: 3.375rem; padding: 0; border: 0; background: none;
  cursor: pointer; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 0.3125rem; border-radius: var(--r-md);
  font-family: inherit;
}
.b-cal-day:focus { outline: none; }
.b-cal-bg {
  position: absolute; inset: 0.125rem 0.25rem; border-radius: var(--r-md);
  opacity: 0; transform: scale(0.9);
  background: rgba(var(--accent-rgb), 0.12);
  transition: opacity 160ms var(--ease-out), transform 200ms var(--ease-out);
}
.b-cal-day:hover .b-cal-bg { opacity: 1; transform: none; }
.b-cal-day.is-sel .b-cal-bg,
.b-cal-day.is-sel:hover .b-cal-bg {
  opacity: 1; transform: none; background: rgba(var(--accent-rgb), 0.22);
}
.b-cal-day:focus-visible .b-cal-bg {
  opacity: 1; transform: none; background: none;
  box-shadow: inset 0 0 0 2px var(--brand);
}
.b-cal-num {
  position: relative; font-size: var(--t-ui); font-weight: var(--fw-medium);
  color: var(--d100); font-variant-numeric: tabular-nums;
}
.b-cal-day.is-out .b-cal-num { color: var(--ink-muted); }
.b-cal-day.is-end .b-cal-num { color: var(--d200); }
.b-cal-day.is-sel .b-cal-num { color: var(--d50); font-weight: var(--fw-bold); }
.b-cal-day.is-today .b-cal-num::after {
  content: ""; position: absolute; left: 50%; bottom: -0.4375rem; width: 0.1875rem; height: 0.1875rem;
  margin-left: -0.09375rem; border-radius: var(--r-pill); background: var(--accent);
}
.b-cal-day.is-today.is-sel .b-cal-num::after { display: none; }
.b-cal-dots { position: relative; display: flex; gap: 0.1875rem; height: 0.3125rem; align-items: center; }
.b-cal-dot { width: 0.3125rem; height: 0.3125rem; border-radius: var(--r-pill); flex: none; }
.b-cal-day.is-out .b-cal-dot { opacity: 0.4; }

.b-cal-cap {
  margin: 0; padding: 1rem 0.5rem 0.5rem;
  font-size: var(--t-micro); font-weight: var(--fw-medium); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-muted);
}
.b-cal-agenda { display: flex; flex-direction: column; }
.b-cal-ev {
  display: flex; flex-direction: column; align-items: stretch; gap: 0.1875rem;
  width: 100%; text-align: left;
  padding: 0.5625rem 0.5rem; border: 0; border-radius: var(--r-md);
  background: none; cursor: pointer; font-family: inherit;
  transition: background-color var(--t-fast);
  animation: b-surface-in var(--t-settle) var(--ease-out) both;
  animation-delay: calc(min(var(--i, 0), 8) * 40ms);
}
.b-cal-ev:hover { background: rgba(var(--accent-rgb), 0.10); }
.b-cal-ev:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.b-cal-ev.is-plain { cursor: default; }
.b-cal-ev.is-plain:hover { background: none; }
.b-cal-ev .b-cal-dot { width: 0.5rem; height: 0.5rem; }
.b-cal-evtop { display: flex; align-items: center; gap: 0.5rem; }
.b-cal-evtop .b-kind { flex: none; }
.b-kind {
  font-size: var(--fs-2xs); font-weight: var(--fw-semibold);
  color: var(--ink-faint); white-space: nowrap;
}
.b-cal-etime {
  flex: none; font-size: var(--t-small); font-weight: var(--fw-semibold);
  color: var(--d200); font-variant-numeric: tabular-nums;
}
.b-cal-ename {
  flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.125rem;
  font-size: var(--t-ui); font-weight: var(--fw-semibold); color: var(--d50);
}
.b-cal-ewhat { font-size: var(--t-small); font-weight: var(--fw-medium); color: var(--d200); }
.b-cal-none { margin: 0; padding: 0.25rem 0.5rem 0.5rem; font-size: var(--t-body); color: var(--d200); }

.b-cal-add {
  display: flex; align-items: center; gap: 0.6875rem; width: 100%; margin-top: 0.25rem;
  padding: 0.5625rem 0.5rem; border: 0; background: none; border-radius: var(--r-md);
  cursor: pointer; font-family: inherit;
  font-size: var(--t-ui); font-weight: var(--fw-medium); color: var(--d200);
  transition: background-color var(--t-fast), color var(--t-fast);
}
.b-cal-add:hover { background: rgba(var(--accent-rgb), 0.10); color: var(--d50); }
.b-cal-add:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.b-cal-plus {
  display: flex; align-items: center; justify-content: center; flex: none;
  width: 1.5rem; height: 1.5rem; border-radius: var(--r-pill);
  border: 1px solid var(--card-border); color: inherit;
  transition: transform 200ms var(--ease-out), border-color var(--t-fast);
}
.b-cal-plus svg { width: 0.8125rem; height: 0.8125rem; }
.b-cal-add:hover .b-cal-plus { transform: rotate(90deg); border-color: var(--card-border-hover); }

.b-cal-next {
  margin-top: 0.75rem; padding-top: 0.625rem;
  border-top: 1px solid var(--card-border);
}
.b-cal-next .b-cal-cap { padding-top: 0; }
.b-cal-nrow {
  display: flex; align-items: center; gap: 0.5625rem; width: 100%; text-align: left;
  padding: 0.4375rem 0.5rem; border: 0; border-radius: var(--r-md);
  background: none; cursor: pointer; font-family: inherit;
  transition: background-color var(--t-fast);
  animation: b-surface-in var(--t-settle) var(--ease-out) both;
  animation-delay: calc(min(var(--i, 0), 8) * 40ms);
}
.b-cal-nrow:hover { background: rgba(var(--accent-rgb), 0.10); }
.b-cal-nrow:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.b-cal-nwhen {
  flex: none; font-size: var(--t-small); font-weight: var(--fw-semibold);
  color: var(--ink-muted); font-variant-numeric: tabular-nums;
}
.b-cal-nwho {
  flex: 1; min-width: 0; font-size: var(--t-ui); font-weight: var(--fw-semibold);
  color: var(--d100); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.b-cal-mo { min-width: 0; }
.b-cal-side {
  min-width: 0; padding-top: 0.75rem; margin-top: 0.75rem;
  border-top: 1px solid var(--card-border);
}
.b-cal-side .b-cal-cap { margin-top: 0; }

/* ── The diary, as a page (Sales §84) ── */
.b-diary { margin-bottom: 0.25rem; }
.b-diary .b-cal { margin-top: 0.25rem; max-width: 67.5rem; }
.b-diary .b-cal-panel {
  display: grid; grid-template-columns: minmax(0, 1fr) 21.25rem; align-items: start;
  padding: 0.75rem 0.875rem 0.875rem;
}
.b-diary .b-cal-head { grid-column: 1 / -1; }
.b-diary .b-cal-side {
  padding-left: 1.125rem; margin-left: 1.125rem; padding-top: 0; margin-top: 0;
  border-left: 1px solid var(--card-border); border-top: 0;
}
.b-diary .b-cal-day { height: 4.5rem; gap: 0.4375rem; }
.b-diary .b-cal-num { font-size: var(--t-deck); }
.b-diary .b-cal-dots { gap: 0.25rem; height: 0.4375rem; }
.b-diary .b-cal-dot { width: 0.4375rem; height: 0.4375rem; }
.b-diary .b-cal-week { padding: 0.25rem 0 0.5rem; }
.b-diary .b-cal-wd { font-size: var(--t-ui); }
.b-diary .b-cal-day.is-today .b-cal-num::after {
  bottom: -0.5625rem; width: 0.25rem; height: 0.25rem; margin-left: -0.125rem;
}
.b-diary .b-cal-cap { padding-top: 0; }
.b-diary .b-cal-etime, .b-diary .b-cal-ewhat { font-size: var(--t-ui); }
@media (max-width: 1023.98px) {
  .b-diary .b-cal-panel { grid-template-columns: minmax(0, 1fr); }
  .b-diary .b-cal-side {
    padding-left: 0; margin-left: 0; padding-top: 0.75rem; margin-top: 0.75rem;
    border-left: 0; border-top: 1px solid var(--card-border);
  }
  .b-diary .b-cal-day { height: 3.75rem; }
}
@media (max-width: 559.98px) {
  .b-cal-day { height: 3rem; }
  .b-cal-etime { min-width: 3rem; white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
  .b-cal-bg, .b-cal-plus, .b-cal-btn { transition: none; }
  .b-cal-ev, .b-cal-nrow { animation: none; }
  .b-cal-btn:active { transform: none; }
  .b-cal-add:hover .b-cal-plus { transform: none; }
}

/* ── After hours' kinds of night ──
   Where Sales spends five hues on five kinds of meeting, a night has four
   states, in the tones the product already owns for them. */
.k-on    { background: var(--accent-label); }
.k-ok    { background: var(--ok); }
.k-up    { background: var(--warn); }
.k-gap   { background: var(--err); }
.k-quiet { background: var(--d400); }

/* ── After hours' tweaks to the diary ──
   The week: the same grid one row tall, so each day has the room to name
   who has it. The month keeps the dots. */
.b-diary .b-cal.is-week .b-cal-day { height: 7rem; gap: 0.375rem; }
.b-cal-who {
  position: relative; max-width: 100%; padding: 0 0.25rem;
  font-size: var(--t-ui); font-weight: var(--fw-semibold); color: var(--d50);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.b-cal-who.is-gap { color: var(--ink-err); }
.b-cal-who.is-none { color: var(--d200); font-weight: var(--fw-medium); }
/* Week | Month: two of the nav's own buttons, the one you are on lit the
   way the selected day is. */
.b-cal-seg { display: inline-flex; gap: 0.25rem; }
.b-cal-btn.is-on { color: var(--d50); background: rgba(var(--accent-rgb), 0.22); border-color: transparent; }
/* A name sets a column's minimum, so the seven are told they may be
   narrower than it; at phone width the name steps down to the diary's
   twelve so it still fits whole rather than ellipsising. */
.b-cal.is-week .b-cal-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); }
/* Under 560 seven names do not fit across, so the week becomes two rows,
   four and three, and each day carries its own weekday instead of the
   header row it has left. */
.b-cal-wdi { display: none; }
@media (max-width: 559.98px) {
  .b-cal.is-week .b-cal-week { display: none; }
  .b-cal.is-week .b-cal-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 0.25rem; }
  .b-cal.is-week .b-cal-wdi {
    display: block; position: relative;
    font-size: var(--t-micro); font-weight: var(--fw-semibold); color: var(--d200);
  }
  .b-diary .b-cal.is-week .b-cal-day { height: 6.25rem; gap: 0.25rem; }
}
/* A night whose handoffs went up says so in colour as well as in words. */
.b-kind.is-warn { color: var(--ink-warn); }
/* In the week a name sits under the date, so today's mark goes above it. */
.b-diary .b-cal.is-week .b-cal-day.is-today .b-cal-num::after { bottom: auto; top: -0.4375rem; }
/* Seven names need about 36rem across at 14px. Where the month's own column
   is narrower than that (the panel beside it, a narrow window, the Console's
   rail taking its share) the names step down to twelve and stay whole. */
.b-cal-mo { container-type: inline-size; }
@container (max-width: 36rem) {
  .b-cal.is-week .b-cal-who { font-size: var(--t-micro); padding: 0 0.125rem; }
}
/* After hours: an open night asks to be assigned, and the nights a rotate
   or a fill just set light for a moment, then hand back to the day. */
.b-cal-who.is-ask { color: var(--ink-action); }
.b-cal-day.is-fresh .b-cal-bg { animation: ah-fresh 1600ms var(--ease-out); } /* no end frame: the light hands back to whatever the day was */
@keyframes ah-fresh { 0%, 35% { opacity: 1; transform: none; background: rgba(var(--accent-rgb), .38); } }
@media (prefers-reduced-motion: reduce) { .b-cal-day.is-fresh .b-cal-bg { animation: none; background: rgba(var(--accent-rgb), .18); } }

/* ── After hours' day column (variant D, ported value for value from the
   variants page, and kept here because it is part of the diary, on the
   diary's type scale): one question about one night, a roster that scrolls at the height
   four people take, search in place of the question line, the rotate
   preview, and AiMY's reading as the diary's footer. ── */
.ah-q { min-height: 2.25rem; box-sizing: content-box; display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: 0 .5rem .625rem; font-size: 1rem; font-weight: var(--fw-semibold); color: var(--d50); }
.ah-sub { margin: .75rem .5rem .375rem; font-size: .875rem; color: var(--d200); }
.ah-link { border: 0; background: none; padding: .125rem 0; font: inherit; font-size: .875rem; font-weight: var(--fw-semibold); color: var(--ink-action); cursor: pointer; text-underline-offset: .2em; }
.ah-link:hover { text-decoration: underline; }
.ah-link.is-quiet { color: var(--d200); font-weight: var(--fw-medium); }
.ah-link.is-quiet:hover { color: var(--ink-err); }
.ah-link:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: .25rem; }
.ah-roster { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .125rem; }
.ah-opt { display: flex; align-items: center; gap: .75rem; width: 100%; min-height: 2.75rem; padding: 0 .625rem; border: 0; border-radius: var(--r-md); background: none; font: inherit; text-align: left; color: inherit; cursor: pointer; transition: background-color var(--t-fast); }
.ah-opt:hover { background: rgba(var(--accent-rgb), .08); }
.ah-opt:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.ah-opt.is-on { background: rgba(var(--accent-rgb), .16); }
.ah-opt.is-static { cursor: default; justify-content: space-between; }
.ah-opt.is-static:hover { background: none; }
.ah-ring { width: 1.125rem; height: 1.125rem; flex: none; border-radius: 999px; border: 1.5px solid var(--d200); display: grid; place-items: center; transition: border-color var(--t-fast); }
.ah-ring::after { content: ""; width: .5rem; height: .5rem; border-radius: 999px; background: var(--brand); transform: scale(0); transition: transform 180ms var(--ease-out); }
.ah-opt.is-on .ah-ring { border-color: var(--brand); }
.ah-opt.is-on .ah-ring::after { transform: scale(1); }
.ah-opt-n { flex: 1; min-width: 0; font-size: .9375rem; font-weight: var(--fw-semibold); color: var(--d50); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ah-opt-n.is-off { color: var(--d200); font-weight: var(--fw-medium); }
.ah-rot { align-items: flex-start; }
.ah-rot .b-cal-plus { margin-top: .0625rem; }
.ah-rot-t { display: flex; flex-direction: column; gap: .125rem; min-width: 0; text-align: left; }
.ah-rot-p { font-size: .8125rem; font-weight: var(--fw-regular); color: var(--d200); line-height: 1.5; min-height: 4.5em; } /* three lines held, whatever the names */
.ah-rot-p b { font-weight: var(--fw-semibold); color: var(--d50); }
.ah-rotdone { display: flex; align-items: center; gap: .6875rem; margin-top: .25rem; padding: .5625rem .5rem; font-size: .875rem; color: var(--d200); }
/* The roster keeps the height four people take and scrolls past that. The
   fade says there is more and which way; it is a mask, so nothing sits on top
   of a row you might be about to press. */
.ah-scroll {
  --roster-h: 14.625rem;
  max-height: var(--roster-h); overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: .125rem;
  scrollbar-width: thin; scrollbar-color: var(--card-border-hover) transparent;
  --fade: 1.5rem;
}
.ah-scroll::-webkit-scrollbar { width: .375rem; }
.ah-scroll::-webkit-scrollbar-thumb { background: var(--card-border-hover); border-radius: 999px; }
.ah-scroll.is-below { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - var(--fade)), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - var(--fade)), transparent); }
.ah-scroll.is-above { -webkit-mask-image: linear-gradient(to top, #000 calc(100% - var(--fade)), transparent); mask-image: linear-gradient(to top, #000 calc(100% - var(--fade)), transparent); }
.ah-scroll.is-above.is-below { -webkit-mask-image: linear-gradient(to bottom, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent); mask-image: linear-gradient(to bottom, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent); }
/* A row keeps its height; the box scrolls instead of squeezing them. */
.ah-scroll > * { flex-shrink: 0; }
.ah-scroll[data-ah-scroll="edit"] { max-height: calc(var(--roster-h) + 8.375rem); }
.ah-opt.is-nobody { margin-top: .25rem; }
.ah-qa { display: inline-flex; align-items: center; gap: .75rem; }
.ah-ib { width: 1.75rem; height: 1.75rem; border-radius: 999px; border: 0; background: none; color: var(--d200); display: grid; place-items: center; cursor: pointer; padding: 0; flex: none; }
.ah-ib:hover { background: rgba(var(--accent-rgb), .12); color: var(--d50); }
.ah-ib:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.ah-ib svg { width: 1rem; height: 1rem; }
.ah-q.is-find { align-items: center; gap: .5rem; }
.ah-find { flex: 1; min-width: 0; display: flex; align-items: center; gap: .5rem; height: 2.25rem; padding: 0 .75rem; border-radius: 999px; background: var(--card-bg-raised); border: 1px solid var(--card-border); color: var(--d200); }
.ah-find:focus-within { border-color: var(--brand); }
.ah-find svg { width: 1rem; height: 1rem; flex: none; }
.ah-find input { flex: 1; min-width: 0; border: 0; background: none; outline: none; font: inherit; font-size: .9375rem; font-weight: var(--fw-regular); color: var(--d50); }
.ah-find input::placeholder { color: var(--d200); }
.ah-find input::-webkit-search-cancel-button { display: none; }
.ah-none { margin: .5rem .625rem; }
.ah-roster [hidden], .ah-scroll [hidden], .ah-none[hidden] { display: none !important; }
/* AiMY's reading as the diary's own footer: across both columns, under a
   rule, the way the panel separates its other parts. */
.b-diary .ah-foot {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: flex-start; gap: .625rem .75rem;
  margin-top: .875rem; padding: .875rem .5rem .25rem; border-top: 1px solid var(--card-border);
  font-size: .9375rem; line-height: 1.6; color: var(--d50);
}
.ah-foot > svg.agv-mk { width: 1.125rem; height: 1.25rem; flex: none; margin-top: .1875rem; }
.ah-foot-t { flex: 1 1 14rem; min-width: 0; min-height: 4.8em; } /* three lines held: the longest two-sentence reading fits, so no click moves the diary */ /* two lines held, so a shorter reading does not shrink the diary */
.ah-foot-t b { font-weight: var(--fw-bold); }
.ah-foot-a { display: flex; gap: .5rem; flex-wrap: wrap; flex: none; align-self: center; }
.ah-opt-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .0625rem; padding: .4375rem 0; }
.ah-opt-t .ah-opt-n { flex: none; }
.ah-opt-c { font-size: .8125rem; color: var(--d200); font-variant-numeric: tabular-nums; }
/* A night's queue: a person's row is the name, a button that puts them on
   the end of the queue or takes them off, and, from second place down, an
   arrow that calls them one place earlier. The number is the order. */
div.ah-opt { cursor: default; }
.ah-opt-b { flex: 1; min-width: 0; align-self: stretch; display: flex; align-items: center; gap: .75rem; border: 0; background: none; padding: 0; font: inherit; text-align: left; color: inherit; cursor: pointer; }
.ah-opt-b:focus-visible { outline: none; }
.ah-opt:has(> .ah-opt-b:focus-visible) { outline: 2px solid var(--brand); outline-offset: -2px; }
.ah-pos { width: 1.125rem; height: 1.125rem; flex: none; border-radius: 999px; background: var(--brand); color: #fff; display: grid; place-items: center; font-size: .6875rem; font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; line-height: 1; }
.ah-up { margin-right: -.25rem; }
/* The week: the first name, and how many more are queued behind them. */
.b-cal-who.is-q { display: inline-flex; gap: .1875rem; }
.b-cal-wn { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.b-cal-more { flex: none; color: var(--ink-action); }
.ah-tl-n { font-weight: var(--fw-semibold); color: var(--d50); }
.ah-rot { text-align: left; }
/* Side by side, the column sets the diary's height: a past night or an empty
   team would shrink it, so every state of the column holds the height the
   question takes with four people in it. */
@media (min-width: 1024px) { .b-diary .b-cal-side { min-height: 28.75rem; } }

/* ── When the night runs: the clock in the page's top right ──
   No card around it: a ring, the night's arc, two knobs, and the times
   beside them in words. */
.ah-head { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.ah-head-l { flex: 1 1 auto; min-width: 0; }
.ah-clock { flex: none; display: flex; align-items: center; gap: 1rem; }
.ah-dial { width: 6.5rem; height: 6.5rem; flex: none; overflow: visible; touch-action: none; }
.ah-track { fill: none; stroke: var(--card-border); stroke-width: 9; }
.ah-arc { fill: none; stroke: var(--brand); stroke-width: 9; stroke-linecap: round; }
.ah-ticks line { stroke: var(--d200); stroke-width: 2; stroke-linecap: round; }
.ah-knob { cursor: grab; color: var(--brand); outline: none; }
.ah-knob-hit { fill: transparent; }
.ah-knob-face { fill: #fff; stroke: var(--brand); stroke-width: 1.5; transition: r 140ms var(--ease-out); }
.ah-knob:hover .ah-knob-face, .ah-knob:focus-visible .ah-knob-face { r: 13.5; }
.ah-knob:focus-visible .ah-knob-face { stroke-width: 3; }
.ah-dial.is-drag, .ah-dial.is-drag .ah-knob { cursor: grabbing; }
.ah-clock-d { display: flex; flex-direction: column; align-items: flex-start; gap: 0.25rem; }
.ah-clock-t { display: flex; align-items: baseline; gap: 0.25rem; font-size: 1.125rem; font-weight: var(--fw-bold); color: var(--d50); }
.ah-clock-dash { color: var(--d200); font-weight: var(--fw-medium); }
.ah-tok {
  border: 0; background: none; padding: 0 0.25rem; margin: 0 -0.25rem; border-radius: 0.375rem;
  font: inherit; color: inherit; cursor: pointer; font-variant-numeric: tabular-nums;
  transition: background-color var(--t-fast);
}
.ah-tok:hover, .ah-tok[aria-expanded="true"] { background: rgba(var(--accent-rgb), 0.12); }
.ah-tok:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.set2-pop.is-times { width: 8.5rem; }
.ah-tz { display: inline-flex; align-items: center; gap: 0.25rem; border: 0; background: none; padding: 0.125rem 0; font: inherit; font-size: 0.875rem; color: var(--d200); cursor: pointer; border-radius: var(--r-md); }
.ah-tz:hover { color: var(--d50); }
.ah-tz:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.ah-tz svg { width: 0.875rem; height: 0.875rem; }
.ah-clock .ah-sw { font-size: 0.875rem; padding: 0.125rem 0; color: var(--d200); }
.ah-clock .ah-sw.is-on { color: var(--d50); }
@media (max-width: 899.98px) {
  .ah-head { flex-direction: column; align-items: flex-start; gap: 1rem; }
}
@media (prefers-reduced-motion: reduce) { .ah-knob-face, .ah-tok { transition: none; } }
.ah-sw { font-size: 0.8125rem; padding: 0.125rem 0; }
@media (max-width: 899.98px) {
  .ah-head { flex-direction: column; gap: 1rem; }
  .ah-clock { align-self: stretch; }
}
@media (prefers-reduced-motion: reduce) { .ah-knob circle { transition: none; } }
.ah-sw { display: inline-flex; align-items: center; gap: 0.5rem; border: 0; background: none; padding: 0.125rem 0.25rem; font: inherit; color: var(--ink-primary); cursor: pointer; border-radius: var(--r-md); }
.ah-sw:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.ah-sw-t { width: 1.875rem; height: 1.125rem; border-radius: var(--r-pill); background: var(--card-border-hover); position: relative; flex: none; transition: background-color var(--t-fast); }
.ah-sw-k { position: absolute; top: 0.125rem; left: 0.125rem; width: 0.875rem; height: 0.875rem; border-radius: var(--r-pill); background: #fff; transition: transform 180ms var(--ease-out); }
.ah-sw.is-on .ah-sw-t { background: var(--brand); }
.ah-sw.is-on .ah-sw-k { transform: translateX(0.75rem); }
@media (prefers-reduced-motion: reduce) { .ah-sw-t, .ah-sw-k { transition: none; } }

/* ── If nobody answers: the escalation timeline ──
   Variant B of explore-escalation.html, ported value for value: a rail down
   the page, the minute each step is reached in the column on its left, and
   the wait written on the rail between two steps. */
.ah-ladder { margin-top: 2rem; }
.ah-ladder-l { margin: 0.25rem 0 1rem; color: var(--ink-secondary); font-size: 0.9375rem; }
.ah-ladder-l b { color: var(--d50); font-weight: var(--fw-semibold); }
.ah-nm { display: inline-flex; align-items: center; gap: .25rem; border: 0; background: none; padding: 0 .25rem; margin: 0 -.25rem; border-radius: .375rem; font: inherit; font-weight: var(--fw-semibold); color: var(--d50); cursor: pointer; white-space: nowrap; }
.ah-nm:hover, .ah-wchip:hover { background: rgba(var(--accent-rgb), .12); }
.ah-nm svg, .ah-wchip svg { width: .875rem; height: .875rem; color: var(--d200); flex: none; }
.ah-wchip { display: inline-flex; align-items: center; gap: .125rem; height: 1.625rem; padding: 0 .5rem; border-radius: var(--r-pill); border: 1px solid var(--card-border); background: var(--body-bg); font: inherit; font-size: .8125rem; font-weight: var(--fw-semibold); color: var(--d50); cursor: pointer; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ah-role { color: var(--d200); font-size: .8125rem; }
.ah-tl-add { display: inline-flex; align-items: center; gap: .6875rem; border: 1px dashed var(--card-border-hover); background: none; border-radius: var(--r-lg); padding: 0 1rem; height: 3rem; font: inherit; font-size: .875rem; font-weight: var(--fw-medium); color: var(--d200); cursor: pointer; }
.ah-tl-add:hover { color: var(--d50); border-color: var(--d200); }
.ah-tl-rot { width: 1.75rem; height: 1.75rem; flex: none; border-radius: var(--r-pill); display: grid; place-items: center; color: var(--ink-action); background: rgba(var(--accent-rgb), .14); }
.ah-tl-rot svg { width: .875rem; height: .875rem; }
.ah-tl { position: relative; display: grid; grid-template-columns: 5.5rem 1.5rem minmax(0, 1fr); max-width: 40rem; }
.ah-tl-t { text-align: right; padding-right: .75rem; font-size: .8125rem; font-weight: var(--fw-semibold); color: var(--d200); font-variant-numeric: tabular-nums; }
.ah-tl-rail { position: relative; display: flex; justify-content: center; }
.ah-tl-rail::before { content: ""; position: absolute; top: 0; bottom: 0; width: 2px; background: var(--card-border-hover); }
.ah-tl-rail.is-first::before { top: 1.25rem; }
.ah-tl-rail.is-last::before { bottom: calc(100% - 1.25rem); }
.ah-tl-dot { position: relative; margin-top: .9375rem; width: .75rem; height: .75rem; border-radius: 999px; background: var(--body-bg); border: 2px solid var(--brand); }
.ah-tl-dot.is-rota { background: var(--brand); }
.ah-tl-row { padding: .5rem 0 0 .75rem; }
.ah-tl-card { display: flex; align-items: center; gap: .75rem; height: 3rem; padding: 0 .875rem; border-radius: var(--r-lg); background: var(--card-bg); border: 1px solid var(--card-border); }
.ah-tl-gap { display: flex; align-items: center; padding: .625rem 0 .125rem .75rem; color: var(--d200); font-size: .8125rem; gap: .5rem; }
.ah-nm:focus-visible, .ah-wchip:focus-visible, .ah-tl-add:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.ah-tl-addrow { margin: 1rem 0 0 7.75rem; } /* the cards' left edge: time column, rail, row inset */
.ah-pop-rm .set2-pop-n { color: var(--ink-err); }
@media (max-width: 899.98px) {
  .ah-tl { grid-template-columns: 4rem 1.5rem minmax(0, 1fr); }
  .ah-tl-addrow { margin-left: 6.25rem; }
}

/* ── 24/7 › Schedule: when each person is available ──
   A queued person's row grows a third line: the hours they are available
   that night, two times you press for a list of half hours. */
div.ah-opt { flex-wrap: wrap; }
.ah-avl { flex-basis: 100%; display: flex; align-items: center; gap: .375rem; padding: 0 0 .5rem 1.875rem; font-size: .8125rem; color: var(--d200); }
.ah-avl .ah-wchip { height: 1.5rem; }
/* Read-only things that share a look with controls. */
.ah-wchip.is-static { cursor: default; font-weight: var(--fw-medium); color: var(--d200); }
.ah-wchip.is-static:hover { background: var(--body-bg); }
.ah-knob.is-static { cursor: default; }
.ah-tok.is-static { cursor: default; }
.ah-tok.is-static:hover { background: none; }
.ah-clock-s { font-size: .875rem; color: var(--d200); }
.ah-clock .ah-link { font-size: .8125rem; }
.ah-tl-note { margin: 1rem 0 0 7.75rem; max-width: 40rem; font-size: .875rem; color: var(--ink-secondary); line-height: 1.6; }
.ah-tl-note .ah-link { font-size: inherit; }
@media (max-width: 899.98px) { .ah-tl-note { margin-left: 6.25rem; } }
@media (max-width: 559.98px) { .ah-tl-note { margin-left: 0; } }
.ah-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; padding: 1.5rem; border: 1px dashed var(--card-border-hover); border-radius: var(--r-lg); max-width: 46rem; }
.ah-empty p { margin: 0; font-size: .9375rem; line-height: 1.6; color: var(--ink-secondary); }
.ah-empty b { color: var(--d50); font-weight: var(--fw-semibold); }

/* ── 24/7 › Configuration ──
   Variant C3 (Nour, 5 Nov), ported value for value from explore-config.html:
   the file name as the switcher over up to four files, a Right now line,
   four tiles with the Schedule clock in the first, urgent and not urgent as
   chips, the versions as a line, then templates. */
.ahc { display: flex; flex-direction: column; padding-top: 1.5rem; }
.ahc-ok { display: inline-flex; align-items: center; gap: .375rem; color: var(--ink-ok); font-weight: var(--fw-semibold); font-size: .875rem; }
.ahc-ok svg { width: 1rem; height: 1rem; }
.ahc-warn { color: var(--ink-warn); font-weight: var(--fw-semibold); font-size: .875rem; }
.ahc-bad { color: var(--ink-err); font-weight: var(--fw-semibold); font-size: .875rem; }
.ahc-s { display: block; font-size: .8125rem; line-height: 1.45; color: var(--ink-secondary); }
.ahc-acts { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; }
.ahc-btn { display: inline-flex; align-items: center; gap: .375rem; }
.ahc-btn svg { width: 1rem; height: 1rem; }
.ahc-none { margin: 0; font-size: .9375rem; line-height: 1.6; color: var(--ink-secondary); }
.ahc-none b { color: var(--d50); font-weight: var(--fw-semibold); }
/* Right now: AiMY's insight block (settings.css .set2-dc-ai) saying which
   file it reads, each name a way to that file. */
.ahc-now { margin: 0 0 1.25rem; font-size: .875rem; line-height: 1.55; }
.ahc-now b { font-weight: var(--fw-semibold); }
.ahc-jump { border: 0; background: none; padding: 0; font: inherit; font-family: var(--font-mono); font-size: .8125rem; font-weight: var(--fw-semibold); color: var(--ink-action); cursor: pointer; text-decoration: underline; text-underline-offset: .2em; text-decoration-color: rgba(var(--accent-rgb), .45); }
.ahc-jump:hover { text-decoration-color: currentColor; }
.ahc-jump:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: .25rem; }
/* The header: the file name is the switcher, the actions on the right. */
.ahc-top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; }
.ahc-pickwrap { position: relative; min-width: 0; }
.ahc-pick { display: flex; align-items: center; gap: .75rem; padding: .375rem .625rem .375rem .375rem; margin: -.375rem 0 -.375rem -.375rem; border: 1px solid transparent; border-radius: var(--r-lg); background: none; font: inherit; text-align: left; color: inherit; cursor: pointer; min-width: 0; }
.ahc-pick:hover, .ahc-pickwrap.is-open .ahc-pick { border-color: var(--card-border-hover); background: rgba(var(--accent-rgb), .06); }
.ahc-pick:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.ahc-file-i { width: 2.5rem; height: 2.5rem; flex: none; border-radius: var(--r-md); display: grid; place-items: center; background: rgba(var(--accent-rgb), .14); color: var(--ink-action); }
.ahc-file-i svg { width: 1.25rem; height: 1.25rem; }
.ahc-pick-t { display: flex; flex-direction: column; min-width: 0; }
.ahc-file-n { display: flex; align-items: center; gap: .5rem; font-family: var(--font-mono); font-size: 1rem; font-weight: var(--fw-semibold); color: var(--d50); overflow-wrap: anywhere; }
.ahc-fmt { flex: none; white-space: nowrap; display: inline-flex; align-items: center; height: 1.375rem; padding: 0 .5rem; border-radius: var(--r-pill); border: 1px solid var(--card-border); font-family: var(--font-sans); font-size: .6875rem; font-weight: var(--fw-semibold); letter-spacing: .04em; color: var(--d50); }
.ahc-chev { display: inline-grid; color: var(--ink-secondary); transition: transform var(--t-fast); }
.ahc-chev svg { width: 1rem; height: 1rem; }
.ahc-pickwrap.is-open .ahc-chev { transform: rotate(180deg); }
.ahc-file-m { margin-top: .125rem; font-size: .8125rem; color: var(--ink-secondary); }
/* The file menu: the files in the order AiMY checks them. */
.ahc-menu { position: absolute; z-index: 30; top: calc(100% + .5rem); left: -.375rem; width: 26rem; max-width: calc(100vw - 2rem); padding: .375rem; border-radius: var(--r-lg); border: 1px solid var(--card-border-hover); background: var(--card-bg-raised, var(--card-bg)); box-shadow: 0 12px 32px rgba(0, 0, 0, .32); }
.ahc-menu[hidden] { display: none; }
.ahc-menu-h { margin: 0; padding: .5rem .625rem .625rem; font-size: .8125rem; line-height: 1.45; color: var(--ink-secondary); }
.ahc-opt { border-radius: var(--r-md); }
.ahc-opt:hover { background: rgba(var(--accent-rgb), .08); }
.ahc-opt.is-on { background: rgba(var(--accent-rgb), .14); }
.ahc-opt-b { position: relative; width: 100%; display: flex; align-items: flex-start; gap: .625rem; padding: .625rem .625rem .375rem 2.625rem; border: 0; background: none; font: inherit; text-align: left; color: inherit; cursor: pointer; border-radius: var(--r-md); }
.ahc-opt-b:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.ahc-num { position: absolute; left: .625rem; top: .625rem; width: 1.375rem; height: 1.375rem; border-radius: 999px; display: grid; place-items: center; background: rgba(var(--accent-rgb), .16); font-size: .75rem; font-weight: var(--fw-bold); color: var(--d50); }
.ahc-opt.is-on .ahc-num { background: var(--brand); color: #fff; }
.ahc-opt-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .125rem; }
.ahc-opt-t b { font-size: .9375rem; color: var(--d50); }
.ahc-f { font-family: var(--font-mono); font-size: .75rem; color: var(--ink-secondary); overflow-wrap: anywhere; }
.ahc-tick { color: var(--ink-action); padding-top: .125rem; }
.ahc-tick svg { width: 1rem; height: 1rem; }
.ahc-up { display: block; margin: 0 0 0 2.625rem; padding: 0 0 .5rem; font-size: .8125rem; }
.ahc-menu-f { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: .25rem; padding: .625rem .625rem .375rem; border-top: 1px solid var(--card-border); font-size: .8125rem; }
.ahc-menu-f .ahc-s { display: inline; }
/* The tiles: the hours on the Schedule clock, who is called last, how long
   AiMY stands back, how long it watches. */
.ahc-tiles { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: .75rem; margin-top: 1.5rem; }
.ahc-tile { display: flex; flex-direction: column; gap: .375rem; padding: 1rem; border-radius: var(--r-lg); border: 1px solid var(--card-border); background: var(--card-bg); }
.ahc-k { display: flex; align-items: center; gap: .375rem; font-size: .8125rem; color: var(--ink-secondary); }
.ahc-k svg { width: .875rem; height: .875rem; }
.ahc-v { display: block; font-size: 1.25rem; font-weight: var(--fw-bold); color: var(--d50); font-variant-numeric: tabular-nums; line-height: 1.25; }
.ahc-cover { display: flex; align-items: center; gap: 1rem; }
.ahc-cover .ah-dial.ahc-clock { width: 5.5rem; height: 5.5rem; }
.ahc-clock circle.ah-arc { fill: none; }
.ahc-mgr { display: flex; align-items: center; gap: .625rem; margin-top: .125rem; }
.ahc-mgr b { display: block; font-size: .9375rem; color: var(--d50); }
.ahc-av { width: 2rem; height: 2rem; flex: none; border-radius: 999px; display: grid; place-items: center; background: rgba(var(--accent-rgb), .18); color: var(--d50); font-size: .75rem; font-weight: var(--fw-bold); }
.ahc-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin-top: .75rem; }
.ahc-card { padding: 1.25rem; border-radius: var(--r-lg); border: 1px solid var(--card-border); background: var(--card-bg); }
.ahc-h3 { margin: 0 0 .75rem; font-size: .9375rem; font-weight: var(--fw-semibold); color: var(--d50); }
.ahc-chips { display: flex; flex-wrap: wrap; gap: .375rem; }
.ahc-chip { display: inline-flex; align-items: center; height: 1.75rem; padding: 0 .625rem; border-radius: var(--r-pill); background: rgba(var(--accent-rgb), .12); color: var(--d50); font-size: .8125rem; font-weight: var(--fw-medium); white-space: nowrap; }
.ahc-chip.is-no { background: rgba(var(--accent-rgb), .05); border: 1px solid var(--card-border); }
.ahc-h4 { margin: 1rem 0 .5rem; font-size: .8125rem; font-weight: var(--fw-semibold); color: var(--ink-secondary); }
/* Versions as a line, the live one filled. */
.ahc-vercard { margin-top: .75rem; }
/* A version keeps the width its note needs; past what the card holds, the
   line scrolls sideways, opens on the live version, and fades at whichever
   end has more. A few versions still share the width out evenly. */
.ahc-line { --fade: 2.5rem; position: relative; list-style: none; margin: .25rem 0 0; padding: 0 0 .5rem; display: flex; align-items: flex-start;
  overflow-x: auto; overscroll-behavior: contain; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: var(--card-border-hover) transparent; }
.ahc-line::-webkit-scrollbar { height: .375rem; }
.ahc-line::-webkit-scrollbar-thumb { background: var(--card-border-hover); border-radius: 999px; }
.ahc-line:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; border-radius: var(--r-sm); }
.ahc-line.is-after { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - var(--fade)), transparent); mask-image: linear-gradient(to right, #000 calc(100% - var(--fade)), transparent); }
.ahc-line.is-before { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - var(--fade)), transparent); mask-image: linear-gradient(to left, #000 calc(100% - var(--fade)), transparent); }
.ahc-line.is-before.is-after { -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent); mask-image: linear-gradient(to right, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent); }
.ahc-step { flex: 1 0 13rem; position: relative; padding-top: 1.5rem; min-width: 0; scroll-snap-align: start; }
.ahc-count { display: inline-grid; place-items: center; min-width: 1.375rem; height: 1.375rem; margin-left: .375rem; padding: 0 .375rem; border-radius: var(--r-pill); background: rgba(var(--accent-rgb), .16); font-size: .75rem; font-weight: var(--fw-bold); color: var(--d50); vertical-align: middle; }
.ahc-step::before { content: ""; position: absolute; top: .4375rem; left: 0; right: 0; height: 2px; background: var(--card-border-hover); }
.ahc-step:first-child::before { left: .5rem; }
.ahc-step:last-child::before { right: calc(100% - .5rem); }
.ahc-step:only-child::before { display: none; }
.ahc-dot { position: absolute; top: 0; left: 0; width: 1rem; height: 1rem; border-radius: 999px; background: var(--body-bg); border: 2px solid var(--card-border-hover); }
.ahc-step.is-live .ahc-dot { background: var(--brand); border-color: var(--brand); }
.ahc-step b { display: block; font-size: .875rem; color: var(--d50); }
.ahc-step-t { display: block; margin-top: .125rem; padding-right: 1rem; font-size: .8125rem; line-height: 1.45; color: var(--ink-secondary); }
.ahc-step .ah-link, .ahc-step .ahc-ok { margin-top: .375rem; font-size: .8125rem; }
/* Templates: when to use each, then the formats. */
.ahc-h2 { margin: 2.5rem 0 .5rem; font-size: 1.125rem; font-weight: var(--fw-semibold); color: var(--d50); }
.ahc-lede { margin: 0 0 1rem; max-width: 40rem; font-size: .875rem; line-height: 1.55; color: var(--ink-secondary); }
.ahc-tpls { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; }
.ahc-tpl { display: flex; flex-direction: column; gap: .5rem; padding: 1rem; border-radius: var(--r-lg); border: 1px solid var(--card-border); }
.ahc-tpl b { font-size: .875rem; color: var(--d50); }
.ahc-tpl p { margin: 0; flex: 1; font-size: .8125rem; line-height: 1.5; color: var(--ink-secondary); }
.ahc-tag { align-self: flex-start; padding: .0625rem .5rem; border-radius: var(--r-pill); background: rgba(var(--accent-rgb), .16); font-size: .75rem; font-weight: var(--fw-semibold); color: var(--ink-action); }
.ahc-dl { flex: none; align-self: flex-start; display: inline-flex; border: 1px solid var(--card-border); border-radius: var(--r-pill); overflow: hidden; }
.ahc-dl button { border: 0; background: none; padding: 0 .625rem; height: 1.75rem; font: inherit; font-size: .75rem; font-weight: var(--fw-semibold); color: var(--d50); cursor: pointer; }
.ahc-dl button + button { border-left: 1px solid var(--card-border); }
.ahc-dl button:hover { background: rgba(var(--accent-rgb), .12); }
.ahc-dl button:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
/* The file as it is, for a refused upload's lines. */
.ahc-code { margin: 0; padding: .875rem 0; border-radius: var(--r-lg); background: var(--card-bg); border: 1px solid var(--card-border); overflow-x: auto; font-family: var(--font-mono); font-size: .8125rem; line-height: 1.7; color: var(--ink-primary); }
.ahc-code code { font: inherit; }
.ahc-ln { display: block; padding: 0 1rem 0 0; white-space: pre; }
.ahc-n { display: inline-block; width: 3rem; padding-right: 1rem; text-align: right; color: var(--d200); user-select: none; }
.ahc-ln.is-bad { background: var(--err-bg); box-shadow: inset 3px 0 0 var(--ink-err); }
.ahc-ln.is-bad .ahc-n { color: var(--ink-err); font-weight: var(--fw-bold); }
.ahc-err { display: flex; flex-direction: column; gap: .75rem; margin-bottom: 1.5rem; padding: 1rem 1.25rem; border-radius: var(--r-lg); background: var(--err-bg); border: 1px solid var(--err-border, var(--ink-err)); }
.ahc-err p { margin: 0; font-size: .9375rem; line-height: 1.6; color: var(--ink-primary); }
.ahc-err b { color: var(--ink-err); font-weight: var(--fw-semibold); }
.ahc-err .ahc-code { background: var(--body-bg); }
/* A client's products, each a row into its files. */
.ahc-prods { list-style: none; margin: .5rem 0 0; padding: 0; max-width: 56rem; }
.ahc-prods li + li .ahc-prod { border-top: 1px solid var(--card-border); }
.ahc-prod { width: 100%; display: grid; grid-template-columns: minmax(8rem, 13rem) minmax(0, 1fr) auto 1rem; align-items: center; gap: 1rem; padding: .875rem .25rem; border: 0; background: none; font: inherit; text-align: left; color: inherit; cursor: pointer; border-radius: var(--r-sm); }
.ahc-prod:hover { background: rgba(var(--accent-rgb), .06); }
.ahc-prod:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.ahc-prod svg { width: 1rem; height: 1rem; color: var(--d200); }
.ahc-prod-n { font-size: .9375rem; font-weight: var(--fw-semibold); color: var(--d50); }
.ahc-prod-f { font-size: .875rem; color: var(--ink-secondary); overflow-wrap: anywhere; }
@media (max-width: 899.98px) {
  .ahc-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ahc-tiles > :first-child { grid-column: 1 / -1; }
  .ahc-cols { grid-template-columns: minmax(0, 1fr); }
  .ahc-tpls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 559.98px) {
  .ahc-tiles, .ahc-tpls { grid-template-columns: minmax(0, 1fr); }
  /* Down the page on a phone: the line holds the height of about four
     versions and scrolls, the same way, with fades top and bottom. */
  .ahc-line { flex-direction: column; gap: 1rem; overflow-x: hidden; overflow-y: auto; max-height: 20rem; padding: 0 0 .25rem; scroll-snap-type: y proximity; }
  .ahc-line.is-after { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - var(--fade)), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - var(--fade)), transparent); }
  .ahc-line.is-before { -webkit-mask-image: linear-gradient(to top, #000 calc(100% - var(--fade)), transparent); mask-image: linear-gradient(to top, #000 calc(100% - var(--fade)), transparent); }
  .ahc-line.is-before.is-after { -webkit-mask-image: linear-gradient(to bottom, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent); mask-image: linear-gradient(to bottom, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent); }
  .ahc-step { flex: none; padding: 0 0 0 1.75rem; }
  .ahc-step::before { top: 0; bottom: -1rem; left: .4375rem; right: auto; width: 2px; height: auto; }
  .ahc-step:last-child::before { display: none; }
  .ahc-prod { grid-template-columns: minmax(0, 1fr) 1rem; gap: .25rem .75rem; }
  .ahc-prod-n, .ahc-prod-f, .ahc-prod > span:nth-child(3) { grid-column: 1; }
  .ahc-prod svg { grid-column: 2; grid-row: 1 / span 3; }
}
@media (prefers-reduced-motion: reduce) { .ahc-chev { transition: none; } }