@layer components {
  /* One column that never grows past the screen, whatever is inside (a long find excerpt, a select). */
  .settings { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; padding: calc(var(--block-space) * 0.5) 16px calc(var(--block-space) * 6); }
  .sheet-plain {
    width: min(var(--measure), 100%); min-width: 0; box-sizing: border-box; overflow-wrap: anywhere; background: var(--paper); box-shadow: var(--shadow);
    padding: calc(var(--block-space) * 2.5) calc(var(--inline-space) * 4);
  }
  .sheet-plain h1 { font-size: 1.6em; line-height: 1.2; margin-block-end: 0.4em; }
  .lede { color: var(--ink-soft); font-size: 0.92rem; margin-block-end: calc(var(--block-space) * 2); }
  .provider { padding-block: calc(var(--block-space) * 1.25); border-block-start: 1px solid var(--rule); scroll-margin-top: 2rem; }
  .provider-name { font-size: 1.1em; }
  .provider-issuer { color: var(--ink-soft); font-weight: 400; font-size: 0.8em; margin-inline-start: 0.4em; }
  .provider-state { font-size: 0.88rem; margin-block: 0.4em; }
  /* Said in words, in ink, like a receipt line: what the provider answered. */
  .check { color: var(--ink); }
  .check.is-bad { font-weight: 700; }
  .when { color: var(--ink-soft); font-size: 0.78rem; }
  .provider-actions { display: flex; gap: 0.6rem; margin-block: 0.5rem; }
  .provider-actions form { display: inline; }
  .provider-form { display: flex; gap: 0.6rem; margin-block-start: 0.6rem; }
  .provider-form input[type=password] {
    flex: 1; min-width: 0; padding: 0.35em 0.6em; border: 1px solid var(--rule); border-radius: 6px;
    background: var(--desk); font-family: var(--mono); font-size: 0.85rem;
  }
  .provider-form input[type=password]:focus { outline: none; border-color: var(--accent); }
  .provider-help { font-size: 0.75rem; color: var(--ink-soft); margin-block-start: 0.4rem; }
  .button.is-quiet { border-color: transparent; color: var(--ink-soft); }
  .button.is-quiet:hover { color: var(--ink); border-color: var(--rule); }
}

@layer components {
  .find-input { width: 100%; font: inherit; font-size: 1.3rem; padding: 0.4rem 0; border: 0; border-block-end: 2px solid var(--rule); background: transparent; color: var(--ink); caret-color: var(--caret); outline: none; }
  .find-input:focus { border-block-end-color: var(--ink-soft); }
  .find-results { display: grid; margin-block-start: 1.2rem; }
  .find-link { display: grid; gap: 0.1rem; padding: 0.7rem 0; border-block-end: 1px solid var(--rule); text-decoration: none; color: var(--ink); }
  .find-link:hover .find-title { text-decoration: underline; text-decoration-color: var(--rule); }
  .find-title { font-weight: 700; }
  .find-where { font-size: 0.74rem; color: var(--ink-soft); }
  .find-text { font-size: 0.88rem; color: color-mix(in oklab, var(--ink), var(--paper) 20%); }
}
.passkey-list { display: grid; gap: 0.2rem; margin-block: 0.4rem 0.8rem; }
.passkey { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.4rem 0; border-block-end: 1px solid var(--rule); font-size: 0.9rem; }
.passkey form { display: inline; }
.sign-in { display: grid; gap: 1rem; justify-items: start; }
.sign-in-new { font-size: 0.85rem; color: var(--ink-soft); }
/* The welcome: one question, a team if there is one, Start. The team's name shows only when asked for. */
.welcome-form { display: grid; gap: 1.1rem; justify-self: stretch; width: 100%; }
.welcome-form .field { display: grid; gap: 0.4rem; }
.welcome-question .field-label { font-size: 1.15rem; font-weight: 700; }
.welcome-form input[type=text] { width: 100%; font: inherit; padding: 0.55rem 0.7rem; border: 1px solid var(--rule); border-radius: 8px; background: var(--paper); color: var(--ink); caret-color: var(--caret); }
.welcome-form input[type=text]:focus { outline: none; border-color: var(--ink-soft); }
.welcome-form .field-hint { font-size: 0.8rem; color: var(--ink-soft); }
.welcome-form .form-actions { display: flex; align-items: center; gap: 1rem; }
.welcome-team { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; }
.welcome-form .welcome-team-name { display: none; }
.welcome-form:has(.welcome-team input:checked) .welcome-team-name { display: grid; }
.welcome-skip { font-size: 0.85rem; color: var(--ink-soft); }

.time-zone { max-width: 100%; }
.provider-form { flex-wrap: wrap; } .provider-form input[type=password], .provider-form select { flex: 1 1 12rem; min-width: 0; }

