/*
 * Accounts on vibekit (docs/ui.md). vibekit's bundle draws every vk-* component; this file
 * draws the shell and Accounts' own patterns, on vibekit tokens only (never a colour by hand),
 * per vibe with :where([data-vibe="…"]). Class prefix: ac-. Unlayered, so it sits above
 * vibekit's @layer vk.* without !important.
 *
 * Sections: 1 base · 2 shell (all vibes, phone first) · 3 shell per vibe · 4 honest states ·
 * 5 forms · 6 Accounts patterns · 7 motion.
 */

/* 1. Base ------------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
body.ac-body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--vk-color-bg);
  color: var(--vk-color-text);
  font-family: var(--vk-font-body);
  overflow-wrap: anywhere;
  overflow-x: clip;
}
.ac-shell :where(h1, h2, h3, p, ul, ol, dl, dd, figure, fieldset) {
  margin: 0;
}
.ac-shell :where(ul, ol) {
  padding: 0;
  list-style: none;
}
.ac-shell a {
  color: var(--vk-color-accent-text);
  text-underline-offset: 3px;
}
.ac-main h1 {
  font: 800 clamp(2rem, 1.6rem + 1.4vw, 2.6rem) / 1.08 var(--vk-font-display);
  letter-spacing: -0.02em;
  margin-bottom: var(--vk-space-2);
}
.ac-main h2 {
  font: 700 var(--vk-text-lg) / 1.25 var(--vk-font-display);
}
.ac-lede {
  color: var(--vk-color-muted);
  max-width: 60ch;
  margin-bottom: var(--vk-space-5);
}
.ac-muted {
  color: var(--vk-color-muted);
}
.ac-mono {
  font-family: var(--vk-font-mono);
}
.ac-kicker {
  font: 700 12px/1.2 var(--vk-font-body);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--vk-color-muted);
  margin-bottom: var(--vk-space-2);
}
.ac-stack {
  display: flex;
  flex-direction: column;
  gap: var(--vk-space-4);
}
.ac-full {
  width: 100%;
}
.ac-back,
.ac-small {
  margin-top: var(--vk-space-5);
  font-size: var(--vk-text-sm);
}
.ac-back a,
.ac-small a,
.ac-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.ac-links {
  display: flex;
  flex-direction: column;
  margin-top: var(--vk-space-4);
}
.ac-inline-form {
  margin: 0;
  display: inline;
}
.ac-skip {
  position: absolute;
  left: 8px;
  top: -100px;
  z-index: 50;
  padding: 10px 16px;
  background: var(--vk-color-surface);
  color: var(--vk-color-text);
  border-radius: var(--vk-radius-sm);
}
.ac-skip:focus {
  top: 8px;
}

/* 2. Shell, every vibe (phone first) ------------------------------------------------------ */
.ac-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 16px;
}
.ac-top {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px 18px;
  min-height: 64px;
  padding: 10px 0;
}
.ac-sky {
  display: none;
}
.ac-wordmark {
  position: relative;
  color: var(--vk-color-text);
  text-decoration: none;
  min-height: 44px;
}
.ac-main {
  flex: 1;
  min-width: 0;
  padding: var(--vk-space-5) 0 var(--vk-space-7);
}
.ac-focus {
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
}
.ac-foot {
  display: flex;
  gap: 18px;
  padding: var(--vk-space-4) 0;
  border-top: 1px solid var(--vk-color-line);
  color: var(--vk-color-muted);
  font-size: var(--vk-text-sm);
}
.ac-foot a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: inherit;
}

/* The account control. Without JavaScript: a link home and Sign out. With it: a disclosure button and menu. */
.ac-account {
  position: relative;
  margin-left: auto;
  display: flex;
  align-items: center;
}
.ac-account__nojs {
  display: flex;
  align-items: center;
  gap: 8px;
}
html[data-js] .ac-account__nojs,
html:not([data-js]) .ac-account__button {
  display: none;
}
.ac-account__home,
.ac-account__button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 14px 0 2px;
  border: 0;
  background: transparent;
  color: var(--vk-color-text);
  font: 600 15px/1 var(--vk-font-body);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
