/* The pages drawn as qoop's own terminal interface (plans/accounts/design, V2): the palette is
   mobile/src/ui/theme.ts, which is crates/qoop-tui/src/theme.rs as hex, dark and light. No web
   fonts: the page loads nothing from another origin. */
:root {
  --bg: #000000; --text: #ffffff; --detail: #8a8a8a; --faint: #626262; --rule: #3a3a3a;
  --raised: #303030; --status: #121212; --brand: #ff5f00; --blocked: #ff8700; --working: #00afff;
  --done: #00af5f; --failed: #ff00ff; --sleeping: #af87d7; --idle: #6c6c6c; --s0: #d787ff;
  --s4: #87d7ff;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  color-scheme: dark light;
}
@media (prefers-color-scheme: light) {
  :root {
    --bg: #ffffff; --text: #262626; --detail: #585858; --faint: #767676; --rule: #bcbcbc;
    --raised: #e4e4e4; --status: #eeeeee; --blocked: #af5f00; --working: #0087d7; --done: #008700;
    --failed: #d700d7; --sleeping: #875faf; --idle: #767676; --s0: #8700d7; --s4: #005f87;
  }
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; }
body { font-family: var(--mono); font-size: 13.5px; background: var(--bg); color: var(--text); }
a { color: inherit; }
svg { display: block; flex: none; }
[hidden] { display: none !important; }
button, input { font: inherit; color: inherit; }
.k-working { color: var(--working); } .k-blocked { color: var(--blocked); } .k-done { color: var(--done); }
.k-failed { color: var(--failed); } .k-sleeping { color: var(--sleeping); } .k-idle { color: var(--idle); }
.k-brand { color: var(--brand); } .k-detail { color: var(--detail); }
.s0 { color: var(--s0); } .s4 { color: var(--s4); }
.mk { width: 13px; height: 13px; fill: currentColor; }

/* The working mark's breath (sidebar.rs `breath`, 32 frames of 160 ms): the centre stays, each
   arm comes in and goes out on its own frames. */
.breath .a0 { animation: a0 5.12s step-end infinite; } .breath .a1 { animation: a1 5.12s step-end infinite; }
.breath .a2 { animation: a2 5.12s step-end infinite; } .breath .a3 { animation: a3 5.12s step-end infinite; }
@keyframes a0 { 0% { opacity: 1 } 25% { opacity: 0 } 37.5% { opacity: 1 } 43.75% { opacity: 0 } 59.375% { opacity: 1 } 71.875% { opacity: 0 } 81.25% { opacity: 1 } }
@keyframes a1 { 0% { opacity: 0 } 6.25% { opacity: 1 } 50% { opacity: 0 } 62.5% { opacity: 1 } 68.75% { opacity: 0 } 84.375% { opacity: 1 } 96.875% { opacity: 0 } }
@keyframes a2 { 0% { opacity: 0 } 9.375% { opacity: 1 } 21.875% { opacity: 0 } 31.25% { opacity: 1 } 75% { opacity: 0 } 87.5% { opacity: 1 } 93.75% { opacity: 0 } }
@keyframes a3 { 0% { opacity: 0 } 12.5% { opacity: 1 } 18.75% { opacity: 0 } 34.375% { opacity: 1 } 46.875% { opacity: 0 } 56.25% { opacity: 1 } }
@media (prefers-reduced-motion: reduce) {
  .breath circle { animation: none !important; }
  .breath .a2, .breath .a3 { opacity: 0; }
}

