/* ICC Terminal tool pages and the /tools hub (tool_design.py). Our own look: the site's dark navy, gold gradient and
   one accent colour per category (--cat). Loaded after each page's own styles, so it sets the shared look. © ICC Terminal */

/* hero: icon tile, category line, title */
.t-head{display:flex;align-items:center;gap:18px;margin:12px 0 8px}
.t-head h1{margin:6px 0 0;font-size:clamp(28px,4.2vw,46px);line-height:1.08}
.t-ico{flex:none;display:grid;place-items:center;width:66px;height:66px;border-radius:20px;color:var(--cat,#fbbf24);
  background:radial-gradient(120% 120% at 15% 0%,color-mix(in srgb,var(--cat,#fbbf24) 24%,transparent),rgba(255,255,255,.025) 72%);
  border:1px solid rgba(251,191,36,.35);border-color:color-mix(in srgb,var(--cat,#fbbf24) 50%,transparent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 14px 34px rgba(0,0,0,.38)}
.t-ico svg{width:32px;height:32px}
.t-cat{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--cat,#fbbf24)}
.t-new,.t-card em{font-style:normal;font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#1a1204;
  background:linear-gradient(160deg,#fff1b8,#fbbf24 45%,#d97706);border-radius:999px;padding:2px 8px;margin-left:2px}

.post-hero .alt-h{text-align:left}

/* the calculator card */
form.calc{background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.014));border:1px solid rgba(255,255,255,.1);
  border-radius:22px;padding:22px;box-shadow:0 22px 54px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.07)}
form.calc label{font-size:13.5px;font-weight:600;color:#c9d2e3}
form.calc input[type=number],form.calc input[type=text],form.calc input[type=date],form.calc input:not([type]),form.calc select{
  min-height:48px;font-size:16px;font-weight:600;font-variant-numeric:tabular-nums;border-radius:12px;background:#0b1120;
  border:1px solid rgba(255,255,255,.15);color:#fff}
form.calc input:focus-visible,form.calc select:focus-visible{outline:2px solid rgba(251,191,36,.75);outline-offset:1px;border-color:rgba(251,191,36,.6)}
form.calc small{color:#9aa6bd}
form.calc .seg{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
form.calc .seg label{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;padding:9px 14px;border-radius:12px;
  border:1px solid rgba(255,255,255,.16);background:#0e1424;cursor:pointer;font-weight:650;color:#e6eaf2}
form.calc .seg label:has(input:checked){border-color:rgba(251,191,36,.75);background:rgba(251,191,36,.12);color:#fff}
form.calc .seg input{width:auto;min-height:0;height:auto;margin:0;accent-color:#fbbf24}
form.calc details.more summary{color:#fbbf24}

/* results: the main number in a highlighted card */
.res{gap:12px}
.res div{border-radius:16px;background:rgba(255,255,255,.035);border-color:rgba(255,255,255,.1)}
.res div.main{background:linear-gradient(160deg,rgba(251,191,36,.2),rgba(251,191,36,.045) 70%);border:1px solid rgba(251,191,36,.65);
  box-shadow:0 12px 32px rgba(245,158,11,.14),inset 0 1px 0 rgba(255,255,255,.08)}
.res div.main dt{color:#fde68a}
.res div.main dd{font-size:clamp(24px,3vw,30px);color:#fff}
form.calc .result{border:1px solid rgba(251,191,36,.6);background:linear-gradient(160deg,rgba(251,191,36,.16),rgba(251,191,36,.04) 70%);
  border-radius:16px;padding:14px 16px;box-shadow:0 12px 32px rgba(245,158,11,.12)}

/* readable sections under the calculator */
.post .example{border-radius:0 14px 14px 0}
.post .formula{border:1px solid rgba(255,255,255,.08)}

/* the /tools hub */
.t-search{position:relative;max-width:660px;margin:18px 0 14px;color:#9aa6bd}
.t-search svg{position:absolute;left:16px;top:50%;transform:translateY(-50%)}
.t-search input{width:100%;height:54px;padding:0 16px 0 46px;border-radius:16px;font-size:16px;color:#fff;background:#0b1120;
  border:1px solid rgba(255,255,255,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.t-search input:focus-visible{outline:2px solid rgba(251,191,36,.75);outline-offset:1px}
.t-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 6px}
.t-chips a{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;font-size:13.5px;font-weight:650;
  color:#e6eaf2;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.03)}
.t-chips a:hover{border-color:var(--cat)}
.t-chips i{width:8px;height:8px;border-radius:50%;background:var(--cat)}
.t-sec{margin-top:26px;scroll-margin-top:90px}
.t-sec h2{display:flex;align-items:center;gap:10px;font-size:clamp(20px,2.2vw,26px)}
.t-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:12px;margin-top:12px}
.t-card{display:flex;gap:14px;align-items:flex-start;padding:16px;border-radius:18px;color:#e6eaf2;border:1px solid rgba(255,255,255,.09);
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.014));transition:transform .15s,border-color .2s}
.t-card:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--cat) 60%,transparent)}
.t-card .t-ico{width:46px;height:46px;border-radius:14px;box-shadow:none}
.t-card .t-ico svg{width:23px;height:23px}
.t-txt b{display:flex;flex-wrap:wrap;align-items:center;gap:6px;color:#fff;font-size:15.5px;line-height:1.3;margin-bottom:3px}
.t-txt span{display:block;color:#9aa6bd;font-size:13.5px;line-height:1.45}
.t-none{color:#9aa6bd}
.t-card[hidden],.t-sec[hidden],.t-none[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

@media (max-width:600px){
  .t-head{gap:12px;align-items:flex-start}
  .t-ico{width:52px;height:52px;border-radius:16px}.t-ico svg{width:26px;height:26px}
  form.calc{padding:16px;border-radius:18px}
  .t-grid{grid-template-columns:1fr}
}