/* Lane A — Account page shell (NEW FILE, 2026-10-31).
 * Scoped to #view-account-page ONLY. No shell styles (left nav, top
 * bar, right rail) are set here, so a last-loaded whole-app restyle
 * sheet can restyle the shell without fighting this page; a restyle
 * rule would only win over these rules if it also targets
 * #view-account-page with equal or higher specificity.
 * Look (reference restyle): clean white canvas, Inter, teal #0F766E
 * accent, flat stream with 1px dividers (not heavy cards), light-grey
 * attachment cards, dark code cards, BLACK Follow pills, teal Post
 * buttons and links. Dark mode fully carried under
 * html[data-theme="dark"] (the app's existing toggle). */

#view-account-page {
  background: #ffffff;
  color: #0f172a;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  max-width: 640px;
  margin: 0 auto;
}
#view-account-page .view-head { border-bottom: 1px solid #e2e8f0; padding-bottom: 12px; }
#view-account-page .dc-note { color: #64748b; }

/* Signed-out prompt */
#view-account-page .account-signedout {
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 16px;
  margin: 16px 0;
  background: #f8fafc;
}
#view-account-page .account-signedout .btn { min-height: 44px; }

/* Cover + header (flat: no heavy card, cover band + content below) */
#view-account-page .account-cover {
  height: 160px;
  border-radius: 16px;
  background: linear-gradient(135deg, #0f766e 0%, #14b8a6 55%, #5eead4 100%);
  overflow: hidden;
}
#view-account-page .account-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
#view-account-page .account-head-main {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-top: -40px;
  padding: 0 8px;
}
#view-account-page .account-avatar-lg {
  width: 96px; height: 96px;
  border-radius: 50%;
  border: 4px solid #ffffff;
  font-size: 32px; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; flex: 0 0 auto;
}
#view-account-page .account-avatar-img.account-avatar-lg { object-fit: cover; }
#view-account-page .account-avatar-sm {
  width: 40px; height: 40px; border-radius: 50%;
  font-size: 15px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; flex: 0 0 auto;
}
#view-account-page .account-avatar-img.account-avatar-sm { object-fit: cover; }
#view-account-page .account-head-text { min-width: 0; flex: 1; }
#view-account-page .account-head-text h3 { margin: 44px 0 0; font-size: 22px; line-height: 1.2; }
#view-account-page .account-handle { color: #64748b; margin: 2px 0 8px; }
#view-account-page .account-head-text p { margin: 6px 0; overflow-wrap: anywhere; }
#view-account-page .account-meta { color: #64748b; font-size: 14px; }
#view-account-page .account-email { font-size: 14px; }
#view-account-page .account-links a { color: #0f766e; margin-right: 12px; }
#view-account-page .account-completeness { font-weight: 700; color: #0f766e; }
#view-account-page .account-stats {
  display: flex; gap: 24px;
  border-top: 1px solid #e2e8f0;
  border-bottom: 1px solid #e2e8f0;
  padding: 12px 8px; margin: 16px 0;
}
#view-account-page .account-stat { display: flex; flex-direction: column; }
#view-account-page .account-stat strong { font-size: 17px; }
#view-account-page .account-stat span { color: #64748b; font-size: 13px; }
#view-account-page .account-actions-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
#view-account-page .account-actions-row .btn { min-height: 44px; border-radius: 999px; padding: 0 18px; }
/* Follow pills BLACK (reference); Post buttons and links stay teal. */
#view-account-page .account-follow-btn {
  background: #000000 !important;
  border-color: #000000 !important;
  color: #ffffff !important;
}
#view-account-page .account-follow-btn[aria-pressed="true"] {
  background: #ffffff !important;
  color: #000000 !important;
}
#view-account-page .btn-primary { background: #0f766e; border-color: #0f766e; }

/* Tab bar: flat stream language, scrollable on mobile, teal underline */
#view-account-page .account-tabs {
  display: flex; gap: 4px;
  overflow-x: auto; white-space: nowrap;
  border-bottom: 1px solid #e2e8f0;
  scrollbar-width: thin;
}
#view-account-page .account-tab {
  background: none; border: none;
  border-bottom: 3px solid transparent;
  padding: 0 14px; min-height: 44px;
  font: inherit; font-weight: 600; color: #475569;
  cursor: pointer; flex: 0 0 auto;
}
#view-account-page .account-tab.is-active { color: #0f766e; border-bottom-color: #0f766e; }
#view-account-page .account-tab:focus-visible { outline: 2px solid #0f766e; outline-offset: 2px; }

