/**
 * home.css — S1-only styles on top of onrecord.css (design.md Part II;
 * docs/design-on-record/screens-spec.md §S1). Everything shared (viewfinder,
 * HUD, spec bar, ledger, scene grammar) lives in onrecord.css; this file holds
 * only S1's compositions: the tier mini-strip, the record two-column split,
 * the start-here grid, and the scene's phase-2 log plate.
 */

/* ── business deck ──────────────────────────────────────────────────────── */

.sanctioned-line {
  max-inline-size: 46ch;
  margin-block-start: 22px;
  padding-inline-start: 16px;
  border-inline-start: 2px solid var(--color-accent);
}
.deck-body {
  max-inline-size: 62ch;
  margin-block-start: 18px;
  color: var(--color-ink-soft);
  font-size: var(--text-body-lat-size);
  line-height: var(--text-body-lat-leading);
}
:lang(ar) .deck-body {
  font-family: var(--font-stack-text-ar);
  font-size: var(--text-body-ar-size);
  line-height: var(--text-body-ar-leading);
}
.deck-legal {
  margin-block-start: 26px;
  max-inline-size: 66ch;
  font-size: var(--text-legal-lat);
  line-height: 1.65;
  color: var(--color-ink-muted);
}
:lang(ar) .deck-legal {
  font-family: var(--font-stack-text-ar);
  font-size: var(--text-legal-ar);
  line-height: 1.9;
}
.deck__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-block-start: 30px;
}

/* tier mini-strip: three welded rows, Medium inverted */
.home-tiers {
  margin-block-start: 34px;
  border: var(--seam-size) solid var(--color-rule);
}
.home-tiers__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 24px;
  padding: 16px clamp(16px, 2.4vw, 26px);
  background: var(--color-surface);
  transition: transform var(--dur-lift) var(--ease-micro);
}
.home-tiers__row:hover {
  transform: translateY(var(--hover-lift));
}
.home-tiers__row + .home-tiers__row {
  border-block-start: var(--seam-size) solid var(--color-rule);
}
.home-tiers__row--featured {
  background: var(--color-invert-bg);
  color: var(--color-invert-ink);
}
.home-tiers__count {
  color: var(--color-ink-muted);
}
.home-tiers__row--featured .home-tiers__count {
  color: var(--color-invert-ink-2);
}

/* ── record deck ────────────────────────────────────────────────────────── */

.deck--record {
  background: var(--color-surface-alt);
}
.record-cols {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(32px, 4.5vw, 72px);
}
.record-cols__text {
  flex: 1 1 320px;
  max-inline-size: 480px;
}
.record-cols__ledger {
  flex: 1.3 1 460px;
}

/* ── the scene's phase-2 log plate ──────────────────────────────────────── */

.scene-log {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  color: var(--color-ink);
}
.scene-log__mark {
  inline-size: 56%;
  color: var(--color-ink);
}
.scene-log__mark svg {
  inline-size: 100%;
  block-size: auto;
  direction: ltr;
}
.scene-log__line {
  font-family: var(--font-stack-mono);
  font-size: var(--text-micro-lat);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
  border: var(--seam-size) solid var(--color-rule);
  background: var(--scrim-hud);
  padding: var(--hud-plate-pad);
}
:lang(ar) .scene-log__line {
  font-family: var(--font-stack-text-ar);
  letter-spacing: 0;
  text-transform: none;
  font-size: 13px;
}
.scene-log__corner {
  position: absolute;
  inline-size: 26px;
  block-size: 26px;
  border: 0 solid var(--color-ink);
}
.scene-log__corner--tl {
  inset-block-start: -6%;
  inset-inline-start: -8%;
  border-block-start-width: 2px;
  border-inline-start-width: 2px;
}
.scene-log__corner--tr {
  inset-block-start: -6%;
  inset-inline-end: -8%;
  border-block-start-width: 2px;
  border-inline-end-width: 2px;
}
.scene-log__corner--bl {
  inset-block-end: -6%;
  inset-inline-start: -8%;
  border-block-end-width: 2px;
  border-inline-start-width: 2px;
}
.scene-log__corner--br {
  inset-block-end: -6%;
  inset-inline-end: -8%;
  border-block-end-width: 2px;
  border-inline-end-width: 2px;
}

.scene-cam {
  color: var(--color-ink);
}

/* ── start-here grid ────────────────────────────────────────────────────── */

.start-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}
.start-grid__cell {
  background: var(--color-surface);
  padding: clamp(26px, 3.4vw, 44px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  transition: background-color var(--dur-hover) var(--ease-micro);
}
.start-grid__cell:hover {
  background: var(--color-surface-raised);
}