/* Orbit visual identity, with readable type, concise content and clear actions.
   Research and measured checks: ../docs/UX-RESEARCH.md. */
:root {
  --purple: #6734be;
  --purple-hover: #54249f;
  --text: #292337;
  --muted: #655e70;
  --green: #236247;
  --danger: #a32943;
  --line: #ded9e6;
  --font: 'Segoe UI', system-ui, -apple-system, sans-serif;
  --display: var(--font);
}

/* Real authentication and network states share the existing Orbit palette. */
.portal-notice { margin: 20px 0; }
.portal-loading { display: flex; align-items: center; gap: 12px; }
.portal-steps { margin: 0; padding-left: 22px; }
.portal-steps li + li { margin-top: 10px; }
.login-form-container .disclosure { margin-top: 24px; }
.login-form-container .discord-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  padding: 12px 18px;
  border: 1px solid transparent;
  border-radius: 10px;
  font-weight: 600;
  text-decoration: none;
  text-align: center;
}
.discord-button:disabled { opacity: .65; cursor: not-allowed; }
.account-role { cursor: default; }
.login-hint .text-button { color: var(--brand); font: inherit; min-height: 44px; }
[aria-busy="true"] { cursor: progress; }
body { font-size: 16px; line-height: 1.55; }
button, a, summary { touch-action: manipulation; }
:is(button,a,input,select,textarea,summary):focus-visible {
  outline: 3px solid #6734be; outline-offset: 3px;
  box-shadow: 0 0 0 3px white;
}
html { scroll-padding-top: 110px; }
button, input, summary, a { scroll-margin: 100px 0 24px; }
.skip-link { left: 16px; }
.page { max-width: 1560px; margin-inline: auto; padding: 32px; }
.page, .page>* { animation: none; }
.sidebar-footer>div { min-width: 0; flex: 1; }
.sidebar-footer p { font-size: 12px; white-space: normal; }
.page-heading { margin-bottom: 24px; }
.page-heading h1 { font-size: clamp(26px,2.5vw,34px); line-height: 1.2; letter-spacing: -.7px; }
.page-heading p { font-size: 16px; color: var(--muted); max-width: 65ch; margin-top: 8px; }
.section-heading h2, .section-card-heading h2 { font-size: 21px; }
.section-heading p, .section-card-heading p { font-size: 14px; color: var(--muted); }
.btn, .btn-sm, .tab, .filter-select, .role-trigger, .nav-item { font-size: 14px; min-height: 44px; }
.btn { white-space: normal; text-align: center; }
.btn-soft { color: #5729a0; }
.btn-danger { color: var(--danger); }
.icon-button, .view-switch button, .calendar-toolbar .icon-button { min-width: 44px; min-height: 44px; }
.icon { stroke-width: 1.8; }
.icon-sm { width: 18px; height: 18px; }
.nav-label, .workspace-tag, .nav-soon { font-size: 12px; }
.sidebar-footer p, .sidebar-footer strong { font-size: 14px; }
.sidebar .orbit-card { display: none; }
.sidebar-footer { margin-top: 28px; }
.sidebar { scrollbar-gutter: stable; }
.topbar { gap: 14px; }
.breadcrumb { min-width: 0; }
.topbar .role-trigger { white-space: nowrap; }
.prototype-strip { font-size: 14px; }
.prototype-strip button { min-height: 44px; font-size: 14px; }
.prototype-strip strong { font-weight: 600; }
.page-footer { font-size: 13px; }
.page-footer button { min-height: 44px; }
.home-hero-grid { grid-template-columns: minmax(0,1.65fr) minmax(260px,1fr); gap: 24px; }
.hero.hero-call { min-height: 340px; padding: 28px; }
.hero-call .hero-content { max-width: 80%; }
.hero-call h2, .hero-content h2 { font-size: clamp(25px,2.5vw,34px); max-width: 22ch; line-height: 1.25; }
.hero-eyebrow { font-size: 12px; letter-spacing: 1px; }
.hero-call .hero-facts, .hero-coach, .hero-call .hero-coach strong { font-size: 16px; }
.hero-call .hero-art { opacity: .38; transform: scale(.8); right: -110px; }
.hero-call .hero-action { gap: 10px; margin-top: 24px; }
.hero-call .hero-action .btn { font-size: 14px; min-height: 44px; }
.hero-coach-note { display: none; }
.hero-call .hero-orbit-signature { display: none; }
.hero .reminder-status { font-size: 14px; color: #e4daf5; }
.hero .hero-facts, .hero .hero-facts span, .hero .hero-coach { color: #f6f0ff; }
.week-card { padding: 24px; }
.week-card h3 { font-size: 18px; }
.week-month, .plan-event-info>span, .plan-foot, .personal-plan-empty p { font-size: 14px; color: var(--muted); }
.plan-event-info>strong { font-size: 16px; }
.personal-plan-event { padding: 16px 0; }
.plan-state { display: none; }
.community-strip { display: none; }
.summary-row { gap: 12px; }
.summary-card { display: flex; align-items: center; padding: 16px; gap: 12px; }
.summary-card h3 { font-size: 26px; }
.summary-card p { font-size: 14px; color: var(--muted); }
.summary-card .summary-icon { margin: 0; }
.compact-stats { display: flex; flex-wrap: wrap; gap: 12px 28px; color: var(--muted); margin-bottom: 24px; }
.compact-stats>span { display: inline-flex; gap: 8px; align-items: center; }
.compact-stats strong { color: var(--text); }
.compact-call { border-top: 3px solid #d1beed; }
.compact-call .call-body { padding: 22px; }
.compact-call .call-topline { flex-wrap: wrap; gap: 12px; }
.compact-call .category { display: inline-flex; gap: 6px; align-items: center; font-size: 14px; color: var(--muted); }
.call-title { margin-top: 18px; font-size: 20px; line-height: 1.35; min-height: 0; max-width: none; }
.call-title button { text-align: left; }
.call-time-block { font-size: 14px; gap: 6px; margin-top: 18px; }
.call-time-block strong { font-size: 16px; }
.coach-line { margin-top: 18px; gap: 10px; }
.coach-line strong { font-size: 16px; }
.coach-line p { font-size: 14px; color: var(--muted); }
.pill, .call-topline .pill { font-size: 13px; }
.pill-gray { color: #5f576c; background: #f0edf4; }
.pill-green { color: #236247; background: #eaf6ed; }
.pill-purple { color: #5729a0; background: #efe8fc; }
.pill-red { color: #a32943; background: #fff1f3; }
.call-footer { margin-top: auto; padding-top: 18px; }
.call-body { gap: 0; }
.compact-call .call-footer { margin-top: 20px; }
.call-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.reminder-status { font-size: 14px; color: var(--muted); margin-top: 16px; }
.reminder-status.is-planned { color: #236247; }
.reminder-status p { font-size: 14px; }
.manage-row { padding: 24px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 24px; }
.manage-row:last-child { border-bottom: 0; }
.manage-row-info { flex: 1; min-width: 0; }
.manage-row h2 { font-size: 18px; line-height: 1.4; margin: 8px 0; }
.manage-row h2 button { text-align: left; }
.manage-row p { font-size: 14px; color: var(--muted); }
.manage-row-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.disclosure { border-top: 1px solid var(--line); margin-top: 18px; font-size: 16px; }
.disclosure summary { padding: 14px 0; min-height: 48px; cursor: pointer; color: #5729a0; font-weight: 600; }
.disclosure-content { padding: 0 0 14px; max-width: 70ch; }
.disclosure-content p { color: var(--muted); margin-bottom: 12px; line-height: 1.6; }
.disclosure-danger summary { color: var(--danger); }
.disclosure-danger { margin-top: 24px; }
.dialog { width: 660px; max-width: calc(100vw - 32px); max-height: calc(100dvh - 32px); }
.dialog-header { padding: 24px; align-items: flex-start; }
.dialog-header h2 { font-size: 24px; line-height: 1.3; }
.dialog-header p { font-size: 14px; color: var(--muted); }
.dialog-body { padding: 24px; }
.dialog-footer { position: sticky; bottom: 0; z-index: 2; background: #fff; padding: 18px 24px; box-shadow: 0 -5px 15px #29233708; flex-wrap: wrap; }
.dialog-footer .btn { font-size: 14px; min-height: 44px; }
.detail-title { font-size: 24px; line-height: 1.3; margin: 16px 0; }
.concise-facts { display: grid; grid-template-columns: 1fr; gap: 16px; margin: 24px 0; }
.detail-fact strong { font-size: 16px; }
.detail-fact p, .detail-description { font-size: 16px; }
.detail-fact p { font-size: 14px; }
.detail-reminder-panel { margin-top: 0; padding: 16px; }
.detail-reminder-panel>.reminder-status { margin-top: 0; }
.detail-reminder-panel .disclosure { font-size: 14px; }
.reminder-preference { align-items: center; font-size: 14px; }
.toggle { position: relative; border: 0; width: 52px; height: 44px; min-height: 44px; min-width: 52px; background: transparent !important; flex-shrink: 0; }
.toggle::before { content: ''; position: absolute; left: 2px; top: 10px; width: 48px; height: 24px; border-radius: 24px; background: #786f86; }
.toggle[aria-checked="true"]::before { background: var(--purple); }
.toggle::after { position: absolute; left: 5px; top: 13px; width: 18px; height: 18px; transform: none; }
.toggle[aria-checked="true"]::after { left: 5px; transform: translateX(24px); }
.reminder-preference>label { flex: 1; }
.detail-link { font-size: 14px; align-items: flex-start; }
.detail-link a { overflow-wrap: anywhere; }
.field label, .field-label { font-size: 16px; }
.field small, .form-hint, .optional { font-size: 14px; color: var(--muted); }
.input, .filter-select { min-height: 46px; font-size: 16px; }
.field .input { border-color: #93899f; }
.form-grid { gap: 16px; }
.note { font-size: 14px; }
.change-review { margin-top: 24px; padding: 20px; background: #f4effc; border: 1px solid #a78bcf; border-radius: 12px; }
.change-review h3 { font-size: 20px; margin-bottom: 12px; }
.change-review p { font-size: 16px; }
.change-review dl { margin: 16px 0; }
.change-review dl>div { margin-bottom: 16px; }
.change-review dt { font-weight: 600; }
.change-review dd { margin: 4px 0 0; font-size: 14px; overflow-wrap: anywhere; }
.change-review dd span, .change-review dd strong { display: block; }
.change-review dd span { color: var(--muted); }
.setting-row h3 { font-size: 16px; }
.setting-row p, .small, .role-access-card p, .role-menu-description { font-size: 14px; color: var(--muted); }
.agenda-session h3 { font-size: 20px; }
.agenda-time strong { font-size: 18px; }
.agenda-time span, .agenda-context p { font-size: 14px; }
.agenda-date-heading { font-size: 18px; }
.agenda-context-line { font-size: 14px; }
.calendar-cell .cell-day { font-size: 14px; }
.calendar-guidance, .calendar-call-count { font-size: 14px; }
.notification-row h3, .search-result h3 { font-size: 16px; }
.notification-row p, .search-result p, .notification-row time { font-size: 14px; }
.empty-state h3 { font-size: 20px; }
.empty-state p { font-size: 16px; }
.archive-banner h3 { font-size: 18px; }
.archive-banner p { font-size: 14px; }
.popover { max-height: calc(100dvh - 90px); overflow-y: auto; }
.role-option { min-height: 64px; }
@media (max-width: 1200px) {
  .home-hero-grid { grid-template-columns: 1fr; }
  .personal-plan { display: none; }
  .manage-row { align-items: flex-start; flex-direction: column; gap: 16px; }
  .manage-row-actions { width: 100%; }
  .hero-call .hero-art { right: -20px; }
}
@media (max-width: 800px) {
  .page { padding: 24px 20px; }
  .topbar { padding: 12px 16px; gap: 8px; }
  .topbar .mobile-menu { display: inline-flex; width: auto; gap: 6px; padding: 0 8px; color: var(--text); font-size: 14px; }
  .breadcrumb { display: none; }
  .topbar-right { margin-left: auto; gap: 4px; }
  .topbar .role-trigger { padding: 8px; font-size: 14px; }
  .prototype-strip { padding: 4px 20px; gap: 8px; }
  .prototype-explainer { display: none; }
  .prototype-strip>span { gap: 6px; }
  .prototype-strip button { font-size: 13px; }
  .prototype-strip button .icon { display: none; }
  .hero.hero-call { min-height: 0; padding: 24px; }
  .hero-call .hero-content { max-width: 100%; }
  .hero-call .hero-art { right: -110px; opacity: .15; }
  .hero-call h2, .hero-content h2 { max-width: 100%; font-size: 28px; }
  .hero-eyebrow { font-size: 11px; }
  .hero-call .hero-facts { gap: 12px; }
  .hero-action .btn { min-height: 44px; }
  .summary-row { display: flex; flex-wrap: wrap; }
  .summary-card { flex: 1 1 140px; padding: 14px; }
  .summary-card h3 { font-size: 23px; }
  .summary-card .summary-icon { display: none; }
  .compact-stats { gap: 8px 18px; font-size: 14px; margin-bottom: 16px; }
  .compact-stats .icon { width: 18px; }
  .management-filter-bar { margin: 16px 0; }
  .management-filter-bar .tabs { width: 100%; flex-wrap: wrap; }
  .tab { min-height: 44px; font-size: 14px; padding: 10px; }
  .filter-controls { flex-wrap: wrap; }
  .filter-controls .select-wrap select { font-size: 14px; min-height: 44px; }
  .filter-controls .select-wrap { min-width: 130px; }
  .manage-row { padding: 20px; }
  .manage-row-actions .btn { flex: 1; }
  .manage-row h2 { font-size: 18px; }
  .compact-call .call-body { padding: 20px; }
  .call-title { font-size: 20px; max-width: 100%; }
  .coach-line strong { font-size: 16px; }
  .call-list-content h3 { font-size: 18px; }
  .call-list-row .call-meta { font-size: 14px; }
  .call-list-row { padding: 18px; }
  .agenda-toolbar { gap: 16px; }
  .agenda-toolbar .tabs { width: 100%; }
  .agenda-toolbar .tab { white-space: normal; }
  .calendar-cell { min-height: 60px; }
  .calendar-call-count { font-size: 11px; }
  .dialog { max-width: calc(100vw - 16px); max-height: calc(100dvh - 16px); }
  .dialog-header, .dialog-body { padding: 20px; }
  .dialog-header h2 { font-size: 22px; }
  .dialog-footer { padding: 16px 20px; }
  .dialog-footer .btn { flex: 1; min-width: 120px; }
  .detail-title { font-size: 23px; }
  .form-grid { grid-template-columns: 1fr; }
  .input { width: 100%; min-width: 0; }
  .field small { font-size: 14px; }
  .disclosure summary { font-size: 16px; }
  .section-heading .text-link { font-size: 14px; min-height: 44px; }
  .page-footer { display: block; font-size: 12px; }
  .page-footer>span:first-child { max-width: none; display: block; }
  .page-footer>span { flex-wrap: wrap; margin-top: 12px; }
  .popover { width: min(360px,calc(100vw - 32px)); right: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .btn:hover, .call-card:hover { transform: none; }
}

/* Review round 2: stable cards, long-content reflow and accessible dense views. */
.compact-call .call-body { display: flex; flex-direction: column; flex: 1; }
.compact-call .call-topline { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.compact-call .call-title { min-height: 2.7em; margin-bottom: 0; }
.compact-call .call-footer { margin-top: auto; padding-top: 24px; }
.call-actions .btn, .call-footer .btn, .call-card .enroll-button { min-height: 44px; font-size: 14px; }
.call-card .reminder-status { margin-bottom: 0; }
.call-title, .manage-row h2, .detail-title, .hero-call h2, .notification-content, .search-result, .plan-event-info, .attendee-info { overflow-wrap: anywhere; min-width: 0; }
.compact-call .category { overflow-wrap: anywhere; }
.text-button { overflow-wrap: anywhere; }
.notification-content .text-button { min-height: 44px; font-size: 14px; }
.notification-row time, .notification-row p, .search-result p { color: var(--muted); }
.load-more { display: flex; align-items: center; justify-content: center; gap: 20px; padding: 24px 0; font-size: 14px; color: var(--muted); flex-wrap: wrap; }
.draft-notice { background: #f4effc; border: 1px solid #a78bcf; border-radius: 12px; padding: 20px; margin-bottom: 24px; }
.draft-notice:focus { outline: 3px solid var(--purple); outline-offset: 2px; }
.draft-notice h3 { font-size: 19px; }
.draft-notice p { font-size: 16px; margin: 10px 0 16px; }
.login-form-container>p, .login-story-content p { font-size: 16px; line-height: 1.6; }
.login-hint, .login-divider, .search-footer { font-size: 14px; }
.login-form-container .discord-button { font-size: 16px; min-height: 48px; background: var(--purple); }
.search-input { font-size: 16px; min-height: 44px; }
.search-result h3 { font-size: 16px; line-height: 1.4; }
.job-row, .delivery-row { min-width: 0; }
.job-row h3, .job-row p, .delivery-row strong, .delivery-row p { overflow-wrap: anywhere; }
.job-row h3 { font-size: 16px; }
.job-row p, .activity-entry p, .delivery-row p, .lab-clock, .lab-footnote, .connection-step p { font-size: 14px; }
.lab-actions .btn { font-size: 14px; min-height: 44px; }
.job-row .spacer, .delivery-row>div { min-width: 0; }
.attendee-row .reminder-status { margin-top: 5px; }
@media (max-width: 800px) {
  .compact-call .call-title { min-height: 0; }
  .call-topline .status-pills { min-height: 27px; }
  .notification-row .notification-content { min-width: 0; }
  .notification-row .text-button { font-size: 14px; }
  .calendar-header { flex-wrap: wrap; gap: 12px; }
  .calendar-toolbar { margin-left: 0; }
  .section-card-heading { flex-wrap: wrap; gap: 12px; }
  .job-row { flex-wrap: wrap; }
  .job-row>.spacer { flex-basis: calc(100% - 64px); }
  .job-row>.pill { margin-left: 44px; }
  .load-more { gap: 12px; }
  .draft-notice { padding: 16px; }
  .draft-notice .btn { width: 100%; }
  .search-dialog .search-footer { font-size: 12px; flex-wrap: wrap; }
  .login-form-side { padding: 24px; }
  .login-form-container h2 { font-size: 28px; }
}