/* Gruvbox dark, layered on top of classless.css.
 *
 * classless names its palette by lightness, which reads backwards on a dark theme:
 * --clight is not "a light colour", it is "the surface just off the page background",
 * and --cdark is not "a dark colour", it is "muted secondary text". Mapping them
 * literally is what made captions and <time> render near-invisibly, and put pale text
 * on a cream background inside every input and open <details>.
 *
 * So each variable below is mapped by the job classless gives it, not by its name.
 */
:root {
  width: 100%;
}

:root {
  --font-p: 1em/1.7 monospace;
  --font-h: .9em/1.5 monospace;
  --font-c: .9em/1.4 monospace;
  --width: 70rem;

  /* Page background and body text. */
  --cbg: #282828;  /* bg0 */
  --cfg: #ebdbb2;  /* fg  */

  /* Surfaces set off from the background: nav, inputs, code, open details, table
     row hover. Darker rather than lighter, so it reads as an inset well and every
     foreground colour gains contrast against it rather than losing it — summary
     text on bg1 only reaches 4.3:1, which is under the 4.5:1 threshold. */
  --clight: #1d2021;  /* bg0_h */

  /* Borders, rules and underlines. */
  --cmed: #7c6f64;  /* bg4 */

  /* Muted secondary text: captions, <time>, .text-secondary, disabled buttons.
     Readable against --cbg, but quieter than --cfg. */
  --cdark: #a89984;  /* fg4 */

  --clink: #83a598;  /* blue   */
  --cemph: #fe8019;  /* orange */
  /* Backdrop for .hint callouts. classless only ever uses this behind --cemph. */
  --cemphbg: #fe80192a;

  --c-primary: #b16286;
}

/* Property names are shown beside their field labels, and read better as accents
   than as boxed code. */
code {
  background: none;
  color: var(--cemph);
}

/* The raw q=config and q=properties dumps are wide and deeply nested. body sets
   overflow-x: hidden, so without this they are silently clipped rather than
   scrollable — and reading them is the point of those sections. */
pre {
  overflow-x: auto;
  background: var(--clight);
  border-radius: 4px;
  padding: .6rem .8rem;
}

/* The editor's multiline fields. This lives here rather than in a style attribute
   on the textarea so that the Content-Security-Policy need not allow inline
   styles, which is most of what makes the policy worth setting. */
textarea {
  width: 100%;
  min-height: 8rem;
}

/* One field of the editor: label above its inputs, rather than the half-width
   columns this form used to use. URLs and timestamps are long, and a stacked
   layout gives them the full width on every screen size instead of only below
   classless's 40rem breakpoint. */
.field {
  margin: 0 0 1.4rem;
}

.field > label {
  display: block;
  margin: 0 0 .2rem;
  font: var(--font-h);
}

/* The Micropub property name, shown so it is clear what is actually being sent. */
.field .property {
  color: var(--cdark);
}

/* Marks a property the server lists as required. It is advisory only — nothing
   here blocks submission — so it is styled as a note rather than an alarm. */
.field abbr {
  color: var(--cemph);
  text-decoration: none;
  cursor: help;
}

/* Radio groups read as one control, not as a stack of full-width blocks. */
.field .options {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem 1.2rem;
  align-items: center;
}

.field .options label {
  margin-right: .6rem;
}

.field .options input {
  margin-right: .3rem;
}

/* Buttons that add to or fill in a field sit with it, not on their own line. */
.field button {
  margin: .3rem .5rem .3rem 0;
}

/* The table of post types needs no width of its own — classless already lays it
   out — but the two identifier columns should not compete with the name. */
.post-types td:not(:first-child) {
  white-space: nowrap;
  width: 1%;
}

/* Keeps the submit control clear of the last field. */
.actions {
  margin: 2rem 0 0;
}

/* The publish action is the one button on the form that matters — filled with
   the accent colour, rather than outlined like every other button, so it reads
   as the thing to press rather than one option among several. Text is --cbg,
   not --cfg: at this saturation --c-primary only clears the 3:1 large-text
   contrast ratio, not 4.5:1, so the label is sized up to qualify as large text. */
.actions button {
  background: var(--c-primary);
  border-color: var(--c-primary);
  color: var(--cbg);
  font-size: 120%;
  padding: .6em 1.6em;
}

.actions button:hover {
  filter: brightness(110%);
  color: var(--cbg);
}

/* Session controls sit at the far end of the navigation, away from the links.
   classless lays the items out inline; this only changes where the last one goes. */
nav ul:first-child {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

nav ul:first-child > li.session {
  margin-left: auto;
}

/* A form is block-level by default, which would break the row. */
nav form {
  display: inline;
}

nav button {
  margin: 0;
}

/* classless makes every text input display:block and full width, which is right
   for the editor — URLs and post content are long — but leaves the sign-in field
   stretched across the whole page for what is usually a short domain name. */
.sign-in input[type="url"] {
  display: inline-block;
  width: min(24rem, 100%);
  margin-right: .3rem;
}