/* Replenishment — layout unique to this page: the automatic-replenishment strip and its state diagram, the delivery
   row's parts, the offer clock, the reel beside its rack thumbnail, and the request drawer's route box. */
@layer page {
  /* Automatic replenishment: one line of state, the control on the right, the diagram on demand */
  .rp-pol { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s3) var(--s6); }
  .rp-pol__t { font-weight: 650; font-size: var(--t-body); }
  .rp-pol__t span { font-weight: 400; color: var(--text-3); }
  .rp-pol__why { display: flex; gap: var(--s3); align-items: baseline; flex-wrap: wrap; margin-top: var(--s2); font-size: var(--t-data); color: var(--text-2); }
  .rp-pol__why p { flex: 1; min-width: min(320px, 100%); max-width: 78ch; }
  .rp-pol__ctl { display: grid; gap: var(--s2); justify-items: end; align-self: start; text-align: right; max-width: 34ch; }
  .rp-pol__how { grid-column: 1 / -1; }

  /* The state diagram: a loop of four states and two states outside it */
  .rp-fsm { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s5); align-items: stretch; padding-top: var(--s2); }
  .rp-fsm__loop { position: relative; padding-bottom: 26px; }
  .rp-fsm__loop::after { content: ''; position: absolute; left: 12.5%; right: 12.5%; bottom: 8px; height: 12px; border: 1.5px solid var(--line-2); border-top: 0; border-radius: 0 0 8px 8px; }
  .rp-fsm__row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s2); height: 100%; }
  .rp-fsm__back { position: absolute; bottom: -2px; left: 50%; transform: translateX(-50%); background: var(--sheet); padding: 0 var(--s2); font-size: var(--t-micro); color: var(--text-3); white-space: nowrap; z-index: 1; }
  .rp-fsm__side { display: grid; grid-template-columns: repeat(2, minmax(0, 150px)); gap: var(--s2); padding-left: var(--s5); border-left: 1px solid var(--line); padding-bottom: 26px; }
  .rp-fsn { position: relative; display: grid; gap: 2px; align-content: start; padding: var(--s3); border-radius: var(--r3); border: 1px solid var(--line); background: var(--sheet-2); min-width: 0; }
  .rp-fsm__row .rp-fsn:not(:last-child)::after { content: ''; position: absolute; right: -9px; top: 50%; width: 8px; height: 8px; border-top: 1.5px solid var(--ink-400); border-right: 1.5px solid var(--ink-400); transform: translateY(-50%) rotate(45deg); }
  .rp-fsn__d { font-size: var(--t-cap); color: var(--text-3); line-height: 1.35; }
  .rp-fsn[aria-current="step"] { background: var(--sel-bg); border-color: var(--sel-line); }
  .rp-fsn[data-tone][aria-current="step"] { background: var(--tone-surface); border-color: color-mix(in oklab, var(--tone-line) 50%, transparent); }

  /* A delivery: the part and who asked, its seam, what to do; notes under the row */
  .rp-order__part { display: grid; gap: var(--s2); justify-items: start; margin-top: 2px; }
  .rp-order__route { display: flex; align-items: center; gap: var(--s2); color: var(--text-2); flex-wrap: wrap; }
  .rp-act { display: grid; gap: var(--s2); justify-items: end; text-align: right; }
  .rp-actby { width: 100%; max-width: 240px; text-align: left; }
  .rp-note__row { display: flex; gap: var(--s4); align-items: center; flex-wrap: wrap; }
  .rp-note__t { flex: 1; min-width: min(240px, 100%); }
  .rp-reel { max-width: 100%; display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--s3); padding: var(--s2) var(--s3); border: 1px solid var(--line-2); border-radius: var(--r3); background: var(--sheet); color: var(--text); }

  /* The offer's own clock: when it ends, how long is left, the window draining */
  .rp-expiry { display: grid; gap: 6px; justify-items: end; width: 100%; max-width: 190px; }
  .rp-expiry > :last-child { width: 100%; }

  /* Request drawer: the route box and the foot hint follow the chosen part */
  .rp-route { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: var(--s3); align-items: center; }
  .rp-route__arrow { display: flex; color: var(--text-3); }
  #rq-route { display: none; }
  #rq-form:has(#rq-parts input:checked) #rq-route { display: grid; }
  #rq-form:has(#rq-parts input:checked) .rp-hint-none, #rq-form:not(:has(#rq-parts input:checked)) .rp-hint-some { display: none; }

  @media (max-width: 1180px) {
    .rp-fsm { grid-template-columns: minmax(0, 1fr); }
    .rp-fsm__side { padding-left: 0; border-left: 0; padding-top: var(--s4); border-top: 1px solid var(--line); padding-bottom: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width: 760px) {
    .rp-pol { grid-template-columns: minmax(0, 1fr); }
    .rp-pol__ctl { justify-items: start; text-align: left; max-width: none; }
    .rp-fsm__loop { padding-bottom: 0; }
    .rp-fsm__row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
    .rp-fsm__loop::after, .rp-fsm__back, .rp-fsm__row .rp-fsn::after { display: none; }
    .rp-act { justify-items: start; text-align: left; }
    .rp-expiry { justify-items: start; }
    .rp-route { grid-template-columns: minmax(0, 1fr); }
    .rp-route__arrow { transform: rotate(90deg); justify-self: start; }
  }
}