/* Shared styles for the dev_b tools (CSS generators, URL & HTTP, SEO, accessibility).
 * Only site colour tokens are used so light and dark themes both work. Status always has text, never colour alone. */

/* ---------- checks / badges ---------- */
.dvb-sum{margin:0 0 10px;font-weight:700}
.dvb-checks{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.dvb-checks li{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:baseline;padding:8px 10px;border:1px solid var(--border);border-left-width:4px;border-radius:var(--r-sm);background:var(--surface)}
.dvb-checks li.c-pass{border-left-color:var(--ok)}
.dvb-checks li.c-warn{border-left-color:var(--warn)}
.dvb-checks li.c-fail{border-left-color:var(--danger)}
.dvb-checks li.c-info{border-left-color:var(--primary)}
.dvb-checks .c-text{flex:1 1 220px;min-width:0;overflow-wrap:anywhere}
.dvb-badge{display:inline-block;font-size:.78rem;font-weight:800;padding:1px 8px;border-radius:99px;white-space:nowrap;border:1px solid currentColor}
.dvb-badge.b-pass{color:var(--ok);background:var(--ok-bg)}
.dvb-badge.b-warn{color:var(--warn);background:var(--warn-bg)}
.dvb-badge.b-fail{color:var(--danger);background:var(--danger-bg)}
.dvb-badge.b-info{color:var(--primary);background:var(--primary-soft)}

/* ---------- preview stage ---------- */
.dvb-stage{position:relative;min-height:220px;display:flex;align-items:center;justify-content:center;padding:28px 16px;border:1px solid var(--border);border-radius:var(--r);
  background-color:#fff;background-image:linear-gradient(45deg,#eef1f6 25%,transparent 25%),linear-gradient(-45deg,#eef1f6 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#eef1f6 75%),linear-gradient(-45deg,transparent 75%,#eef1f6 75%);
  background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0;overflow:hidden}
.dvb-stage.plain{background:var(--surface-2)}
.dvb-cap{font-size:.85rem;color:var(--text-2);margin:8px 0 0}
.dvb-swatch{width:100%;max-width:100%;border-radius:var(--r-sm);border:1px solid var(--border-strong)}
.dvb-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:10px 0 0}
.dvb-mono{font-family:var(--mono);font-size:.9rem;overflow-wrap:anywhere}
.dvb-grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:16px;align-items:start}
.dvb-fig{margin:0;min-width:0}
.dvb-fig figcaption{font-weight:700;font-size:.9rem;margin:0 0 6px}
.dvb-fig img{display:block;max-width:100%;max-height:260px;margin:0 auto;background:#fff}
.dvb-note{font-size:.88rem;color:var(--text-2);margin:8px 0 0}

/* ---------- flexbox / grid playground ---------- */
.dvb-flex,.dvb-gridbox{width:100%;min-height:240px;border:2px dashed var(--border-strong);border-radius:var(--r-sm);padding:8px;background:var(--surface);box-sizing:border-box}
.dvb-item{min-width:44px;min-height:44px;padding:8px 12px;border-radius:6px;border:2px solid transparent;background:var(--primary-soft);color:var(--text);font:inherit;font-weight:700;cursor:pointer;box-sizing:border-box;overflow:hidden;overflow-wrap:anywhere}
.dvb-item:nth-child(3n+2){background:var(--t-teal)}
.dvb-item:nth-child(3n){background:var(--t-orange)}
.dvb-item[aria-pressed="true"]{border-color:var(--primary);outline:2px dashed var(--primary);outline-offset:2px}
.dvb-gridbox .dvb-item{cursor:default;display:flex;align-items:center;justify-content:center;text-align:center}

/* ---------- chmod grid ---------- */
.dvb-perm{border-collapse:collapse;margin:4px 0 6px;min-width:280px}
.dvb-perm th,.dvb-perm td{border:1px solid var(--border);padding:8px 10px;text-align:center}
.dvb-perm thead th{background:var(--surface-2)}
.dvb-perm tbody th{text-align:left}
.dvb-perm input[type=checkbox]{width:22px;height:22px;accent-color:var(--primary);cursor:pointer}
.dvb-perm-wrap{overflow-x:auto;margin-bottom:12px}
.dvb-perm-wrap>p{margin:0 0 6px;font-weight:650;font-size:.92rem}

/* ---------- param editor (URL parser) ---------- */
.dvb-params{display:grid;gap:8px}
.dvb-param{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr) auto;gap:8px;align-items:end}
.dvb-param label{display:block;font-size:.8rem;font-weight:650;color:var(--text-2);margin-bottom:2px}
.dvb-param input{width:100%;font:inherit;font-size:.92rem;color:var(--text);background:var(--bg);border:1px solid var(--border-strong);border-radius:var(--r-sm);padding:8px 10px;min-height:40px;font-family:var(--mono)}
.dvb-param input:focus{border-color:var(--primary);outline:none;box-shadow:0 0 0 3px var(--primary-soft)}
.dvb-param .btn{min-height:40px}
@media (max-width:560px){.dvb-param{grid-template-columns:1fr 1fr}.dvb-param>div:nth-child(2){grid-column:1/-1;grid-row:2}.dvb-param .btn{grid-column:2;grid-row:1;justify-self:end}}
.dvb-custom-box{border:1px solid var(--border);border-radius:var(--r);padding:14px;margin:14px 0;background:var(--surface)}
.dvb-custom-box h3{margin:0 0 10px;font-size:1rem}

