/* The Settings screen (D2 Task 27), from Settings.dc.html (approved 05/11), Invite.dc.html and Company.dc.html (approved 07/11). Every
   colour is a token: the mailbox icon is the brand tint, its state the pass / fail / info chip, the avatars the one neutral sky tint
   (people are not a stage of the work), "This device" the brand tint, a person with no passkey the unknown ink, one waiting for their
   first sign-in the missing ink, an error line the declined ink. The boards' muted grey (#6A717D) has no token: it is --ink-3.
   The card, the buttons, the fields and the switch are components.css; motion is the base sheet's to turn off. The cards rise once, on
   the first draw; a redraw after a press (stStill) does not make them rise again. Listed in STYLESHEETS (src/web/routes-pages.js),
   after rules.css. */

.stRoot { padding: 28px 32px 64px; }
.stWrap { display: flex; flex-direction: column; gap: 16px; max-width: 1080px; margin: 0 auto; }
.stWrap h1 { margin: 0; font: 600 26px var(--font-head); letter-spacing: -0.015em; }
.stCard h2 { margin: 0; font: 600 17px var(--font-head); }
.stCard { display: flex; flex-direction: column; }
.stCard[data-st-card="mailbox"], .stCard[data-st-card="summary"] { animation-delay: .05s; }
.stCard[data-st-card="team"] { animation-delay: .1s; }
.stCard[data-st-card="passkeys"] { animation-delay: .15s; }
.stStill .card { animation: none; }

/* ---- Shared lines ---- */
.stGrow { flex: 1 1 auto; min-width: 0; }
.stStrong { font-weight: 600; }
.stEllipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stMuted { color: var(--ink-3); font-size: 13px; }
.stPad { padding: 0 20px 14px; }
.stInfo { display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px; border: 1px solid var(--brand-tint); border-radius: var(--r-lg); background: var(--brand-soft); color: var(--ink-2); font-size: 13.5px; }
.stInfoIcon { flex: none; margin-top: 2px; color: var(--brand); }
.stFailed { border-color: var(--fail-bg); background: var(--fail-bg); color: var(--fail-ink); }
.stFailed .stInfoIcon { color: var(--fail-ink); }

/* ---- Mailbox and Deal summary, side by side ---- */
.stPair { display: flex; flex-wrap: wrap; gap: 16px; align-items: stretch; }
.stHalf { flex: 1 1 380px; min-width: 0; gap: 14px; padding: 20px; }
/* The icon, the address with its line, and the state chip; on a phone the chip goes under the address, which keeps the card's width. */
.stBox { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 8px 12px; }
.stBoxIcon { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--brand-soft), var(--brand-tint)); color: var(--brand); box-shadow: var(--sh-inset-hi); }
.stState { gap: 6px; }
.stDot { width: 6px; height: 6px; border-radius: var(--r-pill); background: currentColor; }
.chip.pass .stDot { background: var(--ok-dot); }
.stChecked { color: var(--ink-2); font-size: 13px; }
.stActions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.stSwitchRow { display: flex; align-items: center; gap: 10px; }
.stSwitchRow .sw input:disabled { cursor: not-allowed; }
.stField { display: flex; flex-direction: column; gap: 6px; }
.stLabel { color: var(--ink-2); font-size: 13px; font-weight: 500; }
.stLabelSoft { color: var(--ink-3); font-weight: 400; }
.stFoot { margin-top: auto; }

/* ---- A one-time link ---- */
.stLink { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--line-soft); border-radius: var(--r-lg); background: var(--surface-3); }
.stLinkText { font-size: 13px; }
.stLinkActions { display: flex; flex-wrap: wrap; gap: 8px; }
.stNote { color: var(--ink-3); font-size: 12.5px; }
.stExpired { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; color: var(--ink-2); font-size: 13px; }
.stOnly { font-size: 12.5px; }

