/**
 * @file public/css/views/surface.css
 * @author Jouni Miikki
 * SPDX-License-Identifier: MIT
 * @description The few things the surface layout engine draws itself: the band that groups blocks,
 *   the frame around a passage the operator wrote, and the way into settings.
 *
 *   DELIBERATELY SMALL. Every block on these pages is a component that already had its own styling —
 *   koti-* on the home, ld-* on the front page — and the engine only orders and groups them. A
 *   second set of rules for what those components already draw is how two stylesheets start
 *   disagreeing about one element.
 * @structure .sf-band · .sf-free · .sf-portal-text · .sf-portal-board · .sf-settings-door
 * @usage Linked from public/spa.html beside the other view stylesheets.
 * @version-history
 *   v1.0.0 — 2026-08-26 — Initial.
 */

/* A group with a heading. The blocks inside keep their own spacing; this is the frame.
   These numbers are the home's own band (.koti-band in views/home.css), matched deliberately: the
   band that groups the playbooks with the achievements strip was drawn by the home before the engine
   existed, and it has to look the same afterwards. It lives here rather than there because the front
   page can group blocks too, and a rule the portal needs does not belong in the home's stylesheet. */
.sf-band {
  margin-top: 1.8rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--border);
}

.sf-band-title {
  font-size: 0.92rem;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: var(--text-dim);
  font-weight: 700;
  margin: 0 0 0.9rem;
}

/* Inside a band, successive rows keep one rhythm: more air between rows than between the chips
   inside one, so the categories read apart instead of as one lump. */
.sf-band > * + * { margin-top: 1.3rem; }
.sf-band > .sf-band-title + * { margin-top: 0; }

/* A passage the operator wrote. Three framings, because an aside and a section of the page are
   not the same thing and an operator can tell which one they meant. */
.sf-free {
  margin: 1.25rem 0;
}

.sf-free-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
}

.sf-free-band {
  border-left: 3px solid var(--accent);
  padding-left: 1rem;
}

.sf-free-title {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--text-bright);
  margin: 0 0 0.5rem;
}

/* The passage keeps the shared markdown body's own rules; only its outer spacing is set here. */
.sf-free .md-body {
  color: var(--text);
}

.sf-portal-text,
.sf-portal-board {
  margin: 1.5rem 0;
}

.sf-settings-door {
  margin: 1rem 0;
}