/* The shell's own few rules on top of the design system (tokens / base / components). */
.boot { padding: var(--space-6, 24px); color: var(--text-2, #666); font: 15px/1.5 system-ui, sans-serif; }
.sb-brand .sb-logo { width: 2.125rem; height: 2.125rem; border-radius: var(--radius-sm); object-fit: contain; flex: none; }
.sb-brand > div { min-width: 0; flex: 1; }
.sb-brand b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-foot .out { width: 100%; background: none; border: 0; cursor: pointer; text-decoration: none; padding: var(--space-2) var(--space-1);
  border-radius: var(--radius-sm); font: inherit; font-size: var(--t-footnote-size); }
.sb-foot .out:hover { background: var(--surface-nav-hover); color: var(--text-on-nav); }
.sb-foot .segmented + .segmented { margin-top: 0; }
.nav a .icon { flex: none; }
.pub-brand { display: grid; place-items: center; margin-bottom: var(--space-5); }
.pub-brand .pub-logo { height: 3rem; width: auto; max-width: 12rem; object-fit: contain; }
.pub-brand .mark { width: 3.5rem; height: 3.5rem; border-radius: var(--radius-md); background: var(--accent); color: var(--accent-fg);
  display: grid; place-items: center; font-weight: 700; font-size: var(--t-title3-size); }
.pub-foot { display: flex; gap: var(--space-4); justify-content: center; margin-top: var(--space-4); }
.pub-foot a { color: inherit; }
.acceso .card > * + * { margin-top: var(--space-4); }
.acceso .card .btn { width: 100%; }
.acceso .card .links { display: flex; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.acceso .card .links .btn { width: auto; }
/* tables of the admin screens */
.pl-actions { display: flex; gap: var(--space-2); justify-content: flex-end; flex-wrap: wrap; }
.pl-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.pl-head h1 { margin: 0; }
.pl-head select { width: auto; min-width: 10rem; }   /* a filter beside the title, not a form field */
.pl-chips { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.pl-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: var(--space-2) var(--space-4); }
.pl-checks label { display: flex; gap: var(--space-2); align-items: flex-start; font-size: var(--t-subhead-size); }
.pl-checks label input { margin-top: 0.2em; }
.pl-group + .pl-group { margin-top: var(--space-4); }
.pl-group > .t-caption { display: block; margin-bottom: var(--space-2); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-2); }
.pl-hours { display: grid; grid-template-columns: 7.5rem 1fr; gap: var(--space-2) var(--space-3); align-items: start; }
.pl-hours .day { padding-top: 0.55rem; font-weight: 600; }
.pl-hours .ivs { display: flex; flex-direction: column; gap: var(--space-2); }
.pl-hours .iv { display: flex; gap: var(--space-2); align-items: center; }
.pl-hours .iv input { width: 7.5rem; }
.pl-swatches { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.pl-swatches button { width: 2rem; height: 2rem; border-radius: var(--radius-full); border: 2px solid transparent; cursor: pointer; }
.pl-swatches button[aria-pressed="true"] { border-color: var(--text-1); }
.pl-dot { display: inline-block; width: 0.7rem; height: 0.7rem; border-radius: var(--radius-full); vertical-align: baseline; margin-right: var(--space-2); }
.pl-muted { color: var(--text-3); }
.pl-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
@media (max-width: 40rem) { .pl-grid-2 { grid-template-columns: 1fr; } .pl-hours { grid-template-columns: 1fr; } .pl-hours .day { padding-top: 0; } }
#view:focus { outline: none; }          /* focused on navigation for screen readers, not to be drawn */
.dev-code { background: var(--warning-subtle); color: var(--warning-text); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); font-size: var(--t-footnote-size); }
/* help box above a view (Platform.help): put away per person, on the server */
.help-box { display: flex; gap: var(--space-3); align-items: flex-start; background: var(--accent-subtle); color: var(--text-1);
  border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4); }
.help-box > svg { flex: none; color: var(--accent); margin-top: 0.15rem; }
.help-box p { margin: 0; flex: 1; line-height: 1.45; }
.help-box .help-x { flex: none; margin: -0.35rem -0.5rem -0.35rem 0; }
/* the owner's setup checklist (/start) */
.setup-progress { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-4); }
.setup-progress .bar { height: 0.5rem; border-radius: var(--radius-full); background: var(--surface-sunken); overflow: hidden; }
.setup-progress .bar > span { display: block; height: 100%; background: var(--accent); border-radius: var(--radius-full); }
.setup-list { list-style: none; margin: 0; padding: 0; }
.card.setup-list { padding: 0; }
.setup-list li { display: flex; gap: var(--space-3); align-items: center; padding: var(--space-3) var(--space-4); }
.setup-list li + li { border-top: 1px solid var(--hairline); }
.setup-list li .txt { flex: 1; display: flex; flex-direction: column; gap: 0.15rem; }
.setup-list li.done > svg { color: var(--success-solid); }
.setup-list li.done .txt b { color: var(--text-2); }
.setup-list li.open > svg { color: var(--text-3); }