/* Account-page-only additions (/account/). Reuses .yt-library (paper-sheet
   card), .vod-grid/.vod-card/.watchlist-toggle (watchlist cards), .empty-
   state/.notfound-icon (gate) and .auth-error (form errors) as-is -- this
   file only adds what's genuinely new to this page. */

/* The real cause of this page's mobile overflow: .container (this page's
   own, like every other page's) is a flex column with align-items:center,
   which does NOT stretch a plain block child to the container's width --
   it sizes the child to its own content instead. Every other page puts an
   element with an explicit width:100% (.yt-library itself, .empty-state,
   etc.) directly under .container, so this never came up; #account-app is
   a plain wrapper div with no width of its own sitting in between, so
   .yt-library's width:100% inside it was resolving against #account-app's
   *content-sized* (i.e. as wide as its widest descendant, like .account-
   profile's max-width:640px) width instead of the real viewport -- the
   entire page silently rendered at that width and got clipped back down
   to the visible viewport instead of ever actually being narrow. */
.account-app { width: 100%; }

.account-profile {
  display: flex;
  align-items: center;
  gap: 20px;
  width: 100%;
  max-width: 640px;
  margin: 0 auto 18px;
  padding-bottom: 26px;
  border-bottom: 2px dashed rgba(0, 0, 0, 0.12);
}
:root[data-theme="dark"] .account-profile { border-bottom-color: rgba(255, 255, 255, 0.12); }

.account-avatar-lg {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: "Bebas Neue", sans-serif;
  font-size: 2.1rem;
  letter-spacing: 0.5px;
  border: 4px solid #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  flex-shrink: 0;
}

.account-info { flex: 1 1 0%; min-width: 0; max-width: 100%; }
.account-name-row { display: flex; gap: 10px; align-items: flex-start; }
.account-name-row input {
  flex: 1;
  min-width: 0;
  /* Explicit width, not just flex:1 -- flex:1 only governs sizing along
     the row's own main axis. The mobile media query below switches this
     row to flex-direction:column, where the main axis becomes vertical and
     flex:1 stops affecting the input's WIDTH at all -- without this, the
     input fell back to the browser's plain <input> intrinsic width
     (~170-200px) instead of filling its column, the actual cause of the
     "cut off on the left" mobile bug (the input then forced its ancestors
     wider than the viewport since nothing else in the chain clamped it). */
  width: 100%;
  padding: 9px 12px;
  background: var(--paper);
  color: var(--text-dark);
  border: 2px solid var(--text-muted);
  border-radius: 4px;
  font-family: inherit;
  font-size: 0.95rem;
  transition: border-color 0.2s ease;
}
.account-name-row input:focus-visible { outline: none; border-color: var(--accent-2); box-shadow: 0 0 0 3px rgba(201, 146, 46, 0.25); }
.account-name-form label { display: block; font-size: 0.78rem; font-weight: bold; color: var(--text-muted); margin-bottom: 4px; }
.account-email { margin: 10px 0 0; font-size: 0.85rem; color: var(--text-muted); }
.account-name-saved {
  margin: 6px 0 0; font-size: 0.82rem; font-weight: bold; color: var(--accent-green);
  opacity: 0; transition: opacity 0.3s ease;
}
.account-name-saved.is-visible { opacity: 1; }

.account-avatar-edit-btn {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 10px; padding: 0; border: none; background: none;
  font-size: 0.8rem; font-weight: bold; color: var(--text-muted);
  transition: color 0.2s ease;
}
.account-avatar-edit-btn:hover { color: var(--text-dark); }

/* A sibling of .account-profile in the markup (not a child) -- deliberately,
   so it always sits on its own full-width line below the whole profile row
   regardless of viewport width, instead of becoming a 4th flex item
   squeezed into that row's layout (or needing its own width/wrap logic to
   avoid that). */
.account-avatar-picker {
  width: 100%;
  max-width: 640px;
  margin: 14px auto 0;
  padding: 22px 20px;
  background: rgba(0, 0, 0, 0.03);
  border-radius: 8px;
}
:root[data-theme="dark"] .account-avatar-picker { background: rgba(255, 255, 255, 0.05); }
.account-picker-label { margin: 0 0 10px; font-size: 0.78rem; font-weight: bold; color: var(--text-muted); }
.account-picker-label:not(:first-child) { margin-top: 20px; }

