/* Clay Grace                                             rubbermetal@yahoo.com
 * public/assets/css/demo.css                                        2026-07-25
 *
 * Layered on top of Loom's stock site.css: the showcase bits (hero, library
 * cards, demo forms, output blocks) that this particular site needs. System
 * fonts only, and the palette follows prefers-color-scheme.
 */

:root {
    --demo-accent:  #3355dd;
    --demo-surface: #ffffff;
    --demo-sunk:    #f4f6f9;
    --demo-border:  #e2e6ec;
    --demo-muted:   #5b6472;
    --demo-yes:     #1a7f4b;
    --demo-no:      #b4243c;
}

@media (prefers-color-scheme: dark) {
    :root {
        --demo-accent:  #6f8bff;
        --demo-surface: #171b21;
        --demo-sunk:    #0f1216;
        --demo-border:  #262b33;
        --demo-muted:   #9aa4b2;
        --demo-yes:     #4ade80;
        --demo-no:      #f87171;
    }
}

/* ---- hero ------------------------------------------------------------- */
.hero            { padding: 2.5rem 0 1.5rem; }
.hero .kicker    { text-transform: uppercase; letter-spacing: .08em; font-size: .75rem;
                   color: var(--demo-muted); margin: 0 0 .6rem; }
.hero h1         { font-size: clamp(2rem, 6vw, 3rem); line-height: 1.1; margin: 0 0 .6rem; }
.hero .lede      { font-size: 1.15rem; color: var(--demo-muted); max-width: 46ch; margin: 0 0 1.4rem; }
.hero-actions    { display: flex; gap: .6rem; flex-wrap: wrap; }

.button.ghost    { background: transparent; border: 1px solid var(--demo-border);
                   color: inherit; }
.button.ghost:hover { border-color: var(--demo-accent); color: var(--demo-accent); }

/* ---- library cards ---------------------------------------------------- */
.cards           { display: grid; gap: 1rem; margin: 2rem 0 3rem;
                   grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.card            { background: var(--demo-surface); border: 1px solid var(--demo-border);
                   border-radius: 12px; padding: 1.2rem 1.3rem; }
.card h2         { margin: 0 0 .1rem; font-size: 1.2rem; }
.card h2 a       { text-decoration: none; }
.card .role      { margin: 0 0 .7rem; font-size: .8rem; text-transform: uppercase;
                   letter-spacing: .05em; color: var(--demo-muted); }
.card p          { margin: 0 0 .7rem; }
.card .try       { margin: 0; font-weight: 600; }
.card.admin-card { border-style: dashed; }

/* ---- prose helpers ---------------------------------------------------- */
.note            { font-size: .92rem; color: var(--demo-muted); }
.notice          { background: var(--demo-sunk); border-left: 3px solid var(--demo-accent);
                   padding: .7rem .9rem; border-radius: 0 6px 6px 0; }

/* ---- forms ------------------------------------------------------------ */
form.stack       { display: grid; gap: .9rem; margin: 1.5rem 0 2rem; }
form.stack label { display: grid; gap: .3rem; font-weight: 600; font-size: .9rem; }
form.stack .row  { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
form.stack .checks { display: flex; gap: 1.2rem; flex-wrap: wrap; }
form.stack .check  { display: flex; flex-direction: row; align-items: center; gap: .4rem;
                     font-weight: 400; }
form.stack input[type="text"],
form.stack input:not([type]),
form.stack select,
form.stack textarea {
    width: 100%; padding: .5rem .6rem; font: inherit; color: inherit;
    background: var(--demo-surface); border: 1px solid var(--demo-border);
    border-radius: 7px;
}
form.stack textarea { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
                      font-size: .86rem; line-height: 1.45; resize: vertical; }
form.stack input:focus, form.stack textarea:focus, form.stack select:focus {
    outline: 2px solid var(--demo-accent); outline-offset: 1px; border-color: transparent;
}

/* ---- output blocks ---------------------------------------------------- */
figure.out       { margin: 1.4rem 0; border: 1px solid var(--demo-border);
                   border-radius: 10px; overflow: hidden; background: var(--demo-surface); }
figure.out figcaption { padding: .45rem .8rem; font-size: .76rem; font-weight: 700;
                   text-transform: uppercase; letter-spacing: .06em;
                   color: var(--demo-muted); background: var(--demo-sunk);
                   border-bottom: 1px solid var(--demo-border); }
figure.out pre   { margin: 0; padding: .9rem; overflow-x: auto;
                   font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
                   font-size: .84rem; line-height: 1.5; white-space: pre-wrap;
                   word-break: break-word; }
figure.out .rendered { padding: .9rem 1rem; }
figure.out.err   { border-color: var(--demo-no); }
figure.out.err figcaption { color: var(--demo-no); }

/* ---- tables ----------------------------------------------------------- */
table.grid       { width: 100%; border-collapse: collapse; margin: 1.2rem 0; font-size: .9rem;
                   display: block; overflow-x: auto; }
table.grid th, table.grid td { text-align: left; padding: .5rem .7rem;
                   border-bottom: 1px solid var(--demo-border); vertical-align: top; }
table.grid thead th { font-size: .74rem; text-transform: uppercase; letter-spacing: .05em;
                   color: var(--demo-muted); }
table.grid code  { white-space: nowrap; }
table.verdict th { width: 9rem; color: var(--demo-muted); font-weight: 600; }
.yes             { color: var(--demo-yes); font-weight: 600; }
.no              { color: var(--demo-no); font-weight: 600; }
table.grid small { color: var(--demo-muted); }

/* ---- footer ----------------------------------------------------------- */
.footer-links    { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center;
                   font-size: .88rem; }
.footer-links .creds { color: var(--demo-muted); }

@media (max-width: 34rem) {
    .footer-inner  { flex-direction: column; align-items: flex-start; gap: .5rem; }
    table.verdict th { width: auto; }
}