/* Shared component layer (.fo-*). Module-specific CSS goes in its own file. */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: var(--fo-font);
    background: var(--fo-paper);
    color: var(--fo-ink);
    line-height: 1.5;
    min-height: 100vh;
}

.fo-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--fo-space-3);
    padding: var(--fo-space-3) var(--fo-space-4);
    border-bottom: 1px solid var(--fo-line);
}

.fo-brand { display: flex; align-items: center; gap: var(--fo-space-2); font-weight: 700; font-size: 20px; }
.fo-mark { width: 22px; height: 22px; border-radius: 6px; background: var(--fo-ink); box-shadow: inset -6px -6px 0 var(--fo-wood); }
.fo-pill { border: 1.5px solid var(--fo-ink); border-radius: var(--fo-radius-pill); padding: 0 var(--fo-space-2); font-size: 14px; }

.fo-status { font-size: 13px; font-weight: 600; padding: var(--fo-space-1) var(--fo-space-3); border-radius: var(--fo-radius-pill); background: var(--fo-paper-2); color: var(--fo-muted); }
.fo-status[data-state="ok"] { background: var(--fo-ok); color: var(--fo-paper); }
.fo-status[data-state="error"] { background: var(--fo-error); color: var(--fo-paper); }

.fo-main { max-width: 720px; margin: 0 auto; padding: var(--fo-space-5) var(--fo-space-3); }
.fo-title { font-size: clamp(40px, 8vw, 72px); line-height: 1; letter-spacing: -0.02em; font-weight: 700; }
.fo-title em { font-family: var(--fo-font-serif); font-weight: 400; color: var(--fo-wood-dark); }
.fo-lead { margin-top: var(--fo-space-3); color: var(--fo-ink-2); font-size: 18px; }

.fo-card { margin-top: var(--fo-space-5); background: #fff; border: 1px solid var(--fo-line); border-radius: var(--fo-radius); padding: var(--fo-space-4); }
.fo-card h2 { font-size: 18px; margin-bottom: var(--fo-space-3); }

.fo-kv { display: grid; grid-template-columns: max-content 1fr; gap: var(--fo-space-1) var(--fo-space-3); font-size: 14px; margin-bottom: var(--fo-space-3); }
.fo-kv dt { color: var(--fo-muted); }
.fo-kv dd { font-family: ui-monospace, Consolas, monospace; overflow-wrap: anywhere; }

.fo-btn { font: inherit; font-weight: 600; cursor: pointer; border: 0; border-radius: var(--fo-radius-pill); padding: var(--fo-space-2) var(--fo-space-4); background: var(--fo-ink); color: var(--fo-paper); }
.fo-btn:hover { background: var(--fo-ink-2); }
.fo-btn:disabled { opacity: .5; cursor: wait; }