/* Application styles — keep most styling in Tailwind utilities */ /* Shake animation for invalid magic link code */ @keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-8px); } 75% { transform: translateX(8px); } } .animate-shake { animation: shake 0.3s ease-in-out; } /* Trix editor styling */ trix-editor { min-height: 12rem; } trix-editor.trix-content { overflow-y: auto; } /* ── Collapsible sidebar icon rail ───────────────────────────────────────── State lives in localStorage.sidebar and is stamped onto data-sidebar on by the FOUC guard before paint, so the collapsed width never flashes across Turbo visits ( is never replaced by Turbo). Scoped under #app-sidebar (the desktop copy only) so the mobile drawer, which reuses the same nav partials, always shows full labels. Unlayered on purpose: this file loads after the Tailwind build, so these plain selectors beat Tailwind's layered utilities (lg:w-72, lg:pl-72, flex, gap-x-3, px-6). */ #app-sidebar { transition: width 0.15s ease; } #app-content { transition: padding-left 0.15s ease; } /* Width + the decoupled content offset exist only at lg+ (below lg the desktop sidebar is display:none and the content has no left padding). Gate them so a collapsed state on a phone never indents the content. */ @media (min-width: 64rem) { html[data-sidebar="rail"] #app-sidebar { width: 4rem; } html[data-sidebar="rail"] #app-content { padding-left: 4rem; } } /* Tighten the inner column's horizontal padding so a lone icon can center in the 64px rail (expanded keeps px-6). */ html[data-sidebar="rail"] #app-sidebar .sidebar-inner { padding-left: 0.5rem; padding-right: 0.5rem; } /* Hide the text side of every row: labels, badges, section text, the brand wordmark, the profile name, the pin/unpin stars. */ html[data-sidebar="rail"] #app-sidebar .rail-hide { display: none !important; } /* Center each surviving icon: kill the row gap + horizontal padding. */ html[data-sidebar="rail"] #app-sidebar .nav-item, html[data-sidebar="rail"] #app-sidebar .sb-row { justify-content: center; gap: 0; padding-left: 0.5rem; padding-right: 0.5rem; } /* Badge dot — in the rail the numeric badge is hidden, so a dot on the icon of a badged row keeps the "something's waiting" signal. Position/size/color come from Tailwind utilities on the span; only the display toggle lives here. */ .nav-dot { display: none; } html[data-sidebar="rail"] #app-sidebar .has-badge .nav-dot { display: block; } /* Collapse/expand toggle glyph swap, keyed off the same attribute. Default (no data-sidebar attribute / JS off / expanded) shows the collapse glyph, so the button is never an empty box; the rail state swaps to the expand glyph. */ .rail-ico-collapse { display: inline-flex; } .rail-ico-expand { display: none; } html[data-sidebar="rail"] #app-sidebar .rail-ico-collapse { display: none; } html[data-sidebar="rail"] #app-sidebar .rail-ico-expand { display: inline-flex; }