/* ============================================================================
   workbook.css — the three statements as a spreadsheet you write yourself.

   Deliberately Excel's look, not this site's. Somebody who has built a model
   before should recognise where they are in the first second: grey gridlines,
   a lettered column strip, numbered rows, a name box and a formula bar, and
   the selected cell in a green box. Every one of those is a habit worth
   borrowing rather than a style worth inventing.

   The two things the layout must make obvious without a word: which columns
   are reported (and so not yours to change), and which cell you are in.
   ========================================================================= */

:root{
  --xl-line:#d0d7de;        /* gridline */
  --xl-head:#f5f5f5;        /* column/row header fill */
  --xl-headline:#b7bcc2;
  --xl-sel:#137e43;         /* Excel's selection green */
  --xl-selfill:#e8f3ec;
  --xl-lock:#fafafa;        /* reported columns */
  --xl-open:#fff;           /* forecast columns */
  --xl-txt:#1f2328;
  --xl-mut:#616a75;
  --xl-fx:#0b6a3a;          /* a cell holding a formula */
  --xl-err:#b3261e;
}

.wb-top{display:flex;gap:24px;align-items:flex-start;flex-wrap:wrap;margin-bottom:12px}
.wb-title{flex:1;min-width:280px}
.wb-title h2{font-size:20px;font-weight:700;letter-spacing:-.01em;margin:0 0 5px;color:var(--xl-txt)}
.wb-sub{font-weight:500;color:var(--xl-mut);font-size:14px}
.wb-lede{font-size:13px;line-height:1.6;color:var(--xl-mut);margin:0;max-width:64ch}

