/* What happened and Against target on the reform's Your orders (2 November 2026, lane F2, ruling 405). Adapted from the
   design's kit/fold.css (docs/design_handoff/reform_redraw_2026-10-26/kit/fold.css) onto the shell's tokens: every
   colour is a var(--r-*), no hex is typed here. It sits on shell.css, week.css and round6_orders.css, whose form and
   table classes (rw-field, rw-input, rw-button, rw-table, rw-status) the fold keeps. Class prefix fo-. Text is 17px or
   more. The log is in full view; Against target is a fold, closed with its one-line answer. Motion is one 220ms fade
   on open and none under prefers-reduced-motion. */

.fo-own,.fo-block{display:flex;flex-direction:column;gap:18px;min-width:0;max-width:100%}
.fo-own{background:var(--r-surface);border-top:3px solid var(--r-ink);padding:20px 24px 24px}
.fo-head{display:flex;flex-direction:column;gap:6px}
.fo-h{margin:0;font-size:24px;line-height:1.25;font-weight:700}
.fo-h3{margin:0;font-size:20px;line-height:1.3;font-weight:700}
.fo-answer{margin:0;font-size:18px}
.fo-sub{display:flex;flex-direction:column;gap:12px;padding-top:18px;border-top:1px solid var(--r-rule);min-width:0}
.fo-stack{display:flex;flex-direction:column;gap:12px;min-width:0}
.fo-big{font-size:20px}
.fo-scroll{overflow-x:auto;overscroll-behavior-x:contain;min-width:0}
.fo-n{text-align:right;font-variant-numeric:tabular-nums}
.fo-num{text-align:right}

/* How often you log: a two-button segment, the pressed one in ink. */
.fo-seg{display:inline-flex;box-shadow:inset 0 0 0 2px var(--r-ink)}
.fo-seg button{min-height:44px;padding:0 16px;font:inherit;font-weight:700;font-size:17px;border:0;background:var(--r-surface);color:var(--r-ink);cursor:pointer}
.fo-seg button[aria-pressed="true"]{background:var(--r-ink);color:var(--r-surface)}
.fo-seg button:focus-visible{outline:3px solid var(--r-signal);outline-offset:-3px}

/* The period card: one row a product, the business last, a rule above the cash. */
.fo-period{display:flex;flex-direction:column;gap:14px;background:var(--r-page);box-shadow:inset 0 0 0 2px var(--r-ink);padding:20px 22px;min-width:0}
.fo-period-head{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:flex-end;justify-content:space-between}
.fo-prow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;align-items:end;border:0;margin:0;padding:0;min-width:0}
.fo-legend{grid-column:1/-1;padding:0;font-size:18px;font-weight:700}
.fo-prow .rw-field label{font-size:17px}
.fo-prow .rw-input{width:100%}
.fo-cashrow{grid-template-columns:repeat(2,minmax(0,1fr));border-top:3px solid var(--r-ink);padding-top:14px}

/* Logged so far: cash at each period's end as bars, beside the table of the same figures. */
.fo-rank{display:flex;flex-direction:column;gap:10px}
.fo-rank>div{display:grid;grid-template-columns:minmax(0,200px) minmax(0,1fr) minmax(0,120px);gap:14px;align-items:center;font-size:17px}
.fo-rank-bar{display:block;height:20px;background:var(--r-ink)}
.fo-rank-bar.is-neg{background:var(--r-breach)}

/* The sales-file preview: three groups. */
.fo-drop{display:flex;flex-direction:column;gap:6px;background:var(--r-page);box-shadow:inset 0 0 0 2px var(--r-ink);padding:16px 18px}
.fo-groups{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.fo-group{background:var(--r-surface);box-shadow:inset 0 0 0 1px var(--r-rule);padding:16px;display:flex;flex-direction:column;gap:8px;font-size:17px;min-width:0;overflow-wrap:anywhere}
.fo-group h4{margin:0;font-size:18px}
.fo-group ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px}
.fo-paste{width:100%;max-width:100%;min-height:120px;padding:10px 12px;font-family:inherit;box-sizing:border-box}

