/* Firma: At the foot.
   The sentence opens at the left and finishes at the right, with the action
   beneath its closing words. The offset comes from setting type in space,
   not from a drawn page, a border, or an ornamental mark. */

@font-face {
  font-family: "Source Serif 4";
  src: url("/assets/fonts/source-serif-4-latin-opsz-normal.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light dark;
  --paper: #FFFFFF;
  --ink: #000000;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --google: Roboto, Arial, sans-serif;
  --gsi-fill: #FFFFFF;
  --gsi-hover: #EDEDED;
  --gsi-border: #747775;
  --gsi-text: #1F1F1F;
  --gutter: clamp(1.5rem, 6vw, 5rem);
  --measure: 64rem;
  /* The one colour: a provider connected for real. Its paper check stands
     5.3:1 on it, and it stands 5.3:1 on the paper. */
  --connected: #287A52;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #000000;
    --ink: #FFFFFF;
    /* On black, lighter: 10.5:1 both ways. */
    --connected: #72C996;
    --gsi-fill: #131314;
    --gsi-hover: #242425;
    --gsi-border: #8E918F;
    --gsi-text: #E3E3E3;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: var(--paper);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 400;
  font-style: normal;
  font-optical-sizing: none;
  font-variation-settings: "opsz" 14;
  line-height: 1.4;
  overflow-wrap: break-word;
}

h1,
p,
form {
  margin: 0;
}

a {
  color: inherit;
}

svg {
  display: block;
}

::selection {
  background: var(--ink);
  color: var(--paper);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* No fixed page height. Very short windows and enlarged text scroll in flow. */
.landing,
.login,
.connect,
.board,
.consent,
.invited,
.oauth,
.step {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(1.5rem, 5vh, 3rem) var(--gutter);
}

.sheet,
.foot {
  width: 100%;
  max-width: var(--measure);
  min-width: 0;
  margin-inline: auto;
}

.name {
  width: fit-content;
  max-width: 100%;
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.3;
}

/* The mark, beside the name wherever the name heads a page: as tall as the
   name's line, so each of its Ms is about the size of the name's capitals,
   and set by its own edges (its files are cropped to the mark). Black on
   the paper, white on the dark: each page picks the file. */
.logo {
  display: inline-block;
  flex: none;
  margin-inline-end: 0.45em;
  vertical-align: top;
}

.logo img {
  display: block;
  width: auto;
  height: 1.3em;
}

/* Keep the Text cut even at larger sizes: wider forms, sturdy fine strokes.
   Both clauses have the same size, weight and upright style. */
.statement {
  margin-top: clamp(2.5rem, 8vh, 5rem);
  font-size: clamp(1.875rem, 1rem + 3.2vw, 3.125rem);
  font-weight: 400;
  font-variation-settings: "opsz" 20;
  line-height: 1.22;
}

.opening,
.closing {
  display: block;
  width: fit-content;
  max-width: 92%;
  text-wrap: balance;
}

.closing {
  margin-top: 0.2em;
  margin-inline-start: auto;
  text-align: right;
}

/* The story behind the name, between the statement and the invitation: two
   short paragraphs at reading size, set as the statement is, the first at
   the left and the second at the right edge below it. Where the screen is
   too narrow for that, the second keeps only a small indent. */
.story {
  margin-top: clamp(2rem, 6vh, 3.5rem);
  font-size: 1.125rem;
  line-height: 1.55;
}

.story p {
  max-width: 34rem;
}

.story p + p {
  margin-top: 0.85em;
  margin-inline-start: max(2rem, 100% - 34rem);
}

/* An underlined invitation where a letter would be signed, right under the
   story's last words, as close as its paragraphs are to each other (its own
   padding, and its shorter line, inside that gap). The entire 44px-high area
   is clickable; the underline is not a page rule. */
.cta {
  display: block;
  width: fit-content;
  max-width: 100%;
  min-height: 44px;
  margin-top: calc(0.85em - 8px);
  margin-inline-start: auto;
  padding-block: 10px;
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 24px;
  text-align: right;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

.cta:hover,
.cta:active {
  background: var(--ink);
  color: var(--paper);
}

.cta:focus-visible,
.back:focus-visible,
.gsi:focus-visible,
.tile:focus-visible,
.next:focus-visible,
.quiet:focus-visible,
.address:focus-visible,
.brand:focus-visible,
.tab:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 5px;
}

.foot {
  margin-top: clamp(2rem, 6vh, 3rem);
  font-size: 0.875rem;
  line-height: 1.4;
  text-align: right;
}

/* Sign-in follows the same two anchors: name at the opening, controls at
   the ending. The browser's tab order remains name, then Google. */
.back {
  display: flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
  text-underline-offset: 5px;
}

.back:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

.signin {
  width: 100%;
  max-width: 28rem;
  margin-top: clamp(2.5rem, 8vh, 5rem);
  margin-inline-start: auto;
  text-align: right;
}

.heading {
  margin-bottom: 1.5rem;
  font-size: clamp(2rem, 1rem + 3.2vw, 3.125rem);
  font-weight: 400;
  font-variation-settings: "opsz" 20;
  line-height: 1.22;
}

/* Google's original mark, font and themes are the required exception. */
.gsi {
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  max-width: 100%;
  margin: 0;
  padding: 9px 12px;
  border: 1px solid var(--gsi-border);
  border-radius: 4px;
  background: var(--gsi-fill);
  color: var(--gsi-text);
  font-family: var(--google);
  font-size: 14px;
  font-weight: 500;
  font-optical-sizing: auto;
  font-variation-settings: normal;
  line-height: 20px;
  letter-spacing: 0.25px;
  cursor: pointer;
}

.gsi svg {
  flex: none;
  width: 20px;
  height: 20px;
}

.gsi:hover {
  background: var(--gsi-hover);
}

.notice {
  display: none;
  margin-top: 1.5rem;
  font-size: 1.0625rem;
  line-height: 1.45;
}

.notice:target {
  display: block;
}

/* An invite, where a connector's sign-in brought an agent to sign in
   (#invite): pasted, instead of Google. */
.invite-use {
  display: none;
  margin-top: 2rem;
  text-align: left;
}

.invite-use:target {
  display: block;
}

.invite-label {
  display: block;
  font-size: 1rem;
  line-height: 1.45;
}

.invite-use .address {
  max-width: none;
}

.invite-use .quiet {
  display: block;
  margin-left: auto;
}

/* An invite's own page: using it now, in the middle of a connector's
   sign-in, or the steps to get there. */
.on-connecting,
.on-idle {
  display: none;
}

.is-connecting .on-connecting,
.is-idle .on-idle {
  display: block;
}

.address + .address {
  margin-top: 0.5rem;
}

/* Who will do the work? The question opens at the left; the three choices
   sit toward the right, at the receiving end, and Next waits beneath them.
   A chosen square is ticked at its corner. */
.connect {
  --tile: clamp(5rem, 3.6rem + 4vw, 7rem);
  --tile-gap: clamp(0.75rem, 0.4rem + 1.2vw, 1.25rem);
}

/* Four squares in a phone's width: a little smaller there. */
@media (max-width: 26rem) {
  .connect {
    --tile: 4.25rem;
    --tile-gap: 0.6rem;
  }
}

.question {
  margin-top: clamp(2.5rem, 8vh, 5rem);
  font-size: clamp(1.75rem, 1rem + 2.4vw, 2.625rem);
  font-weight: 400;
  font-variation-settings: "opsz" 20;
  line-height: 1.22;
}

/* The line under a page's question. */
.lede {
  max-width: 34rem;
  margin-top: 1rem;
  font-size: 1.125rem;
  line-height: 1.45;
}

.labor {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--tile-gap);
  width: fit-content;
  max-width: 100%;
  margin-top: clamp(1.75rem, 5vh, 3rem);
  margin-inline-start: auto;
}

/* A square and its mark. Under the pointer it turns inverse, as the
   landing's action does. */
.tile {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  display: grid;
  place-items: center;
  align-content: center;
  row-gap: 0.35em;
  flex: none;
  width: var(--tile);
  height: var(--tile);
  margin: 0;
  padding: 0;
  border: 2px solid var(--ink);
  border-radius: 10px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}

a.tile {
  text-decoration: none;
}

/* Firma's square sits in its own form, as one of the row's three. */
.choice {
  display: contents;
}

.tile:hover,
.tile:active {
  background: var(--ink);
  color: var(--paper);
}

.mark {
  display: block;
}

/* OpenAI's file keeps the Blossom's clear space around it, inside its own
   box: the box is drawn at three quarters of the square. */
.mark.openai {
  width: 76%;
  height: 76%;
}

.word {
  font-size: calc(var(--tile) * 0.2);
  font-variation-settings: "opsz" 20;
  line-height: 1;
}

/* Under Agents' name: how many are connected, once any are. */
.count {
  font-size: calc(var(--tile) * 0.12);
  line-height: 1;
}

.count:empty {
  display: none;
}

/* The tick is centred on the square's outer corner (its 2px border
   included), with a ring of paper around it: clear of every mark's box,
   the Blossom's clear space included. */
.tick {
  position: absolute;
  top: calc(-2px - var(--tile) * 0.125);
  right: calc(-2px - var(--tile) * 0.125);
  display: none;
  width: calc(var(--tile) * 0.25);
  height: calc(var(--tile) * 0.25);
  border-radius: 50%;
  box-shadow: 0 0 0 3px var(--paper);
}

.tick circle {
  fill: var(--ink);
}

.tick path {
  stroke: var(--paper);
}

.tile[aria-pressed="true"] .tick,
.tile[data-state="connected"] .tick {
  display: block;
}

/* A provider connected for real is ticked in green, under the pointer too.
   Firma's chosen help keeps the ink tick: chosen isn't connected. */
.tile[data-state="connected"] .tick circle {
  fill: var(--connected);
}

/* Under the squares, until Claude is connected: checking the connection (the
   page has no script, so it doesn't see claude.ai's tab), and the steps by hand. */
.fallback {
  margin-top: 0.9rem;
  font-size: 0.9375rem;
  line-height: 1.4;
  text-align: right;
}

/* On the narrowest screens each line breaks between its question and its
   link, never inside the link. */
.fallback a {
  white-space: nowrap;
}

.go {
  display: flex;
  justify-content: flex-end;
  margin-top: clamp(1rem, 2.5vh, 1.5rem);
}

/* Next: the landing's underlined invitation once someone will do the work;
   until then the same word, quiet and not a link. */
.next {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  min-height: 44px;
  margin: 0;
  padding: 10px 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 24px;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

.next:disabled {
  opacity: 0.38;
  text-decoration: none;
  cursor: default;
}

a.next:hover,
a.next:active {
  background: var(--ink);
  color: var(--paper);
}

/* Consent: who's asking, and the answer. Notes show only when they apply. */
.note,
.status {
  display: none;
}

.is-loopback .on-loopback,
.is-unexpected .on-unexpected,
.is-problem .on-problem,
.state-none .on-none,
.state-waiting .on-waiting,
.state-connected .on-connected {
  display: block;
}

.note,
.detail,
.aside,
.status {
  max-width: 34rem;
  margin-top: 1rem;
  font-size: 1rem;
  line-height: 1.45;
}

.note {
  font-weight: 600;
}

.answer {
  display: flex;
  justify-content: flex-end;
  gap: 2rem;
  margin-top: clamp(1.5rem, 4vh, 2.5rem);
}

/* A second, quieter choice beside the main one: the same words, no underline. */
.quiet {
  -webkit-appearance: none;
  appearance: none;
  min-height: 44px;
  margin: 0;
  padding: 10px 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: 1.125rem;
  line-height: 24px;
  cursor: pointer;
}

.quiet:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

/* A step page: the address to paste, framed like the squares. */
.address {
  display: block;
  width: 100%;
  max-width: 34rem;
  margin-top: 1rem;
  padding: 0.65rem 0.85rem;
  border: 2px solid var(--ink);
  border-radius: 10px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
}

.steps {
  max-width: 34rem;
  margin: 1.25rem 0 0;
  padding-left: 1.4rem;
  font-size: 1.0625rem;
  line-height: 1.5;
}

.steps li + li {
  margin-top: 0.35rem;
}

code {
  font: inherit;
  overflow-wrap: anywhere;
}

.disconnect {
  margin-top: 1rem;
}

.state-none .disconnect {
  display: none;
}

/* An agent's browser, signed in as its node: one long sheet, read top to
   bottom (who it is, its new messages, a box per wire, who's online), in
   the pages' own type. Every control is a link or a button, visible as
   it is. Only the page's own body: a canvas card's agent line is also
   "agent". */
body.agent {
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 5vh, 3rem) var(--gutter);
}

body.agent .question {
  margin-top: clamp(1.5rem, 5vh, 3rem);
}

.part {
  max-width: 40rem;
  margin-top: clamp(2rem, 6vh, 3rem);
}

/* A part's name: on the agent's page, and the invite's second way in. */
.part-head {
  margin: clamp(2rem, 6vh, 3rem) 0 0;
  font-size: 1.375rem;
  font-weight: 400;
  font-variation-settings: "opsz" 20;
  line-height: 1.25;
}

.part > .part-head {
  margin-top: 0;
}

.part-text,
.part-note,
.agent-notice {
  max-width: 34rem;
  margin-top: 0.75rem;
  font-size: 1.0625rem;
  line-height: 1.45;
}

.part-note {
  font-size: 0.9375rem;
}

.agent-notice {
  margin-top: 1.5rem;
  font-weight: 600;
}

.part-go {
  margin-top: 0.75rem;
}

.part-list {
  margin: 0.75rem 0 0;
  padding-left: 1.4rem;
  font-size: 1.0625rem;
  line-height: 1.5;
}

/* A message: who sent it and when, then its words as written, line breaks
   kept; a rule above each, as the canvas's requests have. */
.message {
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--ink);
}

