@import url('fonts.css');

/* ============================================================
   Freight Class Finder - "precision instrument" design system
   Concept: a warm paper shipping worksheet with a machined
   steel scale-head bolted onto it. Ink, hairlines, hi-vis
   safety orange. Numbers are the hero.
   ============================================================ */

:root{
  --paper:      #F2EEE4;
  --paper-2:    #E7E2D5;
  --paper-3:    #DCD6C6;
  --ink:        #17150F;
  --ink-2:      #57513F;
  --ink-3:      #8A836D;
  --rule:       #C7BFA9;
  --rule-soft:  rgba(23,21,15,.10);
  --steel:      #1E2328;
  --steel-line: rgba(255,255,255,.10);
  --signal:     #E8500A;
  --signal-2:   #FF7A2F;
  --glow:       rgba(232,80,10,.28);

  --ff-ui:   'Archivo', 'Helvetica Neue', Helvetica, sans-serif;
  --ff-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;

  --gut: clamp(1.25rem, 3.2vw, 2.75rem);
  --maxw: 1180px;
}

@media (prefers-color-scheme: dark){
  :root{
    --paper:#15181B; --paper-2:#1B1F23; --paper-3:#232830;
    --ink:#EDE8DC; --ink-2:#A9A395; --ink-3:#736D5F;
    --rule:#333A42; --rule-soft:rgba(237,232,220,.12);
    --steel:#0E1114;
  }
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--ff-ui); font-size:16px; line-height:1.55;
  font-synthesis-weight:none;
}

/* paper grain */
body::before{
  content:''; position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.045'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}
@media (prefers-color-scheme: dark){ body::before{mix-blend-mode:screen; opacity:.35} }

/* ruler tick strip - instrument framing */
.ticks{
  height:16px; border-bottom:1px solid var(--rule);
  background-image:
    repeating-linear-gradient(90deg, var(--rule) 0 1px, transparent 1px 10px),
    repeating-linear-gradient(90deg, var(--ink-3) 0 1px, transparent 1px 50px);
  background-size:100% 6px, 100% 11px;
  background-position:0 100%, 0 100%;
  background-repeat:repeat-x;
  position:relative; z-index:1;
}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 var(--gut); position:relative; z-index:1}

/* ---------- masthead ---------- */
.masthead{display:flex; align-items:baseline; gap:1rem; flex-wrap:wrap; padding:1.4rem 0 1.1rem; border-bottom:1px solid var(--rule)}
.logo{font-weight:800; letter-spacing:-.03em; font-size:1.06rem; text-transform:uppercase; display:flex; align-items:center; gap:.5rem; text-decoration:none; color:var(--ink)}
.logo .mark{
  width:1.45rem;height:1.45rem;background:var(--signal);flex:none;
  clip-path:polygon(50% 0,100% 27%,100% 73%,50% 100%,0 73%,0 27%);
}
.masthead nav{margin-left:auto; display:flex; gap:1.4rem; flex-wrap:wrap}
.masthead nav a{
  font-size:.78rem; text-transform:uppercase; letter-spacing:.09em; font-weight:600;
  color:var(--ink-2); text-decoration:none; padding-bottom:2px; border-bottom:1px solid transparent;
}
.masthead nav a:hover{color:var(--ink); border-bottom-color:var(--signal)}
.masthead nav a[aria-current="page"]{color:var(--ink); border-bottom-color:var(--signal)}

/* ---------- hero ---------- */
.hero{padding:clamp(2rem,5vw,3.4rem) 0 1.6rem; max-width:58ch}
.eyebrow{
  font-family:var(--ff-mono); font-size:.7rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--signal); font-weight:700; display:flex; align-items:center; gap:.6rem; margin:0 0 .9rem;
}
.eyebrow::after{content:''; height:1px; flex:1; background:var(--rule)}
h1{
  font-size:clamp(2.1rem,5.6vw,3.5rem); line-height:.98; letter-spacing:-.038em;
  font-weight:800; margin:0 0 .85rem; text-wrap:balance;
}
h1 em{font-style:normal; color:var(--signal)}
.lede{font-size:clamp(1rem,1.6vw,1.12rem); color:var(--ink-2); margin:0; text-wrap:pretty}

/* ---------- instrument layout ---------- */
.instrument{
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:0; border:1px solid var(--ink); margin:2rem 0 0;
  box-shadow:6px 6px 0 var(--rule-soft);
}
@media (max-width:880px){ .instrument{grid-template-columns:1fr} }

/* --- input deck --- */
.deck{padding:1.35rem clamp(1rem,2.4vw,1.7rem) 1.5rem; background:var(--paper-2); min-width:0}
.deck-head{display:flex; align-items:center; gap:.7rem; margin-bottom:1.05rem; flex-wrap:wrap}
.deck-head h2{font-size:.76rem; text-transform:uppercase; letter-spacing:.14em; margin:0; font-weight:700}
.deck-head .line{flex:1; height:1px; background:var(--rule); min-width:1rem}

