/* Shared look for the server-rendered views (splash, local client, errors,
   OIDC interactions) and the auth widget. Loaded by partials/main.hbs,
   partials/error.hbs and partials/interactions.hbs, on top of bonsai.css.

   All colours come from theme.css -- add none here. */

:root {
  --panel-width: 480px;

  /* Icon containers. The plain radius is a rounded square that reads as a
     squircle everywhere; the @supports block below upgrades it to a real
     superellipse where corner-shape has shipped. */
  --icon-radius: 30%;
  --mono: Iosevka, "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono",
          Menlo, Consolas, monospace;
}

/* --- Page shell -------------------------------------------------------- */

/* Fixed attachment keeps the glow anchored to the viewport rather than to page
   height, so short and long pages look the same. */
:root {
  background-color: var(--theme-page);
  background-image: var(--page-bg);
  background-attachment: fixed;
}

/* The interaction pages and the auth widget both mount into #app, which
   interactions.css sizes as a fixed-height 1280px row. Reset it so .view owns
   the layout, exactly as on the other views. */
#app {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: none;
  height: auto;
  min-height: 100vh;
  margin: 0;
  padding: 0;
}

.view {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  width: 100%;
  padding: 2rem 1rem;
}

.view-version {
  margin: 0;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
}

/* --- Panel ------------------------------------------------------------- */

.panel {
  width: 100%;
  max-width: var(--panel-width);
  border-radius: 14px;
  overflow: hidden;
  background: var(--panel-tint);
  box-shadow: var(--panel-shadow);
}

.panel--wide {
  max-width: 640px;
}

.panel__head {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1rem 1.15rem;
  background-color: var(--navy);
  color: #fff;
}

.panel__titles {
  min-width: 0;
}

.panel__brand {
  margin: 0;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}

.panel__title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.3;
  color: #fff;
}

.panel__body {
  padding: 1.25rem;
}

.panel__note {
  margin: 0;
  font-size: 0.9rem;
  color: var(--ink-muted);
}

.panel__status-icon {
  display: block;
  margin: 0 0 0.75rem;
  font-size: 3.5rem;
  color: color-mix(in srgb, var(--theme-ink) 20%, transparent);
}

.panel__subtitle {
  margin: 0 0 0.35rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
}

.panel__center {
  text-align: center;
}

.panel__section-title {
  margin: 1.5rem 0 0.6rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

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

.nav {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-left: auto;
}

.nav-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  margin: 0;
  cursor: pointer;
  border-radius: var(--icon-radius);
  flex: none;
  color: #fff;
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  transition: background-color 0.18s ease, border-color 0.18s ease;
}

.nav-action:hover {
  background-color: rgba(255, 255, 255, 0.24);
  border-color: rgba(255, 255, 255, 0.45);
}

.nav-action:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.nav-action .m-sym {
  font-size: 19px;
}

.nav-sep {
  width: 1px;
  height: 20px;
  flex: none;
  margin: 0 0.15rem;
  background-color: rgba(255, 255, 255, 0.24);
}

/* --- Key/value table --------------------------------------------------- */

.kv {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
  text-align: left;
  font-size: 0.875rem;
}

.kv tr {
  border-top: 0;
}

.kv th,
.kv td {
  padding: 0.55rem 0;
  vertical-align: top;
  border-top: 1px solid var(--hairline);
}

.kv tr:first-child th,
.kv tr:first-child td {
  border-top: 0;
}

.kv th {
  width: 38%;
  padding-right: 1rem;
  background: none;
  font-weight: 500;
  color: var(--ink-muted);
  white-space: nowrap;
}

.kv td {
  color: var(--ink);
  font-family: var(--mono);
  font-size: 0.8125rem;
  word-break: break-word;
}

.kv td:empty::after {
  content: "\2014";
  color: var(--ink-muted);
}

/* --- Code block -------------------------------------------------------- */

.code-block {
  margin: 0;
  padding: 1rem;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background-color: var(--inset);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 0.75rem;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-x: auto;
}

/* --- Error page -------------------------------------------------------- */

.panel--error {
  background: var(--panel-tint-error);
}

.panel--error .panel__head {
  background-color: var(--theme-accent);
}

