/* The Rapidea console's styles: plain CSS, no inline styles anywhere (the
   Content-Security-Policy allows none). The console's shell links the site's
   base.css first, for the brand's faces, palette, element defaults, mark,
   button and focus ring, and then this sheet; both are held to the console's
   sheet rules (decision 2816). Every color here is a base.css token by name,
   but the notice's, which its rule writes out (below). The hand-drawn look is
   quiet here (decision 2820): stamps for an app's state, the mark's moods,
   ink rules; no drawing and no filter on a working screen. */

/* The console's type, on its own root rather than on body, so html and body
   keep only the brand's defaults. */
#console {
  font-size: 17px;
  line-height: 1.5;
}

/* A path, a token or a one-time password in the mono, broken anywhere a
   phone needs rather than run off it. */
code,
pre {
  font-family: var(--mono);
  font-size: 14px;
  overflow-wrap: anywhere;
}

h1 {
  font-size: 40px;
  line-height: 1.05;
  letter-spacing: -.012em;
  margin: 0 0 20px;
}

h3 {
  font-size: 24px;
  line-height: 1.15;
  margin: 28px 0 10px;
}

h4 {
  font-weight: 500;
  margin: 16px 0 6px;
}

details {
  margin: 12px 0;
}

summary {
  cursor: pointer;
  font-weight: 500;
}

textarea.yaml {
  font-family: var(--mono);
  font-size: 14px;
}

.muted {
  color: var(--walnut);
}

.center {
  text-align: center;
  margin: 12px 0;
}

/* ── Layout ─────────────────────────────────────────────────────────────── */

/* The preview notice (decision 2813): the shell's own paragraph, above every
   screen, one line at a desktop's width and two at a phone's: the brand's
   strip, paper on a band of ink with a kiln rule under it. This one rule,
   under no condition, declares everything that draws it and nothing else,
   each at the value the notice test's table holds (SHELL_NOTICE in the
   site's tests/notice/drawn.rs): the palette's colors written out with no
   var(), which a script could make resolve to transparent; its size, line
   height and spacing in px; and the console's one layer, so nothing it
   inherits can blank it and nothing in #console paints over it (decisions
   2814 and 2816). Its selector names it as the body's child, so no element
   inside #console takes its layer. */
body > .notice {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 12px 20px;
  border-bottom: 3px solid #b13c1f;
  color: #f5eee2;
  background: #2b2118;
  font-size: 16px;
  line-height: 1.4;
  text-align: center;
  text-wrap: pretty;
  box-sizing: border-box;
}

/* The top bar: the wordmark at the left, the owner, Account and Sign out at
   the right, on the page's measure; at a phone's width the owner's line
   wraps under the name, the address broken anywhere it must be. */
.topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  max-width: calc(var(--measure) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 20px var(--gutter);
}

.topbar .brand {
  font-size: 25px;
}

.topbar nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
  font-size: 16px;
}

.topbar .muted {
  font-family: var(--mono);
  font-size: 14px;
  overflow-wrap: anywhere;
}

.topbar nav a {
  font-weight: 500;
}

.screen {
  max-width: calc(var(--measure) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 24px var(--gutter) 96px;
}

.screen-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 24px;
  padding-bottom: 20px;
  margin-bottom: 28px;
  border-bottom: 2px solid var(--ink);
}

.screen-head h1 {
  font-size: 52px;
  line-height: 1;
  letter-spacing: -.015em;
  margin: 0 0 8px;
  overflow-wrap: anywhere;
}

/* A card: card stock with an inked edge and the soft drop the brand's forms
   sit on. */
.card {
  background: var(--card);
  border: 2px solid var(--ink);
  border-radius: 8px;
  padding: 24px 28px;
  margin-bottom: 20px;
  box-shadow: 0 6px 0 var(--dust);
}

.card.narrow {
  max-width: 30rem;
  margin: 40px auto 24px;
  padding: 40px 40px 32px;
}