.message-from {
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.4;
}

.message-text {
  margin-top: 0.35rem;
  font-size: 1.0625rem;
  line-height: 1.5;
  white-space: pre-wrap;
}

/* A box to send along one wire, framed as the addresses are. */
.send {
  margin-top: 1.25rem;
}

.send-to {
  display: block;
  font-size: 1.0625rem;
  line-height: 1.45;
}

.send-text {
  display: block;
  width: 100%;
  min-height: 6rem;
  margin-top: 0.5rem;
  padding: 0.65rem 0.85rem;
  border: 2px solid var(--ink);
  border-radius: 10px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
  line-height: 1.45;
  resize: vertical;
}

.send-text:focus-visible,
.part a:focus-visible,
.agent-notice a:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 5px;
}

/* The node's role, its skills and wires, and the organization, below the
   messages, to read. A text from the canvas keeps its line breaks, and a
   long word or address wraps rather than widening the page. Each skill and
   wire under a rule, as a message is. Only on the agent's page. */
body.agent .role-nav a:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 5px;
}

body.agent .role-item {
  margin-top: 1.25rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--ink);
}

body.agent .role-head {
  margin: 1.5rem 0 0;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.35;
}

body.agent .role-item > .role-head {
  margin-top: 0;
}

body.agent .role-label {
  margin-top: 0.75rem;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.4;
}