.ac-account__out {
  margin: 0;
}
.ac-chip {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--vk-mood-resting);
  color: var(--vk-face-ink);
  font: 800 13px/1 var(--vk-font-body);
  letter-spacing: 0.02em;
}
.ac-account__menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 30;
  width: min(280px, calc(100vw - 32px));
  padding: 8px;
  background: var(--vk-color-surface);
  color: var(--vk-color-text);
  border-radius: var(--vk-radius-md);
  box-shadow: 0 0 0 1px var(--vk-color-line), var(--vk-shadow-pop, 0 16px 32px -14px var(--vk-color-ground));
}
.ac-account__menu[hidden] {
  display: none;
}
.ac-account__who {
  padding: 10px 12px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--vk-color-line);
  font-size: var(--vk-text-sm);
  color: var(--vk-color-muted);
}
.ac-account__who b {
  display: block;
  color: var(--vk-color-text);
  overflow-wrap: anywhere;
}
.ac-account__menu a,
.ac-account__menu button {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--vk-radius-sm);
  background: transparent;
  color: var(--vk-color-text);
  font: 600 15px/1.2 var(--vk-font-body);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.ac-account__menu a:hover,
.ac-account__menu button:hover {
  background: var(--vk-color-raised);
}
.ac-account__menu form {
  margin: 0;
}

