/* The studio look (public/ui-land.css) for the inner public pages: /login/ (+ reset), /app/* and
   /legal/*. Load it after the page's own stylesheet and after /ui-land.css.
   Member pages draw everything from the --m-* tokens of public/member.css, so most of the change
   is new token values; the rest covers the few spots those pages hard-code. */

:root {
  --m-bg: var(--naka-canvas);
  --m-surface: var(--naka-surface);
  --m-surface-2: var(--naka-surface-soft);
  --m-blue-soft: var(--naka-brand-soft);
  --m-ink: var(--naka-ink);
  --m-ink-2: var(--naka-ink-secondary);
  --m-ink-3: var(--naka-ink-muted);
  --m-line: var(--naka-line);
  --m-line-strong: var(--naka-line-strong);
  --m-brand: var(--naka-brand);
  --m-brand-ink: var(--naka-brand-text);
  --m-grad: linear-gradient(0deg, var(--naka-brand), var(--naka-brand));
  --m-shadow-sm: var(--naka-shadow-card);
  --m-shadow-lg: var(--naka-shadow-raised);
  --m-shadow-btn: none;
  --m-radius: var(--naka-radius-panel);
  --m-font: var(--naka-font-body);
  --m-display: var(--naka-font-display);
}
body.member-ui { background: var(--m-bg); }