.error-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--icon-radius);
  flex: none;
  background-color: rgba(255, 255, 255, 0.18);
}

.error-icon .m-sym {
  font-size: 22px;
  color: #fff;
}

.error-code {
  margin: 0 0 0.35rem;
  font-family: var(--mono);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink);
  word-break: break-word;
}

.error-message {
  margin: 0;
  font-size: 0.95rem;
  color: var(--ink-muted);
}

.error-detail {
  margin: 1rem 0 0;
  padding: 0.75rem 0.9rem;
  border-left: 3px solid var(--hairline);
  background-color: var(--inset);
  border-radius: 0 8px 8px 0;
  font-size: 0.85rem;
  color: var(--ink-muted);
  word-break: break-word;
}

.error-status {
  display: inline-block;
  margin-top: 0.4rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--theme-accent);
}

.panel__foot {
  padding: 0.75rem 1.25rem;
  border-top: 1px solid var(--hairline);
  background-color: var(--sunken);
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--ink-muted);
  word-break: break-all;
}

/* --- Forms (interaction views + auth widget) ---------------------------- */

/* bonsai styles bare input/button elements heavily (full-width, own margins,
   inset hover shadow); these class rules outrank it on specificity. */

.field {
  display: block;
  margin: 0 0 0.9rem;
}

.field__label {
  display: block;
  margin: 0 0 0.3rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
}

.field__input {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--hairline);
  border-radius: 9px;
  background-color: var(--inset);
  color: var(--ink);
  font-family: inherit;
  font-size: 0.95rem;
  line-height: 1.4;
  box-shadow: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.field__input::-moz-placeholder { color: #9aa3b2; }

.field__input::placeholder { color: #9aa3b2; }

.field__input:hover:not(:disabled) {
  border-color: rgba(15, 23, 42, 0.22);
}

.field__input:focus {
  outline: none;
  background-color: #fff;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-primary) 18%, transparent);
}

.field__input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.field__input.invalid {
  border-color: var(--theme-accent);
}

.field__input.invalid:focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-accent) 18%, transparent);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: auto;
  margin: 0;
  padding: 0.62rem 1.15rem;
  border: 1px solid transparent;
  border-radius: 9px;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: none;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.btn--block {
  width: 100%;
}

.btn--primary {
  background-color: var(--navy);
  color: #fff;
}

.btn--primary:hover:not(:disabled) {
  background-color: color-mix(in srgb, var(--theme-primary) 88%, #000);
  box-shadow: none;
}

.btn--ghost {
  background-color: transparent;
  border-color: var(--hairline);
  color: var(--ink-muted);
}

.btn--ghost:hover:not(:disabled) {
  background-color: rgba(15, 23, 42, 0.05);
  color: var(--ink);
  box-shadow: none;
}

.btn:focus {
  outline: none;
  box-shadow: none;
}

.btn--primary:focus {
  border-color: transparent;
}

.btn--ghost:focus {
  border-color: var(--hairline);
}

.btn:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 2px;
}

.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.btn-row {
  display: flex;
  gap: 0.6rem;
  margin-top: 1.1rem;
}

.btn-row .btn {
  flex: 1;
}

.panel__form {
  margin-top: 1.1rem;
}