/* Forms in a row. */
.fo-form-row{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:flex-end}
.fo-fields{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:flex-end}
.fo-cadence{margin:0}

/* Against target: the one fold, closed with its answer on its face. */
.fo-sec{background:var(--r-surface);border-top:3px solid var(--r-ink);min-width:0}
.fo-sec>summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 20px;padding:20px 24px;align-items:center}
.fo-sec>summary::-webkit-details-marker{display:none}
.fo-sec>summary .fo-h{margin:0}
.fo-sec>summary .fo-sum{grid-column:1;font-size:18px;color:var(--r-muted);overflow-wrap:anywhere}
.fo-sec>summary .fo-tog{grid-row:1/3;grid-column:2}
.fo-sec[open]>summary .fo-sum{display:none}
.fo-sec>summary:focus-visible{outline:3px solid var(--r-signal);outline-offset:-3px}
.fo-tog{min-height:44px;display:inline-flex;align-items:center;padding:0 14px;box-shadow:inset 0 0 0 2px var(--r-ink);font-weight:700;font-size:17px}
.fo-tog-close,details[open]>summary .fo-tog-open{display:none}
details[open]>summary .fo-tog-close{display:inline}
.fo-body{padding:0 24px 24px;display:flex;flex-direction:column;gap:20px;min-width:0}
.fo-sec[open]>.fo-body,.fo-inner[open]>.fo-inner-body{animation:foOpen .22s cubic-bezier(.2,.8,.2,1) both}
@keyframes foOpen{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.fo-sec[open]>.fo-body,.fo-inner[open]>.fo-inner-body{animation:none}}
.fo-empty{background:var(--r-page);box-shadow:inset 0 0 0 1px var(--r-rule);padding:18px 20px;font-size:18px}
.fo-state{background:var(--r-surface);padding:18px 24px 24px;border-top:1px solid var(--r-rule)}

/* A smaller fold inside a section: words and what-ifs only. */
.fo-inner{background:var(--r-page);box-shadow:inset 0 0 0 1px var(--r-rule);min-width:0}
.fo-inner>summary{list-style:none;cursor:pointer;display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;justify-content:space-between;padding:14px 18px;font-size:18px}
.fo-inner>summary::-webkit-details-marker{display:none}
.fo-inner>summary:focus-visible{outline:3px solid var(--r-signal);outline-offset:-3px}
.fo-inner-body{padding:0 18px 20px;display:flex;flex-direction:column;gap:14px;min-width:0}
.fo-ownerform{padding-top:14px;border-top:1px solid var(--r-rule)}
.fo-note{display:flex;flex-direction:column;gap:4px;background:var(--r-surface);box-shadow:inset 0 0 0 1px var(--r-rule);padding:14px 18px}

/* The difference, a bar centred on zero: grey-red to the left (under), ink to the right (over). */
.fo-diff{position:relative;height:22px;min-width:120px;background:linear-gradient(var(--r-muted),var(--r-muted)) center/2px 100% no-repeat}
.fo-diff i{position:absolute;top:3px;bottom:3px}
.fo-diff i.up{left:50%;background:var(--r-ink)}
.fo-diff i.down{right:50%;background:var(--r-breach)}

@media (max-width:900px){
  .fo-own{padding:18px 16px 22px}
  .fo-groups{grid-template-columns:1fr}
  .fo-prow{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fo-sec>summary{padding:18px 16px}
  .fo-body{padding:0 16px 20px}
  .fo-state{padding:16px 16px 22px}
  .fo-period{padding:16px}
  .fo-rank>div{grid-template-columns:minmax(0,1fr) 100px}
  .fo-rank>div i{grid-column:1/-1;grid-row:2}
  .fo-form-row .rw-field,.fo-form-row .rw-input,.fo-fields .rw-field,.fo-fields .rw-input{width:100%}
  .fo-form-row .rw-button{width:100%}
  .fo-diff{min-width:0}
}
@media (max-width:640px){
  .fo-prow,.fo-cashrow{grid-template-columns:1fr}
}