body.agent .role-label + .role-text,
body.agent .role-label + .part-text {
  margin-top: 0.25rem;
}

body.agent .role-text {
  font-size: 1.0625rem;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

body.agent .org-list {
  margin: 0.75rem 0 0;
  padding-left: 1.4rem;
  font-size: 1rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

body.agent .org-list li + li {
  margin-top: 0.4rem;
}

/* Files, on the founder's page and an agent's: each folder under a rule, its
   path as its name; each file's name, what it is, then what can be done
   with it; the forms below, framed as the send boxes are. A file's text
   keeps its line breaks and wraps a long line rather than widening the
   page. */
.files {
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 5vh, 3rem) var(--gutter);
}

.folder {
  margin-top: 1.5rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--ink);
}

.folder-head {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.file-list,
.file-shares {
  margin: 0.75rem 0 0;
  padding: 0;
  list-style: none;
}

.file + .file {
  margin-top: 1rem;
}

.file-name {
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.file-facts {
  margin-top: 0.15rem;
  font-size: 0.9375rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.file-actions,
.file-act,
.file-shares li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 1rem;
}

.file-actions {
  margin-top: 0.35rem;
  font-size: 1rem;
}

.file-shares li {
  font-size: 0.9375rem;
  line-height: 1.4;
}

.file-shares li + li {
  margin-top: 0.4rem;
}

.file-label {
  display: block;
  margin-top: 1rem;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.4;
}

.file-input {
  display: block;
  width: 100%;
  min-height: 44px;
  margin-top: 0.35rem;
  padding: 0.5rem 0.75rem;
  border: 2px solid var(--ink);
  border-radius: 10px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
}

.file-act .file-label {
  margin-top: 0;
}

.file-act .file-input {
  width: auto;
  max-width: 100%;
  margin-top: 0;
}

.file-input:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}

.file-text {
  margin-top: 1.5rem;
  padding: 1rem;
  border: 1px solid var(--ink);
  border-radius: 10px;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.9375rem;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* The agents page (Connections, Agents): who asks to connect, each with
   what approving grants and its answer; each agent on its own line, Remove
   at its end; and an invite to make. Rules between lines, as the canvas's
   requests have. */
.agents-list,
.ask-list {
  margin: 0.75rem 0 0;
  padding: 0;
  list-style: none;
}

.ask-row {
  padding-block: 0.75rem;
  border-bottom: 1px solid var(--ink);
}

.ask-row .answer {
  margin-top: 0.75rem;
}

.invite-make .send-to,
.org-make .send-to {
  margin-top: 0.75rem;
}

/* A field on a page of forms: the node an invite is for, a sandbox's name. */
.invite-node,
.org-name-field {
  display: block;
  width: 100%;
  max-width: 34rem;
  min-height: 44px;
  margin-top: 0.5rem;
  padding: 0.5rem 0.65rem;
  border: 2px solid var(--ink);
  border-radius: 10px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
}

.invite-node:focus-visible,
.org-name-field:focus-visible,
.agents-page .part a:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 5px;
}

.agents-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0 1.5rem;
  padding-block: 0.5rem;
  border-bottom: 1px solid var(--ink);
}

