/* The app as one large rounded surface on the grey canvas, a white side
   menu with a faint indigo fade from its top-left corner. */
body:has(.shell) { padding: 10px; }

/* overflow: clip (not hidden) rounds the corners without making the shell a
   scroll container, which would stop the side menu from sticking. */
.shell {
  display: grid; grid-template-columns: 68px 1fr; min-height: calc(100vh - 20px);
  background: var(--canvas); border: 1px solid var(--line); border-radius: 24px; overflow: clip;
}

/* Side menu (decision 36, reference 77-menu-collapse-v2): starts as a 68px
   column of icons. The icons sit 24px from the left in both states, so they
   never move; only the words fade, and the section names keep their height.
   Opening it widens the menu to 236px. */
.side {
  position: relative; z-index: 30; display: flex; flex-direction: column; width: 236px; padding: 14px 0;
  border-right: 1px solid var(--line); overflow-x: hidden;
  background: radial-gradient(140% 40% at 0% 0%, rgba(49, 46, 129, .08) 0%, rgba(49, 46, 129, 0) 70%), #fff;
}
.side-top { display: flex; align-items: center; gap: 14px; height: 44px; margin: 0 12px 14px; padding-left: 12px; white-space: nowrap; }
.side-tg { display: grid; place-items: center; flex: none; width: 22px; height: 22px; margin-left: -2px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--muted); transition: color .12s ease; }
.side-tg:hover { color: var(--fg); }
.side-tg svg.ico { width: 18px; height: 18px; }
.brand { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.brand b { font-weight: 600; font-size: 15px; }
.brand span { color: var(--faint); font-size: 12px; }
.grp { position: relative; display: flex; align-items: flex-end; height: 34px; padding: 0 0 6px 24px; color: var(--faint); font-size: 11.5px; font-weight: 500; white-space: nowrap; }
/* collapsed, the section name gives way to a short solid divider under the icons */
.grp::after { content: ""; position: absolute; left: 22px; bottom: 13px; width: 24px; height: 1px; background: #e4e4e7; opacity: 0; }
.nav { position: relative; display: flex; align-items: center; gap: 14px; height: 40px; margin: 0 12px; padding-left: 12px; border-radius: 12px; color: var(--side-fg2); font-size: 13.5px; white-space: nowrap; }
.nav svg.ico { width: 18px; height: 18px; }
.nav + .nav { margin-top: 2px; }
.nav:hover { background: #f7f7fa; }
.nav.on { background: var(--accent-soft); color: var(--accent); font-weight: 500; }
.nav .lbl { flex: 1; min-width: 0; }
.nav .badge { margin-right: 12px; background: var(--accent); color: var(--accent-fg); font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: var(--r-pill); }
/* the count on the icon, shown only while collapsed */
.nav-c2 { position: absolute; left: 25px; top: 4px; padding: 0 5px; border-radius: var(--r-pill); background: var(--accent); color: var(--accent-fg); font-size: 10px; font-weight: 600; line-height: 15px; opacity: 0; }
.me { margin: auto 12px 0; padding: 12px; background: #f7f7fa; border-radius: 14px; min-width: 0; white-space: nowrap; }
.me b { display: block; font-weight: 500; font-size: 13px; }
.me span { display: block; color: var(--faint); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; }
.side-tip { position: fixed; z-index: 60; padding: 6px 10px; border-radius: 8px; background: #18181b; color: #fff; font-size: 12.5px; font-weight: 500; white-space: nowrap; pointer-events: none; transition: opacity .12s ease; }
.side-tip:empty { display: none; }

/* Words fade, nothing changes position. */
.brand, .grp, .nav .lbl, .nav .badge, .nav-c2, .me { transition: opacity .16s ease; }
.grp::after { transition: opacity .16s ease; }

/* Decision 33a: on a laptop the side menu is exactly the screen height (less
   the 10px gap and the shell's 1px border, top and bottom), stays put while
   the page scrolls and scrolls on its own when taller than the screen. */
@media (min-width: 900px) {
  .side {
    position: sticky; top: 11px; align-self: start; height: calc(100vh - 22px); height: calc(100dvh - 22px);
    overflow-y: auto; overscroll-behavior: none; border-radius: 23px 0 0 23px;
    transition: width .24s cubic-bezier(.3, .7, .3, 1), box-shadow .2s ease;
  }
  .shell:not(.menu-open) .side { width: 68px; }
  .shell:not(.menu-open) :is(.brand, .nav .lbl, .nav .badge, .me) { opacity: 0; pointer-events: none; }
  .shell:not(.menu-open) .nav-c2 { opacity: 1; }
  .shell:not(.menu-open) .grp { color: transparent; }
  .shell:not(.menu-open) .grp::after { opacity: 1; }
}
/* Wide screens: the menu takes its own width, so opening it pushes the page. */
@media (min-width: 1300px) {
  .shell { grid-template-columns: auto 1fr; }
}
/* Smaller laptops: the column stays 68px and the opened menu lays over the
   page, no shade, only a soft edge. */
@media (min-width: 900px) and (max-width: 1299.98px) {
  .shell.menu-open .side { box-shadow: 12px 0 30px -18px rgba(15, 23, 42, .28); }
}
/* Phone-only parts of the top bar and the menu, hidden on a laptop. */
.tbar .tbar-brand, .tbar .tbar-back, .tbar .tbar-menu, .side .side-x { display: none; }



.canvas { min-width: 0; padding: 18px 24px 28px; }
.tbar { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; }
.sp { flex: 1; }
.sync { color: var(--muted); font-size: 12.5px; white-space: nowrap; padding: 0 6px; }
.sync--err { color: var(--danger); }
.sync--err .lnk { margin-left: 6px; }

.ibtn { width: 38px; height: 38px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 12px; background: none; color: var(--muted); }
.ibtn svg.ico { width: 20px; height: 20px; }
.acct { position: relative; }
.amenu {
  position: absolute; right: 0; top: 44px; z-index: 20; width: 230px; padding: 8px; border-radius: 14px; background: #fff;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, .05), 0 18px 36px -14px rgba(15, 23, 42, .25);
}
.amenu .who { padding: 8px 10px 10px; border-bottom: 1px solid var(--line-soft); margin-bottom: 6px; }
.amenu .who b { display: block; font-weight: 600; }
.amenu .who span { color: var(--muted); font-size: 12px; }
.amenu .it { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: 9px; background: none; font-size: 13.5px; text-align: left; }
.amenu .it:hover { background: var(--canvas); }
.amenu .it svg.ico { color: var(--muted); }

/* Page heading block, shared by every screen */
.ph { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.ph h1 { font-size: 22px; font-weight: 600; letter-spacing: -.01em; }
.ph p { margin-top: 3px; color: var(--muted); }

/* Component page only */
.demo-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

/* Phones and upright tablets (decisions 24, 31, 32): no icon column. A top
   bar with the site name (or the way back), the account icon and the menu
   button; the menu slides in from the left over a dimmed page, exactly the
   screen height; main actions sit in a bottom bar (.pbar). */
@media (max-width: 899.98px) {
  body:has(.shell) { padding: 0; }
  .shell { display: block; min-height: 100vh; min-height: 100dvh; border: 0; border-radius: 0; overflow: visible; }
  .side {
    position: fixed; top: 0; left: 0; z-index: 70; width: calc(100vw - 70px); max-width: 320px;
    height: 100vh; height: 100dvh; padding: 16px 0 14px; border-right: 0;
    overflow-y: auto; overscroll-behavior: none;
    box-shadow: 10px 0 30px -12px rgba(15, 23, 42, .25);
    transform: translateX(-100%); visibility: hidden;
    transition: transform .26s cubic-bezier(.3, .7, .3, 1), visibility 0s linear .26s;
  }
  .shell.menu-open .side { transform: none; visibility: visible; transition: transform .26s cubic-bezier(.3, .7, .3, 1); }
  .side-tg { display: none; }
  .side-top { gap: 10px; margin-right: 8px; }
  .brand { flex: 1; }
  .side .side-x { display: grid; margin-left: auto; }
  .side-dim { position: fixed; inset: 0; z-index: 65; background: rgba(15, 23, 42, .28); }

  .canvas { padding: 0; }
  .tbar {
    position: sticky; top: 0; z-index: 40; min-height: 56px; margin: 0; padding: 8px 6px 8px 16px; gap: 2px;
    background: radial-gradient(160% 120% at 0% 0%, rgba(49, 46, 129, .08), rgba(49, 46, 129, 0) 60%), #fff;
    box-shadow: 0 1px 0 var(--line);
  }
  .tbar .sync, .tbar-site { display: none; }
  .tbar .tbar-brand { display: block; font-size: 14.5px; font-weight: 600; white-space: nowrap; }
  .tbar .tbar-back { display: inline-flex; align-items: center; gap: 4px; margin-left: -6px; padding: 6px 6px 6px 0; color: var(--accent); font-weight: 500; font-size: 14px; white-space: nowrap; }
  .tbar-back svg.ico { width: 18px; height: 18px; }
  .tbar .tbar-menu { display: grid; }
  .ibtn { width: 44px; height: 44px; }

  .page { padding: 16px 14px 24px; }
  .page:has(.pbar) { padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px)); }
  .ph { margin-bottom: 14px; }
  .ph h1 { font-size: 20px; }
  .pbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; gap: 8px; margin: 0;
    padding: 12px 14px calc(14px + env(safe-area-inset-bottom, 0px)); background: #fff; box-shadow: 0 -1px 0 var(--line);
  }
  .pbar > .pill, .pbar > .abtn { flex: 1; justify-content: center; height: 44px; font-size: 14px; }
  .pbar > .pill:not(.pri):not(.danger) { background: var(--canvas); }
  .pbar > .pill:not(.pri):not(.danger):not(:disabled):hover { background: #e9e9ee; }
  .toasts { left: 14px; right: 14px; bottom: 14px; }
  .shell:has(.pbar) .toasts { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
}

@media (prefers-reduced-motion: reduce) {
  .side, .shell.menu-open .side, .side-tg, .brand, .grp, .grp::after, .nav .lbl, .nav .badge, .nav-c2, .me, .side-tip { transition: none; }
}