/* app.css — Sentia's own surfaces: main, cards, tabs, chips, the four states, the
 * boundary, the landing stage, and the status footer.
 *
 * The HEADER is not here. Since 0.3.x the chrome is the suite's shared
 * `app-shell.css` (REQ-SENTIA-075, T-052/T-053) — `.app-header`, `.header-logo`,
 * `.app-mark`, `.app-wordmark`, `.app-tabbar`/`.app-tab`, `.header-right`, and the
 * canonical gradient-pill `.app-logout`. The old `.brand*` / `.nav-tab` / `.ghost-btn`
 * rules are deleted, not overridden: two stylesheets arguing over one header is how a
 * suite app drifts back out of the suite.
 *
 * Tokens only; no colour literal appears below this line except inside the two
 * gradients that ARE the suite's primary treatment, which app-shell.css writes the
 * same way.
 */

/* ── Header: the one node Sentia adds ─────────────────────────────────────── */

/* #session-notice sits before the identity chip and is EMPTY in the normal case.
   It exists so a dormant or unreadable handshake is stated in the chrome instead of
   leaving a header that merely looks anonymous. */
#session-notice:empty { display: none; }

/* ── Chips ────────────────────────────────────────────────────────────────── */

.chip {
    display: inline-flex;
    align-items: center;
    font-size: 0.66rem;
    font-weight: 500;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid var(--border-strong);
    background: rgba(255, 255, 255, 0.03);
    white-space: nowrap;
    line-height: 1.5;
}
.chip-muted    { color: var(--text-dim); }
.chip-measured { color: var(--measured); border-color: rgba(0, 255, 180, 0.28); background: rgba(0, 255, 180, 0.06); }
/* SIMULATED is never a success colour and never green (audience-integrity.md). */
.chip-simulated{ color: var(--simulated); border-color: rgba(167, 139, 255, 0.32); background: rgba(120, 80, 255, 0.08); }
.chip-warning  { color: var(--warning);  border-color: rgba(255, 170, 48, 0.3);  background: rgba(255, 170, 48, 0.07); }
.chip-error    { color: var(--error);    border-color: rgba(255, 68, 102, 0.32); background: rgba(255, 68, 102, 0.07); }
.chip-ok       { color: var(--measured); border-color: rgba(0, 255, 180, 0.28);  background: rgba(0, 255, 180, 0.06); }

/* ── Main + surfaces ──────────────────────────────────────────────────────── */

.app-main {
    position: relative;
    z-index: 1;
    flex: 1;
    padding: 30px 28px 44px;
    max-width: 1080px;
    width: 100%;
    margin: 0 auto;
}

.surface-head { margin-bottom: 22px; }
.surface-head .eyebrow {
    font-size: 0.66rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-dim);
    display: block;
    margin-bottom: 6px;
}
.surface-head h1 { font-family: var(--font-display); font-weight: 300; letter-spacing: 0.01em; }
.surface-head .lede { margin-top: 8px; max-width: 62ch; }

/* In-surface tabs, cut to the same pattern as the header's `.app-tab`: cyan rule,
   a breath of gradient under the active one. */
.tabs { display: flex; gap: 2px; margin: 18px 0 20px; border-bottom: 1px solid var(--border); }
.tab {
    padding: 8px 14px;
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--text-muted);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 0.2s, background 0.2s;
}
.tab:hover { color: var(--text); text-decoration: none; }
.tab[aria-current="page"] {
    color: var(--cyan);
    border-bottom-color: var(--cyan);
    background: linear-gradient(180deg, transparent 28%, rgba(0, 200, 255, 0.1));
}

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px 26px;
    box-shadow: var(--card-shadow);
}
.card + .card { margin-top: 16px; }

.card h2 { margin-bottom: 6px; }
.card h3 { color: var(--text); margin-top: 22px; margin-bottom: 6px; }
.card h3:first-child { margin-top: 0; }
.card .card-mark { display: block; margin-bottom: 16px; }

/* ── The four states ──────────────────────────────────────────────────────── */

