/* ── The composed page language ──────────────────────────────────────────
 *
 * apricaut.com's homepage is served by the composition renderer; every other
 * page here is served by this app. They have to read as one website, so the
 * measurements below are taken from that page's own stylesheet rather than
 * invented: `.n-pagenav` for the nav row, `.n-home-s0-*` for the wordmark
 * band, `.n-home-s2-*` for the content bands. The frame is 1120px, not the
 * design system's default 1200px.
 *
 * The product pages are the utilitarian siblings of those bands: same frame,
 * same vertical air, same eyebrow-over-serif heading — denser content inside.
 */

.site-frame {
  max-width: 1120px;
  margin-inline: auto;
  width: 100%;
  padding-inline: 24px;
}

/* The homepage's nav row: right-aligned, monospace, uppercase, no logo.
   Not the design system's fixed 88px masthead — that is a different website's
   furniture, and it is what made these pages read as another app. */
.site-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 28px;
  background: var(--surface);
  margin: 0;
  padding: 18px max(24px, calc((100% - 1120px) / 2 + 24px)) 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.site-nav a {
  color: var(--muted-foreground);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
}

.site-nav a:hover {
  color: var(--primary);
}

.site-nav a[aria-current="page"] {
  color: var(--primary);
  border-bottom-color: var(--accent);
}

/* The brand band, mirroring the homepage's first band: script wordmark over a
   monospace tagline, left-aligned in the frame. */
.site-wordmark-band {
  background: var(--background);
  padding: 24px 0;
}

.site-wordmark-band .site-frame {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.site-wordmark {
  color: var(--heading);
  font-family: var(--font-script);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  line-height: 1.2;
  font-weight: 400;
  text-decoration: none;
}

.site-tagline {
  margin: 0;
  color: var(--muted-foreground);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.4;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
}

/* One quiet line in the nav row's voice. The composed pages have no footer;
   the design system's three-column one was the loudest thing on a product
   page and belonged to a different site. */
.site-footer {
  border-top: 1px solid var(--border);
  margin-top: 96px;
  padding: 28px 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}

.site-footer .site-frame {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
}

.site-footer a {
  color: var(--muted-foreground);
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--primary);
}

/* ── Band rhythm ─────────────────────────────────────────────────────────
 * Re-cut the design system's section furniture to the composed bands: the
 * same 1120px frame, 96px of vertical air, and headings that start at the
 * left margin under a monospace eyebrow instead of centred at 2.5rem.
 */

.section {
  padding: 96px 0;
}

.container {
  max-width: 1120px;
  padding: 0 24px;
}

.section-header {
  text-align: left;
  margin-bottom: 56px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.section-title {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 600;
  line-height: 1.2;
  margin: 0;
}

/* The monospace kicker the composed bands put above every heading. */
.section-eyebrow {
  margin: 0;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.4;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
}

/* Product-surface styles for apricaut-site's own pages.
 *
 * apricaut-ui's `.service-card` is a marketing card — centered text, 40px of
 * padding, one blurb — and the sites dashboard borrowed it, which is why the
 * name, status, domain and every action arrived at the same weight. A site is
 * a record, not a sales pitch, so it gets a card of its own here rather than
 * a pile of overrides on the marketing one.
 *
 * Everything below is built from published design tokens only (see
 * apricaut_ui::TOKENS), so these surfaces re-theme with the rest of the house.
 */

.site-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
}

.site-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px;
  text-align: left;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: var(--transition);
}

.site-card:hover {
  border-color: var(--primary);
}

/* Name and status share the top line: the two things you scan a grid for. */
.site-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

/* The chip keeps its width and the name gives way instead — a wrapped
   two-word status ("past due") otherwise inflates into a lozenge. */
.site-card-head > .pill {
  flex: none;
  white-space: nowrap;
}

.site-card-name {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  line-height: 1.2;
  color: var(--heading);
  margin: 0;
}

.site-card-domain {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  word-break: break-all;
}

.site-card-domain a {
  color: var(--muted-foreground);
  text-decoration: none;
  border-bottom: 1px solid var(--border);
}

.site-card-domain a:hover {
  color: var(--link);
  border-bottom-color: currentColor;
}

.site-card-meta {
  margin: 0;
  font-size: 0.9rem;
  color: var(--muted-foreground);
}

/* Actions sit at the bottom of every card in the row, however tall the card
   above them ran. */
.site-card-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-top: auto;
  padding-top: 14px;
}

.site-card-primary {
  margin: 0;
}

/* Secondary routes read as links, so the one button on the card is the one
   thing that looks like a button. */
.site-card-links {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 0.9rem;
}

.site-card-links a {
  color: var(--link);
  text-decoration: none;
}

.site-card-links a:hover {
  text-decoration: underline;
}

/* Deletion lives below a rule, in body-text size, in the card's quietest
   voice — reachable, never in the way. It only turns destructive-red on
   hover, once you are deliberately on it. */
.site-card-danger {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.site-card-delete {
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 0.85rem;
  color: var(--muted-foreground);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.site-card-delete:hover {
  color: var(--destructive);
}

.site-card-delete:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

/* The create-a-site card is an invitation, not a record: dashed, unfilled,
   and carrying the house primary button. */
.site-card-new {
  background: none;
  border-style: dashed;
  justify-content: center;
}

@media (max-width: 640px) {
  .site-grid {
    grid-template-columns: 1fr;
  }
}