/* AccountSidebar — canonical CSS. NOT bundled from here; the orchestrator copies these rules into each consuming section's styles.css. Prefix .acct-sb__ */

/* The shared account navigation column. House language: mono-ink, hierarchy
   from size / weight / letter-spacing — but kept calm: the nav has
   NO hairlines between items. All links stay full ink — hierarchy is WEIGHT, not
   colour: inactive items are regular weight, the active one is bold and marked by
   a small filled ink dot (echoing the avatar circle). No tinted boxes, no shadows,
   no rounded cards — only the pill (badge) and the circle (avatar / active dot) curve.

   Themeable colours arrive on the consuming SECTION's root as --acct-* vars,
   each falling back to a global token then a literal, so every account section
   shares one var convention:
     --acct-text   → ink
     --acct-bg     → cream surface
     --acct-accent → house orange */

.cc_g9rxphy5_zFMELL1xih .acct-sb, .cc_g9rxphy5_tX67wwEaNP .acct-sb, .cc_g9rxphy5_CzVCfpDD5b .acct-sb, .cc_g9rxphy5_QB1R2jqzyk .acct-sb, .cc_g9rxphy5_CS3KPKvon4 .acct-sb {
  display: flex;
  flex-direction: column;
  gap: 32px;
  font-family: var(--font-sans, sans-serif);
  color: var(--acct-text, var(--text-primary, #26231f));
}

/* ===== Profile block ===== */

.cc_g9rxphy5_zFMELL1xih .acct-sb__profile, .cc_g9rxphy5_tX67wwEaNP .acct-sb__profile, .cc_g9rxphy5_CzVCfpDD5b .acct-sb__profile, .cc_g9rxphy5_QB1R2jqzyk .acct-sb__profile, .cc_g9rxphy5_CS3KPKvon4 .acct-sb__profile {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Avatar — solid ink circle, cream initials. */
.cc_g9rxphy5_zFMELL1xih .acct-sb__avatar, .cc_g9rxphy5_tX67wwEaNP .acct-sb__avatar, .cc_g9rxphy5_CzVCfpDD5b .acct-sb__avatar, .cc_g9rxphy5_QB1R2jqzyk .acct-sb__avatar, .cc_g9rxphy5_CS3KPKvon4 .acct-sb__avatar {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--acct-text, var(--text-primary, #26231f));
  color: var(--acct-bg, var(--surface-primary, #f5f2eb));
  font-family: var(--font-display, serif);
  font-size: var(--fs-lg, clamp(16px, 4.4vw, 20px));
  line-height: 1;
  letter-spacing: 1px;
}

.cc_g9rxphy5_zFMELL1xih .acct-sb__identity, .cc_g9rxphy5_tX67wwEaNP .acct-sb__identity, .cc_g9rxphy5_CzVCfpDD5b .acct-sb__identity, .cc_g9rxphy5_QB1R2jqzyk .acct-sb__identity, .cc_g9rxphy5_CS3KPKvon4 .acct-sb__identity {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

/* Name — display serif, the one place Fraunces appears in the sidebar. */
.cc_g9rxphy5_zFMELL1xih .acct-sb__name, .cc_g9rxphy5_tX67wwEaNP .acct-sb__name, .cc_g9rxphy5_CzVCfpDD5b .acct-sb__name, .cc_g9rxphy5_QB1R2jqzyk .acct-sb__name, .cc_g9rxphy5_CS3KPKvon4 .acct-sb__name {
  font-family: var(--font-display, serif);
  font-size: var(--fs-lg, clamp(16px, 4.4vw, 20px));
  font-weight: 400;
  line-height: 1.1;
  color: var(--acct-text, var(--text-primary, #26231f));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Member-since — small tracked ink, muted by opacity (never a second
   colour). */
.cc_g9rxphy5_zFMELL1xih .acct-sb__member, .cc_g9rxphy5_tX67wwEaNP .acct-sb__member, .cc_g9rxphy5_CzVCfpDD5b .acct-sb__member, .cc_g9rxphy5_QB1R2jqzyk .acct-sb__member, .cc_g9rxphy5_CS3KPKvon4 .acct-sb__member {
  font-size: var(--fs-2xs, clamp(11px, 3.2vw, 12px));
  letter-spacing: 2px;
  color: var(--acct-text, var(--text-primary, #26231f));
  opacity: 0.55;
}

/* ===== Nav ===== */

.cc_g9rxphy5_zFMELL1xih .acct-sb__nav, .cc_g9rxphy5_tX67wwEaNP .acct-sb__nav, .cc_g9rxphy5_CzVCfpDD5b .acct-sb__nav, .cc_g9rxphy5_QB1R2jqzyk .acct-sb__nav, .cc_g9rxphy5_CS3KPKvon4 .acct-sb__nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Link / button — clean rows, no rules between them. Every item stays FULL INK:
   hierarchy is weight, never colour. Inactive items are regular weight; the
   active item is bold and marked by a small filled ink dot at its left (echoing
   the avatar circle). Reset native button chrome so settings matches the anchors. */
.cc_g9rxphy5_zFMELL1xih .acct-sb__link, .cc_g9rxphy5_tX67wwEaNP .acct-sb__link, .cc_g9rxphy5_CzVCfpDD5b .acct-sb__link, .cc_g9rxphy5_QB1R2jqzyk .acct-sb__link, .cc_g9rxphy5_CS3KPKvon4 .acct-sb__link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
  padding: 12px 0 12px 24px;
  border: none;
  background: none;
  font-family: inherit;
  font-size: var(--fs-base, clamp(14px, 4.2vw, 16px));
  letter-spacing: 1px;
  text-align: left;
  text-decoration: none;
  color: var(--acct-text, var(--text-primary, #26231f));
  font-weight: 400;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

/* Native button reset — neutralise UA chrome so it matches the anchors. */
.cc_g9rxphy5_zFMELL1xih .acct-sb__link--button, .cc_g9rxphy5_tX67wwEaNP .acct-sb__link--button, .cc_g9rxphy5_CzVCfpDD5b .acct-sb__link--button, .cc_g9rxphy5_QB1R2jqzyk .acct-sb__link--button, .cc_g9rxphy5_CS3KPKvon4 .acct-sb__link--button {
  -webkit-appearance: none;
  appearance: none;
}

/* Hover — a brief opacity dip for interaction feedback only (not hierarchy). */
.cc_g9rxphy5_zFMELL1xih .acct-sb__link:hover, .cc_g9rxphy5_tX67wwEaNP .acct-sb__link:hover, .cc_g9rxphy5_CzVCfpDD5b .acct-sb__link:hover, .cc_g9rxphy5_QB1R2jqzyk .acct-sb__link:hover, .cc_g9rxphy5_CS3KPKvon4 .acct-sb__link:hover {
  opacity: 0.6;
}

/* Active — full ink, bolder weight + the small filled ink dot. No colour shift. */
.cc_g9rxphy5_zFMELL1xih .acct-sb__link--active, .cc_g9rxphy5_tX67wwEaNP .acct-sb__link--active, .cc_g9rxphy5_CzVCfpDD5b .acct-sb__link--active, .cc_g9rxphy5_QB1R2jqzyk .acct-sb__link--active, .cc_g9rxphy5_CS3KPKvon4 .acct-sb__link--active {
  font-weight: 600;
}

.cc_g9rxphy5_zFMELL1xih .acct-sb__link--active::before, .cc_g9rxphy5_tX67wwEaNP .acct-sb__link--active::before, .cc_g9rxphy5_CzVCfpDD5b .acct-sb__link--active::before, .cc_g9rxphy5_QB1R2jqzyk .acct-sb__link--active::before, .cc_g9rxphy5_CS3KPKvon4 .acct-sb__link--active::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-radius: 50%;
  background: var(--acct-text, var(--text-primary, #26231f));
}

.cc_g9rxphy5_zFMELL1xih .acct-sb__link:focus-visible, .cc_g9rxphy5_tX67wwEaNP .acct-sb__link:focus-visible, .cc_g9rxphy5_CzVCfpDD5b .acct-sb__link:focus-visible, .cc_g9rxphy5_QB1R2jqzyk .acct-sb__link:focus-visible, .cc_g9rxphy5_CS3KPKvon4 .acct-sb__link:focus-visible {
  outline: 2px solid var(--acct-text, var(--border-strong, #26231f));
  outline-offset: 2px;
}

.cc_g9rxphy5_zFMELL1xih .acct-sb__link-label, .cc_g9rxphy5_tX67wwEaNP .acct-sb__link-label, .cc_g9rxphy5_CzVCfpDD5b .acct-sb__link-label, .cc_g9rxphy5_QB1R2jqzyk .acct-sb__link-label, .cc_g9rxphy5_CS3KPKvon4 .acct-sb__link-label {
  white-space: nowrap;
}

/* Favourites count — small outline pill (ink border, transparent fill). */
.cc_g9rxphy5_zFMELL1xih .acct-sb__badge, .cc_g9rxphy5_tX67wwEaNP .acct-sb__badge, .cc_g9rxphy5_CzVCfpDD5b .acct-sb__badge, .cc_g9rxphy5_QB1R2jqzyk .acct-sb__badge, .cc_g9rxphy5_CS3KPKvon4 .acct-sb__badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  box-sizing: border-box;
  border: 1px solid var(--acct-text, var(--border-strong, #26231f));
  border-radius: var(--radius-pill, 999px);
  background: transparent;
  font-size: var(--fs-2xs, clamp(11px, 3.2vw, 12px));
  line-height: 1;
  color: var(--acct-text, var(--text-primary, #26231f));
}

/* ===== Logout ===== */

/* A quiet secondary action: full ink (no grey), set apart only by its smaller
   size + underline and aligned under the nav labels, separated from the nav by
   whitespace. The underline thickens on hover. */
.cc_g9rxphy5_zFMELL1xih .acct-sb__logout, .cc_g9rxphy5_tX67wwEaNP .acct-sb__logout, .cc_g9rxphy5_CzVCfpDD5b .acct-sb__logout, .cc_g9rxphy5_QB1R2jqzyk .acct-sb__logout, .cc_g9rxphy5_CS3KPKvon4 .acct-sb__logout {
  align-self: flex-start;
  margin-top: 4px;
  padding-left: 24px;
  width: 100%;
  box-sizing: border-box;
  background: none;
  font-family: inherit;
  font-size: var(--fs-sm, clamp(13px, 3.7vw, 14px));
  letter-spacing: 1px;
  color: var(--acct-text, var(--text-primary, #26231f));
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  cursor: pointer;
  transition: text-decoration-thickness 0.2s ease;
}

.cc_g9rxphy5_zFMELL1xih .acct-sb__logout:hover, .cc_g9rxphy5_tX67wwEaNP .acct-sb__logout:hover, .cc_g9rxphy5_CzVCfpDD5b .acct-sb__logout:hover, .cc_g9rxphy5_QB1R2jqzyk .acct-sb__logout:hover, .cc_g9rxphy5_CS3KPKvon4 .acct-sb__logout:hover {
  text-decoration-thickness: 2px;
}

.cc_g9rxphy5_zFMELL1xih .acct-sb__logout:focus-visible, .cc_g9rxphy5_tX67wwEaNP .acct-sb__logout:focus-visible, .cc_g9rxphy5_CzVCfpDD5b .acct-sb__logout:focus-visible, .cc_g9rxphy5_QB1R2jqzyk .acct-sb__logout:focus-visible, .cc_g9rxphy5_CS3KPKvon4 .acct-sb__logout:focus-visible {
  outline: 2px solid var(--acct-text, var(--border-strong, #26231f));
  outline-offset: 3px;
}

/* ===== Mobile — collapse to a compact horizontal strip (≤899px) =====
   Per doc §2.1 the sidebar moves above the content and condenses. The nav
   becomes a horizontally scrollable row (no horizontal PAGE scroll); the active
   item's dot becomes a short tick under its label; logout sits inline. */

@media (max-width: 899px) {
  .cc_g9rxphy5_zFMELL1xih .acct-sb, .cc_g9rxphy5_tX67wwEaNP .acct-sb, .cc_g9rxphy5_CzVCfpDD5b .acct-sb, .cc_g9rxphy5_QB1R2jqzyk .acct-sb, .cc_g9rxphy5_CS3KPKvon4 .acct-sb {
    gap: 20px;
  }

  .cc_g9rxphy5_zFMELL1xih .acct-sb__profile, .cc_g9rxphy5_tX67wwEaNP .acct-sb__profile, .cc_g9rxphy5_CzVCfpDD5b .acct-sb__profile, .cc_g9rxphy5_QB1R2jqzyk .acct-sb__profile, .cc_g9rxphy5_CS3KPKvon4 .acct-sb__profile {
    gap: 12px;
  }

  .cc_g9rxphy5_zFMELL1xih .acct-sb__avatar, .cc_g9rxphy5_tX67wwEaNP .acct-sb__avatar, .cc_g9rxphy5_CzVCfpDD5b .acct-sb__avatar, .cc_g9rxphy5_QB1R2jqzyk .acct-sb__avatar, .cc_g9rxphy5_CS3KPKvon4 .acct-sb__avatar {
    width: 44px;
    height: 44px;
  }

  .cc_g9rxphy5_zFMELL1xih .acct-sb__nav, .cc_g9rxphy5_tX67wwEaNP .acct-sb__nav, .cc_g9rxphy5_CzVCfpDD5b .acct-sb__nav, .cc_g9rxphy5_QB1R2jqzyk .acct-sb__nav, .cc_g9rxphy5_CS3KPKvon4 .acct-sb__nav {
    flex-direction: row;
    align-items: stretch;
    gap: 4px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .cc_g9rxphy5_zFMELL1xih .acct-sb__nav::-webkit-scrollbar, .cc_g9rxphy5_tX67wwEaNP .acct-sb__nav::-webkit-scrollbar, .cc_g9rxphy5_CzVCfpDD5b .acct-sb__nav::-webkit-scrollbar, .cc_g9rxphy5_QB1R2jqzyk .acct-sb__nav::-webkit-scrollbar, .cc_g9rxphy5_CS3KPKvon4 .acct-sb__nav::-webkit-scrollbar {
    display: none;
  }

  .cc_g9rxphy5_zFMELL1xih .acct-sb__link, .cc_g9rxphy5_tX67wwEaNP .acct-sb__link, .cc_g9rxphy5_CzVCfpDD5b .acct-sb__link, .cc_g9rxphy5_QB1R2jqzyk .acct-sb__link, .cc_g9rxphy5_CS3KPKvon4 .acct-sb__link {
    width: auto;
    flex: 0 0 auto;
    justify-content: center;
    padding: 10px 16px;
  }

  /* Horizontal strip: swap the left dot for a short tick centred under the
     active label. */
  .cc_g9rxphy5_zFMELL1xih .acct-sb__link--active::before, .cc_g9rxphy5_tX67wwEaNP .acct-sb__link--active::before, .cc_g9rxphy5_CzVCfpDD5b .acct-sb__link--active::before, .cc_g9rxphy5_QB1R2jqzyk .acct-sb__link--active::before, .cc_g9rxphy5_CS3KPKvon4 .acct-sb__link--active::before {
    left: 50%;
    top: auto;
    bottom: 0;
    width: 18px;
    height: 2px;
    margin-top: 0;
    border-radius: 0;
    transform: translateX(-50%);
  }

  .cc_g9rxphy5_zFMELL1xih .acct-sb__logout, .cc_g9rxphy5_tX67wwEaNP .acct-sb__logout, .cc_g9rxphy5_CzVCfpDD5b .acct-sb__logout, .cc_g9rxphy5_QB1R2jqzyk .acct-sb__logout, .cc_g9rxphy5_CS3KPKvon4 .acct-sb__logout {
    align-self: flex-start;
    width: auto;
    margin-top: 0;
    padding-left: 0;
  }
}

/* Honour reduced-motion — drop the hover transition to an instant change. */
@media (prefers-reduced-motion: reduce) {
  .cc_g9rxphy5_zFMELL1xih .acct-sb__link, .cc_g9rxphy5_tX67wwEaNP .acct-sb__link, .cc_g9rxphy5_CzVCfpDD5b .acct-sb__link, .cc_g9rxphy5_QB1R2jqzyk .acct-sb__link, .cc_g9rxphy5_CS3KPKvon4 .acct-sb__link {
    transition: opacity 0.15s ease;
  }
}