.units{display:flex; gap:.4rem}
.seg{display:inline-flex; border:1px solid var(--ink); background:var(--paper)}
.seg button{
  font-family:var(--ff-mono); font-size:.68rem; font-weight:700; letter-spacing:.06em;
  padding:.3rem .55rem; border:0; background:transparent; color:var(--ink-2); cursor:pointer;
  text-transform:uppercase; transition:background .12s, color .12s;
}
.seg button+button{border-left:1px solid var(--rule)}
.seg button[aria-pressed="true"]{background:var(--ink); color:var(--paper)}

/* rows */
.rows{display:flex; flex-direction:column; gap:.5rem}
.row{
  display:grid; grid-template-columns:2.6rem repeat(3,minmax(0,1fr)) minmax(0,1.25fr) 2.75rem;
  gap:.4rem; align-items:end;
}
.row.labels{margin-bottom:-.15rem}
.row.labels span{
  font-family:var(--ff-mono); font-size:.6rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-3); font-weight:700; padding-left:.1rem;
}
.f{display:flex; flex-direction:column; min-width:0}
.f input{
  font-family:var(--ff-mono); font-size:.95rem; font-weight:700; color:var(--ink);
  background:var(--paper); border:1px solid var(--rule); border-radius:0;
  padding:.5rem; width:100%; min-width:0; text-align:right;
  transition:border-color .12s, box-shadow .12s;
}
.f input:focus{outline:0; border-color:var(--signal); box-shadow:0 0 0 3px var(--glow)}
.f input::placeholder{color:var(--ink-3); font-weight:400}
.f input.bad{border-color:var(--signal); background:color-mix(in srgb, var(--signal) 7%, var(--paper))}
.rm{
  border:1px solid var(--rule); background:var(--paper); color:var(--ink-3);
  font-size:1.05rem; line-height:1; cursor:pointer; height:2.75rem; width:2.75rem;
  display:grid; place-items:center; transition:.12s;
}
.rm:hover{border-color:var(--signal); color:var(--signal)}
.rm[disabled]{opacity:.25; cursor:not-allowed}

/* touch targets + no iOS focus-zoom (inputs must be >=16px there) */
@media (max-width:560px){
  .f input{font-size:1rem; padding:.6rem .45rem}
  .row{grid-template-columns:2.4rem repeat(3,minmax(0,1fr)) minmax(0,1.15fr) 2.75rem}
}

.deck-actions{display:flex; gap:.7rem; align-items:center; margin-top:1.05rem; flex-wrap:wrap}
.btn{
  font-family:var(--ff-ui); font-weight:700; font-size:.76rem; letter-spacing:.1em; text-transform:uppercase;
  padding:.62rem 1.05rem; border:1px solid var(--ink); background:transparent; color:var(--ink);
  cursor:pointer; transition:.14s;
}
.btn:hover{background:var(--ink); color:var(--paper)}
.btn-ghost{border-color:var(--rule); color:var(--ink-2)}
.btn-ghost:hover{background:var(--ink-2); border-color:var(--ink-2); color:var(--paper)}
.hint{font-family:var(--ff-mono); font-size:.66rem; color:var(--ink-3)}

