/* The OREC form library and its annual release workflow. An administrative
   surface kept out of the everyday transaction screens, and out of
   components.css, because reviewing a year's forms is a different job from
   running a transaction. */

/* ---------- entry point ---------- */
.fl-entry{display:flex;align-items:center;justify-content:space-between;gap:18px;
  background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:16px 18px;margin:18px 0}
.fl-entry__copy{display:grid;gap:3px;min-width:0}
.fl-entry__copy strong{font-family:var(--serif);font-size:19px;font-weight:500;line-height:1.25}
.fl-entry__copy p{margin:0;max-width:52ch}
.fl-entry .btn{flex:none}

/* ---------- release dashboard ---------- */
.fl-dash{background:var(--white);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:18px;margin-bottom:22px}
.fl-dash__head{display:flex;align-items:flex-start;justify-content:space-between;
  gap:14px;flex-wrap:wrap;margin-bottom:14px}
.fl-dash__name{font-family:var(--serif);font-weight:400;font-size:24px;
  letter-spacing:-.01em;margin:3px 0 2px}
.fl-dash__head .hint{margin:0;word-break:break-word}

.fl-stats{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(212px,1fr))}
.fl-stat{display:flex;align-items:center;gap:11px;width:100%;text-align:left;
  min-height:var(--tap);padding:11px 12px;border:1px solid var(--border);
  border-radius:var(--radius);background:var(--cream);transition:.15s}
.fl-stat:hover{border-color:var(--amber);background:var(--white)}
.fl-stat:focus-visible{outline:2px solid var(--charcoal);outline-offset:2px}
.fl-stat__n{font-family:var(--serif);font-size:24px;line-height:1;min-width:34px;
  font-variant-numeric:tabular-nums}
.fl-stat__t{flex:1;font-size:12.5px;color:var(--mid);line-height:1.35}
.fl-stat__go{flex:none;display:grid;place-items:center}
.fl-stat__go svg{width:15px;height:15px;stroke:var(--stone);fill:none;stroke-width:1.8}
/* status is never carried by colour alone: the warn rows keep a left rule and
   their own words, so a monochrome screen reads the same */
.fl-stat.warn{border-left:3px solid var(--warn);background:rgba(176,67,44,.07)}

.fl-dash__verdict{margin:14px 0 0;font-size:13.5px;color:var(--mid)}
.fl-dash__verdict.is-blocked{font-weight:500;color:var(--warn)}

.fl-attention{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:6px}
.fl-attention__row{display:grid;gap:2px;width:100%;text-align:left;min-height:var(--tap);
  padding:10px 12px;border:1px solid var(--border);border-left:3px solid var(--amber);
  border-radius:var(--radius);background:var(--white)}
.fl-attention__row:hover{border-color:var(--amber);background:var(--cream)}
.fl-attention__row:focus-visible{outline:2px solid var(--charcoal);outline-offset:2px}
.fl-attention__name{font-size:13.5px;font-weight:500}
.fl-attention__why{font-size:12px;color:var(--stone);line-height:1.45}
.fl-attention__where{font-size:11px;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;color:var(--amber-deep)}

/* ---------- the step rail ---------- */
.fl-steps{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0 0 18px;padding:0}
.fl-step{display:flex;align-items:center;gap:8px;padding:8px 11px;min-height:var(--tap);
  border:1px solid var(--border);border-radius:99px;background:var(--white);
  font-size:12px;color:var(--stone)}
.fl-step__n{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;
  background:var(--cream);font-size:11px;font-weight:700;color:var(--stone)}
.fl-step__label{font-weight:500}
.fl-step__summary{font-size:11.5px;color:var(--stone)}
.fl-step__edit{font-size:11px;font-weight:600;color:var(--amber-deep);
  text-decoration:underline;min-height:32px;padding:0 4px}
.fl-step__edit:focus-visible{outline:2px solid var(--charcoal);outline-offset:2px}
/* the active step is the only one that reads as the work: done steps keep a
   check and their one-line result, to-do steps stay quiet */
.fl-step[data-state="active"]{background:var(--charcoal);color:var(--cream);border-color:var(--charcoal)}
.fl-step[data-state="active"] .fl-step__n{background:var(--amber);color:var(--charcoal)}
.fl-step[data-state="done"]{color:var(--mid)}
.fl-step[data-state="done"] .fl-step__n{background:rgba(76,122,82,.16);color:var(--good)}
.fl-step[data-state="todo"]{opacity:.72}

