/* dev tools — styles owned by the dev work; keep area-specific rules here, shared tokens stay in style.css */
:root {
  --dev-add: #DDF3E4; --dev-add-strong: #A8E0BB; --dev-add-ink: #14532D;
  --dev-del: #FBE3E1; --dev-del-strong: #F2B8B2; --dev-del-ink: #7F1D1D;
  --dev-g1: #FFE7A3; --dev-g2: #C9DCFF; --dev-g3: #CDEFD6; --dev-g4: #F6CFE3; --dev-g5: #E0D4FA; --dev-g6: #FBD9BE;
  --dev-m0: #FFF1C2; --dev-m1: #FFE08A;
  --dev-ok: #1B7347; --dev-bad: #B42318;
  --dev-jwt-h: #B42318; --dev-jwt-p: #6D28D9; --dev-jwt-s: #0E7490;
}
:root[data-theme="dark"] {
  --dev-add: #18302A; --dev-add-strong: #1E6142; --dev-add-ink: #A7F3C4;
  --dev-del: #34221F; --dev-del-strong: #6E2F29; --dev-del-ink: #FCC9C4;
  --dev-g1: #5C4A12; --dev-g2: #22396B; --dev-g3: #1F4A2E; --dev-g4: #5A2442; --dev-g5: #3C2E66; --dev-g6: #5C3718;
  --dev-m0: #4A3F14; --dev-m1: #6B5714;
  --dev-ok: #62CE95; --dev-bad: #F79B92;
  --dev-jwt-h: #F79B92; --dev-jwt-p: #C4B0FF; --dev-jwt-s: #67D4E8;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --dev-add: #18302A; --dev-add-strong: #1E6142; --dev-add-ink: #A7F3C4;
    --dev-del: #34221F; --dev-del-strong: #6E2F29; --dev-del-ink: #FCC9C4;
    --dev-g1: #5C4A12; --dev-g2: #22396B; --dev-g3: #1F4A2E; --dev-g4: #5A2442; --dev-g5: #3C2E66; --dev-g6: #5C3718;
    --dev-m0: #4A3F14; --dev-m1: #6B5714;
    --dev-ok: #62CE95; --dev-bad: #F79B92;
    --dev-jwt-h: #F79B92; --dev-jwt-p: #C4B0FF; --dev-jwt-s: #67D4E8;
  }
}

.dev-ws { container-type: inline-size; }
.tool.dev-ws, .dev-ws .dev-panel, .dev-ws .blk-out, .dev-ws .dev-view { grid-template-columns: minmax(0, 1fr); }
.dev-ws .blk-in textarea, .dev-ws .blk-text textarea { min-height: 120px; }
.dev-mono, .tool input.dev-mono { font: 14px/1.5 var(--mono); }
.dev-label { font-size: 14px; font-weight: 600; }
.dev-loading { padding: 20px 0; }
.dev-panels { display: grid; grid-template-columns: minmax(0, 1fr); }
.dev-panel { display: grid; gap: 16px; min-width: 0; }
.dev-panel > .tool { margin-top: 2px; }

