/* Shell: the two-column app and the sidebar, Direction A "Layers" (work/sidebar/SPEC.md): 264 px open, 64 px rail, bottom sheet on a phone. */
.app { --side: 264px; display: grid; grid-template-columns: var(--side) minmax(0, 1fr); min-height: 100vh; }
.app[data-side="rail"] { --side: var(--rail); }
.main { min-width: 0; outline: 0; grid-column: 2; contain: layout; }
body.is-error .bottombar, body.is-error #mSearch { display: none; }
body.is-error .main { padding-bottom: 0; }

.side { position: fixed; top: 0; left: 0; bottom: 0; width: var(--side); transition: width var(--dur-panel) var(--ease-in-out); display: flex; flex-direction: column; min-height: 0; background: var(--s1); z-index: 5; overflow: hidden; }
.sheet-title, .ibtn.sheet-close, .m-top, .bottombar, .sheet-scrim { display: none; }

/* head: the lock-up (mask of icons/lockup-sidebar.svg, 105.4 x 20 at 1x, drawn in the text colour) and the collapse button */
.side-head { height: 64px; flex: none; display: flex; align-items: center; justify-content: space-between; padding: 0 12px 0 24px; gap: 8px; }
.lock-link { display: block; color: var(--t1); border-radius: 4px; flex: none; }
.lock { display: block; width: 105.4px; height: 20px; background: currentColor; -webkit-mask: url("../icons/lockup-sidebar.svg") left center / auto 20px no-repeat; mask: url("../icons/lockup-sidebar.svg") left center / auto 20px no-repeat; }
.m-top .brand { color: var(--t1); text-decoration: none; display: flex; align-items: center; min-height: 40px; padding-right: 8px; border-radius: 6px; }
.ibtn { width: 36px; height: 36px; display: grid; place-items: center; border-radius: var(--r-ctl); color: var(--t3); flex: none; transition: background var(--dur-quick), color var(--dur-quick); }
.ibtn:hover { background: var(--s2); color: var(--t1); }
.ibtn:focus-visible { border-radius: var(--r-ctl); }
.ibtn .ic { width: 18px; height: 18px; }

/* search: a row that opens the palette (one search, one place) */
.search-row { display: flex; align-items: center; gap: 12px; flex: none; width: calc(100% - 24px); height: 40px; margin: 0 12px; padding: 0 12px; border-radius: var(--r-ctl); background: var(--s2); color: var(--t3); font-size: var(--fs-14); transition: background var(--dur-quick); }
.search-row:hover { background: var(--s3); }
.search-row:focus-visible { border-radius: var(--r-ctl); }
.search-row .ic { color: var(--t3); }
.search-row .lbl { flex: 1; text-align: left; }

/* layers: one at a time, each scrolls on its own */
.layers { position: relative; flex: 1; min-height: 0; margin-top: 4px; }
.layer { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; padding: 24px 12px; scrollbar-width: thin; scrollbar-color: var(--s3) transparent; opacity: 0; visibility: hidden; transform: translateX(28px); transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), visibility 0s var(--dur-base); }
.layer.on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
#L-home:not(.on) { transform: translateX(-28px); }
.grp + .grp { margin-top: 28px; }
.glabel { margin: 0 0 4px; padding: 0 12px; height: 24px; display: flex; align-items: center; font: 500 var(--fs-12)/1 var(--sans); color: var(--t3); }
.grp > .row + .row { margin-top: 4px; }

/* rows: 40 px, 16 px icon, label, a quiet right-hand slot */
.row { display: flex; align-items: center; gap: 12px; width: 100%; height: 40px; padding: 0 12px; border-radius: var(--r-ctl); color: var(--t2); font-size: var(--fs-14); font-weight: 450; text-decoration: none; position: relative; transition: background var(--dur-quick), color var(--dur-quick); }
.row:focus-visible { border-radius: var(--r-ctl); }
.row:hover { background: var(--s2); color: var(--t1); }
.row .ic { color: var(--t3); transition: color var(--dur-quick); }
.row:hover .ic, .row[aria-current="page"] .ic { color: var(--t1); }
.row[aria-current="page"], .row[aria-pressed="true"] { background: var(--s3); color: var(--t1); font-weight: 500; }
.row .lbl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.row .n { opacity: 0; margin-left: auto; transition: opacity var(--dur-quick); }
.row:hover .n, .row:focus-visible .n, .row[aria-current="page"] .n, .row[aria-pressed="true"] .n, .row[aria-checked="true"] .n { opacity: 1; }
.row .val { display: none; align-items: center; gap: 8px; max-width: 104px; font-size: var(--fs-13); font-weight: 400; color: var(--t2); }
.row .val span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .val::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--t1); flex: none; }
.row.on .val { display: flex; }
.row .chev { width: 14px; height: 14px; color: var(--t3); margin-right: -2px; }
.row .dot { display: none; }
.row:disabled { color: var(--t3); opacity: .6; pointer-events: none; }
.clear { display: block; margin: 8px 0 0; padding: 0 12px; height: 32px; width: 100%; text-align: left; color: var(--t3); font-size: var(--fs-13); border-radius: 8px; }
.clear:hover { color: var(--t1); }
.none { padding: 8px 12px; font-size: var(--fs-13); line-height: 1.5; color: var(--t3); }

