/* Login host pages (src/login/pages.ts). The tokens mirror the console's (web/src/lib/styles/tokens.css: Podium admin tokens with
   the indigo accent); light and dark follow the system. No web font: the login CSP has no font-src, so Pretendard is used only
   where it is installed and the system's Korean face otherwise. Everything here must work without login.js. */

:root {
  color-scheme: light dark;
  --font-sans: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, 'Apple SD Gothic Neo',
    'Malgun Gothic', 'Noto Sans KR', sans-serif;

  --bg: #F5F5F7;
  --bg-elevated: #FFFFFF;
  --fill-1: rgba(118, 118, 128, 0.18);
  --fill-2: rgba(118, 118, 128, 0.12);
  --fill-3: rgba(118, 118, 128, 0.07);
  --separator: rgba(60, 60, 67, 0.14);
  --separator-strong: rgba(60, 60, 67, 0.26);
  --label: #1D1D1F;
  --label-2: #57575C;
  --label-3: #6E6E73;
  --label-on-accent: #FFFFFF;

  --accent: #4338CA;
  --accent-fill: #4F46E5;
  --accent-fill-hover: #4338CA;
  --accent-fill-pressed: #3730A3;
  --accent-tint: rgba(79, 70, 229, 0.1);
  --border-focus: #4F46E5;

  --green-text: #1E7D3C;
  --green-tint: rgba(48, 184, 88, 0.14);
  --orange-text: #B45309;
  --orange-tint: rgba(245, 158, 11, 0.16);
  --red-text: #C4271D;
  --red-tint: rgba(240, 68, 56, 0.12);

  --shadow-pass: 0 1px 2px rgba(0, 0, 0, 0.04), 0 12px 32px rgba(0, 0, 0, 0.06), 0 0 0 0.5px rgba(0, 0, 0, 0.07);

  /* Google's sign-in button, light theme (developers.google.com/identity/branding-guidelines). */
  --g-fill: #FFFFFF;
  --g-stroke: #747775;
  --g-text: #1F1F1F;
  --g-state: #303030;
  --g-disabled-fill: rgba(255, 255, 255, 0.38);
  --g-disabled-stroke: rgba(31, 31, 31, 0.12);

  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-press: 100ms;
  --dur-fast: 150ms;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #111113;
    --bg-elevated: #1C1C1F;
    --fill-1: rgba(120, 120, 128, 0.36);
    --fill-2: rgba(120, 120, 128, 0.24);
    --fill-3: rgba(120, 120, 128, 0.14);
    --separator: rgba(84, 84, 88, 0.55);
    --separator-strong: rgba(110, 110, 116, 0.75);
    --label: #F5F5F7;
    --label-2: #C7C7CC;
    --label-3: #98989D;

    --accent: #A5B4FC;
    --accent-fill: #5850EC;
    --accent-fill-hover: #6158EE;
    --accent-fill-pressed: #4F46E5;
    --accent-tint: rgba(165, 180, 252, 0.14);
    --border-focus: #A5B4FC;

    --green-text: #4ADE80;
    --green-tint: rgba(50, 215, 75, 0.16);
    --orange-text: #FDBA74;
    --orange-tint: rgba(255, 159, 10, 0.16);
    --red-text: #FF8A80;
    --red-tint: rgba(255, 69, 58, 0.16);

    --shadow-pass: 0 12px 32px rgba(0, 0, 0, 0.45), 0 0 0 0.5px rgba(255, 255, 255, 0.09);

    /* Google's dark theme. */
    --g-fill: #131314;
    --g-stroke: #8E918F;
    --g-text: #E3E3E3;
    --g-state: #E3E3E3;
    --g-disabled-fill: rgba(19, 19, 20, 0.38);
    --g-disabled-stroke: rgba(142, 145, 143, 0.12);
  }
}

/* ---- base ---- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--label);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.6;
  word-break: keep-all;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}

:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---- stage: one pass, a little above the optical centre ---- */

.stage {
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: max(20px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom))
    max(16px, env(safe-area-inset-left));
}

@media (min-height: 720px) {
  .stage {
    padding-bottom: max(8vh, env(safe-area-inset-bottom));
  }
}

.pass {
  width: 100%;
  max-width: 408px;
  padding: 24px 20px 22px;
  border-radius: var(--r-xl);
  background: var(--bg-elevated);
  box-shadow: var(--shadow-pass);
}

@media (min-width: 480px) {
  .pass {
    padding: 32px 36px 30px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .pass {
    animation: pass-in 240ms var(--ease-out) both;
  }
}

@keyframes pass-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

/* ---- brand, state, heading ---- */

.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 28px;
  color: var(--label-2);
  font-size: 13px;
  font-weight: 600;
  line-height: 18px;
  letter-spacing: -0.01em;
}

.brand-mark {
  flex: none;
  width: 24px;
  height: 24px;
  color: var(--accent-fill);
}