@layer components {
  /* Settings and a team's page, as HEY draws its settings: who it is at the top, then rounded cards
     of rows, each row a small line mark, what it is, where it stands in soft ink, and a chevron. */
  .settings-who { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.2rem 1rem; margin-block-end: 1.6rem; }
  .settings-mark { grid-row: span 2; display: inline-flex; }
  .settings-mark .timeline-who { width: 3.4rem; height: 3.4rem; font-size: 1.05rem; }
  .settings-mark.is-team { width: 3.4rem; height: 3.4rem; border-radius: 28%; place-items: center; justify-content: center; align-items: center; background: var(--desk); color: var(--ink-soft); }
  .settings-mark.is-team .settings-icon { width: 1.7rem; height: 1.7rem; }
  .settings-name { font-size: 1.9em; line-height: 1.15; min-width: 0; overflow-wrap: anywhere; }
  .settings-who:not(:has(.settings-role)) .settings-name { grid-row: span 2; }
  .settings-role { grid-column: 2; font-size: 0.85rem; color: var(--ink-soft); }
  .settings-who .binder-edit { grid-column: 3; grid-row: 1 / span 2; }

  .settings-group-title { font-size: 1.25em; line-height: 1.2; font-weight: 700; margin: 1.8rem 0 0.6rem; }
  .settings-group { border: 1px solid var(--rule); border-radius: 12px; overflow: hidden; margin-block: 0 1.2rem; }
  .settings-group-title + .settings-group { margin-block-start: 0; }
  .settings-group > li + li { border-block-start: 1px solid var(--rule); }
  .settings-row-form { display: block; }
  .settings-row {
    display: grid; grid-template-columns: 20px fit-content(70%) minmax(0, 1fr) auto; align-items: center; gap: 0.85rem;
    width: 100%; min-height: 3rem; padding: 0.6rem 0.9rem 0.6rem 1rem; text-align: start;
    font-size: 0.95rem; color: var(--ink); text-decoration: none; background: var(--raised);
  }
  .settings-row:hover, .settings-row:focus-visible { background: color-mix(in oklab, var(--desk), var(--paper) 45%); outline: none; }
  .settings-row:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }
  .settings-row .settings-icon { color: var(--ink-soft); }
  .settings-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .settings-value { color: var(--ink-soft); font-size: 0.85rem; text-align: end; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .settings-chevron { color: var(--ink-soft); opacity: 0.7; }
  .settings-row:not(:has(.settings-value)) .settings-label { grid-column: 2 / 4; }
  .settings-row.is-add .settings-label, .settings-row.is-quiet .settings-label { color: var(--ink-soft); }
  .settings-row.is-bin, .settings-row.is-bin .settings-icon { color: var(--c-red); }

  /* Choices in a dialog: a track of segments, the chosen one a raised piece of paper. */
  .segmented { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: 10px; background: var(--desk); margin-block: 0.6rem 0.2rem; }
  .segmented .inline-form { display: contents; }
  .segment { padding: 0.4rem 1rem; border-radius: 8px; font-size: 0.85rem; color: var(--ink-soft); white-space: nowrap; }
  @media (max-width: 60ch) { .segment { padding-inline: 0.6rem; } }
  .segment:hover { color: var(--ink); }
  .segment.is-chosen { background: var(--raised); color: var(--ink); font-weight: 700; box-shadow: 0 1px 2px oklch(var(--lch-shade) / 0.15), 0 0 0 1px var(--rule); }
  .segmented.is-small { margin-block: 0; }
  .segmented.is-small .segment { padding: 0.25rem 0.9rem; font-size: 0.8rem; }
  #appearance > .segmented { display: flex; } #appearance > .segmented .segment { flex: 1; }
  .dialog-setting { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.9rem; margin-block-start: 1.3rem; padding-block-start: 1.1rem; border-block-start: 1px solid var(--rule); }
  .dialog-setting > .field-label { flex: 1 0 auto; }
  .dialog-setting .setting-form { flex: 1 1 100%; }
  .dialog-setting .your-mark { display: inline-flex; }
  .field select { width: 100%; padding: 0.5em 0.7em; border: 1px solid var(--rule); border-radius: 6px; background: var(--paper); font: inherit; font-size: 0.9rem; color: var(--ink); }
  .field select:focus { outline: none; border-color: var(--accent); }
  .binder-dialog .models > .setting-row:first-child, .binder-dialog .models > .setting-rows:first-child > .setting-row:first-child { border-block-start: 0; padding-block-start: 0.2rem; }
  .binder-dialog .models .setting-rows { margin-block-end: 0; }
  .binder-dialog .models .setting-row:last-child { border-block-end: 0; }

  /* Notifications: this device's On and Off, quiet hours as two clock times, the devices told. */
  .push-status { flex: 1 1 100%; margin: 0; font-size: 0.8rem; }
  .quiet-hours { align-items: center; }
  .quiet-time { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; color: var(--ink-soft); }
  .quiet-time input { padding: 0.35em 0.5em; border: 1px solid var(--rule); border-radius: 6px; background: var(--paper); font: inherit; color: var(--ink); }
  .quiet-time input:focus { outline: none; border-color: var(--ink-soft); }
  .dialog-setting .devices { flex: 1 1 100%; margin-block: 0; }

  /* Under a to-do's card or a change waiting for review: who was told about it (notices/_told). */
  .told { margin: 0.3rem 0 0; font-size: 0.78rem; color: var(--ink-soft); }
}