/* 1. Loading — a skeleton that matches the final layout, not a spinner. */
.skeleton-line {
    height: 12px;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--surface-2) 0%, var(--border-strong) 50%, var(--surface-2) 100%);
    background-size: 200% 100%;
    animation: shimmer 1.4s linear infinite;
    margin-bottom: 12px;
}
.skeleton-line.w-40 { width: 40%; }
.skeleton-line.w-70 { width: 70%; }
.skeleton-line.w-90 { width: 90%; }
.skeleton-block { height: 96px; border-radius: var(--radius-sm); }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* 2. Empty — and it NAMES the artifact that would fill it (REQ-SENTIA-007). */
.empty-artifact {
    margin-top: 16px;
    padding: 14px 16px;
    border-left: 2px solid var(--cyan);
    background: rgba(0, 200, 255, 0.045);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.empty-artifact .artifact-name {
    color: var(--text);
    font-weight: 500;
    font-size: 0.8rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.empty-artifact p { margin-top: 4px; }
/* The requirement trail stays READABLE: it is the honest half of an empty surface
   (what would fill it, and what holds it), not decoration. */
.empty-artifact .artifact-req {
    display: block;
    margin-top: 8px;
    font-family: var(--font-mono);
    font-size: 0.74rem;
    color: var(--text-muted);
}

/* 3. Error — with a retry, always. */
.state-error { border-color: rgba(255, 68, 102, 0.4); }
.state-error h2 { color: var(--error); }

/* 4. Populated — there is no such state in this build, and no fixture stands in for
   one. A seeded population presented as a measurement is the failure this product
   exists to prevent (security.md §No fixtures in runtime paths). */

.actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }
.btn {
    font: inherit;
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-strong);
    background: var(--surface-2);
    color: var(--text);
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
.btn:hover {
    border-color: rgba(0, 200, 255, 0.35);
    background: rgba(0, 200, 255, 0.06);
    text-decoration: none;
}
/* The suite's primary treatment — the same cyan→violet the signed-out card and the
   logout pill carry. */
.btn-primary {
    background: linear-gradient(135deg, rgba(0, 200, 255, 0.2) 0%, rgba(120, 80, 255, 0.2) 100%);
    border-color: rgba(0, 200, 255, 0.25);
    color: var(--cyan);
}
.btn-primary:hover {
    background: linear-gradient(135deg, rgba(0, 200, 255, 0.3) 0%, rgba(120, 80, 255, 0.3) 100%);
    border-color: rgba(0, 200, 255, 0.4);
    box-shadow: 0 0 20px rgba(0, 200, 255, 0.08);
    color: var(--cyan);
}

/* ── Landing stage — one purpose, one primary call to action ──────────────── */

.landing {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 48px 0 20px;
    max-width: 68ch;
}
.landing .landing-mark { display: block; margin-bottom: 16px; }
.landing h1 { font-family: var(--font-display); font-size: 2.1rem; font-weight: 300; letter-spacing: 0.02em; }
/* The header tagline moved here at 0.3.x: the suite header carries a wordmark and
   nothing else, so Sentia's subtitle lives on its own stage. */
.landing .tagline {
    font-size: 0.7rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--text-dim);
    margin-top: 2px;
}
.landing .claim { font-size: 1.02rem; color: var(--text-muted); margin-top: 16px; }
.landing .disclaimer {
    margin-top: 22px;
    font-size: 0.86rem;
    color: var(--text-dim);
    border-top: 1px solid var(--border);
    padding-top: 16px;
}

/* ── Definition rows (used by Admin's contract pane) ──────────────────────── */

.defs { display: grid; grid-template-columns: minmax(160px, 220px) 1fr; gap: 10px 18px; margin-top: 14px; }
.defs dt { color: var(--text); font-size: 0.86rem; }
.defs dd { color: var(--text-muted); font-size: 0.86rem; }
.defs dd code { color: var(--text); }

/* ── The error boundary ───────────────────────────────────────────────────── */

.boundary { border-color: rgba(255, 68, 102, 0.4); }
.boundary h2 { color: var(--error); }
.boundary pre {
    margin-top: 14px;
    padding: 12px 14px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow-x: auto;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--text-muted);
    white-space: pre-wrap;
}

/* ── The denied treatment ─────────────────────────────────────────────────── */

/* denied.css is the suite's file and is carried verbatim; these are the two things
   Sentia adds. The height override is layout-only: the shared rule assumes a header
   and nothing else, and Sentia also carries a status footer, so a viewport-height
   container would push the page into a scroll for ~34px of nothing. */
.app-main .denied-container { height: auto; min-height: 52vh; padding: 24px 0; }
.denied-card .denied-mark { display: block; margin: 0 auto 18px; }
.denied-card .denied-reason { margin-top: 14px; font-size: 0.82rem; color: var(--text-dim); }
.denied-card .denied-actions { margin-top: 22px; display: flex; justify-content: center; }

/* ── Status footer ────────────────────────────────────────────────────────── */

/* Kept as Sentia's own (T-063): no sibling app carries an app-wide status footer, and
   this one is doctrine — the enveloped /api/status is REQ-SENTIA-069's first proof.
   Restyled onto the suite tokens, unchanged in what it says. */
.app-footer {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 22px;
    background: var(--deep);
    border-top: 1px solid var(--border);
    font-size: 0.76rem;
    color: var(--text-muted);
    flex-wrap: wrap;
}
.foot-key {
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.64rem;
    margin-right: 4px;
}
.foot-sep { color: var(--text-dim); }
.foot-spacer { flex: 1; }
.foot-item { display: inline-flex; align-items: center; gap: 2px; }

/* ── Small screens: the nav stays present, never hidden behind a menu.
   Full small-screen parity is REQ-SENTIA-009 (Phase 3) and is NOT claimed here —
   this keeps the skeleton usable, it does not make the flows responsive. ── */

@media (max-width: 720px) {
    .app-main { padding: 22px 16px 36px; }
    .defs { grid-template-columns: 1fr; gap: 4px 0; }
    .defs dd { margin-bottom: 10px; }
}