/* ===========================================================================
   InvestVerdict — the spreadsheet look, shared by every model
   ---------------------------------------------------------------------------
   These screens are read by people who have spent their careers in Excel. When
   a valuation renders as a web table with airy padding and hairline borders,
   they cannot scan it: the eye is trained on ruled cells, right-aligned
   figures that line up digit for digit, and totals that sit under a rule.

   So this is not decoration. Every rule below exists because it is how a
   financial model is actually read:

     · gridlines on every cell, because a number with no cell is hard to track
       across a wide year row
     · tabular numerals, so 1,111 and 9,999 occupy the same width and columns
       align down the page
     · the header row and the label column stay put while you scroll, the way
       frozen panes do — a figure with its year or its label scrolled away is
       worthless
     · negatives in red parentheses, the accounting convention
     · totals ruled above and double-ruled below, as on paper
   =========================================================================== */

:root{
  --xl-line:#c9d3c9;          /* cell gridline                */
  --xl-line-strong:#3c7d3f;   /* section rules                */
  --xl-head:#f3f6f3;          /* column header fill           */
  --xl-head-txt:#555555;
  --xl-band:#fbfdfb;          /* banded row                   */
  --xl-lbl:#f3f8f3;           /* frozen label column          */
  --xl-fc:#fdf8ec;            /* forecast (projected) column  */
  --xl-fc-head:#f6ebd2;
  --xl-neg:#b3261e;           /* accounting red               */
  /* The green below is the financial statements' OWN colour, carried in from
     the model pages so the spreadsheet reads as one document with them. It is
     not a decorative choice to be swapped: the statement scheme is the thing
     everything else has to match. */
  --xl-accent:#3c7d3f;      /* the statements' own green — see the note above */
}

/* the sheet the table sits on */
.sheet{
  background:#fff; border:1px solid var(--xl-line); border-radius:6px;
  padding:0; margin-top:14px; overflow:hidden;
  box-shadow:0 12px 34px -28px rgba(31,28,20,.35);
}
.xl-scroll{ overflow-x:auto; overflow-y:visible; -webkit-overflow-scrolling:touch; }

table.xl{
  width:100%; border-collapse:separate; border-spacing:0;
  font-size:12.5px; color:#1d1d1d; background:#fff;
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1;
}

