/* css/shell.css */ /* ========================================================================== alliteration. — shell chrome Header, left rail, sub-nav, view host, and the shared component vocabulary (cards, tables, stats, pills) that ported apps can lean on. NO HEX VALUES IN THIS FILE. Everything comes from tokens.css, which is what lets data-app on re-theme the whole surface. ========================================================================== */ * { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; } body { background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; } /* ========================================================================== PERSISTENT CHROME Header and rail never re-render on navigation. Only .main swaps. ========================================================================== */ .hdr { background: var(--card); border-bottom: 1px solid var(--line); padding: 0 24px; display: flex; align-items: center; justify-content: space-between; height: var(--shell-header-h); position: sticky; top: 0; z-index: 200; } .hdr-left { display: flex; align-items: center; gap: 14px; } .brand { display: flex; align-items: center; gap: 12px; cursor: pointer; background: none; border: none; font-family: inherit; padding: 0; text-align: left; } .logomark, .logomark svg { width: 34px; height: 34px; display: block; flex: none; } .wordmark-svg svg { height: 18px; width: auto; display: block; } .hdr-sub { font-size: 11.5px; color: var(--muted); margin-top: 3px; } .hdr-right { display: flex; align-items: center; gap: 14px; } .crumb { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); } .crumb .sep { color: var(--faint); } .crumb .now { color: var(--accent); font-weight: 700; } .avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: var(--on-accent); display: grid; place-items: center; font-size: 12px; font-weight: 700; flex: none; } /* Header bell. Sits between the crumb and the avatar so it is reachable from every app, not just when Notifications itself is open. Clicking it navigates to Notifications (js/shell.js). No badge here anymore — the open count moved to the rail item next to "Notifications" (.rail-badge, same red-circle pattern other apps like ShopStock use), since the small header number wasn't eye-catching enough. */ .bell { position: relative; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; border: none; background: transparent; color: var(--muted); cursor: pointer; flex: none; } .bell:hover { background: var(--bg); color: var(--ink); } .bell:focus-visible { outline: 2px solid var(--notif); outline-offset: 2px; } .shell { display: flex; min-height: calc(100vh - var(--shell-header-h)); } /* ========================================================================== LEFT RAIL App list, with the active app's views expanded beneath it. ========================================================================== */ .rail { width: var(--rail); flex: none; background: var(--card); border-right: 1px solid var(--line); padding: 18px 12px; position: sticky; top: var(--shell-header-h); height: calc(100vh - var(--shell-header-h)); overflow-y: auto; } .rail-label { font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--faint); padding: 0 10px; margin: 4px 0 8px; } .rail-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: none; background: transparent; border-radius: var(--radius-sm); cursor: pointer; font-family: inherit; font-size: 13.5px; font-weight: 600; color: var(--muted); text-align: left; transition: background var(--speed), color var(--speed); } .rail-item:hover { background: var(--bg); color: var(--ink); } .rail-item.active { background: var(--accent-tint); color: var(--accent-deep); } .rail-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* Each app's dot carries ITS OWN color, not the active accent, so the rail reads as a legend. Set inline from registry meta via --dot. */ .rail-item .sq { width: 9px; height: 9px; border-radius: 3px; flex: none; background: var(--dot, var(--dot-idle)); } .rail-badge { margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--radius-pill); background: var(--danger); color: var(--on-accent); font-size: 10.5px; font-weight: 700; display: inline-grid; place-items: center; line-height: 1; } .rail-item.planned { opacity: .6; } .rail-item .tag { margin-left: auto; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--faint); } .rail-hr { height: 1px; background: var(--line); margin: 14px 6px; } .subnav { margin: 4px 0 0; padding-left: 8px; display: flex; flex-direction: column; gap: 1px; } .sub-item { display: block; width: 100%; text-align: left; padding: 7px 10px 7px 20px; border: none; background: transparent; cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 500; color: var(--muted); border-left: 2px solid var(--line); transition: color var(--speed), border-color var(--speed); } .sub-item:hover { color: var(--ink); } .sub-item.active { color: var(--accent-deep); font-weight: 700; border-left-color: var(--accent); } .sub-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } /* ========================================================================== CONTENT REGION ========================================================================== */ /* Full available width. An app that genuinely reads better narrow can opt in by setting max-width on its own container. */ .main { flex: 1; min-width: 0; padding: 26px 28px 70px; max-width: var(--shell-max-w); } .view { animation: fade .18s ease; } @keyframes fade { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } } /* Each mounted app renders into its own host. Only one is visible; hosts persist once mounted so app state survives switching. */ .app-host { display: none; } .app-host.active { display: block; } .page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 22px; flex-wrap: wrap; } .page-title { font-size: 24px; font-weight: 800; letter-spacing: -.02em; } .page-title .dot { color: var(--accent); } .page-sub { font-size: 13px; color: var(--muted); margin-top: 3px; max-width: 74ch; } /* ========================================================================== SHARED COMPONENT VOCABULARY Ported apps can use these instead of shipping their own. Anything an app still needs stays in its own scoped