/* Builder's shell in the Studio's pattern (inbound/brightly-studio-design/components.css): a left menu from 1280px,
   below that a top bar and a tab bar at the foot. The menu folds into its big groups (Dan, 11 Nov). */
svg.i { width: 1.25rem; height: 1.25rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.shell { min-height: 100dvh; }
.col { min-width: 0; display: flex; flex-direction: column; min-height: 100dvh; }
.col > main { flex: 1; width: 100%; }

.side-head .logo { --s: 30px; } /* the Studio's sizes: 30 on the sheet, 36 in the top bar, 46 in the fixed menu */

.app-topbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 0.75rem; padding: max(0.5rem, env(safe-area-inset-top)) 1rem 0.5rem; border-bottom: 1px solid var(--color-line); background: color-mix(in srgb, var(--color-surface) 85%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: box-shadow 160ms ease; }
.app-topbar[data-scrolled] { box-shadow: 0 8px 22px -16px rgb(35 14 15 / 0.45); }
.bar-acts { margin-left: auto; display: flex; gap: 0.5rem; align-items: center; }

/* The menu. Below 1280px it is a sheet that slides in from the left. */
.side { position: fixed; inset: 0 auto 0 0; z-index: 50; width: min(19rem, 86vw); display: flex; flex-direction: column; gap: 0.125rem; overflow-y: auto; box-sizing: border-box; padding: 1rem 1rem 2rem; background: var(--color-surface); border-right: 1px solid var(--color-line); transform: translateX(-100%); visibility: hidden; transition: transform 180ms ease, visibility 180ms; }
.menu-open .side { transform: none; visibility: visible; }
.side > * { flex: none; } /* a menu taller than the screen scrolls; its headings never squash under the rows */
.scrim { position: fixed; inset: 0; z-index: 40; background: rgb(0 0 0 / 0.4); display: none; }
.menu-open .scrim { display: block; }
.side-head { display: flex; align-items: center; justify-content: space-between; padding: 0 0.25rem 1rem 0.75rem; }
.side a, .side summary { display: flex; align-items: center; gap: 0.75rem; min-height: 2.75rem; padding: 0 0.75rem; border-radius: 0.75rem; color: var(--color-ink); text-decoration: none; cursor: pointer; }
.side summary { list-style: none; font-weight: 600; }
.side summary::-webkit-details-marker { display: none; }
.side summary > .i:last-child { margin-left: 0.25rem; color: var(--color-muted); transition: transform 150ms; }
.side .grp[open] > summary > .i:last-child { transform: rotate(180deg); }
.side summary .count, .side a .count { margin-left: auto; }
.side .grp[open] > summary .count { display: none; }
.side .label { display: block; min-height: 0; margin: 1rem 0 0.25rem; padding: 0.25rem 0.75rem; font-family: var(--font-label); font-weight: 700; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--color-muted); }
.side a.label:hover { background: none; color: var(--color-brand); }
.side a.label[aria-current="page"] { background: none; color: var(--color-brand); }
.side .rooms { display: grid; gap: 0.125rem; padding: 0.125rem 0 0.375rem 1rem; }
.side a:hover, .side summary:hover { background: var(--color-sand); }
.side a[aria-current="page"] { background: var(--color-teal-50); color: var(--color-brand); font-weight: 600; }
.side .away { margin-left: auto; color: var(--color-muted); font-size: 0.875rem; }
.count:empty { display: none; }
.count { display: inline-grid; place-items: center; min-width: 1.5rem; height: 1.5rem; padding: 0 0.375rem; border-radius: 9999px; background: var(--color-forest); color: var(--color-cream); font-size: 0.8125rem; font-weight: 700; box-sizing: border-box; }

.tabbar { position: sticky; bottom: 0; z-index: 20; display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--color-line); background: var(--color-surface); padding-bottom: env(safe-area-inset-bottom); }
.tabbar a, .tabbar button { min-height: 3.25rem; padding: 0 2px; display: grid; place-items: center; border: 0; border-radius: 0; background: none; font: inherit; font-size: min(max(13px, 0.8rem), 4vw); font-weight: 500; color: var(--color-muted); text-decoration: none; cursor: pointer; }
.tabbar a[aria-current="page"] { color: var(--color-brand); font-weight: 700; box-shadow: inset 0 3px 0 var(--color-forest); }

