/* ---------------- free tools dashboard ---------------- */

.tools{
  display:grid;gap:var(--s-5);
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
}
.tools--locked{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}

.tool{
  background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-card);padding:var(--s-5);
  display:flex;flex-direction:column;
  box-shadow:var(--shadow-card);
  opacity:0;transform:translateY(14px);
  transition:opacity .6s var(--ease-out),transform .6s var(--ease-out),
             border-color .2s var(--ease-out);
}
.tool.is-in{opacity:1;transform:none}
.tool:hover{border-color:var(--line-strong)}

.tool__top{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);margin-bottom:var(--s-4)}
.tool__icon{
  display:inline-grid;place-items:center;width:38px;height:38px;
  border-radius:10px;background:var(--blue-soft);color:var(--blue);flex:none;
}
.tool__icon .ic{width:19px;height:19px}
.tool__meta{font-size:.75rem;color:var(--ink-3);white-space:nowrap}
.tool__meta--live{
  display:inline-flex;align-items:center;gap:6px;
  color:var(--ok);font-weight:600;
}
.tool__meta--live .ic{width:13px;height:13px}

.tool h3{
  font-family:var(--font-display);font-weight:700;
  font-size:1.125rem;letter-spacing:-0.01em;margin:0 0 var(--s-2);color:var(--ink);
}
.tool p{margin:0 0 var(--s-4);color:var(--ink-2);font-size:.9375rem;line-height:1.55}
.tool__note{margin:var(--s-3) 0 0;font-size:.75rem;color:var(--ink-3)}

/* --- the two live calculators --- */
.calc{display:grid;gap:var(--s-3);grid-template-columns:1fr 1fr;margin-bottom:var(--s-4)}
.field{display:flex;flex-direction:column;gap:6px}
.field--wide{grid-column:1/-1}
.field > span{font-size:.75rem;color:var(--ink-3);line-height:1.3}
.field input{
  font:inherit;font-size:.9375rem;color:var(--ink);
  padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-input);
  background:var(--paper);width:100%;
  transition:border-color .18s var(--ease-out),box-shadow .18s var(--ease-out);
}
.field input:focus-visible{
  outline:none;border-color:var(--blue);
  box-shadow:0 0 0 3px var(--blue-soft);
}

.calc__out{display:block;margin-top:auto;padding-top:var(--s-4);border-top:1px solid var(--line)}
.calc__figure{display:flex;align-items:baseline;gap:var(--s-2);flex-wrap:wrap}
.calc__figure b{
  font-family:var(--font-display);font-weight:700;line-height:1;
  font-size:clamp(1.75rem,1.2rem + 2vw,2.5rem);
  letter-spacing:-0.03em;color:var(--blue);
  font-variant-numeric:tabular-nums;
}
.calc__figure span{font-size:.8125rem;color:var(--ink-3)}
.calc__split{display:flex;gap:var(--s-5);margin-top:var(--s-3);flex-wrap:wrap}
.calc__split span{font-size:.8125rem;color:var(--ink-3)}
.calc__split b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}

/* --- the gate --- */
.gatewrap{position:relative}
.gatewrap[data-locked="true"] [data-gate-blur]{
  filter:blur(7px) saturate(.75);
  transform:scale(.995);
  pointer-events:none;user-select:none;
}
[data-gate-blur]{transition:filter .5s var(--ease-out),transform .5s var(--ease-out)}
.gatewrap[data-locked="true"] [data-gate-blur] .tool{opacity:1;transform:none}

