/*
 * THE SESSIONS' OWN SHAPES. docs/golive/31-the-gate.md.
 *
 * "Keep me signed in on this device" and the period it offers, the devices
 * that stay signed in, and the lock screen. On all three surfaces, so every
 * value is one of that surface's own tokens. A sheet of its own because
 * admin.css, storefront.css and platform.css were each within bytes of their
 * caps, and only the sign-in, account and lock pages need any of this.
 */

/* Keep me signed in, and how long once it is ticked. */
.keep-signed-in { display: grid; gap: var(--space-2); }
.keep-period { border: 0; margin: 0; padding: 0; padding-inline-start: var(--space-6); min-width: 0; }
.keep-period legend { padding: 0; margin-bottom: var(--space-2); }
.keep-period-options { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
.keep-signed-in:not(:has(input[name="remember"]:checked)) .keep-period { display: none; }
/* Each surface's own accent, as its .field boxes already use. */
.keep-signed-in input { accent-color: var(--primary, var(--gold)); }
body.admin .keep-signed-in input { accent-color: var(--accent); }

/* The devices that stay signed in. */
.trusted-devices .device-list { list-style: none; margin: 0 0 var(--space-4); padding: 0; display: grid; }
.trusted-devices .device-row { display: grid; gap: var(--space-2); padding: var(--space-3) 0; border-top: 1px solid var(--border); }
.trusted-devices .device-row:last-child { border-bottom: 1px solid var(--border); }
.trusted-devices .device-row p { margin: 0; }
.trusted-devices .device-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); }
.trusted-devices .device-here { font-size: .8rem; font-weight: 600; padding: .05rem var(--space-2); border-radius: var(--radius-pill, 999px); background: var(--surface-2); }
.trusted-devices .device-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
.trusted-devices .device-actions form { margin: 0; }
.trusted-devices .device-periods { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0; }
/* Beside its label, never under it: ".muted + .button" is the gap for a
   button that follows a sentence, not for one in a row. */
.trusted-devices .device-periods .button { margin-top: 0; }
.trusted-devices .device-everywhere { margin-top: var(--space-4); display: grid; gap: var(--space-2); justify-items: start; }
.trusted-devices .device-everywhere p { margin: 0; }

/* The lock screen. The admins' card is .login-card; the shop's is the
   customer sign-in's .auth-card, standing on its own like the maintenance
   page, with nothing of the panel behind it. */
.lock-screen { min-height: 100vh; display: grid; place-items: center; padding: var(--space-7) var(--space-4); }
.lock-screen .auth-card { width: 100%; max-width: 26rem; }
.lock-mark { width: auto; height: auto; max-width: 9rem; max-height: 3rem; display: block; margin-bottom: var(--space-4); }
.lock-password { margin-top: var(--space-2); }
.lock-kept { margin: var(--space-4) 0 0; }
.lock-leave { margin-top: var(--space-2); }
.lock-leave p { margin: 0; }
.lock-leave .link-button { padding: 0; border: 0; border-bottom: 1px solid currentColor; background: none; font: inherit; font-weight: 600; color: var(--accent, var(--primary)); cursor: pointer; }