/* AL ICT Tools – shared styles (works with the site's dark + light theme) */
:root {
    --alt-surface: rgba(255, 255, 255, .05);
    --alt-surface-2: rgba(255, 255, 255, .08);
    --alt-border: rgba(255, 255, 255, .11);
    --alt-text: #fff;
    --alt-muted: rgba(255, 255, 255, .62);
    --alt-input: rgba(0, 0, 0, .32);
    --alt-accent: rgb(var(--t1, 99, 102, 241));
    --alt-accent-soft: rgba(var(--t1, 99, 102, 241), .18);
    --alt-ok: #34d399;
    --alt-bad: #fb7185;
    --alt-warn: #fbbf24;
    --alt-sign: #fb7185;
    --alt-exp: #38bdf8;
    --alt-man: #34d399;
    --alt-head: rgba(255, 255, 255, .06);
}
html.theme-light {
    --alt-surface: #fff;
    --alt-surface-2: #f4f6fb;
    --alt-border: rgba(15, 23, 42, .1);
    --alt-text: #0f172a;
    --alt-muted: #64748b;
    --alt-input: #fff;
    --alt-accent-soft: rgba(var(--t1, 99, 102, 241), .1);
    --alt-ok: #059669;
    --alt-bad: #e11d48;
    --alt-warn: #b45309;
    --alt-sign: #e11d48;
    --alt-exp: #0284c7;
    --alt-man: #059669;
    --alt-head: #f1f5f9;
}