.status {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 16px;
  border-radius: var(--r-lg);
}

.status svg {
  width: 24px;
  height: 24px;
}

.status-accent {
  background: var(--accent-tint);
  color: var(--accent);
}

.status-green {
  background: var(--green-tint);
  color: var(--green-text);
}

.status-orange {
  background: var(--orange-tint);
  color: var(--orange-text);
}

.status-red {
  background: var(--red-tint);
  color: var(--red-text);
}

.title {
  margin: 0;
  font-size: 23px;
  font-weight: 700;
  line-height: 31px;
  letter-spacing: -0.022em;
  text-wrap: balance;
}

@media (min-width: 480px) {
  .title {
    font-size: 26px;
    line-height: 34px;
  }
}

.lead {
  margin: 8px 0 0;
  color: var(--label-2);
  font-size: 15px;
  line-height: 24px;
  text-wrap: balance;
}

.note {
  margin: 18px 0 0;
  color: var(--label-3);
  font-size: 13px;
  line-height: 20px;
  text-wrap: pretty;
}

/* ---- notices and the account ---- */

.notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 20px 0 0;
  padding: 12px 14px;
  border-radius: var(--r-md);
  background: var(--fill-3);
  font-size: 14px;
  line-height: 21px;
  text-wrap: balance;
}

.notice svg {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 1.5px;
  color: var(--label-3);
}

.notice-red {
  background: var(--red-tint);
}

.notice-red svg {
  color: var(--red-text);
}

.notice-orange {
  background: var(--orange-tint);
}

.notice-orange svg {
  color: var(--orange-text);
}

.account {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 22px 0 0;
  padding: 12px 14px;
  border: 1px solid var(--separator);
  border-radius: var(--r-lg);
}

.avatar {
  display: grid;
  flex: none;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--accent-tint);
  color: var(--accent);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
}

.account-text {
  display: grid;
  min-width: 0;
}

.account-label {
  color: var(--label-3);
  font-size: 12px;
  line-height: 16px;
}

.account-name {
  font-size: 15px;
  font-weight: 600;
  line-height: 21px;
}

.account-email {
  font-size: 14px;
  line-height: 20px;
  overflow-wrap: anywhere;
}

.account-name + .account-email {
  color: var(--label-2);
}

.account-label + .account-email {
  font-weight: 600;
}

/* ---- actions ---- */

.actions {
  display: grid;
  gap: 10px;
  margin-top: 24px;
}

.action-form {
  display: grid;
  margin: 0;
}

.button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 48px;
  padding: 12px 20px;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 22px;
  letter-spacing: -0.005em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  transition:
    background-color var(--dur-fast) ease,
    transform var(--dur-press) var(--ease-out);
}

.button-filled {
  background: var(--accent-fill);
  color: var(--label-on-accent);
}

.button-gray {
  background: var(--fill-2);
  color: var(--label);
}

@media (hover: hover) and (pointer: fine) {
  .button-filled:hover {
    background: var(--accent-fill-hover);
  }

  .button-gray:hover {
    background: var(--fill-1);
  }
}

.button:active {
  transform: scale(0.98);
}

.button-filled:active {
  background: var(--accent-fill-pressed);
}

/* Google's button: neutral fill, stroke, the unaltered G, a state layer for hover and press; pill shape. */
.gbutton {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  min-height: 48px;
  padding: 0 20px;
  overflow: hidden;
  border: 1px solid var(--g-stroke);
  border-radius: 999px;
  background: var(--g-fill);
  color: var(--g-text);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 22px;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  transition:
    box-shadow 0.218s ease,
    transform var(--dur-press) var(--ease-out);
}

.gbutton::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--g-state);
  opacity: 0;
  transition: opacity 0.218s ease;
}

.gbutton > * {
  position: relative;
}

.g-mark {
  flex: none;
  width: 20px;
  height: 20px;
}

@media (hover: hover) and (pointer: fine) {
  .gbutton:not(:disabled):hover {
    box-shadow:
      0 1px 2px rgba(60, 64, 67, 0.3),
      0 1px 3px 1px rgba(60, 64, 67, 0.15);
  }

  .gbutton:not(:disabled):hover::before {
    opacity: 0.08;
  }
}

.gbutton:not(:disabled):active {
  transform: scale(0.98);
}

.gbutton:not(:disabled):active::before,
.gbutton:focus-visible::before {
  opacity: 0.12;
}

.gbutton:focus-visible {
  outline-offset: 3px;
}

.gbutton:disabled {
  border-color: var(--g-disabled-stroke);
  background: var(--g-disabled-fill);
  cursor: default;
}

.gbutton:disabled > * {
  opacity: 0.38;
}

.link {
  border-radius: 4px;
  color: var(--accent);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  transition: text-decoration-color var(--dur-fast) ease;
}

.link:hover {
  text-decoration-color: currentColor;
}

/* ---- fields ---- */

