/* Poshword gate: a table (Off-White, or black in dark mode), the wordmark, the entry and the gradient icons drifting like snooker balls */
@font-face { font-family: 'Roobert'; src: url('/assets/fonts/Roobert-Regular.otf') format('opentype'); font-weight: 400 500; font-display: swap; }
@font-face { font-family: 'Roobert Mono'; src: url('/assets/fonts/RoobertMono-Medium.otf') format('opentype'); font-weight: 400 500; font-display: swap; }

:root { --black: #232222; --off-white: #FFFCF8; --cream: #F1ECE4; --yellow: #FFBD00; --berry: #FFB1B4;
  /* light (default): Off-White table, black type */
  --bg: var(--off-white); --fg: var(--black); --fg-rgb: 35, 34, 34; --error: #8C003A; color-scheme: light; }
/* dark: the black table */
[data-theme="dark"] { --bg: var(--black); --fg: var(--off-white); --fg-rgb: 255, 252, 248; --error: var(--berry); color-scheme: dark; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--fg); overflow: hidden; transition: background .6s, color .6s; }
body { font-family: 'Roobert', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }

.table { position: fixed; inset: 0; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; }
.corner { position: absolute; margin: 0; font: 500 12px/1 'Roobert Mono', ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--fg); opacity: .5; pointer-events: none; }
.corner--tl { top: max(20px, env(safe-area-inset-top)); left: 24px; }
.corner--bl { bottom: max(20px, env(safe-area-inset-bottom)); left: 24px; }

/* everything on the table is placed by gate.js */
.body { position: absolute; left: 0; top: 0; transform: translate3d(-9999px, 0, 0); will-change: transform; }
.logo { height: auto; pointer-events: none; -webkit-user-drag: none; }
.icon { cursor: grab; -webkit-user-drag: none; touch-action: none; }
.is-grabbed { cursor: grabbing; z-index: 3; }

.entry { margin: 0; z-index: 2; }
.entry-box { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 22px; border-radius: 999px; background: rgba(var(--fg-rgb), .05);
  box-shadow: inset 0 0 0 1px rgba(var(--fg-rgb), .22); transition: box-shadow .2s, background .2s; cursor: text; }
.entry-box:focus-within { background: rgba(var(--fg-rgb), .08); box-shadow: inset 0 0 0 1.5px var(--fg); }
.entry input { flex: 1; min-width: 0; padding: 12px 0; border: 0; outline: 0; background: none; font: 400 17px/1.2 'Roobert', system-ui, sans-serif; color: var(--fg); user-select: text; -webkit-user-select: text; }
.entry input::placeholder { color: rgba(var(--fg-rgb), .55); }
.entry-box button { flex: none; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--fg); color: var(--bg); cursor: pointer; transition: transform .15s; }
.entry-box button:hover { transform: scale(1.06); }
.arrow { width: 18px; height: 18px; background: currentColor;
  -webkit-mask: url('/code/img/line-icons/back-right.png') center / contain no-repeat; mask: url('/code/img/line-icons/back-right.png') center / contain no-repeat; }
.entry-msg { position: absolute; left: 4px; right: 0; top: calc(100% + 12px); margin: 0; font-size: 14px; line-height: 1.3; color: rgba(var(--fg-rgb), .7); pointer-events: none; }
.entry-msg.is-error { color: var(--error); }
.entry.shake .entry-box { animation: shake .45s; }
@keyframes shake { 20%, 60% { transform: translateX(-10px); } 40%, 80% { transform: translateX(10px); } }
.entry.is-open .entry-box { box-shadow: inset 0 0 0 1.5px var(--yellow); }

.table.is-leaving { transition: opacity .6s ease .5s; opacity: 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }
.entry input:focus-visible { outline: none; }

/* lets gate.js notice when the browser autofills a saved Poshword */
@keyframes autofilled { from { opacity: 1; } to { opacity: 1; } }
.entry input:-webkit-autofill { animation: autofilled .01s; -webkit-text-fill-color: var(--fg); transition: background-color 9999s; }

/* Acknowledgment: a promise to judge it as a work in progress */
.ack { display: flex; align-items: flex-start; gap: 12px; margin: 16px 4px 0; cursor: pointer; user-select: none; -webkit-user-select: none; }
.ack input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ack-box { flex: none; position: relative; width: 20px; height: 20px; margin-top: 1px; border-radius: 6px; box-shadow: inset 0 0 0 1.5px rgba(var(--fg-rgb), .45); transition: background .15s, box-shadow .15s; }
.ack:hover .ack-box { box-shadow: inset 0 0 0 1.5px var(--fg); }
.ack input:focus-visible + .ack-box { outline: 2px solid var(--fg); outline-offset: 3px; }
.ack input:checked + .ack-box { background: var(--yellow); box-shadow: none; }
.ack input:checked + .ack-box::after { content: ''; position: absolute; left: 7px; top: 3px; width: 5px; height: 10px; border: solid var(--black); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.ack-text { font-size: 14px; line-height: 1.4; color: rgba(var(--fg-rgb), .72); }
.ack.shake { animation: shake .45s; }
.ack.shake .ack-box { box-shadow: inset 0 0 0 1.5px var(--error); }

/* Light / dark switch, right of the Poshword field: the same moon and sun as the guidelines' top bar */
.entry-row { display: flex; align-items: center; gap: 10px; }
.entry-row .entry-box { flex: 1; min-width: 0; }
.theme-btn { flex: none; display: grid; place-items: center; width: 58px; height: 58px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(var(--fg-rgb), .05); box-shadow: inset 0 0 0 1px rgba(var(--fg-rgb), .22); color: var(--fg); transition: background .2s, box-shadow .2s; }
.theme-btn:hover { background: rgba(var(--fg-rgb), .1); box-shadow: inset 0 0 0 1px rgba(var(--fg-rgb), .45); }
.theme-btn svg { width: 22px; height: 22px; }
.theme-btn .t-sun, [data-theme="dark"] .theme-btn .t-moon { display: none; }
[data-theme="dark"] .theme-btn .t-sun { display: block; }
/* the theme demo cross-fades the field, the switch and the promise along with the table */
.entry-box, .theme-btn, .entry-box button, .ack-box, .ack-text, .corner { transition: background .6s, color .6s, box-shadow .6s; }