/* Settings nav */
#view-account-page .account-settings-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }
#view-account-page .account-sec-btn { min-height: 44px; border-radius: 999px; }
#view-account-page .account-sec-btn.is-active { background: #0f766e; color: #fff; border-color: #0f766e; }
#view-account-page .account-slot {
  border-top: 1px solid #e2e8f0;
  padding: 16px 0;
}
#view-account-page .account-slot:empty { display: none; }
#view-account-page .account-slot label { display: block; margin: 8px 0; }
#view-account-page .account-slot input[type="text"],
#view-account-page .account-slot input[type="url"],
#view-account-page .account-slot input[type="email"],
#view-account-page .account-slot input[type="password"],
#view-account-page .account-slot textarea,
#view-account-page .account-slot select {
  width: 100%; box-sizing: border-box;
  min-height: 44px; padding: 10px 12px;
  border: 1px solid #e2e8f0; border-radius: 12px;
  font: inherit; background: #fff; color: inherit;
}
#view-account-page .account-slot .btn { min-height: 44px; }

/* Composer (owner, Posts tab) */
#view-account-page .account-composer {
  border-bottom: 1px solid #e2e8f0;
  padding: 16px 0;
}
#view-account-page .account-composer-row { display: flex; gap: 12px; }
#view-account-page .account-composer textarea {
  flex: 1; min-width: 0;
  border: none; resize: vertical;
  font: inherit; font-size: 17px;
  background: transparent; color: inherit;
}
#view-account-page .account-reply-pill {
  display: inline-block;
  margin: 8px 0 8px 52px;
  border: 1px solid #ccfbf1; border-radius: 999px;
  padding: 4px 12px; color: #0f766e; font-size: 13px; font-weight: 600;
}
#view-account-page .account-reply-pill select {
  border: none; background: transparent; color: #0f766e; font: inherit; font-weight: 600;
}
#view-account-page .account-composer-foot {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  margin-left: 52px;
}
#view-account-page .account-composer-foot .btn { min-height: 44px; border-radius: 999px; }
#view-account-page .account-composer-foot .btn-primary { margin-left: auto; }
#view-account-page .account-attach-btn { color: #0f766e; }
#view-account-page #account-composer-media {
  flex: 1 1 220px; min-height: 44px;
  border: 1px solid #e2e8f0; border-radius: 12px; padding: 10px 12px; font: inherit;
}

/* Flat post rows: 1px dividers, no heavy cards */
#view-account-page .account-stream { display: block; }
#view-account-page .account-post {
  border-bottom: 1px solid #e2e8f0;
  padding: 16px 0;
}
#view-account-page .account-post-head { display: flex; gap: 12px; align-items: flex-start; }
#view-account-page .account-post-meta { min-width: 0; }
#view-account-page .account-post-handle { color: #64748b; font-size: 14px; }
#view-account-page .account-pinned-label { color: #0f766e; font-weight: 700; font-size: 13px; margin: 8px 0 0 52px; }
#view-account-page .account-repost-note { color: #64748b; font-size: 14px; margin: 8px 0 0 52px; }
#view-account-page .account-post-body { margin: 8px 0 8px 52px; line-height: 1.55; overflow-wrap: anywhere; }
#view-account-page .account-tags { margin: 0 0 8px 52px; }
#view-account-page .account-hashtag { color: #0f766e; font-weight: 600; margin-right: 6px; }
/* Light-grey attachment cards */
#view-account-page .account-media {
  margin: 8px 0 8px 52px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 12px; overflow: hidden;
}
#view-account-page .account-media img,
#view-account-page .account-media video { width: 100%; display: block; }
#view-account-page .account-media-error { padding: 12px; color: #64748b; }
/* Dark code cards (JetBrains Mono for code only) */
#view-account-page .account-code {
  margin: 8px 0 8px 52px;
  background: #111827; color: #e5e7eb;
  border-radius: 12px; overflow: hidden;
}
#view-account-page .account-code-bar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 12px; border-bottom: 1px solid #374151; font-size: 13px;
}
#view-account-page .account-code-bar .btn { color: #e5e7eb; min-height: 36px; }
#view-account-page .account-code pre {
  margin: 0; padding: 12px; overflow-x: auto;
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px; line-height: 1.5;
}
#view-account-page .account-poll { margin: 8px 0 8px 52px; background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 12px; padding: 12px; }
/* Action bar: real counts only, from the store */
#view-account-page .account-actions {
  display: flex; flex-wrap: wrap; gap: 4px;
  margin: 8px 0 0 52px;
}
#view-account-page .account-action {
  background: none; border: none; cursor: pointer;
  color: #475569; font: inherit; font-size: 14px;
  min-height: 44px; padding: 0 10px; border-radius: 999px;
}
#view-account-page .account-action.is-on { color: #0f766e; font-weight: 700; }
#view-account-page .account-comments,
#view-account-page .account-edit,
#view-account-page .account-delete {
  margin: 8px 0 0 52px;
}
#view-account-page .account-comments input[type="text"],
#view-account-page .account-edit textarea {
  width: 100%; box-sizing: border-box; min-height: 44px;
  border: 1px solid #e2e8f0; border-radius: 12px; padding: 10px 12px; font: inherit;
}
#view-account-page .account-empty { padding: 24px 0; color: #64748b; }