/* The section navigation: on a phone, a row of pills that scrolls sideways; never wraps, never cut off. */
.ac-nav__list {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 4px 2px 8px;
  margin: 0 -2px;
  overscroll-behavior-x: contain;
}
.ac-nav__list::-webkit-scrollbar {
  display: none;
}
.ac-nav__list[data-more~="right"] {
  mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
}
.ac-nav__list[data-more~="left"] {
  mask-image: linear-gradient(to left, #000 calc(100% - 32px), transparent);
}
.ac-nav__list[data-more~="left"][data-more~="right"] {
  mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 32px), transparent);
}
.ac-nav__item {
  flex: none;
}
.ac-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px;
  border-radius: var(--vk-radius-pill);
  background: var(--vk-color-surface);
  color: var(--vk-color-muted);
  font: 600 15px/1 var(--vk-font-body);
  text-decoration: none;
  white-space: nowrap;
  box-shadow: inset 0 0 0 1px var(--vk-color-line);
}
.ac-shell .ac-nav__link {
  color: var(--vk-color-muted);
}
.ac-shell .ac-nav__link[aria-current="page"] {
  color: var(--vk-color-text);
  background: var(--vk-color-accent-wash);
  box-shadow: inset 0 0 0 2px var(--vk-color-accent);
  font-weight: 700;
}
.ac-nav__icon {
  display: none;
  flex: none;
}
.ac-nav__tag {
  font: 600 11px/1 var(--vk-font-mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 6px;
  border-radius: var(--vk-radius-pill);
  background: var(--vk-color-raised);
  color: var(--vk-color-muted);
}

/* Wide: account pages get the sidebar (Daylight, Paper) or the rail (Studio); Quiet keeps a row. */
@media (min-width: 960px) {
  .ac-shell {
    padding: 0 40px;
  }
  .ac-body--account .ac-shell {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    grid-template-rows: auto 1fr auto;
    grid-template-areas: "top top" "nav main" "foot foot";
    column-gap: var(--vk-space-6);
  }
  .ac-body--account .ac-top {
    grid-area: top;
  }
  .ac-body--account .ac-nav {
    grid-area: nav;
    align-self: start;
    position: sticky;
    top: 16px;
    margin-top: var(--vk-space-5);
  }
  .ac-body--account .ac-main {
    grid-area: main;
  }
  .ac-body--account .ac-foot {
    grid-area: foot;
  }
  .ac-body--account .ac-nav__list {
    flex-direction: column;
    overflow: visible;
    mask-image: none;
    padding: 8px;
    margin: 0;
    gap: 4px;
  }
  .ac-body--account .ac-nav__link {
    display: flex;
    min-height: 48px;
    box-shadow: none;
    background: transparent;
  }
  .ac-body--account .ac-nav__link:hover {
    background: var(--vk-color-raised);
    color: var(--vk-color-text);
  }
  .ac-nav__icon {
    display: block;
  }
  .ac-nav__tag {
    margin-left: auto;
  }
  .ac-focus {
    padding-top: var(--vk-space-6);
  }
}

/* 3. Shell per vibe --------------------------------------------------------------------- */

/* Daylight: the top on the sky, the sidebar a raised card, the focus page a panel. */
:where([data-vibe="daylight"]) .ac-top {
  margin-top: 12px;
  padding: 12px 16px;
  border-radius: var(--vk-radius-lg);
  overflow: visible;
  isolation: isolate;
}
:where([data-vibe="daylight"]) .ac-sky {
  display: block;
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
}
:where([data-vibe="daylight"]) .ac-sky .vk-sky__sun {
  width: 40px;
  height: 40px;
  top: -12px;
  left: 58%;
  right: auto;
}
:where([data-vibe="daylight"]) .ac-top .ac-wordmark,
:where([data-vibe="daylight"]) .ac-top .ac-account__home {
  color: var(--vk-sky-text, var(--vk-color-text));
}
:where([data-vibe="daylight"]) .ac-sky ~ .ac-wordmark {
  color: var(--vk-sky-noon-text, var(--vk-color-text));
}
:where([data-vibe="daylight"]) .ac-account__button,
:where([data-vibe="daylight"]) .ac-account__home {
  border-radius: var(--vk-radius-pill);
  background: var(--vk-color-surface);
  color: var(--vk-color-text);
  box-shadow: 0 var(--vk-lift, 3px) 0 var(--vk-color-ground);
}
:where([data-vibe="daylight"]) .ac-account__out .vk-button {
  color: var(--vk-color-text);
}
:where([data-vibe="daylight"]) .ac-focus {
  margin-top: var(--vk-space-5);
  margin-bottom: var(--vk-space-6);
  padding: var(--vk-space-5);
  background: var(--vk-color-surface);
  border-radius: var(--vk-radius-lg);
  box-shadow: 0 var(--vk-lift, 3px) 0 var(--vk-color-ground), 0 24px 48px -32px var(--vk-color-ground);
}
@media (min-width: 640px) {
  :where([data-vibe="daylight"]) .ac-focus {
    padding: var(--vk-space-6);
  }
}
@media (min-width: 960px) {
  :where([data-vibe="daylight"]) .ac-nav__list {
    background: var(--vk-color-surface);
    border-radius: var(--vk-radius-lg);
    box-shadow: 0 var(--vk-lift, 3px) 0 var(--vk-color-ground);
  }
  :where([data-vibe="daylight"]) .ac-body--account .ac-nav__link {
    border-radius: var(--vk-radius-pill);
  }
  :where([data-vibe="daylight"]) .ac-body--account .ac-nav__link[aria-current="page"] {
    background: var(--vk-color-raised);
    box-shadow: inset 0 0 0 2px var(--vk-color-primary);
  }
}

/* Paper: a nameplate between rules, a contents list with roman numerals, serif display. */
:where([data-vibe="paper"]) .ac-top {
  margin-top: 16px;
  border-top: 1px solid var(--vk-color-text);
  border-bottom: 3px double var(--vk-color-text);
}
:where([data-vibe="paper"]) .ac-wordmark .vk-wordmark__words {
  font-family: var(--vk-font-display);
  font-variant-caps: all-small-caps;
  letter-spacing: 0.06em;
  font-size: 22px;
}
:where([data-vibe="paper"]) .ac-chip {
  width: 32px;
  height: 32px;
  background: transparent;
  color: var(--vk-color-text);
  border: 1px solid var(--vk-color-text);
}
:where([data-vibe="paper"]) .ac-account__menu {
  border-radius: var(--vk-radius-sm);
  box-shadow: 0 0 0 1px var(--vk-color-text);
}
:where([data-vibe="paper"]) .ac-main h1 {
  font: 500 clamp(2.4rem, 1.6rem + 3vw, 4rem) / 1 var(--vk-font-display);
}
:where([data-vibe="paper"]) .ac-main h2 {
  font: 500 26px/1.15 var(--vk-font-display);
}
:where([data-vibe="paper"]) .ac-lede {
  font: italic 400 20px/1.4 var(--vk-font-display);
}
:where([data-vibe="paper"]) .ac-nav__list {
  counter-reset: ac-section;
}
:where([data-vibe="paper"]) .ac-nav__link {
  border-radius: var(--vk-radius-sm);
  background: transparent;
  box-shadow: inset 0 -1px 0 var(--vk-color-line);
  font: 500 17px/1.2 var(--vk-font-display);
}
:where([data-vibe="paper"]) .ac-nav__item {
  counter-increment: ac-section;
}
:where([data-vibe="paper"]) .ac-nav__link::before {
  content: counter(ac-section, lower-roman) ".";
  font: italic 400 15px/1 var(--vk-font-display);
  color: var(--vk-color-muted);
  min-width: 22px;
}
:where([data-vibe="paper"]) .ac-shell .ac-nav__link[aria-current="page"] {
  background: transparent;
  box-shadow: inset 0 -2px 0 var(--vk-color-text);
  font-style: italic;
}
@media (min-width: 960px) {
  :where([data-vibe="paper"]) .ac-body--account .ac-shell {
    grid-template-columns: 220px minmax(0, 1fr);
    column-gap: 48px;
  }
  :where([data-vibe="paper"]) .ac-nav::before {
    content: "Your account";
    display: block;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--vk-color-text);
    font: 600 15px/1 var(--vk-font-body);
    font-variant-caps: all-small-caps;
    letter-spacing: 0.12em;
    color: var(--vk-color-muted);
  }
  :where([data-vibe="paper"]) .ac-body--account .ac-nav__list {
    padding: 0;
    gap: 0;
  }
  :where([data-vibe="paper"]) .ac-body--account .ac-nav__link {
    border-radius: 0;
    box-shadow: inset 0 -1px 0 var(--vk-color-line);
    font-size: 19px;
  }
  :where([data-vibe="paper"]) .ac-body--account .ac-nav__link[aria-current="page"] {
    text-decoration: underline;
    text-underline-offset: 5px;
    box-shadow: inset 0 -1px 0 var(--vk-color-line);
  }
  :where([data-vibe="paper"]) .ac-nav__icon {
    display: none;
  }
  :where([data-vibe="paper"]) .ac-focus {
    max-width: 640px;
  }
}