/* The agent door: the approval page's choices and buttons; a key shown once in Settings. */
.approval .field { margin-block-start: 0.9rem; text-align: left; }
.approval-actions { display: flex; gap: 0.6rem; justify-content: center; margin-block-start: 1.2rem; }
.agent-key { margin: 0.6rem 0; padding: 0.6rem 0.8rem; border: 1px solid var(--rule); border-radius: 6px; background: var(--desk); overflow-wrap: anywhere; }
.agent-key code { font-size: 0.9rem; }
.settings-mark { flex: 0 0 auto; }

/* Signing up (2026-10-09, after Basecamp's): one column, the fields on dotted lines, the team's name
   only once With a team is ticked, and a button that says the next step. */
.sign-up h1 { text-align: center; }
.sentence-form { display: grid; gap: 0.9rem; margin-block: 1.4rem 0.6rem; justify-self: stretch; width: 100%; }
.sentence-field { width: 100%; font: inherit; font-size: 1.05rem; color: var(--ink); background: transparent; border: 0; border-block-end: 1px dotted var(--ink-soft);
                  padding: 0.55rem 0.1rem; caret-color: var(--caret); outline: none; }
.sentence-field:focus { border-block-end-style: solid; border-block-end-color: var(--ink); }
.sentence-field::placeholder { color: var(--ink-soft); }
.sentence-check { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; color: var(--ink-soft); }
.sentence-form .welcome-team-name { display: none; }
.sentence-form:has(.sentence-check input:checked) .welcome-team-name { display: block; }
.sentence-next { justify-self: center; margin-block-start: 0.6rem; }
.sentence-form .field-hint { text-align: center; }

/* The recovery code, shown once: large, in the mono face, with Copy and Download beside it. */
.recovery-code { display: grid; gap: 0.7rem; margin-block: 1.2rem; justify-self: stretch; width: 100%; }
.recovery-words { width: 100%; font-family: var(--mono); font-size: 1.35rem; letter-spacing: 0.08em; text-align: center; padding: 0.8rem; border: 1px solid var(--rule);
                  border-radius: 10px; background: var(--paper); color: var(--ink); }
.recovery-words.is-typed { font-size: 1.05rem; text-align: start; text-transform: uppercase; }
.recovery-actions { display: flex; justify-content: center; gap: 0.5rem; }

/* Every usual way in (2026-10-09): Apple and Google as two full-width buttons with their own marks,
   a ruled "or", the email and password on the same dotted lines as signing up, a passkey below. */
.providers { display: grid; gap: 0.6rem; justify-self: stretch; width: 100%; margin-block-start: 0.4rem; }
.providers form { display: block; }
.provider-button { display: flex; align-items: center; justify-content: center; gap: 0.6rem; width: 100%; padding-block: 0.65rem; font-weight: 600; }
.provider-button svg { flex: none; }
.or-rule { display: flex; align-items: center; gap: 0.8rem; justify-self: stretch; margin: 0.2rem 0; font-size: 0.8rem; color: var(--ink-soft); }
.or-rule::before, .or-rule::after { content: ""; flex: 1; border-block-start: 1px solid var(--rule); }
.sentence-form.is-tight { margin-block: 0.2rem; }
.sentence-passkey { justify-self: center; font-size: 0.85rem; color: var(--ink-soft); text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 3px; }
.sentence-passkey:hover { color: var(--ink); }
.field-error { margin: -0.5rem 0 0; font-size: 0.82rem; color: var(--ink); }
.field-error::before { content: "↑ "; color: var(--ink-soft); }
.code-field { font-family: var(--mono); letter-spacing: 0.2em; text-align: center; font-size: 1.3rem; }
.passkey-way { display: grid; gap: 0.4rem; justify-items: center; justify-self: stretch; padding-block-start: 0.6rem; border-block-start: 1px solid var(--rule); }
.two-factor-scan { justify-self: center; padding: 0.8rem; background: var(--scan-ground); border-radius: 10px; border: 1px solid var(--rule); }
.two-factor-qr { display: block; width: 11rem; height: 11rem; }
.two-factor-secret { justify-self: stretch; font-size: 0.85rem; color: var(--ink-soft); }
.two-factor-secret summary { cursor: pointer; }
.dialog-line { margin-block-start: 0.4rem; }
.dialog-setting.is-first { margin-block-start: 0.4rem; padding-block-start: 0; border-block-start: 0; }
.dialog-setting .setting-form input[type=email], .dialog-setting .setting-form input[type=password] { flex: 1 1 12rem; min-width: 0; padding: 0.4em 0.6em; border: 1px solid var(--rule); border-radius: 6px; background: var(--paper); font: inherit; font-size: 0.9rem; color: var(--ink); }
.dialog-setting .setting-form { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.dialog-setting .setting-rows { flex: 1 1 100%; margin-block: 0; }
#passkeys .setting-rows { margin-block-start: 0.3rem; }
#signing-in .setting-name { font-size: 0.85rem; font-weight: 600; }
#signing-in .dialog-setting .setting-row:last-child { border-block-end: 0; }
.sentence-form .field-hint { font-size: 0.82rem; }