/* Soleus artists' portal: the website's gold and dark red, quiet, for forms, lists and pictures. */
:root {
    --gold: #f2c35b;
    --gold-deep: #c9962a;
    --red: #7d1a10;
    --red-bright: #a8301e;
    --ink: #120c08;
    --panel: #1d140d;
    --panel-light: #281c13;
    --edge: rgba(201, 150, 42, 0.35);
    --text: #f6ecd9;
    --soft: #c9b896;
    --ok: #79c96b;
    --bad: #e2675a;
    --serif: Georgia, 'Times New Roman', serif;
}

* { box-sizing: border-box; }

/* hidden wins over the display the classes give. */
[hidden] { display: none !important; }

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--ink);
    color: var(--text);
    font: 16px/1.55 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

.top {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    border-bottom: 1px solid var(--edge);
    background: linear-gradient(#2a1a10, #170f09);
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand img { height: 40px; width: auto; }
.brand span { font: 600 20px var(--serif); color: var(--gold); }
.who { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; color: var(--soft); }

main { flex: 1; width: 100%; max-width: 980px; margin: 0 auto; padding: 18px 20px 40px; }
.foot { padding: 14px 20px; text-align: center; color: var(--soft); font-size: 13px; border-top: 1px solid var(--edge); }

.panel { background: var(--panel); border: 1px solid var(--edge); border-radius: 10px; padding: 18px 20px; margin-bottom: 16px; }
.panel.narrow { max-width: 440px; margin: 30px auto; }

h1, h2 { margin: 0 0 10px; font: 600 22px var(--serif); color: var(--gold); }
h3 { margin: 18px 0 8px; font: 600 17px var(--serif); color: var(--gold); }
p { margin: 6px 0; }
.soft { color: var(--soft); }
.note { color: var(--soft); font-size: 14px; }
.error { color: var(--bad); min-height: 1.4em; }

label { display: block; margin: 0 0 12px; color: var(--soft); }
input, textarea, select {
    display: block;
    width: 100%;
    margin-top: 4px;
    padding: 9px 10px;
    border: 1px solid var(--edge);
    border-radius: 6px;
    background: #0d0906;
    color: var(--text);
    font: inherit;
}
textarea { resize: vertical; }
input.code { font-size: 22px; letter-spacing: 0.3em; text-align: center; max-width: 220px; }
input:focus, textarea:focus, button:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }

button {
    padding: 9px 16px;
    border: 1px solid var(--gold-deep);
    border-radius: 6px;
    background: var(--red);
    color: var(--text);
    font: inherit;
    cursor: pointer;
}
button:hover { background: var(--red-bright); }
button.quiet { background: transparent; border-color: var(--edge); color: var(--soft); }
button.quiet:hover { color: var(--text); }
button:disabled { opacity: 0.55; cursor: default; }

.tabs { display: flex; gap: 6px; max-width: 980px; width: 100%; margin: 14px auto 0; padding: 0 20px; }
.tabs button { background: var(--panel-light); border-color: var(--edge); }
.tabs button.active { background: var(--red); border-color: var(--gold-deep); }

.message { max-width: 940px; margin: 12px auto 0; padding: 9px 14px; border-radius: 6px; background: #1f3a1a; border: 1px solid var(--ok); }
.message.bad { background: #3a1510; border-color: var(--bad); }

.list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.item {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 6px 14px;
    padding: 12px 14px;
    border: 1px solid var(--edge);
    border-radius: 8px;
    background: var(--panel-light);
    cursor: pointer;
}
.item:hover, .item:focus-visible { border-color: var(--gold-deep); }
.item .name { font-weight: 600; }
.badge { display: inline-block; padding: 1px 9px; border-radius: 999px; font-size: 13px; border: 1px solid var(--edge); color: var(--soft); }
.badge.s1, .badge.s3 { color: var(--gold); border-color: var(--gold-deep); }
.badge.s4 { color: var(--ok); border-color: var(--ok); }
.badge.s5 { color: var(--bad); border-color: var(--bad); }

.facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px 16px; margin: 10px 0; }
.facts div span { display: block; color: var(--soft); font-size: 13px; }
.pre { white-space: pre-wrap; overflow-wrap: anywhere; }

.delivery { border-top: 1px solid var(--edge); padding-top: 8px; margin-top: 12px; }
.sprites { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; margin: 8px 0; }
.sprite { margin: 0; max-width: 100%; }
.sprite img {
    display: block;
    max-width: 100%;
    height: auto;
    image-rendering: pixelated;
    background: repeating-conic-gradient(#3a3a40 0 25%, #4a4a52 0 50%) 0 0 / 16px 16px;
    border: 1px solid var(--edge);
}
.sprite figcaption { color: var(--soft); font-size: 13px; margin-top: 4px; }
.quote { padding: 8px 12px; margin: 8px 0; border-left: 3px solid var(--edge); background: rgba(0, 0, 0, 0.25); white-space: pre-wrap; overflow-wrap: anywhere; }
.quote.mine { border-left-color: var(--gold-deep); }
.quote strong { display: block; color: var(--soft); font-size: 13px; font-weight: 600; }

.qr { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; margin: 12px 0; }
.qr img { width: 200px; height: 200px; image-rendering: pixelated; background: #fff; padding: 8px; border-radius: 6px; }
.key { font: 600 17px ui-monospace, Consolas, monospace; letter-spacing: 0.05em; color: var(--gold); overflow-wrap: anywhere; }
.steps { margin: 6px 0 12px; padding-left: 20px; }
.steps li { margin: 4px 0; }

table { width: 100%; border-collapse: collapse; margin: 6px 0 10px; }
th, td { padding: 7px 8px; border-bottom: 1px solid rgba(201, 150, 42, 0.15); text-align: left; }
th { color: var(--soft); font-weight: 600; font-size: 13px; }
td.number, th.number { text-align: right; font-variant-numeric: tabular-nums; }
.scroll { overflow-x: auto; }

@media (max-width: 600px) {
    main { padding: 12px; }
    .top { padding: 10px 12px; }
    .tabs { padding: 0 12px; }
    th, td { padding: 6px 4px; font-size: 14px; }
}