/* a drilled layer: sticky back row (24 px above, a 40 px button) and Clear when the layer holds a filter */
.back { position: sticky; top: -24px; z-index: 2; background: var(--s1); display: flex; align-items: center; gap: 4px; height: 68px; margin: -24px -12px 8px; padding: 24px 12px 4px; }
.back .go { display: flex; align-items: center; gap: 8px; flex: 1; height: 40px; padding: 0 12px 0 8px; border-radius: var(--r-ctl); font-size: var(--fs-14); font-weight: 600; color: var(--t1); }
.back .go:hover { background: var(--s2); }
.back .go:focus-visible, .back .mini:focus-visible { border-radius: var(--r-ctl); }
.back .go .ic { width: 16px; height: 16px; color: var(--t2); }
.back .mini { height: 28px; padding: 0 10px; font-size: var(--fs-13); color: var(--t3); border-radius: 8px; }
.back .mini:hover { color: var(--t1); background: var(--s2); }
.cats > li + li { margin-top: 4px; }
.cat .chev { transition: transform var(--dur-quick) var(--ease-out); }
.cat[aria-expanded="true"] .chev { transform: rotate(90deg); }
.subs { display: none; margin: 4px 0 8px 18px; padding-left: 8px; border-left: 1px solid var(--line-2); }
.subs.open { display: block; }
.subs li + li { margin-top: 4px; }
.row.zero .n { color: var(--t3); }
.box { width: 16px; height: 16px; border-radius: 5px; box-shadow: inset 0 0 0 1.5px var(--line-2); display: grid; place-items: center; flex: none; }
.row[aria-checked="true"] .box { background: var(--t1); box-shadow: none; color: var(--on-t1); }
.box .ic { width: 12px; height: 12px; opacity: 0; color: inherit !important; }
.row[aria-checked="true"] .box .ic { opacity: 1; }
.row[aria-checked="true"] { color: var(--t1); }
.row.ghost { color: var(--t3); }
.row.ghost:hover { color: var(--t1); }
.vlist > li + li { margin-top: 4px; }
.vrow { display: flex; align-items: center; gap: 4px; }
.vrow .row { flex: 1; min-width: 0; }
.view-del { width: 28px; height: 28px; display: grid; place-items: center; color: var(--t3); border-radius: 8px; opacity: 0; transition: opacity var(--dur-quick); flex: none; }
.vrow:hover .view-del, .view-del:focus-visible { opacity: 1; }
.view-del:hover { background: var(--s3); color: var(--t1); }
.view-del .ic { width: 12px; height: 12px; }
.save-form { display: flex; gap: 8px; margin: 0 0 4px; }
.save-form input { flex: 1; min-width: 0; height: 40px; border: 0; border-radius: var(--r-ctl); background: var(--s2); padding: 0 12px; font-size: var(--fs-14); outline: 0; }
.save-form input::placeholder { color: var(--t3); opacity: 1; }
.save-form input:focus { outline: 2px solid var(--t1); outline-offset: 2px; }
.save-form .btn-s { height: 40px; }

/* footer: the account slot (filled by the accounts code; empty without an API), theme, About */
.side-foot { flex: none; display: flex; align-items: center; gap: 4px; padding: 12px; border-top: 1px solid var(--line); }
.side-foot [data-slot="account"] { flex: 1; min-width: 0; }
.side-foot [data-slot="account"]:empty { display: none; }
.side-foot:has([data-slot="account"]:empty) { justify-content: flex-end; }
.ic-moon { display: none; }
:root[data-theme="dark"] .ic-sun { display: none; }
:root[data-theme="dark"] .ic-moon { display: block; }
:root[data-theme="light"] .ic-moon { display: none; }
:root[data-theme="light"] .ic-sun { display: block; }

