/* The console's components, drawn on the site's design.

   The palette, the type and the head are the site's: metaphi-labs/site public/metaphi/system.css, which the app
   host serves and every console page links before this file (accounts/base/pages.py `COMPANY_STYLE`). Nothing here
   names a colour or a face of its own but one: the console's state colour for a balance below zero, a muted brick in
   the warm palette. Everything else is the site's tokens: paper and ink, the bronze greys, the gold that marks what
   is current or chosen, sheets lifted by --lift with no drawn edge, the rule between rows. Newsreader for titles and
   the balance, Geist for the interface, JetBrains Mono for keys and codes. Every rule is under .app, the console's
   frame, so the site's own rules for its door and its account pages never reach in. Served by accounts at
   /console.css (accounts/console.py `stylesheet`). */
.app { --neg: #9a3f2c; font-size: 0.95rem; }
:root[data-theme="dark"] .app { --neg: #d9957f; }

.app [hidden] { display: none !important; }
.app main { width: 100%; max-width: 46rem; margin-inline: auto; padding: clamp(2rem, 6vh, 3.5rem) 0 clamp(4rem, 12vh, 7rem); }
/* the column is the site's console column (and the benchmark pages' reading width); a wide table takes the frame's */
.app.wide main { max-width: 62rem; }
.app p { margin: 0; }
.app h1, .app h2, .app h3 { margin: 0; }
.app code { font-family: var(--mono); font-size: 0.82rem; color: var(--ink-2); }
.app .muted { color: var(--ink-2); }
.app .faint { color: var(--ink-3); }
.app .link { color: var(--gold); white-space: nowrap; border-bottom: 1px solid transparent; }
.app .link:hover { border-bottom-color: currentColor; }

/* the head: the site's, with the console's pages; the page that is open is marked in the gold */
.app .site-head { position: relative; z-index: 10; }
.app .site-nav a[aria-current="page"] { color: var(--gold); border-bottom-color: var(--gold); }
.app .site-nav a.out::after { content: "\00a0\2197"; color: var(--ink-3); }
.app .site-tools { gap: 0.75rem; }
/* the tools keep the last column while the pages wait for a sign-in */
.app .site-head .site-tools { grid-column: -2 / -1; grid-row: 1; }
.app .theme { margin-right: 0; }

/* the account: initials at the right of the head, a sheet under it */
.acct { position: relative; }
.avatar {
  appearance: none; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0;
  border-radius: 50%; background: var(--sheet); box-shadow: var(--lift); color: var(--ink);
  font: 500 0.78rem/1 var(--sans); letter-spacing: 0.02em; cursor: pointer;
}
.avatar:hover { box-shadow: var(--lift-up); }
.pop {
  position: absolute; right: 0; top: calc(100% + 0.6rem); z-index: 30; width: 17rem; padding: 0.25rem 1.25rem;
  border-radius: 4px; background: var(--sheet); box-shadow: var(--lift-up); text-align: left;
}
.pop .who { padding: 0.95rem 0; display: grid; gap: 0.15rem; }
.pop .who .email { color: var(--ink); font-weight: 500; overflow-wrap: anywhere; }
.pop .who .org { color: var(--ink-2); font-size: 0.85rem; overflow-wrap: anywhere; }
.app .pop .item {
  appearance: none; display: flex; align-items: center; width: 100%; min-height: 44px; padding: 0; margin: 0;
  border: 0; border-top: 1px solid var(--rule); background: none; color: var(--ink-2); font: inherit; text-align: left; cursor: pointer;
}
.app .pop .item:hover { color: var(--ink); }

/* the page's head: its title in the serif at the benchmark pages' scale; the organization's role beside it */
.app .head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.6rem 1rem; margin: 0 0 1.75rem; }
.app .head h1 {
  font-family: var(--serif); font-size: clamp(2rem, 4vw, 2.6rem); font-weight: 300; line-height: 1.1;
  letter-spacing: -0.02em; overflow-wrap: anywhere; text-wrap: balance;
}
.app .head .role { color: var(--ink-2); }
.app .head .sub { flex-basis: 100%; color: var(--ink-2); }
.app .head .end { margin-left: auto; align-self: center; }

/* sheets on the paper: lifted, no drawn edge; a title in the serif, a body, a table, a foot under a rule */
.app .stack { display: grid; row-gap: 1.5rem; }
.app .card { min-width: 0; border-radius: 4px; background: var(--sheet); box-shadow: var(--lift); scroll-margin-top: 1.5rem; }
.app .card > .top { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 1.35rem 1.75rem 0.9rem; }
.app .card > .top h2 { font-family: var(--serif); font-size: 1.3rem; font-weight: 400; line-height: 1.25; letter-spacing: -0.01em; }
.app .card > .body { display: grid; gap: 0.9rem; padding: 0 1.75rem 1.5rem; margin: 0; font-size: inherit; color: var(--ink); }
.app .card > .body:first-child { padding-top: 1.5rem; }
.app .card > .foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem;
  padding: 0.9rem 1.75rem; border-top: 1px solid var(--rule); color: var(--ink-2);
}
.count { margin-left: 0.5rem; font-family: var(--sans); font-size: 0.85rem; font-weight: 400; color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* the balance: the number in the serif, tabular, as a board's figures; below zero in the warm red */
.app .money {
  font-family: var(--serif); font-size: clamp(2.5rem, 5vw, 3.1rem); font-weight: 300; line-height: 1.05;
  letter-spacing: -0.02em; color: var(--ink); font-variant-numeric: tabular-nums lining-nums;
}
.app .money.neg { color: var(--neg); }
.balance { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 1.5rem; }
.balance .what { display: grid; gap: 0.45rem; }

/* controls: square, in the sans; the one that goes is ink on paper, as the site's */
.app .btn {
  appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  min-height: 40px; padding: 0 1.1rem; border: 1px solid var(--rule); border-radius: 2px; background: none;
  color: var(--ink); font: 500 0.9rem/1 var(--sans); letter-spacing: 0; text-transform: none; white-space: nowrap; cursor: pointer;
}
.app .btn:hover { border-color: var(--ink); opacity: 1; }
.app .btn.go { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.app .btn.go:hover { opacity: 0.85; }
.app .btn.bare { padding: 0 0.6rem; border-color: transparent; color: var(--ink-2); }
.app .btn.bare:hover { color: var(--ink); }
.app .btn.danger:hover { color: var(--neg); }
.app .btn:disabled { opacity: 0.4; cursor: default; }
.app input, .app select { min-height: 40px; font-size: 0.95rem; }
.app input:focus, .app select:focus { border-color: var(--ink); }
.app input[type="checkbox"] { min-height: 0; accent-color: var(--gold); }
.app select {
  padding-right: 2rem; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%), linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
  background-position: calc(100% - 15px) 50%, calc(100% - 10px) 50%; background-size: 5px 5px; background-repeat: no-repeat;
}
.app select option { background: var(--sheet); color: var(--ink); }
.amount { position: relative; display: inline-flex; }
.amount::before { content: "$"; position: absolute; left: 0.8rem; top: 50%; transform: translateY(-50%); color: var(--ink-3); }
.amount input { width: 7.5rem; padding-left: 1.6rem; }
.inline { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.inline label { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 40px; color: var(--ink-2); font-size: 0.9rem; }
.app .card .inline input[type="text"], .app .card .inline input[type="email"] { flex: 1 1 15rem; max-width: 22rem; }

/* tables: the sans, a hairline under each row, keys in the mono */
.table { width: 100%; border-collapse: collapse; }
.app .table th {
  padding: 0.6rem 1.25rem; border-bottom: 1px solid var(--rule); text-align: left; white-space: nowrap;
  font-family: var(--sans); font-size: 0.8rem; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ink-3);
}
.app .table td {
  padding: 0.85rem 1.25rem; border-bottom: 1px solid var(--rule); vertical-align: middle;
  font-family: var(--sans); font-size: 0.92rem; color: var(--ink);
}
.app .table th:first-child, .app .table td:first-child { padding-left: 1.75rem; }
.app .table th:last-child, .app .table td:last-child { padding-right: 1.75rem; }
.app .table tr:last-child td { border-bottom: 0; }
.app .table td.end, .app .table th.end { text-align: right; }
.app .table tr.off td, .app .table tr.off .name { color: var(--ink-3); }
.app .table .name { font-weight: 500; overflow-wrap: anywhere; }
.app .table .by { margin-top: 0.15rem; color: var(--ink-3); font-size: 0.8rem; overflow-wrap: anywhere; }
.app .num, .app .table td { font-variant-numeric: tabular-nums; }
.app .table td.num { color: var(--ink-2); }
.app .tag {
  display: inline-block; margin-left: 0.5rem; padding: 0.1rem 0.5rem; border: 0; border-radius: 999px; background: var(--track);
  font-family: var(--mono); font-size: 0.7rem; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ink-2); vertical-align: 0.1em;
}
.app .empty { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0 1.75rem 1.5rem; color: var(--ink-2); }
.app .card > .empty:first-child { padding-top: 1.5rem; }
/* a key, said once: a sheet with the gold rule at its edge, as the benchmark pages set an excerpt */
.app .once {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin: 0; padding: 1rem 1.25rem;
  border: 0; border-left: 2px solid var(--gold); border-radius: 0 4px 4px 0; background: var(--sheet); box-shadow: var(--lift);
  font-family: var(--sans); font-size: inherit; user-select: auto;
}
.app .once .wide { flex-basis: 100%; color: var(--ink); }
.app .once code { flex: 1 1 15rem; font-size: 0.85rem; color: var(--ink); overflow-wrap: anywhere; user-select: all; }