/* ---- Team ---- */
.stHead { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 18px 20px 12px; }
.stHead .stGrow { flex: 1 1 260px; }
.stScroll { overflow-x: auto; }
.stTable { min-width: 620px; }
.stMember { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.3fr) minmax(0, 1.5fr) 184px; gap: 16px; align-items: center; padding: 10px 20px;
  border-top: 1px solid var(--line-soft); transition: background var(--t-hover); }
.stMember:hover, .stDevice:hover { background: var(--surface-2); }
.stWho { display: flex; align-items: center; gap: 10px; min-width: 0; }
.stAva { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--r-pill);
  background: var(--status-sky-bg); color: var(--status-sky-ink); font: 600 12.5px var(--font-head); }
.stRole { max-width: 200px; height: 40px; padding: 0 10px; }
.stRoleText { display: inline-flex; align-items: center; min-height: 40px; padding: 0 12px; font-weight: 600; }
.stStatus { font-size: 13px; color: var(--ink-3); }
.stTone-unknown { color: var(--unknown-ink); }
.stTone-pending { color: var(--status-missing-ink); }
.stHead .btn { gap: 8px; }
.stRowEnd { display: flex; justify-content: flex-end; gap: 8px; }
.stLegend { display: flex; flex-wrap: wrap; gap: 10px; padding: 14px 20px 18px; border-top: 1px solid var(--line-soft); }
.stLegendItem { flex: 1 1 160px; min-width: 0; padding: 10px 12px; border-radius: var(--r-md); background: var(--surface-3); }
.stLegendKey { font-size: 13px; font-weight: 600; }
.stLegendText { color: var(--ink-3); font-size: 12.5px; }