/* ── column headers: frozen, ruled, uppercase ─────────────────────────────── */
table.xl thead th{
  position:sticky; top:0; z-index:3;
  background:var(--xl-head); color:var(--xl-head-txt);
  font-weight:700; font-size:10.5px; letter-spacing:.05em; text-transform:uppercase;
  text-align:right; padding:8px 12px; white-space:nowrap;
  border-bottom:2px solid var(--xl-line-strong);
  border-right:1px solid var(--xl-line);
}
table.xl thead th.lbl,
table.xl thead th:first-child{ text-align:left; left:0; z-index:4; min-width:220px; }
table.xl thead th.fcol,
table.xl thead th.fc{ background:var(--xl-fc-head); color:#7a5f10; }

/* ── body cells ───────────────────────────────────────────────────────────── */
table.xl td{
  padding:6px 12px; text-align:right; white-space:nowrap;
  border-bottom:1px solid var(--xl-line);
  border-right:1px solid var(--xl-line);
}
table.xl td:last-child, table.xl th:last-child{ border-right:0; }
table.xl tbody tr:nth-child(even) td{ background:var(--xl-band); }
table.xl tbody tr:hover td{ background:#f7faf7; }

/* the label column behaves like a frozen pane */
table.xl td.lbl,
table.xl td:first-child{
  text-align:left; position:sticky; left:0; z-index:2;
  background:var(--xl-lbl); border-right:1px solid var(--xl-line-strong);
  font-weight:500;
}
table.xl tbody tr:nth-child(even) td:first-child{ background:#eef1ec; }
table.xl tbody tr:hover td:first-child{ background:#e8efe8; }

/* projected years are tinted, so an estimate is never mistaken for an actual */
table.xl td.fcol, table.xl td.fc{ background:var(--xl-fc) !important; }
table.xl tbody tr:nth-child(even) td.fcol,
table.xl tbody tr:nth-child(even) td.fc{ background:#fbf4e4 !important; }

/* ── totals and section heads, ruled the way paper is ─────────────────────── */
table.xl tr.total td, table.xl tr.subtotal td, table.xl td.total{
  font-weight:700; border-top:1px solid var(--xl-line-strong);
  background:#eef1ec;
}
table.xl tr.total td{ border-bottom:3px double var(--xl-line-strong); }
table.xl tr.section td, table.xl tr.cat-row td{
  background:#eef4ee; color:var(--xl-accent);
  font-weight:700; font-size:11.5px; letter-spacing:.03em;
  border-top:1px solid #d7e3d7; border-bottom:1px solid #d7e3d7;
}

/* ── accounting conventions ───────────────────────────────────────────────── */
table.xl td.neg{ color:var(--xl-neg); }
table.xl td.zero{ color:#9aa39a; }
table.xl td.blank{ color:#c2cec2; }

/* an input sitting inside a cell should look like a cell you can type in,
   not like a form control dropped on top of a spreadsheet */
table.xl td input, table.xl td select{
  width:100%; border:1px solid transparent; background:transparent;
  font:inherit; font-variant-numeric:tabular-nums; text-align:right;
  padding:2px 4px; border-radius:3px; color:inherit;
}
table.xl td input:hover, table.xl td select:hover{ border-color:var(--xl-line); background:#fff; }
table.xl td input:focus, table.xl td select:focus{
  outline:none; border-color:var(--xl-accent); background:#fff;
  box-shadow:0 0 0 2px rgba(60,125,63,.20);
}

/* ── sensitivity grids: same frame, heat kept subtle ──────────────────────── */
table.sens{ border-collapse:separate; border-spacing:0; font-variant-numeric:tabular-nums; font-size:12px; }
table.sens th{
  background:var(--xl-head); color:var(--xl-head-txt); font-weight:700;
  font-size:10.5px; text-transform:uppercase; letter-spacing:.04em;
  padding:7px 11px; border-bottom:2px solid var(--xl-line-strong); border-right:1px solid var(--xl-line);
}
table.sens td{
  padding:6px 11px; text-align:right; border-bottom:1px solid var(--xl-line);
  border-right:1px solid var(--xl-line);
}
table.sens td.base{ background:#eaf3ec; font-weight:700; box-shadow:inset 0 0 0 2px var(--xl-accent); }

/* a wide model on a phone still has to be readable, so the sheet scrolls
   inside its own frame rather than pushing the page sideways */
@media (max-width:640px){
  table.xl{ font-size:11.5px; }
  table.xl td, table.xl thead th{ padding:5px 8px; }
  table.xl thead th.lbl, table.xl thead th:first-child{ min-width:150px; }
}

@media print{
  .sheet{ box-shadow:none; border-color:#999; }
  table.xl thead th{ position:static; }
  table.xl td:first-child{ position:static; }
}

/* ===========================================================================
   Severity — three levels, three looks, never interchangeable
   ---------------------------------------------------------------------------
   Until now every message on these screens arrived in the same amber box, so a
   note that the peer set is small looked exactly like a warning that the share
   counts contradict the prospectus. When everything shouts equally, nothing is
   heard. So:

     RED    CRITICAL — a number on this screen is unsafe to use. Something
                       contradicts the source document or the maths does not
                       hold. Stop and fix it before quoting anything.
     AMBER  WARNING  — the answer stands but leans on a weak assumption.
     GREEN  CLEARED  — checked and fine, stated so the silence is not ambiguous.

   Red is used ONLY for critical. Nothing decorative is red anywhere in this
   product, so that when red does appear it still means something.
   =========================================================================== */
.chk{
  display:flex; gap:10px; align-items:flex-start;
  padding:11px 14px; margin:8px 0; border-radius:9px;
  font-size:13px; line-height:1.55;
}
.chk-ic{
  flex:0 0 18px; width:18px; height:18px; border-radius:50%;
  display:grid; place-items:center; margin-top:1px;
  font-size:11px; font-weight:800; color:#fff;
}

.chk-critical{
  background:#fdecea; border:1px solid #f0b3ab;
  border-left:4px solid #c0392b; color:#8c2820;
}
.chk-critical .chk-ic{ background:#c0392b; }
.chk-critical b, .chk-critical strong{ color:#a02a1c; }
/* A critical item earns one pulse when it appears, then stops. Something that
   never stops moving is something people learn to scroll past. */
.chk-critical{ animation:chk-once .9s ease-out 1; }
@keyframes chk-once{
  0%   { box-shadow:0 0 0 0 rgba(192,57,43,.45); }
  100% { box-shadow:0 0 0 12px rgba(192,57,43,0); }
}
@media (prefers-reduced-motion:reduce){ .chk-critical{ animation:none; } }

.chk-warn{
  background:rgba(201,152,42,.10); border:1px solid rgba(201,152,42,.45);
  border-left:4px solid #b8860b; color:#6b5310;
}
.chk-warn .chk-ic{ background:#b8860b; }

.chk-ok{
  background:rgba(21,122,76,.08); border:1px solid rgba(21,122,76,.32);
  border-left:4px solid #157a4c; color:#1d6647;
}
.chk-ok .chk-ic{ background:#157a4c; }

/* a critical figure inside a table gets the same red, so the message and the
   cell it is about are visibly the same thing */
table.xl td.critical{
  background:#fdecea !important; color:#8c2820; font-weight:700;
  box-shadow:inset 0 0 0 2px #c0392b;
}

/* A measure that does not apply to this kind of company. Greyed and labelled,
   never blank: a blank reads as broken software, and a number would read as
   information that is not there. */
tr.ratio-na td{ color:#a49c8c !important; }
tr.ratio-na .rname{ border-bottom:0; }
.na-tag{
  display:inline-block; margin-left:8px; padding:1px 7px;
  font-size:10px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:#7d7466; background:#f2efe7; border:1px solid #ddd6c6; border-radius:999px;
  white-space:nowrap;
}

/* company-type selector */
.r-ind{ margin:12px 0 0; display:flex; flex-direction:column; gap:8px; max-width:980px; }
.r-ind-l{ font-size:12.5px; color:#6d675a; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.r-ind-l select{
  background:#fff; border:1px solid #c9d3c9; border-radius:7px;
  padding:6px 9px; font:inherit; font-size:12.5px; color:#20272f; min-width:260px;
}
.r-ind-hint{ font-size:12.5px; color:#6d675a; line-height:1.55; font-style:italic; }
.r-ind button{
  margin-left:6px; border:1px solid #3c7d3f; background:#fff; color:#2f6b32;
  border-radius:6px; padding:3px 9px; font:inherit; font-size:11.5px; font-weight:700; cursor:pointer;
}
.r-ind button:hover{ background:#3c7d3f; color:#fff; }
.asm-hidden{ font-size:12px; color:#6d675a; font-style:italic; margin:8px 0 0; }

/* ── narrow screens: nothing may push the page sideways ────────────────────
   The learning marker and the "needs a value" pill add width inside a label
   row. On a wide screen that is free; in a 489px panel it was enough to shove
   the input boxes off the right edge, so half of every figure was unreadable.
   The row wraps instead, and the pill — whose signal the amber ring already
   carries on its own — steps down to a dot. Nothing is hidden that is not
   said twice. */
@media (max-width:620px){
  .d-row, .row, .asm-lbl{ flex-wrap:wrap; }
  .d-inputs, .d-ig, .ig{ min-width:0 !important; max-width:100%; }
  .d-inwrap{ margin-left:auto; }
  .iv-need-tag{
    font-size:0; padding:0; width:9px; height:9px; border-radius:50%;
    background:var(--iv-need, #b8860b); border-color:var(--iv-need, #b8860b);
    margin-left:6px;
  }
}
/* A grid track defaults to a MIN-CONTENT floor, so a single wide row inside it
   stretches the whole column past the viewport and the figures on the right get
   cut off. `minmax(0, 1fr)` is what lets the track actually shrink. Setting
   min-width:0 on the child alone does not do it — the track is the thing that
   refuses to give.

   The previous attempt here was `overflow-x:hidden` on body. That did not fix
   anything: it clipped the overflow so the page reported no horizontal scroll
   while the numbers were still unreadable — and worse, an `overflow` value
   other than `visible` on an ancestor silently disables `position:sticky`,
   which would have killed every frozen header and label column in this file. */
@media (min-width:901px){ .d-grid{ grid-template-columns:340px minmax(0, 1fr); } }
@media (max-width:900px){
  .d-grid, .grid2, .cols{ grid-template-columns:minmax(0, 1fr); }
}
.d-grid > *, .grid2 > *, .cols > *{ min-width:0; }
html, body{ max-width:100%; }

/* ===========================================================================
   Breathing room — the panels, their headings, and the rhythm between them
   ---------------------------------------------------------------------------
   The section headings sat hard against the card border with not one pixel of
   space, because these cards carry `padding:0` ON PURPOSE: the green statement
   bands inside them are meant to run edge to edge, and any padding on the card
   would leave a pale gutter down each side of every band.

   So the space belongs on the HEADING, not on the card. That keeps the bands
   full-bleed and still gives the title the same left margin as the rows below
   it, which is what makes a panel read as one column rather than as two things
   that happen to be stacked.
   =========================================================================== */

/* ── panel headings are BANDS, like the statement's own section bars ───────
   A section title set in small caps against the page reads as a label. The
   green bar reads as a heading — the same bar the statements already use for
   DISCOUNT RATE (WACC) and CAPITAL STRUCTURE, so a panel title and a group
   title now belong to one visual family instead of being two unrelated styles
   stacked on each other.

   They run edge to edge, which is why the padding lives INSIDE the band rather
   than on the card: a card with padding would leave a pale gutter beside every
   bar. */
.d-inputs h3, .d-out h3, .hero h3, .chartbox h4, .scen h4,
section > h3, .card > h3, .panel > h3{
  display:block;
  margin:0 0 12px;
  padding:10px 16px;
  background:var(--sh-head, #3c7d3f);
  color:#fff;
  font-size:14px; font-weight:700;
  letter-spacing:.07em; text-transform:uppercase;
  border-radius:0;
}
/* a second band inside the same panel needs air above it */
.d-out h3 + *, .d-inputs h3 + *{ margin-top:0; }
.d-out > *:not(h3) + h3, .d-inputs > *:not(h3) + h3,
.chartbox + .chartbox h4{ margin-top:20px; }

/* the sensitivity block sits on the page, not in a card, so its band needs the
   page's own gutter respected and a rounded top to look deliberate */
main > h3{
  margin:24px 0 12px; padding:11px 18px;
  background:var(--sh-head, #3c7d3f); color:#fff;
  font-size:15px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  border-radius:8px 8px 0 0;
}

/* a caption under a heading belongs to it, so it keeps the same margin */
.d-inputs > h3 + p, .d-out > h3 + p{ margin-top:-4px; color:#6b6b6b; font-size:12.5px; line-height:1.55; }

/* the panels themselves need air between them, and a floor under the last one */
.d-inputs, .d-out, .hero, .chartbox, .d-limits, .d-tvmethod{ margin-bottom:16px; }
.d-inputs > :last-child, .d-out > :last-child{ margin-bottom:0; }
.d-ig{ margin-bottom:0; }
.d-ig + .d-ig{ border-top:1px solid var(--xl-line); }

/* rows inside a group line up with the heading above them */
.d-row{ padding:0 2px; }

/* A table wider than its panel scrolls, which is right — but a reader has no
   way to know a column is hidden. The frame says so. */
.d-scroll, .xl-scroll{
  position:relative;
  scrollbar-width:thin;
}
.d-scroll::-webkit-scrollbar, .xl-scroll::-webkit-scrollbar{ height:8px; }
.d-scroll::-webkit-scrollbar-thumb, .xl-scroll::-webkit-scrollbar-thumb{
  background:var(--xl-line-strong, #3c7d3f); border-radius:4px; opacity:.5;
}
.d-scroll::-webkit-scrollbar-track, .xl-scroll::-webkit-scrollbar-track{
  background:var(--xl-head, #f3f6f3);
}

/* the stat strip: even cells, ruled between, never crushed */
.wacc-cards{ gap:0; }
.wacc-cards > .wc{ padding:14px 16px !important; }
.wacc-cards > .wc + .wc{ border-left:1px solid var(--xl-line); }

/* the value headline needs room around it, not just under it */
.hero{ padding:0 0 4px; }
.hero-v, .hero-k{ padding-left:18px; padding-right:18px; }


/* ===========================================================================
   Charts and scenarios
   ---------------------------------------------------------------------------
   The waterfall was drawn at 289x145 inside an 832px panel — a fifth of the
   space it was given, which made the one thing it exists to show (that the
   terminal value dwarfs the forecast years) too small to read. A chart that
   cannot be read is worse than no chart: it occupies the space where the
   explanation should have been.
   =========================================================================== */
.chartbox{ padding:0 0 16px; }
.chartbox h4{ margin-top:0; }
.chartbox canvas{ width:100% !important; max-width:100%; display:block; padding:0 16px; box-sizing:border-box; }

/* what the enterprise value is made of */
.mix{
  display:flex; height:34px; margin:0 16px; border-radius:6px; overflow:hidden;
  border:1px solid var(--xl-line);
}
.mix-a{ background:#3c7d3f; }
.mix-b{ background:#c9982a; }
.mix-k{ display:flex; gap:22px; flex-wrap:wrap; margin:10px 16px 0; font-size:12.5px; color:#555; }
.mix-k i{ display:inline-block; width:11px; height:11px; border-radius:3px; margin-right:6px; vertical-align:-1px; }
.mix-k .sw-a{ background:#3c7d3f; } .mix-k .sw-b{ background:#c9982a; }
.mix-n{ margin:10px 16px 0; font-size:12.5px; line-height:1.55; color:#6b6b6b; font-style:italic; }

/* three scenarios read off the same grid */
.scen{ margin-top:18px; }
.scen-row{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px; padding:0 16px; }
.scen-c{
  border:1px solid var(--xl-line); border-radius:9px; padding:13px 15px;
  display:flex; flex-direction:column; gap:4px; background:#fff;
}
.scen-c b{ font-size:24px; line-height:1.15; color:#1d1d1d; font-family:'Bebas Neue',sans-serif; letter-spacing:.5px; }
.scen-l{ font-size:10.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; }
.scen-bear .scen-l{ color:#b3261e; }
.scen-base .scen-l{ color:#3c7d3f; }
.scen-bull .scen-l{ color:#8a6a15; }
.scen-bear{ border-top:3px solid #b3261e; }
.scen-base{ border-top:3px solid #3c7d3f; background:#f7faf7; }
.scen-bull{ border-top:3px solid #c9982a; }
.scen-d{ font-size:12px; font-weight:700; }
.scen-d.up{ color:#1f7a3d; } .scen-d.down{ color:#b3261e; }
.scen-n{ font-size:11.5px; color:#777; font-variant-numeric:tabular-nums; }
.scen-w{ font-size:12px; color:#666; line-height:1.5; margin-top:3px; }
.scen-f{ margin:12px 16px 0; font-size:12.5px; line-height:1.6; color:#6b6b6b; }

@media (max-width:820px){
  .scen-row{ grid-template-columns:minmax(0,1fr); }
}

main > h3 + p{ margin:0 0 12px; padding:0 2px; font-size:12.5px; line-height:1.6; color:#6b6b6b; }

/* the "work it out" door beside an assumption that deserves real effort */
.d-calc{
  margin-left:8px; font-size:11px; font-weight:700; letter-spacing:.03em;
  color:#2f6b32; background:#eef4ee; border:1px solid #9bbf9b;
  border-radius:999px; padding:2px 9px; text-decoration:none; white-space:nowrap;
}
.d-calc:hover{ background:#3c7d3f; color:#fff; border-color:#3c7d3f; }

/* ── the real mark, not a typed word ──────────────────────────────────────
   Every page had "InvestVerdict" SET IN A FONT — a wordmark rebuilt in Bebas
   Neue rather than the actual logo. It drifted with whatever font loaded, and
   it is not the brand: the logo file existed the whole time. Sized by height so
   it sits on the same baseline as the page title beside it. */
.brand{
  display:inline-flex; align-items:center; line-height:0;
  text-decoration:none; flex:0 0 auto;
}
.brand img{
  height:34px; width:auto; display:block;
  image-rendering:-webkit-optimize-contrast;
}
@media (max-width:640px){ .brand img{ height:26px; } }