/* --- readout head --- */
.readout{
  background:var(--steel); color:#EFEAE0; padding:1.35rem clamp(1rem,2.4vw,1.6rem) 1.5rem;
  border-left:1px solid var(--ink); position:relative; overflow:hidden; min-width:0;
}
@media (max-width:880px){ .readout{border-left:0; border-top:1px solid var(--ink)} }
.readout::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 3px);
}
.readout > *{position:relative; z-index:1}
.readout-head{
  display:flex; align-items:center; gap:.55rem; margin-bottom:1.15rem;
  font-family:var(--ff-mono); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:#7E8790;
}
.led{width:.45rem;height:.45rem;border-radius:50%;background:var(--signal);box-shadow:0 0 8px var(--signal)}
.led.idle{background:#4A545C; box-shadow:none}

.class-box{text-align:center; padding:.2rem 0 .5rem}
.class-label{font-family:var(--ff-mono); font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; color:#7E8790}
.class-value{
  font-family:var(--ff-mono); font-weight:700; color:var(--signal-2);
  font-size:clamp(3.6rem,10vw,5.4rem); line-height:1.05; letter-spacing:-.045em;
  text-shadow:0 0 34px var(--glow); font-variant-numeric:tabular-nums;
}
.class-value.dim{color:#3C444B; text-shadow:none}
.class-sub{font-family:var(--ff-mono); font-size:.68rem; color:#8B939B; margin-top:.35rem; min-height:2.2em}

.metrics{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--steel-line); margin-top:1.1rem}
.metric{background:var(--steel); padding:.7rem .1rem .75rem; text-align:center}
.metric .k{font-family:var(--ff-mono); font-size:.58rem; letter-spacing:.14em; text-transform:uppercase; color:#7E8790}
.metric .v{font-family:var(--ff-mono); font-weight:700; font-size:1.32rem; color:#EFEAE0; font-variant-numeric:tabular-nums; letter-spacing:-.02em}
.metric .u{font-size:.62rem; color:#7E8790; font-weight:400}

/* --- density ladder (the memorable bit) --- */
.ladder{margin-top:1.2rem; border-top:1px solid var(--steel-line); padding-top:.9rem}
.ladder-head{font-family:var(--ff-mono); font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color:#7E8790; margin-bottom:.5rem}
.tier{
  display:grid; grid-template-columns:.35rem 1fr auto; gap:.6rem; align-items:center;
  padding:.16rem 0; font-family:var(--ff-mono); font-size:.72rem; color:#79828A;
  transition:color .25s;
}
.tier .bar{height:.62rem; background:#333B42; transition:background .3s, box-shadow .3s, transform .3s}
.tier .rng{font-variant-numeric:tabular-nums}
.tier .cls{font-weight:700; font-variant-numeric:tabular-nums; color:#8B939B; transition:color .25s}
.tier.on{color:#EFEAE0}
.tier.on .bar{background:var(--signal); box-shadow:0 0 10px var(--glow); transform:scaleY(1.55)}
.tier.on .cls{color:var(--signal-2)}

/* ---------- prose / content ---------- */
.cols{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(1.6rem,4vw,3.2rem); margin:3.2rem 0 0}
@media (max-width:880px){ .cols{grid-template-columns:1fr} }
.prose h2{font-size:1.42rem; letter-spacing:-.02em; font-weight:800; margin:0 0 .6rem}
.prose h3{font-size:1rem; letter-spacing:-.01em; font-weight:700; margin:1.6rem 0 .4rem}
.prose p{color:var(--ink-2); margin:0 0 .9rem; max-width:66ch}
.prose ul{color:var(--ink-2); margin:0 0 .9rem; padding-left:1.1rem}
.prose li{margin-bottom:.35rem}
.prose a{color:var(--ink); text-decoration-color:var(--signal); text-underline-offset:3px}
.prose code{font-family:var(--ff-mono); font-size:.86em; background:var(--paper-3); padding:.1em .35em}

.note{
  border-left:3px solid var(--signal); background:var(--paper-2);
  padding:.85rem 1rem; margin:1.4rem 0; font-size:.92rem; color:var(--ink-2);
}
.note strong{color:var(--ink)}

/* data table */
.table-wrap{overflow-x:auto; margin:1.2rem 0}
table{border-collapse:collapse; width:100%; font-family:var(--ff-mono); font-size:.82rem; min-width:340px}
th,td{text-align:left; padding:.5rem .7rem; border-bottom:1px solid var(--rule)}
th{font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); font-weight:700; border-bottom-color:var(--ink)}
td:last-child,th:last-child{text-align:right; font-weight:700}
tbody tr:hover{background:var(--paper-2)}

/* faq */
details{border-bottom:1px solid var(--rule); padding:.75rem 0}
details summary{cursor:pointer; font-weight:700; font-size:.95rem; list-style:none; display:flex; gap:.7rem; align-items:baseline}
details summary::-webkit-details-marker{display:none}
details summary::before{content:'+'; color:var(--signal); font-family:var(--ff-mono); font-weight:700}
details[open] summary::before{content:'\2212'}
details p{margin:.6rem 0 .2rem 1.4rem; color:var(--ink-2); font-size:.93rem}

/* footer */
footer{margin-top:4rem; border-top:1px solid var(--rule); padding:1.5rem 0 3rem; font-size:.8rem; color:var(--ink-3)}
footer .frow{display:flex; gap:1.4rem; flex-wrap:wrap; align-items:baseline}
footer a{color:var(--ink-2); text-decoration:none}
footer a:hover{color:var(--signal)}
footer .stamp{margin-left:auto; font-family:var(--ff-mono); font-size:.68rem; letter-spacing:.06em}

/* entrance */
@media (prefers-reduced-motion:no-preference){
  .rise{animation:rise .6s cubic-bezier(.2,.7,.3,1) both}
  .rise:nth-child(1){animation-delay:.02s}
  .rise:nth-child(2){animation-delay:.09s}
  .rise:nth-child(3){animation-delay:.16s}
  @keyframes rise{from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:none}}
}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}