.request {
  margin: 0;
}

.field {
  display: grid;
  gap: 6px;
  margin-top: 22px;
}

.field-label {
  color: var(--label-2);
  font-size: 13px;
  font-weight: 600;
  line-height: 18px;
}

.field-optional {
  color: var(--label-3);
  font-weight: 500;
}

.field-hint {
  margin: 0;
  color: var(--label-3);
  font-size: 12px;
  line-height: 18px;
}

.input,
.textarea {
  width: 100%;
  min-width: 0;
  padding: 11px 14px;
  border: 1px solid var(--separator-strong);
  border-radius: var(--r-md);
  background: var(--bg-elevated);
  color: var(--label);
  /* 16 px keeps iOS from zooming into a focused field. */
  font: inherit;
  font-size: 16px;
  line-height: 24px;
}

.input:focus-visible,
.textarea:focus-visible {
  border-color: var(--border-focus);
  outline: 1px solid var(--border-focus);
  outline-offset: 0;
}

.input[readonly] {
  background: var(--fill-3);
  color: var(--label-2);
  text-overflow: ellipsis;
}

.textarea {
  display: block;
  min-height: 96px;
  resize: vertical;
}

.textarea::placeholder {
  color: var(--label-3);
  opacity: 1;
}

.copy-row {
  display: flex;
  gap: 8px;
}

.copy-row .input {
  flex: 1;
}

.copy-button {
  flex: none;
  width: auto;
  min-width: 104px;
  padding: 12px 16px;
}

/* ---- logging out: the frames wait at most 3 s, and the bar says so ---- */

.progress {
  position: relative;
  height: 4px;
  margin-top: 24px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--fill-2);
}

.progress::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--accent-fill);
  transform-origin: left center;
  animation: progress 3s linear both;
}

@keyframes progress {
  from {
    transform: scaleX(0.04);
  }

  to {
    transform: scaleX(1);
  }
}

/* ---- the desktop hand-off: the window's code and wait, the browser's choice ---- */

.button svg {
  flex: none;
  width: 18px;
  height: 18px;
}

.handoff-code {
  margin: 22px 0 0;
  padding: 14px 14px 16px;
  border: 1px solid var(--separator);
  border-radius: var(--r-lg);
  text-align: center;
}

.handoff-code-label {
  margin: 0;
  color: var(--label-3);
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
}

.handoff-code-value {
  margin: 4px 0 0;
  font-size: 34px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 42px;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.waiting {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 18px 0 0;
  color: var(--label-2);
  font-size: 14px;
  line-height: 21px;
  text-wrap: pretty;
}

.waiting::before {
  content: '';
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-fill);
  transform: translateY(-1px);
}

@media (prefers-reduced-motion: no-preference) {
  .waiting::before {
    animation: waiting 1.6s ease-in-out infinite;
  }
}

@keyframes waiting {
  50% {
    opacity: 0.3;
  }
}

.more {
  margin: 10px 0 0;
}

.more-summary {
  width: fit-content;
  border-radius: 4px;
  color: var(--label-2);
  font-size: 14px;
  font-weight: 600;
  line-height: 44px;
  cursor: pointer;
}

.more .field {
  margin-top: 4px;
}

.choices {
  min-width: 0;
  margin: 22px 0 0;
  padding: 0;
  border: 0;
}

.choices-legend {
  padding: 0;
  color: var(--label-2);
  font-size: 13px;
  font-weight: 600;
  line-height: 18px;
}

.choices-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 8px;
}

.choice {
  position: relative;
  display: block;
  min-width: 0;
}

/* The radio covers its box, invisible: it takes the clicks and the focus, the box shows its state. */
.choice-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.choice-code {
  display: grid;
  place-items: center;
  min-height: 52px;
  padding: 0 4px;
  border: 1px solid var(--separator-strong);
  border-radius: var(--r-md);
  background: var(--bg-elevated);
  color: var(--label);
  font-size: 17px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 24px;
  letter-spacing: 0.03em;
  white-space: nowrap;
  transition:
    background-color var(--dur-fast) ease,
    border-color var(--dur-fast) ease;
}

@media (hover: hover) and (pointer: fine) {
  .choice-input:not(:checked):hover + .choice-code {
    background: var(--fill-3);
  }
}

.choice-input:checked + .choice-code {
  border-color: var(--accent-fill);
  background: var(--accent-tint);
  box-shadow: inset 0 0 0 1px var(--accent-fill);
  color: var(--accent);
}

.choice-input:focus-visible + .choice-code {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}

/* ---- high contrast ---- */

@media (forced-colors: active) {
  .button,
  .gbutton,
  .account,
  .notice,
  .status,
  .handoff-code,
  .choice-code {
    border: 1px solid CanvasText;
  }

  .choice-input:checked + .choice-code {
    border: 3px solid Highlight;
  }

  .progress::after,
  .waiting::before {
    background: Highlight;
  }
}