/* the popover: Brand and Tags search the whole list, 40 rows at a time */
.sbpop { position: fixed; z-index: 90; width: 320px; padding: 8px; background: var(--s2); border-radius: var(--r-pop); box-shadow: var(--float), 0 0 0 1px var(--line-2); opacity: 0; visibility: hidden; transform: translateX(-4px) scale(.985); transform-origin: left top; pointer-events: none; transition: opacity var(--dur-quick) var(--ease-out), transform var(--dur-quick) var(--ease-out), visibility 0s var(--dur-quick); }
.sbpop.on { opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition-delay: 0s; }
.sbp-search { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 12px; border-radius: var(--r-ctl); background: var(--s1); color: var(--t3); }
.sbp-search:focus-within { outline: 2px solid var(--t1); outline-offset: -2px; }
.sbp-search input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; outline: 0; font-size: var(--fs-14); color: var(--t1); }
.sbp-search input::placeholder { color: var(--t3); opacity: 1; }
.sbp-lbl { font: 500 var(--fs-12)/1 var(--sans); color: var(--t3); padding: 16px 12px 8px; }
.sbp-list { max-height: 328px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--s3) transparent; outline: 0; }
.sbo { display: flex; align-items: center; gap: 12px; height: 36px; padding: 0 12px; border-radius: var(--r-ctl); font-size: var(--fs-14); color: var(--t1); cursor: pointer; }
.sbo.hi, .sbo:hover { background: var(--s3); }
.sbo .lbl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sbo .n { opacity: 1; }
.sbo.zero .lbl { color: var(--t2); }
.sbo .box { box-shadow: inset 0 0 0 1.5px var(--t3); }
.sbo[aria-selected="true"] .box { background: var(--t1); box-shadow: none; color: var(--on-t1); }
.sbo .box .ic { width: 12px; height: 12px; opacity: 0; }
.sbo[aria-selected="true"] .box .ic { opacity: 1; }
.sbp-none { padding: 24px 12px; color: var(--t3); font-size: var(--fs-13); }
.sbp-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 8px -8px -8px; padding: 12px 20px; border-top: 1px solid var(--line-2); font-size: var(--fs-12); color: var(--t2); white-space: nowrap; }
.sbp-foot a { color: var(--t2); text-underline-offset: 3px; }
.sbp-foot a:hover { color: var(--t1); }
.sbp-foot .keys { display: inline-flex; align-items: center; gap: 14px; }
.sbp-foot .keys span { display: inline-flex; align-items: center; gap: 6px; }
.sbp-foot kbd { font: 500 12px/1 var(--sans); color: var(--t2); background: none; padding: 0; }
.sbtip { position: fixed; z-index: 95; transform: translate(-4px, -50%); background: var(--s3); color: var(--t1); font-size: var(--fs-12); font-weight: 500; padding: 7px 10px; border-radius: 8px; white-space: nowrap; box-shadow: var(--float); opacity: 0; pointer-events: none; transition: opacity var(--dur-quick) var(--ease-out), transform var(--dur-quick) var(--ease-out); }
.sbtip.on { opacity: 1; transform: translate(0, -50%); }