.card.narrow .button {
  width: 100%;
  margin-top: 8px;
}

/* An app's sections, a row of links that wraps on a phone: the current one
   in ink over a kiln rule, the others in walnut. */
.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 24px;
  border-bottom: 1px dashed var(--dust);
  margin-bottom: 28px;
}

.tabs a {
  padding: 6px 0;
  text-decoration: none;
  color: var(--walnut);
  font-weight: 500;
  border-bottom: 3px solid transparent;
}

.tabs a.current {
  color: var(--ink);
  border-bottom-color: var(--kiln);
}

/* A publication being followed: a kiln rule down its side, nothing drawn
   while it is empty. */
.follower {
  border-left: 3px solid var(--kiln);
  padding: 0 0 0 16px;
  margin: 20px 0;
}

/* ── Tables ─────────────────────────────────────────────────────────────── */

/* A ledger on card stock: an inked edge, a dashed rule between rows. */
table {
  width: 100%;
  border-collapse: collapse;
  background: var(--card);
  border: 2px solid var(--ink);
}

th,
td {
  text-align: left;
  padding: 14px 18px;
  border-bottom: 1px dashed var(--dust);
  vertical-align: middle;
}

th {
  font-weight: 500;
  font-size: 14px;
  color: var(--walnut);
  border-bottom: 2px solid var(--ink);
}

/* A cell's column name, which the module writes into every cell but a
   row's first: shown only where the rows stack and the heads' line is gone,
   so no value stands without what it measures. */
.column-name {
  display: none;
}

/* An app's name in the display face, the way into its screens, so it keeps
   the brand's kiln underline at rest (a phone has no hover), broken where a
   long name would run off a phone; its address in the mono, broken anywhere
   a phone needs. */
td:first-child a {
  font-family: var(--display);
  font-weight: 700;
  font-size: 22px;
  overflow-wrap: anywhere;
}

/* An address or a phase said in a sentence, broken only where it would run
   off a phone. */
strong {
  overflow-wrap: anywhere;
}

td a[rel],
.screen-head a[rel] {
  font-family: var(--mono);
  font-size: 15px;
  color: var(--walnut);
  overflow-wrap: anywhere;
}

.pager {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
}

/* ── Forms ──────────────────────────────────────────────────────────────── */

form label,
.field {
  display: block;
  margin-bottom: 18px;
}

form label span {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  font-size: 16px;
}

/* A field on an order form: card stock and an inked edge. */
input[type="email"],
input[type="password"],
input[type="text"],
input[type="month"],
textarea {
  box-sizing: border-box;
  width: 100%;
  padding: 12px 14px;
  border: 2px solid var(--ink);
  border-radius: 10px;
  background: var(--card);
  color: var(--ink);
  font-family: var(--text);
  font-size: 17px;
}

textarea.yaml {
  min-height: 24rem;
  resize: vertical;
}

/* The plain button: card stock, an inked edge and its drop. The kiln
   stitched one is base.css's .button; a danger button is card stock with a
   kiln word and edge. */
button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px 9px;
  border: 2px solid var(--ink);
  border-radius: 10px;
  background: var(--card);
  color: var(--ink);
  font-family: var(--text);
  font-weight: 500;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 3px 0 var(--ink);
}

button.danger {
  color: var(--kiln);
  border-color: var(--kiln);
  box-shadow: 0 3px 0 var(--kiln);
}

/* A button at work: kraft and walnut, no drop and no press. */
button:disabled {
  background: var(--kraft);
  color: var(--walnut);
  border-color: var(--dust);
  box-shadow: none;
  cursor: default;
}

.button:disabled {
  transform: none;
  box-shadow: none;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
  margin: 0.75rem 0;
}

.consent {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  margin: 0.75rem 0;
}

/* ── Banners, findings and toasts ───────────────────────────────────────── */

.banner {
  border: 2px solid var(--ink);
  border-left-width: 6px;
  border-radius: 8px;
  padding: 12px 16px;
  margin: 12px 0;
  background: var(--card);
}

