/* ============================================================
   FRACS.IO — FRAC IT, the estimator bar.
   Layers on css/styles.css: styles.css FIRST, then this file. It reads the
   palette tokens, the three type families and the .sr-only helper from
   there, and adds nothing to it. Everything here is prefixed .fi- and
   cannot collide with the site or with css/landing.css.

   ------------------------------------------------------------
   CONTRAST — measured, not inherited from the token names.
   Every ratio below was computed from the hex pairs, then re-read off
   getComputedStyle in Chrome. The house rule at the head of styles.css
   holds: bright --red for display type only, --red-dark wherever small
   text is involved. Two consequences worth stating, because both are
   places the obvious choice fails:

   · --muted #847a69 is NOT used anywhere in this file. It measures
     3.95:1 on --paper and 3.56:1 on --cream, so at the 11-13px sizes
     this component wants it misses the 4.5:1 bar. Every small label
     here is --body #4c4438 instead: 8.96:1 on paper, 8.08:1 on cream.
   · the focus ring is a SOLID --red, not a translucent one. The
     rgba(224,58,38,.4) ring in landing.css composites to #eda297 on
     cream and measures 1.73:1, under the 3:1 bar that 1.4.11 sets for
     a focus indicator. Solid --red on cream is 3.69:1 and clears it.

   Full table:
     --ink   #161310 on --paper        17.30:1   input text, row values
     --body  #4c4438 on --paper         8.96:1   .fi-say, row labels
     --body  #4c4438 on --cream         8.08:1   .fi-lab, .fi-hint
     --cream #f1ebe0 on --red-dark      4.86:1   the submit button, 13px
     --cream #f1ebe0 on --ink          15.60:1   button and chip hover
     --red-dark #bf2f1d on --paper      5.39:1   .fi-stamp 11px, links
     --red   #e03a26 on --paper         4.09:1   .fi-num only, 46px, 3:1 bar
     #7a7060 placeholder on --paper     4.55:1   darkened from #b3a892 (2.20:1)
     --red   #e03a26 ring on --cream    3.69:1   non-text, 3:1 bar
     --red   #e03a26 ring on --paper    4.09:1   non-text, 3:1 bar
     --ink   #161310 border on --cream 15.60:1   non-text, 3:1 bar
   ============================================================ */

/* text-align:left is load-bearing, not a default being restated. The index
   hero is .hero{text-align:center}, and this component sits inside it — every
   label, row and paragraph in here would inherit that centring otherwise. */
.fi{max-width:640px;text-align:left}
.fi--center{margin-left:auto;margin-right:auto}

/* ---- mount points ------------------------------------------
   One modifier per place the component is mounted, each reproducing the
   spacing of the box it replaced so the swap moves nothing else on the page:
     --hero     was .try           in css/styles.css   margin:44px auto 0
     --lp       was .lp-hero .try  in css/landing.css  margin:46px 0 0, 620px
     --section  new, for credits.html under the size table
   The two inherited values are copied rather than referenced because both of
   those files own the old box, and this file is not allowed to reach into
   them. If either changes, these change with it. */
.fi--hero{margin:44px auto 0}
.fi--section{margin:36px 0 0}
.fi--lp{margin:46px 0 0;max-width:620px}
.fi--lp .fi-bar input{font-size:16.5px;padding:21px 20px}
.fi--lp .fi-bar button{font-size:14px;padding:0 34px}
.fi--lp .fi-hint{letter-spacing:.16em}

/* ---- the bar ------------------------------------------------
   The search-bar idea in the site's own vocabulary: paper, one ink
   keyline, one hard offset shadow. No rounded field, no drop shadow
   blur, no magnifying glass. */
.fi-lab{display:block;margin:0 0 12px;font-size:11px;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--body)}
.fi-lab i{font-family:var(--serif);font-style:italic;font-size:1.35em;
  letter-spacing:0;text-transform:none;color:var(--red-dark)}

.fi-bar{display:flex;background:var(--paper);border:1.5px solid var(--ink);
  box-shadow:6px 6px 0 var(--ink)}
.fi-bar input{flex:1;min-width:0;border:none;outline:none;background:transparent;
  font:inherit;font-size:16px;color:var(--ink);padding:19px 20px}
/* #7a7060, not the site's #b3a892: that measures 2.20:1 on paper. The
   visible .fi-lab above carries the label, so the placeholder is an
   example rather than the only thing naming the field. */