/* Studio: an ink rail with labels under icons, a ruled masthead, square ink chip, sans display. */
:where([data-vibe="studio"]) .ac-top {
  border-bottom: 1px solid var(--vk-color-rule);
}
:where([data-vibe="studio"]) .ac-account__button,
:where([data-vibe="studio"]) .ac-account__home {
  padding-right: 12px;
  box-shadow: inset 0 0 0 1px var(--vk-color-line);
  font-weight: 700;
}
:where([data-vibe="studio"]) .ac-chip {
  width: 34px;
  height: 34px;
  border-radius: 0;
  background: var(--vk-color-text);
  color: var(--vk-color-bg);
}
:where([data-vibe="studio"]) .ac-account__menu {
  border-radius: 0;
  background: var(--vk-color-bg);
  box-shadow: 0 0 0 1.5px var(--vk-color-rule);
}
:where([data-vibe="studio"]) .ac-main h1 {
  font: 800 clamp(2.2rem, 1.6rem + 2.4vw, 3rem) / 1.02 var(--vk-font-display);
  font-stretch: 80%;
}
:where([data-vibe="studio"]) .ac-lede {
  font: 400 18px/1.45 var(--vk-font-serif);
}
:where([data-vibe="studio"]) .ac-nav__link {
  border-radius: 0;
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--vk-color-line);
  font: 700 13px/1.15 var(--vk-font-body);
}
:where([data-vibe="studio"]) .ac-shell .ac-nav__link[aria-current="page"] {
  background: var(--vk-color-text);
  color: var(--vk-color-bg);
  box-shadow: none;
}
@media (min-width: 960px) {
  :where([data-vibe="studio"]) .ac-body--account .ac-shell {
    max-width: none;
    padding: 0;
    grid-template-columns: 96px minmax(0, 1fr);
    grid-template-areas: "nav top" "nav main" "nav foot";
    column-gap: 0;
  }
  :where([data-vibe="studio"]) .ac-body--account .ac-top {
    padding: 0 32px 0 40px;
    min-height: 76px;
  }
  :where([data-vibe="studio"]) .ac-body--account .ac-main,
  :where([data-vibe="studio"]) .ac-body--account .ac-foot {
    padding-left: 40px;
    padding-right: 40px;
  }
  :where([data-vibe="studio"]) .ac-body--account .ac-nav {
    grid-row: 1 / -1;
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100dvh;
    margin: 0;
    padding: 16px 8px;
    background: var(--vk-color-text);
  }
  :where([data-vibe="studio"]) .ac-body--account .ac-nav__list {
    padding: 0;
    gap: 2px;
  }
  :where([data-vibe="studio"]) .ac-body--account .ac-nav__link {
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    min-height: 60px;
    padding: 6px 2px;
    color: var(--vk-color-bg);
    box-shadow: none;
    text-align: center;
    font-size: 11.5px;
    white-space: normal;
  }
  :where([data-vibe="studio"]) .ac-body--account .ac-nav__link:hover {
    background: transparent;
    color: var(--vk-color-bg);
    outline: 1px solid var(--vk-color-bg);
    outline-offset: -1px;
  }
  :where([data-vibe="studio"]) .ac-body--account .ac-nav__link[aria-current="page"] {
    background: var(--vk-color-bg);
    color: var(--vk-color-text);
  }
  :where([data-vibe="studio"]) .ac-body--account .ac-nav__link:focus-visible {
    outline-color: var(--vk-color-bg);
  }
  :where([data-vibe="studio"]) .ac-body--account .ac-nav__tag {
    margin: 0;
    padding: 0;
    background: none;
    color: inherit;
    opacity: 0.8;
    font-size: 9.5px;
  }
  :where([data-vibe="studio"]) .ac-focus {
    max-width: 560px;
  }
}

