/* Shared My menu presentation. Existing account and settings actions are kept. */
.my-hub {
  width: 100%;
  max-width: 760px;
  margin-inline: auto;
  padding-bottom: 24px;
  color: var(--ink, #302b33);
}
.my-hub-header, .my-hub-heading { margin: 4px 0 22px; }
.my-hub .my-hub-header h1,
.my-hub .my-hub-header h2,
.my-hub .my-hub-heading h2 { margin: 0 0 7px; font-family: var(--font-b, sans-serif); font-size: 28px; font-weight: 700; line-height: 1.3; letter-spacing: -.04em; }
.my-hub-header p, .my-hub-heading p { margin: 0; color: var(--ink-2, #726b77); font-size: 13px; line-height: 1.6; }
.my-shortcuts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 22px; }
.my-hub .my-shortcut,
.my-hub .my-shortcuts > .note-my-link-card,
.my-hub .my-shortcuts > .nn-entry {
  box-sizing: border-box; min-width: 0; max-width: none; min-height: 88px; margin: 0; padding: 0;
  border: 1px solid var(--line, #e8e3e8); border-radius: 16px;
  background: var(--surface, #fff); box-shadow: none;
}
.my-hub .my-shortcuts h3 { margin: 0 0 6px; font: inherit; font-size: 14px; font-weight: 650; }
.my-hub .my-shortcuts p { margin: 0 0 8px; font-size: 12px; line-height: 1.5; color: var(--ink-2, #726b77); }
.my-hub .my-shortcuts .note-link,
.my-hub .my-shortcuts .world-link,
.my-hub .my-shortcuts .nn-trigger { box-sizing: border-box; display: flex; align-items: center; justify-content: flex-start; gap: 10px; width: 100%; min-height: 86px; height: 100%; margin: 0; padding: 14px 16px; border: 0; border-radius: 15px; background: none; color: var(--ink, #23264a); font-family: var(--font-b, sans-serif); font-size: 14px; font-weight: 600; line-height: 1.5; text-align: left; text-decoration: none; }
.my-hub .my-shortcuts [data-notifications-slot] { height: 100%; }
.my-hub .my-shortcuts .nn-trigger::before { color: var(--accent-ink, #a93263); content: ''; flex: none; width: 26px; height: 26px; background: currentColor; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8a6 6 0 0 0-12 0c0 7-3 7-3 9h18c0-2-3-2-3-9M10 21h4'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat; }
.my-hub .my-shortcuts .nn-trigger::after { color: var(--accent-ink, #a93263); content: '→'; flex: none; margin-left: auto; }
.my-hub .my-shortcuts .nn-badge { flex: none; min-width: 20px; min-height: 20px; padding: 2px 5px; font-size: 11px; }
.my-hub .my-shortcuts .note-link:hover,
.my-hub .my-shortcuts .world-link:hover,
.my-hub .my-shortcuts .nn-trigger:hover { background: var(--surface-2, #f8f5f8); }
.my-hub .my-shortcuts :is(.note-link, .world-link, .nn-trigger):focus-visible { outline: 2px solid var(--accent-ink, #a93263); outline-offset: -3px; }
.my-hub .my-shortcuts .nl-arrow { margin-left: auto; color: var(--accent-ink, #a93263); }
.my-hub .my-shortcuts .nl-logo img { display: block; width: 26px; height: 26px; }
.my-menu-group {
  display: block; margin: 0 0 10px; padding: 0;
  border: 1px solid var(--line, #e8e3e8); border-radius: 16px;
  background: var(--surface, #fff); color: var(--ink, #302b33);
  overflow: clip;
}
.my-menu-group[hidden], .my-hub [hidden] { display: none !important; }
.my-menu-summary {
  box-sizing: border-box;
  display: flex; align-items: center; gap: 12px; min-height: 76px;
  margin: 0; padding: 16px 18px; list-style: none; cursor: pointer;
  user-select: none; -webkit-tap-highlight-color: transparent;
}
.my-menu-summary::-webkit-details-marker { display: none; }
.my-menu-summary::marker { content: ''; }
.my-menu-summary::after {
  content: ''; flex: none; width: 7px; height: 7px; margin: 0 4px 0 auto;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); color: var(--ink-2, #726b77); transition: transform .16s ease;
}
.my-menu-group[open] > .my-menu-summary::after { transform: rotate(225deg); }
.my-menu-summary:hover { background: var(--surface-2, #f8f5f8); }
.my-menu-summary:focus-visible { outline: 2px solid var(--accent-ink, #a93263); outline-offset: -3px; border-radius: 14px; }
.my-menu-icon {
  display: grid; place-items: center; flex: none; width: 36px; height: 36px;
  border-radius: 11px; color: var(--accent-ink, #a93263);
  background: var(--accent-soft, #fcf0f5); font-size: 17px; line-height: 1;
}
.my-menu-icon svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.my-menu-copy { display: grid; gap: 3px; min-width: 0; }
.my-menu-title { font-size: 15px; line-height: 1.45; font-weight: 650; letter-spacing: -.02em; }
.my-menu-caption { color: var(--ink-2, #726b77); font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.my-menu-body { box-sizing: border-box; padding: 4px 18px 20px; }
.my-menu-group[open] > .my-menu-summary { margin-bottom: 8px; }
.my-menu-body > .set,
.my-menu-body > .ojjuda-guide-entry {
  max-width: none; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none;
}
.my-menu-body > .set + .set,
.my-menu-body > .set + .ojjuda-guide-entry,
.my-menu-body > .ojjuda-guide-entry + .set {
  margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line, #e8e3e8);
}
.my-menu-body h3 { margin: 0 0 12px; font-size: 14px; line-height: 1.5; font-weight: 600; }
.my-menu-body .row, .my-menu-body .line-row { flex-wrap: wrap; gap: 10px; }
.my-menu-body .field, .my-menu-body input { min-width: 0; max-width: 100%; }
.my-menu-body .note { font-size: 12px; line-height: 1.6; }
.my-menu-body p, .my-menu-body a { overflow-wrap: anywhere; }
.my-menu-link { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; padding: 10px 12px; color: var(--ink, #302b33); font-size: 14px; text-decoration: none; border-radius: 9px; }
.my-menu-link:hover { background: var(--surface-2, #f8f5f8); }
.my-hub #note-help-actions .support-entry { display: flex; width: 100%; justify-content: flex-start; min-height: 44px; padding: 10px 12px; border: 0; border-radius: 9px; background: none; color: var(--ink-2, #726b77); font-size: 14px; font-weight: 400; }
.my-hub #note-help-actions .support-entry:hover { background: var(--surface-2, #f8f5f8); }
.my-menu-body .seg { flex-wrap: wrap; }
.my-menu-body .moods { display: flex; flex-wrap: wrap; }
.my-hub .my-admin-group { margin-top: 22px; }
.my-hub .my-admin-group .my-menu-icon { color: var(--ink-2, #726b77); background: var(--surface-2, #f8f5f8); }
/* Note retains the same menu nodes while moving them between My and sidebar. */
.my-hub #note-my-tools-slot { max-width: none; }
.my-hub .note-account-section { margin: 0; padding: 0; border: 0; }
.note-account-menu .my-menu-group:has(#side-tools):not(:has(#note-member-info:not([hidden]), #note-blocks:not([hidden]))) { display: none; }
.my-hub .note-account-menu .note-account-actions { gap: 3px; }
.my-hub .note-account-menu .nav-button,
.my-hub .note-account-menu .side-tools .note-tools .button {
  min-height: 44px; border-radius: 9px; padding: 10px 12px; font-size: 14px;
}
.my-hub .note-account-menu .note-tools { display: grid; gap: 3px; }
.my-hub .note-account-menu .note-tools .button { width: 100%; justify-content: flex-start; text-align: left; }
.my-hub .note-account-menu .ojjuda-guide-entry { margin: 16px 0 0; padding: 16px 12px 0; border: 0; border-top: 1px solid var(--line, #e8e3e8); border-radius: 0; background: none; }
.my-hub .note-account-menu .ojjuda-guide-entry p { font-size: 12px; }
.my-hub .note-account-name { margin: 0 12px 5px; }
.my-hub .note-account-email { font-size: 12px; }
.my-hub .side-caption { margin: 14px 4px 0; font-size: 11px; line-height: 1.5; color: var(--ink-2, #726b77); }
.my-hub #note-admin-entry { max-width: none; padding: 0; border-color: var(--line, #e8e3e8); }
.my-hub #note-admin-entry > .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; margin: 0 18px 18px; padding: 10px 16px; border: 1px solid var(--accent, #c83d77); border-radius: 12px; background: var(--accent, #c83d77); color: var(--on-accent, #fff); font: inherit; font-size: 14px; cursor: pointer; }
.side .my-menu-group { margin-bottom: 8px; border-color: transparent; border-radius: 12px; background: none; }
.side .my-menu-summary { min-height: 48px; padding: 8px 10px; gap: 9px; }
.side .my-menu-icon { width: 28px; height: 28px; border-radius: 8px; }
.side .my-menu-title { font-size: 13px; }
.side .my-menu-caption { display: none; }
.side .my-menu-body { padding: 4px 0 10px; }
.side .my-menu-group[open] > .my-menu-summary { margin-bottom: 0; }
@media (max-width: 599px) {
  .my-hub { padding-bottom: 18px; }
  .my-hub-header, .my-hub-heading { margin-bottom: 18px; }
  .my-shortcuts { gap: 10px; margin-bottom: 18px; }
  .my-hub .my-shortcut, .my-hub .my-shortcuts > .note-my-link-card, .my-hub .my-shortcuts > .nn-entry { padding: 0; min-height: 84px; }
  .my-hub .my-shortcuts :is(.note-link, .world-link, .nn-trigger) { min-height: 82px; padding: 12px; gap: 8px; }
  .my-menu-summary { min-height: 72px; padding: 14px; gap: 10px; }
  .my-menu-body { padding: 4px 14px 18px; }
  .my-menu-caption { font-size: 12px; }
  .my-menu-body .sws { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) { .my-menu-summary::after { transition: none; } }

/* Compact functional groups in the shared World menu. */
.my-hub .my-section-title{margin:24px 4px 10px;color:var(--ink-2,#726b77);font-size:13px;font-weight:650;line-height:1.5}
.my-hub .my-menu-summary{min-height:62px;padding-block:12px}
.my-hub .my-admin-group{margin-top:10px}

.world-profile-avatar{display:block;flex:none;width:64px;height:64px;border-radius:50%;object-fit:cover;background:var(--accent-soft,#eee5fa)}
.world-profile-placeholder{display:grid;place-items:center;color:var(--accent-ink,#765492)}
.visit-heading{display:flex;gap:10px;align-items:center;margin-bottom:12px}.visit-heading .h2{font-size:20px;flex:1;min-width:0;overflow-wrap:anywhere;margin:0}.visit-heading .btn{flex:none}
.visit-profile{display:flex;gap:14px;align-items:center;padding:20px;background:var(--surface,#fff);border-radius:18px;margin-bottom:16px}.visit-profile p{margin:6px 0 0;overflow-wrap:anywhere;color:var(--ink-2,#726b77)}
.visit-home #panel{margin-top:16px}.visit-home #panel .seg{display:flex;flex-wrap:wrap}.visit-home #panel .seg button{flex:1 1 70px;min-width:0}

.profile-photo-entry{display:flex;align-items:center;gap:14px;width:100%;margin:0 0 20px;padding:0;border:0;background:none;color:var(--accent-ink,#765492);font:inherit;cursor:pointer;text-align:left}.profile-photo-entry .world-profile-avatar{width:76px;height:76px}.profile-photo-entry:focus-visible{outline:2px solid currentColor;outline-offset:5px;border-radius:12px}
.pcard .pc-av .world-profile-avatar{width:100%;height:100%}

/* Two compact menu tiles per row; opened settings use the full reading width. */
.world-menu-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;align-items:start;}
.world-menu-grid>.my-hub-heading,.world-menu-grid>.my-shortcuts,.world-menu-grid>.my-section-title{grid-column:1 / -1;}
.world-menu-grid>.my-shortcuts{grid-template-columns:minmax(0,1fr);margin-bottom:4px;}
.world-menu-grid>.my-menu-group{min-width:0;margin:0;}
.world-menu-grid>.my-menu-group[open]{grid-column:1 / -1;}
.world-menu-grid .my-menu-summary{gap:8px;min-height:72px;padding:12px;}
.world-menu-grid .my-menu-icon{width:28px;height:28px;border-radius:9px;}
.world-menu-grid .my-menu-title{font-size:13px;overflow-wrap:anywhere;}
.world-menu-grid>.my-section-title{margin:12px 2px 0;}
.world-menu-grid .ju-charge-entry{width:100%;text-align:left;border:0;background:transparent;color:inherit;}
.world-menu-grid .ju-charge-entry::after{content:none;}