/* ═══════════════════════════════════════════════════════════
   O9 MARKET — FREE TOOLS
   Uses only the locked design tokens from css/style.css.
   No new colours, no new fonts. Prefix: .t-
   ═══════════════════════════════════════════════════════════ */

/* ── tool hub grid ── */
.t-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; }
.t-card { display: flex; flex-direction: column; padding: 26px 24px; text-decoration: none; height: 100%; }
.t-card .icon { margin-bottom: 16px; }
.t-card h3 { margin-bottom: 8px; font-size: 19px; }
.t-card p { flex: 1; }
.t-badge { display: inline-flex; align-items: center; gap: 6px; font-family: "JetBrains Mono", monospace;
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; margin-bottom: 14px; }
.t-badge.free { color: #7ee0a8; background: rgba(77, 224, 152, .1); border: 1px solid rgba(77, 224, 152, .22); }
.t-badge.gated { color: var(--azure); background: rgba(26, 92, 255, .12); border: 1px solid rgba(26, 92, 255, .26); }

/* ── the tool itself ── */
.t-panel { background: var(--glass); border: 1px solid var(--glass-brd); border-radius: var(--r-lg);
  padding: clamp(22px, 3vw, 34px); backdrop-filter: blur(18px); }
.light .t-panel { background: #fff; border-color: rgba(11, 20, 37, .1); box-shadow: 0 20px 50px -28px rgba(11, 20, 37, .28); }
.t-form { display: flex; gap: 12px; flex-wrap: wrap; }
.t-form .t-in { flex: 1; min-width: 240px; }
.t-in { background: rgba(16, 24, 44, .55); border: 1px solid var(--glass-brd); border-radius: var(--r-sm);
  padding: 15px 16px; color: var(--t-dark); font: inherit; font-size: 15px; width: 100%; }
.light .t-in { background: #f7f9ff; border-color: rgba(11, 20, 37, .14); color: var(--t-light); }
.t-in:focus-visible { outline: 2px solid var(--azure); outline-offset: 2px; }
.t-hint { font-size: 13px; color: var(--t-dark-dim); margin-top: 12px; }
.light .t-hint { color: var(--t-light-dim); }

/* ── result ── */
.t-result { margin-top: 30px; display: none; }
.t-result.show { display: block; }
.t-score { display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
  padding: 24px; border-radius: var(--r-md); background: rgba(26, 92, 255, .07); border: 1px solid rgba(26, 92, 255, .18); }
.t-score-n { font-family: "Sora", sans-serif; font-size: 52px; font-weight: 700; line-height: 1; color: var(--cobalt); }
.t-score-n small { font-size: 20px; color: var(--t-dark-dim); font-weight: 600; }
.light .t-score-n small { color: var(--t-light-dim); }
.t-ring { --v: 0; width: 92px; height: 92px; flex: none; border-radius: 50%;
  background: conic-gradient(var(--cobalt) calc(var(--v) * 1%), rgba(188,212,255,.16) 0);
  display: grid; place-items: center; }
.t-ring i { width: 74px; height: 74px; border-radius: 50%; background: var(--ink-2); display: grid; place-items: center;
  font-family: "Sora", sans-serif; font-weight: 700; font-size: 23px; font-style: normal; color: var(--t-dark); }
.light .t-ring i { background: #fff; color: var(--t-light); }

.t-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-top: 22px; }
.t-metric { padding: 16px; border-radius: var(--r-sm); background: rgba(16,24,44,.4); border: 1px solid var(--glass-brd); }
.light .t-metric { background: #f7f9ff; border-color: rgba(11,20,37,.08); }
.t-metric b { display: block; font-family: "JetBrains Mono", monospace; font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--azure); margin-bottom: 7px; font-weight: 500; }
.t-metric span { font-family: "Sora", sans-serif; font-weight: 600; font-size: 19px; }

.t-issues { margin-top: 26px; display: flex; flex-direction: column; gap: 12px; }
.t-issue { display: flex; gap: 14px; padding: 16px 18px; border-radius: var(--r-sm);
  background: rgba(16,24,44,.4); border: 1px solid var(--glass-brd); border-left-width: 3px; }
.light .t-issue { background: #f7f9ff; border-color: rgba(11,20,37,.08); border-left-width: 3px; }
.t-issue[data-sev="critical"] { border-left-color: #ff6b6b; }
.t-issue[data-sev="high"]     { border-left-color: #ff9f43; }
.t-issue[data-sev="medium"]   { border-left-color: #ffd166; }
.t-issue[data-sev="low"]      { border-left-color: var(--ice); }
.t-issue[data-sev="good"]     { border-left-color: #4dd08a; }
.t-issue h4 { font-size: 15.5px; margin-bottom: 5px; font-weight: 600; }
.t-issue p { font-size: 14px; color: var(--t-dark-dim); margin-bottom: 6px; }
.light .t-issue p { color: var(--t-light-dim); }
.t-issue .fix { font-size: 13.5px; color: var(--azure); }
.light .t-issue .fix { color: var(--cobalt); }
.t-sev { flex: none; font-family: "JetBrains Mono", monospace; font-size: 9.5px; letter-spacing: .14em;
  text-transform: uppercase; padding: 4px 8px; border-radius: 5px; height: fit-content;
  background: rgba(188,212,255,.1); color: var(--ice); }
.light .t-sev { background: rgba(11,20,37,.06); color: var(--t-light-dim); }

.t-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--glass-brd); }
.light .t-actions { border-top-color: rgba(11,20,37,.09); }

/* ── loading ── */
.t-loading { display: none; align-items: center; gap: 14px; margin-top: 24px; color: var(--t-dark-dim); font-size: 14.5px; }
.light .t-loading { color: var(--t-light-dim); }
.t-loading.show { display: flex; }
.t-spin { width: 22px; height: 22px; flex: none; border: 2.5px solid rgba(188,212,255,.2);
  border-top-color: var(--cobalt); border-radius: 50%; animation: t-spin .8s linear infinite; }
@keyframes t-spin { to { transform: rotate(360deg); } }
.t-error { display: none; margin-top: 20px; padding: 15px 18px; border-radius: var(--r-sm);
  background: rgba(255,107,107,.09); border: 1px solid rgba(255,107,107,.28); color: #ffb0b0; font-size: 14.5px; }
.light .t-error { color: #b3261e; }
.t-error.show { display: block; }

/* ── signup gate ── */
.t-gate { position: fixed; inset: 0; z-index: 300; display: none; place-items: center; padding: 5vw;
  background: rgba(3,5,10,.78); backdrop-filter: blur(6px); }
.t-gate.open { display: grid; }
.t-gate-box { width: 100%; max-width: 470px; background: var(--ink-2); border: 1px solid var(--glass-brd);
  border-radius: var(--r-lg); padding: clamp(26px, 4vw, 38px); position: relative; max-height: 92vh; overflow-y: auto; }
.t-gate-box h3 { font-size: clamp(21px, 2.4vw, 27px); margin-bottom: 10px; }
.t-gate-box > p { color: var(--t-dark-dim); font-size: 14.5px; margin-bottom: 22px; }
.t-gate-close { position: absolute; top: 16px; right: 16px; width: 34px; height: 34px; border-radius: 50%;
  background: rgba(188,212,255,.08); border: 1px solid var(--glass-brd); color: var(--t-dark);
  display: grid; place-items: center; cursor: pointer; }
.t-gate-close:hover { background: rgba(255,107,107,.16); }
.t-field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 15px; }
.t-field label { font-family: "JetBrains Mono", monospace; font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ice); }
.t-consent { display: flex; gap: 11px; align-items: flex-start; font-size: 13px; color: var(--t-dark-dim);
  line-height: 1.55; margin: 6px 0 20px; }
.t-consent input { margin-top: 3px; flex: none; width: 17px; height: 17px; accent-color: var(--cobalt); }
.t-consent a { color: var(--azure); }
.t-hp { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; }

/* ── teaser blur for gated tools ── */
.t-teaser { position: relative; }
.t-teaser::after { content: ""; position: absolute; inset: 0; backdrop-filter: blur(7px);
  background: linear-gradient(180deg, rgba(5,7,13,.05), rgba(5,7,13,.72)); border-radius: var(--r-md); }
.light .t-teaser::after { background: linear-gradient(180deg, rgba(245,248,255,.1), rgba(245,248,255,.86)); }

/* ── comparison ── */
.t-vs { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: center; margin-top: 24px; }
.t-vs .vs { font-family: "JetBrains Mono", monospace; font-size: 12px; color: var(--azure); letter-spacing: .2em; }
@media (max-width: 640px) { .t-vs { grid-template-columns: 1fr; } .t-vs .vs { text-align: center; } }

/* ── checklist tools ── */
.t-check { display: flex; gap: 13px; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid var(--glass-brd); }
.light .t-check { border-bottom-color: rgba(11,20,37,.08); }
.t-check input { margin-top: 3px; flex: none; width: 19px; height: 19px; accent-color: var(--cobalt); }
.t-check label { font-size: 15px; cursor: pointer; }
.t-check small { display: block; color: var(--t-dark-dim); font-size: 13px; margin-top: 3px; }
.light .t-check small { color: var(--t-light-dim); }
.t-code { background: rgba(5,7,13,.6); border: 1px solid var(--glass-brd); border-radius: var(--r-sm);
  padding: 18px; font-family: "JetBrains Mono", monospace; font-size: 12.5px; line-height: 1.65;
  white-space: pre-wrap; word-break: break-word; max-height: 380px; overflow-y: auto; color: var(--ice); }