/* Zilchy.link — shared design system for the 2026 redesign */

:root {
  --bg: #0b1014;
  --text: #e9eef1;
  --text-body: #b6c2c9;
  --text-muted: #8c9aa3;
  --text-label: #a9b6bd;

  --border: #2b363e;
  --border-soft: #1c252b;
  --card-border: #232e35;

  --card-bg: #121a1f;
  --input-bg: #131a20;
  --input-bg-alt: #0e1519;
  --table-head-bg: #0f161a;

  --accent: #35e3c8;
  --accent-hover: #7df0de;
  --accent-active: #22c4ab;
  --accent-soft: rgba(53, 227, 200, 0.2);

  --status-ok: #35e3c8;
  --status-degraded: #e8b44a;
  --status-down: #f0655a;

  --radius: 6px;
  --radius-card: 8px;

  --font-sans: 'IBM Plex Sans', Helvetica, Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  overflow-anchor: none;
}

html { scroll-behavior: smooth; }
[id] { scroll-margin-top: 28px; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }
::selection { background: var(--accent); color: var(--bg); }

/* ---------- Background grid ----------
   Scrolls with the page (lives inside .page, spans its full height), but
   the fade zone itself is still sized off screen height (vh) so it stays
   correct on resize regardless of page length:
   0–33.3vh full intensity, 33.3–66.6vh fades out, below that: none. */
.bg-grid {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  mask-image: linear-gradient(to bottom, #000 0, #000 33.333vh, transparent 66.666vh);
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 33.333vh, transparent 66.666vh);
}

.bg-grid__lines {
  position: absolute;
  inset: -60%;
  background-image:
    linear-gradient(to right, #ffffff0f 1px, transparent 1px),
    linear-gradient(to bottom, #ffffff0f 1px, transparent 1px);
  background-size: 72px 72px;
  transform: rotate(45deg);
}

/* ---------- Page shell ---------- */
.page {
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
}

.shell {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  box-sizing: border-box;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  padding: clamp(40px, 7vh, 84px) clamp(24px, 6vw, 72px) 72px;
}

.shell--home { padding-top: clamp(48px, 22vh, 240px); }

.shell__main { flex: 1 1 auto; min-width: 0; }

.crumb {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: clamp(32px, 6vh, 56px);
}
.crumb a { color: var(--text-muted); }
.crumb a:hover { color: var(--accent); }

/* ---------- Hero ---------- */
.hero { max-width: 620px; margin-bottom: clamp(40px, 7vh, 72px); }
.hero--home { margin-bottom: clamp(56px, 16vh, 180px); }

.hero h1 {
  font-size: clamp(30px, 4.2vw, 46px);
  line-height: 1.06;
  font-weight: 600;
  letter-spacing: -0.03em;
  margin: 0 0 16px;
  text-wrap: balance;
}
.hero--home h1 { font-size: clamp(34px, 4.8vw, 52px); line-height: 1.04; }

.hero p, .hero blockquote {
  font-size: 17px;
  line-height: 1.6;
  color: var(--text-body);
  margin: 0;
  max-width: 52ch;
  text-wrap: pretty;
}
.hero blockquote { padding: 0; border: 0; }

/* ---------- Form fields ---------- */
.field { display: flex; flex-direction: column; gap: 8px; }
.field label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-label);
}
.field input, .field select, .field textarea {
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 16px;
  padding: 14px 16px;
  outline: none;
}
.field select { appearance: none; -webkit-appearance: none; cursor: pointer; }
.field textarea { line-height: 1.55; resize: vertical; min-height: 150px; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}
.field input::placeholder, .field textarea::placeholder { color: #5f6e77; }

.form-stack { display: flex; flex-direction: column; gap: 20px; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 4px; }
.form-sent {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.06em;
  color: var(--accent);
}

/* ---------- Home hero code lookup ---------- */
.code-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: stretch; margin-bottom: 14px; }
.code-input {
  flex: 1 1 240px;
  min-width: 0;
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 16px;
  letter-spacing: 0.04em;
  padding: 15px 16px;
  outline: none;
}
.code-input:focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }

.btn-primary {
  background: var(--accent);
  color: #07100f;
  border: 0;
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 600;
  padding: 15px 30px;
  cursor: pointer;
}
.btn-primary:hover { background: var(--accent-hover); }
.btn-primary:active { background: var(--accent-active); }

.hint-muted { font-size: 14.5px; line-height: 1.6; color: var(--text-muted); margin: 0; max-width: 52ch; text-wrap: pretty; }
.hint-muted a { color: var(--accent); }
.hint-muted.error { color: #f0a0a0; }

/* ---------- Two-column info layout (about/privacy/contact) ---------- */
.two-col { display: flex; flex-wrap: wrap; gap: clamp(28px, 5vw, 72px); align-items: flex-start; }

.side-col { flex: 0 1 240px; min-width: 200px; padding-bottom: 8px; }
.side-col__title {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 14px;
}
.side-col ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.side-col ol a { color: var(--text-body); font-size: 14px; line-height: 1.4; }
.side-col ol a:hover { color: var(--accent); }
.side-col p { font-size: 14.5px; line-height: 1.65; color: var(--text-body); margin: 0 0 16px; text-wrap: pretty; }
.side-col p:last-child { margin-bottom: 0; }

.content-col { flex: 1 1 440px; min-width: 0; max-width: 600px; }

.info-section { padding: 40px 0; border-bottom: 1px solid var(--border-soft); }
.info-section:first-child { padding-top: 0; }
.info-section:last-child { border-bottom: 0; padding-bottom: 0; }
.info-section h2 { font-size: 22px; font-weight: 500; letter-spacing: -0.02em; margin: 0 0 14px; }
.info-section p { font-size: 15.5px; line-height: 1.7; color: var(--text-body); margin: 0 0 14px; text-wrap: pretty; }
.info-section p:last-child { margin-bottom: 0; }
.info-section ul { margin: 0 0 14px; padding: 0 0 0 20px; display: flex; flex-direction: column; gap: 9px; font-size: 15.5px; line-height: 1.65; color: var(--text-body); }

.fill { font-family: var(--font-mono); font-size: 14px; }

/* ---------- Key/value info tables (privacy) ---------- */
.info-table {
  display: grid;
  gap: 1px;
  background: var(--border-soft);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-card);
  overflow: hidden;
  margin-bottom: 20px;
}
.info-table__head {
  display: flex; flex-wrap: wrap; gap: 6px 16px;
  background: var(--table-head-bg);
  padding: 13px 16px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.info-table__row { display: flex; flex-wrap: wrap; gap: 6px 16px; background: var(--card-bg); padding: 14px 16px; }
.info-table__row--baseline { align-items: baseline; }
.info-table__key { flex: 0 1 180px; font-family: var(--font-mono); font-size: 13px; color: var(--text); }
.info-table__val { flex: 1 1 220px; min-width: 0; font-size: 14.5px; line-height: 1.55; color: var(--text-body); }
.info-table__key--wide { flex: 1 1 220px; min-width: 0; font-size: 14.5px; color: var(--text); font-family: var(--font-sans); }
.info-table__val--narrow { flex: 0 1 160px; font-family: var(--font-mono); font-size: 13px; color: var(--text-body); }

/* ---------- Services (home) ---------- */
.section-block { margin-top: clamp(36px, 5vh, 64px); }
.section-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 24px;
  padding-bottom: 16px; border-bottom: 1px solid var(--border); margin-bottom: 10px;
}
.section-head__label {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--text-muted);
}
.section-head__meta {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text-muted);
}

details.disclosure { margin-top: clamp(56px, 9vh, 104px); }
details.disclosure summary {
  display: flex; align-items: baseline; justify-content: space-between; gap: 24px;
  padding-bottom: 16px; border-bottom: 1px solid var(--border); margin-bottom: 10px;
  cursor: pointer; list-style: none;
}
details.disclosure summary::-webkit-details-marker { display: none; }
details.disclosure summary:hover { border-color: var(--accent); }
.disclosure-toggle { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
details.disclosure .toggle-open { display: inline; }
details.disclosure .toggle-close { display: none; }
details.disclosure[open] .toggle-open { display: none; }
details.disclosure[open] .toggle-close { display: inline; }

.group-label {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--text-label); padding-bottom: 16px;
}
.group-block { margin-top: 44px; }
.group-block:first-child { margin-top: 44px; }

