/* ================================================================
   APPUNTI.CSS — componenti grafici comuni degli appunti
   (Fondamenti, Algoritmi, Basi di Dati). Richiede style.css.
   Schemi SVG, confronti, definizioni, schede, passi numerati,
   e l'aspetto degli strumenti interattivi di appunti.js.
   Il colore d'accento segue il corso: <body data-corso="fdp|asd|bd|rl">.
================================================================= */

.page-content { --acc: var(--brand-600); --acc-ink: var(--brand-700); --acc-soft: var(--brand-50); --acc-line: var(--brand-100); }
.page-content[data-corso="asd"] { --acc: #5b3fd0; --acc-ink: #4526b3; --acc-soft: #f6f4ff; --acc-line: #ddd6fe; }
.page-content[data-corso="bd"]  { --acc: #0b7a60; --acc-ink: #07604b; --acc-soft: #f0fbf7; --acc-line: #bfe9da; }
.page-content[data-corso="rl"]  { --acc: #be123c; --acc-ink: #9f1239; --acc-soft: #fff4f6; --acc-line: #fecdd3; }

/* ---------------- Schema con didascalia ---------------- */
.page-content .ap-fig {
    margin: 1.8em 0;
    padding: 1.1em 1.1em .9em;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: var(--shadow-xs);
}
.page-content .ap-fig svg { display: block; width: 100%; height: auto; font-family: var(--font-sans); }
.page-content .ap-fig figcaption {
    margin-top: .7em;
    font-size: .88rem;
    line-height: 1.5;
    color: var(--muted);
    text-align: center;
}
@media (max-width: 640px) {
    .page-content .ap-fig { overflow-x: auto; padding: .8em; }
    .page-content .ap-fig svg { min-width: 520px; }
    /* anche gli schemi delle sequenze e i grafici scorrono invece di rimpicciolirsi */
    .page-content .ap-passo > svg,
    .page-content .ap-grafico > div > svg { min-width: 520px; }
    .page-content .ap-passo,
    .page-content .ap-grafico > div:has(> svg) { overflow-x: auto; }
    .page-content .ap-passo-testo { position: sticky; left: 0; max-width: calc(100vw - 72px); }
    .page-content .ap-fig figcaption { position: sticky; left: 0; max-width: calc(100vw - 80px); text-align: left; }
}

/* ---------------- Definizione ---------------- */
.page-content .ap-def {
    margin: 1.5em 0;
    padding: 1em 1.25em;
    background: var(--acc-soft);
    border: 1px solid var(--acc-line);
    border-left: 4px solid var(--acc);
    border-radius: 12px;
}
.page-content .ap-def > :first-child { margin-top: 0; }
.page-content .ap-def > :last-child { margin-bottom: 0; }
.page-content .ap-def > p:first-child > strong:first-child { color: var(--acc-ink); }

/* ---------------- Confronto a due (o più) colonne ---------------- */
.page-content .ap-confronto {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
    gap: 1em;
    margin: 1.5em 0;
}
.page-content .ap-lato,
.page-content .ap-si,
.page-content .ap-no { min-width: 0; padding: .95em 1.15em; border-radius: 12px; }
.page-content .ap-lato { background: #fbfbfc; border: 1px solid var(--line); }
.page-content .ap-si { background: #f2fbf5; border: 1px solid #bbf7d0; }
.page-content .ap-no { background: #fff6f6; border: 1px solid #fecaca; }
.page-content .ap-confronto h5 {
    margin: 0 0 .5em;
    font-size: .8rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--acc-ink);
}
.page-content .ap-si h5 { color: #187a40; }
.page-content .ap-no h5 { color: #b42318; }
.page-content .ap-confronto p,
.page-content .ap-confronto li { font-size: .96rem; }
.page-content .ap-confronto ul,
.page-content .ap-confronto ol { margin: .4em 0; padding-left: 1.2em; }
.page-content .ap-confronto > div > :last-child { margin-bottom: 0; }
.page-content .ap-confronto pre { margin: .5em 0 0; }

/* ---------------- Schede (piccole carte con un termine) ---------------- */
.page-content .ap-schede {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
    gap: .8em;
    margin: 1.4em 0;
}
.page-content .ap-scheda { min-width: 0; padding: .9em 1em; background: #fff; border: 1px solid var(--line); border-radius: 12px; }
.page-content .ap-scheda > b:first-child {
    display: inline-block;
    margin-bottom: .35em;
    padding: .12em .5em;
    font-size: .88rem;
    color: var(--acc-ink);
    background: var(--acc-soft);
    border: 1px solid var(--acc-line);
    border-radius: 6px;
}
.page-content .ap-scheda p { margin: 0; font-size: .92rem; line-height: 1.55; }

/* ---------------- Passi numerati ---------------- */
.page-content ol.ap-passi { counter-reset: passo; list-style: none; padding-left: 0; margin: 1.3em 0; }
.page-content ol.ap-passi > li {
    counter-increment: passo;
    position: relative;
    margin: 0;
    padding: 0 0 1.1em 3em;
}
.page-content ol.ap-passi > li::before {
    content: counter(passo);
    position: absolute;
    left: 0; top: -.05em;
    display: grid;
    place-items: center;
    width: 2em;
    height: 2em;
    font: 700 .85rem/1 var(--font-sans);
    color: #fff;
    background: var(--acc);
    border-radius: 50%;
}
.page-content ol.ap-passi > li::after {
    content: "";
    position: absolute;
    left: calc(1em - 1px); top: 1.9em; bottom: .15em;
    width: 2px;
    background: var(--acc-line);
}
.page-content ol.ap-passi > li:last-child { padding-bottom: 0; }
.page-content ol.ap-passi > li:last-child::after { display: none; }

/* ---------------- Contenitore degli strumenti interattivi ---------------- */
.page-content .ap-w {
    margin: 2em 0;
    padding: 1.25em 1.35em 1.4em;
    background: linear-gradient(180deg, #fff, var(--acc-soft));
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: var(--shadow-xs);
}
.page-content .ap-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35em .7em; margin-bottom: 1em; }
.page-content .ap-title { font-size: .78rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--acc); }
.page-content .ap-sub { margin: 0; font-size: .95rem; line-height: 1.55; color: var(--muted); }
.page-content .ap-label { display: block; margin-bottom: .3em; font-size: .78rem; font-weight: 600; color: var(--muted); }
.page-content .ap-mono { font-family: var(--font-mono); font-variant-ligatures: none; }
.page-content .ap-row { display: flex; flex-wrap: wrap; align-items: end; gap: .8em; margin-bottom: .9em; }
.page-content .ap-row > label { flex: 1 1 160px; min-width: 0; }

.page-content .ap-btn {
    display: inline-flex;
    align-items: center;
    gap: .4em;
    padding: .5em 1em;
    font: 600 .88rem/1.2 var(--font-sans);
    color: #fff;
    background: var(--acc);
    border: 1px solid transparent;
    border-radius: 999px;
    cursor: pointer;
    transition: background-color .15s ease, opacity .15s ease;
}
.page-content .ap-btn:hover:not(:disabled) { background: var(--acc-ink); }
.page-content .ap-btn:disabled { opacity: .45; cursor: not-allowed; }
.page-content .ap-btn-ghost { color: var(--ink-soft); background: #fff; border-color: var(--line-strong); }
.page-content .ap-btn-ghost:hover:not(:disabled) { color: var(--acc); background: #fff; border-color: var(--acc); }
.page-content .ap-btn:focus-visible,
.page-content .ap-chip:focus-visible,
.page-content .ap-seg button:focus-visible,
.page-content .ap-bit:focus-visible { outline: 3px solid var(--acc-line); outline-offset: 2px; }

.page-content .ap-input,
.page-content .ap-select {
    width: 100%;
    padding: .55em .75em;
    font: .95rem var(--font-sans);
    color: var(--ink);
    background: #fff;
    border: 1px solid var(--line-strong);
    border-radius: 10px;
    box-sizing: border-box;
}
.page-content .ap-input.ap-mono { font-family: var(--font-mono); }
.page-content .ap-input:focus,
.page-content .ap-select:focus { outline: none; border-color: var(--acc); box-shadow: 0 0 0 3px var(--acc-line); }
.page-content .ap-input.is-bad { border-color: #dc2626; }

.page-content .ap-chips { display: flex; flex-wrap: wrap; gap: .4em; margin: .2em 0 .9em; }
.page-content .ap-chip {
    padding: .3em .7em;
    font: 500 .82rem var(--font-sans);
    color: var(--ink-soft);
    background: #fff;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    cursor: pointer;
}
.page-content .ap-chip:hover { border-color: var(--acc); color: var(--acc-ink); }
.page-content .ap-chip.is-on { color: #fff; background: var(--acc); border-color: var(--acc); }

.page-content .ap-seg { display: inline-flex; flex-wrap: wrap; gap: 3px; padding: 3px; margin-bottom: .9em; background: #eef1f5; border-radius: 10px; }
.page-content .ap-seg button {
    padding: .4em .85em;
    font: 600 .82rem var(--font-sans);
    color: var(--muted);
    background: transparent;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
}
.page-content .ap-seg button.is-on { color: var(--ink); background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }

.page-content .ap-explain {
    margin: .9em 0 0;
    padding: .75em 1em;
    font-size: .94rem;
    line-height: 1.6;
    color: var(--text);
    background: #fff;
    border-left: 3px solid var(--acc);
    border-radius: 0 10px 10px 0;
}
.page-content .ap-explain:empty { display: none; }
.page-content .ap-stepper { display: flex; flex-wrap: wrap; align-items: center; gap: .5em; margin-top: 1em; }
.page-content .ap-step-count { margin-left: auto; font: 600 .8rem var(--font-mono); color: var(--muted); }

.page-content .ap-table { width: 100%; min-width: 0; border-collapse: collapse; font-size: .9rem; background: #fff; }
.page-content .ap-table th,
.page-content .ap-table td { padding: .45em .7em; text-align: left; border: 1px solid var(--line); }
.page-content .ap-table th { color: var(--ink); background: #f7f7f9; }
.page-content .ap-table td.ap-mono { white-space: nowrap; }
.page-content .ap-scroll { max-width: 100%; overflow-x: auto; }

/* ---------------- Passo passo (sequenze di schemi) ---------------- */
.page-content .ap-passo { display: none; }
.page-content .ap-passo.is-on { display: block; }
.page-content .ap-passo svg { display: block; width: 100%; height: auto; font-family: var(--font-sans); }
.page-content .ap-passo-testo { margin: .8em 0 0; }

/* ---------------- Laboratorio dei bit ---------------- */
.page-content .ap-bits { display: flex; flex-wrap: wrap; gap: 6px; margin: .2em 0 1em; }
.page-content .ap-bit {
    display: grid;
    grid-template-rows: auto auto;
    justify-items: center;
    gap: 2px;
    width: 52px;
    padding: .45em 0 .35em;
    font: 700 1.35rem/1 var(--font-mono);
    color: var(--ink);
    background: #fff;
    border: 2px solid var(--line-strong);
    border-radius: 10px;
    cursor: pointer;
    transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.page-content .ap-bit small { font: 600 .66rem var(--font-mono); color: var(--muted); }
.page-content .ap-bit.is-1 { color: #fff; background: var(--acc); border-color: var(--acc); }
.page-content .ap-bit.is-1 small { color: rgba(255, 255, 255, .85); }
.page-content .ap-bit.is-msb { box-shadow: 0 0 0 3px #fde68a; }
.page-content .ap-letture { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); gap: .6em; }
.page-content .ap-lettura { padding: .6em .8em; background: #fff; border: 1px solid var(--line); border-radius: 10px; }
.page-content .ap-lettura .ap-label { margin-bottom: .15em; }
.page-content .ap-lettura b { display: block; font: 700 1.2rem var(--font-mono); color: var(--ink); }
.page-content .ap-lettura span { display: block; margin-top: .15em; font-size: .8rem; line-height: 1.4; color: var(--muted); }

/* ---------------- Campi IEEE 754 ---------------- */
.page-content .ap-campi { display: flex; flex-wrap: wrap; gap: 4px; margin: .4em 0 1em; font: 600 1rem var(--font-mono); }
.page-content .ap-campo { padding: .35em .5em; border-radius: 8px; word-break: break-all; }
.page-content .ap-campo small { display: block; font: 600 .66rem var(--font-sans); letter-spacing: .03em; text-transform: uppercase; }
.page-content .ap-campo.is-s { color: #7f1d1d; background: #fee2e2; }
.page-content .ap-campo.is-e { color: #14532d; background: #dcfce7; }
.page-content .ap-campo.is-m { color: #1e3a8a; background: #dbeafe; flex: 1 1 180px; }

/* ---------------- Grafico di crescita ---------------- */
.page-content .ap-grafico svg { display: block; width: 100%; height: auto; font-family: var(--font-sans); }
.page-content .ap-legenda { display: flex; flex-wrap: wrap; gap: .4em .9em; margin: .6em 0 0; font-size: .85rem; }
.page-content .ap-legenda label { display: inline-flex; align-items: center; gap: .35em; cursor: pointer; }
.page-content .ap-legenda i { display: inline-block; width: 16px; height: 4px; border-radius: 2px; }

/* ---------------- Quiz ---------------- */
.page-content .ap-quiz-q + .ap-quiz-q { margin-top: 1.4em; padding-top: 1.2em; border-top: 1px solid var(--line); }
.page-content .ap-quiz-text { margin: 0 0 .7em; font-weight: 600; color: var(--ink); }
.page-content .ap-quiz-opts { display: grid; gap: .45em; }
.page-content .ap-quiz-opt {
    padding: .65em .9em;
    font: .94rem/1.5 var(--font-sans);
    text-align: left;
    color: var(--text);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}
.page-content .ap-quiz-opt:hover:not(:disabled) { border-color: var(--acc); }
.page-content .ap-quiz-opt:disabled { cursor: default; }
.page-content .ap-quiz-opt.is-ok { color: #14532d; background: #f0fdf4; border-color: #86efac; }
.page-content .ap-quiz-opt.is-bad { color: #7f1d1d; background: #fff6f6; border-color: #fecaca; }
.page-content .ap-quiz-fb { margin: .7em 0 0; font-size: .93rem; line-height: 1.6; }
.page-content .ap-quiz-fb:empty { display: none; }
.page-content .ap-quiz-fb.is-ok { color: #14532d; }
.page-content .ap-quiz-fb.is-bad { color: #7f1d1d; }
.page-content .ap-quiz-score { margin: 1.2em 0 0; font-weight: 600; color: var(--acc-ink); }
.page-content .ap-quiz-score:empty { display: none; }

@media print {
    .page-content .ap-stepper, .page-content .ap-chips { display: none !important; }
    .page-content .ap-passo { display: block !important; }
    .page-content .ap-w, .page-content .ap-fig { break-inside: avoid; }
}