.fi-bar input::placeholder{color:#7a7060;opacity:1}
/* The transform transition and will-change are what the magnetic-button
   effect in js/main.js animates against. styles.css line 331 grants them to
   .tryb button; this button replaced it in that selector list, so it needs
   them here or the nudge on hover becomes a jump. */
.fi-bar button{flex:none;border:none;border-left:1.5px solid var(--ink);cursor:pointer;
  background:var(--red-dark);color:var(--cream);font-family:var(--bomb);font-size:13px;
  letter-spacing:.1em;text-transform:uppercase;padding:0 28px;will-change:transform;
  transition:transform .25s cubic-bezier(.16,1,.3,1),background .15s,color .15s}
.fi-bar button:hover{background:var(--ink)}

/* the ring lives on the wrapper, the pattern landing.css set for this
   field — but solid, for the reason in the header comment */
.fi-bar input:focus-visible{outline:none}
.fi-bar:focus-within{box-shadow:6px 6px 0 var(--ink),0 0 0 3px var(--red)}

.fi-hint{margin:15px 0 0;font-size:11.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--body)}

/* ---- the examples ---- */
.fi-eg{margin:22px 0 0}
.fi-eg>span{display:block;margin:0 0 10px;font-size:10.5px;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--body)}
.fi-chips{display:flex;flex-wrap:wrap;gap:9px}
.fi-chip{font:inherit;font-size:13.5px;color:var(--ink);background:transparent;
  border:1.5px solid var(--ink);border-radius:99px;padding:9px 17px;cursor:pointer;
  transition:background .12s,color .12s}
.fi-chip:hover{background:var(--ink);color:var(--cream)}

/* ---- the answer --------------------------------------------
   [data-fracit-out] is the live region and carries no box of its own:
   empty, it has no height, and only its contents are ever replaced. */
.fi-out{margin:0}
.fi-card{margin:26px 0 0;background:var(--paper);border:1.5px solid var(--ink);
  box-shadow:6px 6px 0 var(--ink);padding:28px 30px 24px}
/* the answer with no number in it — dashed and unshadowed on purpose,
   so an estimate and an invitation to talk never look alike */
.fi-card--open{border-style:dashed;box-shadow:none}

.fi-stamp{margin:0 0 14px;font-size:11px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--red-dark)}

.fi-verdict{display:flex;align-items:baseline;justify-content:space-between;
  gap:12px 26px;flex-wrap:wrap;border-bottom:1.5px solid var(--ink);padding-bottom:16px}
.fi-kind{margin:0;font-family:var(--serif);font-weight:400;font-size:31px;
  line-height:1.05;color:var(--ink)}
/* the one bright-tomato element. 46px is large text, so its 4.09:1 on
   paper is held to the 3:1 bar; the unit beside it is 13px and --ink. */
.fi-num{margin:0;font-family:var(--bomb);font-size:46px;line-height:1;
  letter-spacing:-.01em;color:var(--red);white-space:nowrap;font-variant-numeric:tabular-nums}
.fi-num span{font-family:var(--sans);font-weight:500;font-size:13px;
  letter-spacing:.01em;color:var(--ink)}
/* the answers with no number in them. 30px is over the 24px large-text
   threshold, so --red's 4.09:1 on paper is held to the 3:1 bar, same as
   the numeral it stands in for. */
.fi-num--word{font-family:var(--serif);font-style:italic;font-size:30px;
  letter-spacing:0;color:var(--red)}

.fi-echo{margin:16px 0 0;font-size:13px;color:var(--body)}
.fi-echo i{font-family:var(--serif);font-style:italic;font-size:1.15em;color:var(--ink)}

.fi-say{margin:14px 0 0;font-size:16px;line-height:1.6;color:var(--body);max-width:58ch}
.fi-say b{color:var(--ink);font-weight:600}

/* ---- the breakdown ---- */
.fi-rowhead{margin:24px 0 0;font-size:10.5px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--body)}
.fi-rows{margin:18px 0 0;border-top:1px solid var(--line)}
.fi-rows div{display:flex;gap:16px 24px;justify-content:space-between;align-items:baseline;
  padding:12px 0;border-bottom:1px solid var(--line)}
.fi-rows div:last-child{border-bottom:none}
.fi-rows dt{font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--body);flex:none;max-width:52%}
.fi-rows dd{margin:0;font-size:15px;color:var(--ink);text-align:right;
  font-variant-numeric:tabular-nums}

