@font-face{font-family:Barlow;src:url('../fonts/barlow-regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Barlow;src:url('../fonts/barlow-medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Barlow;src:url('../fonts/barlow-semibold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:Barlow;src:url('../fonts/barlow-bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

:root{
  --green:#05a535;
  --green-dark:#047a29;
  --green-soft:#eaf7ee;
  --ink:#172019;
  --muted:#5f6d63;
  --line:#d8e1da;
  --surface:#fff;
  --canvas:#f3f6f4;
  --orange:#e87524;
  --blue:#245f99;
  --red:#bd3b45;
  --radius:14px;
  --shadow:0 8px 26px rgba(17,45,25,.08);
  font-family:Barlow,Arial,sans-serif;
  color:var(--ink);
  background:var(--canvas);
  font-size:16px
}

*{box-sizing:border-box}

body{
  margin:0;
  min-width:320px;
  background:linear-gradient(180deg,#fff 0,#f3f6f4 22rem)
}

button,
input,
select,
textarea{
  font:inherit
}

button{
  cursor:pointer
}

.skip-link{
  position:absolute;
  left:-9999px
}

.skip-link:focus{
  left:1rem;
  top:1rem;
  z-index:100;
  background:#fff;
  padding:.7rem 1rem;
  border:2px solid var(--green)
}

.site-header{
  display:flex;
  align-items:center;
  gap:2rem;
  max-width:1480px;
  margin:auto;
  padding:1.35rem 2.25rem;
  border-bottom:1px solid var(--line)
}

.fnw-logo-link{
  display:block;
  text-decoration:none
}

.fnw-logo-link:focus-visible{
  outline:3px solid rgba(5,165,53,.25);
  outline-offset:5px;
  border-radius:4px
}

.fnw-logo{
  display:block;
  width:min(35vw,440px);
  height:64px;
  object-fit:contain;
  object-position:left center
}

.site-header h1{
  margin:0 0 0 auto;
  font-size:clamp(1.35rem,2.5vw,2.15rem);
  line-height:1.12;
  text-align:right
}

.site-header h1 span{
  font-weight:500
}

.site-header h1 b{
  font-weight:400;
  color:var(--green);
  padding:0 .2em
}

.eyebrow,
.step-label,
.card-kicker{
  display:block;
  color:var(--green-dark);
  font-size:.76rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase
}

main{
  max-width:1480px;
  min-height:calc(100vh - 190px);
  margin:auto;
  padding:2rem 2.25rem 4rem
}

.view-heading{
  display:flex;
  justify-content:space-between;
  gap:2rem;
  align-items:end;
  margin-bottom:1.25rem
}

.view-heading h2{
  font-size:clamp(1.75rem,3.2vw,2.8rem);
  line-height:1.05;
  margin:.35rem 0 0
}

.view-heading p{
  max-width:620px;
  color:var(--muted);
  font-size:1.06rem;
  margin:0;
  line-height:1.45
}

.heading-actions{
  display:flex;
  align-items:flex-end;
  gap:1rem
}

.heading-actions p{
  max-width:520px
}

.back-link{
  display:inline-block;
  color:var(--green-dark);
  font-weight:600;
  text-decoration:none;
  margin-bottom:.65rem
}

.back-link:hover{
  text-decoration:underline
}

.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:1.25rem;
  box-shadow:var(--shadow)
}

.card-heading{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:1rem;
  margin-bottom:1rem
}

.card-heading h3{
  font-size:1.28rem;
  margin:.15rem 0 0
}

.action-row{
  display:flex;
  gap:.5rem;
  align-items:center;
  flex-wrap:wrap
}

.action-row.compact .button{
  padding:.55rem .72rem;
  font-size:.9rem
}

.button{
  border:1px solid var(--line);
  border-radius:8px;
  padding:.68rem .95rem;
  background:#fff;
  color:var(--ink);
  font-weight:600;
  line-height:1.1
}

.button:hover{
  border-color:var(--green);
  color:var(--green-dark)
}

.button.primary{
  background:var(--green);
  border-color:var(--green);
  color:#fff
}

.button.primary:hover{
  background:var(--green-dark)
}

.button.secondary{
  background:var(--green-soft);
  border-color:#bde5c9;
  color:var(--green-dark)
}

.button.ghost{
  border-color:transparent;
  background:transparent;
  color:var(--green-dark)
}

.button.full{
  width:100%;
  margin-top:.85rem
}

.icon-button{
  border:0;
  background:transparent;
  font-size:1.7rem;
  line-height:1;
  color:var(--muted);
  padding:.2rem
}

.text-button{
  border:0;
  background:transparent;
  color:var(--green-dark);
  font-weight:600;
  padding:.7rem 0 0
}

.file-button{
  display:inline-block
}

.home-view{
  padding:3.5rem 0 5rem
}

.home-heading{
  max-width:720px;
  margin-bottom:2rem
}

.home-heading h2{
  font-size:clamp(2rem,4vw,3.6rem);
  line-height:1.02;
  margin:.45rem 0 0
}

.home-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1rem
}

.home-tile{
  position:relative;
  display:flex;
  min-height:300px;
  flex-direction:column;
  padding:1.6rem;
  border:1px solid var(--line);
  border-top:6px solid var(--green);
  border-radius:var(--radius);
  background:#fff;
  color:var(--ink);
  text-decoration:none;
  box-shadow:var(--shadow);
  transition:transform .18s,border-color .18s,box-shadow .18s
}

.home-tile:hover,
.home-tile:focus-visible{
  transform:translateY(-4px);
  border-color:#8fc99f;
  box-shadow:0 14px 34px rgba(17,45,25,.13);
  outline:none
}

.tile-number{
  color:var(--green);
  font-size:.82rem;
  font-weight:700;
  letter-spacing:.12em
}

.home-tile h3{
  font-size:clamp(1.45rem,2.2vw,2rem);
  line-height:1.08;
  margin:2.4rem 0 .8rem
}

.home-tile p{
  color:var(--muted);
  font-size:1.04rem;
  line-height:1.5;
  margin:0
}

.tile-link{
  margin-top:auto;
  padding-top:2rem;
  color:var(--green-dark);
  font-weight:700
}

.tile-link::after{
  content:' →'
}

.full-width-card{
  width:100%;
  margin-bottom:1rem
}

.collapsible-content[hidden]{
  display:none
}

.collapse-toggle::after{
  content:' ︿';
  font-size:.8em
}

.collapse-toggle[aria-expanded="false"]::after{
  content:' ﹀'
}

.workbench-grid{
  display:grid;
  grid-template-columns:minmax(0,1.7fr) minmax(330px,.78fr);
  gap:1rem;
  align-items:start
}

.workbench-grid>.chart-card{
  margin-top:0
}

.linear-workbench{
  grid-template-columns:minmax(0,1.75fr) minmax(340px,.72fr)
}

.chart-hint{
  color:var(--muted);
  font-size:.86rem;
  margin:.7rem 0 0
}

.slider-field{
  display:grid;
  gap:.45rem;
  margin-bottom:1rem
}

.slider-field>label{
  display:grid;
  grid-template-columns:1fr minmax(100px,42%);
  align-items:center;
  gap:.7rem
}

.slider-field>label input{
  text-align:right
}

.slider-field input[type="range"],
.method-options input[type="range"]{
  padding:0;
  border:0;
  box-shadow:none;
  accent-color:var(--green);
  cursor:pointer
}

.slider-field input[type="range"]:focus,
.method-options input[type="range"]:focus{
  box-shadow:none
}

.empty-state-text{
  fill:#657169;
  font-size:22px;
  text-anchor:middle
}

.empty-state-subtext{
  fill:#8a958d;
  font-size:16px;
  text-anchor:middle
}

label{
  display:flex;
  flex-direction:column;
  gap:.35rem;
  color:#39433c;
  font-size:.9rem;
  font-weight:600
}

.meta-grid{
  display:grid;
  gap:.7rem;
  margin-bottom:1rem
}

.meta-grid.three{
  grid-template-columns:repeat(3,minmax(0,1fr))
}

.meta-grid.two{
  grid-template-columns:repeat(2,minmax(0,1fr))
}

input,
select,
textarea{
  width:100%;
  border:1px solid #bdc9c0;
  border-radius:7px;
  background:#fff;
  color:var(--ink);
  padding:.65rem .7rem;
  outline:none
}

input:focus,
select:focus,
textarea:focus{
  border-color:var(--green);
  box-shadow:0 0 0 3px rgba(5,165,53,.12)
}

textarea{
  resize:vertical;
  line-height:1.45
}

.input-label{
  margin:.25rem 0 .35rem
}

.under-input{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
  color:var(--muted);
  font-size:.86rem;
  margin:.55rem 0 1rem
}

.under-input span{
  max-width:70%
}

.import-map{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:end;
  gap:.75rem;
  background:var(--green-soft);
  border:1px solid #bde5c9;
  padding:.8rem;
  border-radius:9px;
  margin-bottom:1rem
}

#linear-import-map{
  grid-template-columns:1fr 1fr auto
}

.table-wrap{
  overflow:auto;
  border:1px solid var(--line);
  border-radius:9px;
  max-height:420px
}

table{
  width:100%;
  border-collapse:collapse;
  font-size:.93rem
}

th,
td{
  padding:.58rem .7rem;
  text-align:left;
  border-bottom:1px solid #e5ebe7;
  white-space:nowrap
}

th{
  position:sticky;
  top:0;
  background:#f5f8f6;
  color:#445049;
  font-weight:600;
  z-index:1
}

tbody tr:last-child td{
  border-bottom:0
}

td input[type=text]{
  padding:.42rem .5rem;
  min-width:95px
}

.manual-column{
  text-align:center
}

td.manual-column input{
  width:auto
}

.delete-row{
  border:0;
  background:transparent;
  color:#8a9690;
  font-size:1.25rem
}

.delete-row:hover{
  color:var(--red)
}

.method-list{
  display:grid;
  gap:.42rem
}

.method-button{
  display:flex;
  align-items:center;
  justify-content:space-between;
  text-align:left;
  border:1px solid var(--line);
  background:#fff;
  border-radius:8px;
  padding:.7rem .75rem;
  font-weight:600;
  color:#344039
}

.method-button:hover{
  border-color:#8fc99f
}

.method-button.active{
  border-color:var(--green);
  background:var(--green-soft);
  color:var(--green-dark)
}

.help-dot{
  display:inline-grid;
  place-items:center;
  width:24px;
  height:24px;
  border-radius:50%;
  border:1px solid #aac7b2;
  background:#fff;
  color:var(--green-dark);
  font-weight:700;
  flex:0 0 auto
}

.method-options{
  margin-top:.8rem;
  padding:.8rem;
  background:#f5f8f6;
  border-radius:8px;
  border:1px solid var(--line)
}

.choice{
  display:flex;
  flex-direction:row;
  align-items:flex-start;
  gap:.55rem;
  font-weight:500;
  margin:.3rem 0;
  line-height:1.35
}

.choice input{
  width:auto;
  margin-top:.2rem
}

.result-panel{
  margin-top:1rem;
  border-left:5px solid var(--green);
  background:#f4f8f5;
  padding:1rem;
  border-radius:0 9px 9px 0
}

.result-label{
  display:block;
  font-size:.76rem;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:var(--muted);
  font-weight:700
}

.result-panel>strong{
  display:block;
  font-size:1.35rem;
  margin:.35rem 0 1rem;
  color:#063f18;
  word-break:break-word
}

.metric-list{
  display:grid;
  gap:.5rem;
  margin:0
}

.metric-list div{
  display:flex;
  justify-content:space-between;
  gap:1rem;
  border-top:1px solid #dbe6de;
  padding-top:.48rem
}

.metric-list dt{
  color:var(--muted)
}

.metric-list dd{
  margin:0;
  font-weight:600;
  text-align:right
}

.chart-card{
  margin-top:1rem
}

.chart{
  display:block;
  width:100%;
  min-height:260px;
  background:#fcfdfc;
  border:1px solid #e2e9e4;
  border-radius:10px
}

.legend{
  display:flex;
  flex-wrap:wrap;
  gap:1.2rem;
  margin-top:.75rem;
  color:var(--muted);
  font-size:.87rem
}

.legend span{
  display:flex;
  align-items:center;
  gap:.4rem
}

.dot{
  width:10px;
  height:10px;
  border-radius:50%;
  display:inline-block
}

.dot.included{
  background:var(--orange)
}

.dot.excluded{
  background:#adb5af
}

.line{
  display:inline-block;
  width:25px;
  height:3px;
  background:#000
}

.line.mean{
  background:var(--blue)
}

.line.interval{
  background:var(--green)
}

.line.theory{
  background:var(--green)
}

.line.bounds{
  background:var(--orange)
}

.line.fit{
  background:var(--blue)
}

.rect-key{
  display:inline-block;
  width:18px;
  height:11px;
  background:rgba(5,165,53,.14);
  border:1px solid var(--green)
}

.comparison-card{
  margin-top:1rem
}

.two-column{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1rem
}

.result-a{
  border-top:4px solid var(--blue)
}

.result-b{
  border-top:4px solid var(--orange)
}

.result-equations{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1rem;
  margin-top:.8rem
}

.result-equations strong{
  padding:.9rem;
  background:#f5f8f6;
  border-radius:8px;
  text-align:center;
  font-size:1.2rem
}

.axis-meta{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.7rem;
  margin-bottom:1rem
}

.axis-meta fieldset{
  border:1px solid var(--line);
  border-radius:9px;
  padding:.75rem
}

.axis-meta legend{
  font-weight:700;
  color:var(--green-dark);
  padding:0 .3rem
}

.axis-meta .meta-grid{
  margin:0
}

.section-rule{
  height:1px;
  background:var(--line);
  margin:1rem 0
}

.subheading-row{
  display:flex;
  align-items:center;
  gap:.5rem
}

.subheading-row h4{
  margin:.1rem 0
}

.formula-box{
  font-size:1.25rem;
  font-weight:600;
  background:#f5f8f6;
  border-radius:8px;
  padding:.8rem;
  margin:.6rem 0 1rem;
  text-align:center
}

.line-toggles{
  display:grid;
  grid-template-columns:1fr;
  gap:.25rem
}

.neutral-note{
  color:var(--muted);
  font-size:.86rem;
  margin:.8rem 0 0;
  line-height:1.35
}

footer{
  display:flex;
  justify-content:space-between;
  gap:2rem;
  padding:1.5rem max(2.25rem,calc((100vw - 1480px)/2 + 2.25rem));
  background:#172019;
  color:#d8e1da;
  font-size:.88rem
}

footer a,
footer a:link,
footer a:visited{
  color:#fff !important;
  text-decoration:underline;
  text-underline-offset:2px
}

footer a:hover,
footer a:focus-visible,
footer a:active{
  color:#fff !important
}

dialog{
  border:0;
  border-radius:14px;
  padding:0;
  max-width:min(720px,calc(100vw - 2rem));
  width:100%;
  box-shadow:0 20px 60px rgba(0,0,0,.24)
}

dialog::backdrop{
  background:rgba(12,25,16,.55);
  backdrop-filter:blur(4px)
}

.dialog-card{
  padding:1.3rem
}

.example-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.7rem
}