/* ---------- bezier editor ---------- */
.dvb-bez-wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:16px;align-items:start;margin:14px 0}
.dvb-bez{width:100%;max-width:340px;height:auto;display:block;touch-action:none;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm);overflow:visible}
.dvb-bez .grid{stroke:var(--border);stroke-width:1}
.dvb-bez .axis{stroke:var(--text-3);stroke-width:1.5}
.dvb-bez .curve{fill:none;stroke:var(--primary);stroke-width:3}
.dvb-bez .lin{fill:none;stroke:var(--text-3);stroke-width:1.5;stroke-dasharray:4 4}
.dvb-bez .arm{stroke:var(--text-2);stroke-width:1.5}
.dvb-bez .handle{fill:var(--surface);stroke:var(--primary);stroke-width:3;cursor:grab}
.dvb-bez .handle.h2{stroke:var(--c-pink)}
.dvb-bez .handle:focus{outline:none;stroke-width:5;fill:var(--primary-soft)}
.dvb-bez text{fill:var(--text-2);font-size:11px;font-family:var(--font)}
.dvb-track{position:relative;height:44px;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--surface-2);margin:6px 0}
.dvb-ball{position:absolute;top:6px;left:6px;width:30px;height:30px;border-radius:50%;background:var(--primary)}
.dvb-ball.lin{background:var(--text-3)}
.dvb-strip{display:flex;gap:2px;align-items:flex-end;height:60px;border-bottom:1px solid var(--border-strong);margin:6px 0}
.dvb-strip span{flex:1 1 0;background:var(--primary);min-width:2px;border-radius:2px 2px 0 0}

