/* The sign in sheet and its parts, shared by the account page. Same rules as
   the studio's own (css/studio.css), on the site's tokens. */
:root { --r: 14px; --brand: #ba0c2f; --ground-2: #1c1314; --warn: #ffb4a8; --ground: #120c0d; }
.go { border: 0; border-radius: 99px; background: var(--brand); color: #fff; font: 700 14px/1 var(--display); cursor: pointer; }
.acct-line { margin: 8px 0 18px; color: var(--ink-2); }
/* ---------- the account line, the sheets: sign in, the trade, the limit ---------- */
.acct { margin: 0 0 12px; font-size: 13px; color: var(--ink-2); display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.linkish { background: none; border: 0; padding: 0; color: var(--ink-2); font: 600 13px/1.3 var(--body); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.linkish:hover { color: var(--ink); }
.sheet { margin: 0 0 18px; padding: 18px; border-radius: var(--r); background: var(--ground-2); border: 1px solid var(--line); box-shadow: 0 0 0 1px color-mix(in oklab, var(--brand) 45%, transparent); }
.sheet-title { margin: 0 0 6px; font: 700 18px/1.2 var(--display); }
.sheet-lead { margin: 0 0 12px; color: var(--ink-2); font-size: 14.5px; }
.sheet p { font-size: 14px; color: var(--ink-2); margin: 0 0 10px; }
.sheet a { color: var(--ice); text-underline-offset: 3px; }
.sheet-state { min-height: 1.2em; color: var(--ice) !important; }
.sheet-state.warn { color: var(--warn) !important; }
.sheet form { display: grid; gap: 10px; margin-bottom: 8px; }
.sheet label { display: grid; gap: 6px; font-size: 13px; color: var(--ink-2); }
.sheet input { height: 44px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--ground); color: var(--ink); font: 400 16px/1.2 var(--body); }
.sheet input:focus { outline: none; border-color: var(--ice); }
.go.small { height: 44px; font-size: 14px; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; padding: 0 18px; }
.keeps { margin: 0 0 12px; padding-left: 18px; font-size: 14px; color: var(--ink-2); display: grid; gap: 6px; }
.keeps b { color: var(--ink); }
.born { margin: 6px 0 12px; max-width: 360px; }
.twin { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 8px; }
.limit { display: grid; gap: 8px; justify-items: start; }
.kept { margin: 0; min-height: 1.2em; font-size: 13px; color: var(--ink-2); }