/* the collapsed rail, 64 px: the mark, icon buttons, a dot where a filter is on. Names stay in the page for screen readers. */
.app[data-side="rail"] .side-head { flex-direction: column; height: auto; padding: 20px 0 0; gap: 12px; justify-content: flex-start; }
.app[data-side="rail"] .lock { width: 20px; }
.app[data-side="rail"] .search-row { width: 40px; margin: 12px auto 0; padding: 0; justify-content: center; }
.app[data-side="rail"] .search-row kbd { display: none; }
.app[data-side="rail"] .layer { padding: 12px 12px; }
.app[data-side="rail"] .glabel { visibility: hidden; height: 12px; margin: 0; padding: 0; overflow: hidden; }
.app[data-side="rail"] .grp + .grp { margin-top: 16px; }
.app[data-side="rail"] .row { width: 40px; padding: 0; justify-content: center; margin-left: auto; margin-right: auto; }
.app[data-side="rail"] .row .lbl, .app[data-side="rail"] .row .val, .app[data-side="rail"] .search-row .lbl { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; flex: none; }
.app[data-side="rail"] .row .n, .app[data-side="rail"] .row .chev { display: none; }
.app[data-side="rail"] .row.on .dot { display: block; position: absolute; top: 9px; right: 9px; width: 7px; height: 7px; border-radius: 50%; background: var(--t1); box-shadow: 0 0 0 2px var(--s1); }
.app[data-side="rail"] .row[aria-current="page"] .dot { box-shadow: 0 0 0 2px var(--s3); }
.app[data-side="rail"] .row.on:hover .dot { box-shadow: 0 0 0 2px var(--s2); }
.app[data-side="rail"] .clear { display: none; }
.app[data-side="rail"] .side-foot { flex-direction: column; padding: 12px 0; gap: 4px; border-top: 0; }
.app[data-side="rail"] .side-foot [data-slot="account"] { flex: none; width: 40px; }
.app[data-side="rail"] .foot-about { display: none; }
.app[data-side="rail"] .layer:not(#L-home) { display: none; }
.app[data-side="rail"] [data-slot="account"]:not(:empty) * { max-width: 40px; }

/* the account slot's button (js/account-core.js uses .foot-btn): a 44 px row with a 28 px avatar slot, text-1 on hover */
.foot-btn { display: flex; align-items: center; gap: 12px; width: 100%; height: 44px; padding: 0 8px; border-radius: var(--r-ctl); color: var(--t2); font-size: var(--fs-14); font-weight: 450; text-align: left; transition: background var(--dur-quick), color var(--dur-quick); }
.foot-btn:hover { background: var(--s2); color: var(--t1); }
.foot-btn:focus-visible { border-radius: var(--r-ctl); }
.foot-btn .ic { width: 16px; height: 16px; }
.app[data-side="rail"] .foot-btn { width: 40px; height: 40px; padding: 0; justify-content: center; }
.app[data-side="rail"] .foot-btn > span:not([class]), .app[data-side="rail"] .foot-btn > .acc-name { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- phone: the sidebar becomes a bottom sheet; a bar with count, sort and Filters ---------- */
@media (max-width: 820px) {
  .app { display: block; }
  .side { position: fixed; left: 0; right: 0; bottom: 0; top: auto; width: auto; height: 88dvh; border-radius: 20px 20px 0 0; background: var(--s1); transform: translateY(104%); visibility: hidden; transition: transform var(--dur-panel) var(--ease-out), visibility 0s var(--dur-panel); z-index: 80; box-shadow: var(--float); }
  .side.open { transform: none; visibility: visible; transition: transform var(--dur-panel) var(--ease-out), visibility 0s; }
  .side-head { height: 72px; padding: 0 12px 0 24px; position: relative; touch-action: none; }
  .side-head::before { content: ""; position: absolute; top: 8px; left: 50%; width: 36px; height: 4px; margin-left: -18px; border-radius: 2px; background: var(--line-2); }
  .side-head .lock-link, #railBtn { display: none; }
  .sheet-title { display: block; font: 600 var(--fs-16)/1 var(--sans); padding-top: 8px; }
  .ibtn.sheet-close { display: grid; margin-top: 8px; }
  .row { height: 44px; }
  .row .n { opacity: 1; }
  .layer { padding-bottom: 32px; }
  .side-foot { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
  .sbpop { z-index: 90; }
  .sheet-scrim { display: block; position: fixed; inset: 0; z-index: 70; background: var(--scrim); opacity: 0; pointer-events: none; transition: opacity var(--dur-panel) var(--ease-out); }
  .sheet-scrim.open { opacity: 1; pointer-events: auto; }
  .m-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 8px 0 16px; height: 56px; }
  .bottombar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; align-items: center; gap: 12px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: var(--bg); border-top: 1px solid var(--line); }
  .bb-count { flex: 1; font: 600 var(--fs-16)/1 var(--sans); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .bb-count b { font-weight: 600; }
  .bb-sort { position: relative; display: flex; align-items: center; gap: 8px; height: 40px; padding: 0; border-radius: var(--r-ctl); background: var(--s2); font-size: var(--fs-13); font-weight: 500; }
  .bb-sort select { appearance: none; border: 0; background: none; font-weight: 500; height: 40px; padding: 0 14px 0 0; outline: 0; }
  .bb-sort .ic { width: 14px; height: 14px; margin-left: 14px; color: var(--t2); }
  .pills .pill { height: 32px; }
  .bb-filters { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: var(--r-ctl); background: var(--s2); color: var(--t1); font-weight: 500; font-size: var(--fs-13); }
  .bb-filters b { font: 600 11px/1 var(--sans); background: var(--t1); color: var(--on-t1); border-radius: var(--r-pill); padding: 3px 6px; }
  .main { padding-bottom: 80px; }
  #palBtn kbd { display: none; }
}

/* 360 to 400 wide: the bar keeps "1,791 references" whole */
@media (max-width: 400px) {
  .bottombar { gap: 8px; padding-left: 12px; padding-right: 12px; }
  .bb-count { font-size: var(--fs-14); }
  .bb-sort .ic { display: none; }
  .bb-sort select { padding-left: 12px; }
  .bb-filters { padding: 0 14px; }
}

/* reduced motion: the layers and the popover crossfade, nothing slides */
@media (prefers-reduced-motion: reduce) {
  .layer, #L-home:not(.on) { transform: none; }
  .sbpop, .sbpop.on { transform: none; }
}

/* touch: no keyboard hints in the popover */
@media (hover: none) { .sbp-foot .keys { display: none; } }