/* ---------- one floating white bar for every inner page ---------- */
.member-ui .glass-nav.auth-topbar, .member-ui .glass-nav.app-topbar, .doc-topbar {
  position: sticky; top: 12px; z-index: 50;
  width: min(100% - 32px, 1240px); height: 64px; margin: 12px auto 0; padding: 0 10px 0 18px;
  border: 1px solid var(--m-line); border-radius: var(--naka-radius-panel); background: var(--naka-glass-dense); color: var(--ink); box-shadow: var(--u-float);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
:is(.member-ui, .doc-topbar) .brand { font-family: var(--u-display); color: var(--ink); letter-spacing: -.02em; }
:is(.member-ui, .doc-topbar) .brand b { color: var(--logo-blue); }
.member-ui .back-link, .doc-topbar .back {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: var(--naka-radius-control);
  background: var(--u-gray); color: var(--ink); font-size: 13.5px; font-weight: 600;
}
.member-ui .back-link:hover, .doc-topbar .back:hover { background: var(--u-gray-2); color: var(--ink); }
.member-ui .header-divider { background: var(--m-line); }
@media (prefers-reduced-transparency: reduce) {
  .member-ui .glass-nav.auth-topbar, .member-ui .glass-nav.app-topbar, .doc-topbar {
    background: var(--m-surface); -webkit-backdrop-filter: none; backdrop-filter: none;
  }
}

/* app menu: a segmented control, like the home nav */
.member-ui .topbar-nav { gap: 2px; padding: 4px; border-radius: 999px; background: var(--m-surface-2); }
.member-ui .topbar-nav a { min-height: 36px; padding: 0 14px; }
.member-ui .topbar-nav a:hover { background: #fff; color: var(--m-ink); }
.member-ui .topbar-nav a[aria-current="page"] { background: #fff; color: var(--m-ink); box-shadow: 0 1px 3px rgba(13, 27, 51, .08); }
.member-ui .topbar-nav .nav-studio, .member-ui .topbar-nav .nav-studio:hover { background: var(--action); color: var(--ink); box-shadow: none; }
.member-ui .app-topbar [data-account-menu] { margin-left: 6px; }
.member-ui .acct-login { border-color: transparent; background: var(--u-gray); color: var(--ink); }
.member-ui .acct-login:hover { border-color: transparent; background: var(--u-gray-2); }

/* ---------- member pages: shared card, control and action roles ---------- */
.member-ui :is(.m-card, .auth-card, .plan-card, .tool-card, .app-error, .onboarding-inner, .history-section, .account-card,
  .current, .plan-option, .pay, .receipts, .thread-pane, .thread-view, .card-form, .kb-item) { border-color: var(--m-line); box-shadow: var(--naka-shadow-card); }
.member-ui :is(.auth-card, .history-section, .account-card, .current, .pay, .receipts, .thread-pane, .thread-view, .card-form) { border-radius: 24px; }
.member-ui .auth-card { border-radius: 28px; }
.member-ui .onboarding-inner { background: #fff; }
.member-ui :is(.works-button, .works-open, .history-more, .secondary-button, .bot-state, .filter button) { border-color: transparent; background: var(--m-surface-2); }
.member-ui .plan-option:hover { border-color: var(--m-line-strong); }
.member-ui .plan-option[aria-checked="true"] { border-color: var(--m-brand); background: #fff; box-shadow: none; }
.member-ui :is(.primary-button, .m-btn-primary, .account-submit) { background: var(--action); color: var(--ink); box-shadow: none; }
.member-ui :is(.primary-button, .m-btn-primary, .account-submit):hover:not(:disabled) { background: var(--action-hover); transform: none; box-shadow: none; }
.member-ui .provider-button:hover { transform: none; }
.member-ui .signout-button:not(.account-submit) { border-color: transparent; background: var(--m-surface-2); }
.member-ui .signout-button:not(.account-submit):hover { border-color: transparent; background: var(--m-line); }
.member-ui .mode-note { border-color: transparent; }
.member-ui .showcase-mascot { filter: none; }
.member-ui .field input { border-radius: var(--naka-radius-control); border-color: var(--m-line-strong); }
.member-ui :is(.primary-button, .m-btn, .account-submit, .provider-button, .secondary-button, .signout-button, .works-button, .works-open, .history-more) {
  border-radius: var(--naka-radius-control); min-height: var(--naka-control-height); font-family: var(--m-font);
}
.member-ui :is(input, textarea, select):focus-visible { outline-color: var(--naka-focus); }
.member-ui .showcase-list li { border: 0; }
.member-ui .auth-showcase h2 { font-size: 30px; letter-spacing: -.03em; }

/* ---------- /legal/*: same bar, flat white panels ---------- */
.doc-shell { padding-top: 48px; }
.doc-updated { color: var(--ink-3); }
.doc-page h1, .doc-page h2, .doc-contact .doc-phone { font-family: var(--u-display); }
.doc-page h1 { font-size: clamp(32px, 5vw, 48px); letter-spacing: -.03em; }
.doc-page h2 { scroll-margin-top: 96px; }
.doc-lead { color: var(--ink-2); }
.doc-toc, .doc-table-wrap, .doc-contact { border: 0; border-radius: 20px; background: #fff; }
.doc-toc { padding: 18px 22px; }
.doc-toc strong, .doc-crosslinks strong { color: var(--brand); }
.doc-toc a:hover { color: var(--brand); }
.doc-table-wrap th { background: var(--u-gray); color: var(--ink); }
.doc-table-wrap th, .doc-table-wrap td { border-bottom-color: var(--line); }
.doc-page code { background: var(--u-sky); }
.doc-contact .doc-phone { color: var(--brand); }
.doc-crosslinks { border-top-color: var(--line); }
.doc-crosslinks a { border: 0; background: #fff; color: var(--ink); }
.doc-crosslinks a:hover { background: var(--u-gray-2); }

@media (max-width: 980px) {
  .member-ui .glass-nav.app-topbar { height: auto; flex-wrap: wrap; padding: 8px 10px 8px 14px; row-gap: 8px; }
  .member-ui .app-topbar .header-divider, .member-ui .app-topbar .topbar-label { display: none; }
  .member-ui .app-topbar [data-account-menu] { margin-left: auto; }
  .member-ui .topbar-nav { order: 3; flex-basis: 100%; min-width: 0; max-width: 100%; margin-left: 0; justify-content: flex-start; overflow-x: auto; }
  .member-ui .topbar-nav a { flex-shrink: 0; }
}
@media (max-width: 560px) {
  /* app bar: brand + account on the first row, the menu on its own row */
  .member-ui .glass-nav.app-topbar { height: auto; padding: 8px 8px 8px 14px; row-gap: 8px; }
  /* the four menu entries share the row equally, with their short labels (app-nav.js data-short) */
  .member-ui .topbar-nav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: visible; }
  .member-ui .topbar-nav a { justify-content: center; min-width: 0; padding: 0 4px; white-space: nowrap; }
  .member-ui .topbar-nav a[data-short] { font-size: 0; }
  .member-ui .topbar-nav a[data-short]::after { content: attr(data-short); font-size: 12.5px; }
  .member-ui .glass-nav.auth-topbar, .doc-topbar { height: 58px; padding: 0 8px 0 14px; }
  .member-ui .app-topbar [data-account-menu] { margin-left: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .member-ui .workflow-card:hover { transform: none; }
}