.agents-words {
  flex: 1 1 18rem;
  font-size: 1rem;
  line-height: 1.45;
}

/* The workspace bar, on the canvas and on Connections, in the same place on
   each: the wordmark home to the canvas at the left, Connections at the
   right. Type set in space; no rule under it. */
.bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 1.5rem;
  width: 100%;
  min-width: 0;
}

.brand,
.tab {
  display: flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

.brand {
  font-size: 1.25rem;
  line-height: 1.3;
}

.tabs {
  display: flex;
  gap: 1.5rem;
}

.tab {
  font-size: 1.0625rem;
  line-height: 1.4;
}

/* Under the pointer, and the page you're on (or under): underlined, as Next. */
.brand:hover,
.tab:hover,
.tab[aria-current="page"],
.tab.is-current {
  text-decoration-line: underline;
}

/* On Connections the bar sits at the top, and the sheet (with its foot)
   stays centred in the space below it. */
.workspace {
  justify-content: flex-start;
}

.workspace > main {
  margin-top: auto;
  margin-bottom: auto;
}

.workspace > main:has(+ .foot) {
  margin-bottom: 0;
}

.workspace > .foot {
  margin-bottom: auto;
}

/* The canvas: the bar above, and below it the studio, paper to the window's
   edges: the canvas, its toolbar at its top left, and the details panel at
   the right. On a narrow screen the panel rises from the foot only while a
   node, two, or a skill, is open. */
.app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}

.app .bar {
  flex: none;
  padding: clamp(1.5rem, 5vh, 3rem) var(--gutter) clamp(0.5rem, 1.5vh, 1rem);
}

.studio {
  --panel: 24rem;
  position: relative;
  display: grid;
  flex: 1;
  grid-template-columns: minmax(0, 1fr) var(--panel);
  min-height: 0;
}

