/* The curator's screen and the control panel.

   Its own stylesheet rather than a section of quran.css, because none of it is
   the reading surface and none of the reading surface wants it. It is loaded
   only by the templates under templates/admin/, which are the only pages that
   carry body.admin.

   Deliberately plain. This is a working screen for one person, so it wants
   density and legibility and nothing else: a table that can be scanned to find
   one row out of seven hundred, and controls large enough to hit. The tokens
   are base.css's, so it follows the light and dark schemes without asking which
   one is running. */

/* ---------------------------------------------------------------------------
   Controls

   These pages used to reach for .qs-btn, which is defined in quran.css -- a
   stylesheet no admin page loads. Every button on the curator's screen was
   therefore an unstyled browser default, silently, for as long as the screen
   has existed. Defined here instead of moving .qs-btn down into base.css,
   because the admin surface is allowed its own control vocabulary and the
   reading surface should not have to think about this one.
   --------------------------------------------------------------------------- */

.admin-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: 44px;
  padding-inline: var(--space-4);
  border: var(--hair) solid var(--accent);
  border-radius: var(--radius-control);
  background: var(--paper-raised);
  color: var(--accent-strong);
  font-family: var(--font-sans);
  font-size: var(--fs-body-sm);
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease-calm),
              color var(--dur) var(--ease-calm);
}

.admin-btn:hover,
.admin-btn:focus-visible {
  border-color: var(--accent-strong);
  color: var(--ink);
}

/* Quieter by dropping the accent edge, not by tinting the ground: accent means
   "you can press this", and a control that is still pressable keeps its
   colour in the text. */
.admin-btn--quiet {
  border-color: var(--rule);
  color: var(--ink-soft);
}

.admin-btn--quiet:hover,
.admin-btn--quiet:focus-visible {
  border-color: var(--rule-strong);
  color: var(--ink);
}

.admin__wrap {
  padding-block: var(--space-6) var(--space-8);
}

/* The heading, the count and the two controls on one line, with the count
   taking the slack so the buttons sit together at the end. */
.admin__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-block-end: var(--space-5);
}

.admin__head .section-heading { margin: 0; }

.admin__count {
  flex: 1 1 auto;
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  color: var(--ink-faint);
}

.admin__head form { margin: 0; }

.admin__error {
  margin-block-end: var(--space-4);
  padding: var(--space-3);
  border: var(--hair) solid var(--accent);
  border-radius: var(--radius-control);
  background: var(--paper-raised);
  font-family: var(--font-sans);
  font-size: var(--fs-body-sm);
  color: var(--ink);
}

/* The form is a single column: every field is short, and two columns would put
   the surah number and the verse number side by side, which is exactly the pair
   worth reading one after the other. */
.admin__form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  max-inline-size: 34rem;
}

.admin__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  inline-size: 100%;
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  color: var(--ink-soft);
}

.admin__field input,
.admin__field select {
  min-block-size: 44px;
  padding-inline: var(--space-3);
  border: var(--hair) solid var(--rule);
  border-radius: var(--radius-control);
  background: var(--paper-raised);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body-sm);
}

.admin__fixed {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  color: var(--ink-faint);
}

.admin__cancel {
  font-family: var(--font-sans);
  font-size: var(--fs-body-sm);
}

/* Seven hundred rows, so the table scrolls inside itself on a narrow screen
   rather than making the whole page scroll sideways. */
.admin__table {
  display: block;
  overflow-x: auto;
  inline-size: 100%;
  border-collapse: collapse;
  font-family: var(--font-sans);
  font-size: var(--fs-body-sm);
}

.admin__table th,
.admin__table td {
  padding: var(--space-2) var(--space-3);
  border-block-end: var(--hair) solid var(--rule);
  text-align: start;
  vertical-align: middle;
  white-space: nowrap;
}

