/**

 * Auth gate — self-contained for first paint (before theme/pf-kit load).

 * Blue-Pro fallbacks match themes/default/tokens.css.

 */



:root {

  --color-bg: #0d0f18;

  --color-surface: #13162b;

  --color-text-primary: #e3e3e4;

  --color-text-secondary: #a8acb8;

  --color-text-muted: #7a7f8f;

  --color-border: color-mix(in srgb, white 8%, transparent);

  --color-accent: #5b8dee;

  --color-accent-hover: #7aa4f4;

  --color-accent-muted: color-mix(in srgb, #5b8dee 12%, transparent);

  --color-accent-border: color-mix(in srgb, #5b8dee 22%, transparent);

  --color-on-accent: #e8eefb;

  --color-danger: #f28b82;

  --color-success: #8fd49a;

  --font-sans: 'DM Sans', system-ui, sans-serif;

  --font-display: 'DM Serif Display', Georgia, serif;

  --font-mono: 'DM Mono', ui-monospace, monospace;

  --radius-sm: 2px;

  --radius-md: 2px;

  --pf-shape-radius-segment: 2px;

}



/* [hidden] must win over #auth-gate — otherwise harness preview shows an unwired gate overlay */

#auth-gate[hidden],

#auth-gate.hidden {

  display: none !important;

}



#auth-gate {

  position: fixed;

  inset: 0;

  z-index: 9999;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 1rem;

  background: var(--color-overlay-scrim, color-mix(in srgb, var(--color-bg, #0d0f18) 82%, transparent));

  backdrop-filter: blur(10px);

  -webkit-backdrop-filter: blur(10px);

  font-family: var(--font-sans, system-ui, sans-serif);

  color: var(--color-text-primary, #e3e3e4);

}



.auth-card {

  background: var(--color-surface, #13162b);

  border: 1px solid var(--color-border, color-mix(in srgb, white 8%, transparent));

  border-radius: var(--pf-shape-radius-segment, var(--radius-md, 6px));

  padding: 0;

  width: 100%;

  max-width: 400px;

  overflow: hidden;

  box-shadow: 0 28px 56px color-mix(in srgb, var(--color-bg, #000) 55%, transparent);

  text-align: center;

}



.auth-titlebar {

  display: flex;

  align-items: center;

  gap: 0.5rem;

  margin: 0;

  padding: 0.85rem 1.25rem;

  min-height: 0;

}



.auth-titlebar__icon {

  flex-shrink: 0;

  font-size: 1rem;

  line-height: 1;

  color: var(--color-text-secondary);

}



.auth-titlebar__title,

.auth-card .auth-name {

  margin: 0;

  flex: 1 1 auto;

  min-width: 0;

  text-align: left;

  font-family: var(--font-display, var(--font-sans, system-ui, sans-serif));

  font-size: 1.15rem;

  font-weight: 600;

  color: var(--color-text-primary);

  line-height: 1.2;

}



.auth-titlebar__rule {

  display: block;

  width: 100%;

  height: 1px;

  margin: 0;

  padding: 0;

  border: none;

  background: var(--color-border);

}



.auth-panel {

  padding: 1.1rem 1.25rem 1.35rem;

  text-align: center;

}



.auth-panel[hidden] {

  display: none !important;

}



.auth-card .auth-subtitle {

  font-size: 0.85rem;

  color: var(--color-text-muted, var(--color-text-secondary));

  margin: 0 0 1.1rem;

  line-height: 1.45;

  text-align: left;

}



.auth-card label {

  display: block;

  text-align: left;

  font-family: var(--font-mono, monospace);

  font-size: 0.68rem;

  font-weight: 600;

  letter-spacing: 0.08em;

  text-transform: uppercase;

  color: var(--color-text-muted);

  margin-bottom: 0.35rem;

}



.auth-card label + .auth-input {

  margin-bottom: 0.65rem;

}



.auth-input,

#auth-password {

  width: 100%;

  box-sizing: border-box;

  padding: var(--pf-control-padding-y, 0.5rem) var(--pf-control-padding-x, 0.75rem);

  min-height: var(--pf-control-min-height, 2.25rem);

  border: 1px solid var(--color-border);

  border-radius: var(--pf-shape-radius-segment, var(--radius-sm, 4px));

  font-size: 0.95rem;

  font-family: var(--font-sans, inherit);

  color: var(--color-text-primary);

  background: var(--color-bg, #0d0f18);

  outline: none;

  transition: border-color 0.2s, box-shadow 0.2s;

}



.auth-input--area {

  min-height: 5.5rem;

  resize: vertical;

  line-height: 1.45;

}



.auth-input:focus,

#auth-password:focus {

  border-color: color-mix(in srgb, var(--color-text-muted) 55%, var(--color-border));

  box-shadow: none;

}



.auth-error {

  font-size: 0.8rem;

  color: var(--color-danger, #f28b82);

  min-height: 1.1em;

  margin-top: 0.35rem;

  text-align: left;

}



.auth-status--ok {

  color: var(--color-success, #8fd49a);

}



.auth-actions {

  display: flex;

  gap: 0.45rem;

  margin-top: 0.75rem;

}



.auth-btn {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  flex: 1 1 0;

  min-width: 0;

  padding: 0.7rem 0.85rem;

  min-height: 2.5rem;

  box-sizing: border-box;

  border: 1px solid var(--color-border);

  border-radius: var(--pf-shape-radius-segment, 2px);

  background: color-mix(in srgb, var(--color-surface) 88%, var(--color-bg) 12%);

  color: var(--color-text-primary);

  font-family: var(--font-sans);

  font-weight: 500;

  font-size: 0.88rem;

  line-height: 1.2;

  cursor: pointer;

  transition: background 0.15s ease, border-color 0.15s ease;

  -webkit-appearance: none;

  appearance: none;

}



.auth-btn:hover {

  border-color: color-mix(in srgb, white 16%, transparent);

  background: color-mix(in srgb, var(--color-surface) 96%, var(--color-bg) 4%);

}



.auth-btn--lead {

  border-color: color-mix(in srgb, white 14%, transparent);

  background: color-mix(in srgb, var(--color-surface) 78%, var(--color-bg) 22%);

  font-weight: 600;

}



.auth-btn--lead:hover {

  border-color: color-mix(in srgb, white 20%, transparent);

}



.auth-btn:focus-visible {

  outline: 2px solid color-mix(in srgb, var(--color-text-muted) 70%, var(--color-accent));

  outline-offset: 2px;

}



.auth-btn:disabled {

  opacity: 0.55;

  cursor: not-allowed;

}



#protected-content.hidden {

  display: none;

}



/* Re-lock control — faint footer icon below all page content */

.pf-auth-lock-btn {

  display: block;

  width: fit-content;

  margin: 0 auto;

  padding: 5px 0;

  border: none;

  background: transparent;

  box-shadow: none;

  cursor: pointer;

}



.pf-auth-lock-btn__mark {

  display: block;

  width: 0.78rem;

  height: 0.78rem;

  background: color-mix(in srgb, var(--color-bg, #0d0f18) 90%, white 10%);

  opacity: 0.5;

  pointer-events: none;

  transition: opacity 0.15s ease, background 0.15s ease;

}



.pf-auth-lock-btn:hover .pf-auth-lock-btn__mark {

  opacity: 0.72;

  background: color-mix(in srgb, var(--color-bg, #0d0f18) 84%, white 16%);

}



.pf-auth-lock-btn:focus-visible {

  outline: 1px solid color-mix(in srgb, var(--color-bg, #0d0f18) 55%, white 45%);

  outline-offset: 3px;

}



.pf-auth-lock-btn:focus-visible .pf-auth-lock-btn__mark {

  opacity: 0.85;

}



.pf-auth-lock-btn[hidden] {

  display: none !important;

}



@media (max-width: 440px) {

  .auth-panel {

    padding: 1rem 1rem 1.2rem;

  }



}