.gate{
  position:absolute;inset:0;display:grid;place-items:center;
  padding:var(--s-5);z-index:2;
}
.gatewrap[data-locked="false"] .gate{
  opacity:0;pointer-events:none;transform:translateY(8px);
  transition:opacity .4s var(--ease-out),transform .4s var(--ease-out);
}
.gate__card{
  background:var(--paper);border:1px solid var(--line-strong);
  border-radius:var(--r-card);padding:var(--s-6);
  max-width:440px;width:100%;text-align:center;
  box-shadow:var(--shadow-float);
}
.gate__icon{
  display:inline-grid;place-items:center;width:44px;height:44px;
  border-radius:12px;background:var(--blue);color:var(--on-blue);margin-bottom:var(--s-4);
}
.gate__icon .ic{width:22px;height:22px}
.gate__card h3{
  font-family:var(--font-display);font-weight:700;font-size:1.375rem;
  letter-spacing:-0.02em;margin:0 0 var(--s-3);color:var(--ink);
}
.gate__card > p{margin:0 0 var(--s-5);color:var(--ink-2);font-size:.9375rem;line-height:1.55}
.gate__form{display:grid;gap:var(--s-3)}
.gate__form .btn{width:100%;justify-content:center}
.gate__fine{margin:var(--s-4) 0 0;font-size:.75rem;color:var(--ink-3);line-height:1.5}

/* placeholder bars behind the blur */
.tool__fake{display:grid;gap:8px;margin-top:auto;padding-top:var(--s-4);border-top:1px solid var(--line)}
.tool__bar{display:block;height:8px;border-radius:999px;background:var(--paper-3);overflow:hidden}
.tool__bar i{display:block;height:100%;background:var(--blue-soft)}

.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:560px){
  .calc{grid-template-columns:1fr}
  .gate__card{padding:var(--s-5)}
}
@media (prefers-reduced-motion:reduce){
  .tool{opacity:1;transform:none;transition:none}
  [data-gate-blur]{transition:none}
}

/* ---------- pick one tool, the rest are add-ons ---------- */
.chooser, .addon { margin-top: var(--s-6); }
.chooser__card, .addon__card {
  background: var(--paper); border: 1px solid var(--line-strong);
  border-radius: var(--r-card); padding: var(--s-6);
  box-shadow: var(--shadow-card); max-width: 860px;
}
.addon__card { background: var(--blue-deep); border-color: var(--blue-deep); color: var(--on-blue); }
.addon__card .label { color: var(--on-blue-muted); }
.chooser__card h3, .addon__card h3 {
  font-family: var(--font-display); font-weight: 700; font-size: 1.375rem;
  letter-spacing: -0.02em; margin: 0 0 var(--s-3);
}
.addon__card h3 { color: var(--on-blue); }
.chooser__card > p { margin: 0 0 var(--s-5); color: var(--ink-2); line-height: 1.6; }
.addon__card > p { margin: 0 0 var(--s-5); color: var(--on-blue-muted); line-height: 1.65; }
.addon__acts { display: flex; gap: var(--s-3); flex-wrap: wrap; }

.chooser__grid { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.pick {
  font: inherit; text-align: left; cursor: pointer;
  display: grid; gap: 6px; padding: var(--s-4);
  border: 1px solid var(--line); border-radius: var(--r-card); background: var(--paper);
  transition: border-color .18s var(--ease-out), background-color .18s var(--ease-out), transform .12s var(--ease-out);
}
.pick:hover { border-color: var(--blue); background: var(--blue-soft); }
.pick:active { transform: scale(.99); }
.pick__icon {
  display: inline-grid; place-items: center; width: 34px; height: 34px;
  border-radius: 9px; background: var(--blue-soft); color: var(--blue); margin-bottom: 2px;
}
.pick b { font-size: .9375rem; color: var(--ink); }
.pick__txt { font-size: .8125rem; color: var(--ink-3); line-height: 1.45; }

/* the one they kept, and the ones they did not */
.tool--app.is-mine { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue), var(--shadow-card); }
.tool--app.is-addon { opacity: .82; }
.tool--app.is-addon .tool__open { color: var(--ink-3); }
.tool--app.is-mine .tool__meta::after { content: " · yours"; color: var(--blue); font-weight: 600; }