.fl-stepbody{background:var(--white);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:18px}
.fl-stepbody__title{font-family:var(--serif);font-weight:400;font-size:23px;
  letter-spacing:-.01em;margin:0 0 12px}

/* ---------- split: form list beside the open form ---------- */
.fl-split{display:grid;grid-template-columns:minmax(200px,264px) 1fr;gap:18px;align-items:start}
.fl-picker__head{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--stone);margin:0 0 6px}
.fl-picker{list-style:none;margin:0;padding:0;display:grid;gap:4px;
  max-height:64vh;overflow-y:auto}
.fl-picker__row.is-waiting{border-left:3px solid var(--amber)}
.fl-picker__row.is-waiting .fl-status-text{color:var(--amber-deep);font-weight:500}
.fl-picker__row{display:grid;gap:1px;width:100%;text-align:left;min-height:var(--tap);
  padding:9px 11px;border:1px solid transparent;border-radius:var(--radius)}
.fl-picker__row:hover{background:var(--cream)}
.fl-picker__row:focus-visible{outline:2px solid var(--charcoal);outline-offset:2px}
.fl-picker__row.is-open{background:var(--cream);border-color:var(--border)}
.fl-picker__name{font-size:13px;font-weight:500}
.fl-split__body{min-width:0}

/* ---------- comparison ---------- */
.fl-compare__head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.fl-compare__head h3{font-family:var(--serif);font-weight:400;font-size:21px;margin:0}
.fl-fast{background:rgba(76,122,82,.1);border:1px solid rgba(76,122,82,.3);
  border-radius:var(--radius);padding:10px 12px;font-size:12.5px;color:var(--mid);margin:0 0 14px}
.fl-compare__grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fl-cmp{border:1px solid var(--border);border-radius:var(--radius);padding:12px 13px;
  background:var(--cream)}
.fl-cmp h4{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--stone);
  margin:0 0 8px;font-weight:700}
.fl-cmp__list{list-style:none;margin:0;padding:0;display:grid;gap:5px}
.fl-cmp__row{display:flex;justify-content:space-between;gap:10px;font-size:12.5px}
.fl-cmp__k{color:var(--stone)}
.fl-cmp__v{text-align:right;font-weight:500;word-break:break-word}

.fl-verdicts{list-style:none;margin:14px 0;padding:0;display:grid;gap:6px}
.fl-verdict{display:flex;align-items:center;gap:9px;font-size:13px;
  border:1px solid var(--border);border-radius:var(--radius);padding:9px 11px;background:var(--white)}
.fl-verdict__mark svg{width:15px;height:15px;stroke:var(--mid);fill:none;stroke-width:1.8;display:block}
.fl-status-text{font-size:12.5px;color:var(--mid)}

.fl-changes{margin-top:12px}
.fl-changes h4{font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--stone);margin:0 0 6px;font-weight:700}
.fl-changes ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.fl-changes__row{display:flex;align-items:center;justify-content:space-between;gap:10px;
  width:100%;text-align:left;min-height:var(--tap);padding:8px 11px;
  border:1px solid var(--border);border-radius:var(--radius);background:var(--white)}
.fl-changes__row:hover{border-color:var(--amber)}
.fl-changes__row:focus-visible{outline:2px solid var(--charcoal);outline-offset:2px}
.fl-changes__name{font-size:12.5px;font-weight:500;font-family:ui-monospace,Menlo,monospace}
.fl-changes__where{font-size:11.5px;color:var(--stone)}

.fl-sidebyside{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:16px 0}
.fl-sidebyside h4{font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--stone);margin:0 0 4px;font-weight:700}

/* ---------- page viewer ---------- */
.fl-viewer{border:1px solid var(--border);border-radius:var(--radius);
  background:var(--cream);margin:14px 0}
.fl-viewer__bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:8px 10px;border-bottom:1px solid var(--border)}
.fl-viewer__pos{font-size:12px;color:var(--mid);font-variant-numeric:tabular-nums}
.fl-viewer__zoom{display:flex;align-items:center;gap:6px;margin-left:auto;font-size:12px}
.fl-viewer__page{min-height:280px;display:grid;place-items:center;padding:12px;text-align:center}
.fl-viewer__page .hint{max-width:44ch;margin:0}
.fl-viewer__page:focus-visible{outline:2px solid var(--charcoal);outline-offset:-2px}

