/* CipherMatrix — custom layer on top of Tailwind CDN */
:root {
  --lime: #a3e635;
  --cyan: #06b6d4;
  --ink: #07090e;
  --danger: #fb7185;
}

html { scroll-behavior: smooth; color-scheme: dark; }
body { background: var(--ink); }

.bg-grid {
  background-image:
    linear-gradient(to right, rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse 70% 55% at 50% 0%, #000 40%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 70% 55% at 50% 0%, #000 40%, transparent 100%);
}

/* ---------- glass + cards ---------- */
.glass {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.tool-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .9rem;
  padding: 1.4rem;
  border-radius: 1.5rem;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  overflow: hidden;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.tool-card::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), var(--glow, rgba(163,230,53,.14)), transparent 55%);
  opacity: 0; transition: opacity .3s ease; pointer-events: none;
}
.tool-card:hover { transform: translateY(-3px); }
.tool-card:hover::before { opacity: 1; }
.tool-card.accent-lime { --glow: rgba(163,230,53,.16); }
.tool-card.accent-cyan { --glow: rgba(6,182,212,.18); }
.tool-card.accent-lime:hover { border-color: rgba(163,230,53,.45); box-shadow: 0 0 40px -12px rgba(163,230,53,.55); }
.tool-card.accent-cyan:hover { border-color: rgba(6,182,212,.5);  box-shadow: 0 0 40px -12px rgba(6,182,212,.6); }
.tool-card:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }

.icon-tile {
  display: grid; place-items: center;
  width: 2.75rem; height: 2.75rem; border-radius: .9rem;
}
.accent-lime .icon-tile { color: var(--lime); background: rgba(163,230,53,.10); border: 1px solid rgba(163,230,53,.35); }
.accent-cyan .icon-tile { color: var(--cyan); background: rgba(6,182,212,.10); border: 1px solid rgba(6,182,212,.35); }

.formula {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: .8rem;
  padding: .55rem .75rem;
  border-radius: .75rem;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.08);
  color: #cbd5e1;
  overflow-x: auto;
  white-space: nowrap;
}