/* The column, the tabs, the pane and the status bar. */
.shell { display: grid; grid-template-columns: 264px 1fr; grid-template-rows: auto 1fr auto; min-height: 100vh; }
.side { grid-row: 1 / 3; border-right: 1px solid var(--rule); display: flex; flex-direction: column; padding: 10px 0 0; }
.sp { display: flex; gap: 2px; padding: 6px 10px 2px; font-weight: 700; }
.sp .f { color: var(--faint); font-weight: 400; }
.sp.gap { margin-top: 10px; }
.ag { display: flex; align-items: center; gap: 8px; padding: 2px 10px 0 14px; text-decoration: none; line-height: 20px; }
.sub2 { padding: 0 10px 4px 22px; color: var(--detail); line-height: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sub2 i { font-style: normal; color: var(--faint); }
/* A page row is idle (the centre dot) unless it is the page shown, which is the full square. */
.nav .mk { color: var(--idle); }
.nav .mk circle:not(.c) { display: none; }
.at-home .n-home, .at-link .n-link, .at-privacy .n-privacy { background: var(--raised); }
.at-home .n-home .mk, .at-link .n-link .mk, .at-privacy .n-privacy .mk { color: var(--text); }
.at-home .n-home .mk circle, .at-link .n-link .mk circle, .at-privacy .n-privacy .mk circle { display: inline; }
.foot { margin-top: auto; padding: 14px 10px 8px; }
.qm { width: 30px; height: 40px; fill: var(--brand); }
.menu { display: flex; justify-content: space-between; color: var(--faint); padding: 8px 10px; }
.menu a { text-decoration: none; }
.tabsr { display: flex; align-items: stretch; border-bottom: 1px solid var(--rule); overflow-x: auto; }
.tabsr a { padding: 7px 16px; color: var(--detail); text-decoration: none; border-right: 1px solid var(--rule); white-space: nowrap; }
.at-home .t-home, .at-link .t-link, .at-privacy .t-privacy { color: var(--text); background: var(--raised); }
.tabsr .tq { display: none; }
.pane { padding: 44px 48px 56px; max-width: 860px; min-width: 0; }
.status { grid-column: 1 / 3; display: flex; flex-wrap: wrap; gap: 4px 18px; padding: 5px 12px; background: var(--status); color: var(--detail); }
.status a { text-decoration: none; }
.status b { color: var(--text); }

/* What a page holds. */
.prompt { color: var(--detail); margin-bottom: 28px; }
h1 { font-size: clamp(26px, 3.6vw, 38px); line-height: 1.15; font-weight: 700; letter-spacing: -.01em; }
h2 { font-size: 13.5px; font-weight: 700; margin-bottom: 10px; }
p, li { line-height: 1.65; color: var(--detail); max-width: 70ch; }
p + p { margin-top: 10px; }
.lead { color: var(--text); margin: 18px 0 26px; }
ul { list-style: none; margin-top: 6px; }
li { padding-left: 2ch; text-indent: -2ch; }
li::before { content: "\00b7\00a0"; color: var(--faint); }
ul + p { margin-top: 10px; }
code { font: inherit; color: var(--text); }
strong { color: var(--text); font-weight: 700; }
.rule { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 12px; color: var(--detail); margin: 26px 0 8px; }
.rule::after { content: ""; flex: 1; height: 1px; background: var(--rule); min-width: 8px; }
.btns { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 40px; }
.tb { display: inline-block; padding: 4px 14px; background: var(--raised); color: var(--text); text-decoration: none; border: 0; cursor: pointer; line-height: 1.6; }
.tb.b { background: var(--brand); color: #000; font-weight: 700; }
.tb kbd { font: inherit; opacity: .6; margin-right: 8px; }
.tb:disabled { opacity: .5; cursor: default; }

/* The dialog: a straight box, its title on the top edge, ember ticks at the two lower corners. */
.dlg { position: relative; border: 1px solid var(--rule); max-width: 600px; padding: 28px 26px 24px; margin-top: 12px; }
.dlg::before, .dlg::after { content: ""; position: absolute; bottom: -1px; width: 10px; height: 10px; border-bottom: 1px solid var(--brand); }
.dlg::before { left: -1px; border-left: 1px solid var(--brand); }
.dlg::after { right: -1px; border-right: 1px solid var(--brand); }
.dt { position: absolute; top: -10px; left: 14px; padding: 0 8px; background: var(--bg); color: var(--text); font-weight: 700; }
.dlg .btns { margin: 18px 0 0; }
.dlg .code { width: 366px; max-width: 100%; height: auto; fill: var(--text); }
.kv { display: grid; grid-template-columns: 10ch 1fr; gap: 4px 12px; margin: 22px 0 16px; }
.kv > span { overflow-wrap: anywhere; }
.kv > span:nth-child(odd) { color: var(--detail); }
.f { color: var(--faint); }
.after { margin-top: 16px; }
.field { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
input { font-size: 18px; letter-spacing: .12em; text-transform: uppercase; padding: 4px 10px; width: 13ch; background: var(--status);
  border: 1px solid var(--rule); border-radius: 0; color: var(--text); }
input:focus { outline: none; border-color: var(--text); }
input::placeholder { color: var(--faint); }
/* A warning wears the ring of a state that wants a person, a result its own state's mark: the
   picture rides in a mask, so it takes the line's own ink. */
.wr, .ok { position: relative; padding-left: 23px; line-height: 1.55; }
.wr { color: var(--blocked); margin: 14px 0; }
.ok { color: var(--done); margin-top: 16px; }
#result:empty { display: none; }
#result.wr { margin-bottom: 0; }
.wr::before, .ok::before { content: ""; position: absolute; left: 0; top: 4px; width: 13px; height: 13px; background: currentColor;
  -webkit-mask: var(--pic) center / contain no-repeat; mask: var(--pic) center / contain no-repeat; }
.wr { --pic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 3'%3E%3Ccircle cx='.5' cy='.5' r='.31'/%3E%3Ccircle cx='1.5' cy='.5' r='.31'/%3E%3Ccircle cx='2.5' cy='.5' r='.31'/%3E%3Ccircle cx='2.5' cy='1.5' r='.31'/%3E%3Ccircle cx='2.5' cy='2.5' r='.31'/%3E%3Ccircle cx='1.5' cy='2.5' r='.31'/%3E%3Ccircle cx='.5' cy='2.5' r='.31'/%3E%3Ccircle cx='.5' cy='1.5' r='.31'/%3E%3C/svg%3E"); }
.ok { --pic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 3'%3E%3Ccircle cx='.5' cy='.5' r='.31'/%3E%3Ccircle cx='1.5' cy='.5' r='.31'/%3E%3Ccircle cx='2.5' cy='.5' r='.31'/%3E%3Ccircle cx='.5' cy='1.5' r='.31'/%3E%3Ccircle cx='1.5' cy='1.5' r='.31'/%3E%3Ccircle cx='2.5' cy='1.5' r='.31'/%3E%3Ccircle cx='.5' cy='2.5' r='.31'/%3E%3Ccircle cx='1.5' cy='2.5' r='.31'/%3E%3Ccircle cx='2.5' cy='2.5' r='.31'/%3E%3C/svg%3E"); }

/* A phone: the column gives way to the tabs, the q leads them. */
@media (max-width: 760px) {
  .shell { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; }
  .side { display: none; }
  .tabsr, .pane, .status { grid-column: 1; }
  .tabsr .tq { display: flex; align-items: center; padding: 0 12px; }
  .tabsr .tq svg { width: 15px; height: 20px; fill: var(--brand); }
  .pane { padding: 28px 16px 40px; }
  .status { gap: 4px 12px; }
  .dlg { padding: 26px 16px 20px; }
}