/* ================================================================
   WEB.CSS — componenti del corso di Progettazione Web
   Demo "codice + browser", strumenti interattivi, blocchi di teoria.
   Richiede style.css. Caricato solo dalle pagine del corso.
================================================================= */

.page-content {
    --web: #c2410c;          /* accento del corso: l'arancio di HTML */
    --web-ink: #9a3412;
    --web-soft: #fff4ed;
    --web-line: #fed7aa;
    --code-bg: #101a2e;
    --code-bg2: #0c1526;
}

/* ================================================================
   DEMO: codice a sinistra, browser a destra
================================================================= */
.page-content .wd {
    margin: 1.8em 0;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: var(--shadow-xs);
    overflow: hidden;
}
.page-content .wd-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .35em .7em;
    padding: .75em 1.1em;
    background: #fbfbfc;
    border-bottom: 1px solid var(--line);
}
.page-content .wd-head .wx-title { color: var(--web); }
.page-content .wd-head .wx-sub { margin: 0; }

.page-content .wd-body {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
}
.page-content .wd.is-stack .wd-body { grid-template-columns: minmax(0, 1fr); }

/* pannello del codice */
.page-content .wd-code {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--code-bg);
}
.page-content .wd-tabs {
    display: flex;
    gap: 2px;
    padding: .45em .55em 0;
    background: var(--code-bg2);
}
.page-content .wd-tab {
    padding: .42em .85em;
    font: 600 .76rem/1.2 var(--font-mono);
    color: #a3b1c6;
    background: transparent;
    border: 0;
    border-radius: 8px 8px 0 0;
    cursor: pointer;
}
.page-content .wd-tab:hover { color: #fff; }
.page-content .wd-tab[aria-selected="true"] { color: #fff; background: var(--code-bg); }

.page-content .wd-editor {
    position: relative;
    flex: 1 1 auto;
    min-height: 64px;
}
.page-content .wd-editor .wd-hl,
.page-content .wd-editor .wd-ta {
    margin: 0;
    padding: .95em 1.05em 1.1em;
    font: .84rem/1.6 var(--font-mono);
    letter-spacing: 0;
    tab-size: 2;
    white-space: pre-wrap;          /* le righe lunghe vanno a capo: tutto il codice resta visibile */
    overflow-wrap: anywhere;
    word-break: normal;
    border: 0;
    border-radius: 0;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
}
.page-content .wd-editor .wd-hl {
    position: absolute;
    inset: 0;
    overflow: hidden;
    color: #dbe4f0;
    background: transparent;
    pointer-events: none;
}
.page-content .wd-editor .wd-ta {
    position: relative;
    display: block;
    overflow: hidden;
    resize: none;
    color: transparent;
    background: transparent;
    caret-color: #fff;
    outline: none;
}
.page-content .wd-editor .wd-ta::selection { background: rgba(138, 180, 255, .3); color: transparent; }
.page-content .wd-editor .wd-ta:focus-visible { box-shadow: inset 0 0 0 2px rgba(138, 180, 255, .45); }
.page-content .wd-editor .wd-ta::-webkit-scrollbar { height: 8px; width: 8px; }
.page-content .wd-editor .wd-ta::-webkit-scrollbar-thumb { background: #33415c; border-radius: 4px; }

.page-content .wd-tools {
    display: flex;
    align-items: center;
    gap: .4em;
    padding: .45em .6em .45em .9em;
    background: var(--code-bg2);
    border-top: 1px solid rgba(255, 255, 255, .06);
}
.page-content .wd-hint { margin-right: auto; font-size: .74rem; color: #a3b1c6; }
.page-content .wx-btn.wd-tool {
    padding: .3em .7em;
    font-size: .74rem;
    color: #dbe4f0;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .14);
}
.page-content .wx-btn.wd-tool:hover { color: #fff; background: rgba(255, 255, 255, .16); }

/* albero DOM */
.page-content .wd-dom {
    flex: 1;
    max-height: 440px;
    overflow: auto;
    padding: .8em 1em 1em;
    font: .8rem/1.55 var(--font-mono);
    color: #dbe4f0;
}
.page-content .wd-tree,
.page-content .wd-tree ul { list-style: none; margin: 0; padding: 0; }
.page-content .wd-tree ul { margin-left: .55em; padding-left: .9em; border-left: 1px dashed #33415c; }
.page-content .wd-tree li { margin: .12em 0; }
.page-content .wd-tree-el { cursor: default; padding: 0 .25em; border-radius: 4px; }
.page-content .wd-tree-el:hover { background: rgba(249, 115, 22, .22); }
.page-content .wd-tree-text { color: #a3b1c6; font-style: italic; }

/* finto browser */
.page-content .wd-browser {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: #fff;
    border-left: 1px solid var(--line);
}
.page-content .wd.is-stack .wd-browser { border-left: 0; border-top: 1px solid var(--line); }
.page-content .wd-bar {
    display: flex;
    align-items: center;
    gap: .55em;
    padding: .42em .65em;
    background: #eef0f3;
    border-bottom: 1px solid #e0e4ea;
}
.page-content .wd-dots { display: inline-flex; gap: 5px; flex-shrink: 0; }
.page-content .wd-dots i { width: 9px; height: 9px; border-radius: 50%; background: #f87171; }
.page-content .wd-dots i:nth-child(2) { background: #fbbf24; }
.page-content .wd-dots i:nth-child(3) { background: #34d399; }
.page-content .wd-tabname {
    flex-shrink: 0;
    max-width: 38%;
    overflow: hidden;
    padding: .18em .6em;
    font-size: .74rem;
    font-weight: 600;
    color: #344054;
    white-space: nowrap;
    text-overflow: ellipsis;
    background: #fff;
    border-radius: 7px 7px 0 0;
}
.page-content .wd-address {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    padding: .18em .75em;
    font: .74rem var(--font-mono);
    color: #475467;
    white-space: nowrap;
    text-overflow: ellipsis;
    background: #fff;
    border: 1px solid #dde2e8;
    border-radius: 999px;
}
.page-content .wd-view { position: relative; flex: 1; }
.page-content .wd-view.is-sized { padding: 10px 0; background: repeating-linear-gradient(45deg, #f3f4f6 0 8px, #eceef1 8px 16px); }
.page-content .wd-view.is-sized .wd-frame { margin: 0 auto; box-shadow: 0 0 0 1px #d0d5dd, 0 6px 16px -8px rgba(15, 23, 42, .35); }
.page-content .wd-sizes { display: inline-flex; flex-shrink: 0; gap: 2px; padding: 2px; background: #dfe3e8; border-radius: 8px; }
.page-content .wd-size { padding: .15em .5em; font: 600 .7rem var(--font-sans); color: #344054; background: transparent; border: 0; border-radius: 6px; cursor: pointer; }
.page-content .wd-size.is-on { color: var(--ink); background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
.page-content .wd-frame {
    display: block;
    width: 100%;
    height: 120px;
    border: 0;
    background: #fff;
}
.page-content .wd-toast {
    position: absolute;
    left: .6em;
    right: .6em;
    bottom: .6em;
    padding: .55em .8em;
    font-size: .8rem;
    line-height: 1.45;
    word-break: break-all;
    color: #fff;
    background: rgba(15, 23, 42, .93);
    border-radius: 10px;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .2s ease, transform .2s ease;
    pointer-events: none;
}
.page-content .wd-toast.on { opacity: 1; transform: none; }

.page-content .wd-note {
    margin: 0;
    padding: .85em 1.1em;
    font-size: .92rem;
    line-height: 1.6;
    color: var(--text);
    background: #fcfcfd;
    border-top: 1px solid var(--line);
}

@media (max-width: 1100px) {
    .page-content .wd-body { grid-template-columns: minmax(0, 1fr); }
    .page-content .wd-browser { border-left: 0; border-top: 1px solid var(--line); }
}

/* ================================================================
   COLORI DELLA SINTASSI (su fondo scuro)
================================================================= */
.t-tag   { color: #8ab4ff; }
.t-attr  { color: #f7c28b; }
.t-val   { color: #9fe0a8; }
.t-pun   { color: #8b99ae; }
.t-com   { color: #8792a8; font-style: italic; }
.t-ent   { color: #f0abfc; }
.t-doc   { color: #c4b5fd; }
.t-sel   { color: #8ab4ff; }
.t-pseudo{ color: #c4b5fd; }
.t-prop  { color: #7dd3fc; }
.t-var   { color: #fda4af; }
.t-num   { color: #efa6e6; }
.t-str   { color: #9fe0a8; }
.t-fn    { color: #fcd34d; }
.t-at    { color: #f9a8d4; }
.t-kw    { color: #dbe4f0; }

/* blocco di codice statico evidenziato */
.page-content pre.web-code {
    margin: 1.4em 0;
    padding: 1em 1.2em;
    overflow-x: auto;
    font: .86rem/1.65 var(--font-mono);
    color: #dbe4f0;
    background: var(--code-bg);
    border-radius: 12px;
}

/* ================================================================
   STRUMENTI INTERATTIVI: contenitore comune
================================================================= */
.page-content .wx {
    margin: 2em 0;
    padding: 1.25em 1.35em 1.4em;
    background: linear-gradient(180deg, #fffdfb, #fbf8f5);
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: var(--shadow-xs);
}
.page-content .wx-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35em .7em; margin-bottom: 1em; }
.page-content .wx-title {
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--web);
}
.page-content .wx-sub { margin: 0 0 .8em; font-size: .95rem; line-height: 1.55; color: var(--muted); }
.page-content .wx-head .wx-sub { margin: 0; }
.page-content .wx-label { display: block; margin-bottom: .3em; font-size: .78rem; font-weight: 600; color: var(--muted); }
.page-content .wx-mono { font-family: var(--font-mono); }
.page-content .wx-dim { color: #5b6472; }
.page-content .wx-bad { color: #b42318; font-weight: 600; }

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

.page-content .wx-input,
.page-content .wx-select {
    width: 100%;
    padding: .6em .8em;
    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 .wx-input.wx-mono { font-family: var(--font-mono); font-size: .9rem; }
.page-content .wx-input:focus,
.page-content .wx-select:focus { outline: none; border-color: var(--web); box-shadow: 0 0 0 3px rgba(194, 65, 12, .15); }
.page-content .wx-input.is-bad { border-color: #b42318; box-shadow: 0 0 0 3px rgba(180, 35, 24, .12); }

.page-content .wx-row { display: flex; align-items: center; gap: .7em; }
.page-content .wx-row .wx-input { flex: 1; }
.page-content .wx-pill {
    flex-shrink: 0;
    padding: .3em .8em;
    font-size: .82rem;
    font-weight: 600;
    color: var(--muted);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 999px;
}
.page-content .wx-pill.is-ok { color: #9a3412; background: var(--web-soft); border-color: var(--web-line); }
.page-content .wx-pill.is-bad { color: #b42318; background: #fff6f6; border-color: #fecaca; }

.page-content .wx-chips { display: flex; flex-wrap: wrap; gap: .4em; margin: .8em 0; }
.page-content .wx-chip {
    padding: .3em .75em;
    font-size: .8rem;
    color: #344054;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 999px;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}
.page-content .wx-chip:hover { border-color: var(--web); color: var(--web-ink); }
.page-content .wx-chip.is-on { color: #fff; background: var(--web); border-color: var(--web); }

.page-content .wx-seg {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 2px;
    margin: .6em 0 1em;
    padding: 3px;
    background: #efeae5;
    border-radius: 10px;
}
.page-content .wx-seg-btn {
    padding: .42em .85em;
    font: 600 .82rem var(--font-sans);
    color: #3a3a3f;
    background: transparent;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
}
.page-content .wx-seg-btn.wx-mono { font-family: var(--font-mono); font-size: .78rem; }
.page-content .wx-seg-btn.is-on { color: var(--ink); background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }

.page-content .wx-explain {
    margin: .9em 0 0;
    padding: .75em 1em;
    font-size: .93rem;
    line-height: 1.6;
    color: var(--text);
    background: #fff;
    border-left: 3px solid var(--web);
    border-radius: 0 10px 10px 0;
}
.page-content .wx-explain:empty { display: none; }
.page-content .wx-verdict { margin: 1em 0 0; font-size: .95rem; line-height: 1.6; color: var(--text); }

.page-content .wx-controls-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: .8em 1.1em;
    margin-bottom: .9em;
}
.page-content .wx-field { display: flex; flex-direction: column; }
.page-content .wx-range { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .15em .6em; }
.page-content .wx-range-k { grid-column: 1 / -1; font-size: .8rem; font-weight: 600; color: var(--muted); }
.page-content .wx-range input { width: 100%; accent-color: var(--web); }
.page-content .wx-range-v { font: 600 .82rem var(--font-mono); color: var(--ink); min-width: 4.2em; text-align: right; }
.page-content .wx-check { display: flex; align-items: center; gap: .4em; margin: 0 0 .8em; font-size: .9rem; color: var(--text); }
.page-content .wx-check input { accent-color: var(--web); }

.page-content .wx-code {
    margin: 1em 0 0;
    padding: .9em 1.1em;
    overflow-x: auto;
    font: .84rem/1.6 var(--font-mono);
    color: #dbe4f0;
    background: var(--code-bg);
    border-radius: 12px;
}

.page-content .wx-cols2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.2em; }
.page-content .wx-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin-top: 1em; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.page-content .wx-split .wd-editor { background: var(--code-bg); min-height: 200px; height: auto !important; }
.page-content .wx-split .wd-browser { border-left: 1px solid var(--line); }
@media (max-width: 900px) {
    .page-content .wx-split { grid-template-columns: minmax(0, 1fr); }
    .page-content .wx-split .wd-browser { border-left: 0; border-top: 1px solid var(--line); }
}

.page-content .wx-table { width: 100%; min-width: 0; border-collapse: collapse; font-size: .88rem; background: #fff; }
.page-content .wx-scroll { max-width: 100%; overflow-x: auto; }
.page-content .wx-scroll > .wx-lpm-table { min-width: 560px; }
.page-content .wx-table th,
.page-content .wx-table td { padding: .5em .7em; text-align: left; border: 1px solid var(--line); }
.page-content .wx-table th { color: var(--ink); background: #f7f7f9; }

/* ---------------- specificità ---------------- */
.page-content .wx-spec { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: .6em; }
.page-content .wx-spec-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: .55em .3em;
    text-align: center;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
}
.page-content .wx-spec-cell.is-on { background: var(--web-soft); border-color: var(--web-line); }
.page-content .wx-spec-n { font: 700 1.5rem/1.1 var(--font-mono); color: var(--ink); }
.page-content .wx-spec-cell.is-on .wx-spec-n { color: var(--web-ink); }
.page-content .wx-spec-k { margin-top: .2em; font-size: .7rem; line-height: 1.3; color: var(--muted); }
.page-content .wx-spec-cell.is-inline { background: #fbfbfc; }

/* ---------------- URL ---------------- */
.page-content .wx-url-line {
    margin: .9em 0;
    padding: .7em .9em;
    overflow-x: auto;
    font: 600 .92rem var(--font-mono);
    white-space: nowrap;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
}
.page-content .wx-url-line span { padding: .15em .1em; border-radius: 4px; }
.wx-url-schema    { background: #fde2e2; color: #9b1c1c; }
.wx-url-sep       { color: #667085; }
.wx-url-utente    { background: #f2f4f7; color: #344054; }
.wx-url-host      { background: #dbeafe; color: #1e40af; }
.wx-url-porta     { background: #ede9fe; color: #5b21b6; }
.wx-url-percorso  { background: #dcfce7; color: #166534; }
.wx-url-query     { background: #fef3c7; color: #92400e; }
.wx-url-frammento { background: #fce7f3; color: #9d174d; }
.page-content .wx-url-parts { display: grid; gap: .45em; }
.page-content .wx-url-row { display: grid; grid-template-columns: 7.5em minmax(0, auto) 1fr; align-items: baseline; gap: .6em; font-size: .9rem; }
.page-content .wx-url-tag { justify-self: start; padding: .1em .55em; font-size: .75rem; font-weight: 700; border-radius: 999px; }
.page-content .wx-url-row code { font-size: .86rem; overflow-wrap: anywhere; }
.page-content .wx-url-why { color: var(--muted); font-size: .86rem; }
.page-content .wx-url-params { margin-top: .6em; max-width: 420px; }
@media (max-width: 700px) {
    .page-content .wx-url-row { grid-template-columns: 1fr; gap: .15em; margin-bottom: .4em; }
}

/* ---------------- percorsi ---------------- */
.page-content .wx-tree-box { padding: .8em 1em; background: #fff; border: 1px solid var(--line); border-radius: 12px; }
.page-content .wx-tree-root { font: 700 .86rem var(--font-mono); color: var(--ink); margin-bottom: .3em; }
.page-content .wx-tree,
.page-content .wx-tree ul { list-style: none; margin: 0; padding: 0; }
.page-content .wx-tree ul { margin-left: .5em; padding-left: 1em; border-left: 1px dashed var(--line-strong); }
.page-content .wx-tree li { margin: .12em 0; }
.page-content .wx-tree-dir { font: 600 .84rem var(--font-mono); color: #1e40af; }
.page-content .wx-tree-dir::before { content: "▸ "; color: #98a2b3; }
.page-content .wx-tree-file {
    display: inline-flex;
    align-items: center;
    gap: .4em;
    padding: .12em .45em;
    font: .84rem var(--font-mono);
    color: var(--ink-soft);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
}
.page-content .wx-tree-file:hover { background: #f7f7f9; border-color: var(--line); }
.page-content .wx-tree-file.is-da { background: #eef4ff; border-color: #c7d7fe; }
.page-content .wx-tree-file.is-a { background: var(--web-soft); border-color: var(--web-line); }
.page-content .wx-tree-badge { padding: .05em .45em; font: 700 .64rem var(--font-sans); letter-spacing: .03em; text-transform: uppercase; color: #fff; background: #3b5bdb; border-radius: 999px; }
.page-content .wx-tree-file.is-a .wx-tree-badge { background: var(--web); }
.page-content .wx-paths-out { font-size: .92rem; }
.page-content .wx-paths-main { padding: .8em 1em; background: var(--code-bg); border-radius: 12px; }
.page-content .wx-paths-main .wx-label { color: #a3b1c6; }
.page-content .wx-paths-code { display: block; font: .95rem var(--font-mono); color: #dbe4f0; background: none; border: 0; padding: 0; }
.page-content .wx-steps { margin: .9em 0; padding-left: 1.3em; line-height: 1.65; }
.page-content .wx-paths-alt p { margin: .35em 0; font-size: .88rem; color: var(--muted); }

/* ---------------- box model ---------------- */
.page-content .wx-box-stage { display: flex; justify-content: center; padding: 1em 0; overflow-x: auto; }
.page-content .bx-margin,
.page-content .bx-border,
.page-content .bx-padding { position: relative; }
.page-content .bx-margin  { background: #fde5c8; border: 1px dashed #e8a55a; }
.page-content .bx-border  { background: #fcd34d; }
.page-content .bx-padding { background: #bbf7d0; }
.page-content .bx-content {
    display: grid;
    place-items: center;
    height: 80px;
    font: 600 .82rem var(--font-mono);
    color: #1e3a8a;
    background: #bfdbfe;
    transition: width .15s ease;
}
.page-content .wx-box-stage { flex-direction: column; align-items: center; gap: .8em; }
.page-content .bx-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: .4em 1em; font: .78rem var(--font-mono); color: var(--text); }
.page-content .bx-leg { display: inline-flex; align-items: center; gap: .35em; }
.page-content .bx-leg i { width: 12px; height: 12px; border-radius: 3px; border: 1px solid rgba(0, 0, 0, .12); }
.page-content .bx-k-margin { background: #fde5c8; }
.page-content .bx-k-border { background: #fcd34d; }
.page-content .bx-k-padding { background: #bbf7d0; }
.page-content .bx-k-content { background: #bfdbfe; }
.page-content .wx-formula { margin: .4em 0 0; font-size: .92rem; line-height: 1.6; color: var(--text); }

/* ---------------- laboratori flex e grid ---------------- */
.page-content .wx-lab-stage {
    padding: 12px;
    min-height: 180px;
    background:
        repeating-linear-gradient(45deg, #fbf7f3 0 10px, #f6efe8 10px 20px);
    border: 1px dashed #e6c7ad;
    border-radius: 12px;
    overflow: auto;
}
.page-content .lab-container {
    min-height: 160px;
    background: rgba(255, 255, 255, .55);
    outline: 2px solid #f0b58a;
    border-radius: 6px;
}
.page-content .is-grid .lab-container { min-height: 0; }
.page-content .lab-item {
    display: grid;
    place-items: center;
    min-width: 36px;
    min-height: 36px;
    font: 700 .95rem var(--font-mono);
    color: #fff;
    background: #c2410c;            /* abbastanza scuro per il testo bianco */
    border-radius: 8px;
    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .12);
}
.page-content .lab-item:nth-child(3n+2) { background: #a3360a; }
.page-content .lab-item:nth-child(3n) { background: #7c2d12; }
.page-content .lab-item.is-special { background: #1d4ed8; }
.page-content .is-grid .lab-item { min-height: 48px; }

/* ---------------- colori ---------------- */
.page-content .wx-colors-body { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 1.1em; align-items: stretch; }
.page-content .wx-swatch {
    display: grid;
    place-items: center;
    min-height: 150px;
    font: 800 2.2rem var(--font-sans);
    border-radius: 14px;
    border: 1px solid var(--line);
    background:
        linear-gradient(var(--c), var(--c)),
        repeating-conic-gradient(#e5e7eb 0 25%, #fff 0 50%) 0 0 / 18px 18px;
}
.page-content .wx-notations { display: grid; gap: .45em; }
.page-content .wx-notation { display: grid; grid-template-columns: 9.5em 1fr; align-items: center; gap: .5em; }
.page-content .wx-notation .wx-label { margin: 0; }
.page-content .wx-notation code { font-size: .88rem; }
@media (max-width: 640px) { .page-content .wx-colors-body { grid-template-columns: 1fr; } }

/* ---------------- em / rem ---------------- */
.page-content .wx-em-stage { margin-top: .4em; }
.page-content .em-box { margin-top: .6em; padding: .6em .8em .7em; background: #fff; border: 1px solid var(--line); border-radius: 12px; }
.page-content .em-box .em-box { background: #fffaf5; }
.page-content .em-box .em-box .em-box { background: #fff4ea; }
.page-content .em-tag { display: block; margin-bottom: .2em; font: 600 .76rem var(--font-mono); color: var(--web-ink); }
.page-content .em-line { display: flex; align-items: baseline; justify-content: space-between; gap: 1em; }
.page-content .em-sample { font-weight: 700; line-height: 1.2; color: var(--ink); }
.page-content .em-px { font: 600 .8rem var(--font-mono); color: var(--muted); }

/* ---------------- barre (ritardi, cache) ---------------- */
.page-content .wx-delay-out { display: grid; gap: .8em; }
.page-content .wx-bar-row { display: grid; grid-template-columns: 9em 1fr 6.5em; align-items: center; gap: .3em .8em; }
.page-content .wx-bar-k { font-size: .88rem; font-weight: 600; color: var(--ink); }
.page-content .wx-bar-track { height: 12px; background: #efeae5; border-radius: 999px; overflow: hidden; }
.page-content .wx-bar-fill { display: block; height: 100%; background: var(--web); border-radius: 999px; transition: width .25s ease; }
.page-content .wx-bar-fill.is-warn { background: #b45309; }
.page-content .wx-bar-fill.is-bad { background: #b42318; }
.page-content .wx-bar-v { font: 700 .88rem var(--font-mono); text-align: right; color: var(--ink); }
.page-content .wx-bar-why { grid-column: 2 / -1; font-size: .82rem; color: var(--muted); }
@media (max-width: 640px) {
    .page-content .wx-bar-row { grid-template-columns: 1fr auto; }
    .page-content .wx-bar-track { grid-column: 1 / -1; grid-row: 2; }
    .page-content .wx-bar-why { grid-column: 1 / -1; }
}

/* ---------------- longest prefix match ---------------- */
.page-content .wx-lpm-table td:first-child { white-space: nowrap; font-size: .82rem; }
.page-content .wx-lpm-table mark { padding: 0; color: #9a3412; background: #ffedd5; }
.page-content .wx-lpm-table tr.is-ok td { background: #fffaf5; }
.page-content .wx-lpm-table tr.is-best td { background: var(--web-soft); font-weight: 600; }

/* ---------------- passo-passo ---------------- */
.page-content .wx-stepper { display: flex; flex-wrap: wrap; align-items: center; gap: .5em; margin-top: 1em; }
.page-content .wx-step-count { margin-left: auto; font: 600 .8rem var(--font-mono); color: var(--muted); }

/* ---------------- incapsulamento ---------------- */
.page-content .wx-enc-stage { display: grid; grid-template-columns: 1fr 1.6fr 1fr; align-items: center; gap: 1em; }
.page-content .enc-stack { display: grid; gap: 4px; }
.page-content .enc-host { font-size: .78rem; font-weight: 700; text-align: center; color: var(--muted); }
.page-content .enc-layer {
    padding: .45em .5em;
    font-size: .8rem;
    font-weight: 600;
    text-align: center;
    color: #475467;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 8px;
    transition: background-color .2s ease, color .2s ease;
}
.page-content .enc-layer.is-on { color: #fff; background: var(--web); border-color: var(--web); }
.page-content .enc-center { display: flex; flex-direction: column; align-items: center; gap: .5em; }
.page-content .enc-name { font-size: .8rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--web-ink); }
.page-content .enc-packet { display: flex; border-radius: 8px; overflow: hidden; box-shadow: var(--shadow-sm); }
.page-content .enc-packet span { padding: .55em .75em; font: 700 .9rem var(--font-mono); color: #fff; }
.page-content .enc-m  { background: #475467; min-width: 5em; text-align: center; }
.page-content .enc-ht { background: #1d4ed8; }
.page-content .enc-hn { background: #7c3aed; }
.page-content .enc-hl { background: #0f766e; }
.page-content .enc-dir { font-size: .8rem; color: var(--muted); }
@media (max-width: 640px) { .page-content .wx-enc-stage { grid-template-columns: 1fr 1fr; } .page-content .enc-center { grid-column: 1 / -1; grid-row: 1; } }

/* ---------------- NAT ---------------- */
.page-content .wx-nat-stage { position: relative; }
.page-content .nat-row { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.5fr) minmax(0, .9fr); gap: .8em; align-items: start; }
.page-content .nat-zone,
.page-content .nat-router { display: grid; grid-template-columns: minmax(0, 1fr); gap: .35em; min-width: 0; padding: .8em; background: #fff; border: 1px solid var(--line); border-radius: 12px; }
.page-content .nat-router { border-color: var(--web-line); background: #fffaf5; }
.page-content .nat-title { font-size: .76rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--muted); }
.page-content .nat-host { padding: .25em .5em; font: .82rem var(--font-mono); color: #475467; background: #f7f7f9; border-radius: 6px; }
.page-content .nat-host.is-on { color: var(--ink); background: #eef4ff; }
.page-content .nat-ip { font: 600 .82rem var(--font-mono); color: var(--web-ink); }
.page-content .nat-table { font-size: .74rem; table-layout: fixed; }
.page-content .nat-table th, .page-content .nat-table td { padding: .4em .5em; overflow-wrap: anywhere; }
.page-content .nat-host { overflow-wrap: anywhere; }
.page-content .nat-table td { font-family: var(--font-mono); }
.page-content .nat-table tr.is-empty td { color: transparent; background: repeating-linear-gradient(45deg, #fafafa 0 6px, #f3f4f6 6px 12px); }
.page-content .nat-packet {
    display: inline-flex;
    flex-direction: column;
    gap: .15em;
    margin-top: .9em;
    padding: .55em .8em;
    font: .82rem var(--font-mono);
    color: #fff;
    background: #1d4ed8;
    border-radius: 10px;
    box-shadow: var(--shadow-sm);
}
.page-content .nat-packet.is-wan { margin-left: 52%; }
.page-content .nat-packet.is-lan { margin-left: 4%; }
.page-content .nat-packet.is-back { background: #0f766e; }
@media (max-width: 700px) { .page-content .nat-row { grid-template-columns: 1fr; } .page-content .nat-packet.is-wan, .page-content .nat-packet.is-lan { margin-left: 0; } }

/* ---------------- HTTP ---------------- */
.page-content .wx-http-body { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1em; }
.page-content .http-pane { overflow: hidden; background: var(--code-bg); border-radius: 12px; }
.page-content .http-head { display: flex; justify-content: space-between; gap: .6em; padding: .55em .9em; font-size: .78rem; color: #a3b1c6; background: var(--code-bg2); }
.page-content .http-head strong { color: #fff; }
.page-content .http-lines { display: flex; flex-direction: column; padding: .5em 0; }
.page-content .http-line {
    display: block;
    width: 100%;
    padding: .2em .9em;
    font: .82rem/1.55 var(--font-mono);
    text-align: left;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    color: #dbe4f0;
    background: transparent;
    border: 0;
    border-left: 3px solid transparent;
    cursor: pointer;
}
.page-content .http-line:disabled { cursor: default; color: #a3b1c6; }
.page-content .http-line.has-note:hover { background: rgba(255, 255, 255, .06); }
.page-content .http-line.is-on { background: rgba(249, 115, 22, .16); border-left-color: #fb923c; }
.page-content .http-line:first-child { color: #fcd34d; }
.page-content .http-crlf { color: #8792a8; font-style: italic; }

/* ---------------- DNS ---------------- */
.page-content .wx-dns-stage { padding: .4em; background: #fff; border: 1px solid var(--line); border-radius: 12px; }
.page-content .wx-dns-stage svg { display: block; width: 100%; height: auto; font-family: var(--font-sans); }

/* ---------------- quiz ---------------- */
.page-content .quiz-q + .quiz-q { margin-top: 1.4em; padding-top: 1.2em; border-top: 1px solid var(--line); }
.page-content .quiz-text { margin: 0 0 .7em; font-weight: 600; color: var(--ink); }
.page-content .quiz-opts { display: grid; gap: .45em; }
.page-content .quiz-opt {
    padding: .65em .9em;
    font: .93rem/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 .quiz-opt:hover:not(:disabled) { border-color: var(--web); }
.page-content .quiz-opt:disabled { cursor: default; }
.page-content .quiz-opt.is-ok { color: #14532d; background: #f0fdf4; border-color: #86efac; }
.page-content .quiz-opt.is-bad { color: #7f1d1d; background: #fff6f6; border-color: #fecaca; }
.page-content .quiz-fb { margin: .7em 0 0; font-size: .93rem; line-height: 1.6; }
.page-content .quiz-fb:empty { display: none; }
.page-content .quiz-fb.is-ok { color: #14532d; }
.page-content .quiz-fb.is-bad { color: #7f1d1d; }

/* ================================================================
   BLOCCHI DI TEORIA
================================================================= */
/* scheda "tag in breve": nome, cosa fa, attributi principali */
.page-content .tag-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: .8em; margin: 1.4em 0; }
.page-content .tag-card { padding: .9em 1em; background: #fff; border: 1px solid var(--line); border-radius: 12px; }
.page-content .tag-card > code:first-child {
    display: inline-block;
    margin-bottom: .35em;
    padding: .1em .45em;
    font-size: .88rem;
    font-weight: 600;
    color: #1e40af;
    background: #eef4ff;
    border: 1px solid #d7e3ff;
    border-radius: 6px;
}
.page-content .tag-card p { margin: 0; font-size: .9rem; line-height: 1.55; color: var(--text); }

/* confronto a due colonne: sbagliato / giusto */
.page-content .web-compare { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1em; margin: 1.4em 0; }
.page-content .web-bad,
.page-content .web-good { padding: .9em 1.1em; border-radius: 12px; }
.page-content .web-bad { background: #fff6f6; border: 1px solid #fecaca; }
.page-content .web-good { background: #f2fbf5; border: 1px solid #bbf7d0; }
.page-content .web-bad > h5,
.page-content .web-good > h5 { margin: 0 0 .5em; font-size: .82rem; letter-spacing: .03em; text-transform: uppercase; }
.page-content .web-bad > h5 { color: #b42318; }
.page-content .web-good > h5 { color: #187a40; }
.page-content .web-bad pre.web-code,
.page-content .web-good pre.web-code { margin: .4em 0 0; font-size: .8rem; }
/* confronto neutro: due alternative, nessuna sbagliata */
.page-content .web-side { padding: .9em 1.1em; background: #fbfbfc; border: 1px solid var(--line); border-radius: 12px; }
.page-content .web-side > h5 { margin: 0 0 .5em; font-size: .82rem; letter-spacing: .03em; text-transform: uppercase; color: var(--web-ink); }
.page-content .web-bad > :last-child,
.page-content .web-good > :last-child,
.page-content .web-side > :last-child { margin-bottom: 0; }
.page-content .web-bad ul,
.page-content .web-good ul,
.page-content .web-side ul { margin: .4em 0; padding-left: 1.2em; }
.page-content .web-side p,
.page-content .web-side li,
.page-content .web-bad p,
.page-content .web-good p { font-size: .95rem; }

/* citazione */
.page-content blockquote {
    margin: 1.4em 0;
    padding: .7em 1.2em;
    font-style: italic;
    color: var(--text);
    background: #fbfbfc;
    border-left: 3px solid var(--web);
    border-radius: 0 10px 10px 0;
}

/* definizione in evidenza */
.page-content .web-def {
    margin: 1.4em 0;
    padding: 1em 1.2em;
    background: var(--web-soft);
    border: 1px solid var(--web-line);
    border-left: 4px solid var(--web);
    border-radius: 12px;
}
.page-content .web-def > :first-child { margin-top: 0; }
.page-content .web-def > :last-child { margin-bottom: 0; }
.page-content .web-def strong:first-child { color: var(--web-ink); }

/* figura con didascalia per gli schemi SVG */
.page-content .web-figure { margin: 1.6em 0; padding: 1em; background: #fff; border: 1px solid var(--line); border-radius: 14px; }
.page-content .web-figure svg { display: block; width: 100%; height: auto; font-family: var(--font-sans); }
.page-content .web-figure figcaption { margin-top: .6em; font-size: .86rem; line-height: 1.5; color: var(--muted); text-align: center; }

/* chip di stato HTTP */
.page-content .st { display: inline-block; min-width: 2.8em; padding: .05em .45em; font: 700 .82rem var(--font-mono); text-align: center; border-radius: 6px; }
.page-content .st-1 { color: #344054; background: #f2f4f7; }
.page-content .st-2 { color: #14532d; background: #dcfce7; }
.page-content .st-3 { color: #1e3a8a; background: #dbeafe; }
.page-content .st-4 { color: #92400e; background: #fef3c7; }
.page-content .st-5 { color: #7f1d1d; background: #fee2e2; }

@media print {
    .page-content .wd-tools,
    .page-content .wx-stepper,
    .page-content .wx-chips { display: none !important; }
    .page-content .wd,
    .page-content .wx { break-inside: avoid; }
}

/* sui telefoni gli schemi larghi scorrono invece di rimpicciolirsi fino a diventare illeggibili */
@media (max-width: 640px) {
    .page-content .web-figure { overflow-x: auto; padding: .8em; }
    .page-content .web-figure svg { min-width: 520px; }
    .page-content .web-figure figcaption { position: sticky; left: 0; max-width: calc(100vw - 80px); text-align: left; }
}

/* niente legature tipografiche nel codice: <!-- e --> restano leggibili come si scrivono */
.page-content pre,
.page-content code,
.page-content kbd,
.page-content samp,
.page-content .wd-ta,
.page-content .wx-input { font-variant-ligatures: none !important; font-feature-settings: "calt" 0, "liga" 0 !important; } /* !important: la scorciatoia font azzera queste proprietà */

/* nelle tabelle di riferimento il nome in prima colonna non va spezzato */
.page-content td:first-child > code:only-child { white-space: nowrap; }

/* ================================================================
   JAVASCRIPT, PHP, SQL: colori in più, console, output del server
================================================================= */
.t-key { color: #c9b6ff; }

/* pulsante «Esegui» nelle demo con script */
.page-content .wx-btn.wd-tool.wd-run { color: #fff; background: var(--web); border-color: transparent; }
.page-content .wx-btn.wd-tool.wd-run:hover { background: #ea580c; }
.page-content .wx-btn.wd-tool.wd-run.is-dirty { box-shadow: 0 0 0 3px rgba(249, 115, 22, .45); animation: wd-pulsa 1.6s ease-in-out infinite; }
@keyframes wd-pulsa { 50% { box-shadow: 0 0 0 5px rgba(249, 115, 22, .18); } }
@media (prefers-reduced-motion: reduce) { .page-content .wx-btn.wd-tool.wd-run.is-dirty { animation: none; } }
.page-content .wd-hidden-frame { position: absolute; width: 1px; height: 1px; border: 0; opacity: 0; pointer-events: none; }
.page-content .wd.wd-js,
.page-content .wd.wd-srv { position: relative; }

/* console (sotto l'anteprima, o a destra del codice nei widget js) */
.page-content .wc {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: #0b1322;
    border-top: 1px solid #1e2a40;
}
.page-content .wd-js .wc { border-top: 0; border-left: 1px solid #1e2a40; }
.page-content .wd.is-stack .wc,
.page-content .wd-js.is-stack .wc { border-left: 0; border-top: 1px solid #1e2a40; }
.page-content .wc-bar {
    display: flex;
    align-items: center;
    gap: .6em;
    padding: .4em .8em;
    background: #0e182a;
    border-bottom: 1px solid #1e2a40;
}
.page-content .wc-title { font: 700 .7rem/1.2 var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: #a3b1c6; }
.page-content .wc-url { min-width: 0; overflow: hidden; font: .72rem var(--font-mono); color: #8b99ae; white-space: nowrap; text-overflow: ellipsis; }
.page-content .wc-clear {
    margin-left: auto;
    padding: .15em .6em;
    font: 600 .7rem var(--font-sans);
    color: #a3b1c6;
    background: transparent;
    border: 1px solid #2a3852;
    border-radius: 6px;
    cursor: pointer;
}
.page-content .wc-clear:hover { color: #fff; border-color: #475569; }
.page-content .wc-out {
    flex: 1;
    min-height: 3.2em;
    max-height: 300px;
    overflow: auto;
    padding: .2em 0;
    font: .8rem/1.55 var(--font-mono);
    color: #dbe4f0;
}
.page-content .wd-js .wc-out { max-height: 460px; }
.page-content .wc-empty { padding: .55em .9em; font-family: var(--font-sans); font-size: .78rem; font-style: italic; color: #8792a8; }
.page-content .wc-line {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .2em .8em;
    padding: .28em .9em;
    border-bottom: 1px solid rgba(255, 255, 255, .05);
}
.page-content .wc-text { flex: 1 1 auto; min-width: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.page-content .wc-where { margin-left: auto; font-size: .7rem; color: #8b99ae; white-space: nowrap; }
.page-content .wc-line.is-warn { color: #fde68a; background: rgba(250, 204, 21, .09); }
.page-content .wc-line.is-error { color: #fecaca; background: rgba(239, 68, 68, .13); }
.page-content .wc-line.is-info { color: #bae6fd; }
.page-content .wc-line.is-warn .wc-text::before { content: "⚠ "; }
.page-content .wc-line.is-error .wc-text::before { content: "✖ "; }
.page-content .wc-tscroll { max-width: 100%; overflow-x: auto; }
.page-content .wc-table { border-collapse: collapse; font-size: .76rem; }
.page-content .wc-table th,
.page-content .wc-table td { padding: .15em .6em; text-align: left; border: 1px solid #2a3852; white-space: nowrap; }
.page-content .wc-table th { color: #a3b1c6; background: #111c30; }

/* widget js: codice e console affiancati */
.page-content .wd-js .wd-body { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
.page-content .wd-js.is-stack .wd-body { grid-template-columns: minmax(0, 1fr); }

/* widget server: la scheda con l'HTML ricevuto ha un colore diverso */
.page-content .wd-tab.is-out { color: #fdba74; }
.page-content .wd-tab.is-out[aria-selected="true"] { color: #fed7aa; }
.page-content .wd-term { display: flex; flex-direction: column; min-width: 0; background: #0b1322; border-left: 1px solid #1e2a40; }
.page-content .wd.is-stack .wd-term { border-left: 0; border-top: 1px solid #1e2a40; }
.page-content .wd-term-out {
    flex: 1;
    margin: 0;
    padding: .9em 1.05em;
    overflow: auto;
    font: .82rem/1.6 var(--font-mono);
    color: #dbe4f0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    background: transparent;
    border-radius: 0;
}
@media (max-width: 1100px) {
    .page-content .wd-js .wd-body { grid-template-columns: minmax(0, 1fr); }
    .page-content .wd-js .wc,
    .page-content .wd-term { border-left: 0; border-top: 1px solid #1e2a40; }
}

/* laboratorio di espressioni regolari */
.page-content .wx-re-row { display: flex; align-items: center; gap: .35em; margin-bottom: .8em; }
.page-content .wx-re-slash { font: 700 1.2rem var(--font-mono); color: var(--web); }
.page-content .wx-re-pat { flex: 1 1 auto; min-width: 0; }
.page-content .wx-re-flag { flex: 0 0 5.2em; width: 5.2em; }
.page-content .wx-re-txt { resize: vertical; line-height: 1.55; }
.page-content .wx-re-out { margin: .9em 0 0; padding: 0; list-style: none; }
.page-content .wx-re-out li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .2em .7em;
    margin: 0 0 .35em;
    padding: .45em .75em;
    background: #fff;
    border: 1px solid var(--line);
    border-left-width: 4px;
    border-radius: 8px;
}
.page-content .wx-re-out li.is-ok { border-left-color: #16a34a; }
.page-content .wx-re-out li.is-no { border-left-color: #dc2626; }
.page-content .wx-re-out li.is-err { color: #b42318; border-left-color: #dc2626; }
.page-content .wx-re-esito { font-weight: 700; }
.page-content .is-ok > .wx-re-esito { color: #15803d; }
.page-content .is-no > .wx-re-esito { color: #b42318; }
.page-content .wx-re-str { font-size: .9rem; white-space: pre-wrap; overflow-wrap: anywhere; background: none; border: 0; padding: 0; }
.page-content .wx-re-str mark { padding: 0 1px; color: inherit; background: #fed7aa; border-radius: 3px; box-shadow: inset 0 -2px 0 #f97316; }
.page-content .wx-re-vuoto { display: inline-block; width: 2px; height: 1em; vertical-align: -2px; background: #f97316; }
.page-content .wx-re-gruppi { width: 100%; font: .78rem var(--font-mono); color: var(--muted); }

/* simulatore di SQL injection, RSA, hash */
.page-content .wx-code mark { padding: 0 1px; color: #fff; background: rgba(249, 115, 22, .38); border-radius: 3px; box-shadow: inset 0 -2px 0 #fb923c; }
.page-content .wx-code mark span,
.page-content .wx-code span mark { color: inherit; }
.page-content .wx-sqli .wx-label { margin-top: 1em; }
.page-content .wx-sqli .wx-code { margin-top: .3em; white-space: pre-wrap; }
.page-content .wx-verdict.is-ok { padding: .7em 1em; color: #14532d; background: #f0fdf4; border-radius: 10px; }
.page-content .wx-verdict.is-bad { padding: .7em 1em; color: #7f1d1d; background: #fff1f1; border-radius: 10px; }
.page-content .wx-verdict.is-warn { padding: .7em 1em; color: #78350f; background: #fffbeb; border-radius: 10px; }
.page-content .wx-rsa-out { margin: 1em 0 0; padding-left: 1.4em; line-height: 1.7; }
.page-content .wx-rsa-out li { margin: .25em 0; }
.page-content .wx-rsa-out b { font-family: var(--font-mono); color: var(--web-ink); }
.page-content .wx-rsa-out .wx-rsa-pub { color: #1d4ed8; }
.page-content .wx-rsa-out .wx-rsa-priv { color: #b42318; }
.page-content .wx-hash .wx-check { margin-top: .4em; }
.page-content .wx-hash-l { margin-top: 1.1em; }
.page-content .wx-hash-t code { font-size: .76rem; background: none; border: 0; padding: 0; }
.page-content .wx-hash-v { word-break: break-all; }