.wb-acts{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.wb-acts button,.wb-sched button{background:#fff;border:1px solid var(--xl-headline);border-radius:4px;
  padding:6px 11px;font-family:inherit;font-size:12.5px;font-weight:600;color:var(--xl-txt);cursor:pointer}
.wb-acts button:hover,.wb-sched button:hover{background:var(--xl-head);border-color:var(--xl-sel)}
.wb-yrs{font-size:12px;color:var(--xl-mut);display:flex;align-items:center;gap:6px}
.wb-yrs select,.wb-sched select{background:#fff;border:1px solid var(--xl-headline);border-radius:4px;
  padding:6px 8px;font-family:inherit;font-size:12.5px;color:var(--xl-txt)}

/* ---- name box + formula bar, the way Excel stacks them ------------------ */
.wb-barwrap{position:sticky;top:0;z-index:6;background:#fff;padding:0;border:1px solid var(--xl-line);
  border-radius:4px;margin-bottom:14px}
.wb-bar{display:flex;align-items:stretch;background:#fff;border-radius:4px;overflow:hidden}
.wb-where{display:flex;align-items:center;gap:6px;min-width:220px;max-width:330px;padding:7px 10px;
  border-right:1px solid var(--xl-line);background:var(--xl-head);font-size:11.5px;color:var(--xl-mut);
  overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.wb-where b{color:var(--xl-txt);font-family:"JetBrains Mono",ui-monospace,monospace;font-size:12px}
.wb-lockmsg{color:#8a6d1f;font-weight:600}
.wb-bar::before{content:"fx";display:flex;align-items:center;padding:0 10px;font-style:italic;
  font-family:Georgia,serif;font-size:13px;color:var(--xl-mut);border-right:1px solid var(--xl-line)}
#wb-input{flex:1;min-width:120px;border:0;outline:0;font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:13px;color:var(--xl-txt);background:transparent;padding:8px 10px}
#wb-input:disabled{color:#9aa2ab;background:var(--xl-lock)}
#wb-input::placeholder{color:#a8b0b8;font-family:inherit}
.wb-errmsg{display:flex;align-items:center;padding:0 10px;font-size:11.5px;color:var(--xl-err);max-width:32ch}

/* ---- a sheet ------------------------------------------------------------ */
.wb-sheet{margin:0 0 20px}
.wb-sheet h3{font-size:12px;font-weight:700;letter-spacing:.02em;color:var(--xl-txt);
  margin:0 0 6px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.wb-code{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:11px;font-weight:700;
  color:#fff;background:var(--xl-sel);border-radius:3px;padding:2px 6px;letter-spacing:0}
.wb-note{font-weight:500;color:var(--xl-mut);font-size:11.5px}
.wb-sched{margin-left:auto;display:flex;gap:6px;align-items:center}

.wb-scroll{overflow-x:auto;border:1px solid var(--xl-headline);background:#fff}
table.wb{border-collapse:collapse;width:100%;font-size:12px;font-family:"Aptos",Calibri,"DM Sans",system-ui,sans-serif}
table.wb th,table.wb td{border:1px solid var(--xl-line);padding:4px 8px;white-space:nowrap;height:22px}

/* the lettered strip */
table.wb thead th{position:sticky;top:0;background:var(--xl-head);z-index:2;text-align:center;
  font-size:11px;font-weight:600;color:var(--xl-mut);border-bottom:1px solid var(--xl-headline)}
.wb-col{display:block;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:11px;
  font-weight:700;color:#3f4750}
.wb-tag{display:block;font-size:8.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-top:1px}
thead th.wb-r .wb-tag{color:#9aa2ab}
thead th.wb-f{background:#eef6f1}
thead th.wb-f .wb-tag{color:var(--xl-sel)}

/* numbered rows and the frozen label column */
.wb-rn{width:32px;text-align:center;color:var(--xl-mut);font-size:11px;
  background:var(--xl-head);position:sticky;left:0;z-index:1;font-weight:600}
.wb-lbl{text-align:left;max-width:340px;overflow:hidden;text-overflow:ellipsis;color:var(--xl-txt);
  background:#fff;position:sticky;left:32px;z-index:1;border-right:1px solid var(--xl-headline)}
.wb-lbl.own{background:#fffdf0;cursor:text}
.wb-lbl.own:focus{outline:2px solid var(--xl-sel);outline-offset:-2px;background:#fff}
thead .wb-lbl,thead .wb-rn{z-index:3}
.wb-head-row .wb-lbl{background:var(--xl-head);font-weight:700;color:var(--xl-txt)}
.wb-empty-row{padding:18px 12px;color:var(--xl-mut);font-size:12.5px;background:#fff;text-align:left}
.wb-empty-row code{background:var(--xl-head);border:1px solid var(--xl-line);border-radius:3px;padding:1px 5px;
  font-family:"JetBrains Mono",ui-monospace,monospace;font-size:11.5px}

/* cells */
td.wb-c{text-align:right;font-variant-numeric:tabular-nums;cursor:cell}
td.wb-c.lock{color:#3f4750;background:var(--xl-lock)}
td.wb-c.edit{background:var(--xl-open);color:var(--xl-txt)}
td.wb-c.fx{color:var(--xl-fx)}
td.wb-c.err{color:var(--xl-err);font-weight:700}
td.wb-c.edit:hover{background:#f7fbf8}
/* the selected cell: Excel's green box, with the fill handle in the corner */
td.wb-c.sel{outline:2px solid var(--xl-sel);outline-offset:-2px;background:var(--xl-selfill);position:relative}
td.wb-c.sel::after{content:"";position:absolute;right:-3px;bottom:-3px;width:6px;height:6px;
  background:var(--xl-sel);border:1px solid #fff}

@media(max-width:760px){
  .wb-lbl{max-width:150px}
  .wb-barwrap{position:static}
  .wb-where{min-width:0;max-width:44%}
  .wb-sched{margin-left:0;width:100%}
}

/* ---- the running order ---------------------------------------------------
   Sits above the sheets rather than beside them: on a spreadsheet the width
   belongs to the columns, and a guide in a side rail would either squeeze the
   years or be ignored. Collapsed once the reader knows the order. */
.wg{border:1px solid var(--xl-headline);border-radius:4px;background:#fff;margin-bottom:16px}
.wg-head{display:flex;align-items:center;gap:10px;padding:9px 12px;background:var(--xl-head);
  border-bottom:1px solid var(--xl-line)}
.wg-head h3{margin:0;font-size:12.5px;font-weight:700;color:var(--xl-txt)}
.wg-count{font-size:11.5px;color:var(--xl-mut)}
.wg-toggle{margin-left:auto;background:#fff;border:1px solid var(--xl-headline);border-radius:3px;
  padding:3px 9px;font-family:inherit;font-size:11.5px;font-weight:600;color:var(--xl-txt);cursor:pointer}
.wg-toggle:hover{border-color:var(--xl-sel)}

.wg-list{list-style:none;margin:0;padding:4px 0;counter-reset:none}
.wg-step{padding:12px 14px 13px 14px;border-bottom:1px solid var(--xl-line)}
.wg-step:last-child{border-bottom:0}
.wg-step.done{background:#f7fbf8}
.wg-step.waiting{opacity:.72}

.wg-t{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:700;color:var(--xl-txt)}
.wg-n{display:inline-flex;align-items:center;justify-content:center;width:19px;height:19px;
  border-radius:50%;background:var(--xl-head);border:1px solid var(--xl-headline);
  font-size:11px;font-weight:700;color:var(--xl-mut);flex:none}
.wg-step.done .wg-n{background:var(--xl-sel);border-color:var(--xl-sel);color:#fff}

.wg-why{margin:6px 0 0 28px;font-size:12.5px;line-height:1.6;color:var(--xl-mut);max-width:78ch}
.wg-how{margin:7px 0 0 28px;padding-left:16px;font-size:12.5px;line-height:1.65;color:var(--xl-txt)}
.wg-how li{margin-bottom:2px}
.wg-caution{margin:8px 0 0 28px;padding:7px 10px;background:#fff8e6;border:1px solid #e6d8a8;
  border-radius:3px;font-size:12px;line-height:1.55;color:#7a5c10;max-width:78ch}
.wg-wait{margin:8px 0 0 28px;font-size:12px;color:var(--xl-mut);font-style:italic}

.wg-do{display:flex;align-items:center;gap:9px;margin:9px 0 0 28px;flex-wrap:wrap}
.wg-do code{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:11.5px;font-weight:700;
  color:#fff;background:var(--xl-sel);border-radius:3px;padding:2px 7px}
.wg-lbl{font-size:12px;color:var(--xl-mut);max-width:34ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wg-go{background:#fff;border:1px solid var(--xl-sel);border-radius:3px;padding:4px 11px;
  font-family:inherit;font-size:12px;font-weight:600;color:var(--xl-sel);cursor:pointer}
.wg-go:hover{background:var(--xl-selfill)}

@media(max-width:760px){
  .wg-why,.wg-how,.wg-do,.wg-caution,.wg-wait{margin-left:0}
  .wg-how{padding-left:18px}
}