/*
  Developer Tools. Loaded after the PDF tools' stylesheet (../pdf_tools/app.css),
  whose cards, steps, segmented switch and checkbox rows these pages share.
  Plain CSS, not built by Tailwind; colours come from the site's theme tokens
  so dark mode just works. Buttons and form controls are DaisyUI's.
*/

.devt {
  /* The PDF tools' switch and checkbox styles read these, which .pdft defines on its pages. */
  --pdft-line: var(--color-base-300);
  --pdft-accent: var(--color-primary);
  --devt-line: var(--color-base-300);
  --devt-radius: 0.875rem;
  --devt-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --devt-add: color-mix(in oklab, var(--color-success) 16%, var(--color-base-100));
  --devt-add-strong: color-mix(in oklab, var(--color-success) 38%, var(--color-base-100));
  --devt-del: color-mix(in oklab, var(--color-error) 14%, var(--color-base-100));
  --devt-del-strong: color-mix(in oklab, var(--color-error) 34%, var(--color-base-100));
  --devt-mark: color-mix(in oklab, var(--color-warning) 45%, transparent);
  --devt-mark-alt: color-mix(in oklab, var(--t-sky, #2f7aae) 35%, transparent);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.devt [hidden] { display: none !important; }
.devt-loading { padding: 3rem 1rem; text-align: center; color: var(--muted); }
.devt-mono { font-family: var(--devt-mono); font-size: 0.875rem; }
.devt-muted, .devt-hint { color: var(--muted); }
.devt-hint { font-size: 0.8125rem; }
.devt-break { overflow-wrap: anywhere; word-break: break-all; }
.devt-grow { flex: 1; }

/* ---- Layout ---- */

.devt-panel {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
  padding: 1rem;
  border: 1px solid var(--devt-line);
  border-radius: var(--devt-radius);
  background: var(--color-base-100);
}
@media (min-width: 40rem) { .devt-panel { padding: 1.25rem; } }
.devt-panel-title { font-size: 1.125rem; font-weight: 600; }

.devt-panes { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 56rem) { .devt-panes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.devt-stack { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }

.devt-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
}
.devt-bar-end { align-items: flex-end; }
.devt-option { display: flex; align-items: center; gap: 0.5rem; }
.devt-option-label { font-size: 0.875rem; font-weight: 600; }
.devt-option-select { flex-direction: row; align-items: center; gap: 0.5rem; }
.devt-option-select .select { width: auto; }
.devt-seg span { padding-inline: 0.75rem; }
.devt-check { align-items: center; font-size: 0.875rem; }
.devt-check input { margin-top: 0; }

/* ---- Fields ---- */

.devt-field { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }
.devt-field-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem 0.75rem;
  min-height: 2rem;
}
.devt-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.devt-copy { min-width: 4.75rem; }

.devt-text {
  width: 100%;
  min-height: 8rem;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--devt-line);
  border-radius: var(--r-sm, 0.5rem);
  background: var(--color-base-100);
  color: var(--color-base-content);
  line-height: 1.55;
  tab-size: 2;
  resize: vertical;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.devt-text:focus { outline: none; border-color: var(--color-base-content); box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-base-content) 12%, transparent); }
.devt-text[readonly] { background: var(--color-base-200); }
.devt-text.devt-nowrap { white-space: pre; overflow-wrap: normal; overflow-x: auto; }
.devt-text.is-dragging { border-color: var(--color-primary); border-style: dashed; background: color-mix(in oklab, var(--color-primary) 7%, var(--color-base-100)); }
.devt-text::placeholder, .devt-input::placeholder { color: color-mix(in oklab, var(--muted) 75%, transparent); }
.devt-token { word-break: break-all; }

.devt-input-lg { height: 2.75rem; font-size: 1rem; }
.devt-count { width: 6.5rem; }
.devt-input[aria-invalid="true"], .input[aria-invalid="true"] { border-color: var(--color-error); }

/* ---- Messages ---- */

