/* =================================================================
   Flooring Correct — tools.v1.css
   Styles for the /tools/ pages only (calculator, floor finder, hub).
   WRITE-ONCE like every versioned asset on this site: /css/* is served
   immutable for a year. Any change ships tools.v2.css and repoints the
   three tools pages. Never edit this file after deploy.
   All colors come from the fc.v4.css tokens.
   ================================================================= */

/* ---------- shared shells ---------- */
/* The hidden ATTRIBUTE must beat our own display rules. A class selector like
   .tl-grid{display:grid} outranks the browser's [hidden]{display:none}, which
   left the L shape fields on screen in rectangle mode with hidden="" set. Any
   panel these tools toggle by attribute is covered here, scoped so the site's
   own chrome keeps its existing behavior. */
#tlCalc [hidden],.tl-quiz [hidden]{display:none!important}

.tl-shell{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r);
  box-shadow:var(--sh-2);padding:clamp(20px,3vw,36px);margin-top:26px}
.tl-note{font-size:var(--fs-sm);color:var(--ink-mid);line-height:1.55;margin-top:10px}
.tl-note a{color:var(--brass-dk);text-decoration:underline;text-underline-offset:2px}

/* ---------- calculator rooms ---------- */
.tl-rooms{display:flex;flex-direction:column;gap:14px}
.tl-room{border:1px solid var(--hairline);border-radius:var(--r-sm);background:var(--parchment);
  padding:16px 16px 14px;position:relative}
.tl-room-head{display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.tl-room-head input[type="text"]{flex:1 1 160px;min-width:0}
.tl-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.tl-grid-l2{margin-top:10px}
.tl-cell label{display:block;font-size:var(--fs-eyebrow);letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-mid);font-weight:700;margin-bottom:5px;font-family:var(--ui)}
.tl-cell input,.tl-room-head input,.tl-inline input,.tl-inline select{width:100%;border:1px solid var(--hairline);
  border-radius:8px;background:var(--surface);color:var(--ink);font:500 var(--fs-ui) var(--ui);
  padding:11px 12px;min-height:44px}
.tl-cell input:focus-visible,.tl-room-head input:focus-visible,.tl-inline input:focus-visible,
.tl-inline select:focus-visible,.tl-chip:focus-visible,.tl-x:focus-visible,.tl-add:focus-visible,
.tl-act:focus-visible,.tl-opt:focus-visible,.tl-backbtn:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
.tl-x{position:absolute;top:10px;right:10px;background:none;border:0;color:var(--ink-mid);
  font-size:19px;line-height:1;padding:10px;min-width:44px;min-height:44px;cursor:pointer;border-radius:8px}
.tl-x:hover{color:var(--navy);background:rgba(19,41,61,.06)}
.tl-add{display:inline-flex;align-items:center;gap:8px;margin-top:14px;border:1px dashed var(--brass);
  color:var(--brass-dk);background:none;border-radius:10px;padding:11px 18px;min-height:44px;
  font:700 var(--fs-ui) var(--ui);cursor:pointer}
.tl-add:hover{background:rgba(192,138,62,.08)}
.tl-mode{display:flex;gap:6px;flex-wrap:wrap}
.tl-mode button{border:1px solid var(--hairline);background:var(--surface);color:var(--ink-mid);
  border-radius:999px;padding:8px 13px;min-height:38px;font:700 var(--fs-xs) var(--ui);cursor:pointer}
.tl-mode button[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:var(--plaster)}

/* ---------- waste + stairs + extras ---------- */
.tl-block{margin-top:26px;padding-top:22px;border-top:1px solid var(--hairline)}
.tl-block>h3{font-family:var(--display);font-size:var(--fs-h3);color:var(--navy);margin:0 0 4px}
.tl-block>p{margin:0 0 12px;color:var(--ink-mid);font-size:var(--fs-ui);line-height:1.55}
.tl-chips{display:flex;gap:8px;flex-wrap:wrap}
.tl-chip{border:1px solid var(--hairline);background:var(--surface);border-radius:12px;
  padding:12px 14px;cursor:pointer;text-align:left;min-height:44px;flex:1 1 190px;font-family:var(--ui)}
.tl-chip b{display:block;font-size:var(--fs-ui);color:var(--navy)}
.tl-chip small{display:block;font-size:var(--fs-xs);color:var(--ink-mid);margin-top:2px;line-height:1.4}
.tl-chip[aria-pressed="true"]{border-color:var(--brass);background:rgba(192,138,62,.09);
  box-shadow:inset 0 0 0 1px var(--brass)}
