/* The console's one visual system — colour, spacing, type scale, radius.
   Loaded after application.css by `stylesheet_link_tag :app`, so the few rules
   already there are extended rather than replaced. Light theme only. */
:root {
  --console-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --console-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  /* A warm neutral: the screen is read for hours, so the page is paper and
     never pure white, and the ink is never pure black. */
  --console-page: #fbfaf8;
  --console-surface: #ffffff;
  --console-sunken: #f4f2ee;
  --console-hover: #f7f5f1;
  --console-ink: #1b1a18;
  --console-ink-2: #4a4740;
  --console-ink-3: #6d6a64;
  --console-ink-4: #8b8579;
  --console-rule: #eeebe5;
  --console-rule-2: #e4e1db;
  --console-rule-3: #cfcbc3;

  --console-link: #2f5d8a;
  --console-link-hover: #1f4468;

  /* ADR-0014's two groups that owe work, and nothing else. A correct outcome
     gets no colour at all — see console-3-tables.css. */
  --console-person-bg: #fbeee9;
  --console-person-edge: #b4472a;
  --console-person-ink: #8a3a22;
  --console-batch-bg: #fdf8ea;
  --console-batch-edge: #cfa33f;
  --console-batch-ink: #75570f;

  /* Standing, which is a state and not a severity. */
  --console-good-bg: #eaf1ea;
  --console-good-rule: #c9dbc9;
  --console-good-ink: #375a37;

  /* A JSON document's syntactic parts — #112. Quiet, and each readable on
     --console-hover at the size code blocks use. A Variable and a Credential
     reference get a tint as well as an ink, because they are the two parts
     that are not what leaves. */
  --console-json-key: #2a5680;
  --console-json-string: #3a6630;
  --console-json-number: #9a4a14;
  --console-json-literal: #8a3a6b;
  --console-json-punctuation: #6d6a64;
  --console-json-variable-ink: #1d4f7c;
  --console-json-variable-bg: #e2ebf4;
  --console-json-credential-ink: #6e520c;
  --console-json-credential-bg: #f6ebc9;
  --console-json-unaddressable: #b4472a;

  --console-space-1: 4px;
  --console-space-2: 8px;
  --console-space-3: 12px;
  --console-space-4: 16px;
  --console-space-5: 24px;
  --console-space-6: 40px;

  --console-radius: 6px;
  --console-radius-sm: 4px;
  --console-radius-pill: 999px;

  --console-text: 14px;
  --console-text-sm: 13px;
  --console-text-xs: 12px;
  --console-label: 11px;

  /* The chrome's own measures — console-2-chrome.css. Docked, the sidebar is
     wide enough for the longest link and for an Account's name in the
     switcher's select; as a drawer it may be wider, because it covers the
     screen anyway, but never the whole phone, so the backdrop still says how
     to leave. */
  --console-sidebar-width: 232px;
  --console-drawer-width: min(288px, 86vw);
  --console-topbar-height: 48px;
}

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--console-page);
  color: var(--console-ink);
  font-family: var(--console-sans);
  font-size: var(--console-text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

h1 { font-size: 21px; line-height: 1.25; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 14px; }

/* A section heading is a label, not a headline: this screen's subject is its h1. */
h2 {
  font-size: var(--console-text-xs);
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--console-ink-3);
  margin: 26px 0 10px;
}

p { margin: 0 0 10px; }

a { color: var(--console-link); text-decoration: none; border-bottom: 1px solid rgba(47, 93, 138, 0.3); }
a:hover { color: var(--console-link-hover); border-bottom-color: var(--console-link-hover); }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--console-link);
  outline-offset: 2px;
  border-radius: 2px;
}

/* A quiet chip, never a highlight. Command blocks override this in
   console-5-screens.css. */
code {
  font-family: var(--console-mono);
  font-size: var(--console-text-xs);
  background: #f2f0ea;
  border: 1px solid var(--console-rule-2);
  border-radius: 3px;
  padding: 1px 5px;
  font-variant-numeric: tabular-nums;
}

pre {
  font-family: var(--console-mono);
  font-size: var(--console-text-xs);
  margin: 0;
  padding: 10px 12px;
  background: var(--console-hover);
  border: 1px solid var(--console-rule-2);
  border-radius: var(--console-radius-sm);
  overflow-x: auto;
}

address { font-style: normal; }

/* Measured against the content column beside the sidebar, not the viewport:
   `min-width: 0` lets a wide table scroll inside its wrapper instead of
   widening the page. The cap keeps a line readable on a very wide monitor. */
main { display: block; box-sizing: border-box; min-width: 0; max-width: 1560px; padding: 26px var(--console-space-5) 72px; }

input, select, textarea, button { font-family: inherit; font-size: var(--console-text-sm); }

input, select, textarea {
  padding: 6px 9px;
  border: 1px solid var(--console-rule-3);
  border-radius: 5px;
  background: var(--console-surface);
  color: var(--console-ink);
}
input[type="checkbox"] { padding: 0; accent-color: var(--console-link); }
textarea { font-family: var(--console-mono); font-size: var(--console-text-xs); }

input[type="submit"], button {
  padding: 6px 13px;
  border: 1px solid var(--console-rule-3);
  border-radius: 5px;
  background: var(--console-sunken);
  color: var(--console-ink);
  cursor: pointer;
}
input[type="submit"]:hover, button:hover { background: #e9e6e0; }

@media (max-width: 1023px) {
  main { padding-left: var(--console-space-4); padding-right: var(--console-space-4); }
}

@media (max-width: 759px) {
  main { padding: 18px var(--console-space-3) 56px; }
}