/* Nashwa shared desktop system. Loaded after each page's local styles. */
:root {
  --n-bg: #f7f6f2;
  --n-surface: #fffefa;
  --n-surface-soft: rgba(255,255,255,.64);
  --n-ink: #1d1e1a;
  --n-muted: #85877d;
  --n-quiet: #68705e;
  --n-line: rgba(35,36,30,.10);
  --n-accent: #737d64;
  --n-accent-soft: #eceee5;
  --n-radius-sm: 10px;
  --n-radius-md: 14px;
  --n-radius-lg: 22px;
  --n-shadow-soft: 0 12px 32px rgba(28,30,24,.045);
  --n-shadow-float: 0 24px 72px rgba(24,25,21,.15);
  --n-space-1: 8px;
  --n-space-2: 12px;
  --n-space-3: 18px;
  --n-space-4: 28px;
  --n-space-5: 42px;
  --n-ease: cubic-bezier(.22,1,.36,1);
  --n-fast: 180ms;
  --n-medium: 260ms;
}

html { scroll-behavior: smooth; }
body { color: var(--n-ink); }
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid #909b7d !important;
  outline-offset: 3px;
}
button { transition: transform var(--n-fast) var(--n-ease), background var(--n-fast) var(--n-ease), border-color var(--n-fast) var(--n-ease), box-shadow var(--n-fast) var(--n-ease); }
button:disabled { cursor: not-allowed; }

