/* ==========================================================================
   Bio page editor (2026) - an app screen on the app shell.
   sns.css owns every colour, size, radius, shadow and spacing value via
   tokens; this file adds only the layout that is unique to this page.
   No colour literals, no raw px for spacing, no IDs as selectors, no
   !important. The published bio page (profile.css) is a separate system and
   must never load this file or sns.css.
   ========================================================================== */

/* --- Page frame ------------------------------------------------------------ */

.sns-page.bio-page {
  max-width: 1280px;
  padding-bottom: var(--s-16);
}

.bio-loading {
  padding: var(--s-20) 0;
  text-align: center;
  color: var(--sns-ink-4);
  font-size: var(--fs-base);
}

.bio-grid {
  display: grid;
  grid-template-columns: minmax(0, 56fr) minmax(0, 44fr);
  gap: var(--s-8);
  align-items: start;
}

@media (max-width: 1100px) {
  .bio-grid {
    grid-template-columns: 1fr;
  }
}

.bio-stack {
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
}

.bio-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.bio-card-title {
  margin: 0;
}

.bio-card-note {
  margin: 0;
}

/* --- Topbar actions --------------------------------------------------------- */

.bio-topbar-actions {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

.bio-save-state {
  color: var(--sns-ink-4);
  font-size: var(--fs-sm);
  white-space: nowrap;
}

@media (max-width: 560px) {
  .bio-save-state {
    display: none;
  }
}

/* --- Tabs -------------------------------------------------------------------- */

.bio-tabs {
  margin-bottom: var(--s-6);
}

/* --- Identity row -------------------------------------------------------------- */

.bio-identity {
  display: flex;
  align-items: center;
  gap: var(--s-4);
}

#avatarPrev {
  width: 80px;
  height: 80px;
  flex: none;
  border-radius: var(--r-full);
  background: var(--sns-brand-tint-2);
  color: var(--sns-brand-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-size: var(--fs-sm);
  text-align: center;
}

#avatarPrev img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: var(--r-full);
}

.bio-identity-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}

.bio-identity-text .sns-row-title,
.bio-identity-text .sns-row-sub {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bio-details {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  border-top: 1px solid var(--sns-line);
  padding-top: var(--s-4);
}

/* .bio-fld--wide carries flex-basis 240px, which is a WIDTH in the wrapping
   rows it was written for. This panel is a column, so the same basis became a
   240px height and every wide field rendered as a label and an input floating
   above a void. In a column the fields size to their content. */
.bio-details > .bio-fld {
  flex: 0 0 auto;
}

/* textarea needs auto height: .sns-input sets 44px for single-line fields */
textarea.sns-input {
  height: auto;
  min-height: var(--s-16);
  padding-top: var(--s-3);
  padding-bottom: var(--s-3);
  line-height: 1.6;
  resize: vertical;
}

.bio-fields {
  display: flex;
  gap: var(--s-3);
  flex-wrap: wrap;
}

.bio-fld {
  flex: 1 1 160px;
  min-width: 0;
}

.bio-fld--wide {
  flex: 2 1 240px;
}

.bio-fld--sel {
  flex: 0 1 130px;
  min-width: 110px;
}

.bio-field-label {
  display: block;
  color: var(--sns-ink-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  margin-bottom: var(--s-2);
}

.bio-field-help {
  display: block;
  color: var(--sns-ink-4);
  font-size: var(--fs-sm);
  margin-top: var(--s-1);
}

.bio-check {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 44px;
  cursor: pointer;
}

.bio-check input {
  width: 18px;
  height: 18px;
  flex: none;
  accent-color: var(--sns-brand);
}

/* --- Public link row ------------------------------------------------------------ */

.bio-urlrow .bio-url {
  color: var(--sns-brand-ink);
  font-size: var(--fs-sm);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- Section list --------------------------------------------------------------- */

.bio-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.bio-item {
  display: flex;
  flex-direction: column;
  background: var(--sns-surface);
  border: 1px solid var(--sns-line);
  border-radius: var(--r-md);
  transition: border-color var(--dur-1) var(--ease);
}

.bio-item:hover {
  border-color: var(--sns-line-strong);
}

.bio-item .sns-row {
  border: 0;
  background: transparent;
  border-radius: var(--r-md);
  cursor: pointer;
  width: 100%;
  text-align: left;
}

.bio-item-body {
  display: none;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-4);
  border-top: 1px solid var(--sns-line);
}

.bio-item.is-open .bio-item-body {
  display: flex;
}

.bio-item .sns-row .sns-icon-btn .sns-chevron {
  transition: transform var(--dur-2) var(--ease);
}

.bio-item.is-open .sns-row .sns-chevron {
  transform: rotate(180deg);
}

.bio-grip {
  display: inline-flex;
  flex: none;
  color: var(--sns-ink-4);
  cursor: grab;
}

.bio-grip .sns-icon {
  width: 16px;
  height: 16px;
}

.bio-items {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  border-top: 1px solid var(--sns-line);
  padding-top: var(--s-3);
}

.bio-itemrow {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
}

.bio-itemrow .sns-input {
  flex: 1 1 120px;
  min-width: 0;
}

.bio-itemrow .bio-inp-wide {
  flex: 1.6 1 160px;
}

.bio-itemrow .bio-inp-sel {
  flex: 0 1 118px;
  min-width: 104px;
}

.bio-itemrow .sns-icon-btn {
  flex: none;
}

.bio-foot-actions {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
}

/* --- Username --------------------------------------------------------------------- */

.bio-uname {
  display: flex;
  align-items: stretch;
  background: var(--sns-surface);
  border: 1px solid var(--sns-line);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}

.bio-uname:focus-within {
  border-color: var(--sns-brand);
  box-shadow: var(--sns-focus-ring);
}

.bio-uname .bio-pfx {
  display: flex;
  align-items: center;
  padding: 0 var(--s-1) 0 var(--s-3);
  color: var(--sns-ink-4);
  font-size: var(--fs-sm);
  white-space: nowrap;
}

.bio-uname .sns-input {
  border: 0;
  border-radius: 0;
  flex: 1;
  min-width: 0;
  box-shadow: none;
}

.bio-uname .sns-input:focus {
  box-shadow: none;
}

.bio-status {
  display: block;
  min-height: 18px;
  font-size: var(--fs-sm);
  color: var(--sns-ink-4);
}

.bio-status.is-ok {
  color: var(--sns-success);
}

.bio-status.is-bad {
  color: var(--sns-danger);
}

/* --- Theme picker ------------------------------------------------------------------- */

.bio-theme-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-3);
}

