/* tramplus shared app shell — sidebar, page header chrome, mobile drawer.
   SINGLE source of truth for shell styling; the markup and behavior live in
   /shell.js. Every shelled page links, in order:
     /fonts.css → /tokens.css → /shell.css → page stylesheet
   Uses only /tokens.css primitives so it works on every page without app.css. */

/* brand logo (wordmark) */
.brand-logo { display:block; width:auto; }
.brand-logo--sm { height:var(--logo-h-sm); }
.brand-logo--lg { height:var(--logo-h-lg); }

/* avatar — ROOT-4: small green text must be --tp-green-900 */
.avatar { border-radius:50%; background:var(--tp-green-50); color:var(--tp-green-900); display:flex; align-items:center; justify-content:center; font-family:var(--font-body); font-weight:700; flex:none; width:36px; height:36px; font-size:13px; }
.avatar--sm { width:32px; height:32px; font-size:12px; }

/* Cross-document view transitions: on same-origin navigation the sidebar is
   snapshotted as its own frozen group, so it visually stays put while only
   the content column crossfades. Browsers without support just navigate. */
@view-transition { navigation: auto; }
::view-transition-group(tp-sidebar) { animation:none; }
::view-transition-old(tp-sidebar) { animation:none; opacity:0; }
::view-transition-new(tp-sidebar) { animation:none; opacity:1; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation:none; }
}

/* ===== App shell ===== */
.tp-shell { display:flex; min-height:100vh; }
.tp-sidebar { width:var(--sidebar-w); height:100vh; position:fixed; top:0; left:0; background:#fff; border-right:1px solid var(--border-2); display:flex; flex-direction:column; z-index:100; font-family:var(--font-body); view-transition-name:tp-sidebar; }
/* self-contained resets — pages without global box-sizing/button/link resets still render right */
.tp-sidebar, .tp-sidebar *, .tp-sidebar *::before, .tp-sidebar *::after, .tp-header__menu, .tp-scrim { box-sizing:border-box; }
.tp-sidebar button { border:0; background:none; font-family:inherit; cursor:pointer; }
.tp-sidebar a { color:inherit; text-decoration:none; }
.tp-side__logo { padding:20px 20px 16px; display:flex; align-items:center; gap:8px; border-bottom:1px solid var(--border-2); }
.tp-side__nav { flex:1; padding:8px; overflow:auto; display:flex; flex-direction:column; gap:2px; }
.tp-side__sec { padding:16px 12px 6px; font-size:10px; font-weight:600; font-family:var(--font-body); letter-spacing:0.12em; text-transform:uppercase; color:var(--ink-400); }
/* ROOT-5: --tap-min for sidebar links; ROOT-4: active state uses --tp-green-900 */
.tp-side__link { display:flex; align-items:center; gap:10px; width:100%; min-height:var(--tap-min); padding:10px 12px; border-radius:var(--r-sm); font-size:13.5px; font-weight:500; color:var(--ink-500); background:transparent; cursor:pointer; transition:background-color 140ms, color 140ms; text-align:left; }
.tp-side__link:hover { background:var(--ink-50); }
.tp-side__link.is-active { font-weight:600; color:var(--tp-green-900); background:var(--tp-green-50); }
.tp-side__link svg { width:18px; height:18px; flex:none; }
.tp-side__user { position:relative; padding:12px; border-top:1px solid var(--border-2); }
.tp-side__usertrigger { display:flex; align-items:center; gap:10px; width:100%; min-height:var(--tap-min); padding:6px; border-radius:var(--r-sm); text-align:left; cursor:pointer; }
.tp-side__usertrigger:hover { background:var(--ink-50); }
.tp-side__usermeta { flex:1; min-width:0; }
.tp-side__chev { margin-left:auto; display:flex; color:var(--ink-400); transition:transform 150ms ease; }
.tp-side__chev svg { width:16px; height:16px; }
.tp-side__usertrigger[aria-expanded="true"] .tp-side__chev { transform:rotate(180deg); }
/* ROOT-7: menu = 1px border + --sh-2 max */
.tp-side__usermenu { position:absolute; left:12px; right:12px; bottom:calc(100% - 4px); background:#fff; border:1px solid var(--border-2); border-radius:var(--r-md); box-shadow:var(--sh-2); padding:6px; display:flex; flex-direction:column; gap:2px; z-index:60; }
.tp-side__usermenu[hidden] { display:none; }
.tp-side__name { font-size:13px; font-weight:600; color:var(--ink-900); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tp-side__meta { font-size:11px; color:var(--ink-400); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tp-side__settings, .tp-side__signout { display:flex; align-items:center; gap:8px; min-height:var(--tap-min); padding:8px 12px; border-radius:var(--r-sm); font-size:12.5px; font-weight:500; color:var(--ink-400); cursor:pointer; }
.tp-side__settings:hover, .tp-side__signout:hover { background:var(--ink-50); color:var(--ink-900); }
.tp-side__settings.is-active { background:var(--tp-green-50); color:var(--tp-green-900); }
.tp-side__settings svg, .tp-side__signout svg { width:15px; height:15px; }

.tp-main { flex:1; margin-left:var(--sidebar-w); display:flex; flex-direction:column; min-height:100vh; min-width:0; }
/* header z-index 40: above page content, below page overlays/lightboxes (z ≥ 50) */
.tp-header { padding:0 32px; height:60px; display:flex; align-items:center; justify-content:space-between; background:#fff; border-bottom:1px solid var(--border-2); position:sticky; top:0; z-index:40; }
.tp-header h1 { font-family:var(--font-body); font-size:18px; font-weight:600; margin:0; }
/* ROOT-5: menu button ≥44px hit area (padding-based, visual stays compact via svg size) */
.tp-header__menu { display:none; min-width:var(--tap-min); min-height:var(--tap-min); align-items:center; justify-content:center; color:var(--ink-900); border:0; background:none; border-radius:var(--r-sm); padding:10px; cursor:pointer; }
.tp-header__menu svg { width:20px; height:20px; }
.tp-scrim { display:none; position:fixed; inset:0; background:var(--scrim); z-index:90; }

@media (max-width:760px) {
  .tp-sidebar { transform:translateX(-100%); transition:transform 200ms ease; }
  .tp-sidebar.is-open { transform:translateX(0); }
  .tp-main { margin-left:0; }
  .tp-header { padding:0 12px; }
  .tp-header__menu { display:inline-flex; }
  .tp-scrim.is-open { display:block; }
}