:root {
  /* Five sizes, and nothing else. Every rule below picks one of them; a new
     value here means a sixth size on the page, which is how ten of them
     accumulated the first time. */
  --t-xs: .85rem;    /* nav, labels, captions, anything marginal */
  --t-sm: .95rem;    /* secondary prose and the text on controls */
  --t-md: 1.125rem;  /* reading size - the body default */
  --t-lg: 1.3rem;    /* a lede, and the boxes you type a sentence into */
  --t-xl: 1.75rem;   /* the one heading a page is about */

  --sans: ui-sans-serif, system-ui, sans-serif;
  --serif: Iowan Old Style, Palatino, Georgia, serif;

  --ink: #1c1b19;
  --muted: #6b675f;
  --rule: #ddd8ce;
  --paper: #fbfaf7;
  --accent: #7a3b1d;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #e6e2da;
    --muted: #97918a;
    --rule: #37342f;
    --paper: #161513;
    --accent: #d99a6c;
  }
}

* { box-sizing: border-box; }

/* The browser's own [hidden] rule is display:none from the user-agent sheet,
   and any display this stylesheet sets - flex on a form, say - outranks it
   regardless of specificity. Without this, `hidden` quietly does nothing on
   exactly the elements that most need it. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: var(--t-md)/1.65 var(--serif);
}

main {
  max-width: 36rem;
  margin: 0 auto;
  padding: 4rem 1rem 6rem;
}

h1 { font-size: var(--t-xl); line-height: 1.2; margin: 0 0 .6rem; }
h2 {
  font: 600 var(--t-sm)/1.4 var(--sans);
  color: var(--muted); margin: 0 0 .6rem;
}

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }

.masthead { border-bottom: 1px solid var(--rule); padding-bottom: 1.5rem; margin-bottom: 2rem; }
h1.lede, .lede {
  margin: 0; font-weight: 400;
  font-size: var(--t-lg); line-height: 1.45; color: var(--muted);
}
.kicker, .meta, .note {
  font: var(--t-xs)/1.5 var(--sans);
  color: var(--muted);
}
.kicker { margin-bottom: .4rem; }

/* Forms */
form.start { display: flex; flex-direction: column; gap: .4rem; }
label {
  font: var(--t-xs)/1.5 var(--sans);
  color: var(--muted); margin-top: 1rem;
}
input {
  font: inherit; padding: .55rem .7rem; color: var(--ink);
  background: transparent; border: 1px solid var(--rule); border-radius: 3px;
}
input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
button {
  font: var(--t-sm)/1 var(--sans);
  margin-top: 1.5rem; padding: .75rem 1.2rem; cursor: pointer;
  color: var(--paper); background: var(--ink);
  border: 1px solid transparent; border-radius: 3px;
}
button:hover { background: var(--accent); }

