/* Block — a clear morning over new apartments.
 *
 * The Cozy UI pack (dobo_ui) supplies the buttons, the card and the time bar,
 * as 9-slice border-images. Its cream is #fffdf0 and its outline is #8a4636, so
 * those are the panel and the rule here and nothing has to be recoloured.
 * Headers stay type-led (Fat Ninjas: ribbon logos and round badges read worse,
 * not better); the pack is for the pieces you tap and the plate under a line.
 */

:root {
  --ground: #cfe2f3;
  --sky: #dcecf8;
  --panel: #fffdf0;
  --panel-2: #f6efd9;
  --ink: #3a2622;
  --ink-dim: #7a655d;
  --rule: #8a4636;
  --rule-soft: #d9c6b4;

  --accent: #6cc04a;          /* the pack's green button: yours to act on */
  --accent-ink: #1d2e14;
  --good: #4aa83a;
  --warn: #e0a33c;
  --bad: #d8443c;

  --display: ui-rounded, 'SF Pro Rounded', 'Arial Rounded MT Bold', 'Nunito', 'Segoe UI', system-ui, sans-serif;
  --ui: ui-rounded, 'SF Pro Rounded', 'Arial Rounded MT Bold', 'Segoe UI', system-ui, sans-serif;
  --mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  --radius: 16px;
  --rule-w: 3px;
  --shadow-hard: 0 6px 0 #a9bfd2;
  color-scheme: light;
}

body { background: var(--ground); }
#wordmark, .big { font-weight: 800; letter-spacing: .01em; }
#wordmark { font-size: clamp(18px, 4.8vw, 26px); }
.big { line-height: 1.05; }

/* The stage is a cream card with the pack's brown edge. */
#stage { padding: 12px; }
.chip { background: var(--panel); border-color: var(--rule); font-weight: 700; }

/* Buttons are the pack's square button, sliced. Green is the one that acts;
   ghost is cream. Type stays ours. */
.btn {
  background: transparent; color: var(--accent-ink);
  border: 22px solid transparent;
  border-image: url('/ui/cozy/btn-green.png') 38 44 58 44 fill / 22px stretch;
  border-radius: 0; box-shadow: none;
  min-height: 60px; padding: 4px 6px 12px;
  font-family: var(--display); font-weight: 800; font-size: 18px; letter-spacing: .02em;
}
.btn:active { transform: translateY(3px); box-shadow: none; }
.btn.ghost { background: transparent; color: var(--ink); border-image-source: url('/ui/cozy/btn-cream.png'); }
.btn:disabled { opacity: .55; }

.label { letter-spacing: .16em; font-weight: 700; }
.strip { letter-spacing: 3px; }

.sheet { background: rgba(58,38,34,.45); }
.sheet-body { background: var(--panel); border-color: var(--rule); border-radius: var(--radius); }
.rail-card { background: var(--panel); border: var(--rule-w) solid var(--rule); border-radius: var(--radius); }