/* oos.css: the Out of stock screen (D-054). Rows and hairlines, no card, one line. Light only, tokens from app.css, nothing else.
   CLASSES
     .oos-top .oos-head .oos-status .oos-next .oos-counted .oos-chips
     .oos-list .oos-row .oos-main .oos-title .oos-say .oos-why .oos-lost .oos-lost-text .oos-rate .oos-code .oos-caveat .oos-cut
     .oos-place .oos-place-word .oos-place-table .oos-place-stack .oos-place-card .oos-place-dl
     .trend-wrap .trend .trend-wide .trend-narrow .trend-base .trend-line .trend-dot .oos-trend-cap .oos-days .oos-how
*/

/* ---------------------------------------------------------------------------------------------- the one status line */
.oos-top { display: flex; flex-direction: column; gap: var(--s3); }
.oos-head { display: flex; flex-direction: column; gap: var(--s1); }
.oos-status { display: flex; align-items: center; gap: var(--s3); font: 500 var(--fs-body)/1.45 var(--font); }
.oos-next { font-size: var(--fs-small); line-height: 1.5; max-width: 80ch; padding-left: calc(8px + var(--s3)); }
.oos-counted { margin-top: calc(var(--s1) * -1); }
.oos-chips { margin-top: var(--s1); }

/* ---------------------------------------------------------------------------------------------- one item */
.oos-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.oos-row { display: grid; grid-template-columns: 8px minmax(0, 1fr) 200px 120px; align-items: start; column-gap: var(--s4); padding: var(--s4) 0; border-bottom: 1px solid var(--line); }
/* The dot sits on the middle of the title's first line: its line box, not a number picked by eye. */
.oos-row > .dot { align-self: start; margin-top: calc((1.45em - 8px) / 2); }
.oos-main { min-width: 0; display: flex; flex-direction: column; gap: var(--s1); }
.oos-title { font: 500 var(--fs-body)/1.45 var(--font); overflow-wrap: anywhere; }
.oos-say { font-size: var(--fs-small); line-height: 1.5; }
.oos-why { font-size: var(--fs-small); line-height: 1.5; max-width: 72ch; }
.oos-lost { display: flex; flex-direction: column; gap: var(--s1); min-width: 0; }
.oos-lost-text { font: 500 var(--fs-small)/1.5 var(--font); }
.oos-rate { font-size: var(--fs-label); line-height: 1.4; color: var(--muted); font-variant-numeric: tabular-nums; }
.oos-code { text-align: right; white-space: nowrap; padding-top: var(--s1); }
.oos-caveat { margin-bottom: var(--s3); max-width: 80ch; }
/* The line that says the list was cut. Not a footnote: it carries the two numbers the page is counted by. */
.oos-cut { font-size: var(--fs-small); line-height: 1.5; max-width: 80ch; margin-bottom: var(--s2); }

/* ---------------------------------------------------------------------------------------------- where they are out */
.oos-place { display: flex; align-items: center; gap: var(--s2); font: 500 var(--fs-small)/1.45 var(--font); color: var(--ink); }
.oos-place-word { margin: var(--s1) 0 0; }
.oos-place-table th[scope="row"] { font-weight: 400; min-width: 160px; }
.oos-place-stack { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.oos-place-card { padding: var(--s4) 0; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: var(--s2); }
.oos-place-card .oos-place .tag { margin-left: auto; }
.oos-place-dl { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: var(--s2) var(--s3); margin: 0; font-size: var(--fs-small); }
.oos-place-dl dt { color: var(--muted); }
.oos-place-dl dd { margin: 0; min-width: 0; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------------------------------------- the last days, one line */
.trend-wrap { padding: var(--s2) 0; }
.trend { display: block; width: 100%; height: auto; }
.trend-base { stroke: var(--line); stroke-width: 1; }
.trend-line { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.trend-dot { fill: var(--ink); }
/* What the line says, in words, under the picture: 13 px grey, one line, never only an aria-label. */
.oos-trend-cap { font-size: var(--fs-label); line-height: 1.5; color: var(--muted); max-width: 80ch; }
.oos-days { list-style: none; margin: var(--s2) 0 0; padding: 0; border-top: 1px solid var(--line); max-width: 360px; }
.oos-days li { display: flex; justify-content: space-between; gap: var(--s4); padding: var(--s2) 0; border-bottom: 1px solid var(--line); font-size: var(--fs-small); }

/* ---------------------------------------------------------------------------------------------- how this is counted */
.oos-how { margin: 0; padding-left: var(--s4); display: flex; flex-direction: column; gap: var(--s2); font-size: var(--fs-small); line-height: 1.55; max-width: 80ch; }

/* ---------------------------------------------------------------------------------------------- phone */
@media (max-width: 720px) {
  .oos-row { grid-template-columns: 8px minmax(0, 1fr); grid-template-areas: "dot main" ". lost"; row-gap: var(--s2); column-gap: var(--s3); }
  .oos-row > .dot { grid-area: dot; }
  .oos-main { grid-area: main; }
  .oos-lost { grid-area: lost; }
  .oos-next { padding-left: calc(8px + var(--s3)); }
  .oos-place-dl { grid-template-columns: 112px minmax(0, 1fr); }
}