.tl-inline{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end}
.tl-inline .tl-cell{flex:1 1 130px;max-width:190px}
.tl-switch{display:inline-flex;align-items:center;gap:10px;font:600 var(--fs-ui) var(--ui);
  color:var(--ink);cursor:pointer;min-height:44px}
.tl-switch input{width:20px;height:20px;accent-color:var(--brass)}

/* ---------- results ---------- */
.tl-results{background:var(--navy-dk);color:var(--on-navy);border-radius:var(--r);
  padding:clamp(20px,3vw,32px);margin-top:26px;position:relative;overflow:hidden}
.tl-results::after{content:"";position:absolute;inset:auto -60px -60px auto;width:220px;height:220px;
  border-radius:50%;background:radial-gradient(circle,rgba(192,138,62,.22),transparent 70%);pointer-events:none}
.tl-results h3{font-family:var(--display);color:var(--plaster);font-size:var(--fs-h3);margin:0 0 14px}
.tl-figs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.tl-fig{background:rgba(255,255,255,.05);border:1px solid rgba(221,229,236,.14);border-radius:var(--r-sm);
  padding:14px 16px}
.tl-fig b{display:block;font-family:var(--display);font-size:clamp(26px,2.6vw,38px);color:var(--gold);line-height:1.1}
.tl-fig span{display:block;font-size:var(--fs-xs);color:var(--on-navy-mid);margin-top:4px;line-height:1.4}
.tl-breakdown{width:100%;border-collapse:collapse;margin-top:18px;font-size:var(--fs-sm)}
.tl-breakdown th{font-family:var(--ui);font-size:var(--fs-eyebrow);letter-spacing:.06em;text-transform:uppercase;
  color:var(--on-navy-mid);text-align:left;padding:7px 10px;border-bottom:1px solid rgba(221,229,236,.18)}
.tl-breakdown td{padding:8px 10px;border-bottom:1px solid rgba(221,229,236,.09);color:var(--on-navy)}
.tl-breakdown td:last-child,.tl-breakdown th:last-child{text-align:right;white-space:nowrap}
.tl-breakdown td:nth-child(2){color:var(--on-navy-mid)}
.tl-acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.tl-act{border:1px solid rgba(221,229,236,.3);background:none;color:var(--plaster);border-radius:10px;
  padding:12px 18px;min-height:44px;font:700 var(--fs-ui) var(--ui);cursor:pointer}
.tl-act:hover{border-color:var(--gold);color:var(--gold)}
.tl-act--gold{background:var(--brass);border-color:var(--brass);color:#fff}
.tl-act--gold:hover{background:var(--brass-dk);border-color:var(--brass-dk);color:#fff}
.tl-sent{font-size:var(--fs-sm);color:var(--gold);margin-top:10px;display:none}
.tl-sent.on{display:block}

/* ---------- quiz ---------- */
.tl-quiz{max-width:760px;margin:26px auto 0}
.tl-bar{height:6px;border-radius:999px;background:var(--parchment);border:1px solid var(--hairline);overflow:hidden}
.tl-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--brass),var(--gold));
  transition:width .35s var(--ease)}
.tl-step{font-size:var(--fs-eyebrow);letter-spacing:.08em;text-transform:uppercase;font-weight:700;
  color:var(--ink-mid);margin:16px 0 6px;font-family:var(--ui)}
.tl-q{font-family:var(--display);font-size:clamp(24px,2.6vw,34px);color:var(--navy);margin:0 0 6px;line-height:1.15}
.tl-qsub{color:var(--ink-mid);font-size:var(--fs-ui);line-height:1.55;margin:0 0 18px}
.tl-opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.tl-opt{border:1px solid var(--hairline);background:var(--surface);border-radius:12px;padding:16px;
  text-align:left;cursor:pointer;min-height:64px;font-family:var(--ui);transition:border-color .15s,box-shadow .15s}
.tl-opt:hover{border-color:var(--brass);box-shadow:var(--sh-1)}
.tl-opt b{display:block;font-size:var(--fs-ui);color:var(--navy)}
.tl-opt small{display:block;font-size:var(--fs-xs);color:var(--ink-mid);margin-top:3px;line-height:1.45}
.tl-backbtn{background:none;border:0;color:var(--ink-mid);font:700 var(--fs-sm) var(--ui);cursor:pointer;
  padding:10px 0;min-height:44px;margin-top:8px;text-decoration:underline;text-underline-offset:3px}