/* ---- what to do next ---- */
.fi-next{display:flex;flex-wrap:wrap;gap:14px 20px;align-items:center;margin:24px 0 0}
.fi-send{background:var(--red-dark);color:var(--cream);font-family:var(--bomb);font-size:12.5px;
  letter-spacing:.12em;text-transform:uppercase;padding:15px 26px;border-radius:99px;
  text-decoration:none;transition:background .15s,color .15s}
.fi-send:hover{background:var(--ink);color:var(--cream)}
.fi-read{font-size:13px;font-weight:600;color:var(--red-dark);text-decoration:none;
  border-bottom:2px solid var(--red-dark);padding-bottom:1px}
.fi-read:hover{color:var(--ink);border-color:var(--ink)}

.fi-tag{margin:20px 0 0;font-family:var(--serif);font-style:italic;font-size:16px;
  color:var(--red-dark)}

/* ---- narrow ------------------------------------------------
   The bar stays one row: the input carries min-width:0 so it gives way
   instead of pushing the page wide, which is the failure this file has
   to avoid at 390px. */
@media(max-width:640px){
  .fi-bar input{font-size:16px;padding:17px 15px}   /* 16px floor: iOS zooms below it */
  .fi-bar button{font-size:12px;padding:0 17px;letter-spacing:.06em}
  .fi--lp .fi-bar input{font-size:16px;padding:18px 15px}
  .fi--lp .fi-bar button{font-size:12.5px;padding:0 18px}
  .fi-card{padding:24px 20px 20px;box-shadow:5px 5px 0 var(--ink)}
  .fi-kind{font-size:27px}
  .fi-num{font-size:40px}
  .fi-rows div{flex-direction:column;gap:5px;align-items:flex-start}
  .fi-rows dt{max-width:none}
  .fi-rows dd{text-align:left}
  .fi-next{gap:12px 16px}
  .fi-send{padding:14px 22px}
}

/* ---- motion -----------------------------------------------
   One short fade on the answer, and nothing else moves. styles.css has a
   global reduced-motion block, but this file is restated so it holds on
   its own if it is ever loaded without it. */
.fi-card{animation:fi-rise .3s cubic-bezier(.16,1,.3,1) both}
@keyframes fi-rise{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion: reduce){
  .fi-card{animation:none}
  .fi-bar button,.fi-chip,.fi-send,.fi-read{transition:none}
}


/* ============================================================
   TYPE SCALE — onto the shared scale defined at the foot of styles.css.
   Evidence: fracsio-source-assets/docs/type-and-space-audit.md

   This file loads after styles.css, so its own values won over the scale
   there and it had to be brought on explicitly. Six of its labels were in
   the 10.5-11.5px band the founder was reading as unreadable subtext.
   ============================================================ */
.fi-lab,.fi-hint,.fi-eg>span,.fi-stamp,.fi-rowhead,.fi-rows dt,
.fi-send,.fi-read{font-size:var(--fs-micro)}
.fi-lab i{font-size:var(--fs-fine)}          /* was 1.35em of 11px = 14.85 */
.fi-echo,.fi-num span{font-size:var(--fs-fine)}
.fi-echo i{font-size:var(--fs-small)}        /* 14 -> next step */
.fi-chip,.fi-rows dd{font-size:var(--fs-small)}
.fi-say,.fi-tag,.fi-bar input{font-size:var(--fs-base)}
.fi-kind{font-size:var(--fs-display)}        /* was 31px */
.fi-num--word{font-size:var(--fs-display)}   /* was 30px */
.fi-say{max-width:52ch}                      /* ch runs ~18% loose in Archivo */
/* .fi-bar button joins the shared button size; --fs-micro on a filled
   --red-dark pill measures 4.86:1 for cream, unchanged from 13px. */
.fi-bar button,.fi--lp .fi-bar button{font-size:var(--fs-micro)}
.fi--lp .fi-bar input{font-size:var(--fs-base)}
@media(max-width:560px){
  /* the 16px iOS-zoom floor is what this override existed to hold; --fs-base
     is 17px, so it holds it without a second value */
  .fi-bar input,.fi--lp .fi-bar input{font-size:var(--fs-base)}
  .fi-bar button,.fi--lp .fi-bar button{font-size:var(--fs-micro)}
  .fi-kind{font-size:var(--fs-figure)}
  .fi-num{font-size:46px}
}