/* Domain Checker Mini V5: soft, low-glare interface. System fonts only (CSP blocks external fonts). */
:root {
  color-scheme: light;
  --bg: #f3f4f1;
  --bg-glow: #e9eee9;
  --surface: #fbfbf9;
  --surface-2: #f4f5f2;
  --field: #f7f8f5;
  --ink: #3b4246;
  --ink-strong: #2f3639;
  --muted: #646c70;
  --faint: #8d9497;
  --line: #e3e5e0;
  --line-strong: #cfd3cd;
  --accent: #4d7a6c;
  --accent-hover: #426a5e;
  --accent-ink: #3e6558;
  --accent-soft: #e4eee9;
  --accent-softer: #eff5f1;
  --on-accent: #fbfcfa;
  --focus: #7ea597;
  --error: #9a4e3b;
  --error-soft: #f6ebe5;

  --free-bg: #e2f0e7; --free-ink: #2f6a4c; --free-dot: #5fa27f;
  --taken-bg: #eceef0; --taken-ink: #555d63; --taken-dot: #a3aab0;
  --issue-bg: #f6ebe3; --issue-ink: #8d4a35; --issue-dot: #d49a7f;
  --busy-bg: #e7eef5; --busy-ink: #3f6386; --busy-dot: #7ea2c4;
  --idle-bg: #f0f1ee; --idle-ink: #646c70; --idle-dot: #bfc4c0;

  --shadow: 0 1px 2px rgb(40 52 48 / .04), 0 8px 28px rgb(40 52 48 / .06);
  --shadow-lift: 0 2px 6px rgb(40 52 48 / .06), 0 20px 60px rgb(40 52 48 / .14);
  --radius: 1.15rem;
  --radius-sm: .7rem;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", Consolas, monospace;
  --ease: cubic-bezier(.2, .7, .2, 1);

  font: 100%/1.55 var(--font);
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Dark: soft graphite, never pure black, text not pure white. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #1d2122;
  --bg-glow: #212827;
  --surface: #252a2b;
  --surface-2: #2a3031;
  --field: #212627;
  --ink: #d3d8d4;
  --ink-strong: #e1e5e1;
  --muted: #a1a9a5;
  --faint: #7f8884;
  --line: #333a3a;
  --line-strong: #434b4a;
  --accent: #86b3a3;
  --accent-hover: #97c0b1;
  --accent-ink: #9cc6b6;
  --accent-soft: #2c3b37;
  --accent-softer: #283330;
  --on-accent: #1a201f;
  --focus: #7fa999;
  --error: #e3a593;
  --error-soft: #3a2c28;

  --free-bg: #273a31; --free-ink: #a9d6bd; --free-dot: #6fb08c;
  --taken-bg: #2f3536; --taken-ink: #b4bbb8; --taken-dot: #79817f;
  --issue-bg: #3b2e29; --issue-ink: #e6b5a2; --issue-dot: #c58a72;
  --busy-bg: #29333d; --busy-ink: #a9c3dc; --busy-dot: #7299bd;
  --idle-bg: #2b3031; --idle-ink: #a1a9a5; --idle-dot: #5f6866;

  --shadow: 0 1px 2px rgb(0 0 0 / .18), 0 8px 28px rgb(0 0 0 / .18);
  --shadow-lift: 0 2px 6px rgb(0 0 0 / .25), 0 20px 60px rgb(0 0 0 / .45);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { min-height: 100%; background: var(--bg); }
body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(60rem 28rem at 15% -8rem, var(--bg-glow), transparent 70%),
    var(--bg);
  transition: background-color .3s var(--ease), color .3s var(--ease);
}
button, textarea, input { font: inherit; color: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:disabled { cursor: default; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: .5rem; }
p, h1, h2, h3, dl, ul { margin: 0; }
ul { padding: 0; list-style: none; }
::selection { background: var(--accent-soft); color: var(--ink-strong); }
.shell { width: min(100% - 2rem, 68rem); margin-inline: auto; display: flex; flex-direction: column; min-height: 100vh; }
main { flex: 1; }

/* Top bar */
.topbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .75rem; padding: 1rem 0 .5rem; }
.brand { display: flex; align-items: center; gap: .6rem; min-width: 0; font-size: .95rem; font-weight: 600; color: var(--ink-strong); letter-spacing: -.01em; }
.brand-mark {
  display: grid; place-items: center; flex: 0 0 2.1rem; height: 2.1rem;
  border-radius: .75rem; background: var(--accent-soft); color: var(--accent-ink);
}
.brand-mini { color: var(--accent-ink); font-weight: 600; }
.topbar-tools { display: flex; align-items: center; gap: .5rem; }
.language { display: flex; gap: .15rem; padding: .2rem; border-radius: .85rem; background: var(--surface-2); border: 1px solid var(--line); }
.language button {
  min-width: 2.6rem; min-height: 2.35rem; padding: .3rem .5rem; border: 0; border-radius: .65rem;
  background: transparent; color: var(--muted); font-size: .8rem; font-weight: 650; letter-spacing: .03em;
  transition: background-color .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease);
}
.language button:hover { color: var(--ink-strong); }
.language button[aria-pressed="true"] { background: var(--surface); color: var(--accent-ink); box-shadow: 0 1px 3px rgb(40 52 48 / .1); }
.theme-button {
  display: grid; place-items: center; width: 2.8rem; height: 2.8rem; padding: 0;
  border: 1px solid var(--line); border-radius: .85rem; background: var(--surface-2); color: var(--muted);
  transition: color .2s var(--ease), background-color .2s var(--ease);
}
.theme-button:hover { color: var(--accent-ink); background: var(--surface); }
.theme-button .icon-sun { display: none; }
:root[data-theme="dark"] .theme-button .icon-sun { display: block; }
:root[data-theme="dark"] .theme-button .icon-moon { display: none; }