/* what is said: a refusal under the page or beside its field, a status in a sheet */
.app .said { min-height: 1.25rem; margin: 1rem 0 0; padding: 0; font-family: var(--sans); font-size: 0.9rem; color: var(--neg); }
.app .card .said { margin: 0; }
.app .said:empty { display: none; }
.status { padding: 0.7rem 1rem; border-left: 2px solid var(--gold); background: var(--gold-soft); color: var(--ink); }
.banner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem;
  padding: 1rem 1.5rem; border-radius: 4px; background: var(--sheet); box-shadow: var(--lift);
}

/* signed out, or a terminal's link: one sheet at the centre, the title in the serif, the site's way in */
.app .card.door { display: grid; gap: 0.9rem; max-width: 28rem; margin: clamp(2rem, 8vh, 5rem) auto 0; padding: 2rem 2rem 1.5rem; text-align: center; }
.app .card.door h1 { font-family: var(--serif); font-size: 2rem; font-weight: 300; line-height: 1.15; letter-spacing: -0.02em; text-wrap: balance; }
.app .card.door .ways { display: grid; margin-top: 0.5rem; border-top: 1px solid var(--rule); }
.app .card.door .ways .btn { justify-self: center; margin-top: 1.25rem; }
.app .card.door .way { text-align: left; }
/* the site hangs the banners' streaks behind its door; the console has none */
.app .card.door::before { content: none; }