/* Quiet: large plain type, strong outlines, a row of underlined links, one reading column. */
:where([data-vibe="quiet"]) .ac-shell {
  max-width: 1120px;
  font-size: 1.125rem;
  line-height: 1.6;
}
:where([data-vibe="quiet"]) .ac-top {
  border-bottom: 1px solid var(--vk-color-line);
}
:where([data-vibe="quiet"]) .ac-account__button,
:where([data-vibe="quiet"]) .ac-account__home {
  text-decoration: underline;
  text-underline-offset: 4px;
  font-size: 1.0625rem;
}
:where([data-vibe="quiet"]) .ac-chip {
  width: 32px;
  height: 32px;
  background: transparent;
  color: var(--vk-color-text);
  border: 2px solid var(--vk-color-text);
}
:where([data-vibe="quiet"]) .ac-account__menu {
  box-shadow: 0 0 0 2px var(--vk-color-text);
}
:where([data-vibe="quiet"]) .ac-main h1 {
  font: 700 2.25rem/1.2 var(--vk-font-display);
  letter-spacing: 0;
}
:where([data-vibe="quiet"]) .ac-nav {
  border-bottom: 1px solid var(--vk-color-line);
}
:where([data-vibe="quiet"]) .ac-nav__link {
  border-radius: 0;
  padding: 0 4px;
  background: transparent;
  box-shadow: none;
  color: var(--vk-color-text);
  font: 400 1.0625rem/1 var(--vk-font-body);
  text-decoration: underline;
  text-underline-offset: 4px;
}
:where([data-vibe="quiet"]) .ac-shell .ac-nav__link {
  color: var(--vk-color-text);
}
:where([data-vibe="quiet"]) .ac-shell .ac-nav__link[aria-current="page"] {
  background: transparent;
  font-weight: 700;
  text-decoration: none;
  box-shadow: inset 0 -3px 0 var(--vk-color-text);
}
:where([data-vibe="quiet"]) .ac-nav__icon {
  display: none;
}
:where([data-vibe="quiet"]) .ac-nav__tag {
  background: none;
  font: 400 1rem/1 var(--vk-font-body);
  text-transform: none;
  letter-spacing: 0;
}
@media (min-width: 960px) {
  :where([data-vibe="quiet"]) .ac-body--account .ac-shell {
    display: flex;
  }
  :where([data-vibe="quiet"]) .ac-body--account .ac-nav {
    position: static;
    margin: 0;
  }
  :where([data-vibe="quiet"]) .ac-body--account .ac-nav__list {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0 var(--vk-space-5);
    padding: var(--vk-space-2) 0;
  }
  :where([data-vibe="quiet"]) .ac-body--account .ac-nav__link {
    display: inline-flex;
  }
  :where([data-vibe="quiet"]) .ac-body--account .ac-nav__link:hover {
    background: transparent;
  }
  :where([data-vibe="quiet"]) .ac-body--account .ac-main {
    max-width: 1040px;
  }
  :where([data-vibe="quiet"]) .ac-focus {
    max-width: 640px;
  }
}

/* 4. Honest states ------------------------------------------------------------------------ */