.alt-wrap { color: var(--alt-text); }
.alt-card {
    background: var(--alt-surface);
    border: 1px solid var(--alt-border);
    border-radius: 1.25rem;
    padding: 1.25rem;
    min-width: 0;
}
html.theme-light .alt-card { box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 10px 28px -14px rgba(var(--t1), .18); }
@media (min-width: 640px) { .alt-card { padding: 1.5rem; } }
.alt-card + .alt-card { margin-top: 1rem; }
.alt-card-title { font-weight: 700; font-size: 1.05rem; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.alt-sub { color: var(--alt-muted); font-size: .875rem; }
.alt-muted { color: var(--alt-muted); }

.alt-grid { display: grid; gap: 1rem; }
@media (min-width: 768px) {
    .alt-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .alt-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .alt-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* form controls */
.alt-label { display: block; font-size: .78rem; font-weight: 600; letter-spacing: .02em; color: var(--alt-muted); margin-bottom: .35rem; }
.alt-input, .alt-select, .alt-textarea {
    width: 100%;
    background: var(--alt-input);
    color: var(--alt-text);
    border: 1px solid var(--alt-border);
    border-radius: .85rem;
    padding: .7rem .9rem;
    font-size: 1rem;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.alt-input.alt-mono, .alt-textarea.alt-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .02em; }
.alt-input:focus, .alt-select:focus, .alt-textarea:focus { border-color: var(--alt-accent); box-shadow: 0 0 0 3px var(--alt-accent-soft); }
.alt-input::placeholder, .alt-textarea::placeholder { color: var(--alt-muted); opacity: .7; }
.alt-select option { color: #0f172a; background: #fff; }
.alt-input.alt-invalid { border-color: var(--alt-bad); }
.alt-check { display: inline-flex; align-items: center; gap: .5rem; font-size: .875rem; cursor: pointer; user-select: none; }
.alt-check input { width: 1rem; height: 1rem; accent-color: var(--alt-accent); }

.alt-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    border-radius: .8rem; padding: .6rem 1rem; font-weight: 600; font-size: .875rem;
    background: var(--alt-surface-2); color: var(--alt-text); border: 1px solid var(--alt-border);
    cursor: pointer; transition: background .15s, transform .05s, border-color .15s; white-space: nowrap;
}
.alt-btn:hover { border-color: var(--alt-accent); }
.alt-btn:active { transform: translateY(1px); }
.alt-btn-primary { background: linear-gradient(135deg, rgb(var(--t1)), rgb(var(--t2))); color: #fff; border-color: transparent; }
.alt-btn-primary:hover { filter: brightness(1.08); border-color: transparent; }
.alt-btn-sm { padding: .35rem .65rem; font-size: .78rem; border-radius: .65rem; }

/* segmented control */
.alt-seg { display: inline-flex; flex-wrap: wrap; gap: .25rem; padding: .25rem; border-radius: 1rem; background: var(--alt-surface); border: 1px solid var(--alt-border); }
.alt-seg button {
    border-radius: .75rem; padding: .45rem .85rem; font-size: .85rem; font-weight: 600;
    color: var(--alt-muted); background: transparent; border: 0; cursor: pointer; transition: background .15s, color .15s;
}
.alt-seg button:hover { color: var(--alt-text); }
.alt-seg button.is-active { background: linear-gradient(135deg, rgb(var(--t1)), rgb(var(--t2))); color: #fff; }

/* results */
.alt-error {
    display: none; margin-top: .75rem; padding: .75rem 1rem; border-radius: .9rem; font-size: .875rem;
    background: rgba(244, 63, 94, .12); border: 1px solid rgba(244, 63, 94, .35); color: var(--alt-bad);
}
.alt-error.is-visible { display: block; }
.alt-note {
    margin-top: .75rem; padding: .7rem .95rem; border-radius: .9rem; font-size: .85rem;
    background: var(--alt-accent-soft); border: 1px solid var(--alt-border);
}
.alt-note.warn { background: rgba(251, 191, 36, .12); border-color: rgba(251, 191, 36, .35); }
.alt-note.ok { background: rgba(52, 211, 153, .12); border-color: rgba(52, 211, 153, .35); }
.alt-note.bad { background: rgba(244, 63, 94, .12); border-color: rgba(244, 63, 94, .35); }

.alt-out {
    position: relative; background: var(--alt-surface-2); border: 1px solid var(--alt-border); border-radius: .95rem;
    padding: .8rem 1rem; min-width: 0;
}
.alt-out-label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--alt-muted); display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.alt-out-value { margin-top: .3rem; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 1.05rem; word-break: break-all; line-height: 1.5; }
.alt-out-value.big { font-size: 1.3rem; font-weight: 600; }
.alt-out-value.sans { font-family: inherit; word-break: normal; }
.alt-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.alt-break { word-break: break-all; }

.alt-copy {
    display: inline-flex; align-items: center; gap: .25rem; font-size: .7rem; font-weight: 600; letter-spacing: .02em; text-transform: none;
    color: var(--alt-muted); background: transparent; border: 1px solid var(--alt-border); border-radius: .5rem; padding: .15rem .45rem; cursor: pointer;
}
.alt-copy:hover { color: var(--alt-text); border-color: var(--alt-accent); }
.alt-copy.copied { color: var(--alt-ok); border-color: var(--alt-ok); }

.alt-kv { display: grid; grid-template-columns: minmax(0, 1fr); gap: .5rem; }
@media (min-width: 640px) { .alt-kv { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .alt-kv.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* tables */
.alt-table-wrap { overflow-x: auto; border: 1px solid var(--alt-border); border-radius: .95rem; -webkit-overflow-scrolling: touch; }
.alt-table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.alt-table th, .alt-table td { padding: .5rem .75rem; text-align: left; white-space: nowrap; border-bottom: 1px solid var(--alt-border); }
.alt-table th { background: var(--alt-head); font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--alt-muted); font-weight: 700; position: sticky; top: 0; }
.alt-table tr:last-child td { border-bottom: 0; }
.alt-table td.mono, .alt-table .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.alt-table.center th, .alt-table.center td { text-align: center; }
.alt-table tbody tr:hover td { background: var(--alt-accent-soft); }
.alt-table .is-one { color: var(--alt-ok); font-weight: 700; }
.alt-table .is-zero { color: var(--alt-muted); }
.alt-table .is-final { background: var(--alt-accent-soft); font-weight: 700; }
.alt-table th.is-final { color: var(--alt-text); }
.alt-table-scroll { max-height: 560px; overflow: auto; }

/* chips */
.alt-chip {
    display: inline-flex; align-items: center; gap: .3rem; padding: .3rem .65rem; border-radius: 999px; font-size: .78rem; font-weight: 600;
    background: var(--alt-surface-2); border: 1px solid var(--alt-border); color: var(--alt-text); cursor: pointer; transition: border-color .15s;
}
button.alt-chip:hover { border-color: var(--alt-accent); }
.alt-badge { display: inline-flex; align-items: center; padding: .15rem .55rem; border-radius: 999px; font-size: .72rem; font-weight: 700; background: var(--alt-accent-soft); color: var(--alt-text); border: 1px solid var(--alt-border); }
.alt-badge.ok { color: var(--alt-ok); }
.alt-badge.bad { color: var(--alt-bad); }
.alt-badge.warn { color: var(--alt-warn); }

/* steps */
.alt-steps { counter-reset: altstep; display: grid; gap: .85rem; }
.alt-step { position: relative; padding-left: 2.4rem; }
.alt-step::before {
    counter-increment: altstep; content: counter(altstep);
    position: absolute; left: 0; top: .05rem; width: 1.7rem; height: 1.7rem; border-radius: 999px;
    display: grid; place-items: center; font-size: .78rem; font-weight: 700; color: #fff;
    background: linear-gradient(135deg, rgb(var(--t1)), rgb(var(--t2)));
}
.alt-step-title { font-weight: 700; margin-bottom: .3rem; }
.alt-step p { color: var(--alt-muted); font-size: .9rem; }
.alt-formula { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .92rem; background: var(--alt-surface-2); border: 1px solid var(--alt-border); border-radius: .75rem; padding: .55rem .8rem; margin-top: .4rem; overflow-x: auto; white-space: pre; }
.alt-formula.wrap { white-space: pre-wrap; word-break: break-all; }

details.alt-details > summary { cursor: pointer; font-weight: 700; list-style: none; display: flex; align-items: center; gap: .5rem; }
details.alt-details > summary::-webkit-details-marker { display: none; }
details.alt-details > summary::before { content: '▸'; transition: transform .15s; display: inline-block; color: var(--alt-muted); }
details.alt-details[open] > summary::before { transform: rotate(90deg); }

/* overline (NOT) */
.alt-ov { text-decoration: overline; text-decoration-thickness: 1.5px; text-underline-offset: 2px; }
.alt-expr { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 1.15rem; line-height: 1.9; word-break: break-word; }

/* IEEE bit strip */
.alt-bits { display: flex; flex-wrap: wrap; gap: 2px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.alt-bit {
    width: 1.35rem; height: 1.8rem; display: grid; place-items: center; border-radius: .35rem; font-weight: 700; font-size: .85rem;
    border: 1px solid transparent;
}
.alt-bits.dense .alt-bit { width: 1.05rem; height: 1.55rem; font-size: .75rem; }
.alt-bit.s { background: rgba(244, 63, 94, .16); color: var(--alt-sign); border-color: rgba(244, 63, 94, .35); }
.alt-bit.e { background: rgba(56, 189, 248, .14); color: var(--alt-exp); border-color: rgba(56, 189, 248, .35); }
.alt-bit.m { background: rgba(52, 211, 153, .12); color: var(--alt-man); border-color: rgba(52, 211, 153, .3); }
.alt-bit.gap { margin-left: .4rem; }
.alt-legend { display: flex; flex-wrap: wrap; gap: .9rem; font-size: .8rem; color: var(--alt-muted); }
.alt-legend span::before { content: ''; display: inline-block; width: .7rem; height: .7rem; border-radius: .2rem; margin-right: .35rem; vertical-align: -1px; }
.alt-legend .s::before { background: var(--alt-sign); }
.alt-legend .e::before { background: var(--alt-exp); }
.alt-legend .m::before { background: var(--alt-man); }
.c-s { color: var(--alt-sign); } .c-e { color: var(--alt-exp); } .c-m { color: var(--alt-man); }

/* digit grouping boxes (number system steps) */
.alt-groups { display: flex; flex-wrap: wrap; gap: .4rem; align-items: flex-end; }
.alt-group { text-align: center; border: 1px solid var(--alt-border); border-radius: .6rem; padding: .3rem .5rem; background: var(--alt-surface-2); min-width: 2.5rem; }
.alt-group .b { font-family: ui-monospace, monospace; font-size: .9rem; }
.alt-group .d { font-family: ui-monospace, monospace; font-weight: 800; font-size: 1.05rem; color: var(--alt-accent); border-top: 1px dashed var(--alt-border); margin-top: .2rem; padding-top: .15rem; }
html.theme-light .alt-group .d { color: rgb(var(--t1)); }
.alt-point { font-weight: 800; font-size: 1.4rem; padding: 0 .1rem .3rem; }

/* K-map */
.alt-kmaps { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.alt-kmap { --cell: 3.4rem; display: inline-block; max-width: 100%; }
@media (max-width: 420px) { .alt-kmap { --cell: 2.85rem; } }
.alt-kmap-title { font-size: .85rem; color: var(--alt-muted); margin: 0 0 .35rem 3rem; font-weight: 700; }
.alt-kmap-frame { display: grid; grid-template-columns: auto auto; }
.alt-kmap-corner { position: relative; width: 3rem; height: 2.4rem; font-family: ui-monospace, monospace; font-size: .78rem; font-weight: 700; color: var(--alt-muted); }
.alt-kmap-corner .rv { position: absolute; left: .15rem; bottom: .1rem; z-index: 1; }
.alt-kmap-corner .cv { position: absolute; right: .2rem; top: .05rem; z-index: 1; }
.alt-kmap-corner::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top right, transparent calc(50% - .5px), var(--alt-border) calc(50% - .5px), var(--alt-border) calc(50% + .5px), transparent calc(50% + .5px)); }
.alt-kmap-hcols { display: flex; padding-left: 2px; }
.alt-kmap-hcol { width: var(--cell); height: 2.4rem; display: grid; place-items: end center; padding-bottom: .2rem; font-family: ui-monospace, monospace; font-size: .8rem; font-weight: 700; color: var(--alt-muted); }
.alt-kmap-hrows { display: flex; flex-direction: column; padding-top: 2px; }
.alt-kmap-hrow { height: var(--cell); width: 3rem; display: grid; place-items: center end; padding-right: .45rem; font-family: ui-monospace, monospace; font-size: .8rem; font-weight: 700; color: var(--alt-muted); }
.alt-kmap-cells { position: relative; display: grid; border: 2px solid var(--alt-border); border-radius: .6rem; background: var(--alt-surface-2); }
.alt-kmap-cell {
    position: relative; display: grid; place-items: center; width: var(--cell); height: var(--cell); font-family: ui-monospace, monospace;
    font-size: 1.2rem; font-weight: 700; border-right: 1px solid var(--alt-border); border-bottom: 1px solid var(--alt-border); user-select: none;
}
.alt-kmap-cell .idx { position: absolute; left: .25rem; top: .1rem; font-size: .6rem; font-weight: 600; color: var(--alt-muted); }
.alt-kmap-cell.v1 { color: var(--alt-ok); }
.alt-kmap-cell.v0 { color: var(--alt-muted); opacity: .75; }
.alt-kmap-cell.vx { color: var(--alt-warn); }
.alt-kmap.editable .alt-kmap-cell { cursor: pointer; }
.alt-kmap.editable .alt-kmap-cell:hover { background: var(--alt-accent-soft); }
.alt-kmap-rect { position: absolute; border: 2.5px solid; border-radius: .7rem; pointer-events: none; }
.alt-kmap-rect.wl { border-left: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.alt-kmap-rect.wr { border-right: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.alt-kmap-rect.wt { border-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; }
.alt-kmap-rect.wb { border-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.alt-swatch { display: inline-block; width: .85rem; height: .85rem; border-radius: .25rem; border: 2.5px solid; vertical-align: -2px; }

/* keypad for expressions */
.alt-keypad { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .5rem; }
.alt-keypad button { min-width: 2.3rem; padding: .35rem .55rem; border-radius: .6rem; font-family: ui-monospace, monospace; font-weight: 700; font-size: .9rem; background: var(--alt-surface-2); border: 1px solid var(--alt-border); color: var(--alt-text); cursor: pointer; }
.alt-keypad button:hover { border-color: var(--alt-accent); }
.alt-keypad button.wide { font-family: inherit; font-size: .78rem; }

/* tool hub cards */
.alt-tool-card { position: relative; display: flex; flex-direction: column; gap: .75rem; padding: 1.35rem; border-radius: 1.5rem; background: var(--alt-surface); border: 1px solid var(--alt-border); transition: transform .2s, border-color .2s, box-shadow .2s; overflow: hidden; color: var(--alt-text); }
.alt-tool-card:hover { transform: translateY(-3px); border-color: rgba(var(--t1), .55); box-shadow: 0 18px 40px -18px rgba(var(--t1), .55); }
.alt-tool-icon { width: 3rem; height: 3rem; border-radius: 1rem; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, rgb(var(--t1)), rgb(var(--t2))); box-shadow: 0 10px 24px -10px rgba(var(--t1), .8); }
.alt-tool-card .go { margin-top: auto; font-size: .85rem; font-weight: 700; display: inline-flex; align-items: center; gap: .35rem; color: var(--alt-muted); }
.alt-tool-card:hover .go { color: var(--alt-text); }

/* tool switcher */
.alt-switcher { display: flex; gap: .4rem; overflow-x: auto; padding-bottom: .85rem; scrollbar-width: thin; scrollbar-color: var(--alt-border) transparent; }
.alt-switcher::-webkit-scrollbar { height: 6px; }
.alt-switcher::-webkit-scrollbar-track { background: transparent; }
.alt-switcher::-webkit-scrollbar-thumb { background: var(--alt-border); border-radius: 999px; }
.alt-switcher::-webkit-scrollbar-thumb:hover { background: var(--alt-muted); }
.alt-switcher a { flex: none; display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .8rem; border-radius: .8rem; font-size: .82rem; font-weight: 600; background: var(--alt-surface); border: 1px solid var(--alt-border); color: var(--alt-muted); transition: color .15s, border-color .15s; }
.alt-switcher a:hover { color: var(--alt-text); border-color: var(--alt-accent); }
.alt-switcher a.is-active { color: #fff; background: linear-gradient(135deg, rgb(var(--t1)), rgb(var(--t2))); border-color: transparent; }

.alt-hidden { display: none !important; }
.alt-row { display: flex; flex-wrap: wrap; gap: .75rem; align-items: flex-end; }
.alt-row > .grow { flex: 1 1 14rem; min-width: 0; }
.alt-mt { margin-top: 1rem; }
.alt-mt-sm { margin-top: .5rem; }
.alt-pager { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; justify-content: space-between; margin-top: .75rem; font-size: .85rem; }
.alt-progress { height: .55rem; background: var(--alt-surface-2); border-radius: 999px; overflow: hidden; border: 1px solid var(--alt-border); }
.alt-progress > div { height: 100%; background: linear-gradient(90deg, rgb(var(--t1)), rgb(var(--t2))); }

@media print {
    header, footer, .alt-switcher, .alt-noprint { display: none !important; }
}
.alt-span-2 { grid-column: 1 / -1; }
.alt-steps > *, .alt-step > div { min-width: 0; }
.alt-switcher { position: relative; }