/* ---- Your passkeys and devices ---- */
.stDevice { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 10px 20px; border-top: 1px solid var(--line-soft); transition: background var(--t-hover); }
.stDevice .stGrow { flex: 1 1 260px; }
.stDeviceIcon { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--r-md); background: var(--seg-track); color: var(--ink-2); }
.stDeviceName { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.stHere { padding: 1px 8px; border-radius: var(--r-pill); background: var(--brand-tint); color: var(--brand); font-size: var(--fs-xs); font-weight: 600; }

/* ---- Company: the name, the logo and How it looks ---- */
.coCard { gap: 18px; padding: 20px; }
.coCols { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.coMain { flex: 3 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.coSide { flex: 2 1 280px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.coNameHead { display: flex; align-items: baseline; gap: 8px; }
.coCount { color: var(--ink-3); font-size: 12px; font-variant-numeric: tabular-nums; }
.coNameRow { display: flex; flex-wrap: wrap; gap: 8px; }
.coName { flex: 1 1 260px; min-width: 0; }
.coClear { align-self: flex-start; min-height: 44px; padding: 0; border: 0; background: transparent; color: var(--ink-3); font: 500 13.5px var(--font-body); cursor: pointer; }
.coClear:hover { color: var(--ink); }
.coDrop { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 26px 20px; border: 1.5px dashed var(--line); border-radius: var(--r-xl);
  background: var(--surface-3); text-align: center; transition: border-color var(--t-hover), background var(--t-hover); }
.coDropOn { border-color: var(--brand-line); background: var(--brand-soft); }
.coDropIcon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--r-lg); background: var(--brand-soft); color: var(--brand); }
.coDropTitle { font: 600 16px var(--font-head); }
.coPick { position: relative; display: inline-flex; align-items: center; cursor: pointer; }
.coDrop .coPick { margin-top: 4px; }
/* The file input is inside its label, out of sight; the label is the button, and a focused input lights it. */
.coFile { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.coPick:focus-within { outline: 2px solid var(--brand); outline-offset: 2px; }
.coLogo { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; padding: 12px 14px; border: 1px solid var(--hair-2); border-radius: var(--r-xl); background: var(--bg); }
.coLogoImg { flex: none; width: 56px; height: 56px; border: 1px solid var(--hair-2); border-radius: var(--r-xl); background: var(--surface); object-fit: contain; }
.coLogoText { flex: 1 1 180px; min-width: 0; }
.coError { color: var(--status-declined-ink); font-size: 13px; }
.coPreview { display: flex; flex-direction: column; gap: 14px; padding: 18px; border-radius: var(--r-xl); background: var(--bg); }
.coSignin { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 20px 16px 16px; border-radius: var(--r-3xl); background: var(--surface);
  box-shadow: var(--sh-card); text-align: center; }
.coSigninLogo { width: 44px; height: 44px; border: 1px solid var(--hair-2); border-radius: var(--r-lg); background: var(--surface); object-fit: contain; }
.coSigninBlank { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; box-sizing: border-box; border: 1.5px dashed var(--ink-5);
  border-radius: var(--r-lg); background: var(--surface); color: var(--ink-logo); }
.coSigninName { font: 600 15px var(--font-head); letter-spacing: 0.01em; overflow-wrap: anywhere; }
.coSigninTitle { margin-top: 4px; font: 600 17px var(--font-head); }
.coSigninBtn { display: flex; align-items: center; justify-content: center; width: 100%; height: 36px; border-radius: var(--r-md); background: var(--brand); color: var(--surface);
  font: 600 13px var(--font-body); }
.coPreviewNote { color: var(--ink-3); font-size: 12.5px; text-align: center; }

/* ---- Invite a person (a <dialog>: components.css .dialog) ---- */
.invDialog { width: min(460px, calc(100vw - 32px)); padding: 28px 28px 22px; }
.invStep { display: flex; flex-direction: column; gap: 16px; }
.invTitle { margin: 0; font: 600 22px var(--font-head); letter-spacing: -0.015em; }
.invTitleSm { margin: 0; font: 600 20px var(--font-head); letter-spacing: -0.01em; }
.invLead { margin: 4px 0 0; color: var(--ink-3); font-size: 14px; }
.invField { display: flex; flex-direction: column; gap: 6px; }
.invField .fld { width: 100%; }
.invError { color: var(--status-declined-ink); font-size: 13px; }
/* After the person was made and their link was not: the name and role are fixed, and this line says so (review N-3). */
.invMade { padding: 10px 12px; border-radius: var(--r-lg); background: var(--surface-3); color: var(--ink-2); font-size: 13px; }
.invField .fld[readonly], .invField .fld:disabled { background: var(--field-off); }
.invActions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.invCancel { min-height: 44px; padding: 0 12px; border: 0; background: transparent; color: var(--ink-3); font: 500 14px var(--font-body); cursor: pointer; }
.invCancel:hover { color: var(--ink); }
.invMaking { align-items: center; gap: 14px; padding: 18px 0; text-align: center; }
.invSpin { width: 28px; height: 28px; box-sizing: border-box; border: 3px solid var(--brand-tint); border-top-color: var(--brand); border-radius: var(--r-pill); animation: spin .8s linear infinite; }
.invDone { display: flex; align-items: center; gap: 12px; }
.invDoneIcon { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--r-lg);
  background: var(--status-ready-bg); color: var(--status-ready-ink); }
.invLinkRow { display: flex; gap: 8px; }
.invLinkText { flex: 1; min-width: 0; font-size: 13.5px; }
.invLinkRow .btn { gap: 8px; white-space: nowrap; }
.invNotes { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: var(--r-lg); background: var(--surface-3); color: var(--ink-2); font-size: 13.5px; }
.invLine { display: flex; gap: 10px; }
.invLineIcon { flex: none; margin-top: 2px; }
.invEnd { display: flex; justify-content: flex-end; }

@media (max-width: 600px) {
  .stRoot { padding: 20px 16px 48px; }
  .stBox { grid-template-columns: 40px minmax(0, 1fr); }
  .stBox .stState { grid-column: 2; justify-self: start; }
  .stBox .stEllipsis { white-space: normal; overflow-wrap: anywhere; }
  .invDialog { padding: 22px 18px 18px; }
  .invLinkRow { flex-wrap: wrap; }
  .invLinkText { flex: 1 1 100%; }
  .invLinkRow .btn { flex: 1 1 auto; justify-content: center; }
}