/* Heading */
.workspace { padding-block: 1.6rem 0; }
.section-heading { margin-bottom: 1.3rem; }
h1 { font-size: clamp(1.7rem, 4.6vw, 2.5rem); line-height: 1.15; font-weight: 650; letter-spacing: -.03em; color: var(--ink-strong); }
.lead { margin-top: .5rem; color: var(--muted); font-size: 1rem; max-width: 36rem; }

/* Form card */
.card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
#checkForm { padding: 1.1rem; }
.form-grid { display: grid; gap: 1.3rem; }
.field-header { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; margin-bottom: .5rem; }
.field-label { display: block; padding: 0; margin-bottom: .5rem; font-size: .88rem; font-weight: 600; color: var(--ink-strong); }
.field-header .field-label { margin-bottom: 0; }
.field-count {
  padding: .1rem .5rem; border-radius: 1rem; background: var(--surface-2);
  font: 500 .76rem/1.5 var(--mono); color: var(--muted); transition: color .2s, background-color .2s;
}
.field-count[data-over="true"] { color: var(--error); background: var(--error-soft); font-weight: 650; }
textarea {
  display: block; width: 100%; min-height: 4.8rem; padding: .75rem .9rem;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--field);
  font: .98rem/1.5 var(--mono); color: var(--ink-strong); resize: none;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background-color .2s var(--ease);
}
#names { max-height: 11.5rem; }
textarea::placeholder { color: var(--faint); opacity: 1; }
textarea:hover { border-color: var(--focus); }
textarea:focus { outline: none; border-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 4px var(--accent-softer); }
textarea:focus-visible { outline: none; }
textarea[aria-invalid="true"] { border-color: var(--error); box-shadow: 0 0 0 4px var(--error-soft); }
.hint { margin-top: .5rem; color: var(--muted); font-size: .82rem; line-height: 1.45; }

.zones-group { min-inline-size: 0; margin: 0; padding: 0; border: 0; }
.zones-group legend { float: left; width: 100%; }
.zone-options { clear: both; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .4rem; }
.zone-toggle { position: relative; display: block; }
.zone-toggle input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.zone-toggle span {
  display: flex; align-items: center; justify-content: center; gap: .3rem; min-height: 2.75rem;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface);
  font: 550 .84rem/1 var(--mono); color: var(--muted);
  transition: background-color .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease), transform .12s var(--ease);
}
.zone-toggle input:hover + span { border-color: var(--focus); color: var(--ink-strong); }
.zone-toggle input:active + span { transform: scale(.97); }
.zone-toggle input:checked + span { border-color: transparent; background: var(--accent-soft); color: var(--accent-ink); font-weight: 650; }
.zone-toggle input:checked:hover + span { background: var(--accent-soft); border-color: var(--focus); }
.zone-toggle input:checked + span::before {
  content: ""; width: .32rem; height: .58rem; margin-top: -.15rem;
  border: solid currentColor; border-width: 0 1.6px 1.6px 0; transform: rotate(45deg);
}
.zone-toggle input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }

.form-error {
  display: flex; gap: .5rem; align-items: flex-start; margin-top: 1rem; padding: .6rem .8rem;
  border-radius: var(--radius-sm); background: var(--error-soft); color: var(--error); font-size: .88rem; font-weight: 550;
}
.form-bottom { display: grid; grid-template-columns: 1fr; gap: .55rem; margin-top: 1.25rem; align-items: center; }
.shortcut { display: none; color: var(--faint); font-size: .76rem; }
kbd {
  display: inline-block; padding: .05rem .38rem; border: 1px solid var(--line-strong); border-bottom-width: 2px;
  border-radius: .35rem; background: var(--surface-2); font: 500 .72rem/1.4 var(--mono); color: var(--muted);
}

/* Buttons */
.primary, .secondary, .close-button {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 2.85rem; padding: .55rem 1.1rem; border: 1px solid transparent; border-radius: .8rem;
  font-size: .92rem; font-weight: 600; line-height: 1.2;
  transition: background-color .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease), transform .12s var(--ease), box-shadow .18s var(--ease);
}
.primary { background: var(--accent); color: var(--on-accent); box-shadow: 0 1px 2px rgb(40 70 60 / .12), 0 6px 16px rgb(60 100 88 / .16); }
.primary:hover:not(:disabled) { background: var(--accent-hover); }
.primary:active:not(:disabled), .secondary:active:not(:disabled) { transform: translateY(1px); }
.primary:disabled, .secondary:disabled { opacity: .5; box-shadow: none; }
.button-arrow { transition: transform .2s var(--ease); }
.primary:hover:not(:disabled) .button-arrow { transform: translateX(2px); }
.secondary, .close-button { border-color: var(--line-strong); background: var(--surface); color: var(--accent-ink); }
.secondary:hover:not(:disabled), .close-button:hover { background: var(--accent-softer); border-color: var(--focus); }

/* Results */
.results { margin-top: 2rem; animation: rise .35s var(--ease) both; }
.results-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem .75rem; margin-bottom: .8rem; }
.results-title { min-width: 0; }
h2 { font-size: 1.3rem; line-height: 1.25; font-weight: 650; letter-spacing: -.02em; color: var(--ink-strong); }
.subtle { min-height: 1.3em; margin-top: .15rem; font-size: .85rem; color: var(--muted); }
.copy-button { min-height: 2.6rem; padding-inline: .9rem; font-size: .86rem; }
.progress-track { margin-bottom: .8rem; }
progress {
  display: block; width: 100%; height: .3rem; border: 0; border-radius: 1rem; overflow: hidden;
  color: var(--accent); background: var(--line); -webkit-appearance: none; appearance: none;
}
progress::-webkit-progress-bar { background: var(--line); border-radius: 1rem; }
progress::-webkit-progress-value { background: var(--accent); border-radius: 1rem; transition: width .3s var(--ease); }
progress::-moz-progress-bar { background: var(--accent); border-radius: 1rem; }

.summary { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .9rem; }
.summary-item {
  display: inline-flex; align-items: center; gap: .45rem; padding: .3rem .7rem;
  border-radius: 2rem; background: var(--surface); border: 1px solid var(--line);
  font-size: .8rem; color: var(--muted);
}
.summary-dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--idle-dot); }
.summary-item[data-tone="free"] .summary-dot { background: var(--free-dot); }
.summary-item[data-tone="taken"] .summary-dot { background: var(--taken-dot); }
.summary-item[data-tone="issue"] .summary-dot { background: var(--issue-dot); }