.devt-msg { min-height: 1.35rem; font-size: 0.9375rem; line-height: 1.45; }
.devt-msg:empty { min-height: 0; }
.devt-msg.is-ok { color: color-mix(in oklab, var(--color-success) 75%, var(--color-base-content)); }
.devt-msg.is-warn { color: color-mix(in oklab, var(--color-warning) 55%, var(--color-base-content)); }
.devt-msg.is-error { color: var(--color-error); }
.devt-link {
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.devt-subhead { margin-bottom: 0.5rem; font-size: 0.9375rem; font-weight: 600; }

/* ---- Tables ---- */

.devt-table-wrap { overflow-x: auto; border: 1px solid var(--devt-line); border-radius: 0.625rem; }
.devt-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.devt-table th, .devt-table td { padding: 0.45rem 0.75rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--devt-line); }
.devt-table tr:last-child > * { border-bottom: 0; }
.devt-table thead th { background: var(--color-base-200); font-weight: 600; white-space: nowrap; }
.devt-table td { max-width: 24rem; overflow-wrap: anywhere; }
.devt-kv th { width: 1%; white-space: nowrap; font-weight: 600; }
.devt-preview:empty { display: none; }
.devt-preview .devt-hint { margin-top: 0.4rem; }

/* ---- Result rows (label, value, copy) ---- */

.devt-results, .devt-base-extra { display: flex; flex-direction: column; }
.devt-result-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.15rem 0.75rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--devt-line);
}
.devt-result-row:last-child { border-bottom: 0; }
.devt-result-label { grid-column: 1 / -1; font-size: 0.8125rem; color: var(--muted); }
@media (min-width: 40rem) {
  .devt-result-row { grid-template-columns: 11rem minmax(0, 1fr) auto; }
  .devt-result-label { grid-column: auto; }
}

/* ---- Diff ---- */

.devt-diff-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.devt-diff-scroll { overflow-x: auto; border: 1px solid var(--devt-line); border-radius: 0.625rem; }
.devt-diff-table { width: 100%; border-collapse: collapse; font-family: var(--devt-mono); font-size: 0.8125rem; line-height: 1.5; }
.devt-diff-view.is-split .devt-diff-table { table-layout: fixed; }
.devt-diff-view.is-split .devt-diff-table { min-width: 44rem; }
.devt-diff-table td { padding: 0 0.6rem; vertical-align: top; }
.devt-diff-view .devt-ln {
  width: 3.25rem;
  padding-right: 0.5rem;
  text-align: right;
  color: var(--muted);
  background: var(--color-base-200);
  user-select: none;
  -webkit-user-select: none;
}
.devt-diff-view.is-split .devt-ln:nth-child(3) { border-left: 1px solid var(--devt-line); }
.devt-diff-view .devt-code { white-space: pre-wrap; overflow-wrap: anywhere; }
.devt-diff-view .is-del, .devt-diff-view tr.is-del td { background: var(--devt-del); }
.devt-diff-view .is-ins, .devt-diff-view tr.is-ins td { background: var(--devt-add); }
.devt-diff-view td.devt-ln.is-del, .devt-diff-view tr.is-del td.devt-ln { background: var(--devt-del-strong); color: var(--color-base-content); }
.devt-diff-view td.devt-ln.is-ins, .devt-diff-view tr.is-ins td.devt-ln { background: var(--devt-add-strong); color: var(--color-base-content); }
.devt-diff-view .is-empty { background: repeating-linear-gradient(-45deg, var(--color-base-200) 0 6px, transparent 6px 12px); }
.devt-del-word { background: var(--devt-del-strong); border-radius: 2px; text-decoration: line-through; text-decoration-color: color-mix(in oklab, var(--color-error) 60%, transparent); }
.devt-ins-word { background: var(--devt-add-strong); border-radius: 2px; }
.devt-sign { display: inline-block; width: 1.25rem; color: var(--muted); user-select: none; -webkit-user-select: none; }
.devt-diff-gap td { padding: 0.3rem 0.75rem; text-align: center; background: var(--color-base-200); font-family: var(--font-sans); font-size: 0.8125rem; }
.devt-change.is-current > td { box-shadow: inset 0 2px 0 var(--color-base-content); }
@media (max-width: 40rem) { .devt-kbd-hint { display: none; } }

