/* "Not known yet" (round 7, lane R7a, 3 November 2026): Your orders' "Plan beside what happened" in its three states
   (paired, not known yet, landed) and Your week's Close card, which says what was ordered in the month being closed.
   Adapted from the design's kit/round7.css (docs/design_handoff/reform_redraw_2026-10-26/kit/round7.css) onto the
   shell's tokens: every colour is a var(--r-*), no hex is typed here. It sits on shell.css and week.css, whose table
   and button classes it keeps. Class prefix r7-. Text is 17px or more, and 12px only for the label inside a drawing.
   Nothing here moves, so there is no animation to still under prefers-reduced-motion. */

/* The drawing: for each month, the plan's bar and the order's bar. A month with nothing on file draws no bar. */
.r7-pairs{display:flex;flex-direction:column;gap:14px;min-width:0}
.r7-pair{display:grid;grid-template-columns:110px minmax(0,1fr);gap:12px;align-items:center}
.r7-m{font-size:17px;font-weight:700}
.r7-bars{display:flex;flex-direction:column;gap:4px;min-width:0}
.r7-bar{display:block;width:100%;height:16px}
.r7-bar.plan rect{fill:var(--r-rule)}
.r7-bar.ord rect{fill:var(--r-ink)}
.r7-unknown{font:700 12px/16px var(--r-font);letter-spacing:.08em;text-transform:uppercase;color:var(--r-anchor)}
.r7-key{display:flex;flex-wrap:wrap;gap:6px 20px;margin:0;font-size:17px;color:var(--r-muted)}
.r7-key span{display:inline-flex;align-items:center;gap:8px}
.r7-key i{display:inline-block;width:18px;height:12px}
.r7-key i.plan{background:var(--r-rule)}
.r7-key i.ord{background:var(--r-ink)}

/* The table beside it: the difference is a figure, signed, and a month with nothing on file leaves it blank. */
.r7-table .r7-diff{font-variant-numeric:tabular-nums}
.r7-num{font-weight:700}
.r7-diff-down .r7-num{color:var(--r-breach)}
.r7-diff-up .r7-num{color:var(--r-ink)}
.r7-nk{color:var(--r-ink)}
.r7-landed{font-size:17px}

/* The sentence under the table, and the card that asks about the month with nothing on file. */
.r7-takeaway{margin:0;font-size:18px}
.r7-landed-note{margin:0}
.r7-stale{background:var(--r-tint);box-shadow:inset 4px 0 0 var(--r-signal);padding:16px 20px;display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;justify-content:space-between;min-width:0}
.r7-stale-text{margin:0;flex:1 1 320px;font-size:18px;min-width:0}

/* The Close card on Your week: what was ordered in the month being closed, one row a product. */
.r7-close{display:flex;flex-direction:column;gap:10px;min-width:0}
.r7-close-h{margin:0;font-size:20px;line-height:1.3;font-weight:700}
.r7-close-table{width:100%;max-width:760px;border-collapse:collapse}
.r7-close-table th,.r7-close-table td{padding:10px 12px;text-align:left;vertical-align:top;border-bottom:1px solid var(--r-rule);overflow-wrap:anywhere}
.r7-close-table tbody th{font-weight:700}
.r7-close-table td{font-variant-numeric:tabular-nums}
.r7-close-note{margin:0;color:var(--r-muted)}

@media (max-width:900px){
  .r7-pair{grid-template-columns:90px minmax(0,1fr)}
}
@media (max-width:600px){
  .r7-close-table,.r7-close-table tbody,.r7-close-table tr,.r7-close-table th,.r7-close-table td{display:block;width:100%}
  .r7-close-table tr{padding:10px 0;border-bottom:1px solid var(--r-rule)}
  .r7-close-table th,.r7-close-table td{border:0;padding:2px 0}
  .r7-close-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}