.banner p {
  margin: 0.2rem 0;
}

.banner.info {
  border-left-color: var(--ink);
}

.banner.warn {
  border-left-color: var(--mustard);
}

.banner.error {
  border-left-color: var(--kiln);
}

.findings {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0;
}

/* A check's findings: the path in the mono, the sentence, the fix in
   walnut, a dashed rule between. */
.findings li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 0;
  border-bottom: 1px dashed var(--dust);
}

pre.detail {
  white-space: pre-wrap;
  word-break: break-word;
  margin: 8px 0;
  padding: 12px 14px;
  background: var(--kraft);
  border-radius: 8px;
}

/* An app's state is a rubber stamp: its word in the display face, an edge
   and a thin inner rule in one ink, set at a lean. The mark's mood beside
   the word on Live, Inactive and Publishing is the stamp's ink too; a
   failure carries no character (condition 4), and the word always says the
   state. */
.status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 3px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.1;
  border: 2px solid currentColor;
  border-radius: 6px;
  box-shadow: inset 0 0 0 2px var(--card), inset 0 0 0 3px currentColor;
  transform: rotate(-3deg);
}

.status.live {
  color: var(--sage);
}

.status.inactive {
  color: var(--walnut);
  border-style: dashed;
  box-shadow: none;
  transform: rotate(2deg);
}

.status.publishing {
  color: var(--ink);
  background: var(--mustard);
  box-shadow: inset 0 0 0 2px var(--mustard), inset 0 0 0 3px currentColor;
}

.status.unavailable {
  color: var(--kiln);
}

.status.partly-unavailable {
  color: var(--kiln);
  border-style: dashed;
  box-shadow: none;
}

.status.live::before {
  content: "";
  flex: none;
  width: 18px;
  height: 21px;
  background: currentColor;
  -webkit-mask: url(marks/awake.svg) center / contain no-repeat;
  mask: url(marks/awake.svg) center / contain no-repeat;
}

.status.inactive::before {
  content: "";
  flex: none;
  width: 18px;
  height: 21px;
  background: currentColor;
  -webkit-mask: url(marks/asleep.svg) center / contain no-repeat;
  mask: url(marks/asleep.svg) center / contain no-repeat;
}

.status.publishing::before {
  content: "";
  flex: none;
  width: 18px;
  height: 21px;
  background: currentColor;
  -webkit-mask: url(marks/building.svg) center / contain no-repeat;
  mask: url(marks/building.svg) center / contain no-repeat;
}

/* Nothing yet: the one sentence, under the puzzled mark. */
.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 48px 0;
  text-align: center;
}

.empty::before {
  content: "";
  flex: none;
  width: 72px;
  height: 85px;
  background: var(--ink);
  -webkit-mask: url(marks/puzzled.svg) center / contain no-repeat;
  mask: url(marks/puzzled.svg) center / contain no-repeat;
}

/* What is shown once (the first admin's password): a card with a dashed
   kiln edge. */
.secret-box {
  border-style: dashed;
  border-color: var(--kiln);
}

.toasts {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.toast {
  background: var(--ink);
  color: var(--paper);
  padding: 12px 18px;
  border-radius: 8px;
}

/* A phone's width: the head's type steps down, the cards take less room,
   and a ledger's rows stack: each row's cells follow one under another, every
   value under its column's name and the heads' line gone, so no table runs
   past the screen and no number stands without what it measures. */
@media (max-width: 40rem) {
  .screen-head h1 {
    font-size: 36px;
  }

  .card.narrow {
    padding: 28px 22px 24px;
  }

  table,
  tbody,
  tr,
  th,
  td {
    display: block;
  }

  thead {
    display: none;
  }

  .column-name {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--walnut);
  }

  tbody tr {
    padding: 12px 14px;
    border-bottom: 1px dashed var(--dust);
  }

  th,
  td {
    padding: 3px 0;
    border-bottom: 0;
  }
}