/* ErrorLine: one plain sentence, ruled on the left; empty, it takes no room. */
.ac-error:empty {
  display: none;
}
.ac-error {
  margin: 0 0 var(--vk-space-4);
  padding: 12px 16px;
  border-radius: var(--vk-radius-md);
  background: var(--vk-color-raised);
  box-shadow: inset 4px 0 0 var(--vk-color-text);
  font-weight: 600;
  color: var(--vk-color-text);
}
:where([data-vibe="paper"]) .ac-error {
  background: none;
  border-radius: 0;
  font: italic 500 17px/1.4 var(--vk-font-display);
}
:where([data-vibe="studio"]) .ac-error {
  border-radius: 0;
  background: none;
  box-shadow: inset 0 0 0 1.5px var(--vk-color-rule), inset 6px 0 0 var(--vk-color-text);
}
:where([data-vibe="quiet"]) .ac-error {
  background: none;
  border-radius: 0;
  font-weight: 700;
}
.ac-ok:empty {
  display: none;
}
.ac-ok {
  margin: 0 0 var(--vk-space-4);
  color: var(--vk-color-success-text);
  font-weight: 600;
}

/* The sorry line: JavaScript off (noscript) or the page script failed to load. */
.ac-sorry {
  margin: 0 0 var(--vk-space-4);
  padding: 12px 16px;
  border-radius: var(--vk-radius-md);
  background: var(--vk-color-signal-wash);
  color: var(--vk-color-text);
  font-weight: 600;
}
.ac-script-failed,
html[data-js] .ac-nojs {
  display: none;
}
.ac-shell [hidden] {
  display: none !important;
}
html[data-script-failed] .ac-script-failed {
  display: block;
}
html[data-script-failed] [data-needs-script],
html:not([data-js]) [data-needs-script] {
  display: none;
}

/* The not-found / not-allowed panel. */
.ac-sorry-panel {
  max-width: 640px;
}
.ac-sorry-panel h1 {
  margin-bottom: var(--vk-space-3);
}

/* Loading: vibekit's skeleton; the caption shows only where the vibe draws it. */
.ac-loading {
  margin: var(--vk-space-4) 0;
}

/* The in-page dialog: vibekit's overlay; the form inside is the dialog's whole body. */
/* A closed dialog is not drawn: vibekit's .vk-dialog sets display, which beats the browser's own rule. */
.ac-dialog:not([open]) {
  display: none;
}
.ac-dialog::backdrop {
  background: color-mix(in oklch, var(--vk-color-text) 40%, transparent);
}
.ac-dialog__form {
  margin: 0;
}

/* Buttons that are waiting keep their width (inflight.ts sets min-width). */
.vk-button[data-busy] {
  cursor: progress;
}

/* 5. Forms --------------------------------------------------------------------------------- */
.ac-form {
  display: flex;
  flex-direction: column;
  gap: var(--vk-space-4);
  margin: 0;
}
.ac-form .vk-field__input {
  width: 100%;
}
.ac-or {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: var(--vk-space-5) 0;
  color: var(--vk-color-muted);
  font-size: var(--vk-text-sm);
  font-weight: 600;
}
.ac-or::before,
.ac-or::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--vk-color-line);
}
.ac-fieldset {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0 0 var(--vk-space-5);
  padding: 0;
  border: 0;
  min-width: 0;
}
.ac-legend {
  padding: 0;
  margin-bottom: var(--vk-space-2);
  font: 700 var(--vk-text-md) / 1.3 var(--vk-font-display);
}
.ac-hint {
  font-size: var(--vk-text-sm);
  color: var(--vk-color-muted);
}
.ac-captcha:empty {
  display: none;
}
.ac-appearance-summary {
  margin-top: var(--vk-space-6);
}

/* The newcomer's Steps above a focus page. */
.ac-steps {
  margin-bottom: var(--vk-space-5);
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}
/* The newcomer's Steps on a phone: Daylight's pill row and Studio's columns keep every step in
   view at 360px by showing only the marks of the other steps (their names stay for screen readers). */