/* ---------- data map ---------- */
.fl-map__head{display:flex;align-items:flex-start;justify-content:space-between;
  gap:12px;flex-wrap:wrap;margin-bottom:10px}
.fl-map__head h3{font-family:var(--serif);font-weight:400;font-size:21px;margin:0 0 4px;
  display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.fl-saved{font-size:11.5px;color:var(--stone)}

.fl-draftnote{background:rgba(239,159,39,.12);border:1px solid rgba(239,159,39,.42);
  border-left:3px solid var(--amber);border-radius:var(--radius);padding:12px 14px;margin-bottom:14px}
.fl-draftnote p{margin:0 0 10px;font-size:13px;color:var(--mid);line-height:1.5}

.fl-remaining{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-size:13px;color:var(--mid);margin:12px 0}
.fl-remaining.is-blocked{color:var(--warn);font-weight:500}

/* how step 5 works, said once above the list rather than on every row */
.fl-how{background:var(--cream);border:1px solid var(--border);border-radius:var(--radius);
  padding:11px 13px;margin:12px 0;font-size:13px;color:var(--mid);line-height:1.5;max-width:78ch}

.fl-fields{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.fl-field{display:grid;grid-template-columns:minmax(160px,1.1fr) minmax(120px,1fr) minmax(220px,1.4fr) auto;
  gap:12px;align-items:center;padding:10px 12px;border:1px solid var(--border);
  border-radius:var(--radius);background:var(--white)}
.fl-field.is-undecided{border-left:3px solid var(--amber);background:rgba(239,159,39,.06)}
.fl-field__name{display:block;font-size:12.5px;font-weight:500;
  font-family:ui-monospace,Menlo,monospace;word-break:break-all}
.fl-field__meta,.fl-field__k{display:block;font-size:11px;color:var(--stone)}
.fl-field__v{font-size:12.5px}
.fl-field__now{display:grid;gap:6px}
.fl-field__pick,.fl-field__reason,.fl-field__value{width:100%;font:inherit;font-size:13px;
  min-height:var(--tap);padding:8px 10px;border:1px solid var(--border);
  border-radius:6px;background:var(--white);color:var(--charcoal)}
.fl-field__pick:focus-visible,.fl-field__reason:focus-visible,
.fl-field__value:focus-visible{outline:2px solid var(--charcoal);outline-offset:1px}
/* the value picker is the decision on this screen, so it reads as the second
   half of the answer rather than as another dropdown beside the first */
.fl-field__value{border-left:3px solid var(--amber)}
.fl-field__value optgroup{font-style:normal;font-weight:600}
.fl-field__warn{font-size:11.5px;color:var(--warn);font-weight:500;line-height:1.4}
.fl-field__see{font-size:11.5px;font-weight:600;color:var(--amber-deep);
  text-decoration:underline;min-height:var(--tap);padding:0 6px;white-space:nowrap}
.fl-field__see:focus-visible{outline:2px solid var(--charcoal);outline-offset:2px}

/* ---------- signing seats ---------- */
.fl-seats{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.fl-seat{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:11px 12px;
  border:1px solid var(--border);border-radius:var(--radius);background:var(--white)}
.fl-seat.is-gap{border-left:3px solid var(--warn);background:rgba(176,67,44,.06)}
.fl-seat__who{font-size:13px;font-weight:500;min-width:120px}
.fl-seat__ok{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--good);margin-left:auto}

/* ---------- validation, checklist, publish ---------- */
.fl-cases,.fl-list{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:6px}
.fl-case,.fl-list__row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:11px 12px;border:1px solid var(--border);border-radius:var(--radius);background:var(--white)}
.fl-case__name,.fl-list__name{font-size:13.5px;font-weight:500;min-width:150px}
.fl-case__status.is-not-run{font-weight:600;color:var(--amber-deep)}
.fl-case__status.is-fail{font-weight:600;color:var(--warn)}
.fl-case__acts{display:flex;gap:6px;flex-wrap:wrap;margin-left:auto}
.fl-list__row.is-undecided{border-left:3px solid var(--amber)}
.fl-list__kind{font-size:11px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--stone)}
.fl-list__fix{font-size:12px;color:var(--amber-deep);text-decoration:underline;
  text-align:left;min-height:var(--tap);padding:0 4px;margin-left:auto}