.panel__link {
  display: inline-block;
  margin-top: 1rem;
  font-size: 0.85rem;
  color: var(--navy);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.panel__link:hover {
  color: var(--theme-accent);
}

/* --- Alerts ------------------------------------------------------------ */

.alert {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  /* Both sides: the OTP / webauthn / no-creds states put an icon straight after
     an alert with no top margin of its own. .panel__body is a block, so this
     collapses against .panel__form's 1.1rem rather than stacking with it. */
  margin: 1rem 0;
  padding: 0.8rem 0.9rem;
  border: 1px solid transparent;
  border-radius: 10px;
  font-size: 0.875rem;
}

.alert__title {
  margin: 0 0 0.15rem;
  font-size: 0.9rem;
  font-weight: 600;
}

.alert__body {
  margin: 0;
  opacity: 0.85;
}

.alert--error {
  color: color-mix(in srgb, var(--theme-accent) 72%, #000);
  background-color: color-mix(in srgb, var(--theme-accent) 7%, transparent);
  border-color: color-mix(in srgb, var(--theme-accent) 28%, transparent);
}

.alert--warn {
  color: #7c4a06;
  background-color: rgba(214, 132, 16, 0.09);
  border-color: rgba(214, 132, 16, 0.3);
}

.alert a {
  color: inherit;
  text-decoration: underline;
}

/* --- Consent scope list ------------------------------------------------ */

.consent-client {
  margin: 1rem 0 0;
  padding: 0.7rem 0.9rem;
  border-radius: 10px;
  background-color: var(--sunken);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink);
}

.scope-list {
  margin: 0.75rem 0 0;
  padding: 0;
  list-style: none;
}

.scope {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  padding: 0.7rem 0;
  border-top: 1px solid var(--hairline);
}

.scope:first-child {
  border-top: 0;
}

.scope__symbol {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--icon-radius);
  background-color: var(--sunken);
  color: var(--navy);
  font-size: 1.05rem;
}

.scope__title {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink);
}

.scope__desc {
  margin: 0.15rem 0 0;
  font-size: 0.82rem;
  color: var(--ink-muted);
}

/* --- Splash (index.hbs) ------------------------------------------------ */

.splash-card {
  position: relative;
  width: 100%;
  max-width: 420px;
  border-radius: 14px;
  overflow: hidden;
  background-color: var(--navy);
  box-shadow: var(--panel-shadow);
}

.splash-card__media {
  position: relative;
  aspect-ratio: 4 / 5;
  max-height: 62vh;
}

.splash-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}

/* Scrim: keeps the icons legible at the top and the title at the bottom. */
.splash-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
              rgba(15, 23, 42, 0.45) 0%,
              rgba(15, 23, 42, 0) 28%,
              rgba(15, 23, 42, 0.35) 58%,
              rgba(15, 23, 42, 0.92) 100%);
}

.splash-card__body {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1.5rem;
}

.splash-brand {
  margin: 0 0 0.4rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}

.splash-title {
  margin: 0;
  font-size: 1.6rem;
  line-height: 1.25;
  font-weight: 600;
  color: #fff;
}

.splash-tagline {
  margin: 0.35rem 0 0;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.7);
}

.splash-actions {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  display: flex;
  gap: 0.5rem;
}

.splash-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--icon-radius);
  color: #fff;
  background-color: rgba(15, 23, 42, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.22);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  transition: background-color 0.18s ease, border-color 0.18s ease;
}

.splash-action:hover {
  background-color: rgba(15, 23, 42, 0.65);
  border-color: rgba(255, 255, 255, 0.45);
}

.splash-action:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.splash-action .m-sym {
  font-size: 20px;
}

@media (max-width: 480px) {
  .splash-title {
    font-size: 1.4rem;
  }

  .panel__body {
    padding: 1.1rem;
  }

  .kv th {
    width: 42%;
  }

  .panel__head {
    flex-wrap: wrap;
  }
}

/* --- Icon container centring ------------------------------------------- */

/* These containers centre their child with align-items, which centres the
   child's *box*. An inline child -- an icon glyph, or the inline <svg> in the
   widget's back button -- sits on the baseline inside its own line box, so the
   unused descender space below it pushes the visible icon above centre.
   Blockifying the child takes the line box out of the equation, leaving the
   flex centring exact. */
.nav-action,
.splash-action,
.error-icon,
.scope__symbol {
  line-height: 1;
}

.nav-action > *,
.splash-action > *,
.error-icon > *,
.scope__symbol > *,
.nav-action svg,
.splash-action svg,
.error-icon svg,
.scope__symbol svg {
  display: block;
  line-height: 1;
}

/* --- Icon container shape ---------------------------------------------- */

/* corner-shape draws a true superellipse rather than a rounded rectangle; at
   50% that is the classic squircle. Browsers without it keep the rounded
   square set by --icon-radius above. */
@supports (corner-shape: squircle) {
  .nav-action,
  .splash-action,
  .error-icon,
  .scope__symbol {
    corner-shape: squircle;
    border-radius: 50%;
  }
}