.example-option{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:.2rem;
  text-align:left;
  border:1px solid var(--line);
  border-radius:9px;
  padding:.9rem;
  background:#fff
}

.example-option:hover{
  border-color:var(--green);
  background:var(--green-soft)
}

.example-option strong{
  color:var(--ink)
}

.example-option span{
  font-size:.86rem;
  color:var(--muted);
  line-height:1.35
}

.help-card{
  max-width:560px
}

.help-card p{
  line-height:1.55;
  color:#3f4b43
}

.help-card .button{
  margin-top:.5rem
}

.toast{
  position:fixed;
  right:1.2rem;
  bottom:1.2rem;
  transform:translateY(150%);
  background:#172019;
  color:#fff;
  padding:.8rem 1rem;
  border-radius:8px;
  box-shadow:var(--shadow);
  transition:transform .22s;
  z-index:50
}

.toast.show{
  transform:translateY(0)
}

.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0
}

@media(max-width:980px){
  .home-grid{
    grid-template-columns:1fr
  }

  .home-tile{
    min-height:220px
  }

  .workbench-grid,
  .two-column{
    grid-template-columns:1fr
  }

  .view-heading{
    align-items:flex-start;
    flex-direction:column;
    gap:.7rem
  }

  .heading-actions{
    width:100%;
    align-items:flex-start;
    justify-content:space-between
  }

  .axis-meta{
    grid-template-columns:1fr
  }

  .axis-meta .meta-grid.three{
    grid-template-columns:repeat(3,1fr)
  }
}