/* segmented tabs */
.dev-seg { display: flex; gap: 4px; background: var(--soft); padding: 4px; border-radius: 10px; width: max-content; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.dev-seg::-webkit-scrollbar { display: none; }
.dev-seg button { border: 0; background: none; padding: 6px 14px; border-radius: 7px; cursor: pointer; font-weight: 600; color: var(--muted); white-space: nowrap; font-size: 14px; }
.dev-seg button[aria-selected="true"] { background: var(--panel); color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
.dev-seg button:hover { color: var(--ink); }
.dev-tabs { margin-bottom: 2px; }

/* privacy note: same shape as the standard notice, calm green instead of yellow */
.blk-notice.dev-private { border-color: color-mix(in srgb, var(--local) 40%, var(--line)); background: color-mix(in srgb, var(--local) 9%, var(--panel)); }
.blk-notice.dev-private .ic { color: var(--local); }
.dev-local { font-size: 13px; }

.dev-status { margin: 0; font-weight: 600; font-size: 14px; }
.dev-status .err { margin: 0; }
.dev-badge { display: inline-block; border-radius: 999px; padding: 2px 10px; font-size: 13px; font-weight: 600; background: var(--soft); }
.dev-badge.ok { background: color-mix(in srgb, var(--dev-ok) 16%, var(--panel)); color: var(--dev-ok); }
.dev-badge.bad { background: color-mix(in srgb, var(--dev-bad) 14%, var(--panel)); color: var(--dev-bad); }
.dev-kv code { word-break: break-all; }
.dev-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; }
.dev-row > label.f { flex: 1 1 180px; min-width: 0; }
.dev-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@container (max-width: 620px) { .dev-grid2 { grid-template-columns: 1fr; } }

/* regex */
.dev-patrow { display: grid; gap: 10px; }
.dev-slashes { display: flex; align-items: center; border: 2px solid var(--line); border-radius: 10px; background: var(--paper); }
.dev-slashes:focus-within { border-color: var(--ink); }
.dev-slashes span { padding: 0 8px; color: var(--muted); font: 600 16px var(--mono); }
.tool .dev-slashes input { border: 0; background: none; padding: 9px 0; min-width: 0; flex: 1; }
.dev-flags { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.dev-flags .check { font-size: 14px; }
.dev-flags code { font: 600 13px var(--mono); background: var(--soft); border-radius: 5px; padding: 0 5px; }
.dev-lib summary { cursor: pointer; font-weight: 600; font-size: 14px; }
.dev-lib .chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.dev-view { display: grid; gap: 12px; min-width: 0; }
.dev-view label.f { display: grid; gap: 4px; font-size: 14px; font-weight: 600; }
.dev-hl { margin: 0; background: var(--soft); border-radius: 10px; padding: 12px 14px; font: 14px/1.7 var(--mono); white-space: pre-wrap; word-break: break-word; max-height: 360px; overflow: auto; }
.dev-hl mark { color: inherit; border-radius: 3px; padding: 1px 0; }
.dev-hl mark.m0 { background: var(--dev-m0); box-shadow: inset 0 -2px 0 color-mix(in srgb, #A87A00 60%, transparent); }
.dev-hl mark.m1 { background: var(--dev-m1); box-shadow: inset 0 -2px 0 color-mix(in srgb, #A87A00 60%, transparent); }
.dev-hl mark.g1, .sw.g1 { background: var(--dev-g1); } .dev-hl mark.g2, .sw.g2 { background: var(--dev-g2); }
.dev-hl mark.g3, .sw.g3 { background: var(--dev-g3); } .dev-hl mark.g4, .sw.g4 { background: var(--dev-g4); }
.dev-hl mark.g5, .sw.g5 { background: var(--dev-g5); } .dev-hl mark.g6, .sw.g6 { background: var(--dev-g6); }
.dev-matches .sw { display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 25%, transparent); }
.dev-explain { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: 14px; }
.dev-explain li { padding-left: calc(var(--d) * 22px); display: flex; gap: 10px; align-items: baseline; }
.dev-explain li + li { border-top: 1px dashed var(--line); padding-top: 4px; }
.dev-explain code { font: 13px var(--mono); background: var(--soft); border-radius: 5px; padding: 1px 6px; white-space: pre; flex: none; max-width: 45%; overflow: hidden; text-overflow: ellipsis; }

/* diff */
.dev-diff { border: 1px solid var(--line); border-radius: 10px; overflow: auto; max-height: 560px; background: var(--panel); }
.dev-diff table { border-collapse: collapse; width: 100%; font: 13px/1.55 var(--mono); table-layout: fixed; }
.dev-diff td { padding: 0 8px; vertical-align: top; white-space: pre-wrap; word-break: break-word; }
.dev-diff td.n { width: 3.6em; text-align: right; color: var(--muted); user-select: none; padding-right: 6px; border-right: 1px solid var(--line); }
.dev-diff td.s { width: 1.4em; color: var(--muted); user-select: none; padding: 0 2px 0 6px; }
.dev-diff tr.del td.t, .dev-diff td.t.del { background: var(--dev-del); }
.dev-diff tr.ins td.t, .dev-diff td.t.ins { background: var(--dev-ins, var(--dev-add)); }
.dev-diff tr.del td.s, .dev-diff tr.ins td.s { font-weight: 700; }
.dev-diff tr.del td.s { color: var(--dev-del-ink); background: var(--dev-del); } .dev-diff tr.ins td.s { color: var(--dev-add-ink); background: var(--dev-add); }
.dev-diff tr td.t.empty, .dev-diff tr.ins td.t.empty, .dev-diff tr.del td.t.empty { background: repeating-linear-gradient(135deg, transparent 0 6px, var(--soft) 6px 8px); }
.dev-diff del, .dev-diff ins { text-decoration: none; border-radius: 3px; }
.dev-diff del { background: var(--dev-del-strong); } .dev-diff ins { background: var(--dev-add-strong); }
.dev-diff tr.fold td { background: var(--soft); color: var(--muted); font-family: var(--body); font-size: 13px; padding: 3px 10px; }
.dev-diff .split td.t { width: calc(50% - 5em); }
.dev-stats { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.dev-stats .add { color: var(--dev-add-ink); background: var(--dev-add); } .dev-stats .rem { color: var(--dev-del-ink); background: var(--dev-del); }
.dev-changes td.kind { font-weight: 600; white-space: nowrap; }
.dev-changes tr.added td.kind { color: var(--dev-ok); } .dev-changes tr.removed td.kind { color: var(--dev-bad); }

/* JWT */
.dev-token { margin: 0; background: var(--soft); border-radius: 10px; padding: 12px 14px; font: 14px/1.6 var(--mono); word-break: break-all; white-space: pre-wrap; }
.dev-token .h { color: var(--dev-jwt-h); } .dev-token .p { color: var(--dev-jwt-p); } .dev-token .s { color: var(--dev-jwt-s); }
.dev-json { margin: 0; background: var(--soft); border-radius: 10px; padding: 12px 14px; font: 13px/1.55 var(--mono); white-space: pre-wrap; word-break: break-word; max-height: 360px; overflow: auto; }
.dev-json-h { border-left: 4px solid var(--dev-jwt-h); } .dev-json-p { border-left: 4px solid var(--dev-jwt-p); }
.dev-verify { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; }
.dev-verify h3, .dev-sub { margin: 0; font: 650 16px/1.3 var(--display); }
.dev-verdict { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 14px; }
.dev-big { font: 700 26px/1.2 var(--display); letter-spacing: -.01em; margin: 0; word-break: break-word; }
.dev-bigmono { font: 600 24px/1.2 var(--mono); margin: 0; word-break: break-all; }

@container (max-width: 520px) {
  .dev-explain code { max-width: 55%; }
  .dev-diff table { font-size: 12px; }
  .dev-diff td.n { width: 2.8em; }
  .dev-big { font-size: 21px; }
  .dev-bigmono { font-size: 19px; }
}
.dev-ws input[type=password], .dev-ws input[type=time], .dev-ws input[type=datetime-local] { border: 2px solid var(--line); background: var(--paper); border-radius: 10px; padding: 9px 11px; width: 100%; font-weight: 400; }
.dev-ws input[type=password]:focus, .dev-ws input[type=time]:focus, .dev-ws input[type=datetime-local]:focus { border-color: var(--ink); outline: none; }
.dev-row > input, .dev-row > .dev-big { flex: 1 1 220px; min-width: 0; }
.dev-now { display: grid; gap: 4px; padding: 14px 16px; border-radius: 12px; background: var(--soft); }
.dev-now .dev-row { align-items: center; }
.dev-now .copy { background: var(--panel); }
.dev-cronin, .tool input.dev-cronin, .tool input.dev-timein { font: 600 20px/1.3 var(--mono); padding: 10px 12px; }
.dev-in-chips, .dev-cron .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.dev-cron .chip code { font: 13px var(--mono); }
.dev-days { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.dev-swapcell { align-self: end; }
.dev-errline { margin-top: 6px; color: var(--ink); overflow-x: auto; white-space: pre; }
.tool textarea.dev-find { min-height: 46px; resize: vertical; }
.dev-grid2 > label.f { grid-template-rows: auto 1fr; }
.dev-matches table.t td, .dev-matches table.t th, .dev-changes table.t td.kind { white-space: nowrap; word-break: normal; }
.dev-matches table.t td.mono { max-width: 28ch; overflow: hidden; text-overflow: ellipsis; }
.btn.dev-small { padding: 7px 13px; font-size: 14px; border-radius: 8px; }
.dev-optrow { align-items: center; gap: 10px 18px; }
.dev-optrow .check { font-size: 14px; }
.dev-optrow .dev-small { margin-left: auto; }
.dev-claims table.t td { word-break: normal; } .dev-claims table.t td.mono { white-space: nowrap; }