.canvas {
  position: relative;
  grid-row: 1;
  grid-column: 1;
  min-height: 0;
  overflow: hidden;
  outline: none;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* A keyboard reaching the canvas sees it: an inset ring, as wide as the
   pages' other focus rings. */
.canvas:focus-visible {
  box-shadow: inset 0 0 0 3px var(--ink);
}

.world {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
}

/* The toolbar: over the canvas's top left, never part of it, and within
   it: a row that wraps when it runs out of room. */
.toolbar {
  position: absolute;
  z-index: 2;
  top: 0.5rem;
  left: var(--gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 1.25rem;
  max-width: calc(100% - var(--panel) - 2 * var(--gutter));
  pointer-events: none;
}

.toolbar > * {
  pointer-events: auto;
}

.tool {
  -webkit-appearance: none;
  appearance: none;
  min-height: 44px;
  margin: 0;
  padding: 10px 0;
  border: 0;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 1.0625rem;
  line-height: 24px;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
  cursor: pointer;
}

.tool:disabled {
  opacity: 0.45;
  cursor: default;
}

.tool:focus-visible,
.inspector .quiet:focus-visible,
.inspector input:focus-visible,
.inspector textarea:focus-visible,
.inspector select:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}

.saving {
  font-size: 0.875rem;
  line-height: 1.4;
}

/* While the canvas is a draft: that it is, and the two ways out of it. */
.editing {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 1.25rem;
  background: var(--paper);
}

.editing[hidden] {
  display: none;
}

.editing-words {
  font-size: 0.9375rem;
  line-height: 1.4;
}

/* A node: one of the cards, in the world's own units, its size set by the
   script from the model. Selected, it turns inverse; keyboard focus adds a
   dashed ring with paper between, the same width on screen at any zoom. */
.node {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  width: var(--w);
  height: var(--h);
  padding: 18px 20px 16px;
  border: 2px solid var(--ink);
  border-radius: 10px;
  background: var(--paper);
  color: var(--ink);
  font-size: 16px;
  font-variation-settings: "opsz" 20;
  line-height: 1.3;
  text-align: left;
  outline: none;
}

/* A paper ring keeps selected nodes apart where they overlap: ink on ink
   would run together. */
.node.is-selected {
  background: var(--ink);
  color: var(--paper);
  box-shadow: 0 0 0 calc(2px / var(--zoom, 1)) var(--paper);
}

.node:focus-visible {
  outline: calc(2px / var(--zoom, 1)) dashed var(--ink);
  outline-offset: calc(4px / var(--zoom, 1));
}

/* What a node says: its name, its purpose, and at its foot who fills it and
   what it has. Long words end short and never change the card; keyboard
   focus shows them whole, the card growing down to hold them, on its own
   paper, above what's near. */
.node .name {
  overflow: hidden;
  font-size: 26px;
  font-variation-settings: "opsz" 24;
  line-height: 1.15;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.node .purpose {
  display: -webkit-box;
  overflow: hidden;
  font-size: 15px;
  line-height: 1.3;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.node .facts {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: auto;
  font-size: 13px;
  line-height: 1.3;
  letter-spacing: 0.02em;
}

.node .fact {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.node .fact.agent {
  font-weight: 600;
}

.node .vacant {
  font-weight: 400;
  opacity: 0.7;
}

/* Who's live, at the top of the foot: a dot in the text's own colour, filled
   while one of them works and a ring while all are idle, then the words; and
   when more than one is live, a row for each of the first two. A name gives
   way before "temporary" and "+1 more" do. Someone live keeps the purpose to
   a line, and more than one to none, so the card keeps its size; keyboard
   focus still shows it whole. */
.node .live,
.node .instance {
  display: flex;
  align-items: center;
  gap: 0.3em;
  min-width: 0;
  white-space: nowrap;
}

.node .live {
  font-weight: 600;
}

.node .live::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  margin-right: 0.15em;
  border: 1.5px solid currentColor;
  border-radius: 50%;
}

.node .live.is-working::before {
  background: currentColor;
}

.node .who {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.node .tag {
  flex: none;
}

.node.is-live .purpose {
  -webkit-line-clamp: 1;
}

.node.is-crowd .purpose {
  display: none;
}

.node:focus-visible .live,
.node:focus-visible .instance {
  flex-wrap: wrap;
  white-space: normal;
}

.node:focus-visible .who {
  overflow: visible;
}

.node:focus-visible {
  z-index: 1;
  height: auto;
  min-height: var(--h);
}

.node:focus-visible .name,
.node:focus-visible .purpose,
.node:focus-visible .fact {
  display: block;
  overflow: visible;
  white-space: normal;
}

/* Wires: a line between two cards' edges, 2px at any zoom, its head at the
   node it goes to; a picked wire's line is twice as wide. A line takes no
   pointer: its dot does. */
.links {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  overflow: visible;
  pointer-events: none;
}

.links line {
  stroke: var(--ink);
  stroke-width: 2px;
  vector-effect: non-scaling-stroke;
}

.links line.is-selected {
  stroke-width: 4px;
}

.links marker path {
  fill: var(--ink);
}

/* A wire's dot, in the middle of its line: a ring of ink on paper, with
   paper around it so the line stops short of it, its size the script's at
   any zoom, in a 24px press target. Under the pointer it fills with ink;
   picked, it grows, filled; keys on it add a dashed ring. Dots are drawn
   under the cards, so a card lying over one takes the press. */
.wire-dots {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}

.wire-dot {
  -webkit-appearance: none;
  appearance: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 24px;
  height: 24px;
  margin: -12px 0 0 -12px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  outline: none;
  cursor: pointer;
  pointer-events: auto;
}

.wire-dot::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--dot);
  height: var(--dot);
  border: 2px solid currentColor;
  border-radius: 50%;
  background: var(--paper);
  box-shadow: 0 0 0 2px var(--paper);
  transform: translate(-50%, -50%);
}

.wire-dot:hover::before {
  background: currentColor;
}

.wire-dot.is-selected::before {
  width: calc(var(--dot) + 4px);
  height: calc(var(--dot) + 4px);
  background: currentColor;
}

.wire-dot:focus-visible {
  outline: 2px dashed var(--ink);
}

/* While a message between the pair is recent, its dot wears a second, thin
   ring, slowly fading and coming back (still, where motion is reduced). */
.wire-dot.is-talking::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: talking 2.4s ease-in-out infinite;
}

@keyframes talking {
  50% {
    opacity: 0.25;
  }
}

/* Why a wire is there, beside its dot: words on paper in a ring of ink, the
   same size at any zoom, at most eight lines (the panel holds them all). It
   takes no pointer. */
.wire-tip {
  position: absolute;
  top: 0;
  left: 0;
  display: -webkit-box;
  max-width: min(20rem, calc(100% - 12px));
  max-height: calc(100% - 12px);
  overflow: hidden;
  padding: 0.35rem 0.6rem;
  border: 1px solid var(--ink);
  border-radius: 8px;
  background: var(--paper);
  color: var(--ink);
  font-size: 0.9375rem;
  line-height: 1.4;
  white-space: pre-line;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 8;
  pointer-events: none;
}

.wire-tip[hidden] {
  display: none;
}

.nodes {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
}

.canvas.is-panning,
.canvas.is-panning .node,
.canvas.is-panning .wire-dot {
  cursor: grab;
}

.canvas.is-grabbing,
.canvas.is-grabbing .node,
.canvas.is-grabbing .wire-dot {
  cursor: grabbing;
}

.marquee {
  position: absolute;
  border: 1px dashed var(--ink);
  pointer-events: none;
}

/* A node's handle: a "+" in a ring just outside the side of a node the
   pointer is near, its size the model's at any zoom, with paper around it
   where it lies over a selected card. Under the pointer it turns inverse;
   drawing a wire from it, the canvas shows a crosshair. */
.handle {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--size);
  height: var(--size);
  margin: calc(var(--size) / -2) 0 0 calc(var(--size) / -2);
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 0 0 2px var(--paper);
  cursor: crosshair;
}