.fl-list__fix:focus-visible{outline:2px solid var(--charcoal);outline-offset:2px}

.fl-blockers{list-style:none;margin:10px 0;padding:0;display:grid;gap:5px}
.fl-blockers__row{display:block;width:100%;text-align:left;font-size:12.5px;
  color:var(--mid);min-height:var(--tap);padding:9px 11px;background:var(--white);
  border:1px solid var(--border);border-left:3px solid var(--warn);border-radius:var(--radius)}
.fl-blockers__row:hover{border-color:var(--amber);border-left-color:var(--warn)}
.fl-blockers__row:focus-visible{outline:2px solid var(--charcoal);outline-offset:2px}

.fl-plain{background:var(--cream);border:1px solid var(--border);
  border-radius:var(--radius);padding:14px 16px;margin:12px 0}
.fl-plain p{margin:0 0 10px;font-size:13.5px;color:var(--mid);line-height:1.55;max-width:70ch}
.fl-plain p:last-child{margin-bottom:0}

.fl-audit{list-style:none;margin:12px 0;padding:0;display:grid;gap:5px}
.fl-audit li{display:flex;justify-content:space-between;gap:12px;font-size:12.5px;
  padding:8px 0;border-bottom:1px solid var(--border)}
.fl-audit__k{color:var(--stone)}
.fl-audit__v{font-weight:500;text-align:right}

/* ---------- start and upload ---------- */
.fl-start__grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
.fl-start .field span,.fl-start label span{display:block;font-size:12.5px;font-weight:500;
  color:var(--mid);margin-bottom:5px}
.fl-start input{width:100%;font:inherit;font-size:16px;min-height:var(--field);
  padding:11px 12px;border:1px solid var(--border);border-radius:6px;background:var(--white)}
.fl-start input:focus-visible{outline:2px solid var(--charcoal);outline-offset:1px}
.fl-upload .btn{margin:10px 0}

/* ---------- the discard ask (never a browser dialog) ---------- */
.fl-discard{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  background:rgba(239,159,39,.14);border:1px solid rgba(239,159,39,.5);
  border-left:3px solid var(--amber);border-radius:var(--radius);
  padding:12px 14px;margin:0 0 16px}
.fl-discard p{margin:0;flex:1 1 320px;font-size:13px;color:var(--mid);line-height:1.5}
.fl-discard__acts{display:flex;gap:8px;flex-wrap:wrap}

/* ---------- refusals ---------- */
.fl-locked,.fl-gate{background:var(--white);border:1px solid var(--border);
  border-left:3px solid var(--amber);border-radius:var(--radius-lg);
  padding:18px;margin:18px 0;max-width:70ch}
.fl-locked p,.fl-gate p{margin:0 0 10px;font-size:13.5px;color:var(--mid);line-height:1.55}
.fl-gate h2{font-family:var(--serif);font-weight:400;font-size:21px;margin:0 0 8px}

/* ---------- narrower screens ---------- */
/* 1024 is exactly where mapping is allowed at all, so the two columns must
   survive it: collapsing here would bury the open form under a 20-row list */
@media(max-width:1180px){
  .fl-split{grid-template-columns:minmax(168px,208px) 1fr;gap:14px}
  .fl-field{grid-template-columns:1fr 1fr}
  .fl-field__see{justify-self:start}
}
@media(max-width:1023px){
  .fl-split{grid-template-columns:1fr}
  .fl-picker{max-height:none}
}
@media(max-width:820px){
  .fl-compare__grid,.fl-sidebyside,.fl-start__grid{grid-template-columns:1fr}
  .fl-field{grid-template-columns:1fr}
  .fl-entry{flex-direction:column;align-items:flex-start}
  .fl-stats{grid-template-columns:1fr}
  .fl-case__acts,.fl-list__fix{margin-left:0}
}
@media(prefers-reduced-motion:reduce){
  .fl-stat,.fl-attention__row,.fl-changes__row{transition:none}
}