/* KonstantinOS page — masthead line and a centered grid of service tiles;
   the tiles are the page. Ported pixel-for-pixel from the design prototype. */
:root { --leading: 28px; --half: 14px; --edge: clamp(20px, 5vw, 72px); }
body { margin: 0; text-wrap: pretty; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 var(--edge); }

/* — nav — */
.nav {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  padding-inline: max(var(--edge), calc((100% - 1200px) / 2 + var(--edge)));
}
#nav-clock {
  font-size: 13px; letter-spacing: 0.06em; font-feature-settings: "tnum" 1;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
}

/* — buttons (only .btn / .btn-ghost used on this page) — */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 14px; line-height: 1.2; color: var(--color-text);
  background: transparent; border: 1px solid transparent;
  padding: var(--space-2) calc(var(--space-3) * 1.2);
  border-radius: var(--radius-md);
}
.btn-ghost { color: var(--color-accent); padding-inline: var(--space-1); }
.btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.btn-ghost:active { background: color-mix(in srgb, var(--color-accent) 18%, transparent); }

/* — masthead — */
.masthead { padding: calc(3 * var(--leading)) 0 var(--leading); text-align: center; }
.masthead h1 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(32px, 5vw, 52px); letter-spacing: -0.02em; margin: 0;
  text-box: trim-both cap alphabetic;
}
.masthead .sub {
  font-size: 16px; line-height: var(--half);
  color: color-mix(in srgb, var(--color-text) 65%, transparent);
  margin: var(--space-2) 0 0;
}

/* — tile grid (the page's one real component) — */
.grid-wrap { padding: var(--leading) 0 calc(3 * var(--leading)); }
.tile-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4); max-width: 900px; margin: 0 auto;
}
.tile {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: var(--space-2); padding: 20px var(--space-4);
  border-radius: var(--radius-md); background: var(--color-surface);
  box-shadow: var(--shadow-sm); text-decoration: none; color: inherit; position: relative;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.tile:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.tile:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.tile-icon { width: 36px; height: 36px; color: var(--color-accent-700); }
.tile-icon svg { display: block; width: 100%; height: 100%; }
.tile-name {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 17px; line-height: 1.3;
}
.tile-domain {
  font-size: 12px; font-feature-settings: "tnum" 1;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.status-dot {
  position: absolute; top: 14px; right: 14px; width: 10px; height: 10px;
  border-radius: 50%; background: var(--color-neutral-400);
}
.status-dot[data-state="up"] { background: var(--color-accent-500); }
.status-dot[data-state="down"] { background: var(--color-accent-2-500); }
.status-dot[data-state="checking"] { animation: dot-pulse 1.1s ease-in-out infinite; }
@keyframes dot-pulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } }

/* — admin row: intentionally low-key, plain text links rather than cards — */
.admin-section { padding: 0 0 var(--leading); text-align: center; }
.admin-heading {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
  margin: 0 0 var(--space-2);
}
.admin-row { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--space-3); }
.admin-link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: var(--radius-md);
  font-size: 13px; color: var(--color-text); text-decoration: none; position: relative;
}
.admin-link:hover { background: color-mix(in srgb, var(--color-text) 6%, transparent); }
.admin-link:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.admin-icon { width: 16px; height: 16px; color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.admin-icon svg { display: block; width: 100%; height: 100%; }
.admin-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--color-neutral-400); flex: none;
}
.admin-dot[data-state="up"] { background: var(--color-accent-500); }
.admin-dot[data-state="down"] { background: var(--color-accent-2-500); }
.admin-dot[data-state="checking"] { animation: dot-pulse 1.1s ease-in-out infinite; }

footer {
  padding: 0 0 calc(2 * var(--leading)); text-align: center; font-size: 13px;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
}

@media (max-width: 720px) {
  .tile-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 460px) {
  .tile-grid { grid-template-columns: 1fr !important; }
}