.handle::before,
.handle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 2px;
  margin: -1px 0 0 -5px;
  background: currentColor;
}

.handle::after {
  width: 2px;
  height: 10px;
  margin: -5px 0 0 -1px;
}

.handle:hover {
  background: var(--ink);
  color: var(--paper);
}

.canvas.is-wiring,
.canvas.is-wiring .node,
.canvas.is-wiring .wire-dot {
  cursor: crosshair;
}

/* Without its script the canvas says so; the script takes the line away. */
.canvas-off {
  position: absolute;
  top: 50%;
  left: 50%;
  max-width: calc(100% - 2 * var(--gutter));
  transform: translate(-50%, -50%);
  font-size: 1.125rem;
  text-align: center;
}

.canvas.ready .canvas-off {
  display: none;
}

/* The details panel: the selected node, two nodes' wires, or a skill,
   set as the pages' sheets are, beside the canvas. */
.inspector {
  grid-row: 1;
  grid-column: 2;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-height: 0;
  padding: 0.75rem var(--gutter) 1.5rem 1.5rem;
  overflow-y: auto;
  border-left: 2px solid var(--ink);
  background: var(--paper);
}

.panel-title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.2;
}

.panel-head {
  margin: 0.75rem 0 0;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.3;
}

.panel-hint,
.pair {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.4;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.field-name {
  font-size: 0.9375rem;
  font-weight: 600;
}

.inspector input,
.inspector textarea,
.inspector select {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  margin: 0;
  padding: 0.5rem 0.65rem;
  border: 2px solid var(--ink);
  border-radius: 10px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
  line-height: 1.35;
}

.inspector textarea {
  resize: vertical;
}

.inspector .quiet {
  align-self: flex-start;
  min-height: 44px;
  padding: 10px 0;
  font-size: 1rem;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

.inspector .quiet:disabled {
  opacity: 0.45;
  cursor: default;
}

.field-hint {
  font-size: 0.875rem;
  line-height: 1.4;
}

/* A node's skills, or the company's: their names, to read; only an AI
   changes them. */
.skill-names {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 1rem;
  line-height: 1.4;
}

/* A node's one checkbox (replicable). */
.check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  font-size: 1rem;
}

.inspector .check input {
  width: 20px;
  height: 20px;
  min-height: 20px;
  padding: 0;
  accent-color: var(--ink);
}

/* Who's live on a node, in its panel: a line for each instance. */
.panel-live:empty {
  display: none;
}

.live-list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin: 0.35rem 0 0;
  padding: 0;
  font-size: 0.9375rem;
  line-height: 1.4;
  list-style: none;
  overflow-wrap: anywhere;
}

.wire-row {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--ink);
}

.wire-ends {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
}

/* The messages between two nodes, in their panel: each its sender and when,
   in the panel's small type, then its words as written, line breaks kept. */