@media (max-width: 480px) {
  :where([data-vibe="daylight"], [data-vibe="studio"]) .ac-steps .vk-steps__step:not([data-state="current"]) .vk-steps__name {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  :where([data-vibe="daylight"], [data-vibe="studio"]) .ac-steps .vk-steps__step:not([data-state="current"]) {
    flex: 0 0 auto;
    padding: 0 6px;
  }
}

/* 6. Accounts patterns ------------------------------------------------------------------- */

/* The device-code hero: one line of large mono, never wider than its card. Sized by the card's
   width (cqi), not the viewport's: on a wide window the vw size hit its cap while the card stayed
   narrow, and the nine characters ran out of it. ~14cqi keeps 9 mono glyphs + spacing inside. */
.ac-code {
  display: block;
  margin: var(--vk-space-3) 0;
  font: 600 clamp(1.5rem, 14cqi, 4.5rem) / 1 var(--vk-font-mono);
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--vk-color-text);
}
.ac-code__dash {
  color: var(--vk-color-muted);
}
.ac-codecard {
  container-type: inline-size;
  margin: var(--vk-space-4) 0 var(--vk-space-5);
  text-align: center;
}
.ac-codecard p {
  font-weight: 600;
}
:where([data-vibe="daylight"]) .ac-codecard {
  padding: var(--vk-space-5) var(--vk-space-3);
  border-radius: var(--vk-radius-lg);
  background: var(--vk-color-raised);
}
:where([data-vibe="paper"]) .ac-codecard {
  padding: var(--vk-space-4) 0;
  border-top: 1px solid var(--vk-color-text);
  border-bottom: 1px solid var(--vk-color-text);
}
:where([data-vibe="paper"]) .ac-codecard p {
  font: italic 400 18px/1.4 var(--vk-font-display);
}
:where([data-vibe="studio"]) .ac-codecard {
  text-align: left;
  padding: 8px 0 20px;
  border-bottom: 1.5px solid var(--vk-color-rule);
}
:where([data-vibe="studio"]) .ac-code {
  font-weight: 500;
  letter-spacing: -0.02em;
}
:where([data-vibe="quiet"]) .ac-codecard {
  text-align: left;
}
.ac-facts {
  row-gap: var(--vk-space-2);
  margin: 0 0 var(--vk-space-5);
  padding: var(--vk-space-4) 0;
  border-top: 1px solid var(--vk-color-line);
  border-bottom: 1px solid var(--vk-color-line);
}
.ac-facts .vk-factlist__term {
  color: var(--vk-color-muted);
}
.ac-facts .vk-factlist__value {
  font-weight: 700;
}
.ac-warn {
  margin-bottom: var(--vk-space-4);
  font-weight: 700;
}
.ac-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.ac-actions .vk-button {
  flex: 1 1 160px;
}
.ac-outcome h1 {
  margin-bottom: var(--vk-space-3);
}
.ac-outcome .ac-facts {
  margin-top: var(--vk-space-4);
}

/* The backup-code grid: ten codes in two columns of mono. */
.ac-codes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 16px;
  margin: var(--vk-space-4) 0;
  padding: var(--vk-space-4);
  border-radius: var(--vk-radius-md);
  background: var(--vk-color-raised);
  font: 500 1.0625rem/1.4 var(--vk-font-mono);
  letter-spacing: 0.04em;
}
.ac-codes li {
  white-space: nowrap;
}

/* The role matrix: who can do what, read-only. */
.ac-matrix {
  width: 100%;
  border-collapse: collapse;
}
.ac-matrix th,
.ac-matrix td {
  padding: 10px 12px 10px 0;
  border-bottom: 1px solid var(--vk-color-line);
  text-align: left;
  vertical-align: top;
}
.ac-matrix thead th {
  font-size: var(--vk-text-sm);
  color: var(--vk-color-muted);
}

/* The recovery countdown: the hold's end as one large figure and its words. */
.ac-countdown {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--vk-space-4) 0;
  border-top: 1px solid var(--vk-color-line);
  border-bottom: 1px solid var(--vk-color-line);
}
.ac-countdown__figure {
  font: 600 clamp(1.75rem, 1.2rem + 2vw, 2.5rem) / 1.1 var(--vk-font-display);
  font-variant-numeric: tabular-nums;
}

/* The grant checklist on consent: what the app may do, one tick per line. */
.ac-grants {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: var(--vk-space-4) 0;
}
.ac-grants li {
  display: flex;
  gap: 10px;
  align-items: baseline;
}
.ac-grants li::before {
  content: "✓";
  color: var(--vk-color-success-text);
  font-weight: 700;
}

/* 7. Motion: vibekit's motion scale covers its own components; ours has none beyond the skip link. */
@media (prefers-reduced-motion: reduce) {
  .ac-shell * {
    scroll-behavior: auto;
  }
}

/* A long name never widens the page: it is cut with an ellipsis (the menu says it in full). */
.ac-account {
  min-width: 0;
}
.ac-account__name {
  min-width: 0;
  max-width: 14ch;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 420px) {
  .ac-account__name {
    max-width: 7ch;
  }
  .ac-top {
    gap: 4px 8px;
    flex-wrap: wrap;
  }
}