/* ---------- clip-path editor ---------- */
.dvb-clip{position:relative;width:min(100%,320px);aspect-ratio:1/1;margin:0 auto}
.dvb-clip .ghost{position:absolute;inset:0;border:2px dashed var(--border-strong);border-radius:4px}
.dvb-clip .shape{position:absolute;inset:0;background:linear-gradient(135deg,#0a5fe0,#c0267a)}
.dvb-clip svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;touch-action:none}
.dvb-clip .pt{fill:#fff;stroke:#0f1b3d;stroke-width:2.5;cursor:grab}
.dvb-clip .pt:focus{outline:none;stroke:#0a5fe0;stroke-width:5}
.dvb-clip .ptn{font-size:11px;font-weight:700;fill:#0f1b3d;paint-order:stroke;stroke:#fff;stroke-width:3px;pointer-events:none}

/* ---------- spinner preview ---------- */
.dvb-spin-stage.is-paused,.dvb-spin-stage.is-paused *{animation-play-state:paused!important}

/* ---------- frames (text spacing / target size) ---------- */
.dvb-frame{display:block;width:100%;max-width:100%;height:320px;border:1px solid var(--border-strong);border-radius:var(--r-sm);background:#fff}
.dvb-frame-wrap{position:relative;max-width:100%;overflow:auto;border-radius:var(--r-sm)}
.dvb-frame-wrap .dvb-overlay{position:absolute;left:0;top:0;pointer-events:none;overflow:visible}
.dvb-overlay .ok{fill:none;stroke:#05713f;stroke-width:2}
.dvb-overlay .bad{fill:rgba(180,35,24,.12);stroke:#b42318;stroke-width:2.5}
.dvb-overlay .sp{fill:rgba(10,95,224,.08);stroke:#0a5fe0;stroke-width:1.5;stroke-dasharray:4 3}
.dvb-overlay .warn{fill:none;stroke:#8a4b00;stroke-width:2;stroke-dasharray:5 3}
.dvb-overlay text{font:700 11px/1 Arial,sans-serif;fill:#0f1b3d;paint-order:stroke;stroke:#fff;stroke-width:3px}
.dvb-legend{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:.85rem;margin:8px 0 0;padding:0;list-style:none}
.dvb-legend li{display:flex;gap:6px;align-items:center}
.dvb-key{display:inline-block;width:18px;height:12px;border:2px solid}
.dvb-key.ok{border-color:#05713f}.dvb-key.bad{border-color:#b42318;background:rgba(180,35,24,.12)}.dvb-key.sp{border-color:#0a5fe0;border-style:dashed;border-radius:50%}.dvb-key.warn{border-color:#8a4b00;border-style:dashed}

/* ---------- tables ---------- */
.dvb-table-prev{overflow-x:auto}
.dvb-table-prev table{border-collapse:collapse;min-width:50%}
.dvb-table-prev caption{caption-side:top;text-align:left;font-weight:700;padding:0 0 6px}
.dvb-table-prev th,.dvb-table-prev td{border:1px solid var(--border-strong);padding:6px 10px;text-align:left;vertical-align:top}
.dvb-table-prev thead th{background:var(--surface-2)}
.dvb-hl{font-weight:800}

/* ---------- misc ---------- */
.dvb-type-prev{border:1px solid var(--border);border-radius:var(--r-sm);padding:12px 14px;background:var(--surface);overflow:hidden;overflow-wrap:anywhere;line-height:1.25}
.dvb-explain{font-size:1.08rem;font-weight:700;margin:0 0 6px}
@media (prefers-reduced-motion:reduce){.dvb-ball{transition:none!important}}

/* ---------- gitignore template picker ---------- */
.dvb-gi{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:12px;margin:4px 0 14px}
.dvb-gi-group{border:1px solid var(--border);border-radius:var(--r-sm);padding:8px 12px 10px;margin:0;min-width:0}
.dvb-gi-group legend{font-weight:700;font-size:.92rem;padding:0 4px}
.dvb-gi-opt{display:flex;align-items:center;gap:8px;min-height:30px;font-size:.92rem;cursor:pointer}
.dvb-gi-opt input{width:18px;height:18px;accent-color:var(--primary);flex:none}
.dvb-gi-opt[hidden],.dvb-gi-group[hidden]{display:none}

/* ---------- status code list ---------- */
.dvb-codes{display:grid;gap:10px}
.dvb-code{border:1px solid var(--border);border-radius:var(--r-sm);padding:10px 12px;background:var(--surface)}
.dvb-code h4{margin:0 0 4px;font-size:1rem;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.dvb-code p{margin:4px 0 0}
.dvb-code-num{font-family:var(--mono);font-weight:800;font-size:1.1rem}
.dvb-fig-h{margin:0 0 4px;font-size:1rem}
.out .out-html h4.dvb-mono{margin:14px 0 6px;font-size:.95rem}
.tool[data-tool="url-parser"] .tbl-wrap td,.tool[data-tool="user-agent-parser"] .tbl-wrap td,.tool[data-tool="mime-type-lookup"] .tbl-wrap td,.tool[data-tool="css-specificity-calculator"] .tbl-wrap :is(td,th),.tool[data-tool="target-size-checker"] .tbl-wrap td{overflow-wrap:anywhere;word-break:break-word}
/* long URLs and code in the page copy (examples, FAQs) must wrap on small screens */
.article-section :is(p,li,dd,code){overflow-wrap:break-word}
.dvb-clip{margin:18px auto 8px}
.tool[data-tool="target-size-checker"] .tbl-wrap td:nth-child(4){white-space:nowrap;font-weight:700}