.panel-talk {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.talk-list {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin: 0.25rem 0 0;
  padding: 0;
  list-style: none;
}

.talk-list:empty {
  display: none;
}

.talk-message {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.talk-meta {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.4;
}

.talk-from {
  font-weight: 600;
}

.talk-text {
  margin: 0;
  font-size: 1rem;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.inspector .remove-node {
  margin-top: 0.75rem;
}

/* A node's agent, in its panel: a request waiting for an answer. */
.request-row {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--ink);
}

.request-words {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
}

.request-answer {
  display: flex;
  justify-content: flex-end;
  gap: 1.5rem;
}

.inspector .request-answer .quiet {
  align-self: auto;
}

/* Trouble, said for a while at the canvas's foot, and what the canvas is,
   said always and quietly at its other foot: both inside the canvas's own
   part of the studio. */
.canvas-note {
  position: absolute;
  z-index: 2;
  right: calc(var(--panel) + var(--gutter));
  bottom: clamp(1rem, 3vh, 1.75rem);
  max-width: min(28rem, calc(100% - var(--panel) - 2 * var(--gutter)));
  margin: 0;
  padding: 0.25rem 0;
  background: var(--paper);
  font-size: 0.9375rem;
  line-height: 1.4;
  text-align: right;
  pointer-events: none;
}

.canvas-note:empty {
  display: none;
}

/* On a narrow screen the canvas takes the width; the panel rises from the
   foot while there's something to show, and the note sits above it. */
@media (max-width: 48rem) {
  .studio {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Placed against the studio itself, not a grid column. */
  .inspector {
    position: absolute;
    z-index: 3;
    grid-area: auto;
    right: 0;
    bottom: 0;
    left: 0;
    display: none;
    max-height: 50%;
    padding: 1rem var(--gutter) 1.5rem;
    border-top: 2px solid var(--ink);
    border-left: 0;
  }

  .studio.has-subject .inspector {
    display: flex;
  }

  .toolbar,
  .canvas-note {
    max-width: calc(100% - 2 * var(--gutter));
  }

  /* The words on a line of their own, the two ways out together below. */
  .editing-words {
    flex-basis: 100%;
  }

  .canvas-note {
    right: var(--gutter);
  }

  .studio.has-subject .canvas-note {
    bottom: calc(50% + 1rem);
  }
}

/* All feedback is immediate, with no animation or movement. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none;
    transition: none;
    scroll-behavior: auto;
  }

  /* As specific as the ring it stills. */
  .wire-dot.is-talking::after {
    animation: none;
  }
}

@media (forced-colors: active) {
  .cta:focus-visible,
  .back:focus-visible,
  .gsi:focus-visible,
  .tile:focus-visible,
  .next:focus-visible,
  .quiet:focus-visible,
  .address:focus-visible,
  .brand:focus-visible,
  .tab:focus-visible,
  .node:focus-visible,
  .wire-dot:focus-visible {
    outline-color: Highlight;
  }

  .canvas:focus-visible {
    box-shadow: none;
    outline: 3px solid Highlight;
    outline-offset: -3px;
  }

  .tick circle,
  .tile[data-state="connected"] .tick circle {
    fill: CanvasText;
  }

  .tick path {
    stroke: Canvas;
  }

  .node.is-selected {
    forced-color-adjust: none;
    border-color: Highlight;
    background: Highlight;
    color: HighlightText;
  }

  .handle {
    forced-color-adjust: none;
    border-color: CanvasText;
    background: Canvas;
    color: CanvasText;
    box-shadow: 0 0 0 2px Canvas;
  }

  .wire-dot {
    forced-color-adjust: none;
    color: CanvasText;
  }

  .wire-dot::before {
    background: Canvas;
    box-shadow: 0 0 0 2px Canvas;
  }

  .wire-dot:hover::before,
  .wire-dot.is-selected::before {
    border-color: Highlight;
    background: Highlight;
  }

  .links line.is-selected {
    forced-color-adjust: none;
    stroke: Highlight;
  }

  .handle:hover {
    border-color: Highlight;
    background: Highlight;
    color: HighlightText;
  }
}

/* The board: the question at the left, as on Connections; Yolo, then the
   jobs waiting for the founder's yes, then the ones answered, toward the
   right. Each job's words are set as they were written. */
.board .yolo,
.board .jobs,
.board .board-note {
  width: 100%;
  max-width: 40rem;
  margin-top: clamp(1.75rem, 5vh, 3rem);
  margin-inline-start: auto;
}

.board-head {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.3;
}

/* While Yolo is on, it says so plainly: inverse, where it can't be missed. */
.yolo-on {
  margin: 0.75rem 0 0;
  padding: 0.75rem 1rem;
  background: var(--ink);
  color: var(--paper);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.45;
}

.yolo-unknown,
.yolo-off,
.board-empty {
  margin: 0.5rem 0 0;
  font-size: 1rem;
  line-height: 1.45;
}

.board-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0 1.5rem;
  margin: 0.5rem 0 0;
}

.board-button {
  -webkit-appearance: none;
  appearance: none;
  min-height: 44px;
  margin: 0;
  padding: 10px 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 24px;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
  cursor: pointer;
}

.board-button:hover,
.board-button:active {
  background: var(--ink);
  color: var(--paper);
}

.board-button:disabled {
  opacity: 0.38;
  text-decoration: none;
  cursor: default;
}

.board-button:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 5px;
}

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

.job {
  padding-block: 1rem;
  border-bottom: 1px solid var(--ink);
}