/* Projects: grid + detail as today, flat cards */
#view-account-page .account-project-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px;
  margin-top: 16px;
}
#view-account-page .account-project {
  background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 16px; padding: 14px;
}
#view-account-page .account-project-title { background: none; border: none; cursor: pointer; color: #0f766e; font: inherit; padding: 0; text-align: left; }

/* Mobile: cover/avatar/stats/tab bar must not overflow */
@media (max-width: 560px) {
  #view-account-page .account-cover { height: 120px; border-radius: 0; }
  #view-account-page .account-head-main { margin-top: -32px; padding: 0; }
  #view-account-page .account-avatar-lg { width: 72px; height: 72px; font-size: 24px; }
  #view-account-page .account-head-text h3 { margin-top: 36px; font-size: 19px; }
  #view-account-page .account-stats { gap: 16px; }
  #view-account-page .account-post-body,
  #view-account-page .account-tags,
  #view-account-page .account-media,
  #view-account-page .account-code,
  #view-account-page .account-poll,
  #view-account-page .account-actions,
  #view-account-page .account-comments,
  #view-account-page .account-edit,
  #view-account-page .account-delete,
  #view-account-page .account-pinned-label,
  #view-account-page .account-repost-note { margin-left: 0; }
  #view-account-page .account-reply-pill,
  #view-account-page .account-composer-foot { margin-left: 0; }
}

/* Dark mode (app toggle: html[data-theme="dark"]) */
html[data-theme="dark"] #view-account-page { background: #0f172a; color: #e2e8f0; }
html[data-theme="dark"] #view-account-page .view-head,
html[data-theme="dark"] #view-account-page .account-stats,
html[data-theme="dark"] #view-account-page .account-tabs,
html[data-theme="dark"] #view-account-page .account-slot,
html[data-theme="dark"] #view-account-page .account-composer,
html[data-theme="dark"] #view-account-page .account-post { border-color: #334155; }
html[data-theme="dark"] #view-account-page .account-signedout,
html[data-theme="dark"] #view-account-page .account-project { background: #1e293b; border-color: #334155; }
html[data-theme="dark"] #view-account-page .account-media,
html[data-theme="dark"] #view-account-page .account-poll { background: #1e293b; border-color: #334155; }
html[data-theme="dark"] #view-account-page .account-handle,
html[data-theme="dark"] #view-account-page .account-meta,
html[data-theme="dark"] #view-account-page .account-empty,
html[data-theme="dark"] #view-account-page .dc-note,
html[data-theme="dark"] #view-account-page .account-post-handle { color: #94a3b8; }
html[data-theme="dark"] #view-account-page .account-tab,
html[data-theme="dark"] #view-account-page .account-action { color: #94a3b8; }
html[data-theme="dark"] #view-account-page .account-tab.is-active,
html[data-theme="dark"] #view-account-page .account-action.is-on { color: #5eead4; }
html[data-theme="dark"] #view-account-page .account-avatar-lg { border-color: #0f172a; }
html[data-theme="dark"] #view-account-page .account-links a,
html[data-theme="dark"] #view-account-page .account-hashtag,
html[data-theme="dark"] #view-account-page .account-completeness,
html[data-theme="dark"] #view-account-page .account-attach-btn,
html[data-theme="dark"] #view-account-page .account-project-title { color: #5eead4; }
html[data-theme="dark"] #view-account-page .account-reply-pill { border-color: #134e4a; color: #5eead4; }
html[data-theme="dark"] #view-account-page .account-reply-pill select { color: #5eead4; }
html[data-theme="dark"] #view-account-page .account-composer textarea { color: #e2e8f0; }
html[data-theme="dark"] #view-account-page .account-slot input,
html[data-theme="dark"] #view-account-page .account-slot textarea,
html[data-theme="dark"] #view-account-page .account-slot select,
html[data-theme="dark"] #view-account-page #account-composer-media,
html[data-theme="dark"] #view-account-page .account-comments input[type="text"],
html[data-theme="dark"] #view-account-page .account-edit textarea { background: #1e293b; border-color: #334155; color: #e2e8f0; }
/* Dark-mode Follow pill: inverted for contrast (light-mode pill stays BLACK per reference). */
html[data-theme="dark"] #view-account-page .account-follow-btn {
  background: #ffffff !important;
  border-color: #ffffff !important;
  color: #000000 !important;
}
html[data-theme="dark"] #view-account-page .account-follow-btn[aria-pressed="true"] {
  background: #0f172a !important;
  color: #ffffff !important;
}