.admin__table th {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* The title is the one column worth the width, so it takes what is left and
   the rest stay as narrow as their contents. */
.admin__table td:nth-child(3) {
  inline-size: 100%;
  white-space: normal;
}

.admin__table tbody tr:hover { background: var(--paper-raised); }

.admin__table form { margin: 0; }

.admin__note {
  margin-block-start: var(--space-5);
  max-inline-size: var(--measure);
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  color: var(--ink-faint);
}

.admin__note code {
  padding-inline: 0.3em;
  border-radius: var(--radius-control);
  background: var(--paper-sunk);
}

/* ---------------------------------------------------------------------------
   The control panel

   Two columns: a rail that chooses a section, and the section. The rail is the
   one place in this project licensed to sit on a recessed ground, and the
   licence is narrow: --paper-sunk marks a ROLE, a thing you operate rather than
   read, and says nothing about state. State is the solid accent fill on the
   chosen row, which is also the only filled accent on the page.
   --------------------------------------------------------------------------- */

.panel {
  display: grid;
  grid-template-columns: minmax(12rem, 15rem) minmax(0, 1fr);
  gap: var(--space-6);
  align-items: start;
  padding-block: var(--space-6) var(--space-8);
}

.panel__rail {
  position: sticky;
  inset-block-start: var(--space-4);
  padding: var(--space-3);
  border: var(--hair) solid var(--rule-soft);
  background: var(--paper-sunk);
}

.panel__railhead {
  margin: 0 0 var(--space-2);
  padding-inline: var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.panel__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.panel__link {
  display: flex;
  align-items: center;
  min-block-size: 44px;
  padding-inline: var(--space-2);
  border-radius: var(--radius-control);
  font-family: var(--font-sans);
  font-size: var(--fs-body-sm);
  color: var(--ink-soft);
  text-decoration: none;
}

/* The chosen row, and the trap that has already been paid for once: hover must
   be scoped away from it, or the pointer paints --paper text on a --paper
   ground and the row the reader is choosing disappears under their own cursor. */
.panel__link:not(.is-active):hover,
.panel__link:not(.is-active):focus-visible {
  background: var(--paper);
  color: var(--ink);
}

.panel__link.is-active {
  background: var(--accent-strong);
  color: var(--paper);
}

.panel__signout {
  margin: var(--space-3) 0 0;
  padding-block-start: var(--space-3);
  border-block-start: var(--hair) solid var(--rule-soft);
}

.panel__signout .admin-btn { inline-size: 100%; }

.panel__main { min-inline-size: 0; }

.panel__lede,
.panel__count,
.panel__more {
  margin-block: 0 var(--space-4);
  max-inline-size: var(--measure);
  font-family: var(--font-sans);
  font-size: var(--fs-body-sm);
  color: var(--ink-soft);
}

/* The site's own heading voice, not the label treatment. A section title set
   in uppercase accent letterspacing would be the fifth thing on the page
   wearing the one costume that is supposed to mean "control". */
.panel__h2 {
  margin-block: var(--space-6) var(--space-3);
  padding-block-end: var(--space-2);
  border-block-end: var(--hair) solid var(--rule-soft);
  font-family: var(--font-serif);
  font-size: var(--fs-h3);
  font-weight: 500;
  color: var(--ink);
}

/* Needs attention ---------------------------------------------------------- */

.attention,
.chiplist,
.flagset {
  margin: 0;
  padding: 0;
  list-style: none;
}

.attention__item {
  display: flex;
  gap: var(--space-3);
  align-items: baseline;
  padding-block: var(--space-3);
  border-block-end: var(--hair) solid var(--rule-soft);
  font-family: var(--font-sans);
  font-size: var(--fs-body-sm);
  color: var(--ink);
}

.attention__severity {
  flex: 0 0 auto;
  min-inline-size: 4.5rem;
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.attention__item--caution .attention__severity { color: var(--caution); }

.attention__text { max-inline-size: var(--measure); }

.attention__clear {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body-sm);
  color: var(--ink-soft);
}

/* What is switched on ------------------------------------------------------ */

.chiplist {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-block-end: var(--space-3);
}

.chiplist__item {
  padding: var(--space-1) var(--space-3);
  border: var(--hair) solid var(--rule);
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  color: var(--ink-soft);
}

/* At a glance -------------------------------------------------------------- */

.glance { margin: 0; }

.glance__pair {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding-block: var(--space-2);
  border-block-end: var(--hair) solid var(--rule-soft);
  font-family: var(--font-sans);
  font-size: var(--fs-body-sm);
}

.glance__pair dt {
  flex: 1 1 14rem;
  color: var(--ink-soft);
}

.glance__pair dd {
  margin: 0;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.glance__pair code {
  font-size: var(--fs-caption);
  overflow-wrap: anywhere;
}

/* The features list ----------------------------------------------------------

   A ladder of nested lists. The indent belongs to the list rather than to a
   class per depth, so it cannot drift out of step with the dependency it is
   drawing, and there is no leading rule or connector: this project does not
   put a stripe down the leading edge of anything. */

.flagset {
  margin: 0;
  padding: 0;
  list-style: none;
}

.flaggroup { margin-block-end: var(--space-6); }

/* The indent, kept for the one case worth drawing: a feature that lives inside
   another feature's panel. A section's own features are not indented under it
   -- nine of the seventeen hang off the study pages, and indenting all nine
   spent width on every row to say something true of nearly the whole page. */
.flagset--sub {
  margin-block-start: var(--space-3);
  padding-inline-start: var(--space-6);
}

/* The section's own switch. Set apart by a rule under it rather than by any
   colour: it decides everything listed below it, and that is a fact about
   order rather than a state worth painting. */
.flagrow--head {
  padding-block-start: 0;
  border-block-end-color: var(--rule);
}

.flagrow {
  padding-block: var(--space-4);
  border-block-end: var(--hair) solid var(--rule-soft);
}

/* A child closes its parent's row, so the parent must not draw a second rule
   under the last of them. */
.flagrow:last-child { border-block-end: 0; }
.flagset--sub { border-block-start: var(--hair) solid var(--rule-soft); }

/* The name and the switch on one line, the switch held to the end so every
   switch on the page lines up whatever its row is called. */
.flagrow__main {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
}

.flagrow__text { flex: 1 1 auto; min-inline-size: 0; }

.flagrow__label {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--ink);
}

.flagrow__key {
  margin-inline-start: var(--space-3);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: var(--fs-caption);
  font-weight: 400;
  color: var(--ink-faint);
}

.flagrow__blurb {
  margin: var(--space-1) 0 0;
  max-inline-size: var(--measure);
  font-size: var(--fs-body-sm);
  color: var(--ink-soft);
}

.flagrow__set { flex: 0 0 auto; margin: 0; }

/* The switch -----------------------------------------------------------------

   A submit button wearing a switch. No script: pressing it posts the opposite
   state and the page comes back showing what is now true, which is the same
   sequence every other control on this surface follows.

   Green is the state and not a decoration, and it is allowed here for the same
   reason the accent is allowed on any control: this is a thing you press. The
   track is a solid fill rather than a tint, and the grey it returns to is the
   same rule colour that draws every other line on the page. */

.switch {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-block-size: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  color: var(--ink-soft);
}

.switch__track {
  position: relative;
  display: block;
  flex: 0 0 auto;
  inline-size: 2.75rem;
  block-size: 1.5rem;
  border: var(--hair) solid var(--rule-strong);
  border-radius: var(--radius-pill);
  background: var(--rule);
  transition: background var(--dur) var(--ease-calm),
              border-color var(--dur) var(--ease-calm);
}

.switch__knob {
  position: absolute;
  inset-block-start: 2px;
  inset-inline-start: 2px;
  inline-size: 1.125rem;
  block-size: 1.125rem;
  border-radius: 50%;
  background: var(--paper);
  transition: transform var(--dur) var(--ease-calm);
}

.switch.is-on .switch__track {
  border-color: var(--accent-strong);
  background: var(--accent-strong);
}

.switch.is-on .switch__knob { transform: translateX(1.25rem); }

.switch.is-on .switch__state { color: var(--ink); }

.switch__state {
  min-inline-size: 1.8rem;
  text-align: start;
}

.switch:hover .switch__track { border-color: var(--accent); }

.switch:focus-visible {
  outline: var(--emph) solid var(--accent-strong);
  outline-offset: 3px;
  border-radius: var(--radius-control);
}

/* The three readings ---------------------------------------------------------

   Fixed columns, so Environment sits under Environment down the whole list
   rather than wherever the row above happened to end. */

.reading {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin: var(--space-2) 0 0;
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
}

.reading__pair {
  display: flex;
  gap: var(--space-2);
  align-items: baseline;
  min-inline-size: 10rem;
}

.reading dt { color: var(--ink-faint); }
.reading dd { margin: 0; color: var(--ink-soft); }

/* The one of the three that answers the question. Weight, not colour: green
   here would say "press me", and this is not pressable. */
.reading__now {
  font-weight: 600;
  color: var(--ink) !important;
}

.flagrow__caution,
.flagrow__ok {
  margin: var(--space-2) 0 0;
  max-inline-size: var(--measure);
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
}

.flagrow__caution { color: var(--caution); }
.flagrow__ok { color: var(--ink-faint); }

.flagrow__revert { margin: var(--space-2) 0 0; }

@media (max-width: 46rem) {
  .panel { grid-template-columns: minmax(0, 1fr); }

  .panel__rail { position: static; }

  /* The rail becomes a row of chooser rows rather than a column, which keeps
     every section one press away without a menu that has to be opened. */
  .panel__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
  }

  .panel__link { padding-inline: var(--space-3); }
}

/* A list of things, each with its own controls -------------------------------

   Used by the Content section for reciters, publishers and commentaries. One
   shape rather than three, because all three rows say the same kind of thing:
   what this is, what it is currently doing, and the control that changes it.
   Separated by hairlines and nothing else: no zebra, no tint, no card. */

.rowlist {
  margin: 0;
  padding: 0;
  list-style: none;
}

.rowlist__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-3);
  padding-block: var(--space-3);
  border-block-end: var(--hair) solid var(--rule-soft);
}

