/* ==========================================================================
   JSG Portfolio - forms, auth state and the gated-work treatment

   Field proportions follow Carbon's 48px text input, which is what the React
   app used: 12px helper label, 40px control, 1px bottom rule that thickens to
   the focus colour. Colour comes entirely from tokens.css, so both themes and
   the toggle work without a second rule here.
   ========================================================================== */

/* --- Visibility -----------------------------------------------------------
   Everything that appears and disappears here - the two auth branches, the
   submit/loading swap, field errors, status messages - is driven by the
   `hidden` property, set from JS.

   This rule is what makes that work. The UA stylesheet's `[hidden]` is a plain
   `display: none`, so any class that sets `display` outranks it: without the
   `!important` below, `.jsg-btn { display: inline-flex }` would keep a hidden
   button on screen. One rule, applied once, rather than a `display: none` per
   component.

   It is also the no-JS floor. Signed-in-only elements ship with `hidden` in
   the markup and only JS removes it, so if the script never runs they stay
   hidden rather than being exposed. */

[hidden] { display: none !important; }

/* --- Form shell ----------------------------------------------------------- */

.jsg-form {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 480px;
}

.jsg-form--wide { max-width: 640px; }

.jsg-form__body {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.jsg-form__rule {
  border: 0;
  border-top: 1px solid var(--jsg-rule);
  margin: 0;
}

/* --- Field ---------------------------------------------------------------- */

.jsg-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.jsg-field__label {
  font-family: var(--jsg-font-ui);
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.32px;
  color: var(--jsg-text-muted);
}

.jsg-field__input {
  width: 100%;
  height: 40px;
  padding: 0 16px;
  background: var(--jsg-field-bg);
  color: var(--jsg-field-text);
  font-family: var(--jsg-font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 18px;
  letter-spacing: var(--jsg-tracking);
  border: 0;
  border-block-end: 1px solid var(--jsg-field-border);
  border-radius: 0;
  appearance: none;
}

textarea.jsg-field__input {
  height: auto;
  min-height: 96px;
  padding: 11px 16px;
  resize: vertical;
}

/* The native arrow is invisible on the dark field, so draw one. */
select.jsg-field__input {
  padding-inline-end: 40px;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 20px) 18px, calc(100% - 15px) 18px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.jsg-field__input::placeholder { color: var(--jsg-field-holder); }

.jsg-field__input:focus {
  outline: 2px solid var(--jsg-focus);
  outline-offset: -2px;
}

.jsg-field__input:disabled {
  background: var(--jsg-disabled-bg);
  color: var(--jsg-disabled-text);
  cursor: not-allowed;
}

.jsg-field__input--invalid { border-block-end: 2px solid var(--jsg-danger); }

.jsg-field__error {
  font-family: var(--jsg-font-ui);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.32px;
  color: var(--jsg-danger);
}

/* --- Actions -------------------------------------------------------------- */

.jsg-form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

.jsg-btn:disabled,
.jsg-btn[disabled] {
  background: var(--jsg-disabled-bg);
  color: var(--jsg-disabled-text);
  cursor: not-allowed;
}

.jsg-btn--secondary {
  background: transparent;
  color: var(--jsg-text);
  box-shadow: inset 0 0 0 1px var(--jsg-text);
}

.jsg-btn--secondary:hover { background: var(--jsg-bg-band); }

.jsg-btn--ghost {
  background: transparent;
  color: var(--jsg-accent);
  padding-inline: 16px;
}

.jsg-btn--ghost:hover { background: var(--jsg-bg-band); }

/* --- Loading -------------------------------------------------------------- */

.jsg-loading {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--jsg-font-ui);
  font-size: 14px;
  line-height: 18px;
  color: var(--jsg-text);
}

.jsg-loading__spinner {
  width: 20px;
  height: 20px;
  flex: none;
  border: 2px solid var(--jsg-field-border);
  border-block-start-color: var(--jsg-accent);
  border-radius: 50%;
  animation: jsg-spin 700ms linear infinite;
}

@keyframes jsg-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .jsg-loading__spinner { animation-duration: 2s; }
}

/* --- Status --------------------------------------------------------------- */

