/* Suspension surfaces: /suspended and /appeal. Neither page loads Tailwind.
   Linked directly by both, so the two stay one surface. */
:root {
    color-scheme: dark;
    --ap-bg: #1a1b1d;
    --ap-card: #17181c;
    --ap-well: rgba(0, 0, 0, 0.4);
    --ap-panel: rgba(0, 0, 0, 0.28);
    --ap-nested: rgba(255, 255, 255, 0.04);
    --ap-text: #f7f8fc;
    --ap-muted: rgba(247, 248, 252, 0.56);
    --ap-faint: rgba(247, 248, 252, 0.34);
    --ap-green: #7cffb2;
    --ap-red: #ff9aa2;
    --ap-blue: #75d7ff;
    --ap-amber: #ff9f5f;
    --ap-pearl: #d7dbe5;
    --ap-pearl-ink: #1a1c22;
    --ap-ring: 0 0 0 2px #17181c, 0 0 0 4px rgba(255, 255, 255, 0.55);
    --ap-radius-shell: 24px;
    --ap-radius-panel: 16px;
    --ap-radius-row: 14px;
    --ap-radius-control: 14px;
    --ap-ease: 160ms ease;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    min-height: 100vh;
    padding: 40px 16px 64px;
    font-family: "Quicksand", system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 14px;
    color: var(--ap-text);
    background: var(--ap-bg);
}

.hidden { display: none !important; }

.ap-card {
    margin: 0 auto;
    max-width: 640px;
    padding: 32px;
    border-radius: var(--ap-radius-shell);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0) 220px),
        var(--ap-card);
    box-shadow:
        0 28px 80px rgba(0, 0, 0, 0.66),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.ap-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

h1 {
    margin: 0;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.ap-head-actions { display: flex; align-items: center; gap: 8px; }

.ap-meta {
    margin: 8px 0 0;
    font-size: 13px;
    font-weight: 500;
    color: var(--ap-muted);
}

button, .ap-quiet {
    font-family: inherit;
    border: 0;
    cursor: pointer;
    transition: background var(--ap-ease), color var(--ap-ease);
}

button:focus-visible, .ap-quiet:focus-visible, textarea:focus-visible {
    outline: none;
    box-shadow: var(--ap-ring);
}

.ap-quiet {
    display: inline-flex;
    align-items: center;
    height: 36px;
    padding: 0 16px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.07);
    color: var(--ap-text);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

.ap-quiet:hover { background: rgba(255, 255, 255, 0.12); }
.ap-quiet.is-leave:hover { background: rgba(255, 120, 132, 0.18); color: var(--ap-red); }

.ap-section { margin-top: 32px; }

.ap-label {
    margin: 0 0 12px;
    font-size: 14px;
    font-weight: 600;
}

textarea {
    display: block;
    width: 100%;
    min-height: 132px;
    padding: 14px;
    border: 0;
    border-radius: var(--ap-radius-control);
    background: var(--ap-well);
    color: var(--ap-text);
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    resize: vertical;
    outline: none;
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.16);
}

textarea::placeholder { color: var(--ap-faint); font-weight: 500; }
textarea:hover:not(:disabled), textarea:focus:not(:disabled) { box-shadow: inset 0 0 0 2.5px #fff; }
textarea:disabled { color: var(--ap-muted); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.08); }

.ap-send-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    margin-top: 16px;
}

.ap-primary {
    height: 44px;
    padding: 0 24px;
    border-radius: var(--ap-radius-control);
    background: var(--ap-pearl);
    color: var(--ap-pearl-ink);
    font-size: 14px;
    font-weight: 700;
}

.ap-primary:hover:not(:disabled) { background: #eef1f7; }
.ap-primary:disabled {
    background: rgba(255, 255, 255, 0.06);
    color: var(--ap-faint);
    cursor: default;
}

.ap-lead {
    margin: 12px 0 0;
    font-size: 14px;
    line-height: 1.6;
    font-weight: 500;
    color: var(--ap-muted);
}

.ap-primary.is-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.ap-status:empty { display: none; }

.ap-status {
    flex: 1 1 220px;
    min-height: 20px;
    margin: 0;
    font-size: 13px;
    font-weight: 500;
    color: var(--ap-muted);
}

.ap-panel {
    padding: 24px;
    border-radius: var(--ap-radius-panel);
    background: var(--ap-panel);
}

.ap-panel-title { font-size: 15px; font-weight: 700; }

.ap-panel-body {
    margin: 8px 0 0;
    font-size: 13px;
    line-height: 1.6;
    font-weight: 500;
    color: var(--ap-muted);
}

.ap-panel-body a { color: var(--ap-blue); text-decoration: none; }
.ap-panel-body a:hover { text-decoration: underline; }

.ap-accepted {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: rgba(124, 255, 178, 0.1);
}

.ap-accepted .ap-panel-title { color: var(--ap-green); }
.ap-accepted .ap-panel-body { color: rgba(214, 255, 231, 0.7); }

.ap-activate {
    height: 44px;
    padding: 0 24px;
    border-radius: var(--ap-radius-control);
    background: var(--ap-green);
    color: #06210f;
    font-size: 14px;
    font-weight: 700;
}

.ap-activate:hover:not(:disabled) { background: #a5ffca; }
.ap-activate:disabled { background: rgba(124, 255, 178, 0.35); cursor: default; }

.ap-list { display: grid; gap: 8px; margin-top: 12px; }

.ap-empty { margin: 0; font-size: 13px; font-weight: 500; color: var(--ap-faint); }

.ap-appeal {
    padding: 16px;
    border-radius: var(--ap-radius-row);
    background: var(--ap-panel);
}

.ap-appeal.is-owner { background: rgba(255, 159, 95, 0.09); }

.ap-appeal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.ap-appeal-status {
    font-size: 13px;
    font-weight: 600;
    color: var(--ap-muted);
}

.ap-appeal-status.is-accepted { color: var(--ap-green); }
.ap-appeal-status.is-rejected { color: var(--ap-red); }
.ap-appeal-status.is-owner { color: var(--ap-amber); }

.ap-attempt { font-size: 12px; font-weight: 500; color: var(--ap-faint); }

.ap-appeal-body {
    margin: 8px 0 0;
    font-size: 13px;
    line-height: 1.6;
    font-weight: 500;
    color: rgba(247, 248, 252, 0.78);
}

.ap-response {
    margin-top: 12px;
    padding: 12px;
    border-radius: 12px;
    background: var(--ap-nested);
}

.ap-response-label { font-size: 12px; font-weight: 600; color: var(--ap-faint); }

.ap-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 24px 0 0;
    font-size: 12px;
    line-height: 1.5;
    font-weight: 500;
    color: var(--ap-faint);
}

.ap-note-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.09);
    color: var(--ap-muted);
    font-size: 11px;
    font-weight: 700;
}

@media (max-width: 560px) {
    body { padding: 16px 12px 40px; }
    .ap-card { padding: 24px 20px; border-radius: 16px; }
    .ap-section { margin-top: 24px; }
    .ap-panel { padding: 16px; }
}