@media (max-width: 560px) {
  .bio-theme-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.themeCard {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-2);
  padding: var(--s-3);
  background: var(--sns-surface);
  border: 1px solid var(--sns-line);
  border-radius: var(--r-md);
  cursor: pointer;
  font-family: inherit;
  transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}

.themeCard:hover {
  border-color: var(--sns-line-strong);
}

.themeCard.sel {
  border-color: var(--sns-brand);
  box-shadow: var(--sns-focus-ring);
}

.tSwatch {
  width: 100%;
  height: 48px;
  border-radius: var(--r-sm);
  display: flex;
  align-items: flex-end;
  gap: 4px;
  padding: var(--s-2);
  border: 1px solid var(--sns-line);
}

.tSwatch i {
  width: 16px;
  height: 16px;
  border-radius: var(--r-full);
  display: block;
}

.tName {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--sns-ink-2);
}

/* --- Live preview: the real published page in a browser frame.
     Same technique as landing.css (.lp-browser / .lp-bio-frame): the iframe
     renders at full width and is scaled down to fit the column. --------------- */

.bio-browser {
  overflow: hidden;
  background: var(--sns-surface);
  border: 1px solid var(--sns-line);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-lg);
  position: sticky;
  top: calc(56px + var(--s-6));
}

.bio-chrome {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  height: 36px;
  padding: 0 var(--s-4);
  background: var(--sns-surface-2);
  border-bottom: 1px solid var(--sns-line);
}

.bio-dot {
  width: 10px;
  height: 10px;
  border-radius: var(--r-full);
  background: var(--sns-line-strong);
}

.bio-address {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 var(--s-3);
  margin-left: var(--s-3);
  overflow: hidden;
  background: var(--sns-surface);
  border: 1px solid var(--sns-line);
  border-radius: var(--r-full);
  color: var(--sns-ink-4);
  font-size: var(--fs-xs);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.bio-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  margin-bottom: var(--s-3);
}

.bio-preview-head .sns-type-meta {
  margin: 0;
}

.bio-browser-body {
  --bio-scale: 0.62;
  position: relative;
  overflow: hidden;
  height: calc(900px * var(--bio-scale));
}

.bio-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(100% / var(--bio-scale));
  height: 900px;
  border: 0;
  transform: scale(var(--bio-scale));
  transform-origin: top left;
  background: var(--sns-surface);
}

.bio-preview-empty {
  padding: var(--s-8) var(--s-6);
  text-align: center;
  color: var(--sns-ink-4);
  font-size: var(--fs-sm);
}

@media (max-width: 1100px) {
  .bio-browser {
    position: static;
  }
}

/* --- Guard: the hidden attribute always hides -------------------------------- */

[hidden] {
  display: none;
}