.job-head {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.job-via,
.job-state {
  margin: 0.25rem 0 0;
  font-size: 0.9375rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.job-label {
  margin: 0.75rem 0 0;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.4;
}

/* As written: its own line breaks, every character shown. */
.job-text {
  margin: 0.25rem 0 0;
  font-size: 1rem;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.board-note:empty {
  display: none;
}
/* Sharing an organization (src/mvp/mvpsharing.ts). On the canvas: whose it
   is and the person's place, beside the toolbar's tools; the Share menu, in
   the details panel's place (over it while open); and, only viewing, no
   control that changes anything. */
.org-line {
  font-size: 0.9375rem;
  line-height: 1.4;
}

.org-line:empty,
.saving:empty {
  display: none;
}

.share-menu {
  grid-row: 1;
  grid-column: 2;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-height: 0;
  padding: 0.75rem var(--gutter) 1.5rem 1.5rem;
  overflow-y: auto;
  border-left: 2px solid var(--ink);
  background: var(--paper);
}

.share-menu[hidden],
.request-answer[hidden],
.tabs[hidden],
.tab[hidden] {
  display: none;
}

.share-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.share-menu input[type="email"],
.share-menu input[type="text"],
.share-menu select {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  margin: 0;
  padding: 0.5rem 0.65rem;
  border: 2px solid var(--ink);
  border-radius: 10px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
  line-height: 1.35;
}

.share-menu .quiet {
  align-self: flex-start;
  min-height: 44px;
  padding: 10px 0;
  font-size: 1rem;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

.share-invite {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.5rem 0.75rem;
}

.share-invite .share-email {
  grid-column: 1 / -1;
}

.share-people {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.share-person {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.35rem 0.75rem;
  padding-block: 0.5rem;
  border-bottom: 1px solid var(--ink);
}

.share-who {
  grid-column: 1 / -1;
  font-size: 1rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.share-wait,
.share-role-words {
  font-size: 0.9375rem;
}

.share-option {
  display: block;
  font-size: 1rem;
  line-height: 1.45;
}

.share-option input {
  accent-color: var(--ink);
}

.share-menu .quiet:focus-visible,
.share-menu input:focus-visible,
.share-menu select:focus-visible,
.panel-link:focus-visible,
.orgs-row a:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}

/* Organizations: the person's own, and those shared with them. */
.orgs-list {
  margin: 0.75rem 0 0;
  padding: 0;
  list-style: none;
}

.orgs-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0 1.5rem;
  padding-block: 0.6rem;
  border-bottom: 1px solid var(--ink);
  font-size: 1.0625rem;
  line-height: 1.45;
}

.orgs-role {
  font-size: 0.9375rem;
}

/* A sandbox's Delete: closed under its row until asked for. */
.org-delete {
  flex-basis: 100%;
  font-size: 0.9375rem;
}

.org-delete summary {
  width: fit-content;
  cursor: pointer;
}

.org-delete summary:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}

.org-delete .send-to {
  margin-top: 0.75rem;
}

/* Secrets asked for, on the board: each a job's look, its form within. Its
   notes: what was just done, plainly; why not, inverse, beside its form,
   where it can't be missed. */
.secret-text {
  margin: 0.5rem 0 0;
  font-size: 1rem;
  line-height: 1.5;
}

.secret-text a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.secret-note {
  margin: 0.75rem 0 0;
  font-size: 1rem;
  line-height: 1.45;
}

.secret-note.org-problem {
  padding: 0.75rem 1rem;
  background: var(--ink);
  color: var(--paper);
  font-weight: 500;
}

/* Secrets in the organization's settings (the Share menu), each with its
   facts and its last attempts. */
.secret-list {
  margin: 0.75rem 0 0;
  padding: 0;
  list-style: none;
}

.secret-row {
  padding-block: 1rem;
  border-bottom: 1px solid var(--ink);
}

.secret-name {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
}

.secret-form .send-to {
  margin-top: 0.75rem;
}

.secret-set {
  margin: 1rem 0 0;
  padding: 0;
  border: 0;
}

.secret-set legend {
  padding: 0;
  font-weight: 500;
}

.secret-choice {
  display: block;
  margin-top: 0.5rem;
}

.secret-choice input {
  accent-color: var(--ink);
}

.secret-ops {
  min-height: 5.5rem;
  resize: vertical;
}

.secret-hours {
  width: 5rem;
  padding: 0.25rem 0.4rem;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
}

.secret-warning {
  font-weight: 500;
}

.secret-more {
  margin-top: 1rem;
}

.secret-more summary {
  width: fit-content;
  cursor: pointer;
}

.secret-facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.25rem 1rem;
  margin: 0.75rem 0 0;
}

.secret-facts dt {
  font-weight: 500;
}

.secret-facts dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.secret-attempts {
  margin: 0.5rem 0 0;
  padding-left: 1.25rem;
  font-size: 0.9375rem;
  overflow-wrap: anywhere;
}

.secret-action {
  margin-top: 0.5rem;
}

.secret-more summary:focus-visible,
.secret-choice input:focus-visible,
.secret-hours:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}

@media (max-width: 48rem) {
  /* The Share menu rises from the foot, as the details panel does. */
  .share-menu {
    position: absolute;
    z-index: 4;
    grid-area: auto;
    right: 0;
    bottom: 0;
    left: 0;
    max-height: 70%;
    padding: 1rem var(--gutter) 1.5rem;
    border-top: 2px solid var(--ink);
    border-left: 0;
  }
}

/* The organization's name (src/mvp/mvpsharing.ts): in the canvas's bar,
   after the wordmark, set off by a rule; and its field in the Share menu. */
.org-name {
  margin: 0 auto 0 0;
  padding-left: 1.5rem;
  border-left: 1px solid var(--ink);
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.share-naming {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  align-items: center;
}

.share-naming .share-name {
  flex: 1 1 12rem;
  min-width: 0;
}

/* Where the bar wraps, the name takes its own line under the wordmark,
   without the rule that sets it off beside it. */
@media (max-width: 48rem) {
  .org-name {
    flex-basis: 100%;
    padding-left: 0;
    border-left: 0;
  }
}

/* A company's own sign-in pages (public/org) are the first version's: they
   say so, with the way to Mind Made Many. */
.earlier {
  margin: 0;
  padding: 0.75rem var(--gutter);
  font-size: 0.875rem;
  text-align: center;
}
.earlier a { color: inherit; }