/* Staff dashboard. Uses the site's tokens from /styles.css; denser and plainer than the public pages. */
.adm { font-size: 1rem; min-height: 100svh; }
.adm [hidden] { display: none !important; }
.adm__brand { font: 400 1.4rem/1 var(--serif); letter-spacing: .12em; color: var(--gold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 16rem; }
.adm__error { color: var(--danger); font-size: .95rem; }
.adm h1, .adm h2 { font: 400 2rem/1.1 var(--serif); }
.adm h3 { font: 500 .72rem/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--gold); margin-top: .5rem; }

.login { min-height: 100svh; display: grid; place-content: center; padding: 2rem var(--gutter); }
.login__card { width: min(86vw, 360px); display: grid; gap: 1.5rem; }
.pinpad { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.pinpad button { min-height: 58px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg-2); color: var(--cream); font: 400 1.6rem/1 var(--serif); cursor: pointer; }
.pinpad button:active { background: var(--gold); color: var(--bg); }
.pinpad button[data-k] { font-size: 1.2rem; color: var(--muted); }

.top {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 1.5rem;
  padding: .6rem clamp(1rem, 3vw, 2.5rem); background: var(--bg-2); border-bottom: 1px solid var(--line);
}
.tabs { display: flex; gap: .25rem; margin-inline: auto; }
.tabs button, .top__out, .chip, .datenav button {
  min-height: 44px; padding: 0 1rem; border-radius: 999px; border: 1px solid transparent; background: none; cursor: pointer;
  font: 500 .72rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
  transition: color .2s, background-color .2s, border-color .2s;
}
.tabs button:hover, .top__out:hover, .datenav button:hover { color: var(--cream); }
.tabs button[aria-selected="true"] { background: var(--gold); color: var(--bg); }
.chip, .datenav button { border-color: var(--line); }

.view { padding: 1.25rem clamp(1rem, 3vw, 2.5rem) 5rem; max-width: 1180px; margin-inline: auto; display: grid; gap: 1.25rem; }
.bar { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: space-between; }
.datenav { display: flex; align-items: center; gap: .4rem; }
.datenav button:not(.chip) { width: 44px; padding: 0; font-size: 1.3rem; letter-spacing: 0; }
.datenav input, .search input {
  min-height: 44px; padding: 0 .9rem; background: var(--bg-2); color: var(--cream); border: 1px solid var(--line); border-radius: 999px;
  font: 400 1rem/1 var(--sans); color-scheme: dark;
}
.search { flex: 1; }
.search input { width: 100%; }