@media (max-width: 720px) {
  /* the console's pages stay under the head on a phone, every one in view: five words, no menu to open */
  .app .site-head .site-nav {
    flex-direction: row; flex-wrap: wrap; justify-content: flex-start; gap: 0 1rem; padding: 0.25rem 0 0;
    font-family: var(--sans); font-size: 0.88rem; letter-spacing: 0; text-transform: none;
  }
  .app .site-head .site-nav a { flex: none; min-height: 40px; border-bottom: 1px solid transparent; }
  .app .site-head .site-nav a[aria-current="page"] { color: var(--gold); border-bottom-color: var(--gold); }
  .app main { padding-top: 1.5rem; }
  .app .card > .top, .app .card > .foot { padding-inline: 1.25rem; }
  .app .card > .body, .app .empty { padding-inline: 1.25rem; }
  .app .money { font-size: 2.5rem; }
  .balance .inline, .balance .amount, .balance .amount input { width: 100%; }
  .balance .inline .btn { flex: 1; }
  .app .table thead { display: none; }
  .app .table, .app .table tbody, .app .table tr, .app .table td { display: block; }
  .app .table tr { padding: 0.85rem 1.25rem; border-bottom: 1px solid var(--rule); }
  .app .table tr:last-child { border-bottom: 0; }
  .app .table td, .app .table td:first-child, .app .table td:last-child { padding: 0.15rem 0; border: 0; }
  .app .table td.end { padding-top: 0.5rem; text-align: left; }
  .app .table td.end .btn.bare { margin-left: -0.6rem; }
  .app .table td[data-k]::before { content: attr(data-k) "\00a0"; color: var(--ink-3); }
  .app .card.door { padding: 1.5rem 1.25rem 1.25rem; }
}