.tl-backbtn:hover{color:var(--navy)}
.tl-reveal{animation:tlIn .34s var(--ease) both}
@keyframes tlIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* quiz results */
.tl-podium{display:flex;flex-direction:column;gap:14px;margin-top:18px}
.tl-pick{border:1px solid var(--hairline);border-radius:var(--r);background:var(--surface);
  box-shadow:var(--sh-1);padding:20px;position:relative}
.tl-pick--top{border-color:var(--brass);box-shadow:var(--sh-2)}
.tl-rank{display:inline-block;font:700 var(--fs-eyebrow) var(--ui);letter-spacing:.07em;text-transform:uppercase;
  color:var(--brass-dk);background:rgba(192,138,62,.12);border-radius:999px;padding:5px 11px;margin-bottom:8px}
.tl-pick h3{font-family:var(--display);font-size:var(--fs-h3);color:var(--navy);margin:0 0 8px}
.tl-why{margin:0 0 12px;padding-left:18px;color:var(--ink);font-size:var(--fs-ui);line-height:1.6}
.tl-why li{margin-bottom:4px}
.tl-links{display:flex;gap:8px;flex-wrap:wrap}
.tl-links a,.tl-links button{display:inline-flex;align-items:center;border:1px solid var(--hairline);
  border-radius:999px;background:var(--parchment);color:var(--navy);font:700 var(--fs-xs) var(--ui);
  padding:9px 14px;min-height:38px;text-decoration:none;cursor:pointer}
.tl-links a:hover,.tl-links button:hover{border-color:var(--brass);color:var(--brass-dk)}

/* ---------- hub cards ---------- */
.tl-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:26px}
.tl-card{display:flex;flex-direction:column;border:1px solid var(--hairline);border-radius:var(--r);
  background:var(--surface);box-shadow:var(--sh-1);overflow:hidden;text-decoration:none;
  transition:box-shadow .2s var(--ease),transform .2s var(--ease)}
.tl-card:hover{box-shadow:var(--sh-2);transform:translateY(-3px)}
.tl-card-strip{height:120px;background:var(--navy-dk);position:relative;overflow:hidden}
.tl-card-strip img{width:100%;height:100%;object-fit:cover;opacity:.6}
.tl-card-strip::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,27,42,.1),rgba(12,27,42,.65))}
.tl-card-tag{position:absolute;left:16px;bottom:12px;z-index:1;color:var(--gold);
  font:700 var(--fs-eyebrow) var(--ui);letter-spacing:.08em;text-transform:uppercase}
.tl-card-body{padding:20px 20px 22px;display:flex;flex-direction:column;gap:8px;flex:1}
.tl-card-body h2{font-family:var(--display);font-size:var(--fs-h3);color:var(--navy);margin:0}
.tl-card-body p{margin:0;color:var(--ink-mid);font-size:var(--fs-ui);line-height:1.55;flex:1}
.tl-card-go{color:var(--brass-dk);font:700 var(--fs-ui) var(--ui)}

/* ---------- responsive ---------- */
@media (max-width:860px){
  .tl-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tl-figs{grid-template-columns:1fr;gap:10px}
  .tl-cards{grid-template-columns:1fr}
}
@media (max-width:560px){
  .tl-opts{grid-template-columns:1fr}
  .tl-inline .tl-cell{max-width:none}
  .tl-breakdown{font-size:var(--fs-xs)}
  .tl-breakdown th,.tl-breakdown td{padding:8px 4px}
  .tl-breakdown th:first-child,.tl-breakdown td:first-child{padding-left:0}
  .tl-breakdown th:last-child,.tl-breakdown td:last-child{padding-right:0}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .tl-reveal{animation:none}
  .tl-bar i{transition:none}
  .tl-card,.tl-card:hover{transform:none;transition:none}
}

/* ---------- print: a clean take-to-the-showroom sheet ---------- */
@media print{
  .nav,.nav-panel,.nav-scrim,.fc-promo,.callbar,.foot,.est,.faq,.mbd,.tl-acts,
  .phero-cta,.fp-grain,#fp-progress,#fp-cursor,#fp-cursor-dot,.tl-add,.tl-x,.skip{display:none}
  body{background:#fff;color:#000}
  .tl-results{background:#fff;color:#000;border:1px solid #999}
  .tl-results h3,.tl-fig b{color:#000}
  .tl-fig{border:1px solid #bbb;background:#fff}
  .tl-fig span{color:#333}
  .tl-breakdown th{color:#333;border-bottom:1px solid #999}
  .tl-breakdown td{color:#000;border-bottom:1px solid #ddd}
}