/* max-height + overflow-y:auto -- the color/icon libraries grew well past
   what a single unbounded flex-wrap row can show without pushing the rest
   of the page far down (18 colors, 20+ icons and counting); this caps the
   picker's own height and lets it scroll internally instead. Padding on the
   row itself (not just the panel) keeps the hover scale(1.1) from clipping
   against the scroll container's edge. */
.account-swatch-row { display: flex; flex-wrap: wrap; gap: 12px; max-height: 168px; overflow-y: auto; padding: 4px 2px; }
.account-swatch {
  width: 34px; height: 34px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.6);
  display: flex; align-items: center; justify-content: center; color: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  flex-shrink: 0;
  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.account-swatch:hover { transform: scale(1.1); }
.account-swatch.is-active { border-color: var(--text-dark); }

.account-icon-row { display: flex; flex-wrap: wrap; gap: 12px; max-height: 188px; overflow-y: auto; padding: 4px 2px; }
.account-icon-choice {
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--paper); border: 2px solid rgba(0, 0, 0, 0.12); color: var(--text-dark);
  font-family: "Bebas Neue", sans-serif; font-size: 1.1rem;
  flex-shrink: 0;
  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), border-color 0.2s ease;
}
:root[data-theme="dark"] .account-icon-choice { border-color: rgba(255, 255, 255, 0.16); }
.account-icon-choice:hover { transform: scale(1.1); }
.account-icon-choice.is-active { border-color: var(--accent-2); border-width: 2px; }

/* #account-wl-grid reuses .vod-grid (vods.css) as-is at desktop widths, but
   that class's minmax(280px, 1fr) track minimum is genuinely too tight for
   this page: .yt-library's own padding leaves only ~300px of content width
   on a narrow phone, and CSS Grid never shrinks a track below its declared
   minimum -- it forces the whole grid (and everything downstream sharing
   that horizontal scroll extent) wider than the viewport instead. Vods.js's
   own #vod-grid usage of the same class only ever shows single/double full-
   width cards in a much less cramped context, so it hasn't hit this, but
   this page's grid needs its own, smaller floor. */
#account-wl-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }

.account-wl-more {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  font-weight: bold;
  color: var(--text-dark);
  text-decoration: none;
  transition: transform 0.2s ease;
}
.account-wl-more:hover { transform: scale(1.02); }

.account-danger {
  width: 100%;
  max-width: 640px;
  margin: 46px auto 0;
}
.account-danger-box {
  padding: 22px 26px;
  border: 2px dashed var(--accent-red);
  border-radius: 8px;
}
.account-danger-box p { color: var(--text-muted); line-height: 1.55; margin: 0 0 16px; }
.account-danger-box .p-btn { color: var(--accent-red) !important; border-color: var(--accent-red); }

@media (max-width: 560px) {
  /* Avatar + logout button share a centered top row; .account-info always
     forced onto its own full-width line below via flex-basis:100% --
     explicit, rather than relying on flex-wrap's own judgment call about
     whether a flex:1/min-width:0 item "fits" alongside the other two
     (it technically always does, since it can shrink to ~0, which is
     exactly what produced the illegibly narrow, overflowing column that
     triggered this fix in the first place). */
  .account-profile { flex-wrap: wrap; justify-content: center; text-align: center; }
  .account-avatar-lg { margin: 0 auto; }
  .account-info { flex: 1 1 100%; order: 3; max-width: 100%; }
  .account-logout { order: 2; }
  .account-name-form { text-align: left; }
  .account-name-row { flex-direction: column; }
  .account-name-row button { width: 100%; justify-content: center; }
  /* Explicit block-level centering rather than relying on inherited
     text-align -- .account-avatar-edit-btn is inline-flex, so margin:auto
     alone wouldn't center it without also forcing a fit-content block box. */
  .account-avatar-edit-btn { display: flex; width: fit-content; margin: 10px auto 0; }
  .account-danger-box .p-btn { width: 100%; justify-content: center; }
}