/* ---- JWT ---- */

.devt-code-block {
  margin: 0;
  padding: 0.75rem 0.85rem;
  overflow-x: auto;
  border: 1px solid var(--devt-line);
  border-radius: var(--r-sm, 0.5rem);
  background: var(--color-base-200);
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.devt-j-key { color: var(--t-sky); }
.devt-j-str { color: var(--t-emerald); }
.devt-j-num { color: var(--t-bronze); }
.devt-j-lit { color: var(--t-plum); }
.devt-claims td > span { display: block; }
.devt-claim-date { margin-top: 0.15rem; font-size: 0.8125rem; }
.devt-claim-note { margin-top: 0.15rem; font-size: 0.8125rem; color: var(--muted); }
.devt-verify { display: flex; flex-direction: column; gap: 0.75rem; padding-top: 1rem; border-top: 1px solid var(--devt-line); }
.devt-verify .devt-subhead { margin: 0; }
.devt-jwt-decoded:empty { display: none; }

/* ---- Codecs ---- */

.devt-extra:empty { display: none; }
.devt-url { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 56rem) { .devt-url { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- Number bases ---- */

.devt-base-rows { display: flex; flex-direction: column; gap: 0.75rem; }
.devt-base-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.35rem 0.6rem; }
.devt-base-row > :first-child { grid-column: 1 / -1; }
@media (min-width: 40rem) {
  .devt-base-row { grid-template-columns: 12rem minmax(0, 1fr) auto; }
  .devt-base-row > :first-child { grid-column: auto; }
}
.devt-base-select { width: auto; max-width: 100%; }
.devt-base-row .input { font-size: 1rem; }

/* ---- Generators ---- */

.devt-password-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem;
  border-radius: 0.75rem;
  background: var(--color-base-200);
}
.devt-password {
  flex: 1 1 16rem;
  min-width: 0;
  font-size: clamp(1.05rem, 2.6vw, 1.5rem);
  letter-spacing: 0.02em;
  overflow-wrap: anywhere;
  word-break: break-all;
  user-select: all;
  -webkit-user-select: all;
}
.devt-meter { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.3rem; }
.devt-meter span { height: 0.4rem; border-radius: 999px; background: var(--color-base-300); transition: background-color 0.2s; }
.devt-meter[data-level="1"] span:nth-child(-n + 1) { background: var(--color-error); }
.devt-meter[data-level="2"] span:nth-child(-n + 2) { background: var(--color-warning); }
.devt-meter[data-level="3"] span:nth-child(-n + 3) { background: color-mix(in oklab, var(--color-success) 70%, var(--color-warning)); }
.devt-meter[data-level="4"] span { background: var(--color-success); }
.devt-meter-text { margin-top: -0.5rem; font-size: 0.875rem; color: var(--muted); }
.devt-length { display: flex; align-items: center; gap: 0.75rem; }
.devt-length .range { flex: 1; min-width: 6rem; }
.devt-dl { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.2rem 1rem; font-size: 0.9375rem; }
.devt-dl dt { font-weight: 600; }
.devt-dl dd { margin: 0 0 0.5rem; color: var(--muted); }
@media (min-width: 40rem) {
  .devt-dl { grid-template-columns: 8rem minmax(0, 1fr); }
  .devt-dl dd { margin: 0; }
}

/* ---- Hashes ---- */

.devt-hashes th { width: 6rem; white-space: nowrap; font-weight: 600; }
.devt-hashes td.devt-mono { max-width: none; }
.devt-hashes tr.is-match > * { background: var(--devt-add); }
.devt-cell-action { width: 1%; white-space: nowrap; }
.devt-file-note { font-size: 0.875rem; }

/* ---- Time ---- */

.devt-now { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; }
.devt-now-value { font-size: clamp(1.5rem, 4vw, 2rem); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---- Cron ---- */

.devt-cron-top { display: grid; gap: 0.75rem; grid-template-columns: minmax(0, 1fr); align-items: end; }
@media (min-width: 48rem) { .devt-cron-top { grid-template-columns: minmax(0, 1fr) 16rem; } }
.devt-cron-fields { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); }
.devt-cron-field { display: flex; flex-direction: column; gap: 0.3rem; }
.devt-cron-input { text-align: center; font-size: 1rem; }
.devt-cron-text {
  padding: 0.85rem 1rem;
  border-radius: 0.75rem;
  background: color-mix(in oklab, var(--t-sky) 10%, var(--color-base-100));
  font-size: clamp(1.05rem, 2.4vw, 1.3rem);
  font-weight: 600;
  line-height: 1.35;
}
.devt-cron-text:empty { display: none; }
.devt-runs td:first-child { width: 1%; white-space: nowrap; }

/* ---- Regex ---- */

.devt-regex-top { display: grid; gap: 0.75rem; grid-template-columns: minmax(0, 1fr); align-items: end; }
@media (min-width: 48rem) { .devt-regex-top { grid-template-columns: minmax(0, 1fr) auto; } }
.devt-flags { display: flex; gap: 0.3rem; }
.devt-flag {
  width: 2.25rem;
  height: 2.75rem;
  border: 1px solid var(--devt-line);
  border-radius: var(--r-sm, 0.5rem);
  background: var(--color-base-100);
  font-weight: 700;
  cursor: pointer;
}
.devt-flag[aria-pressed="true"] { background: var(--color-base-content); border-color: var(--color-base-content); color: var(--color-base-100); }
.devt-flag:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.devt-regex-literal { color: var(--muted); overflow-wrap: anywhere; }
.devt-regex-literal:empty { display: none; }

/* The test text: a transparent textarea over a backdrop holding the marks. Both
   share font, padding, border and wrapping exactly, and scroll together. */
.devt-hl {
  display: grid;
  max-height: 32rem;
  overflow: auto;
  border: 1px solid var(--devt-line);
  border-radius: var(--r-sm, 0.5rem);
  background: var(--color-base-100);
}
.devt-hl:focus-within { border-color: var(--color-base-content); }
.devt-hl > * {
  grid-area: 1 / 1;
  margin: 0;
  padding: 0.75rem 0.85rem;
  border: 0;
  font-family: var(--devt-mono);
  font-size: 0.875rem;
  line-height: 1.55;
  letter-spacing: normal;
  tab-size: 2;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: normal;
}
.devt-hl-backdrop { color: transparent; pointer-events: none; }
.devt-hl-backdrop mark { color: transparent; background: var(--devt-mark); border-radius: 2px; }
.devt-hl-backdrop mark.is-alt { background: var(--devt-mark-alt); }
.devt-hl-backdrop mark:empty { box-shadow: -1px 0 0 1px var(--color-warning); }
.devt-hl-input {
  display: block;
  width: 100%;
  min-height: 10rem;
  overflow: hidden;
  resize: none;
  background: transparent;
  color: var(--color-base-content);
  caret-color: var(--color-base-content);
}
.devt-hl-input:focus { outline: none; }
.devt-matches:empty { display: none; }
.devt-match-text { white-space: pre-wrap; padding: 0 0.2rem; border-radius: 3px; background: var(--devt-mark); }
.devt-groups { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.1rem 0.6rem; margin: 0; }
.devt-groups dt { color: var(--muted); font-size: 0.8125rem; white-space: nowrap; }
.devt-groups dd { margin: 0; overflow-wrap: anywhere; }
.devt-cheats { border-top: 1px solid var(--devt-line); padding-top: 0.75rem; }
.devt-cheats summary { cursor: pointer; font-weight: 600; }
.devt-cheats-grid { display: grid; gap: 1.25rem 2rem; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); margin-top: 1rem; }
.devt-cheats dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.35rem 0.75rem; margin: 0; font-size: 0.875rem; }
.devt-cheats dt code { font-family: var(--devt-mono); white-space: nowrap; }
.devt-cheats dd { margin: 0; color: var(--muted); }