.rowlist__body {
  flex: 1 1 20rem;
  min-inline-size: 0;
}

.rowlist__name {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--ink);
}

/* Trailing its item, never leading it: a separator drawn before a wrapping
   element lands at the start of a wrapped line and becomes the leading-edge
   stripe this project does not draw. Here it is simply set apart by space. */
.rowlist__meta {
  margin-inline-start: var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  font-weight: 400;
  color: var(--ink-faint);
}

.rowlist__detail {
  margin: var(--space-1) 0 0;
  max-inline-size: var(--measure);
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  color: var(--ink-soft);
}

.rowlist__controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.rowlist__row form { margin: 0; }

/* Commands, tools and the ordered imports ------------------------------------

   A command is set to be copied, so it is left selectable and never wrapped in
   a control. The recessed ground here is doing the same job as the rail's: it
   marks a role -- this is a thing you take away and type -- rather than a
   state. */

.command {
  margin: var(--space-2) 0;
  padding: var(--space-2) var(--space-3);
  overflow-x: auto;
  border: var(--hair) solid var(--rule-soft);
  border-radius: var(--radius-control);
  background: var(--paper-sunk);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: var(--fs-caption);
  color: var(--ink);
}

.command code { font: inherit; }

.steplist,
.toollist {
  margin: 0;
  padding: 0;
  list-style: none;
}