.desktop-results { display: none; }
.mobile-results { display: grid; gap: .65rem; }
.mobile-card { padding: .55rem .9rem .35rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.mobile-card h3 { padding: .35rem 0 .45rem; font: 600 .96rem/1.4 var(--mono); color: var(--ink-strong); overflow-wrap: anywhere; }
.mobile-cell + .mobile-cell { border-top: 1px solid var(--line); }
.mobile-card > div { border-top: 1px solid var(--line); }

.result-button {
  display: flex; width: 100%; min-height: 2.9rem; align-items: center; justify-content: space-between; gap: .5rem;
  padding: .25rem .35rem; border: 0; border-radius: .6rem; background: transparent; text-align: left;
  transition: background-color .15s var(--ease);
}
.result-button:hover { background: var(--surface-2); }
.result-button:focus-visible { outline-offset: -2px; }
.result-zone { font: 550 .88rem/1.3 var(--mono); color: var(--muted); }
.result-chevron {
  flex: 0 0 .4rem; height: .4rem; margin-inline-end: .25rem;
  border-right: 1.5px solid var(--faint); border-top: 1.5px solid var(--faint); transform: rotate(45deg);
  transition: transform .15s var(--ease);
}
.result-button:hover .result-chevron { transform: translateX(2px) rotate(45deg); }
.mobile-cell .result-status { margin-inline-start: auto; text-align: right; }

.result-status {
  display: inline-flex; align-items: center; gap: .42rem; max-width: 100%; min-height: 1.75rem;
  padding: .25rem .65rem .25rem .55rem; border-radius: 2rem;
  background: var(--idle-bg); color: var(--idle-ink);
  font-size: .79rem; font-weight: 600; line-height: 1.2; overflow-wrap: anywhere;
  transition: background-color .25s var(--ease), color .25s var(--ease);
}
.result-status::before { content: ""; flex: 0 0 .45rem; height: .45rem; border-radius: 50%; background: var(--idle-dot); }
.result-status[data-kind="not_registered"] { background: var(--free-bg); color: var(--free-ink); }
.result-status[data-kind="not_registered"]::before { background: var(--free-dot); }
.result-status[data-kind="registered"] { background: var(--taken-bg); color: var(--taken-ink); }
.result-status[data-kind="registered"]::before { background: var(--taken-dot); }
.result-status[data-kind="checking"] { background: var(--busy-bg); color: var(--busy-ink); }
.result-status[data-kind="checking"]::before { background: var(--busy-dot); animation: pulse 1.1s ease-in-out infinite; }
.result-status[data-kind="error"],
.result-status[data-kind="invalid"],
.result-status[data-kind="unsupported"],
.result-status[data-kind="blocked"] { background: var(--issue-bg); color: var(--issue-ink); }
.result-status[data-kind="error"]::before,
.result-status[data-kind="invalid"]::before,
.result-status[data-kind="unsupported"]::before,
.result-status[data-kind="blocked"]::before { background: var(--issue-dot); }
.result-na { display: block; color: var(--faint); text-align: center; }

.disclaimer, .copy-feedback { margin-top: .75rem; color: var(--muted); font-size: .83rem; }
.copy-feedback:empty { margin-top: 0; }
.copy-fallback { margin-top: .6rem; min-height: 6rem; font-size: .85rem; }
.clipboard-buffer { position: fixed; inset: 0 auto auto -9999px; }
footer { padding: 2rem 0 1.5rem; color: var(--faint); font-size: .8rem; text-align: center; }

/* Details dialog: padding lives on the inner card, so only the backdrop closes it. */
dialog {
  width: min(100% - 1.5rem, 28rem); max-height: calc(100% - 1.5rem); padding: 0;
  border: 1px solid var(--line); border-radius: 1.3rem; background: var(--surface); color: var(--ink);
  box-shadow: var(--shadow-lift);
}
dialog[open] { animation: pop .22s var(--ease) both; }
dialog::backdrop { background: rgb(30 38 36 / .32); backdrop-filter: blur(3px); }
:root[data-theme="dark"] dialog::backdrop { background: rgb(0 0 0 / .5); }
.dialog-card { padding: 1.15rem 1.2rem 1.2rem; }
.dialog-head { display: flex; align-items: center; justify-content: space-between; gap: .65rem; }
.dialog-head h2 { font-size: 1.05rem; color: var(--muted); font-weight: 600; letter-spacing: 0; }
.close-button { min-width: 2.6rem; min-height: 2.6rem; padding: 0; border-color: transparent; background: transparent; color: var(--muted); }
.close-button:hover { color: var(--ink-strong); background: var(--surface-2); border-color: transparent; }
.detail-body { margin-block: .7rem 1.1rem; }
.detail-domain { margin-bottom: .7rem; font: 600 1.2rem/1.35 var(--mono); color: var(--ink-strong); overflow-wrap: anywhere; }
.detail-description { margin-top: .6rem; color: var(--muted); font-size: .9rem; }
.detail-body dl { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-top: 1rem; }
.detail-body dl > div { padding: .6rem .75rem; border-radius: var(--radius-sm); background: var(--surface-2); }
.detail-body dt { color: var(--muted); font-size: .76rem; }
.detail-body dd { margin: .15rem 0 0; font-size: .86rem; color: var(--ink-strong); overflow-wrap: anywhere; }
.detail-historical { margin-top: .7rem; padding: .65rem .8rem; border-radius: var(--radius-sm); border: 1px dashed var(--line-strong); color: var(--muted); font-size: .85rem; }
.detail-historical strong { display: block; margin-bottom: .2rem; color: var(--ink); font-weight: 600; }
.dialog-retry { width: 100%; }

@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.75); } }

