/* === Layout primitives (home layout) === */
:root {
  --container-max: 1080px;
  --gutter: 16px;
  --radius: 10px;
  --bg: #f7f9fc;
  --panel: #ffffff;
  --ink: #0f172a;
  --muted: #64748b;
  --brand: #2563eb;
  --brand-weak: #93c5fd;
  --border: #e5e7eb;
}

* { box-sizing: border-box; }
html, body {height: 100%; margin:0; padding:0; color:var(--ink); background:var(--bg); font: 16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif; }
body { display: flex; flex-direction: column; }
main.container { flex: 1; }

a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 24px var(--gutter);
}

.header { background: #fff; border-bottom: 1px solid var(--border); }
.header .bar { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px var(--gutter); max-width:var(--container-max); margin:0 auto; }
.header .nav a { margin-left:12px; }

.footer { margin-top: 40px; border-top: 1px solid var(--border); background:#fff; }
.footer .inner { max-width: var(--container-max); margin: 0 auto; padding: 16px var(--gutter); color: var(--muted); }

.grid { display:grid; grid-template-columns: 1fr minmax(0, 720px) 1fr; gap: 24px; }
.has-left-only  .grid { grid-template-columns: 240px minmax(0, 720px) 1fr; }
.has-right-only .grid { grid-template-columns: 1fr minmax(0, 720px) 240px; }
.has-both       .grid { grid-template-columns: 240px minmax(0, 720px) 240px; }

.panel { background: var(--panel); border:1px solid var(--border); border-radius: var(--radius); padding: 16px; }

.sidebar { position: sticky; top: 16px; height: fit-content; }
.sidebar .placeholder { border:1px dashed var(--border); border-radius: var(--radius); padding:12px; color:var(--muted); font-size:14px; }

h1, h2, h3 { line-height:1.2; margin: 0 0 10px; }
h1 { font-size: 28px; }
h2 { font-size: 20px; color: var(--muted); }

/* Buttons / inputs */
.btn { display:inline-block; padding:10px 16px; border-radius:8px; border:1px solid transparent; background:var(--brand); color:#fff; font-weight:600; cursor:pointer; }
.btn:disabled { opacity:.6; cursor:not-allowed; }
.btn.secondary { background:#fff; color:var(--ink); border-color:var(--border); }

.input, select, textarea {
  width:100%; padding:10px 12px; border:1px solid var(--border); border-radius:8px; background:#fff;
}
.field { margin-bottom: 12px; }
.help { color: var(--muted); font-size: 13px; }

/* Simple forms */
.form .row { display:flex; gap:12px; }
.form .row > * { flex:1; }

/* Tables (for my domains, admin-ish lists) */
.table { width:100%; border-collapse: collapse; }
.table th, .table td { padding:10px 12px; border-top:1px solid var(--border); }
.table th { text-align:left; color:var(--muted); font-weight:600; background:#f9fafb; }

/* Tenant (subdomain) layout can diverge later */
.tenant-shell .container { max-width: 980px; }

/* Utility */
.mt-16{margin-top:16px} .mt-24{margin-top:24px} .mt-32{margin-top:32px}

/* === Utilities moved out of claim.html (inline → CSS) === */
.list-plain { list-style: none; padding-left: 0; margin: 12px 0; }

.mt-8  { margin-top: 8px; }
.mt-10 { margin-top: 10px; }
.mt-12 { margin-top: 12px; }

.hidden { display: none; }
.no-click { pointer-events: none; }
.weak { opacity: .55; }
.underline { text-decoration: underline; }


/* --- Claim page layout tweaks --- */

/* Two-column layout: fixed left column for buttons, flexible right for checks */
.claim-grid {
  /* two equal columns so the left sits under the "Desired subdomain" field,
     and the right sits under the "Host" field */
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: 24px;
}


/* Stack -> single column on narrow screens */
@media (max-width: 768px) {
  .claim-grid {
    grid-template-columns: 1fr;
  }
}

/* Left column: stack buttons vertically, aligned to the left */
.claim-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.claim-actions .btn { min-width: 0; }

/* vertical spacing between buttons/links in the stack */
.claim-actions .btn + .btn,
.claim-actions .btn + a { margin-top: 12px; }



/* Remove extra list padding/margins on the right; align lines neatly */
.claim-status ul {
  margin: 0;
  padding-left: 0;
}

.claim-status li {
  margin: 6px 0;        /* even spacing between status lines */
  list-style: none;     /* ensure no default bullets leak in */
}

/* Optional: align the first two checks tighter together than 3–5 */
.claim-status ul + ul {
  margin-top: 12px;     /* a small visual gap between the two groups */
}