/* ===========================================================================
   InvestVerdict — the calculator pages
   ---------------------------------------------------------------------------
   Beta, cost of equity and cost of debt are the same kind of screen: a thing
   the valuation needs, several defensible ways to work it out, the arithmetic
   shown, and a button that hands the answer back to the model you came from.

   Lifted out of beta.html so all three share one stylesheet rather than three
   copies of it. Three copies of a look is three chances for it to drift, and
   the whole point of these pages is that they feel like one system.
   =========================================================================== */

  :root{ --navy:#f6f3ec; --navy2:#ffffff; --gold:#c9982a; --gold-soft:#8a6a15; --mut:#6d675a;
    --sh-bg:#ffffff; --sh-text:#1d1d1d; --sh-head:#3c7d3f; --sh-banner:#5a9550; --sh-accent:#2f6b32;
    --line:#e3dcc9; --amber:#b08400; --amber-bg:#fff6df; }
  *{box-sizing:border-box;}
  body{margin:0;background:var(--navy);color:#20272f;font-family:'DM Sans',system-ui,sans-serif;font-size:14px;}
  header{display:flex;align-items:baseline;gap:14px;padding:18px 26px;border-bottom:1px solid var(--line);background:#fff;}
  .brand{font-family:'Bebas Neue',sans-serif;font-size:28px;letter-spacing:1.4px;color:#8a6a15;}
  header .sub{color:var(--mut);font-size:13px;}
  header a{margin-left:auto;color:#8a6a15;text-decoration:none;font-size:13px;border:1px solid var(--line);padding:7px 14px;border-radius:8px;}
  main{max-width:1000px;margin:0 auto;padding:24px;}
  h2{font-family:'Bebas Neue',sans-serif;letter-spacing:1px;font-size:26px;margin:0 0 6px;}
  .lede{color:#555;font-size:14px;line-height:1.65;max-width:820px;margin:0 0 18px;}
  .card{background:#fff;border:1px solid var(--line);border-radius:10px;margin-bottom:18px;overflow:hidden;}
  .band{background:var(--sh-head);color:#fff;padding:10px 16px;font-size:14px;font-weight:700;
    letter-spacing:.07em;text-transform:uppercase;}
  .body{padding:16px;}
  .tabs{display:flex;gap:0;border-bottom:2px solid var(--sh-head);margin-bottom:0;}
  .tab{flex:1;padding:13px 16px;border:0;background:#eef1ec;color:#3f4a3f;font:inherit;font-weight:700;
    font-size:13.5px;cursor:pointer;border-right:1px solid #d7e3d7;}
  .tab:last-child{border-right:0;}
  .tab.on{background:var(--sh-head);color:#fff;}
  .step{display:flex;gap:12px;padding:14px 0;border-bottom:1px solid #eef1ec;}
  .step:last-of-type{border-bottom:0;}
  .step-n{flex:0 0 26px;width:26px;height:26px;border-radius:50%;background:var(--sh-head);color:#fff;
    display:grid;place-items:center;font-weight:800;font-size:12.5px;}
  .step-b{flex:1;}
  .step-b h4{margin:2px 0 6px;font-size:14px;color:#1d1d1d;}
  .step-b p{margin:0 0 6px;font-size:13.5px;line-height:1.62;color:#555;}
  .step-b code{background:#f3f6f3;border:1px solid #d7e3d7;border-radius:4px;padding:1px 6px;
    font-family:ui-monospace,monospace;font-size:12.5px;color:#1f5e2c;}
  .fx{background:#f3f6f3;border:1px solid #d7e3d7;border-left:4px solid var(--sh-head);border-radius:7px;
    padding:11px 14px;margin:8px 0;font-family:ui-monospace,monospace;font-size:13px;color:#1f5e2c;line-height:1.7;}
  textarea{width:100%;min-height:150px;border:1px solid var(--line);border-radius:8px;padding:10px;
    font-family:ui-monospace,monospace;font-size:12.5px;resize:vertical;}
  label.fl{display:block;font-size:12.5px;color:#555;margin:10px 0 4px;font-weight:600;}
  input[type=number],input[type=text]{border:1px solid var(--line);border-radius:7px;padding:8px 10px;
    font:inherit;font-size:13px;width:150px;font-variant-numeric:tabular-nums;}
  .btn{border:0;background:var(--sh-head);color:#fff;border-radius:8px;padding:10px 18px;
    font:inherit;font-weight:700;font-size:13.5px;cursor:pointer;}
  .btn:hover{background:#2f6b32;}
  .btn-2{background:#fff;color:#3c7d3f;border:1px solid #3c7d3f;}
  .btn-2:hover{background:#eef4ee;}
  .res{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-top:14px;}
  .res-c{border:1px solid var(--line);border-radius:9px;padding:13px 15px;background:#fff;}
  .res-c span{display:block;font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#3c7d3f;}
  .res-c b{display:block;font-family:'Bebas Neue',sans-serif;font-size:32px;letter-spacing:.5px;color:#1d1d1d;line-height:1.2;}
  .res-c i{display:block;font-size:11.5px;color:#777;font-style:normal;margin-top:2px;}
  .peer-row{display:flex;gap:8px;align-items:center;margin-bottom:8px;flex-wrap:wrap;}
  .peer-row input{width:130px;}
  .peer-row input.nm{width:190px;}
  .hist{font-size:12.5px;}
  .hist table{width:100%;border-collapse:collapse;}
  .hist th,.hist td{padding:7px 10px;border-bottom:1px solid #eef1ec;text-align:left;font-variant-numeric:tabular-nums;}
  .hist th{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:#3c7d3f;}
  .muted{color:#777;font-size:12.5px;}
  .hidden{display:none;}

/* ── brand mark: one size and one place everywhere ────────────────────────
   Two things were wrong, and the second only appeared once the logo became a
   link:

   SIZE — header logos had drifted to 22px, 23px and 34px on different pages,
   so the same mark changed size as you moved through the site. Sized by HEIGHT
   only (never width) so the aspect ratio can never be squashed.

   PLACE — these headers carry `header a{margin-left:auto}` to push the nav
   BUTTONS to the right. The wordmark used to be a <span> so it was unaffected;
   turning it into a link made it obey that rule too, and it shot 444px across
   the header. `margin-left:0` puts it back at the left edge, and
   `margin-right:auto` keeps everything else pushed right exactly as before.

   Headers here align on `baseline`, which sits an image a few pixels low
   because a picture has no baseline of its own — `align-self:center` fixes
   that, and line-height:0 removes the phantom descender gap. */
a.brand,.brand,.lp-logo,.hdr-logo,.chrome-brand,.fbrand{
  margin-left:0 !important; margin-right:auto;
  align-self:center;
  display:inline-flex; align-items:center; line-height:0;
  font-size:0;
  flex:0 0 auto;
}
.ivwm,.lp-logo img,.brand img,.hdr-logo img,
.chrome-brand img,.fbrand img,a.brand>img{
  height:30px !important; width:auto !important; display:block;
  max-width:none;
}
@media (max-width:640px){
  .ivwm,.lp-logo img,.brand img,.hdr-logo img,
  .chrome-brand img,.fbrand img,a.brand>img{ height:24px !important; }
}

/* ── the calculators added after beta ─────────────────────────────────────
   Beta's page had one set of inputs; cost of equity has four methods and cost
   of debt has a repeating row of facilities. These are the pieces that page
   never needed. */
.grid3{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; margin:18px 0 4px; }
.grid3 label{ display:flex; flex-direction:column; gap:6px; font-size:13px; color:#4a4638; font-weight:600; }
.grid3 input{ padding:9px 11px; font-size:14px; }
.grid3 .u{ font-size:11.5px; color:#8a8a7a; font-weight:400; }

.rows{ display:flex; flex-direction:column; gap:9px; margin:18px 0 10px; }
.frow{ display:grid; grid-template-columns:1fr 130px 22px 100px 22px auto; gap:8px; align-items:center; }
.frow input{ padding:8px 10px; font-size:13.5px; }
.frow .u{ font-size:12px; color:#8a8a7a; }
.frow .x{ border:0; background:none; color:#a13c3c; font-size:19px; cursor:pointer; line-height:1; padding:0 4px; }
.frow .x:hover{ color:#7a2f2f; }
button.ghost{ background:#fff; border:1px solid var(--line,#e3dcc9); border-radius:8px;
  padding:8px 14px; font:600 12.5px 'DM Sans',sans-serif; color:#6d675a; cursor:pointer; }
button.ghost:hover{ border-color:var(--gold,#c9982a); color:#8a6a15; }

.act{ display:flex; align-items:center; gap:13px; flex-wrap:wrap; margin-top:16px;
  border-top:1px solid var(--line,#e3dcc9); padding-top:15px; }
button.use{ background:linear-gradient(135deg,#c9982a,#e8b84b); color:#20272f; border:0;
  border-radius:8px; padding:10px 18px; font:700 13.5px 'DM Sans',sans-serif; cursor:pointer; }
button.use:hover{ filter:brightness(1.05); }
button.use:disabled{ opacity:.4; cursor:default; filter:none; }

.warnline{ background:#fffbea; border-left:3px solid #b8860b; border-radius:0 7px 7px 0;
  padding:10px 13px; font-size:12.8px; line-height:1.6; color:#6b5411; margin:13px 0 0; }
.card.hist{ margin-top:20px; }
.card.hist h3{ margin-top:0; }

/* the way back to the statements' own figures */
.d-reset{ margin:14px 0 6px; }
.d-reset .ghost{ width:100%; text-align:center; }
