/* Homelab Deck — one stylesheet for the whole site.
   Palette is lifted from tools/make-icon.swift so the site and the app icon
   are demonstrably the same thing: navy base, blue pool, teal pool, and the
   app's "running" green. */

:root {
  --navy-900: #06101a;
  --navy-800: #0b1926;
  --navy-700: #10263c;
  --blue:     #0a84ff;
  --teal:     #30d5c8;
  --green:    #30d158;
  --amber:    #ff9f0a;

  --bg:       #ffffff;
  --bg-soft:  #f5f6f8;
  --card:     #ffffff;
  --text:     #16202b;
  --muted:    #5c6b7a;
  --line:     #e2e6ec;
  --code-bg:  #f2f4f7;

  --radius: 14px;
  --wide: 68rem;
  --prose: 44rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:      #0b1119;
    --bg-soft: #0f1822;
    --card:    #121d29;
    --text:    #e6ecf3;
    --muted:   #93a3b4;
    --line:    #1e2c3a;
    --code-bg: #0a121b;
  }
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

/* The header is sticky, so anchor targets would otherwise land underneath it. */
:where(section, h2, h3)[id] { scroll-margin-top: 4.5rem; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  font: 17px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--blue); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--teal); }

h1, h2, h3 { line-height: 1.2; letter-spacing: -0.015em; }
h1 { font-size: clamp(2rem, 5vw, 3.1rem); margin: 0 0 .5rem; }
h2 { font-size: 1.5rem; margin: 3rem 0 .75rem; }
h3 { font-size: 1.1rem; margin: 2rem 0 .4rem; }

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .88em;
  background: var(--code-bg);
  padding: .12em .38em;
  border-radius: 5px;
  /* Identifiers like kSecAttrAccessibleWhenUnlockedThisDeviceOnly have no break
     opportunity, so on a narrow screen they punch out of their card and widen
     the whole page. Blocks inside <pre> are unaffected — white-space: pre wins
     over this, and those scroll horizontally instead. */
  overflow-wrap: anywhere;
}
pre {
  background: var(--code-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  overflow-x: auto;
  font-size: .85rem;
  line-height: 1.55;
}
pre code { background: none; padding: 0; font-size: inherit; }

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

.wrap  { max-width: var(--wide);  margin: 0 auto; padding: 0 1.25rem; }
.prose { max-width: var(--prose); margin: 0 auto; padding: 0 1.25rem; }
.prose li { margin: .35rem 0; }

/* ---------- Header ---------- */

.site-header {
  position: sticky; top: 0; z-index: 10;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap {
  display: flex; align-items: center; gap: 1.25rem;
  min-height: 58px;
}
.brand {
  display: flex; align-items: center; gap: .6rem;
  font-weight: 600; color: var(--text); text-decoration: none;
  margin-right: auto;
}
.brand img { width: 28px; height: 28px; border-radius: 7px; }
.site-header nav { display: flex; gap: 1.1rem; font-size: .93rem; }
.site-header nav a { color: var(--muted); text-decoration: none; }
.site-header nav a:hover, .site-header nav a[aria-current="page"] { color: var(--text); }

/* Narrow phones: the brand wordmark and three nav links don't fit on one line.
   The icon alone still identifies the site, and the nav is what people came
   to the header for. */
@media (max-width: 460px) {
  .brand span { display: none; }
  .site-header .wrap { gap: .75rem; }
  .site-header nav { gap: .85rem; font-size: .88rem; }
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(58rem 38rem at 18% 8%,  rgba(10,132,255,.42), transparent 68%),
    radial-gradient(50rem 34rem at 84% 92%, rgba(48,213,200,.30), transparent 66%),
    linear-gradient(160deg, var(--navy-700), var(--navy-900));
  color: #eef4fb;
  padding: 4.5rem 0 4rem;
  border-bottom: 1px solid var(--line);
}
.hero h1 { color: #fff; }
.hero .lede {
  font-size: clamp(1.05rem, 2.2vw, 1.28rem);
  color: #b9cbdd;
  max-width: 36rem;
  margin: 0 0 1.75rem;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 2.5rem;
  align-items: center;
}
.hero-shot {
  /* A phone screenshot is more than twice as tall as it is wide, so sizing it
     by width alone makes the hero ~700px tall and pushes the buttons under the
     fold on a laptop. Both maxima are honoured with auto dimensions, and the
     aspect ratio is preserved, so the height cap is what binds on short
     viewports and the width cap on narrow ones. */
  width: auto; height: auto;
  max-width: 300px; max-height: 62vh;
  margin: 0 auto; display: block;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 24px 60px rgba(0,0,0,.45);
}
/* The two-column hero needs a text column wide enough to set a 3-line lede.
   Below ~880px it isn't: the phone screenshot is 300px of that width whatever
   the viewport does, so the text gets squeezed into a sliver while the tall
   image stretches the row. One column instead. */
@media (max-width: 880px) {
  .hero-grid { grid-template-columns: 1fr; gap: 2rem; }
  .hero-shot { max-width: 260px; }
}

/* Small phones: the generous desktop spacing wastes most of a short screen. */
@media (max-width: 560px) {
  .hero { padding: 2.5rem 0 3rem; }
  section { padding: 2.5rem 0; }
  .hero .lede { margin-bottom: 1.25rem; }
  .cta { gap: .6rem; }
  .btn { padding: .65rem 1.1rem; }
}

.badges { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.5rem; }
.badge {
  font-size: .8rem; letter-spacing: .01em;
  padding: .28rem .7rem; border-radius: 999px;
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.16);
  color: #d7e5f3;
}

/* The "coming soon" chip reads as forward-looking rather than as another
   shipped platform, so it is outlined in the accent instead of filled. */
.badge-soon {
  background: rgba(48,213,200,.12);
  border-color: rgba(48,213,200,.42);
  color: #7fe6dc;
}

.lede-sub { font-size: .97rem; color: #9db1c5; margin-bottom: 1.75rem; }
.lede-sub a { color: #7fe6dc; }

.cta { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.btn {
  display: inline-block;
  padding: .7rem 1.3rem;
  border-radius: 11px;
  font-weight: 600; font-size: .97rem;
  text-decoration: none;
  border: 1px solid transparent;
}
.btn-primary { background: var(--blue); color: #fff; }
.btn-primary:hover { background: #3f9dff; color: #fff; }
.btn-ghost {
  border-color: rgba(255,255,255,.28); color: #e6f0fa;
}
.btn-ghost:hover { border-color: var(--teal); color: #fff; }
.cta-note { font-size: .85rem; color: #9db1c5; }

/* ---------- Sections ---------- */

section { padding: 3.5rem 0; }
section.alt { background: var(--bg-soft); border-block: 1px solid var(--line); }
.section-head { max-width: 40rem; margin-bottom: 2rem; }
.section-head h2 { margin-top: 0; }
.section-head p { color: var(--muted); margin: 0; }

.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1.1rem;
}
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.35rem 1.4rem;
}
.card h3 { margin: 0 0 .4rem; font-size: 1.03rem; }
.card p  { margin: 0; color: var(--muted); font-size: .95rem; }
.card .dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  margin-right: .5rem; vertical-align: middle;
  background: var(--blue);
}
.card .dot.teal  { background: var(--teal); }
.card .dot.green { background: var(--green); }
.card .dot.amber { background: var(--amber); }

.shots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1.5rem;
}
.shots figure { margin: 0; }
.shots img {
  /* height: auto is load-bearing. The width/height attributes on these images
     are there to reserve layout space, but with only `width` set in CSS the
     height attribute becomes the used height and every screenshot renders
     stretched to 1434px tall. */
  width: 100%; height: auto;
  border-radius: 18px;
  border: 1px solid var(--line);
  box-shadow: 0 12px 30px rgba(6,16,26,.18);
  display: block;
}
.shots figcaption {
  margin-top: .7rem; font-size: .88rem; color: var(--muted); text-align: center;
}

.roadmap {
  margin-top: 2rem;
  padding: 1.6rem 1.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
}
.roadmap h3 { margin: 0 0 .5rem; font-size: 1.08rem; }
.roadmap p  { margin: 0; color: var(--muted); font-size: .96rem; max-width: 46rem; }
.roadmap-cta { margin-top: 1.15rem !important; }

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

.table-scroll {
  overflow-x: auto;
  /* Without an explicit minimum a grid/flex child refuses to shrink below its
     content, so the scroll container grows instead of scrolling. */
  max-width: 100%;
  min-width: 0;
}
table { border-collapse: collapse; width: 100%; font-size: .93rem; }
th, td {
  text-align: left; padding: .6rem .8rem;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
th { font-weight: 600; color: var(--muted); font-size: .85rem; }

/* ---------- Docs ---------- */

.doc-title { padding-top: 3rem; }
.updated { color: var(--muted); font-size: .9rem; margin-top: .25rem; }

.toc {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  margin: 2rem 0;
  font-size: .94rem;
}
.toc strong { display: block; margin-bottom: .5rem; font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.toc ul { margin: 0; padding-left: 1.1rem; }

.note {
  border-left: 3px solid var(--blue);
  background: var(--bg-soft);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: .9rem 1.1rem;
  margin: 1.5rem 0;
  font-size: .95rem;
}
.note.warn { border-left-color: var(--amber); }

details {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: .85rem 1.1rem;
  margin: .75rem 0;
  background: var(--card);
}
details summary { cursor: pointer; font-weight: 600; font-size: .98rem; }
details[open] summary { margin-bottom: .6rem; }
details p:last-child, details ul:last-child { margin-bottom: 0; }

.request-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem;
  margin: 1.5rem 0;
}
.request-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  padding: 1.25rem 1.35rem;
  /* Column flex with the button pushed to the bottom, so the two buttons line
     up with each other however differently long the copy above them runs. */
  display: flex;
  flex-direction: column;
}
.request-card h3 { margin: 0 0 .45rem; font-size: 1.02rem; }
.request-card p  { color: var(--muted); font-size: .94rem; }
.request-card p:last-child { margin-bottom: 0; margin-top: auto; padding-top: .5rem; }
/* The buttons are the accent colour on a light card, so they need their own
   hover rather than the ghost-on-glass one the hero uses. */
.request-card .btn-primary { color: #fff; }
.request-note { font-size: .92rem; color: var(--muted); }

/* ---------- Footer ---------- */

.site-footer {
  border-top: 1px solid var(--line);
  padding: 2.5rem 0 3.5rem;
  margin-top: 3rem;
  color: var(--muted);
  font-size: .9rem;
}
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: center; }
/* Five links do not fit on one line on a small phone, and this is a flex row,
   so without wrapping it pushes the page 4px wider than the viewport. */
.site-footer nav { display: flex; flex-wrap: wrap; gap: .5rem 1.1rem; margin-left: auto; }

@media (max-width: 560px) {
  /* Left-aligned under the copyright reads better than a ragged right edge. */
  .site-footer nav { margin-left: 0; gap: .5rem .9rem; }
}
.site-footer a { color: var(--muted); text-decoration: none; }
.site-footer a:hover { color: var(--text); }
.disclaimer { flex-basis: 100%; font-size: .82rem; line-height: 1.5; }