/* ========================================================================= Orbit — design tokens (light + dark) Light mode is the default. Dark mode applies automatically via prefers-color-scheme, or can be forced with . ========================================================================= */ :root { /* Palette (light mode) */ --c-bg: #fafaf9; --c-surface: #ffffff; --c-surface-alt: #f5f5f4; --c-fg: #1e293b; /* slate-800 */ --c-muted: #64748b; /* slate-500 */ --c-border: #e2e8f0; /* slate-200 */ --c-accent: #4f46e5; /* indigo-600 */ --c-accent-hover: #4338ca; /* indigo-700 */ --c-accent-soft: #eef2ff; /* indigo-50 */ --c-warm: #f59e0b; /* amber-500 */ --c-success-bg: #d1fae5; --c-success-fg: #065f46; --c-warning-bg: #fef3c7; --c-warning-fg: #78350f; --c-error-bg: #fee2e2; --c-error-fg: #991b1b; --c-event-text: #1a1a2e; /* dark text that reads on all pastel chips */ --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06); --shadow: 0 4px 12px rgba(15, 23, 42, 0.08); --shadow-lg: 0 10px 25px rgba(15, 23, 42, 0.10); /* Type */ --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, "Liberation Mono", monospace; /* Rhythm */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px; --space-12: 48px; --radius-sm: 4px; --radius: 8px; --radius-lg: 12px; } @media (prefers-color-scheme: dark) { :root { --c-bg: #0f172a; /* slate-900 */ --c-surface: #1e293b; /* slate-800 */ --c-surface-alt: #334155; /* slate-700 */ --c-fg: #e2e8f0; /* slate-200 */ --c-muted: #94a3b8; /* slate-400 */ --c-border: #334155; /* slate-700 */ --c-accent: #a5b4fc; /* indigo-300 - brighter for dark bg */ --c-accent-hover: #c7d2fe; --c-accent-soft: #1e1b4b; /* indigo-950 */ --c-warm: #fbbf24; --c-success-bg: #065f46; --c-success-fg: #d1fae5; --c-warning-bg: #78350f; --c-warning-fg: #fef3c7; --c-error-bg: #991b1b; --c-error-fg: #fee2e2; --c-event-text: #0f172a; /* pastels stay light; text stays dark */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow: 0 4px 12px rgba(0, 0, 0, 0.4); --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.55); } } /* Explicit overrides (for the future theme switcher). */ html[data-theme="light"] { color-scheme: light; --c-bg: #fafaf9; --c-surface: #fff; --c-surface-alt: #f5f5f4; --c-fg: #1e293b; --c-muted: #64748b; --c-border: #e2e8f0; --c-accent: #4f46e5; --c-accent-hover: #4338ca; --c-accent-soft: #eef2ff; --c-warm: #f59e0b; } html[data-theme="dark"] { color-scheme: dark; --c-bg: #0f172a; --c-surface: #1e293b; --c-surface-alt: #334155; --c-fg: #e2e8f0; --c-muted: #94a3b8; --c-border: #334155; --c-accent: #a5b4fc; --c-accent-hover: #c7d2fe; --c-accent-soft: #1e1b4b; --c-warm: #fbbf24; } /* ========================================================================= Base ========================================================================= */ * { box-sizing: border-box; } html { color-scheme: light dark; } body { margin: 0; font-family: var(--font-sans); background: var(--c-bg); color: var(--c-fg); line-height: 1.5; -webkit-font-smoothing: antialiased; } h1, h2, h3 { line-height: 1.25; margin: 0 0 var(--space-4); } h1 { font-size: 1.75rem; font-weight: 700; letter-spacing: -0.01em; } h2 { font-size: 1.25rem; font-weight: 600; } h3 { font-size: 1rem; font-weight: 600; } p { margin: 0 0 var(--space-4); } a { color: var(--c-accent); text-decoration: none; transition: color 0.15s; } a:hover { color: var(--c-accent-hover); text-decoration: underline; } code { font-family: var(--font-mono); font-size: 0.9em; } hr { border: none; border-top: 1px solid var(--c-border); margin: var(--space-6) 0; } /* ========================================================================= Header / Nav ========================================================================= */ .app-header { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding: var(--space-3) var(--space-6); border-bottom: 1px solid var(--c-border); background: var(--c-surface); } .brand { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 700; font-size: 1.125rem; text-decoration: none; color: var(--c-fg); letter-spacing: -0.01em; } .brand:hover { color: var(--c-accent); text-decoration: none; } .brand svg { color: var(--c-accent); flex-shrink: 0; } .app-header nav { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; } .app-header nav a { color: var(--c-fg); font-size: 0.95rem; } .app-header nav a:hover { color: var(--c-accent); text-decoration: none; } .app-header nav span { color: var(--c-muted); font-size: 0.9rem; } .lang-switcher select { background: var(--c-surface-alt); color: var(--c-fg); border: 1px solid var(--c-border); border-radius: var(--radius-sm); padding: 2px 6px; font-size: 0.85rem; cursor: pointer; } .theme-toggle { background: var(--c-surface-alt); color: var(--c-fg); border: 1px solid var(--c-border); border-radius: var(--radius-sm); padding: 2px 8px; font-size: 0.85rem; font-family: inherit; font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; gap: var(--space-1); line-height: 1.5; } .theme-toggle:hover { background: var(--c-accent-soft); color: var(--c-accent); } .theme-toggle span { display: none; } .theme-toggle[data-theme-mode="auto"] .theme-icon-auto, .theme-toggle[data-theme-mode="light"] .theme-icon-light, .theme-toggle[data-theme-mode="dark"] .theme-icon-dark { display: inline; } /* --- Mobile-redesign elements: neutralised at desktop widths --- */ /* The app-bar context slot and the icon-only affordances only exist for the mobile layout; hide them on desktop so the bar renders exactly as before. */ .app-bar-context { display: none; } .nav-toggle { display: none; } .nav-today__icon, .date-jump__icon, .toolbar-add__icon { display: none; } .more-toggle { display: none; } /* On desktop the ⋯ More wrapper + panel dissolve (display:contents) so their only children — Your name / Manage — rejoin the nav inline, exactly where they sit today. The member-filter
is NOT inside this wrapper; it stays its own below-header panel and needs no desktop rule here. */ .toolbar-more, .more-panel { display: contents; } /* ========================================================================= Main / Layout ========================================================================= */ .app-main { max-width: 1200px; margin: 0 auto; padding: var(--space-6); } .app-footer { text-align: center; padding: var(--space-6); color: var(--c-muted); font-size: 0.85rem; } .app-footer a { color: var(--c-muted); } .app-footer a:hover { color: var(--c-accent); } /* ========================================================================= Flash messages ========================================================================= */ .messages { list-style: none; padding: 0; margin: 0 0 var(--space-4); } .messages li { padding: var(--space-3) var(--space-4); margin-bottom: var(--space-2); border-radius: var(--radius); background: var(--c-warning-bg); color: var(--c-warning-fg); font-size: 0.95rem; } .messages .msg-success { background: var(--c-success-bg); color: var(--c-success-fg); } .messages .msg-error { background: var(--c-error-bg); color: var(--c-error-fg); } .messages .msg-info { background: var(--c-accent-soft); color: var(--c-accent); } /* ========================================================================= Forms ========================================================================= */ form p { margin-bottom: var(--space-3); } label { display: block; font-size: 0.9rem; font-weight: 500; margin-bottom: var(--space-1); color: var(--c-fg); } input[type="text"], input[type="email"], input[type="password"], input[type="date"], input[type="datetime-local"], input[type="number"], textarea, select { width: 100%; padding: var(--space-2) var(--space-3); border: 1px solid var(--c-border); border-radius: var(--radius-sm); background: var(--c-surface); color: var(--c-fg); font-family: inherit; font-size: 0.95rem; transition: border-color 0.15s, box-shadow 0.15s; } input:focus, textarea:focus, select:focus { outline: none; border-color: var(--c-accent); box-shadow: 0 0 0 3px var(--c-accent-soft); } textarea { min-height: 80px; resize: vertical; } button, input[type="submit"] { display: inline-block; background: var(--c-accent); color: white; border: none; border-radius: var(--radius-sm); padding: var(--space-2) var(--space-4); font-family: inherit; font-size: 0.95rem; font-weight: 500; cursor: pointer; transition: background 0.15s; } button:hover, input[type="submit"]:hover { background: var(--c-accent-hover); } /* Secondary-ish pattern: a button that's visually lighter. */ button.secondary, form[method="post"] button[type="submit"][data-style="ghost"] { background: var(--c-surface-alt); color: var(--c-fg); border: 1px solid var(--c-border); } /* ========================================================================= Cards (auth, modal) ========================================================================= */ .auth-card, .modal-card, .event-detail { position: relative; max-width: 560px; margin: var(--space-8) auto; padding: var(--space-6); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-lg); box-shadow: var(--shadow); } .event-detail dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-2) var(--space-4); } .event-detail dt { color: var(--c-muted); font-weight: 500; font-size: 0.9rem; } .event-detail dd { margin: 0; } .event-detail-actions { margin-top: var(--space-6); display: flex; gap: var(--space-3); } /* X close icon for modal-card / event-detail (top-right). */ .modal-close { position: absolute; top: var(--space-3); right: var(--space-3); width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); color: var(--c-muted); font-size: 1.25rem; line-height: 1; text-decoration: none; transition: background 0.15s, color 0.15s; } .modal-close:hover { background: var(--c-surface-alt); color: var(--c-fg); text-decoration: none; } .modal-close:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; } /* Save | Cancel | Delete row for the event modal. */ .form-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); } .form-actions form { display: inline-flex; gap: var(--space-2); margin: 0; } /* Cancel link styled to match secondary button visually. */ .btn-cancel { display: inline-flex; align-items: center; background: var(--c-surface-alt); color: var(--c-fg); border: 1px solid var(--c-border); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-4); font-size: 0.95rem; font-weight: 500; text-decoration: none; } .btn-cancel:hover { background: var(--c-border); color: var(--c-fg); text-decoration: none; } .btn-cancel:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; } /* ========================================================================= Hero / landing ========================================================================= */ .hero { max-width: 640px; margin: var(--space-12) auto; text-align: center; padding: var(--space-8) var(--space-6); } .hero h1 { font-size: 2.5rem; margin-bottom: var(--space-4); } .hero p { color: var(--c-muted); font-size: 1.1rem; margin-bottom: var(--space-6); } .hero .hero-mark { color: var(--c-accent); margin-bottom: var(--space-6); } .hero .hero-mark svg { width: 72px; height: 72px; } .hero .tagline { color: var(--c-fg); font-weight: 500; font-style: italic; } /* ========================================================================= Calendar grid ========================================================================= */ .calendar-root { display: flex; flex-direction: column; gap: var(--space-4); } .calendar-header { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); flex-wrap: wrap; } .calendar-header h1 { margin: 0; } .calendar-header nav { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; font-size: 0.95rem; } .calendar-header nav .date-picker { width: auto; padding: 2px 6px; font-size: 0.9rem; } .calendar-header nav .nav-step-group { display: inline-flex; gap: var(--space-2); } /* Render the nav links as subtle buttons rather than bare strings. */ .calendar-header nav a { padding: 2px 8px; border: 1px solid var(--c-border); border-radius: var(--radius-sm); background: var(--c-surface-alt); color: var(--c-fg); text-decoration: none; } .calendar-header nav a:hover { background: var(--c-accent-soft); border-color: var(--c-accent); color: var(--c-accent); text-decoration: none; } /* The scroll wrapper is a no-op on desktop (the table fills width as before). */ .grid-scroll { width: 100%; } .calendar-grid { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); } .calendar-grid table, .day-grid { width: 100%; border-collapse: collapse; font-size: 0.9rem; } .calendar-grid th, .calendar-grid td, .day-grid th, .day-grid td { border: 1px solid var(--c-border); padding: var(--space-2); vertical-align: top; text-align: left; } .calendar-grid thead th, .day-grid thead th { background: var(--c-surface-alt); color: var(--c-muted); font-weight: 600; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.03em; vertical-align: middle; /* center the month header to match the member-name cells */ } .calendar-grid .day-cell { width: 1%; font-weight: 600; background: var(--c-surface-alt); white-space: nowrap; } .calendar-grid .day-cell a { color: var(--c-fg); font-weight: 600; text-decoration: none; } .calendar-grid .day-cell a:hover { color: var(--c-accent); text-decoration: underline; } .calendar-grid .day-cell__weekday { margin-right: 0.3em; } .days-stepper { text-align: center; padding: var(--space-2); background: var(--c-surface-alt); } .days-stepper-btn { display: inline-block; min-width: 2em; padding: 0 var(--space-2); margin: 0 var(--space-2); border: 1px solid var(--c-border); border-radius: var(--radius-sm); background: var(--c-surface); color: var(--c-fg); font-weight: 600; text-decoration: none; line-height: 1.6; user-select: none; } .days-stepper-btn:hover { background: var(--c-accent-soft); color: var(--c-accent); text-decoration: none; } .days-stepper-btn--disabled { opacity: 0.3; cursor: default; } .days-stepper-btn--disabled:hover { background: var(--c-surface); color: var(--c-fg); } .days-stepper-count { color: var(--c-muted); font-size: 0.9rem; } /* Event chip */ .event { display: block; padding: 3px 8px; margin: 2px 0; border-radius: var(--radius-sm); font-size: 0.8rem; font-weight: 500; line-height: 1.35; cursor: pointer; text-decoration: none; color: var(--c-event-text); transition: filter 0.15s, transform 0.15s; } .event:hover { filter: brightness(0.95); transform: translateY(-1px); text-decoration: none; } .calendar-grid td { min-height: 2.5rem; } /* Empty cells are fully clickable (see cell_add.js) — hint with a pointer. */ .calendar-grid td[data-user-id]:not(:has(.event)) { cursor: pointer; } .cell-add { display: inline-block; margin-top: var(--space-1); font-size: 0.75rem; color: var(--c-muted); text-decoration: none; } .cell-add:hover { color: var(--c-accent); text-decoration: underline; } /* ========================================================================= Member filter panel ========================================================================= */ .member-filter { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius); padding: var(--space-3) var(--space-4); } .member-filter summary { cursor: pointer; font-weight: 500; color: var(--c-muted); list-style: none; } .member-filter summary::before { content: "▸ "; display: inline-block; transition: transform 0.15s; } .member-filter[open] summary::before { transform: rotate(90deg); } .member-filter ul { list-style: none; padding: 0; margin: var(--space-3) 0 0; display: flex; flex-wrap: wrap; gap: var(--space-2); } .member-filter li { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-3); background: var(--c-surface-alt); border: 1px solid var(--c-border); border-radius: var(--radius-sm); cursor: grab; font-size: 0.9rem; } .member-filter li:active { cursor: grabbing; } .member-filter .drag-handle { color: var(--c-muted); font-size: 0.7rem; user-select: none; } /* ========================================================================= Manage page — member list ========================================================================= */ .manage-members { list-style: none; padding: 0; } .manage-members li { padding: var(--space-3) var(--space-4); margin-bottom: var(--space-2); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); } .manage-members small { color: var(--c-muted); } /* ========================================================================= Responsive tweaks ========================================================================= */ @media (max-width: 640px) { .app-header { padding: var(--space-3) var(--space-4); flex-direction: column; align-items: stretch; } .app-header nav { justify-content: center; } .app-main { padding: var(--space-4); } .hero { margin: var(--space-6) auto; padding: var(--space-4); } .hero h1 { font-size: 2rem; } .calendar-grid, .day-grid { font-size: 0.8rem; } .calendar-header { flex-direction: column; align-items: flex-start; } .event-detail h1, .modal-card h1 { padding-right: 40px; } } /* ========================================================================= Day timeline ========================================================================= */ .day-timeline { --px-per-hour: 40px; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); display: grid; grid-template-rows: auto auto 1fr; } .day-timeline-header, .day-timeline-allday, .day-timeline-body { display: grid; grid-template-columns: 60px repeat(var(--dt-cols), 1fr); } .day-timeline-header { background: var(--c-surface-alt); border-bottom: 1px solid var(--c-border); } .day-timeline-gutter-corner, .day-timeline-gutter-label, .day-timeline-column-head { padding: var(--space-2); font-size: 0.8rem; color: var(--c-muted); text-transform: uppercase; letter-spacing: 0.03em; font-weight: 600; border-right: 1px solid var(--c-border); } .day-timeline-column-head:last-child { border-right: none; } .day-timeline-allday { border-bottom: 1px solid var(--c-border); min-height: 32px; } .day-timeline-allday-cell { padding: 2px; border-right: 1px solid var(--c-border); } .day-timeline-allday-cell:last-child { border-right: none; } .day-timeline-body { position: relative; height: calc(24 * var(--px-per-hour)); grid-template-rows: 1fr; background-image: repeating-linear-gradient( to bottom, transparent 0, transparent calc(var(--px-per-hour) - 1px), var(--c-border) calc(var(--px-per-hour) - 1px), var(--c-border) var(--px-per-hour) ); } .day-timeline-hour-gutter { position: relative; height: 100%; border-right: 1px solid var(--c-border); } .day-timeline-hour-label { position: absolute; right: var(--space-2); font-size: 0.75rem; color: var(--c-muted); transform: translateY(-0.6em); } .day-timeline-column { position: relative; height: 100%; border-right: 1px solid var(--c-border); } .day-timeline-column:last-child { border-right: none; } .event--timed { position: absolute; z-index: 1; margin: 0; min-height: 18px; overflow: hidden; padding: 1px 6px; font-size: 0.75rem; line-height: 1.3; box-sizing: border-box; background: var(--c-accent-soft); color: var(--c-event-text); border: 1px solid var(--c-accent); border-radius: var(--radius-sm); white-space: nowrap; text-overflow: ellipsis; } .event--timed .event-time { font-weight: 500; margin-right: 4px; } /* Click-to-create overlay: 24 invisible anchors per column, one per hour. top/height are set inline per element in _day_timeline.html. */ .hour-slot { position: absolute; left: 0; right: 0; display: block; z-index: 0; background: transparent; transition: background 0.1s, opacity 0.1s; } .hour-slot:hover { background: var(--c-accent-soft); opacity: 0.4; } .event-placeholder { visibility: hidden; height: calc(0.8rem + 10px); margin: 2px 0; } .event-placeholder--allday { height: calc(0.8rem + 10px); } @media (max-width: 640px) { .day-timeline { --px-per-hour: 32px; } .day-timeline-column-head { font-size: 0.7rem; } } /* Offline fallback page (standalone; depends only on this stylesheet). */ .offline-page { max-width: 28rem; margin: 0 auto; padding: var(--space-12) var(--space-4); text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--space-4); color: var(--c-fg); } .offline-retry { display: inline-block; margin-top: var(--space-2); padding: var(--space-2) var(--space-6); background: var(--c-accent); color: #fff; border-radius: var(--radius); text-decoration: none; font-weight: 600; } .offline-retry:hover { background: var(--c-accent-hover); } /* ========================================================================= PWA update toast — "a new version is available → Reload" Hidden by default via the [hidden] attribute; pwa.js sets .hidden = false. ========================================================================= */ .pwa-update-toast { position: fixed; left: var(--space-4); right: var(--space-4); bottom: var(--space-4); z-index: 1080; max-width: 560px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) var(--space-4); background: var(--c-surface); color: var(--c-fg); border: 1px solid var(--c-border); border-radius: var(--radius); box-shadow: var(--shadow-lg); font-size: 0.95rem; } /* display:flex above would override the UA [hidden] { display:none }, so the toast would show despite the attribute. Restore hiding explicitly. */ .pwa-update-toast[hidden] { display: none; } .pwa-update-toast button { flex-shrink: 0; background: var(--c-accent); color: white; border: none; border-radius: var(--radius-sm); padding: var(--space-2) var(--space-4); font-family: inherit; font-size: 0.95rem; font-weight: 500; cursor: pointer; transition: background 0.15s; } .pwa-update-toast button:hover { background: var(--c-accent-hover); } .pwa-update-toast button:disabled { opacity: 0.6; cursor: default; } /* ========================================================================= Mobile calendar redesign (≤640px) — see docs/superpowers/specs/2026-06-14-orbit-mobile-layout-design.md Intentionally a SECOND ≤640px block: it overrides the earlier one (the ".app-header { flex-direction: column }" responsive tweaks above) by source order, not specificity. Keep it last so the redesign wins; don't merge the two blocks without re-checking the .app-header / .calendar-header layout. ========================================================================= */ @media (max-width: 640px) { /* --- App bar: brand · context · ☰ on one row; nav becomes a dropdown --- */ .app-header { flex-direction: row; align-items: center; flex-wrap: nowrap; position: relative; gap: var(--space-2); } .app-bar-context { display: inline; color: var(--c-muted); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .app-bar-context:empty { display: none; } .nav-toggle { display: inline-flex; margin-left: auto; /* push ☰ to the far edge */ background: var(--c-surface-alt); color: var(--c-fg); border: 1px solid var(--c-border); border-radius: var(--radius-sm); padding: 2px 10px; font-size: 1.1rem; line-height: 1.4; cursor: pointer; } /* The nav is a dropdown panel taken OUT of flow, so the visible row is just brand · context · ☰ (three children). */ .app-header nav { display: none; position: absolute; top: 100%; right: var(--space-2); left: var(--space-2); z-index: 1050; flex-direction: column; align-items: stretch; gap: var(--space-3); padding: var(--space-3) var(--space-4); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius); box-shadow: var(--shadow-lg); } .app-header.is-nav-open nav { display: flex; } /* The toolbar restructure below is scoped to #calendar-root (the week-grid page only). day_detail.html reuses .calendar-header/.nav but has no #calendar-root id, a different control set, and no app_bar_context to hold its heading — so these rules must NOT bleed onto it (would hide its

and break its nav row). */ /* --- Group name: hide the calendar

; it lives in the app bar now --- */ #calendar-root .calendar-header > h1 { display: none; } /* --- Toolbar: one row --- */ #calendar-root .calendar-header { flex-direction: column; align-items: stretch; } #calendar-root .calendar-header nav { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--space-2); } /* Reorder the in-toolbar controls (no DOM reorder; flex order only). */ #calendar-root .calendar-header nav .nav-step-group:first-of-type { order: 1; } #calendar-root .calendar-header nav .nav-today { order: 2; } #calendar-root .calendar-header nav .nav-step-group:last-of-type { order: 3; } #calendar-root .calendar-header nav .date-jump { order: 4; } #calendar-root .calendar-header nav .toolbar-more { order: 5; } #calendar-root .calendar-header nav .toolbar-add { order: 6; margin-left: auto; } /* Segmented nav group: steps + Today render as one contiguous control. */ #calendar-root .calendar-header nav .nav-step-group, #calendar-root .calendar-header nav .nav-today { gap: 0; } #calendar-root .calendar-header nav .nav-step-group a, #calendar-root .calendar-header nav .nav-today { border-radius: 0; margin: 0; } #calendar-root .calendar-header nav .nav-step-group:first-of-type a:first-child { border-top-left-radius: var(--radius-sm); border-bottom-left-radius: var(--radius-sm); } #calendar-root .calendar-header nav .nav-step-group:last-of-type a:last-child { border-top-right-radius: var(--radius-sm); border-bottom-right-radius: var(--radius-sm); } /* Today: hide the word, show the ⊙ icon. */ .nav-today__label { display: none; } .nav-today__icon { display: inline; } /* Date jump: collapse the native input to icon size, transparent over 📅. */ .date-jump { position: relative; display: inline-flex; width: 2rem; height: 1.9rem; } .date-jump__icon { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 100%; border: 1px solid var(--c-border); border-radius: var(--radius-sm); background: var(--c-surface-alt); } .date-jump .date-picker { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; /* native picker still opens on tap */ border: 0; padding: 0; margin: 0; } /* Add: circular accent button, icon only — the only persistently accent fill. */ .toolbar-add { background: var(--c-accent); border-color: var(--c-accent); color: #fff; border-radius: 50%; width: 2.1rem; height: 2.1rem; display: inline-flex; align-items: center; justify-content: center; padding: 0; flex-shrink: 0; } .toolbar-add:hover { background: var(--c-accent); color: #fff; } .toolbar-add__label { display: none; } .toolbar-add__icon { display: inline; font-size: 1.4rem; line-height: 1; } /* --- ⋯ More dropdown --- */ .more-toggle { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 1.9rem; background: var(--c-surface-alt); color: var(--c-fg); border: 1px solid var(--c-border); border-radius: var(--radius-sm); cursor: pointer; } .toolbar-more { position: relative; display: inline-flex; } .more-panel { display: none; position: absolute; top: 100%; right: 0; z-index: 1040; min-width: 14rem; flex-direction: column; align-items: stretch; gap: var(--space-2); margin-top: var(--space-1); padding: var(--space-3); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius); box-shadow: var(--shadow-lg); } .more-panel.is-open { display: flex; } /* The member-filter
keeps its existing position (a full-width block directly below the toolbar) and its existing .member-filter styling; on a phone that reads as a compact collapsed "Members (n of n)" disclosure one tap below the toolbar. No extra rule needed. */ /* --- Grid: horizontal scroll behind a sticky Day column --- */ /* The .calendar-grid card has `overflow: hidden` + `border-radius` (orbit.css ~line 469). That parent clip would crop the inner scroll container's sticky right-edge shadow and the horizontal scrollbar at the rounded corners, so relax it on mobile; the rounding moves to .grid-scroll instead. */ .calendar-grid { overflow: visible; border-radius: 0; } .grid-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius); } .calendar-grid table { width: auto; min-width: 100%; } /* Member columns: readable floor, truncated header ceiling. */ .calendar-grid thead th:not(:first-child), .calendar-grid tbody td { min-width: 7.5rem; } .calendar-grid thead th:not(:first-child) { max-width: 9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Sticky first column — header "Day" (no class) AND body .day-cell. */ .calendar-grid thead th:first-child, .calendar-grid .day-cell { position: sticky; left: 0; width: 4rem; min-width: 4rem; max-width: 4rem; background: var(--c-surface-alt); box-shadow: 2px 0 4px rgba(0, 0, 0, 0.18); } /* Stacking: scrolling cells lowest, sticky body above, corner header highest. */ .calendar-grid .day-cell { z-index: 2; } .calendar-grid thead th:first-child { z-index: 3; } /* Month/range in the Day header: shrink so it fits the narrow 4rem sticky column. */ .calendar-grid thead th:first-child { font-size: 0.6rem; line-height: 1.15; } /* Two-line day cell layout. */ .calendar-grid .day-cell a { display: flex; flex-direction: column; gap: 1px; line-height: 1.2; } .day-cell__weekday { text-transform: uppercase; font-size: 0.65rem; color: var(--c-muted); letter-spacing: 0.03em; margin-right: 0; } .day-cell__num { font-size: 0.95rem; font-weight: 700; } /* The days-stepper sits in its own block below .grid-scroll (not in the table), so it stays reachable on mobile without horizontal scrolling and needs no special mobile rule here — it inherits the desktop centered layout. */ }