/* Shared sidebar: page-specific markup is intentionally supported. */
.sidebar {
  width: 92px !important;
  padding: 30px 20px 25px !important;
  background: rgba(250,249,246,.91) !important;
  border-right: 1px solid var(--n-line) !important;
  backdrop-filter: blur(28px);
  transition: width 420ms var(--n-ease), box-shadow 420ms var(--n-ease) !important;
}
.sidebar:hover { width: 225px !important; box-shadow: 18px 0 50px rgba(0,0,0,.035); }
.sidebar .nav { gap: 8px !important; }
.sidebar .nav-item { width: 185px !important; height: 46px !important; border-radius: var(--n-radius-md) !important; transition: background var(--n-fast) var(--n-ease), color var(--n-fast) var(--n-ease) !important; }
.sidebar .nav-item:hover { background: rgba(29,31,26,.045) !important; }
.sidebar .nav-item.active { background: rgba(107,117,91,.12) !important; }
.sidebar .nav-item.active .nav-label { color: var(--n-ink) !important; font-weight: 650; }
.sidebar .icon-box { width: 52px !important; min-width: 52px !important; }
.sidebar .nav-icon, .sidebar .icon { width: 22px !important; height: 22px !important; fill: none; stroke: currentColor; stroke-width: 2.05; stroke-linecap: round; stroke-linejoin: round; }
.sidebar .nav-label { color: #73756d !important; font-size: 13px !important; }
.sidebar .nav-item[aria-disabled="true"] { cursor: not-allowed; opacity: .56; }
.sidebar .nav-item[aria-disabled="true"]:hover { background: transparent !important; }
.sidebar .profile { margin-top: auto !important; }

/* Seven shared destinations. The rail stays fixed while labels expand over the gutter. */
body.has-nashwa-nav .sidebar { box-sizing: border-box; width: 92px !important; overflow-x: hidden; overflow-y: auto; }
body.has-nashwa-nav .sidebar .nav { display: flex; flex-direction: column; flex: 0 0 auto; gap: 8px !important; width: 100%; }
body.has-nashwa-nav .sidebar .nav-item { box-sizing: border-box; display: flex; align-items: center; flex: 0 0 44px; width: 100% !important; height: 44px !important; min-height: 44px; overflow: hidden; border-radius: 11px !important; text-decoration: none; color: #62695b; }
body.has-nashwa-nav .sidebar .nav-icon { width: 21px !important; height: 21px !important; stroke-width: 1.8; }
body.has-nashwa-nav .sidebar .icon-box { display: grid; place-items: center; flex: 0 0 51px; width: 51px !important; min-width: 51px !important; }
body.has-nashwa-nav .sidebar .nav-label { flex-shrink: 0; white-space: nowrap; opacity: 0; transform: translateX(-7px); }
body.has-nashwa-nav .sidebar .brand, body.has-nashwa-nav .sidebar .detail-brand { flex: 0 0 100px; }
body.has-nashwa-nav .sidebar:focus-within { width: 225px !important; }
body.has-nashwa-nav .sidebar:focus-within .nav-label,
body.has-nashwa-nav .sidebar:focus-within .brand-name,
body.has-nashwa-nav .sidebar:focus-within .detail-brand-name { opacity: 1; transform: none; }
@media (hover: hover) and (min-width: 761px) {
  body.has-nashwa-nav .sidebar:hover { width: 225px !important; }
  body.has-nashwa-nav .sidebar:hover .nav-label { opacity: 1; transform: none; }
}
@media (max-width: 760px), (hover: none) {
  body.has-nashwa-nav .sidebar, body.has-nashwa-nav .sidebar:hover, body.has-nashwa-nav .sidebar:focus-within { width: 70px !important; padding: 24px 9px !important; }
  body.has-nashwa-nav .sidebar .nav-label { opacity: 0 !important; }
  body.has-nashwa-nav > :is(main,.main,.home,.messages-app) { margin-left: 70px !important; }
}
@media (max-height: 600px) {
  body.has-nashwa-nav .sidebar { padding-top: 16px !important; padding-bottom: 16px !important; }
  body.has-nashwa-nav .sidebar .brand, body.has-nashwa-nav .sidebar .detail-brand { flex-basis: 65px; }
  body.has-nashwa-nav .sidebar .nav { gap: 4px !important; }
}

/* Common editorial header and floating surface treatment. */
.page-header h1, .main > h1, .inbox-header h1 {
  color: var(--n-ink);
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 400;
}
.eyebrow { color: var(--n-muted) !important; letter-spacing: 1.8px !important; }
.subtitle, .section-copy, .page-subtitle { color: var(--n-muted) !important; }
.goal-card, .pact-card, .ascent-card, .mode-card, .progress-card, .player-card, .together-card, .conversation, .completed-item {
  border-color: var(--n-line);
}
.goal-card, .pact-card, .ascent-card, .mode-card, .progress-card, .player-card, .together-card {
  box-shadow: var(--n-shadow-soft);
}
.goal-card, .pact-card, .ascent-card, .mode-card { border-radius: var(--n-radius-lg); }
.goal-card:hover, .pact-card:hover, .ascent-card:hover, .mode-card:hover { box-shadow: 0 18px 40px rgba(28,30,24,.075); }

/* Inputs and floating surfaces share one calm visual language. */
input, select, textarea {
  border-color: #d8d9cf !important;
  background: var(--n-surface) !important;
  color: var(--n-ink) !important;
}
input::placeholder, textarea::placeholder { color: #a1a298; opacity: 1; }
input:focus, select:focus, textarea:focus { border-color: #929c80 !important; box-shadow: 0 0 0 3px rgba(130,143,108,.12); }
dialog, .floating-panel, .attachment-menu, .pact-popover {
  border: 1px solid #dfdfd5 !important;
  border-radius: var(--n-radius-lg) !important;
  box-shadow: var(--n-shadow-float) !important;
}
dialog::backdrop { background: rgba(40,42,35,.30); backdrop-filter: blur(3px); }

/* Shared controls, limited to existing class names so page-specific hierarchy remains. */
.primary, .create-button, .submit, .make-pact, .primary-button, .login-button, .send.has-text {
  border-radius: 12px !important;
}
.primary:hover, .create-button:hover, .submit:hover:not(:disabled), .make-pact:hover:not(:disabled), .primary-button:hover:not(:disabled), .login-button:hover:not(:disabled) { transform: translateY(-1px); }
.quiet-button, .secondary-button, .ghost-button { border-radius: 11px !important; }
.icon-button { border-radius: 50% !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: 1ms !important; }
}

/* Do not show old sample/private content while the account is being resolved. */
.state-pending main{visibility:hidden}
.state-loading{position:absolute;top:100px;left:clamp(24px,15vw,220px);font:400 15px/1.6 -apple-system,BlinkMacSystemFont,sans-serif;color:#68705e}

.cloud-save-note{position:fixed;z-index:60;bottom:18px;left:50%;transform:translateX(-50%);max-width:calc(100% - 40px);width:max-content;margin:0;padding:12px 16px;border:1px solid #d8d9cf;border-radius:12px;background:#fffefa;color:#68705e;font:400 13px/1.5 -apple-system,BlinkMacSystemFont,sans-serif;box-sizing:border-box}
@media(max-width:768px){.cloud-save-note{bottom:calc(84px + env(safe-area-inset-bottom))}.mobile-keyboard-open .cloud-save-note{display:none}}