/* ===========================================================================
   Notes to Accounts — the worksheet chrome
   ---------------------------------------------------------------------------
   The sheets themselves are xl.css, unchanged, because they must read as the
   same spreadsheet the analysis screen draws. What is here is only what this
   screen adds: the note badge in the margin, the break where reading stops and
   the note begins, and the two-number header that puts "off the face" and
   "from the note" side by side — which is the entire argument of the page, and
   has to be visible without scrolling.
   =========================================================================== */

.nt-top{ padding:18px 22px 16px; background:var(--panel,#fbf9f3);
  border:1px solid var(--line,#e3dcc9); border-radius:12px; margin-bottom:20px; }
.nt-top h2{ margin:0 0 8px; }
.nt-intro{ color:var(--mut,#6d675a); font-size:13.5px; line-height:1.6; max-width:900px; margin:0; }
.nt-intro b{ color:var(--gold-soft,#8a6a15); }
.nt-eg{ display:block; margin-top:9px; padding:10px 13px; background:#fffbea;
  border-left:3px solid #c9982a; border-radius:0 7px 7px 0; font-size:12.5px; color:#6b5411; }
.nt-cov{ margin-top:12px; font-size:12.5px; color:var(--mut,#6d675a);
  border-top:1px solid var(--line,#e3dcc9); padding-top:10px; }
.nt-cov b{ color:var(--txt,#20272f); }

/* ── one metric ─────────────────────────────────────────────────────────── */
.nt-card{ background:#fff; border:1px solid var(--line,#e3dcc9); border-radius:12px;
  padding:18px 20px 16px; margin-bottom:22px; }
.nt-head{ display:flex; gap:18px; align-items:flex-start; justify-content:space-between; flex-wrap:wrap; }
.nt-head h3{ margin:0; }
.nt-what{ margin:5px 0 0; font-size:13px; color:var(--mut,#6d675a); line-height:1.55; max-width:640px; }

/* The comparison the page exists to make. Both numbers, together, always. */
.nt-nums{ display:flex; gap:10px; flex:none; }
.nt-nums div{ border:1px solid var(--line,#e3dcc9); border-radius:9px; padding:8px 13px;
  min-width:104px; text-align:right; background:#fbfdfb; }
.nt-nums .l{ display:block; font-size:10px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--mut,#6d675a); }
.nt-nums .v{ display:block; font-size:16px; font-weight:700; color:var(--txt,#20272f);
  font-variant-numeric:tabular-nums; margin-top:3px; }
.nt-nums .v.good{ color:#157a4c; }

/* ── the sheet ──────────────────────────────────────────────────────────── */
/* Written at table.xl.nt-t because xl.css sets `table.xl thead th:first-child`
   to min-width:220px — right for a statement, where the first column is the
   line item, and wrong here, where it is a row number. Without the extra class
   the gutter came out 220px wide and shoved the year columns off the screen. */
table.xl.nt-t td.nt-n, table.xl.nt-t thead th.nt-n{
  width:34px; min-width:34px; max-width:34px; text-align:center;
  color:#9aa39a; font-size:10.5px; background:#f3f6f3; }
.nt-t td.lbl{ min-width:250px; max-width:340px; }
.nt-t td.lbl .nt-hint{ white-space:normal; }
.nt-t td.nt-note, .nt-t th.nt-note{ width:112px; min-width:112px; text-align:left; }

/* The formula, printed under the label the way a spreadsheet shows it in the
   bar — so the arithmetic is readable without clicking anything. */
.nt-f{ font-family:'JetBrains Mono',ui-monospace,Menlo,monospace; font-size:11px;
  color:#3c7d3f; margin-top:3px; }
.nt-hint{ font-size:11px; color:#8a8a7a; margin-top:3px; line-height:1.45; }

.nt-badge{ display:inline-block; font-size:10.5px; font-weight:700; letter-spacing:.03em;
  background:rgba(60,125,63,.12); color:#2f6b32; border:1px solid #c9d3c9;
  padding:2px 8px; border-radius:20px; white-space:nowrap; }
.nt-badge.none{ background:#fdf2f2; border-color:#e8c9c9; color:#a13c3c; font-weight:600; }

/* the comparison row: what the forecast seeds today, off the face */
tr.nt-facerow td{ background:#faf9f5 !important; color:#8a8a7a; font-style:italic; }
tr.nt-facerow td.lbl{ font-style:normal; }
.nt-err{ color:#b3261e; font-weight:700; font-size:11px; }

/* Where reading the statement stops and reading the note starts. */
tr.nt-break td{ background:#20272f !important; color:#e8b84b !important;
  font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  padding:7px 12px !important; border-bottom:0 !important; }

/* ── the instruction ────────────────────────────────────────────────────── */
.nt-read{ margin-top:14px; border:1px solid var(--line,#e3dcc9); border-radius:11px;
  background:#faf9f5; padding:14px 17px; }
.nt-read-h{ font-family:'Bebas Neue',sans-serif; letter-spacing:1px; font-size:16px;
  color:#8a6a15; margin-bottom:8px; }
.nt-steps{ margin:0 0 12px; padding-left:0; list-style:none; counter-reset:s; }
.nt-steps li{ counter-increment:s; position:relative; padding-left:32px; margin-bottom:9px;
  font-size:13px; line-height:1.65; color:#333; }
.nt-steps li::before{ content:counter(s); position:absolute; left:0; top:1px;
  width:21px; height:21px; border-radius:50%; background:#20272f; color:#e8b84b;
  font:700 11px 'DM Sans',sans-serif; display:flex; align-items:center; justify-content:center; }
.nt-steps b{ color:#20272f; }
.nt-gives, .nt-why{ font-size:12.8px; line-height:1.65; color:#4a4a42; margin-top:9px; }
.nt-gives b{ color:#2f6b32; } .nt-why b{ color:#a13c3c; }
.nt-why{ border-left:3px solid #d9b8b3; padding-left:11px; }

/* ── sending it on ──────────────────────────────────────────────────────── */
.nt-act{ margin-top:13px; display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.nt-send{ background:linear-gradient(135deg,#c9982a,#e8b84b); color:#20272f; border:0;
  border-radius:8px; padding:9px 16px; font:700 13px 'DM Sans',sans-serif; cursor:pointer; }
.nt-send:hover{ filter:brightness(1.05); }
.nt-send:disabled{ opacity:.4; cursor:default; filter:none; }
.nt-act-t{ font-size:12px; color:var(--mut,#6d675a); line-height:1.5; }
.nt-act-t b{ color:var(--txt,#20272f); }
.nt-undo{ background:none; border:0; color:#a13c3c; font:600 12px 'DM Sans',sans-serif;
  cursor:pointer; text-decoration:underline; padding:0 0 0 4px; }

.nt-foot{ font-size:12.5px; color:var(--mut,#6d675a); line-height:1.6;
  border-top:1px solid var(--line,#e3dcc9); padding-top:14px; margin-top:6px;
  display:flex; justify-content:space-between; gap:16px; align-items:center; flex-wrap:wrap; }
.nt-next{ color:#8a6a15; font-weight:700; text-decoration:none; border:1px solid var(--line,#e3dcc9);
  padding:8px 14px; border-radius:8px; white-space:nowrap; }
.nt-next:hover{ background:#fffbea; }

.nt-toast{ position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(14px);
  background:#20272f; color:#fff; padding:11px 18px; border-radius:9px; font-size:13px;
  opacity:0; pointer-events:none; transition:opacity .18s, transform .18s; z-index:60;
  box-shadow:0 14px 34px -18px rgba(0,0,0,.6); }
.nt-toast.on{ opacity:1; transform:translateX(-50%) translateY(0); }

@media (max-width:760px){
  .nt-head{ flex-direction:column; }
  .nt-nums{ width:100%; }
  .nt-nums div{ flex:1; }
  .nt-t td.lbl{ min-width:200px; }
}

/* A figure worked out over a line the extraction never found. It computes, it
   looks like an answer, and it is not one — so it is marked on the cell and
   again in words underneath, where it cannot be scrolled past. */
.nt-hole{ color:#b8860b; font-weight:700; margin-left:2px; }
td.nt-holed{ background:#fffbea !important; }
.nt-hole-w{ margin-top:12px; background:#fffbea; border:1px solid #e8d49c;
  border-left:3px solid #b8860b; border-radius:0 9px 9px 0; padding:11px 14px;
  font-size:12.5px; line-height:1.65; color:#6b5411; }
.nt-hole-w b{ color:#8a6a15; }

/* ── a linked cell ────────────────────────────────────────────────────────
   Every figure in rows 1..n is a click target, and it has to look like one.
   The whole screen fails if somebody reads these as printed numbers. */
td.nt-link{ cursor:pointer; position:relative; }
td.nt-link:hover{ background:#fffbea !important; box-shadow:inset 0 0 0 1px #c9982a; }
td.nt-empty{ color:#b0a98f; font-style:italic; font-size:11.5px; }
td.nt-empty:hover{ color:#8a6a15; }
td.nt-pend{ color:#b0a98f; }
td.nt-face{ font-variant-numeric:tabular-nums; }

/* the formula, printed under the label the way a spreadsheet shows it in the
   bar — and editable, for anyone who would rather type than click */
/* Under the label, not beside it. As an inline-block it sat on the same line
   and stretched the label column wide enough to push the year columns off the
   screen — on a sheet whose entire point is reading the years across. */
.nt-f{ font-family:'JetBrains Mono',ui-monospace,Menlo,monospace; font-size:11px;
  color:#3c7d3f; margin-top:3px; border:1px solid transparent; border-radius:5px;
  padding:2px 5px; display:block; width:fit-content; min-width:60px; }
.nt-f[contenteditable]:hover{ border-color:#d0c9ae; background:#fffdf6; }
.nt-f[contenteditable]:focus{ outline:none; border-color:#c9982a; background:#fff; }
.nt-f-ro{ color:#8a6a15; }

.nt-tip{ font-size:11.5px; color:#8a8a7a; line-height:1.6; margin:9px 2px 0; }
.nt-tip code{ font-family:'JetBrains Mono',ui-monospace,Menlo,monospace; font-size:11px;
  background:#f3f6f3; border:1px solid #e2ded3; border-radius:4px; padding:1px 5px; color:#3c7d3f; }
.nt-intro code{ font-family:'JetBrains Mono',ui-monospace,Menlo,monospace; font-size:11.5px;
  background:#fff; border:1px solid #e3dcc9; border-radius:4px; padding:1px 5px; color:#3c7d3f; }

/* ═══════════════════════════════ THE PICKER ══════════════════════════════
   All three statements, every line, every year — because "which of these is
   the one I mean" cannot be answered from a list of names alone. The figures
   have to be visible next to the labels. */
.pk-back{ position:fixed; inset:0; background:rgba(32,39,47,.55); backdrop-filter:blur(3px);
  display:none; align-items:center; justify-content:center; z-index:80; padding:24px; }
.pk-back.on{ display:flex; }
.pk{ background:#fff; border-radius:14px; width:min(1100px,100%); max-height:90vh;
  display:flex; flex-direction:column; overflow:hidden;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.5); }

.pk-h{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
  padding:18px 22px 14px; border-bottom:1px solid #e2ded3; }
.pk-h h3{ font-family:'Bebas Neue',sans-serif; letter-spacing:1px; font-size:21px;
  color:#20272f; margin:0; }
.pk-h p{ margin:4px 0 0; font-size:12.5px; color:#6d675a; line-height:1.55; max-width:720px; }
.pk-x{ background:none; border:0; font-size:26px; line-height:1; color:#8a8a7a; cursor:pointer; padding:0 4px; }
.pk-x:hover{ color:#20272f; }

.pk-bar{ display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:11px 22px; background:#faf9f5; border-bottom:1px solid #e2ded3; flex-wrap:wrap; }
.pk-modes{ display:flex; gap:6px; }
.pk-modes button{ background:#fff; border:1px solid #e2ded3; border-radius:8px;
  padding:6px 12px; font:600 12px 'DM Sans',sans-serif; color:#6d675a; cursor:pointer; }
.pk-modes button:hover{ border-color:#c9982a; }
.pk-modes button.on{ background:#20272f; border-color:#20272f; color:#e8b84b; }
.pk-sy{ display:flex; align-items:center; gap:7px; font-size:12px; color:#6d675a; cursor:pointer; }
.pk-sy input{ accent-color:#c9982a; width:14px; height:14px; margin:0; }

.pk-sel{ padding:10px 22px; border-bottom:1px solid #e2ded3; min-height:44px; }
.pk-none{ font-size:12px; color:#a8a293; font-style:italic; }
.pk-chip{ display:inline-flex; align-items:center; gap:7px; background:rgba(60,125,63,.10);
  border:1px solid #c9d3c9; border-radius:999px; padding:4px 6px 4px 11px; margin:0 6px 5px 0;
  font-size:12px; color:#2f4a2f; }
.pk-chip b{ font-family:'JetBrains Mono',ui-monospace,monospace; font-size:11px; color:#2f6b32; }
.pk-chip span{ color:#6d675a; max-width:260px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pk-chip button{ width:17px; height:17px; flex:none; border:0; border-radius:50%;
  background:rgba(0,0,0,.08); color:#6d675a; font:700 11px/1 inherit; cursor:pointer; }
.pk-chip button:hover{ background:#b3261e; color:#fff; }

.pk-body{ overflow:auto; padding:0 22px 8px; flex:1; }
.pk-sec{ margin-top:16px; }
.pk-sec-h{ font-family:'Bebas Neue',sans-serif; letter-spacing:1px; font-size:15px;
  color:#8a6a15; padding-bottom:5px; display:flex; align-items:baseline; gap:8px; }
.pk-sec-h span{ font-family:'JetBrains Mono',ui-monospace,monospace; font-size:11px; color:#a8a293; }
table.xl.pk-t td.pk-n, table.xl.pk-t thead th.pk-n{
  width:32px; min-width:32px; max-width:32px; text-align:center;
  color:#9aa39a; font-size:10.5px; background:#f3f6f3; }
.pk-t td.pk-note, .pk-t th.pk-note{ width:96px; min-width:96px; text-align:left; }
.pk-t td.lbl{ min-width:230px; }
.pk-t td.pk-c{ cursor:pointer; }
.pk-t td.pk-c:hover{ background:#fffbea !important; box-shadow:inset 0 0 0 1px #c9982a; }
.pk-t td.sel-row{ background:#f2f7f2 !important; }
.pk-t td.sel{ background:rgba(60,125,63,.18) !important; box-shadow:inset 0 0 0 2px #3c7d3f;
  font-weight:700; color:#20272f; }

.pk-f{ display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:13px 22px; border-top:1px solid #e2ded3; background:#faf9f5; flex-wrap:wrap; }
.pk-prev{ display:flex; align-items:baseline; gap:12px; min-width:0; }
.pk-prev code{ font-family:'JetBrains Mono',ui-monospace,monospace; font-size:12.5px;
  color:#2f6b32; background:#fff; border:1px solid #e2ded3; border-radius:6px;
  padding:5px 10px; max-width:520px; overflow:auto; white-space:nowrap; }
.pk-prev span{ font-size:12px; color:#6d675a; font-variant-numeric:tabular-nums; }
.pk-btns{ display:flex; gap:9px; }
.pk-clear{ background:none; border:1px solid #e2ded3; border-radius:8px; padding:9px 14px;
  font:600 12.5px 'DM Sans',sans-serif; color:#6d675a; cursor:pointer; }
.pk-ok{ background:linear-gradient(135deg,#c9982a,#e8b84b); color:#20272f; border:0;
  border-radius:8px; padding:9px 18px; font:700 13px 'DM Sans',sans-serif; cursor:pointer; }
.pk-ok:disabled{ opacity:.4; cursor:default; }

@media (max-width:760px){
  .pk{ max-height:94vh; } .pk-prev code{ max-width:100%; }
}
.nt-cov2{ border-top:0; padding-top:6px; }

/* ── what kind of company this is ─────────────────────────────────────────
   One decision, shown where its consequences are. A services company is not
   asked to link inventory days; it is told the card does not apply and why. */
.nt-prof{ background:#fff; border:1px solid var(--line,#e3dcc9); border-radius:11px;
  padding:13px 17px; margin-bottom:18px; display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.nt-prof label{ font-size:13px; color:#20272f; font-weight:600; display:flex; align-items:center; gap:8px; }
.nt-prof select{ background:#faf9f5; border:1px solid #e2ded3; border-radius:8px;
  padding:7px 10px; font:inherit; font-size:13px; color:#20272f; }
.nt-prof-h{ font-size:12px; color:#6d675a; line-height:1.55; flex:1 1 320px; }
.nt-prof-c{ flex:1 1 100%; background:#fdf2f2; border:1px solid #e8c9c9; border-left:3px solid #a13c3c;
  border-radius:0 8px 8px 0; padding:10px 13px; font-size:12.5px; line-height:1.6; color:#7a2f2f; }

.nt-card.nt-na{ opacity:.72; }
.nt-card.nt-na .nt-head{ align-items:center; }
.nt-natag{ font-size:10.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:#8a8a7a; background:#f3f3ee; border:1px solid #e2ded3; padding:4px 11px; border-radius:20px;
  white-space:nowrap; }
.nt-nawhy{ margin-top:10px; font-size:12.5px; line-height:1.65; color:#6d675a;
  border-top:1px solid #efece2; padding-top:11px; }
.nt-nawhy b{ color:#20272f; }

/* ── what this sheet is handing over ──────────────────────────────────────
   The count belongs at the top, where somebody can see the screen is doing
   something, rather than only inside fifteen separate cards. */
.nt-bar{ display:flex; align-items:center; justify-content:space-between; gap:16px;
  flex-wrap:wrap; background:#fff; border:1px solid var(--line,#e3dcc9);
  border-radius:11px; padding:12px 17px; margin-bottom:18px; font-size:13px; color:#6d675a; }
.nt-bar.on{ border-color:#c9d3c9; background:#f7faf7; }
.nt-bar b{ color:#20272f; font-size:15px; }
.nt-bar-w{ color:#8a6a15; }

.nt-act-t.nt-on{ color:#2f6b32; }
.nt-act-t.nt-on b{ color:#20272f; }
.nt-act-t.nt-off{ color:#8a6a15; }

/* The notes a linked row actually lands on — read off its own formula, so it
   follows whatever the reader chose in whichever report they are holding. */
.nt-rn{ display:flex; flex-wrap:wrap; gap:4px; margin-top:4px; }
.nt-rn .nt-badge{ font-size:9.5px; padding:1px 7px; }