.sizes { display: flex; gap: 0.375rem; }
/* Fixed px so the four keep their shape whatever size is chosen; the letters show the sizes. */
.size-btn { display: grid; place-items: center; width: 44px; height: 44px; min-height: 0; padding: 0; border: 1px solid var(--color-line); border-radius: 14px; background: var(--color-surface); color: var(--color-ink); font-family: var(--font-sans); font-weight: 700; line-height: 1; cursor: pointer; }
.size-btn:hover { background: var(--color-sand); }
.size-btn[aria-pressed="true"] { background: var(--color-forest); border-color: var(--color-forest); color: var(--color-cream); }
.app-topbar .sizes { display: none; }
.side-sizes { margin-top: auto; padding: 1.5rem 0.75rem 0; }
@media (min-width: 640px) { .app-topbar { padding-inline: 1.5rem; } .app-topbar .sizes { display: flex; } .side-sizes { display: none; } }
@media (min-width: 1280px) {
  .shell { display: grid; grid-template-columns: 17rem 1fr; }
  .side { position: sticky; top: 0; height: 100dvh; width: auto; transform: none; visibility: visible; padding: 1.5rem 1.25rem; background: color-mix(in srgb, var(--color-surface) 70%, transparent); transition: none; }
  .side .side-close, .app-topbar .menu-btn, .app-topbar .mark-bar, .tabbar, .scrim, .menu-open .scrim { display: none; }
  .app-topbar { padding: 0.625rem 2rem; }
  .side-head .logo { --s: 46px; }
}
/* Under 1280 the tab bar sits along the bottom, where a screen's toast would hide behind it. */
@media (max-width: 1279.98px) { .toast { bottom: calc(4.25rem + env(safe-area-inset-bottom)); z-index: 25; } }
@media print { .app-topbar, .tabbar, .side, .scrim { display: none; } }
@media (prefers-reduced-motion: reduce) { .side, .side summary > .i:last-child { transition: none; } }

/* Shared components, as the Studio draws them. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 3rem; padding: 0 1.25rem; border: 0; border-radius: 9999px; font: inherit; font-weight: 600; font-size: 1rem; text-decoration: none; cursor: pointer; }
.btn-sm { min-height: 2.75rem; padding: 0 1rem; font-size: 0.9375rem; }
.btn-secondary { background: var(--color-surface); color: var(--color-brand); border: 1px solid var(--color-line); }
.btn-secondary:hover { background: var(--color-sand); }
.icon-btn { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; min-height: 0; padding: 0; border: 0; border-radius: 9999px; background: none; color: var(--color-brand); cursor: pointer; }
.icon-btn:hover { background: var(--color-sand); }
.ichip { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 0.875rem; flex: none; }
.badge { display: inline-flex; align-items: center; border-radius: 9999px; padding: 0.25rem 0.75rem; font-size: 0.875rem; font-weight: 500; background: var(--color-sand); color: var(--color-ink); white-space: nowrap; }
input.switch { appearance: none; -webkit-appearance: none; flex: none; width: 3.25rem; height: 2rem; min-height: 0; margin: 0.375rem 0; padding: 0; border-radius: 9999px; background: color-mix(in srgb, var(--color-muted) 35%, var(--color-surface)); border: 0; position: relative; cursor: pointer; transition: background-color 150ms; }
input.switch::after { content: ""; position: absolute; top: 0.1875rem; left: 0.1875rem; width: 1.5rem; height: 1.5rem; border-radius: 9999px; background: var(--color-surface); box-shadow: 0 1px 3px rgb(35 14 15 / 0.3); transition: transform 150ms; }
input.switch:checked { background: var(--color-forest); border-color: var(--color-forest); }
input.switch:checked::after { transform: translateX(1.25rem); }
input.switch:disabled { opacity: 0.5; cursor: progress; }

.page-header { margin: 0 0 2rem; }
.page-header .eyebrow { margin: 0; font-family: var(--font-label); font-weight: 700; font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--color-teal-800); }
.page-header h1 { margin: 0.25rem 0 0; font-size: 1.875rem; font-weight: 700; color: var(--color-brand); }
.page-header .subtitle { margin: 0.5rem 0 0; max-width: 42rem; font-size: 1.125rem; color: var(--color-muted); }
.page-header.cw { border-radius: 1.5rem; padding: 1.5rem; }
.page-header.cw :is(h1, .eyebrow, .subtitle) { color: inherit; }
@media (min-width: 640px) { .page-header h1 { font-size: 2.25rem; } .page-header.cw { padding: 2rem; } }
.cw-btn { text-decoration: none; padding-block: 0.5rem; line-height: 1.2; text-align: center; } /* room to wrap at the largest text size */
.app-topbar .back-btn { text-decoration: none; }
.app-topbar .back-btn[hidden] { display: none; }