.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 20px; }

.service-card {
  display: flex; flex-direction: column;
  background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius-card);
  overflow: hidden; color: inherit;
}
.service-card:hover { border-color: var(--accent); }

.service-card__image { position: relative; height: 132px; overflow: hidden; }
.service-card__image img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
  mask-image: linear-gradient(to bottom, #000 0%, #000 46%, rgba(0,0,0,0.55) 76%, transparent 97%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 46%, rgba(0,0,0,0.55) 76%, transparent 97%);
}

.service-card__badges { position: absolute; top: 12px; left: 12px; right: 12px; display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.badge {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase;
  background: rgba(9,14,17,0.78); border: 1px solid var(--border); border-radius: 4px; padding: 4px 7px; color: #c3ced4;
}
.badge--status { display: flex; align-items: center; gap: 6px; }
.badge--ok { color: var(--status-ok); }
.badge--degraded { color: var(--status-degraded); }
.badge--down { color: var(--status-down); }
.status-dot { width: 6px; height: 6px; border-radius: 50%; display: block; }
.status-dot--ok { background: var(--status-ok); }
.status-dot--degraded { background: var(--status-degraded); }
.status-dot--down { background: var(--status-down); }

.service-card__icon {
  position: relative; margin: -46px 0 0 22px; width: 70px; height: 70px;
  display: flex; align-items: center; justify-content: center; padding: 10px; box-sizing: border-box;
  background: var(--input-bg-alt); border-radius: 14px;
  mask-image: linear-gradient(to right, transparent 0, #000 16%, #000 84%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 16%, #000 84%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 16%, #000 84%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 16%, #000 84%, transparent 100%);
  mask-composite: intersect;
  -webkit-mask-composite: source-in;
}
.service-card__icon img { width: 100%; height: 100%; object-fit: contain; display: block; }

.service-card__body { padding: 14px 22px 26px; }
.service-card__title { font-size: 19px; font-weight: 500; letter-spacing: -0.015em; margin-bottom: 6px; }
.service-card__domain { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-muted); letter-spacing: 0.02em; margin-bottom: 12px; overflow-wrap: anywhere; }
.service-card__desc { font-size: 14px; line-height: 1.55; color: var(--text-body); text-wrap: pretty; }

/* ---------- Edit Links (owner-only panel, revealed after an
   admin.zilchy.link auth check succeeds — see index.html) ---------- */
#editLinks[hidden] { display: none; }

.el-add { margin-top: 32px; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius-card); padding: 20px; }
.el-add__label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 14px; }
.el-add__row { display: grid; grid-template-columns: minmax(0,2fr) minmax(0,1fr) minmax(0,0.62fr) minmax(0,0.38fr); gap: 10px; align-items: center; }

.el-input {
  background: var(--input-bg-alt); border: 1px solid var(--border); border-radius: 5px;
  color: var(--text); font-family: var(--font-mono); font-size: 13px; padding: 10px 12px;
  outline: none; min-width: 0; width: 100%; box-sizing: border-box;
}
.el-input:focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }

.el-status-toggle { display: flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; background: none; border: 0; padding: 0; font: inherit; }
.el-status-track { position: relative; flex: 0 0 auto; width: 30px; height: 16px; border-radius: 999px; box-sizing: border-box; border: 1px solid var(--border); background: #1a242a; transition: background 140ms ease, border-color 140ms ease; }
.el-status-track.is-public { border-color: var(--accent); background: var(--accent); }
.el-status-knob { position: absolute; top: 2px; left: 2px; width: 10px; height: 10px; border-radius: 50%; background: var(--text-muted); transition: left 140ms ease, background 140ms ease; }
.el-status-track.is-public .el-status-knob { left: 16px; background: #07100f; }
.el-status-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-body); }