@media (min-width: 36rem) {
  .shell { width: min(100% - 3.5rem, 68rem); }
  .topbar { padding-top: 1.3rem; }
  .workspace { padding-top: 2.6rem; }
  #checkForm { padding: 1.5rem; }
  .form-grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 1.6rem; }
  .form-bottom { display: flex; }
  .primary { min-width: 10.5rem; }
  .shortcut { display: inline; margin-inline-start: auto; }
  .mobile-results { grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); align-items: start; }
}
@media (min-width: 64rem) {
  .workspace { padding-top: 3.2rem; }
  .section-heading { margin-bottom: 1.6rem; }
  #checkForm { padding: 1.75rem; }
  .form-grid { gap: 2rem; }
  .mobile-results { display: none; }
  .desktop-results .result-chevron { display: none; }
  .desktop-results { display: block; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
  .results-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: .86rem; }
  .results-table th, .results-table td { padding: .4rem .45rem; border-top: 1px solid var(--line); overflow-wrap: anywhere; vertical-align: middle; }
  .results-table thead th { border-top: 0; padding: .8rem .8rem; background: var(--surface-2); color: var(--muted); font-size: .78rem; font-weight: 600; text-align: left; }
  .results-table thead th:not(:first-child) { font-family: var(--mono); }
  .results-table thead th:first-child, .results-table tbody th { padding-inline: 1.1rem .45rem; width: 18%; }
  .results-table tbody th { font-family: var(--mono); font-weight: 600; color: var(--ink-strong); text-align: left; }
  .results-table tbody tr { transition: background-color .15s var(--ease); }
  .results-table tbody tr:hover { background: var(--accent-softer); }
  .results-table .result-button:hover { background: transparent; }
  .results-table .result-button:hover .result-status { filter: brightness(.97); }
  .results-table .result-status { font-size: .77rem; overflow-wrap: normal; }
}
@media (min-width: 64rem) and (max-width: 79.99rem) {
  .results-table thead th:first-child, .results-table tbody th { width: 17%; padding-inline-start: .9rem; }
  .results-table th, .results-table td { padding-inline: .3rem; }
  .results-table .result-status { gap: .32rem; padding: .22rem .5rem .22rem .45rem; font-size: .74rem; }
}
@media (max-width: 21rem) {
  .shell { width: calc(100% - 1.25rem); }
  .brand { font-size: .84rem; gap: .5rem; }
  #checkForm { padding: .85rem; }
  .zone-toggle span { font-size: .74rem; }
  .zone-toggle input:checked + span::before { display: none; }
}
@media (max-width: 35.99rem) {
  .form-bottom:has(#cancelButton:not([hidden])) { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media (forced-colors: active) {
  .zone-toggle input:checked + span { outline: 2px solid Highlight; outline-offset: -3px; }
  .language button[aria-pressed="true"] { outline: 2px solid Highlight; outline-offset: -3px; }
  .result-status::before, .summary-dot { forced-color-adjust: none; background: CanvasText; }
}