/* tilde.css -- the stylesheet for the tilde's OWN pages (/ and /join).
 *
 * Installed into ${TILDE_SRV}/www by 'tilde-admin index', which also renders
 * index.html against it -- one owner for the whole generated webroot, so the
 * page and the stylesheet it links can never ship half-updated.
 *
 * Members' pages under /~name/ do not get this and never should. Theirs are
 * entirely their own, and inheriting a house style would be the opposite of
 * the point.
 */

:root {
  color-scheme: light dark;
  --bg: #fbfaf7; --fg: #1a1a1a; --dim: #6b6b6b;
  --line: #e2ded6; --accent: #7a4a1e; --card: #fff;
}
@media (prefers-color-scheme: dark) {
  :root { --bg:#14150f; --fg:#e6e3da; --dim:#8f8d84;
          --line:#2c2d24; --accent:#d9a05b; --card:#1b1c15; }
}

* { box-sizing: border-box; }

body {
  background: var(--bg); color: var(--fg); margin: 0;
  font: 15px/1.65 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
.wrap { max-width: 46rem; margin: 0 auto; padding: 4rem 1.5rem 6rem; }

h1 { font-size: 1.6rem; margin: 0 0 .2rem; letter-spacing: -0.01em; }
h1 .tilde { color: var(--accent); }
.sub { color: var(--dim); margin: 0 0 2.5rem; }

h2 { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em;
     color: var(--dim); font-weight: 600;
     border-bottom: 1px solid var(--line); padding-bottom: .5rem;
     margin: 3rem 0 1rem; }

a { color: var(--accent); }

code { background: color-mix(in srgb, currentColor 9%, transparent);
       padding: .12em .4em; border-radius: 3px; font-size: .9em; }

footer { margin-top: 4rem; padding-top: 1.5rem;
         border-top: 1px solid var(--line);
         color: var(--dim); font-size: .85rem; }

/* ---- The member list on / ---------------------------------------------- */

ul.members { list-style: none; padding: 0; margin: 0;
             display: grid; gap: .75rem; }
li.member { background: var(--card); border: 1px solid var(--line);
            border-radius: 7px; padding: .8rem 1rem; }
li.member a { color: var(--accent); text-decoration: none;
              font-weight: 600; font-size: 1.02rem; }
li.member a:hover { text-decoration: underline; }
.plan { color: var(--dim); margin: .35rem 0 0; white-space: pre-wrap;
        font-size: .88rem; }
.empty { color: var(--dim); font-style: italic; }

/* ---- Document pages: /join ---------------------------------------------
 * Prose, not a list of cards, so the headings stop being small-caps labels
 * and become headings. Everything else is shared with the landing page.
 */

.doc h2 { font-size: 1.08rem; text-transform: none; letter-spacing: 0;
          color: var(--fg); font-weight: 600;
          border-bottom: 0; padding-bottom: 0; margin: 2.8rem 0 .9rem; }
.doc h3 { font-size: .95rem; font-weight: 600; color: var(--fg);
          margin: 2rem 0 .6rem; }
.doc p  { margin: 0 0 1.15rem; }
.doc strong { color: var(--fg); font-weight: 600; }
.doc ul { padding-left: 1.3rem; margin: 0 0 1.15rem; }
.doc li { margin: 0 0 .4rem; }

/* Long ssh and ssh-keygen lines are wider than a phone. Let the block
 * scroll on its own rather than the page scrolling sideways. */
.doc pre { background: var(--card); border: 1px solid var(--line);
           border-radius: 7px; padding: .85rem 1rem; margin: 0 0 1.25rem;
           overflow-x: auto; font-size: .88rem; line-height: 1.55; }
.doc pre code { background: none; padding: 0; font-size: inherit; }

.doc hr { border: 0; border-top: 1px solid var(--line); margin: 2.6rem 0; }

.nav { margin: 0 0 2.5rem; font-size: .88rem; }
.nav a { text-decoration: none; }
.nav a:hover { text-decoration: underline; }