.days { display: flex; gap: .4rem; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.days::-webkit-scrollbar { display: none; }
.days button {
  flex: none; min-width: 64px; min-height: 60px; padding: .4rem .6rem; display: grid; gap: .15rem; justify-items: center; align-content: center;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 6px; color: var(--muted); cursor: pointer; font: 500 .68rem/1 var(--sans); letter-spacing: .1em; text-transform: uppercase;
}
.days button b { font: 400 1.25rem/1 var(--serif); color: var(--cream); letter-spacing: 0; }
.days button small { font-size: .68rem; color: var(--gold-soft); letter-spacing: 0; text-transform: none; }
.days button[aria-current="date"] { border-color: var(--gold); }

.stats { display: flex; flex-wrap: wrap; gap: .5rem 2rem; color: var(--muted); font-size: .95rem; }
.stats b { font: 400 1.5rem/1 var(--serif); color: var(--cream); margin-right: .35rem; }

.list { display: grid; gap: .6rem; }
.res {
  display: grid; grid-template-columns: 5.2rem 1fr auto; gap: .5rem 1.25rem; align-items: center;
  padding: 1rem 1.1rem; background: var(--bg-2); border: 1px solid var(--line); border-left: 3px solid var(--gold); border-radius: 6px;
}
.res[data-status="seated"] { border-left-color: #6fbf8f; }
.res[data-status="cancelled"], .res[data-status="no_show"] { border-left-color: var(--line); opacity: .6; }
.res__time { font: 400 1.9rem/1 var(--serif); }
.res__time small { display: block; margin-top: .3rem; font: 400 .85rem/1 var(--sans); color: var(--muted); }
.res__who { min-width: 0; display: grid; gap: .25rem; }
.res__name { font: 400 1.35rem/1.15 var(--serif); background: none; border: 0; padding: 0; color: var(--cream); text-align: left; cursor: pointer; }
.res__name:hover { color: var(--gold-soft); }
.res__meta { display: flex; flex-wrap: wrap; gap: .25rem 1rem; font-size: .9rem; color: var(--muted); }
.res__meta a { color: var(--gold-soft); padding-block: .2rem; }
.res__notes { font-size: .92rem; color: var(--cream); }
.res__notes::before { content: "Nota: "; color: var(--muted); }
.badge { display: inline-block; padding: .2rem .55rem; border-radius: 999px; border: 1px solid var(--line); font: 500 .62rem/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.badge--gold { border-color: var(--gold); color: var(--gold); }
.badge--ok { border-color: #6fbf8f; color: #8fd3aa; }
.badge--bad { border-color: var(--danger); color: var(--danger); }
.res__actions { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: flex-end; }
.act {
  min-height: 44px; padding: 0 1rem; border-radius: 999px; border: 1px solid var(--line); background: none; color: var(--cream); cursor: pointer;
  font: 500 .7rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; transition: background-color .2s, color .2s, border-color .2s;
}
.act:hover { border-color: var(--cream); }
.act--primary { background: var(--gold); border-color: var(--gold); color: var(--bg); }
.act--primary:hover { background: var(--cream); border-color: var(--cream); }
.act[disabled] { opacity: .5; cursor: progress; }
select.act { color-scheme: dark; max-width: 11.5rem; }
select.act option { background: var(--bg-2); color: var(--cream); letter-spacing: 0; text-transform: none; }
@media (max-width: 760px) {
  .res { grid-template-columns: 4.4rem 1fr; }
  .res__actions { grid-column: 1 / -1; justify-content: flex-start; }
  .tabs { flex: 1; min-width: 0; margin-inline: 0; overflow-x: auto; scrollbar-width: none; }
  .tabs button { flex: none; padding: 0 .7rem; letter-spacing: .1em; }
  .top__out { flex: none; padding: 0 .4rem; }
  .top { gap: .5rem; }
  .top .adm__brand { display: none; }
}

.tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 6px; }
.table { width: 100%; border-collapse: collapse; font-size: .95rem; min-width: 640px; }
.table th { text-align: left; padding: .8rem 1rem; font: 500 .66rem/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); background: var(--bg-2); }
.table td { padding: .85rem 1rem; border-top: 1px solid var(--line); }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table tbody tr { cursor: pointer; }
.table tbody tr:hover, .table tbody tr:focus-visible { background: var(--bg-2); }
.table td:first-child { font: 400 1.2rem/1.2 var(--serif); }

.notice { padding: .9rem 1.1rem; border: 1px solid var(--line); border-radius: 6px; color: var(--muted); font-size: .95rem; }
.notice--bad { border-color: var(--danger); color: var(--danger); }
.msgs { display: grid; gap: .6rem; }
.msg { padding: 1rem 1.1rem; background: var(--bg-2); border: 1px solid var(--line); border-radius: 6px; display: grid; gap: .5rem; }
.msg__head { display: flex; flex-wrap: wrap; gap: .4rem 1rem; align-items: center; font-size: .88rem; color: var(--muted); }
.msg__body { white-space: pre-wrap; font-size: .95rem; overflow-wrap: anywhere; }
.msg__err { color: var(--danger); font-size: .85rem; overflow-wrap: anywhere; }
.empty { padding: 3rem 1rem; text-align: center; color: var(--muted); }

.dlg { width: min(94vw, 560px); padding: 1.75rem; background: var(--bg-2); color: var(--cream); border: 1px solid var(--line); border-radius: 8px; }
.dlg--wide { width: min(94vw, 640px); }
.dlg::backdrop { background: rgba(var(--bg-rgb), .8); }
.dlg .form, .cust { display: grid; gap: 1.1rem; }
.dlg__actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin-top: .5rem; }
.cust__contact { color: var(--muted); display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; }
.cust__contact a { color: var(--gold-soft); }
.cust textarea { width: 100%; }
.history { display: grid; max-height: 34vh; overflow-y: auto; }
.history li { display: flex; flex-wrap: wrap; gap: .25rem 1rem; align-items: center; padding: .6rem 0; border-top: 1px solid var(--line); font-size: .95rem; }
.danger-btn { color: var(--danger) !important; border-color: var(--danger) !important; }
.danger { color: var(--danger); background: none; border: 0; cursor: pointer; margin-left: auto; font: inherit; font-size: .9rem; }

.toast {
  position: fixed; left: 50%; bottom: 1.5rem; transform: translateX(-50%); z-index: 100;
  padding: .85rem 1.4rem; border-radius: 999px; background: var(--cream); color: var(--bg); font-size: .95rem; box-shadow: 0 8px 30px rgba(0, 0, 0, .4);
}
.toast.is-bad { background: var(--danger); }
.offline { position: fixed; inset: 0 0 auto 0; z-index: 90; padding: .7rem 1rem; text-align: center; background: var(--danger); color: var(--bg); font-size: .95rem; }

/* ---------- Floor map ---------- */
.bar__end { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.act[aria-pressed="true"] { background: var(--cream); color: var(--bg); border-color: var(--cream); }
.modebar { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; padding: .7rem 1rem; border: 1px solid var(--gold); border-radius: 8px; font-size: .95rem; }
.modebar span { flex: 1; min-width: 12rem; }
.empty { display: grid; gap: 1.25rem; justify-items: center; }

.bar--when { justify-content: flex-start; gap: .75rem 1.25rem; }
.when { color: var(--gold-soft); font-size: .92rem; }
.tbl[data-state="booked"] { border-color: var(--gold); }
.tbl[data-state="booked"] .tbl__n { color: var(--gold-soft); }
.floor-list--col { flex-direction: column; align-items: stretch; }
.floor-list--col .act { text-align: left; justify-content: flex-start; height: auto; min-height: 48px; padding: .6rem 1rem; white-space: normal; }
.floors { display: flex; gap: .4rem; overflow-x: auto; scrollbar-width: none; }
.floors::-webkit-scrollbar { display: none; }
.floors__tab {
  flex: none; min-height: 52px; padding: .35rem 1.1rem; display: grid; gap: .2rem; justify-items: start; align-content: center; cursor: pointer;
  background: var(--bg-2); color: var(--muted); border: 1px solid var(--line); border-radius: 8px; font: 400 1.25rem/1 var(--serif);
}
.floors__tab small { font: 500 .66rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.floors__tab[aria-selected="true"] { color: var(--cream); border-color: var(--gold); }
.floors__tab[aria-selected="true"] small { color: var(--gold-soft); }
.room { display: grid; gap: .75rem; margin-bottom: 2rem; }
.room__head { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; min-height: 36px; }
.room__head h3 { margin: 0 auto 0 0; }
.act--sm { min-height: 36px; padding: 0 .8rem; font-size: .66rem; }
.room__floor {
  position: relative; aspect-ratio: 16 / 9; container-type: inline-size; overflow: hidden;
  /* one drawing unit for tables and chairs: 1% of the room's width, shrunk as the room's size setting grows */
  --u: calc(1cqw / var(--s, 1));
  border: .5cqw solid #3a4a41; border-radius: 6px;   /* the room's outer walls */
  /* floorboards: faint lines over the dark green of the room */
  background:
    repeating-linear-gradient(90deg, rgba(var(--cream-rgb), .028) 0 1px, transparent 1px 7.2%),
    linear-gradient(160deg, #142019, #0d1512);
}
.tbl {
  position: absolute; width: calc(var(--w) * var(--u)); height: calc(var(--h) * var(--u)); padding: 0;
  transform: translate(-50%, -50%); touch-action: none; cursor: pointer;
  display: grid; align-content: center; justify-items: center; gap: calc(.1 * var(--u));
  color: var(--cream); background: #2a2018; border: calc(.18 * var(--u)) solid #5d4a35; border-radius: calc(.9 * var(--u));
  box-shadow: 0 calc(.5 * var(--u)) calc(1.4 * var(--u)) rgba(0, 0, 0, .45); transition: border-color .2s, background-color .2s, box-shadow .2s;
}
.tbl[data-shape="round"] { border-radius: 50%; }
.tbl b { font: 400 max(1rem, calc(2 * var(--u)))/1 var(--serif); }   /* stays readable on very large floors */
.tbl__n { font: 500 max(.62rem, calc(1.05 * var(--u)))/1 var(--sans); letter-spacing: .08em; color: #8fd3aa; }
.tbl__since { font: 400 calc(.95 * var(--u))/1 var(--sans); color: var(--muted); }
/* chairs */
.tbl i {
  position: absolute; width: calc(2.1 * var(--u)); height: calc(2.1 * var(--u)); margin: -calc(1.05 * var(--u)) 0 0 -calc(1.05 * var(--u)); border-radius: 35%;
  background: #1c2a23; border: calc(.14 * var(--u)) solid #3d5348; z-index: -1;
}
.tbl i[data-taken] { background: var(--gold); border-color: var(--gold-soft); }
.tbl:hover, .tbl:focus-visible { border-color: var(--cream); }
.tbl[data-state="busy"] { background: #3a2a14; border-color: var(--gold); }
.tbl[data-state="busy"] .tbl__n { color: var(--gold-soft); }
.tbl[data-picked] { border-color: #8fd3aa; box-shadow: 0 0 0 calc(.5 * var(--u)) rgba(143, 211, 170, .3); }
#floor[data-mode="edit"] .tbl { cursor: grab; border-style: dashed; }
#floor[data-mode="edit"] .tbl:active { cursor: grabbing; }
@media (max-width: 760px) {
  .tbl b { font-size: calc(3.2 * var(--u)); }
  .tbl__n { font-size: calc(2 * var(--u)); }
  .tbl__since { display: none; }
}

/* walls, bar, doors: part of the picture in normal use, draggable while editing */
.fx {
  position: absolute; width: calc(var(--w) * 1cqw); height: calc(var(--h) * 1cqw); padding: 0; border: 0;
  transform: translate(-50%, -50%); touch-action: none; pointer-events: none;
}
.fx--wall { background: #3a4a41; border-radius: .2cqw; }
.fx--bar {
  display: grid; place-items: center; overflow: hidden; border-radius: .8cqw;
  background: linear-gradient(135deg, #4a3622, #2c2015); border: .2cqw solid #7a5c38; box-shadow: 0 .4cqw 1.2cqw rgba(0, 0, 0, .4);
  color: var(--gold-soft); font: 500 1.05cqw/1 var(--sans); letter-spacing: .3em; text-transform: uppercase; writing-mode: horizontal-tb;
}
/* a door is a gap in the wall (the floor colour) with its leaf and swing drawn into the room */
.fx--bar[data-vertical], .fx--block[data-vertical] { writing-mode: vertical-rl; }
/* kitchen, stairs, storage: floor that is not for guests */
.fx--block {
  display: grid; place-items: center; overflow: hidden; border-radius: .4cqw; border: .16cqw solid #3a4a41;
  background: repeating-linear-gradient(45deg, rgba(var(--cream-rgb), .05) 0 .5cqw, transparent .5cqw 1.2cqw), #1a2620;
  color: var(--muted); font: 500 .95cqw/1.2 var(--sans); letter-spacing: .22em; text-transform: uppercase; text-align: center;
}
.fx--door { background: #16211b; color: var(--muted); }
.fx--door::before {
  content: ""; position: absolute; width: calc(var(--len) * 1cqw); height: calc(var(--len) * 1cqw);
  border: .14cqw dashed rgba(var(--cream-rgb), .3); border-left: .3cqw solid #8a7a5a; border-radius: 0;
}
.fx--door[data-swing="up"]::before { left: 0; bottom: 100%; border-top: 0; border-bottom: 0; border-top-right-radius: 100%; }
.fx--door[data-swing="down"]::before { left: 0; top: 100%; border-top: 0; border-bottom: 0; border-bottom-right-radius: 100%; }
.fx--door[data-swing="right"]::before { top: 0; left: 100%; border-left: 0; border-right: 0; border-top: .3cqw solid #8a7a5a; border-bottom-right-radius: 100%; }
.fx--door[data-swing="left"]::before { top: 0; right: 100%; border-left: 0; border-right: 0; border-top: .3cqw solid #8a7a5a; border-bottom-left-radius: 100%; }
.fx--door span { position: absolute; left: 50%; transform: translateX(-50%); font: 500 .95cqw/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; white-space: nowrap; }
.fx--door[data-swing="up"] span { bottom: calc(100% + .8cqw); }
.fx--door[data-swing="down"] span { top: calc(100% + .8cqw); }
/* doors on a side wall: label inside the room, beside the opening */
.fx--door[data-swing="right"] span { left: calc(100% + 1cqw); top: 100%; transform: translateY(.6cqw); }
.fx--door[data-swing="left"] span { left: auto; right: calc(100% + 1cqw); top: 100%; transform: translateY(.6cqw); }
#floor[data-mode="edit"] .fx { z-index: 2; pointer-events: auto; cursor: grab; outline: .14cqw dashed rgba(var(--cream-rgb), .45); outline-offset: .3cqw; }
#floor[data-mode="edit"] .fx:active { cursor: grabbing; }
@media (max-width: 760px) { .fx--bar, .fx--block { font-size: 1.9cqw; letter-spacing: .1em; } .fx--door span { font-size: 1.8cqw; } }

.tbl__next { font: 500 max(.6rem, calc(1 * var(--u)))/1 var(--sans); color: var(--gold-soft); }
.tbl[data-state="soon"] { border-color: var(--gold); border-style: dashed; }
.floor-warn { display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: center; padding: .9rem 1rem; border: 1px solid var(--gold); border-radius: 8px; }
.floor-warn p { flex: 1; min-width: 14rem; }

/* map with the day's arrivals beside it on a tablet or desktop, below it on a phone */
.service { display: grid; gap: 1.25rem; align-items: start; }
.view[data-view="sala"] { max-width: 1500px; }
.arrivals { display: grid; gap: .75rem; }
.arrivals ul { display: grid; gap: .5rem; }
.arrival {
  width: 100%; min-height: 64px; padding: .7rem .9rem; text-align: left; cursor: pointer;
  display: grid; grid-template-columns: auto 1fr; gap: .3rem .8rem; align-items: center;
  background: var(--bg-2); color: var(--cream); border: 1px solid var(--line); border-radius: 8px; transition: border-color .2s;
}
.arrival:hover, .arrival:focus-visible { border-color: var(--gold); }
.arrival:active { transform: scale(.985); }
.arrival b { grid-row: span 2; font: 400 1.7rem/1 var(--serif); }
.arrival__who { font-size: 1rem; overflow-wrap: anywhere; }
.arrival .badge { justify-self: start; }
.arrival__note { grid-column: 2; font-size: .85rem; color: var(--muted); }
.arrival__none { color: var(--muted); font-size: .95rem; padding: .5rem 0; }
@media (min-width: 1000px) {
  .service { grid-template-columns: minmax(0, 1fr) 300px; }
  .arrivals { position: sticky; top: 76px; max-height: calc(100svh - 96px); overflow-y: auto; }
}
/* a finger is less precise than a mouse: bigger targets on touch screens */
@media (pointer: coarse) {
  .act, .tabs button, .chip, .datenav button { min-height: 48px; }
  .party__n { width: 68px; height: 68px; }
  .res__actions { gap: .5rem; }
}

.floor-dlg { display: grid; gap: 1rem; }
.floor-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 1rem; align-items: end; }
.floor-form .field input, .floor-form .field select, .floor-dlg > .field input { color-scheme: dark; }
.floor-list { display: flex; flex-wrap: wrap; gap: .5rem; }
.floor-list .act { text-transform: none; letter-spacing: 0; font-size: .92rem; }
.floor-note { color: var(--muted); }
.presets { display: grid; gap: .6rem; }
.preset { display: grid; gap: .35rem; padding: 1rem 1.1rem; text-align: left; cursor: pointer; background: none; color: var(--cream); border: 1px solid var(--line); border-radius: 8px; }
.preset:hover { border-color: var(--gold); }
.preset b { font: 400 1.35rem/1.1 var(--serif); }
.preset span { font-size: .92rem; color: var(--muted); }
.party { display: flex; flex-wrap: wrap; gap: .5rem; }
.party__n {
  width: 60px; height: 60px; border-radius: 50%; cursor: pointer; font: 400 1.6rem/1 var(--serif);
  background: var(--gold); color: var(--bg); border: 1px solid var(--gold); transition: background-color .2s, transform .2s var(--ease);
}
.party__n:hover { background: var(--cream); border-color: var(--cream); }
.party__n:active { transform: scale(.94); }
.party__n--extra { background: none; color: var(--muted); border-color: var(--line); border-style: dashed; }
span.res__name { cursor: default; }
span.res__name:hover { color: var(--cream); }

/* Mordia: plan and payment tab */
.plan__head { display: grid; gap: .5rem; margin-bottom: 1.5rem; }
.plan__head h2 { font: 300 2rem/1.1 var(--serif); }
.plan__status { font: 500 .72rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.plan__status--past_due, .plan__status--suspended, .plan__status--cancelled { color: var(--danger); }
.plan__grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.plan__card { display: grid; gap: .6rem; align-content: start; padding: 1.25rem; border: 1px solid var(--line); border-radius: 14px; }
.plan__card--on { border-color: var(--gold); }
.plan__card h3 { font: 400 1.5rem/1.1 var(--serif); }
.plan__price { font: 500 1.1rem/1.2 var(--sans); color: var(--gold-soft); }
.plan__setup, .plan__note { color: var(--muted); font-size: .85rem; }
.plan__card ul { margin: 0; padding-left: 1.1rem; display: grid; gap: .25rem; font-size: .9rem; }
.plan__card button { justify-self: start; margin-top: .4rem; }
/* ---------------------------------------------------------------- manager: five sections, then that section's screens */
.has-groups .top { flex-wrap: wrap; row-gap: .4rem; }
.groups { display: flex; gap: .35rem; margin-inline: auto; }
.group {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 46px; padding: 0 1.1rem; border-radius: 999px;
  border: 1px solid var(--line); background: none; color: var(--muted); cursor: pointer;
  font: 500 .78rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; transition: color .2s, background-color .2s, border-color .2s;
}
.group:hover { color: var(--cream); border-color: rgba(var(--cream-rgb), .3); }
.group[aria-current="true"] { background: var(--gold); border-color: var(--gold); color: var(--bg); }
.has-groups .tabs { order: 10; flex-basis: 100%; justify-content: center; margin: 0; padding-top: .45rem; border-top: 1px solid var(--line); }
.has-groups .tabs button[aria-selected="true"] { background: none; color: var(--gold); border-color: var(--gold); }
.bell { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: none; color: var(--muted); cursor: pointer; }
.bell:hover, .bell[aria-pressed="true"] { color: var(--cream); border-color: var(--gold); }
.bell__dot { position: absolute; top: 8px; right: 9px; width: 9px; height: 9px; border-radius: 50%; background: var(--danger); box-shadow: 0 0 0 2px var(--bg-2); }
@media (max-width: 760px) {
  /* on a phone the sections become a bar at the bottom of the screen, like an app */
  .groups { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; margin: 0; gap: 0; justify-content: space-around;
    padding: .35rem .25rem calc(.35rem + env(safe-area-inset-bottom)); background: var(--bg-2); border-top: 1px solid var(--line); }
  .group { flex: 1; flex-direction: column; gap: .2rem; min-height: 54px; padding: .3rem 0; border: 0; border-radius: 12px; font-size: .58rem; letter-spacing: .08em; }
  .group[aria-current="true"] { background: none; color: var(--gold); }
  .has-groups .tabs { justify-content: flex-start; }
  .has-groups .view { padding-bottom: 6.5rem; }
}