/* Modul licenses — the license server's one stylesheet, no framework.
 *
 * The light look of rowaudio.com (RowAudio-site/assets/style.css), cut down to
 * what a few forms need. The colour names are the site's, which are the apps'
 * Palette names (Theme.swift, preset `light`): change a colour there, change
 * it here too. No web fonts: IBM Plex Mono where it is installed, else the
 * system's monospace — so the CSP needs no font-src and nothing is fetched
 * from anywhere but this server.
 */

:root {
    --ground:      #ddd9cd;
    --field:       #d0ccbf;
    --hover:       #d4d0c3;
    --line:        #b1ada0;
    --line-soft:   #c7c3b6;
    --text:        #1e1c17;
    --dim:         #5a564d;
    --faint:       #625e54;
    --accent:      #f2b632;   /* fill */
    --accent-text: #7d5300;   /* ochre: the accent as text on the chrome */
    --on-accent:   #1d1c1a;
    --ok:          #2e7d3c;
    --bad:         #a52a24;

    --width: 46rem;
    --hairline: 1px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--ground);
    color: var(--text);
    font: 400 15px/1.7 "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    text-rendering: optimizeLegibility;
}

a { color: var(--accent-text); text-decoration: none; }
a:hover { text-decoration: underline; }

.wrap { max-width: var(--width); margin: 0 auto; padding: 0 1.5rem; }

/* header ----------------------------------------------------------------- */

header.site { border-bottom: var(--hairline) solid var(--line); padding: 1rem 0; }
header.site .wrap { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem 2rem; }
.brand { color: var(--text); font-weight: 600; letter-spacing: .02em; white-space: nowrap; }
.brand span { color: var(--dim); font-weight: 400; margin-left: .4rem; }
.brand:hover { text-decoration: none; opacity: .75; }
header.site nav { margin-left: auto; display: flex; flex-wrap: wrap; gap: .3rem 1.5rem; font-size: .82rem; }
header.site nav a { color: var(--dim); white-space: nowrap; }
header.site nav a:hover { color: var(--text); text-decoration: none; }
header.site nav a[aria-current="page"] { color: var(--text); font-weight: 600; }

/* text ------------------------------------------------------------------- */

/* main.wrap, not main: .wrap's padding shorthand would otherwise win */
main.wrap { padding-top: 3rem; }

h1 {
    margin: 0 0 1rem;
    font-size: clamp(1.35rem, 3.4vw, 1.9rem);
    line-height: 1.25;
    font-weight: 600;
    letter-spacing: -.01em;
}

/* captions: capitals with spacing, like Palette.caption() */
h2, label, .step, .facts dt {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    font-weight: 600;
    color: var(--dim);
}
h2 { margin: 2.5rem 0 1rem; }
.step { margin: 0 0 .4rem; color: var(--accent-text); }

p { margin: 0 0 1rem; }
.lead { color: var(--dim); max-width: 40rem; }
.small { color: var(--dim); font-size: .82rem; }

code {
    font-family: inherit;
    font-size: .92em;
    background: var(--field);
    border: var(--hairline) solid var(--line-soft);
    padding: .05em .35em;
}

/* forms ------------------------------------------------------------------ */

form { margin: 1.5rem 0 1.25rem; }
label { display: block; margin: 1.2rem 0 .35rem; }

input[type="text"], textarea {
    display: block;
    width: 100%;
    margin: 0;
    font: inherit;
    font-size: .92rem;
    color: var(--text);
    background: var(--field);
    border: var(--hairline) solid var(--line);
    border-radius: 0;
    padding: .55rem .7rem;
    -webkit-appearance: none;
    appearance: none;
}
input[type="text"]:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
::placeholder { color: var(--faint); opacity: .7; }

textarea { resize: vertical; min-height: 7rem; line-height: 1.5; }
/* codes are one long word: break anywhere, never widen the page */
textarea.code { word-break: break-all; overflow-wrap: anywhere; }
/* the answer: grown to its content where the browser can (a phone needs a
   dozen lines), so all of it shows and nothing hides below a scroll */
textarea[readonly] { background: var(--ground); border-color: var(--accent-text); field-sizing: content; }
textarea + p { margin-top: .6rem; }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; margin-top: 1.25rem; }
.actions a { font-size: .88rem; }

button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
    font: inherit;
    font-size: .88rem;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--on-accent);
    background: var(--accent);
    border: 0;
    border-radius: 0;
    padding: .6rem 1.3rem;
    cursor: pointer;
}
button:hover { filter: brightness(1.06); }
button:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }

/* notices ---------------------------------------------------------------- */

.notice {
    margin: 1.25rem 0;
    padding: .9rem 1.1rem;
    border-left: 2px solid var(--accent);
    background: var(--field);
    color: var(--dim);
    font-size: .86rem;
}
.notice.error { border-left-color: var(--bad); color: var(--text); }
.notice.ok { border-left-color: var(--ok); }

/* facts: caption above, value below, in a grid of hairlines -------------- */

.facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    margin: 1.5rem 0;
    border-top: var(--hairline) solid var(--line-soft);
    border-left: var(--hairline) solid var(--line-soft);
}
.facts div { padding: .8rem 1rem; border-right: var(--hairline) solid var(--line-soft); border-bottom: var(--hairline) solid var(--line-soft); }
.facts dt { font-size: .66rem; margin-bottom: .2rem; }
.facts dd { margin: 0; font-size: 1rem; overflow-wrap: anywhere; }
.facts dd.ok { color: var(--ok); font-weight: 600; }
.facts dd.bad { color: var(--bad); font-weight: 600; }

/* the Macs of a key ------------------------------------------------------ */

.macs { list-style: none; padding: 0; margin: 0 0 1.5rem; font-size: .88rem; }
.macs li {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .1rem 1.5rem;
    padding: .6rem 0;
    border-bottom: var(--hairline) solid var(--line-soft);
}
.macs li:first-child { border-top: var(--hairline) solid var(--line-soft); }
.macs .name { font-weight: 600; overflow-wrap: anywhere; }
.macs .when { color: var(--dim); }
.macs li.freed .name { color: var(--dim); font-weight: 400; }

/* the home page's choices ------------------------------------------------ */

.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    margin: 2rem 0;
    border-top: var(--hairline) solid var(--line);
    border-left: var(--hairline) solid var(--line);
}
.card {
    display: block;
    padding: 1.25rem 1.4rem;
    color: inherit;
    border-right: var(--hairline) solid var(--line);
    border-bottom: var(--hairline) solid var(--line);
    transition: background-color .12s ease;
}
a.card:hover { background: var(--hover); text-decoration: none; }
.card h2 { margin: 0 0 .45rem; font-size: .95rem; text-transform: none; letter-spacing: .02em; color: var(--text); }
.card p { margin: 0; color: var(--dim); font-size: .86rem; }

/* footer ----------------------------------------------------------------- */

footer.site {
    margin-top: 4rem;
    border-top: var(--hairline) solid var(--line);
    padding: 1.5rem 0 2.5rem;
    font-size: .8rem;
    color: var(--dim);
}
footer.site p { margin: 0 0 .3rem; }

/* a phone: a 16 px gutter, the nav under the name, a little less air */
@media (max-width: 34rem) {
    body { font-size: 14px; }
    .wrap { padding: 0 1rem; }
    main.wrap { padding-top: 2rem; }
    header.site nav { margin-left: 0; width: 100%; gap: .3rem 1.1rem; }
}