.jsg-form__status {
  font-family: var(--jsg-font-body);
  font-size: 14px;
  line-height: 20px;
  letter-spacing: var(--jsg-tracking);
  padding: 12px 16px;
  border-inline-start: 3px solid var(--jsg-field-border);
  background: var(--jsg-bg-band);
  color: var(--jsg-text);
}

.jsg-form__status--success { border-inline-start-color: var(--jsg-success); }
.jsg-form__status--error   { border-inline-start-color: var(--jsg-danger); }

/* --- Auth page shell ------------------------------------------------------ */

.jsg-auth {
  width: min(100%, var(--jsg-container));
  margin-inline: auto;
  padding: 48px var(--jsg-band-pad-x);
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.jsg-auth__back {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--jsg-font-ui);
  font-size: 14px;
  line-height: 18px;
  color: var(--jsg-text-muted);
  text-decoration: none;
}

.jsg-auth__back:hover { color: var(--jsg-text); }
.jsg-auth__back svg { width: 16px; height: 16px; fill: currentColor; }

.jsg-auth__heading {
  font-family: var(--jsg-font-body);
  font-weight: 300;
  font-size: 28px;
  line-height: 36px;
  letter-spacing: var(--jsg-tracking);
  margin: 0;
}

.jsg-auth__copy {
  font-family: var(--jsg-font-body);
  font-weight: 300;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: var(--jsg-tracking);
  color: var(--jsg-text-muted);
  margin: 0;
  max-width: 60ch;
}

.jsg-auth__divider {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 480px;
  font-family: var(--jsg-font-ui);
  font-size: 12px;
  letter-spacing: 0.32px;
  color: var(--jsg-text-muted);
}

.jsg-auth__divider::before,
.jsg-auth__divider::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--jsg-field-border);
}

/* --- Header auth actions -------------------------------------------------- */

.jsg-header__auth {
  display: flex;
  align-items: center;
  gap: 4px;
}

.jsg-header__auth-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: var(--jsg-header-h);
  padding-inline: 16px;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--jsg-font-ui);
  font-weight: 400;
  font-size: 14px;
  line-height: 18px;
  letter-spacing: var(--jsg-tracking);
  color: var(--jsg-text);
  text-decoration: none;
  white-space: nowrap;
}

.jsg-header__auth-btn:hover { background: var(--jsg-bg-band); }
.jsg-header__auth-btn:focus-visible { outline: 2px solid var(--jsg-accent); outline-offset: -2px; }
.jsg-header__auth-btn svg { width: 20px; height: 20px; fill: currentColor; flex: none; }

.jsg-header__user {
  font-family: var(--jsg-font-ui);
  font-size: 14px;
  color: var(--jsg-text-muted);
  white-space: nowrap;
}

@media (max-width: 767px) {
  .jsg-header__user { display: none; }
  .jsg-header__auth-btn { padding-inline: 12px; }
  .jsg-header__auth-btn span { display: none; }   /* icon only on mobile */
}

/* --- Gated work ----------------------------------------------------------- */

.jsg-work__card--locked { position: relative; }

.jsg-work__lock {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: rgba(22, 22, 22, 0.72);
  color: #ffffff;
  text-align: center;
  padding: 16px;
}

.jsg-work__lock svg { width: 24px; height: 24px; fill: currentColor; }

.jsg-work__lock-text {
  font-family: var(--jsg-font-ui);
  font-size: 14px;
  line-height: 18px;
  letter-spacing: var(--jsg-tracking);
}

/* The thumbnail behind the veil should not be legible enough to defeat it. */
.jsg-work__card--locked .jsg-work__thumb img { filter: blur(6px); }

/* The veil lifts per card, not per page: js/jsg-api.js adds --unlocked to the
   cards this visitor is actually entitled to, which since the Administrator's
   access lists is no longer "all of them, once signed in". A card governed by
   no access list still unlocks on any sign-in, so this reads the same as
   [data-jsg-auth="in"] did for every card that existed before. */
.jsg-work__card--unlocked .jsg-work__lock { display: none; }
.jsg-work__card--unlocked .jsg-work__thumb img { filter: none; }

/* --- Gated section notice ------------------------------------------------- */

.jsg-gate {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-block-end: 24px;
}

.jsg-gate__copy {
  font-family: var(--jsg-font-body);
  font-weight: 300;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: var(--jsg-tracking);
  margin: 0;
}

.jsg-gate__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}