.error { color: #a3301a; border-left: 3px solid #a3301a; padding-left: .8rem; }
.warning { border-left: 3px solid var(--accent); padding-left: .8rem; font-size: var(--t-sm); color: var(--muted); }

/* Syllabus - seen once */
ol.syllabus { list-style: none; padding: 0; margin: 2rem 0; }
ol.syllabus li {
  display: grid; grid-template-columns: 2.2rem 1fr; gap: 0 .6rem;
  padding: .7rem 0; border-top: 1px solid var(--rule);
}
.day { font: var(--t-xs)/1.9 var(--sans); color: var(--muted); }
.entry-title { font-weight: 600; }
.premise { grid-column: 2; font-size: var(--t-sm); color: var(--muted); }

/* Archive */
.archive { margin-top: 4rem; border-top: 1px solid var(--rule); padding-top: 1rem; }
.archive ul { list-style: none; padding: 0; }
.archive li { padding: .4rem 0; display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }

/* A piece */
article p { margin: 0 0 1.3rem; }
article p + p { text-indent: 0; }
article em { font-style: italic; }

.pager {
  display: flex; justify-content: space-between;
  margin-top: 3rem; padding-top: 1rem; border-top: 1px solid var(--rule);
  font: var(--t-xs) var(--sans);
}

/* Approve or reject */
.verdict { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
.verdict form { display: inline; }
button.ghost { background: transparent; color: var(--muted); border: 1px solid var(--rule); }

button.ghost:hover { background: transparent; color: var(--accent); border-color: var(--accent); }

/* Three framings */
ul.framings { list-style: none; padding: 0; margin: 2rem 0 1rem; }
ul.framings li { margin: 0 0 .6rem; }
button.framing {
  display: block; width: 100%; margin: 0; padding: 1rem 1.1rem;
  text-align: left; font: inherit; cursor: pointer;
  color: var(--ink); background: transparent;
  border: 1px solid var(--rule); border-radius: 4px;
}
button.framing:hover { border-color: var(--accent); background: transparent; }
.framing-name { display: block; font-weight: 600; margin-bottom: .2rem; }
.framing-blurb { display: block; font-size: var(--t-sm); color: var(--muted); }
.again { margin-top: 1.5rem; }
.again button { margin-top: 0; }

/* Write your own framing */
form.own {
  display: flex; flex-direction: column; gap: .4rem;
  margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--rule);
}
form.own label { margin-top: 0; }
form.own button { align-self: flex-start; margin-top: .8rem; }

/* Continue reading */
.reading { margin-top: 3rem; padding-top: 1.2rem; border-top: 1px solid var(--rule); }
.reading h2 { margin: 0 0 .8rem; }
.reading ul { list-style: none; padding: 0; margin: 0; }
.reading li { margin: 0 0 1rem; }
.reading a, .unlinked { font-weight: 600; }
.unlinked { border-bottom: 1px dotted var(--rule); }
.source, .why { display: block; font-size: var(--t-sm); color: var(--muted); }


/* Top bar */
.topbar {
  display: flex; align-items: baseline; gap: 1rem;
  max-width: 36rem; margin: 0 auto; padding: 1.2rem 1rem 0;
  font: var(--t-xs) var(--sans);
}
.topbar .spacer { flex: 1; }
.topbar form { display: inline; }
.wordmark {
  margin: 0;
  font: 600 var(--t-xs)/1.5 var(--sans);
  letter-spacing: .02em;
  color: var(--ink);
  text-decoration: none;
}
.wordmark:hover { color: var(--accent); }
button.linky {
  margin: 0; padding: 0; background: none; border: 0;
  font: inherit; color: var(--accent); cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px;
}
button.linky:hover { background: none; }
main { padding-top: 2rem; }

/* Selects match the text inputs */
select {
  font: inherit; padding: .55rem .7rem; color: var(--ink);
  background: transparent; border: 1px solid var(--rule); border-radius: 3px;
}
select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Your reading */
ul.enrolled { list-style: none; padding: 0; margin: 2rem 0; }
ul.enrolled li {
  padding: .9rem 0; border-top: 1px solid var(--rule);
  display: flex; flex-wrap: wrap; gap: .3rem 1rem; align-items: baseline;
}
ul.enrolled .entry-title { flex-basis: 100%; }
ul.enrolled .meta { flex-basis: 100%; }
ul.enrolled a { font: var(--t-xs) var(--sans); }

/* A course's own page */
.opening { margin: 2rem 0; }
.opening h2 { margin-bottom: .6rem; }
.opening ol { margin: 0 0 .8rem; padding-left: 1.2rem; }
.opening li { margin-bottom: .25rem; }
a.btn {
  display: inline-block; padding: .75rem 1.2rem; border-radius: 3px;
  font: var(--t-sm)/1 var(--sans); text-decoration: none;
  color: var(--paper); background: var(--ink);
  border: 1px solid transparent;
}
a.btn:hover { background: var(--accent); }
/* A row of buttons is spaced by the row, not by each button: the margin every
   button carries elsewhere would push some of them down and not others. */
.verdict { margin: 2rem 0 1rem; }
.verdict button { margin-top: 0; }

ol.days { list-style: none; padding: 0; margin: .8rem 0 0; }
ol.days li {
  display: grid; grid-template-columns: 2.2rem 1fr; gap: .6rem;
  padding: .5rem 0; border-top: 1px solid var(--rule);
}

label.check {
  display: flex; align-items: center; gap: .5rem;
  font-size: var(--t-sm); font-family: inherit; color: var(--ink); margin-top: 1.2rem;
}
label.check input { width: auto; margin: 0; }
.note.tight { margin-top: .2rem; }

/* Detail a first-time visitor doesn't need before they've seen anything */
details.more { margin-top: 1.6rem; }
details.more summary {
  font: var(--t-xs) var(--sans); color: var(--muted);
  cursor: pointer; list-style-position: outside;
}
details.more summary:hover { color: var(--accent); }
details.more label.check { margin-top: .8rem; }
details.more .note { margin-top: .3rem; }

/* The two boxes you say what you want in. Everything else on these forms is a
   setting; these are the sentence, so give them the room to be one. */
input.topic {
  font-size: var(--t-lg);
  line-height: 1.4;
  padding: .7rem .8rem;
}

/* Waiting on a model */
#working { padding: 3rem 0; }
.working-title { margin-bottom: .6rem; }
.working-detail { margin-bottom: 1.6rem; }
.elapsed {
  font: var(--t-xs) var(--sans);
  color: var(--muted);
  margin: 0 0 1.6rem;
  padding-left: 1.6rem;
  position: relative;
}
/* A mark that keeps moving, so a long wait doesn't look like a dead page.
   It says "still going", not "this far through" - there is no progress to
   report, and inventing a bar that creeps to 90% would be a lie. */
.elapsed::before {
  content: "";
  position: absolute; left: 0; top: .35em;
  width: .6rem; height: .6rem; border-radius: 50%;
  background: var(--accent);
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: .25; transform: scale(.8); }
  50%      { opacity: 1;   transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .elapsed::before { animation: none; opacity: .7; }
}
button[disabled] { opacity: .5; cursor: default; }
button[disabled]:hover { background: var(--ink); }

/* Who can find a course - only its maker sees this */
.visibility {
  margin-top: 3rem; padding-top: 1.2rem; border-top: 1px solid var(--rule);
}
.visibility p:first-child { margin: 0 0 .8rem; }
.visibility button { margin-top: 0; }
.visibility .note { margin-top: .8rem; }