/* Cinemata Viewfinder shell for the maintained Keycloak 26.8 account console.
   Reference lock: Main AuthLayout / vf.css / vf-tokens.css, not PatternFly defaults.
   The token sheet also targets the native account body. This file maps PF roles
   and layout only; all forms, validation, menus and security actions stay native. */
html { color-scheme: dark; background: #06090b; }
body[data-page-id="account"] {
  --pf-v5-global--FontFamily--text: var(--vf-font-body);
  --pf-v5-global--FontFamily--heading: var(--vf-font-display);
  --pf-v5-global--FontFamily--monospace: var(--vf-font-mono);
  --pf-v5-global--BackgroundColor--100: var(--vf-surface);
  --pf-v5-global--BackgroundColor--200: var(--vf-bg);
  --pf-v5-global--BackgroundColor--300: var(--vf-surface-2);
  --pf-v5-global--BackgroundColor--400: var(--vf-surface-3);
  --pf-v5-global--BackgroundColor--light-100: var(--vf-surface);
  --pf-v5-global--BackgroundColor--light-200: var(--vf-bg-raised);
  --pf-v5-global--Color--100: var(--vf-fg);
  --pf-v5-global--Color--200: var(--vf-fg-2);
  --pf-v5-global--Color--light-100: var(--vf-fg);
  --pf-v5-global--Color--light-200: var(--vf-fg-2);
  --pf-v5-global--Color--dark-100: var(--vf-fg);
  --pf-v5-global--Color--dark-200: var(--vf-fg-2);
  --pf-v5-global--BorderColor--100: var(--vf-line-2);
  --pf-v5-global--BorderColor--200: var(--vf-line-3);
  --pf-v5-global--BorderColor--dark-100: var(--vf-line-2);
  --pf-v5-global--BorderColor--light-100: var(--vf-line-2);
  --pf-v5-global--primary-color--100: var(--vf-accent);
  --pf-v5-global--primary-color--200: var(--vf-accent-hi);
  --pf-v5-global--primary-color--light-100: var(--vf-accent);
  --pf-v5-global--primary-color--dark-100: var(--vf-accent);
  --pf-v5-global--primary-color--dark-200: var(--vf-accent-hi);
  --pf-v5-global--link--Color: var(--vf-accent);
  --pf-v5-global--link--Color--hover: var(--vf-accent-hi);
  --pf-v5-global--link--Color--dark: var(--vf-accent);
  --pf-v5-global--link--Color--dark--hover: var(--vf-accent-hi);
  --pf-v5-global--active-color--100: var(--vf-accent);
  --pf-v5-global--success-color--100: var(--vf-ok);
  --pf-v5-global--warning-color--100: var(--vf-warn);
  --pf-v5-global--danger-color--100: var(--vf-danger);
  --pf-v5-global--danger-color--200: var(--vf-danger);
  --pf-v5-global--disabled-color--100: var(--vf-fg-2);
  --pf-v5-global--disabled-color--200: var(--vf-surface-2);
  --pf-v5-global--BorderRadius--sm: var(--vf-r-ctl);
  --vf-account-nav-w: 224px;
  margin: 0;
  background: var(--vf-bg);
  color: var(--vf-fg);
  font: 400 var(--vf-fs-body) / var(--vf-lh-body) var(--vf-font-body);
  -webkit-font-smoothing: antialiased;
}
/* Contain the frame's margin inside the full-height account application. */
body[data-page-id="account"] #app { display: flow-root; }
/* The same peripheral frame as Main VF, without camera telemetry in settings.
   It never receives input or covers a control with an opaque decoration. */
body[data-page-id="account"]::before {
  content: "";
  position: fixed;
  inset: var(--vf-inset);
  z-index: 100;
  pointer-events: none;
  background:
    linear-gradient(var(--vf-fg-3), var(--vf-fg-3)) left top / var(--vf-frame-corner) 1px,
    linear-gradient(var(--vf-fg-3), var(--vf-fg-3)) left top / 1px var(--vf-frame-corner),
    linear-gradient(var(--vf-fg-3), var(--vf-fg-3)) right top / var(--vf-frame-corner) 1px,
    linear-gradient(var(--vf-fg-3), var(--vf-fg-3)) right top / 1px var(--vf-frame-corner),
    linear-gradient(var(--vf-fg-3), var(--vf-fg-3)) left bottom / var(--vf-frame-corner) 1px,
    linear-gradient(var(--vf-fg-3), var(--vf-fg-3)) left bottom / 1px var(--vf-frame-corner),
    linear-gradient(var(--vf-fg-3), var(--vf-fg-3)) right bottom / var(--vf-frame-corner) 1px,
    linear-gradient(var(--vf-fg-3), var(--vf-fg-3)) right bottom / 1px var(--vf-frame-corner);
  background-repeat: no-repeat;
}
body[data-page-id="account"] .keycloak__loading-container { background: var(--vf-bg); color: var(--vf-fg); }
body[data-page-id="account"] .pf-v5-c-page {
  --pf-v5-c-page__sidebar--Width: var(--vf-account-nav-w);
  width: calc(100% - 2 * var(--vf-inset));
  height: calc(100dvh - 2 * var(--vf-inset));
  min-height: calc(100svh - 2 * var(--vf-inset));
  margin: var(--vf-inset);
  border: 1px solid var(--vf-line);
  background: var(--vf-bg);
}
body[data-page-id="account"] .pf-v5-c-masthead {
  background: var(--vf-bg);
  border-bottom: 1px solid var(--vf-line-2);
  min-height: calc(var(--vf-top-h) + 16px);
  padding-inline: 24px;
}
body[data-page-id="account"] .pf-v5-c-masthead__brand img { display: block; width: 240px; max-width: 100%; height: auto; }
body[data-page-id="account"] .pf-v5-c-masthead .pf-v5-c-toolbar { background: transparent; }
body[data-page-id="account"] .pf-v5-c-masthead .pf-v5-c-avatar { color: var(--vf-fg-2); background: var(--vf-surface-2); border: 1px solid var(--vf-line-2); }
body[data-page-id="account"] .pf-v5-c-page__sidebar {
  background: var(--vf-bg);
  border-right: 1px solid var(--vf-line-2);
  box-shadow: none;
  --pf-v5-c-page__sidebar--Width: var(--vf-account-nav-w);
}
body[data-page-id="account"] .pf-v5-c-page__sidebar-body { padding-block: 32px; }
body[data-page-id="account"] .pf-v5-c-nav { --pf-v5-c-nav__link--Color: var(--vf-fg-2); --pf-v5-c-nav__link--m-current--Color: var(--vf-fg); }
body[data-page-id="account"] .pf-v5-c-nav__link { min-height: 48px; font: 500 12px / 18px var(--vf-font-mono); letter-spacing: .06em; text-transform: uppercase; }
body[data-page-id="account"] .pf-v5-c-nav__link:hover { background: var(--vf-bg-raised); color: var(--vf-fg); }
body[data-page-id="account"] .pf-v5-c-nav__link.pf-m-current { background: var(--vf-surface); color: var(--vf-fg); }
body[data-page-id="account"] .pf-v5-c-nav__link.pf-m-current::after { border-color: var(--vf-accent); }
body[data-page-id="account"] .pf-v5-c-nav__section-title { font: 500 12px / 18px var(--vf-font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--vf-fg-3); }
body[data-page-id="account"] .pf-v5-c-page__main-section {
  width: 100%;
  max-width: 1120px;
  margin-inline: auto;
  padding: 32px clamp(24px, 4vw, 56px);
  background: transparent;
}
body[data-page-id="account"] :is(.pf-v5-c-page__main, .pf-v5-c-page__main-section,
  .pf-v5-l-grid__item, .pf-v5-c-form__group, .pf-v5-c-form__group-control,
  .pf-v5-c-data-list__cell, .pf-v5-c-description-list__group) { min-width: 0; }
body[data-page-id="account"] .pf-v5-c-page__main-section:first-child { padding-top: 40px; padding-bottom: 8px; }
body[data-page-id="account"] .pf-v5-c-title { color: var(--vf-fg); font-family: var(--vf-font-display); font-weight: 900; letter-spacing: var(--vf-track-display); text-transform: uppercase; }
body[data-page-id="account"] :is(.pf-v5-c-content > h1, h1.pf-v5-c-title) {
  max-width: 20ch;
  margin-bottom: 16px;
  font: 900 var(--vf-fs-h2-col) / var(--vf-lh-h2-col) var(--vf-font-display);
  letter-spacing: var(--vf-track-display);
  text-transform: uppercase;
  overflow-wrap: break-word;
  text-wrap: balance;
}
body[data-page-id="account"] h2.pf-v5-c-title { font-size: 24px; line-height: 28px; }
body[data-page-id="account"] h3.pf-v5-c-title { font-size: 18px; line-height: 22px; font-weight: 800; letter-spacing: -.02em; }
body[data-page-id="account"] .pf-v5-c-content > p { max-width: 62ch; color: var(--vf-fg-2); font-size: 16px; line-height: 24px; }
body[data-page-id="account"] .pf-v5-c-form { gap: 24px; }
body[data-page-id="account"] form.pf-v5-c-form {
  max-width: 744px;
  gap: 24px;
  padding: 24px;
  border: 1px solid var(--vf-line-2);
  border-radius: var(--vf-r-panel);
  background: var(--vf-panel);
  box-shadow: var(--vf-shadow-panel);
}
body[data-page-id="account"] .pf-v5-c-form h1.pf-v5-c-title { margin: 0 0 24px; font-size: 24px; line-height: 28px; }
body[data-page-id="account"] .pf-v5-c-form.pf-m-horizontal .pf-v5-c-form__group { grid-template-columns: 1fr; gap: 8px; }
body[data-page-id="account"] .pf-v5-c-form__label { padding: 0; color: var(--vf-fg-2); font: 500 12px / 18px var(--vf-font-mono); letter-spacing: .12em; text-transform: uppercase; }
body[data-page-id="account"] .pf-v5-c-form__label-text { font-weight: 500; }
body[data-page-id="account"] .pf-v5-c-form__group-label { padding: 0; }
/* Stacked labels must not retain PF horizontal-form alignment padding or the
   body line box. This also outranks the upstream horizontal selector. */
body[data-page-id="account"] form.pf-v5-c-form.pf-m-horizontal .pf-v5-c-form__group-label { padding: 0; line-height: 18px; }
body[data-page-id="account"] form.pf-v5-c-form.pf-m-horizontal .pf-v5-c-form { gap: 20px; }
body[data-page-id="account"] .pf-v5-c-form.pf-m-horizontal .pf-v5-c-form__group-control { grid-column: 1; }
body[data-page-id="account"] .pf-v5-c-form .pf-v5-c-menu-toggle { width: 100%; }
/* Upstream's overflow item is the decorative avatar; the actual account menu,
   mobile kebab and optional referrer link remain available. */
body[data-page-id="account"] .pf-v5-c-masthead .pf-v5-c-toolbar__item.pf-m-overflow-menu { display: none; }
body[data-page-id="account"] .pf-v5-c-form-control,
body[data-page-id="account"] .pf-v5-c-menu-toggle {
  background: var(--vf-well);
  border: 1px solid var(--vf-line-ctl);
  border-radius: var(--vf-r-ctl);
  min-height: 48px;
  color: var(--vf-fg);
  box-shadow: var(--vf-shadow-well);
  transition: border-color var(--vf-dur-fast), box-shadow var(--vf-dur-fast);
}
body[data-page-id="account"] .pf-v5-c-form-control::before,
body[data-page-id="account"] .pf-v5-c-form-control::after,
body[data-page-id="account"] .pf-v5-c-menu-toggle::before,
body[data-page-id="account"] .pf-v5-c-menu-toggle::after { border: 0; border-radius: var(--vf-r-ctl); }
body[data-page-id="account"] .pf-v5-c-form-control:hover { border-color: var(--vf-fg-3); }
body[data-page-id="account"] .pf-v5-c-form-control:focus-within { border-color: var(--vf-accent); box-shadow: var(--vf-shadow-well), 0 0 0 1px var(--vf-accent); }
body[data-page-id="account"] .pf-v5-c-form-control :is(input, textarea, select) { min-height: 46px; padding-inline: 16px; font: 400 16px / 24px var(--vf-font-body); caret-color: var(--vf-accent); }
body[data-page-id="account"] .pf-v5-c-form-control textarea { padding-block: 12px; resize: vertical; }
body[data-page-id="account"] .pf-v5-c-form-control input:-webkit-autofill {
  -webkit-text-fill-color: var(--vf-fg);
  box-shadow: var(--vf-fill-autofill);
  border-radius: var(--vf-r-ctl);
}
body[data-page-id="account"] .pf-v5-c-form-control:has([aria-invalid="true"]) { border-color: var(--vf-danger); }
body[data-page-id="account"] .pf-v5-c-form-control:has([aria-invalid="true"]):focus-within { box-shadow: var(--vf-shadow-well), 0 0 0 1px var(--vf-danger); }
body[data-page-id="account"] .pf-v5-c-form-control.pf-m-disabled { background: var(--vf-bg-raised); border-color: var(--vf-line-2); color: var(--vf-fg-2); }
body[data-page-id="account"] .pf-v5-c-form__group.pf-m-action { margin-top: 8px; padding-top: 24px; border-top: 1px solid var(--vf-line-2); }
body[data-page-id="account"] .pf-v5-c-button { min-height: 44px; font: 600 14px / 20px var(--vf-font-body); border-radius: var(--vf-r-ctl); }
body[data-page-id="account"] .pf-v5-c-button.pf-m-primary { min-height: 48px; background: var(--vf-accent-fill); color: var(--vf-on-accent); padding-inline: 24px; }
body[data-page-id="account"] .pf-v5-c-button.pf-m-primary:hover { background: var(--vf-accent-fill); box-shadow: var(--vf-glow-cta); }
body[data-page-id="account"] .pf-v5-c-button.pf-m-primary:disabled { background: var(--vf-surface-3); color: var(--vf-fg-2); }
body[data-page-id="account"] .pf-v5-c-button.pf-m-secondary { color: var(--vf-fg); }
body[data-page-id="account"] .pf-v5-c-button.pf-m-secondary::after { border-color: var(--vf-line-ctl); border-radius: 4px; }
body[data-page-id="account"] .pf-v5-c-button.pf-m-link { color: var(--vf-accent); }
body[data-page-id="account"] .pf-v5-c-button.pf-m-link:hover { color: var(--vf-accent-hi); }
body[data-page-id="account"] .pf-v5-c-button.pf-m-danger {
  background: var(--vf-danger-soft); color: var(--vf-danger);
  --pf-v5-c-button--after--BorderColor: var(--vf-danger);
}
body[data-page-id="account"] .pf-v5-c-form__actions { display: flex; flex-wrap: wrap; gap: 12px; }
body[data-page-id="account"] :is(a, button, input, select, textarea):focus-visible { outline: 2px solid var(--vf-accent); outline-offset: 4px; }
/* The field wrapper carries its ring, so the inner input must not draw another. */
body[data-page-id="account"] .pf-v5-c-form-control :is(input, textarea, select):focus-visible { outline: none; }
body[data-page-id="account"] .pf-v5-c-card,
body[data-page-id="account"] .pf-v5-c-data-list,
body[data-page-id="account"] .pf-v5-c-modal-box { background: var(--vf-panel); border: 1px solid var(--vf-line-2); border-radius: var(--vf-r-panel); box-shadow: var(--vf-shadow-panel); }
body[data-page-id="account"] :is(.pf-v5-c-card__header, .pf-v5-c-modal-box__header) { border-bottom: 1px solid var(--vf-line); }
body[data-page-id="account"] .pf-v5-c-modal-box__body { padding-top: 24px; }
body[data-page-id="account"] .pf-v5-c-modal-box__footer { flex-wrap: wrap; gap: 12px; }
body[data-page-id="account"] .pf-v5-c-alert {
  background: var(--vf-surface); color: var(--vf-fg);
  border-radius: var(--vf-r-panel); box-shadow: var(--vf-shadow-panel);
}
body[data-page-id="account"] :is(.pf-v5-c-menu, .pf-v5-c-dropdown__menu, .pf-v5-c-popover__content) {
  max-width: calc(100vw - 2 * var(--vf-inset) - 32px);
  background: var(--vf-popover); color: var(--vf-fg);
  border: 1px solid var(--vf-line-2); border-radius: var(--vf-r-panel);
}
body[data-page-id="account"] :is(.pf-v5-c-menu__item, .pf-v5-c-dropdown__menu-item) {
  min-height: 44px; white-space: normal; overflow-wrap: anywhere;
}
body[data-page-id="account"] :is(.pf-v5-c-helper-text__item-text, .pf-v5-c-empty-state__body) { overflow-wrap: anywhere; }
body[data-page-id="account"] .pf-v5-c-data-list__item { background: transparent; border-bottom: 1px solid var(--vf-line-2); }
body[data-page-id="account"] .pf-v5-c-data-list__item:last-child { border-bottom: 0; }
body[data-page-id="account"] #applications-list-header { background: var(--vf-bg-raised); color: var(--vf-fg-3); font: 500 12px / 18px var(--vf-font-mono); letter-spacing: .08em; text-transform: uppercase; }
body[data-page-id="account"] .pf-v5-c-description-list__term { color: var(--vf-fg-3); font: 500 12px / 18px var(--vf-font-mono); letter-spacing: .08em; text-transform: uppercase; }
body[data-page-id="account"] .pf-v5-c-description-list__text { overflow-wrap: anywhere; }
/* A one-section form needs no duplicate jump navigation or group heading.
   The section margin is inline upstream; only this redundant single-group
   layout needs an important override. Multi-group forms keep their structure. */
body[data-page-id="account"] form.pf-v5-c-form.pf-m-horizontal > .pf-v5-l-grid:has(.pf-v5-c-jump-links__list > .pf-v5-c-jump-links__item:only-child) > .pf-v5-l-grid__item:first-child > section { margin-top: 0 !important; }
body[data-page-id="account"] form.pf-v5-c-form.pf-m-horizontal > .pf-v5-l-grid:has(.pf-v5-c-jump-links__list > .pf-v5-c-jump-links__item:only-child) > .pf-v5-l-grid__item:first-child > section > h1.pf-v5-c-title { display: none; }
body[data-page-id="account"] .pf-v5-l-grid__item:has(.pf-v5-c-jump-links__list > .pf-v5-c-jump-links__item:only-child) { display: none; }
body[data-page-id="account"] .pf-v5-l-grid:has(.pf-v5-c-jump-links__list > .pf-v5-c-jump-links__item:only-child) > .pf-v5-l-grid__item:first-child { grid-column: span 12; max-width: 660px; }
@media (max-width: 767px) {
  body[data-page-id="account"] .pf-v5-c-masthead { min-height: calc(var(--vf-top-h) + 16px); padding-inline: 12px; gap: 8px; display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; }
  body[data-page-id="account"] .pf-v5-c-masthead__toggle { grid-area: 1 / 1; margin: 0; }
  body[data-page-id="account"] .pf-v5-c-masthead__toggle .pf-v5-c-button { width: 44px; padding-inline: 0; }
  body[data-page-id="account"] .pf-v5-c-masthead__brand { grid-area: 1 / 2; }
  body[data-page-id="account"] .pf-v5-c-masthead__content { grid-area: 1 / 3; min-width: 0; margin: 0; }
  body[data-page-id="account"] .pf-v5-c-masthead .pf-v5-c-toolbar__content { padding: 0; }
  body[data-page-id="account"] .pf-v5-c-masthead :is(.pf-v5-c-toolbar, .pf-v5-c-toolbar__content, .pf-v5-c-toolbar__content-section) { width: 44px; min-width: 0; gap: 0; }
  body[data-page-id="account"] .pf-v5-c-masthead .pf-v5-c-toolbar__item { margin: 0; }
  body[data-page-id="account"] .pf-v5-c-masthead .pf-v5-c-toolbar__item:empty { display: none; }
  body[data-page-id="account"] .pf-v5-c-masthead .pf-v5-c-menu-toggle { width: 44px; min-height: 44px; padding: 8px; }
  body[data-page-id="account"] .pf-v5-c-masthead__brand img { width: 180px; }
  /* With an application return link the native toolbar gets its own row.
     Do not squeeze or hide a real navigation action to fit the three-cell bar. */
  body[data-page-id="account"] .pf-v5-c-masthead:has([data-testid="referrer-link"]) .pf-v5-c-masthead__content { grid-area: 2 / 1 / 3 / 4; padding-bottom: 8px; }
  body[data-page-id="account"] .pf-v5-c-masthead:has([data-testid="referrer-link"]) :is(.pf-v5-c-toolbar, .pf-v5-c-toolbar__content, .pf-v5-c-toolbar__content-section) { width: 100%; gap: 8px; }
  body[data-page-id="account"] [data-testid="referrer-link"] { white-space: normal; text-align: left; overflow-wrap: anywhere; }
  body[data-page-id="account"] .pf-v5-c-page__main-section { padding: 24px 16px; }
  body[data-page-id="account"] .pf-v5-c-page__main-section:first-child { padding-top: 32px; }
  body[data-page-id="account"] :is(.pf-v5-c-content > h1, h1.pf-v5-c-title) { font-size: var(--vf-fs-h2-col); line-height: var(--vf-lh-h2-col); }
  body[data-page-id="account"] h2.pf-v5-c-title { font-size: 22px; line-height: 26px; }
  body[data-page-id="account"] form.pf-v5-c-form { padding: 20px 16px; }
  body[data-page-id="account"] .pf-v5-c-form h1.pf-v5-c-title { font-size: 22px; line-height: 26px; }
  body[data-page-id="account"] .pf-v5-c-form__actions { flex-wrap: wrap; }
  body[data-page-id="account"] .pf-v5-c-page__main { min-width: 0; max-width: 100%; }
  body[data-page-id="account"] .pf-v5-c-page__main-section .pf-v5-l-split { flex-direction: column; gap: 12px; }
  body[data-page-id="account"] .pf-v5-c-page__main-section .pf-v5-l-split__item { min-width: 0; }
  body[data-page-id="account"] .pf-v5-c-page__main-section .pf-v5-c-button { white-space: normal; max-width: 100%; }
  /* The upstream desktop column header stacks into three empty-looking rows.
     Keep its accessible text; each mobile application remains a readable card. */
  body[data-page-id="account"] #applications-list-header { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  body[data-page-id="account"] #applications-list .pf-v5-c-data-list__item-content { gap: 8px; align-items: stretch; padding-block: 16px; }
  body[data-page-id="account"] #applications-list .pf-v5-c-data-list__cell { margin: 0; padding-block: 4px; overflow-wrap: anywhere; }
  body[data-page-id="account"] #applications-list .pf-v5-c-data-list__cell:empty { display: none; }
  body[data-page-id="account"] #applications-list .pf-v5-c-data-list__cell:first-child { font-weight: 600; }
  body[data-page-id="account"] .pf-v5-c-modal-box { margin: 16px; max-width: calc(100vw - 32px); max-height: calc(100dvh - 32px); }
}
@media (prefers-reduced-motion: reduce) {
  body[data-page-id="account"] *, body[data-page-id="account"] *::before, body[data-page-id="account"] *::after { scroll-behavior: auto; animation-duration: .01ms; transition-duration: .01ms; }
}