@media(max-width:680px){
  .site-header{
    padding:1rem;
    gap:.75rem;
    align-items:flex-start;
    flex-direction:column
  }

  .fnw-logo{
    width:100%;
    height:55px
  }

  .site-header h1{
    margin:0;
    text-align:left;
    font-size:1.25rem
  }

  .site-header h1 span{
    display:block
  }

  .site-header h1 b{
    display:none
  }

  main{
    padding:1.25rem 1rem 3rem
  }

  .home-view{
    padding:1.4rem 0 3rem
  }

  .home-grid{
    gap:.75rem
  }

  .home-tile{
    min-height:205px;
    padding:1.2rem
  }

  .home-tile h3{
    margin:1.4rem 0 .65rem
  }

  .card{
    padding:1rem
  }

  .card-heading{
    flex-direction:column
  }

  .heading-actions{
    flex-direction:column
  }

  .meta-grid.three,
  .meta-grid.two,
  .axis-meta .meta-grid.three{
    grid-template-columns:1fr
  }

  .under-input{
    align-items:flex-start;
    flex-direction:column
  }

  .under-input span{
    max-width:none
  }

  .import-map,
  #linear-import-map{
    grid-template-columns:1fr
  }

  .action-row.compact{
    width:100%
  }

  .action-row.compact .button{
    flex:1;
    text-align:center
  }

  .slider-field>label{
    grid-template-columns:1fr
  }

  .example-grid{
    grid-template-columns:1fr
  }

  .result-equations{
    grid-template-columns:1fr
  }

  footer{
    padding:1.3rem 1rem;
    flex-direction:column;
    gap:.4rem
  }

  .chart{
    min-height:220px
  }

  .manual-column{
    white-space:normal
  }
}

@media print{
  .site-header,
  footer,
  .action-row,
  .button,
  .text-button,
  .delete-row,
  .manual-column,
  .back-link{
    display:none!important
  }

  body{
    background:#fff
  }

  main{
    padding:0
  }

  .card{
    box-shadow:none;
    break-inside:avoid
  }

  .view:not(.active),
  .home-view:not(.active){
    display:none!important
  }
}