/* ---------- chips / buttons ---------- */
.chip {
  font-size: .8rem; font-weight: 500;
  padding: .45rem .85rem; border-radius: 999px;
  color: #94a3b8;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  transition: all .2s ease; cursor: pointer;
}
.chip:hover { color: #e2e8f0; border-color: rgba(255,255,255,.25); }
.chip[aria-selected="true"] {
  color: #07090e; background: var(--lime); border-color: var(--lime);
  box-shadow: 0 0 18px -4px var(--lime);
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  font-size: .85rem; font-weight: 600;
  padding: .55rem .95rem; border-radius: .8rem;
  color: #e2e8f0;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  cursor: pointer; transition: all .2s ease;
}
.btn:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.25); }
.btn:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.btn-primary { color: #07090e; background: var(--lime); border-color: var(--lime); }
.btn-primary:hover { background: #bef264; box-shadow: 0 0 22px -4px var(--lime); }

.tab {
  font-size: .85rem; font-weight: 600; padding: .5rem 1rem; border-radius: .75rem;
  color: #94a3b8; border: 1px solid transparent; cursor: pointer; transition: all .2s ease;
}
.tab:hover { color: #e2e8f0; }
.tab[aria-selected="true"] {
  color: var(--cyan); background: rgba(6,182,212,.10); border-color: rgba(6,182,212,.4);
  box-shadow: 0 0 18px -6px var(--cyan);
}

.copy-btn {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .72rem; font-weight: 600; letter-spacing: .02em;
  padding: .3rem .6rem; border-radius: .6rem;
  color: #94a3b8; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12);
  cursor: pointer; transition: all .2s ease; white-space: nowrap;
}
.copy-btn:hover { color: var(--lime); border-color: rgba(163,230,53,.5); }
.copy-btn.copied { color: #07090e; background: var(--lime); border-color: var(--lime); }

/* ---------- inputs ---------- */
.field-label { display: block; font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #94a3b8; margin-bottom: .4rem; }
.field {
  width: 100%;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: .95rem;
  padding: .7rem .85rem; border-radius: .8rem;
  color: #f1f5f9;
  background: rgba(0,0,0,.4);
  border: 1px solid rgba(255,255,255,.12);
  outline: none; transition: border-color .2s ease, box-shadow .2s ease;
}
.field::placeholder { color: #475569; }
.field:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(6,182,212,.18), 0 0 22px -6px var(--cyan); }
.field.is-invalid { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(251,113,133,.15); animation: shake .28s ease; }
.field-error { margin-top: .35rem; font-size: .75rem; color: var(--danger); min-height: 1rem; }

.cell-input { text-align: center; padding: .65rem .25rem; min-width: 0; }

select.field { appearance: none; cursor: pointer; }

@keyframes shake {
  25% { transform: translateX(-3px); } 75% { transform: translateX(3px); }
}

/* ---------- results / steps ---------- */
.panel { padding: 1.25rem; border-radius: 1.25rem; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.10); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
@media (min-width: 640px) { .panel { padding: 1.5rem; } }

.result-box {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding: 1rem 1.15rem; border-radius: 1rem;
  background: linear-gradient(135deg, rgba(163,230,53,.10), rgba(6,182,212,.08));
  border: 1px solid rgba(163,230,53,.35);
  box-shadow: 0 0 30px -12px rgba(163,230,53,.5);
}
.result-value { font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 1.6rem; color: var(--lime); word-break: break-all; }
.result-sub { font-size: .75rem; color: #94a3b8; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }

.steps { list-style: none; counter-reset: s; display: grid; gap: .7rem; padding: 0; margin: 0; }
.steps > li {
  counter-increment: s; position: relative;
  padding: .85rem 1rem .85rem 3rem; border-radius: .9rem;
  background: rgba(0,0,0,.28); border: 1px solid rgba(255,255,255,.07);
  font-size: .9rem; color: #cbd5e1; overflow-x: auto;
}
.steps > li::before {
  content: counter(s);
  position: absolute; left: .85rem; top: .85rem;
  width: 1.5rem; height: 1.5rem; border-radius: 50%;
  display: grid; place-items: center;
  font-size: .72rem; font-weight: 700; color: var(--cyan);
  background: rgba(6,182,212,.12); border: 1px solid rgba(6,182,212,.4);
}
.steps .step-title { font-weight: 600; color: #f1f5f9; margin-bottom: .3rem; }
.mono { font-family: "JetBrains Mono", ui-monospace, monospace; }
.line { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: .84rem; line-height: 1.7; white-space: pre-wrap; word-break: break-word; }
.hl-lime { color: var(--lime); }
.hl-cyan { color: var(--cyan); }
.hl-dim  { color: #64748b; }

/* matrix with brackets */
.mat { display: inline-block; position: relative; padding: .35rem .75rem; margin: .25rem .4rem; vertical-align: middle; }
.mat::before, .mat::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: .45rem;
  border: 2px solid #64748b;
}
.mat::before { left: 0; border-right: 0; border-radius: .25rem 0 0 .25rem; }
.mat::after  { right: 0; border-left: 0; border-radius: 0 .25rem .25rem 0; }
.mat-grid { display: grid; gap: .3rem .9rem; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: .9rem; text-align: center; }
.mat-grid span { min-width: 2rem; }

/* data tables */
.tbl-wrap { overflow-x: auto; border-radius: 1rem; border: 1px solid rgba(255,255,255,.1); }
.tbl { width: 100%; border-collapse: collapse; font-size: .82rem; }
.tbl th {
  position: sticky; top: 0;
  text-align: left; padding: .6rem .8rem; white-space: nowrap;
  font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--cyan); background: rgba(6,182,212,.08); border-bottom: 1px solid rgba(255,255,255,.1);
}
.tbl td { padding: .55rem .8rem; border-bottom: 1px solid rgba(255,255,255,.05); font-family: "JetBrains Mono", ui-monospace, monospace; white-space: nowrap; color: #cbd5e1; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl tbody tr:hover td { background: rgba(255,255,255,.03); }
.tbl tr.row-final td { background: rgba(163,230,53,.08); color: var(--lime); font-weight: 600; }

.bit { display: inline-grid; place-items: center; width: 1.7rem; height: 2rem; border-radius: .5rem; font-family: "JetBrains Mono", monospace; font-weight: 600; font-size: .9rem; }
.bit-1 { color: #07090e; background: var(--lime); box-shadow: 0 0 14px -4px var(--lime); }
.bit-0 { color: #64748b; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); }

.badge-ok  { color: var(--lime); }
.badge-bad { color: var(--danger); }

/* toast */
.toast {
  position: fixed; left: 50%; bottom: 1.5rem; transform: translate(-50%, 20px);
  padding: .6rem 1rem; border-radius: .9rem; font-size: .85rem; font-weight: 600;
  color: #07090e; background: var(--lime); box-shadow: 0 10px 40px -8px rgba(163,230,53,.6);
  opacity: 0; pointer-events: none; transition: all .25s ease; z-index: 60;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.error { background: var(--danger); box-shadow: 0 10px 40px -8px rgba(251,113,133,.6); }

.fade-in { animation: fadeIn .35s ease both; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

::-webkit-scrollbar { height: 8px; width: 8px; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 8px; }
::-webkit-scrollbar-track { background: transparent; }

/* =====================================================================
   Matrix Operations & Rank tool (js/tools/matrixops.js) — additive styles
   ===================================================================== */
select.field {
  padding-right: 2rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .6rem center; background-size: 1rem;
}
.mo-card { padding: 1.1rem; border-radius: 1.1rem; background: rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,.08); min-width: 0; }
.mo-op { font-size: .85rem; font-weight: 600; padding: .5rem .9rem; border-radius: .8rem; color: #94a3b8; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); cursor: pointer; transition: all .2s ease; }
.mo-op:hover { color: #e2e8f0; border-color: rgba(255,255,255,.25); }
.mo-op[aria-selected="true"] { color: var(--cyan); background: rgba(6,182,212,.1); border-color: rgba(6,182,212,.5); box-shadow: 0 0 18px -6px var(--cyan); }
.mo-grid-scroll { overflow-x: auto; padding-bottom: .25rem; }
.mo-hint { font-size: .8rem; color: #94a3b8; }
.mo-error { padding: 1rem 1.15rem; border-radius: 1rem; background: rgba(251,113,133,.08); border: 1px solid rgba(251,113,133,.35); color: #fecdd3; font-size: .9rem; }
.mo-error strong { color: #fda4af; }
.mo-empty { padding: 2.5rem 1rem; text-align: center; color: #64748b; font-size: .9rem; }
.mo-badge { font-size: .65rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: .2rem .55rem; border-radius: 999px; color: #07090e; background: var(--lime); box-shadow: 0 0 14px -3px var(--lime); }

/* matrices: cells are <b class="mc"> so they do not inherit the `.mat-grid span` rule of the older tools */
/* flex (not grid): a negative fraction is "−" + <i class=fr>, which must sit on one line */
.mat-grid .mc { font-weight: 500; min-width: 2.1rem; padding: .15rem .4rem; border-radius: .45rem; display: flex; align-items: center; justify-content: center; gap: .1rem; white-space: nowrap; transition: background .2s ease, color .2s ease; }
.mat-grid .mc.ex { font-size: .78rem; font-weight: 400; color: #94a3b8; }
.mat-grid .mc.est  { color: #67e8f9; }
.mat-grid .mc.scan { background: rgba(255,255,255,.05); }
.mat-grid .mc.hot  { background: rgba(6,182,212,.10); }
.mat-grid .mc.pv   { color: #07090e; background: var(--cyan); box-shadow: 0 0 14px -2px var(--cyan); font-weight: 700; }
.mat.final .mc { color: var(--lime); font-weight: 600; }
.mat.final .mc.est { color: #07090e; background: rgba(163,230,53,.85); }
.mat-label { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: .85rem; color: #94a3b8; margin-right: .1rem; }
.fr { display: inline-grid; text-align: center; line-height: 1.15; font-size: .85em; }
.fr > i { font-style: normal; padding: 0 .2rem; }
.fr > i:first-child { border-bottom: 1.5px solid currentColor; }
.mo-mats { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .75rem; margin-top: .45rem; overflow-x: auto; max-width: 100%; }

.kind { font-size: .65rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: .15rem .5rem; border-radius: 999px; color: #67e8f9; background: rgba(6,182,212,.1); border: 1px solid rgba(6,182,212,.35); white-space: nowrap; }
.kind-swap, .kind-scale, .kind-add { color: #bef264; background: rgba(163,230,53,.08); border-color: rgba(163,230,53,.35); }
.kind-skip, .kind-info { color: #94a3b8; background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.15); }
.mo-formula { color: var(--lime); }
.mo-given { display: grid; gap: 1rem; }
@media (min-width: 768px) { .mo-given { grid-template-columns: auto 1fr; } }

.mo-hist-item { display: flex; align-items: center; gap: .75rem; padding: .6rem .8rem; border-radius: .8rem; background: rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,.07); transition: border-color .2s ease; }
.mo-hist-item:hover { border-color: rgba(6,182,212,.45); }
.mo-hist-main { flex: 1; min-width: 0; text-align: left; background: none; border: 0; color: inherit; cursor: pointer; }
.mo-hist-del { color: #64748b; background: none; border: 0; cursor: pointer; padding: .25rem; border-radius: .4rem; }
.mo-hist-del:hover { color: var(--danger); }
.btn-ghost-danger:hover { color: var(--danger); border-color: rgba(251,113,133,.5); }

/* =====================================================================
   Site shell for static pages (generated by scripts/build.js) — additive
   ===================================================================== */
.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; }
.skip-link { position: absolute; left: .75rem; top: -3rem; z-index: 60; padding: .55rem .9rem; border-radius: .7rem; font-weight: 600; font-size: .85rem; color: #07090e; background: var(--lime); transition: top .15s ease; }
.skip-link:focus { top: .75rem; }
a:focus-visible, summary:focus-visible, button:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; border-radius: .35rem; }
.nav-menu > summary { list-style: none; cursor: pointer; }
.nav-menu > summary::-webkit-details-marker { display: none; }
.breadcrumb ol { list-style: none; margin: 0; padding: 0; }
.tool-mount { min-height: 22rem; }
.tool-mount[aria-busy="false"] { min-height: 0; }
.cv-auto { content-visibility: auto; contain-intrinsic-size: 1px 700px; }
.chip[aria-pressed="true"] { color: #07090e; background: var(--lime); border-color: var(--lime); box-shadow: 0 0 18px -4px var(--lime); }

/* explanatory prose (tool pages, hubs, legal pages) */
.prose-cm { color: #cbd5e1; line-height: 1.75; font-size: 1rem; max-width: 52rem; }
.prose-cm h2 { font-family: "Space Grotesk", Inter, sans-serif; font-size: 1.5rem; line-height: 1.3; font-weight: 600; letter-spacing: -.01em; color: #fff; margin: 2rem 0 .7rem; }
.prose-cm h2:first-child { margin-top: 0; }
.prose-cm h3 { font-family: "Space Grotesk", Inter, sans-serif; font-size: 1.1rem; font-weight: 600; color: #e2e8f0; margin: 1.4rem 0 .4rem; }
.prose-cm p { margin: .75rem 0; }
.prose-cm ul { list-style: disc; padding-left: 1.4rem; margin: .75rem 0; }
.prose-cm li { margin: .3rem 0; }
.prose-cm a { color: var(--lime); text-decoration: underline; text-underline-offset: 3px; }
.prose-cm code { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: .88em; padding: .1rem .35rem; border-radius: .4rem; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.08); color: #d9f99d; }
.prose-cm .example { margin: 1.4rem 0; padding: 1.1rem; border-radius: 1.25rem; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09); max-width: none; }
.prose-cm .example h3 { margin-top: 0; }
.prose-cm .example .steps { margin-top: .5rem; }
.prose-cm .example ul { list-style: none; padding-left: 0; }

/* result notes (CM.ui) */
.note { padding: .7rem .9rem; border-radius: .8rem; font-size: .85rem; line-height: 1.55; border: 1px solid rgba(6,182,212,.35); background: rgba(6,182,212,.08); color: #a5f3fc; }
.note-warn { border-color: rgba(251,191,36,.4); background: rgba(251,191,36,.08); color: #fde68a; }

/* advertising: clearly labelled, space reserved (no layout shift), never inside the calculator */
.ad-slot { margin: 2rem 0; min-height: 280px; text-align: center; }
.ad-slot .ad-label { display: block; margin-bottom: .35rem; font-size: .65rem; letter-spacing: .08em; text-transform: uppercase; color: #94a3b8; }

/* tool layouts: single shrinkable column below the lg breakpoint (prevents horizontal overflow on phones) */
@media (max-width: 1023.98px) {
  .tool-mount .grid.lg\:grid-cols-5 { grid-template-columns: minmax(0, 1fr); }
  .tool-mount .grid.lg\:grid-cols-5 > * { min-width: 0; }
}

/* the hidden attribute must win over component display rules (home search, chips) */
[hidden] { display: none !important; }

/* learn section */
.prose-cm .lead { font-size: 1.075rem; color: #cbd5e1; }
.prose-cm .formula-list { list-style: none; padding-left: 0; display: grid; gap: .5rem; }
.prose-cm .formula-list li { margin: 0; }
.prose-cm .formula-list code { display: block; padding: .6rem .8rem; border-radius: .75rem; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .85rem; color: #bef264; overflow-x: auto; }
.prose-cm ol { padding-left: 1.25rem; list-style: decimal; display: grid; gap: .5rem; }
.practice { margin: .6rem 0; border: 1px solid rgba(255,255,255,.1); border-radius: .85rem; background: rgba(255,255,255,.03); }
.practice summary { cursor: pointer; padding: .75rem 1rem; font-weight: 500; color: #e2e8f0; list-style-position: inside; }
.practice summary:focus-visible { outline: 2px solid #a3e635; outline-offset: 2px; border-radius: .85rem; }
.practice p { margin: 0; padding: 0 1rem 1rem; color: #cbd5e1; }