.steplist__step,
.toollist__tool {
  padding-block: var(--space-4);
  border-block-end: var(--hair) solid var(--rule-soft);
}

.steplist__head,
.toollist__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-3);
}

.steplist__name,
.toollist__name {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--ink);
}

/* The number is the ordering, which is load-bearing: the corpus import has
   real foreign keys onto what the one before it creates. */
.steplist__order {
  margin-inline-end: var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

.steplist__status {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
}

.steplist__status--ok { color: var(--ink-faint); }
.steplist__status--missing { color: var(--caution); }

/* "Runs on your own computer": a fact about where the tool executes, not a
   state and not a warning. Set in the label voice and left at that. */
.toollist__badge {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.steplist__purpose,
.toollist__purpose {
  margin: var(--space-1) 0 0;
  max-inline-size: var(--measure);
  font-size: var(--fs-body-sm);
  color: var(--ink-soft);
}

.steplist__silent,
.steplist__note,
.toollist__note,
.toollist__where {
  margin: var(--space-1) 0 0;
  max-inline-size: var(--measure);
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  color: var(--ink-faint);
}

.steplist__silent { color: var(--caution); }

/* Whether a workbench is up ---------------------------------------------------

   Three states and one of them is a refusal: a port answering as something
   else gets no control at all, because nothing in this project stops a process
   it cannot identify. */

.toollist__status {
  margin-inline-end: var(--space-3);
  font-family: var(--font-sans);
  font-weight: 600;
}

.toollist__status--up { color: var(--ink); }
.toollist__status--down { color: var(--ink-faint); }
.toollist__status--foreign { color: var(--caution); }

.toollist__addr { color: var(--ink-faint); }

.toollist__controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-block-start: var(--space-2);
}

.toollist__controls form { margin: 0; }

/* A section that belongs under the one above it. Indent only: a connector line
   or a leading rule would be the leading-edge stripe this project does not
   draw, and the indent is enough to say "part of Content". */
.panel__link--sub {
  padding-inline-start: var(--space-5);
  font-size: var(--fs-caption);
}

/* A notice: something the reader needs before the list makes sense.

   A recessed ground rather than a tinted one, doing the same job as the rail's
   and the command's -- marking a role, here "read this first" -- and not a
   state. No coloured bar down its leading edge. */

.notice {
  margin-block: 0 var(--space-5);
  padding: var(--space-3) var(--space-4);
  border: var(--hair) solid var(--rule-soft);
  border-radius: var(--radius-control);
  background: var(--paper-sunk);
  max-inline-size: var(--measure);
}

.notice__lead {
  margin: 0 0 var(--space-1);
  font-family: var(--font-sans);
  font-size: var(--fs-body-sm);
  font-weight: 600;
  color: var(--ink);
}

.notice__body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  color: var(--ink-soft);
}

.notice__body code {
  padding-inline: 0.3em;
  border-radius: var(--radius-control);
  background: var(--paper);
  font-family: var(--font-mono, ui-monospace, monospace);
}

/* Trailing its address, never leading it. A qualifier set before a wrapping
   element lands at the start of a wrapped line, which is the leading-edge
   marker this project does not draw. */
.toollist__caveat {
  margin-inline-start: var(--space-2);
  color: var(--ink-faint);
}