.el-btn-add { background: var(--accent); color: #07100f; border: 0; border-radius: 5px; font-family: var(--font-sans); font-size: 13px; font-weight: 600; padding: 10px 18px; cursor: pointer; white-space: nowrap; }
.el-btn-add:hover { background: var(--accent-hover); }

.el-controls { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.el-search { max-width: 340px; font-size: 14px; padding: 11px 14px; }
.el-pagesize { display: flex; align-items: center; gap: 10px; }
.el-pagesize label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); }
.el-pagesize select { width: auto; cursor: pointer; padding-right: 28px; appearance: none; -webkit-appearance: none; }

.el-table { margin-top: 16px; border: 1px solid var(--card-border); border-radius: var(--radius-card); overflow: hidden; }
.el-row {
  display: grid; grid-template-columns: minmax(0,2fr) minmax(0,1fr) minmax(0,0.62fr) minmax(0,0.38fr);
  gap: 16px; padding: 12px 16px; align-items: center;
}
.el-row--head {
  background: var(--table-head-bg); font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted);
}
.el-row--data { background: var(--card-bg); border-top: 1px solid var(--border-soft); }
.el-row--empty { background: var(--card-bg); border-top: 1px solid var(--border-soft); padding: 22px 16px; font-family: var(--font-mono); font-size: 12.5px; color: var(--text-muted); }

.el-cell-link { min-width: 0; cursor: text; }
.el-cell-link .el-display { font-family: var(--font-mono); font-size: 12.5px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.el-cell-codes .el-display { font-family: var(--font-mono); font-size: 12.5px; line-height: 1.5; color: var(--accent); overflow-wrap: anywhere; }
.el-cell-link input, .el-cell-codes input { font-size: 12.5px; }

.el-delete-btn {
  display: flex; align-items: center; justify-content: center; width: 30px; height: 30px;
  background: transparent; border: 1px solid var(--border); border-radius: 5px; color: var(--text-muted); cursor: pointer; padding: 0;
}
.el-delete-btn:hover { border-color: #5c3a3a; color: #f0a0a0; }
.el-confirm { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.el-confirm-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: #f0a0a0; }
.el-confirm-btn { background: transparent; border: 1px solid var(--border); border-radius: 5px; color: var(--text-body); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; padding: 6px 10px; cursor: pointer; white-space: nowrap; }
.el-confirm-btn.yes { border-color: #5c3a3a; color: #f0a0a0; }

.el-hint { margin-top: 10px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--text-muted); }
.el-error { margin-top: 10px; font-family: var(--font-mono); font-size: 11.5px; color: var(--status-down); }
.el-is-saving { opacity: 0.5; pointer-events: none; }
.el-saved-flash { color: var(--accent) !important; }

/* ---------- About modal ---------- */
.about-modal-overlay {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(6,10,12,0.76); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; padding: 24px;
  animation: om-veil 220ms ease-out both;
}
.about-modal-overlay[hidden] { display: none; }
.about-modal {
  position: relative; width: 100%; max-width: 360px;
  background: #111a1f; border: 1px solid var(--border); border-radius: 10px; padding: 28px;
  box-shadow: 0 40px 100px rgba(0,0,0,0.66);
  animation: om-rise 320ms cubic-bezier(0.16,0.84,0.24,1) both;
}
.about-modal p { font-size: 17px; line-height: 1.55; font-weight: 400; letter-spacing: -0.005em; color: var(--text); margin: 0; text-wrap: pretty; }
.about-modal__foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 22px; padding-top: 14px; border-top: 1px solid #212b32; }
.about-modal__link, .about-modal__close {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted);
  background: transparent; border: 0; padding: 0; cursor: pointer;
}
.about-modal__link:hover, .about-modal__close:hover { color: var(--accent); }

@keyframes om-veil { from { opacity: 0 } to { opacity: 1 } }
@keyframes om-rise { from { opacity: 0; transform: translateY(14px) scale(0.985) } to { opacity: 1; transform: none } }

/* ---------- Frozen footer ----------
   The footer markup is pasted verbatim on every page, byte-for-byte as
   given, with no class or extra styling of any kind added to it. The
   Report -> Contact "auto-populate subject" behaviour is implemented
   entirely in JS (see report-link.js) without touching this markup. */