/* ═══════════════════════════════════════════════════════════════════ GLASS BRIDGE — legacy class names → Liquid Glass ═══════════════════════════════════════════════════════════════════ glass.css is a verbatim copy of the original design system and should stay that way, so nothing here edits it. This file adapts the class vocabulary the Workers rebuild happened to ship with. Two vocabularies need adapting: • The short names (.fld .tbl .top .ghost .sm .tile) that the Hub used and that I copied into the Portal and Tarly Admin. • The .admin-* / .auth-* / .sb-* names I invented for Site Admin. Aliasing rather than rewriting ~90 page files is a deliberate call: the pages themselves work, and find-and-replace across all of them is how subtle breakage gets introduced. New markup should use the glass names directly — everything below is a compatibility layer, and a name can be deleted from here once no page renders it. ═══════════════════════════════════════════════════════════════════ */ /* ── Layout aliases ──────────────────────────────────────────────── */ /* The original had NO wrapper: body was the flex row, with .sidebar and .main as its direct children (glass.css still sets body{display:flex}). The rebuild wraps both in .shell, which therefore becomes a flex ITEM of body — and a flex item does not grow unless told to. Without flex:1 it shrinks to its content width, so .main's own flex:1 resolves against a collapsed parent and the whole page renders as a narrow column beside the sidebar. That was the "acting weird" layout on 2026-08-05. min-width:0 lets wide tables scroll inside instead of forcing .shell wider than the viewport. */ .shell { display: flex; flex: 1; min-width: 0; min-height: 100vh; } .shell > .main, .shell > main { min-width: 0; } .side { /* alias of .sidebar */ width: 232px; min-height: 100vh; flex-shrink: 0; position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column; padding: 14px 12px 14px 14px; background: transparent; border: none; z-index: 5; } .side::before { content: ""; position: absolute; inset: 14px 0 14px 12px; background: var(--glass-1); border: 1px solid var(--edge); border-top-color: var(--edge-top); border-radius: var(--radius-lg); backdrop-filter: var(--blur-md); -webkit-backdrop-filter: var(--blur-md); box-shadow: var(--shadow-2), inset 0 1px 0 var(--edge-top); z-index: -1; } .side > * { position: relative; z-index: 1; } /* Sidebar internals: .brand/.logo, plain , .on, .side-foot, .who/.av */ .side .brand { padding: 18px 16px 14px; display: flex; align-items: center; gap: 10px; } .side .brand b { font-family: Sora, sans-serif; font-size: 1rem; font-weight: 800; letter-spacing: -.02em; color: var(--text); display: block; } .side .brand small { color: var(--muted); font-size: .7rem; letter-spacing: .04em; text-transform: uppercase; } .side .brand .logo { width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: .85rem; color: #1a1204; background: linear-gradient(145deg, var(--amber), var(--amber-strong)); box-shadow: 0 0 14px var(--amber-dim); } .side nav { display: flex; flex-direction: column; gap: 2px; padding: 4px 8px; flex: 1; overflow-y: auto; } .side nav a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--radius); color: var(--subtle); font-size: .84rem; font-weight: 500; text-decoration: none; border: 1px solid transparent; transition: background var(--dur-base), color var(--dur-base); } .side nav a:hover { background: var(--glass-2); color: var(--text); } .side nav a.on { background: var(--glass-3); color: var(--text); border-color: var(--edge); border-top-color: var(--edge-top); box-shadow: inset 0 1px 0 var(--edge-top); } .side nav a.on svg { color: var(--amber); } .side nav svg { width: 16px; height: 16px; flex-shrink: 0; } .side-foot { padding: 10px; display: flex; flex-direction: column; gap: 6px; } .who { display: flex; align-items: center; gap: 9px; padding: 9px 11px; border-radius: var(--radius); background: var(--glass-1); border: 1px solid var(--edge); border-top-color: var(--edge-top); font-size: .8rem; color: var(--subtle); } .av { width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: .72rem; color: #1a1204; background: linear-gradient(145deg, var(--amber), var(--amber-strong)); } /* Rendered as a