/* The permissions screen, laid out like the settings of a desktop application: a list on the left
   with its own scroll, the detail on the right. Colours and type come from app.css. */

.perms { display: flex; flex-direction: column; height: calc(100vh - var(--head) - clamp(12px, 1.6vw, 28px) - 16px); min-height: 540px; font-family: var(--sans); }
@supports (height: 100dvh) { .perms { height: calc(100dvh - var(--head) - clamp(12px, 1.6vw, 28px) - 16px); } }
.perms .note { font: 400 .8125rem/1.5 var(--sans); margin: 0 0 10px; padding: 8px 12px; max-width: none; }

/* header ---------------------------------------------------------------------------------------- */

.ptop { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 20px; min-height: 44px; margin-bottom: 8px; }
.ptop h1 { font: 600 1.25rem/1.2 var(--sans); letter-spacing: -.016em; }
.ptabs, .pmode { display: flex; gap: 2px; }
.ptabs a, .pmode a { padding: 4px 11px; border-radius: 7px; color: var(--muted); font: 400 .875rem/1.45 var(--sans); text-decoration: none; transition: background-color .12s, color .12s; }
.ptabs a[aria-current], .pmode a[aria-current] { background: var(--chip); color: var(--ink); font-weight: 500; }
.ptop-tools { margin-left: auto; }
.pmode a { font-size: .8125rem; }
@media (hover: hover) { .ptabs a:hover, .pmode a:hover { color: var(--ink); } }
.ptabs a:active, .pmode a:active { color: var(--ink); }
.ptabs a:focus-visible, .pmode a:focus-visible { outline-offset: -2px; }

.perms .viewbar { padding: 8px 12px; margin-bottom: 8px; border-radius: 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; font-size: .8125rem; }
.perms .viewbar.snap .vtitle { margin: 0; }
.perms .viewbar .vsum { margin: 0; flex-basis: 100%; font-size: .8125rem; max-width: none; color: var(--muted); }
.perms .viewbar .sel { min-width: 11em; max-width: 18em; }

.pread { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0 0 8px; color: var(--muted); font: 400 .8125rem/1.5 var(--sans); }

/* the frame ------------------------------------------------------------------------------------- */

.pframe { flex: 1; min-height: 0; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.phost { flex: 1; min-height: 0; display: flex; }
.pw { flex: 1; min-width: 0; min-height: 0; display: grid; grid-template-columns: 280px minmax(0, 1fr); }
.pl { display: flex; flex-direction: column; min-height: 0; min-width: 0; background: var(--card); border-right: 1px solid var(--line); }
.pl-h { padding: 10px 10px 6px; }
.pl-list { flex: 1; min-height: 0; overflow-y: auto; padding: 2px 8px 14px; overscroll-behavior: contain; }
.pl-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 14px 18px; overscroll-behavior: contain; }
.pl-more { margin: 8px 0 0; }
.pd { min-height: 0; min-width: 0; overflow-y: auto; overscroll-behavior: contain; }
.pd:focus { outline: none; }
.pd-in { max-width: 800px; margin-inline: auto; padding: 4px 24px 32px; }
.pd-in.wide { max-width: 1040px; padding-top: 14px; }
.pstate { padding: 24px; }
.pquiet { margin: 8px 0 0; color: var(--muted); font: 400 .8125rem/1.5 var(--sans); }
.pl-list > .pquiet { padding: 4px 8px; }

.psearch { position: relative; display: block; }
.psearch > svg { position: absolute; left: 9px; top: calc(50% - 7px); width: 14px; height: 14px; fill: none; stroke: var(--muted); stroke-width: 1.5; stroke-linecap: round; pointer-events: none; }
.psearch input { padding-inline: 29px 28px; background: var(--bg); outline: 1px solid var(--line); outline-offset: -1px; }
.psearch input::-webkit-search-cancel-button { margin-right: -18px; }
.psearch kbd { position: absolute; right: 7px; top: calc(50% - 9px); width: 18px; height: 18px; display: grid; place-items: center; border-radius: 4px; background: var(--chip); color: var(--muted); font: 400 .6875rem/1 var(--mono); pointer-events: none; transition: opacity .12s; }
.psearch input:focus ~ kbd, .psearch input:not(:placeholder-shown) ~ kbd { opacity: 0; }
@media (pointer: coarse) { .psearch kbd { display: none; } }

/* rows of the list -------------------------------------------------------------------------------- */

.pgrp { padding: 12px 8px 3px; color: var(--muted); font: 500 .75rem/1.4 var(--sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pli { display: flex; align-items: center; gap: 8px; min-height: 32px; padding: 4px 8px; border-radius: 6px; color: var(--ink); font: 400 .875rem/1.35 var(--sans); text-decoration: none; transition: background-color .12s; }
.pli[aria-current] { background: var(--chip); font-weight: 500; }
.pli:active { background: var(--line); }
.pli:focus-visible { outline-offset: -2px; }
@media (hover: hover) { .pli:hover:not([aria-current]) { background: color-mix(in srgb, var(--chip) 60%, transparent); } }
.pli.pin { margin-bottom: 4px; }
.pli-n { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pli-c { flex: none; min-width: 1.4em; text-align: right; color: var(--muted); font: 400 .75rem/1 var(--sans); font-variant-numeric: tabular-nums; }
.pli-lock { flex: none; display: inline-flex; color: var(--muted); }
.pli-lock svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; }
.pli-edit { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.pli-ch > svg { flex: none; width: 14px; height: 14px; fill: none; stroke: var(--muted); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.pli-ch { padding-left: 20px; }
.pli-ch.cat { padding-left: 8px; font-weight: 500; margin-top: 6px; }
.pl-list > .pli-ch.cat:first-child { margin-top: 0; }
.ptag { flex: none; padding: 0 5px; border-radius: 4px; box-shadow: inset 0 0 0 1px var(--line); color: var(--muted); font: 400 .6875rem/1.45 var(--sans); white-space: nowrap; }
.ptag.accent { box-shadow: none; background: var(--accent); color: var(--btn-fg); }
.rdot { flex: none; width: 10px; height: 10px; }
.rdot.big { width: 14px; height: 14px; }
.rdot circle:not([fill]) { fill: var(--field); }

/* the head of the detail -------------------------------------------------------------------------- */

.pdh { position: sticky; top: 0; z-index: 3; padding: 14px max(24px, calc((100% - 752px) / 2)) 8px; background: var(--bg); box-shadow: 0 1px 0 var(--line); }
.pd-in .pdh.static { position: static; padding: 10px 0 8px; box-shadow: none; }
.pdh-row { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; }
.pdh-name { flex: 1 1 12em; min-width: 0; display: flex; align-items: center; gap: 9px; }
.pdh-name > svg:not(.rdot) { flex: none; width: 16px; height: 16px; fill: none; stroke: var(--muted); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.pdh h2 { margin: 0; font: 600 1.125rem/1.3 var(--sans); letter-spacing: -.012em; overflow-wrap: anywhere; }
.pdh-acts { display: flex; align-items: center; gap: 6px; }
.pdh-acts .sel { min-width: 0; width: 8.5em; display: block; }
.pdh-acts .sel-btn { height: var(--ctl-s); padding-inline: 10px; font: 400 .8125rem/1.5 var(--sans); }
.pdh-acts .sel-list { left: auto; right: 0; }
.pdh-acts .sel-list li { font: 400 .875rem/1.4 var(--sans); }
main.page .pdh-meta { margin: 2px 0 0; color: var(--muted); font: 400 .8125rem/1.5 var(--sans); font-variant-numeric: tabular-nums; max-width: none; }
.pdh-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 10px; }
.pdh-tools .psearch { flex: 1 1 12em; min-width: 0; max-width: 18em; }
.pdh-tools .psearch input, .ptable-in .psearch input { height: var(--ctl-s); padding-right: 11px; }
.pd-back { display: none; align-items: center; gap: 6px; margin-bottom: 8px; min-height: 32px; color: var(--muted); font: 400 .875rem/1.4 var(--sans); text-decoration: none; }
.pd-back svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transform: rotate(180deg); }

/* blocks and rows of permissions --------------------------------------------------------------- */

.pb { margin-top: 18px; }
.pb h3, .pins h3 { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0 0 4px; font: 600 .8125rem/1.5 var(--sans); letter-spacing: 0; }
.pb-n { color: var(--muted); font: 400 .75rem/1 var(--sans); font-variant-numeric: tabular-nums; }
.pb-rows { border-top: 1px solid var(--line); }
.pr { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 20px; min-height: 52px; padding-block: 8px; border-bottom: 1px solid color-mix(in srgb, var(--line) 65%, transparent); }
.pr-t { min-width: 0; }
.pr-n { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; font: 500 .875rem/1.4 var(--sans); }
.pr-n .chipx { font-size: .6875rem; padding: 0 6px; line-height: 1.5; }
.pr-h { color: var(--muted); font: 400 .8125rem/1.45 var(--sans); }
.pr-c { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.pr-s { color: var(--muted); font: 400 .75rem/1.3 var(--sans); text-align: right; }
.pr-s .chipx { font-size: .6875rem; padding: 0 6px; line-height: 1.5; }
.pr.via .pr-n { color: var(--muted); }
.pr.via .switch:disabled { opacity: .55; }
.pr .switch { transition: background-color .12s, transform .12s; }
.pr .switch::after { transition: transform .12s var(--ease), background-color .12s; }
.pr-tri.edited .pr-n > span:first-child::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 7px; border-radius: 50%; background: var(--accent); vertical-align: 2px; }

.tri { flex: none; padding: 2px; gap: 1px; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--line); }
.tri button { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 0; min-height: 26px; padding: 2px 9px; font: 400 .75rem/1.4 var(--sans); transition: background-color .12s, color .12s; }
.tri button svg { width: 11px; height: 11px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) { .tri button:hover:not(.ro):not([aria-pressed="true"]) { color: var(--ink); background: var(--card); } }
.pr-tri.rdiff { box-shadow: -8px 0 0 var(--add-bg), 8px 0 0 var(--add-bg); }

/* who is set up in a channel ---------------------------------------------------------------------- */

.prules { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-top: 6px; }
.prule { display: inline-flex; align-items: center; gap: 6px; min-height: var(--ctl-s); padding: 2px 9px; border: 1px solid var(--line); border-radius: 8px; background: none; color: var(--ink); font: 400 .8125rem/1.4 var(--sans); cursor: pointer; transition: background-color .12s, border-color .12s; }
.prule[aria-pressed="true"] { background: var(--chip); border-color: var(--field); font-weight: 500; }
.prule > svg:not(.rdot) { width: 11px; height: 11px; fill: none; stroke: var(--muted); stroke-width: 1.4; }
.prule .dstat { font-size: .75rem; font-weight: 400; }
.prule:active { transform: scale(.98); }
@media (hover: hover) { .prule:hover:not([aria-pressed="true"]) { background: var(--card); } }
.prules .sel { min-width: 0; width: 10.5em; }
.prules .sel-btn { height: var(--ctl-s); padding-inline: 10px; font: 400 .8125rem/1.5 var(--sans); }
.prules .sel-list li { font: 400 .875rem/1.4 var(--sans); }
.prule-h { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 18px; }
.prule-h h3 { margin: 0; font: 600 .9375rem/1.4 var(--sans); letter-spacing: -.006em; }
.prule-h .grow { flex: 1; }

/* the check ------------------------------------------------------------------------------------------- */

.pcheck-who { display: grid; gap: 8px; padding-top: 6px; }
.pcheck-who .sel, .pl-check .seg { width: 100%; }
.pcheck-who .sel-btn { height: var(--ctl-s); font: 400 .8125rem/1.5 var(--sans); background: var(--bg); }
.pcheck-who .sel-list li { font: 400 .875rem/1.4 var(--sans); }
.pcheck-who .chipx svg { width: 10px; height: 10px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.pcheck-who button.chipx { min-height: 0; }
.pl-check .pb:first-child { margin-top: 0; }
.pl-check .seg { padding-top: 4px; }
.pins { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--line); }
.pins-l { list-style: none; margin: 4px 0 0; padding: 0; font: 400 .8125rem/1.45 var(--sans); }
.pins-l li + li { border-top: 1px solid color-mix(in srgb, var(--line) 65%, transparent); }
.pins-l a { display: block; padding: 7px 0; text-decoration: none; }
.pins-l a:focus-visible { outline-offset: -2px; }
@media (hover: hover) { .pins-l a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; } }

.pd-check { container-type: inline-size; }
.pd-check .pdh-tools { margin-top: 0; margin-bottom: 8px; }
.pm { font: 400 .875rem/1.4 var(--sans); border-collapse: separate; border-spacing: 0; }
.pm th, .pm td { padding: 0; border-bottom: 1px solid color-mix(in srgb, var(--line) 65%, transparent); vertical-align: middle; }
.pm thead th { top: 0; z-index: 2; height: 30px; padding-right: 8px; border-bottom-color: var(--line); background: var(--bg); font: 400 .75rem/1.3 var(--sans); }
.pm th.pm-c, .pm td.pm-c { width: 76px; padding-right: 0; text-align: center; }
.pm .short { display: none; }
.pm .pm-cat th { position: static; padding: 14px 0 4px; border-bottom-color: var(--line); background: none; color: var(--ink); font: 600 .8125rem/1.4 var(--sans); }
.pm-r { cursor: pointer; transition: background-color .12s; }
@media (hover: hover) { .pm-r:hover { background: var(--card); } }
.pm-r:active { background: var(--chip); }
.pm-r.open { background: var(--card); }
.pm-open { display: flex; align-items: center; gap: 7px; width: 100%; min-height: 34px; padding: 3px 8px 3px 2px; border: 0; background: none; color: var(--ink); font: 400 .875rem/1.4 var(--sans); text-align: left; cursor: pointer; }
.pm-open > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-open svg { flex: none; width: 13px; height: 13px; fill: none; stroke: var(--muted); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.pm-open svg:first-child { width: 11px; height: 11px; transform: rotate(-90deg); transition: transform .12s; }
.pm-open[aria-expanded="true"] svg:first-child { transform: none; }
.pm-open:focus-visible { outline-offset: -2px; }
.pm-c svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.pm-c.yes { color: var(--add); }
.pm-c.no { color: var(--muted); }
.pm-c.no svg { stroke-width: 1.5; opacity: .75; }
.pm-c.na { color: var(--muted); }
.pm td.pm-c.moved { box-shadow: inset 0 0 0 1.5px var(--accent); border-radius: 6px; }
.pm-x td { padding: 0; background: var(--card); }
.pxp { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 20px 28px; padding: 12px 14px 16px 22px; }
main.page .pxp-q { margin: 12px 0 8px; font: 500 .875rem/1.4 var(--sans); max-width: none; }
.pxp-side { display: grid; gap: 12px; align-content: start; }
.pr-who h4 { margin: 0 0 5px; font: 600 .8125rem/1.4 var(--sans); }
.pr-who .pquiet { margin-top: 5px; }
.pchain { list-style: none; margin: 0; padding: 0; font: 400 .8125rem/1.5 var(--sans); }
.pchain li { position: relative; display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; padding-bottom: 8px; }
.pchain li:not(:last-child)::before { content: ""; position: absolute; left: 8.5px; top: 18px; bottom: -1px; width: 1px; background: var(--line); }
.pchain b { font-weight: 500; }
.pchain span { color: var(--muted); }
.pc-i { width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; background: var(--chip); }
.pc-i svg { width: 10px; height: 10px; fill: none; stroke: var(--muted); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.yes > .pc-i { background: var(--add-bg); } .yes > .pc-i svg { stroke: var(--add); }
.no > .pc-i { background: var(--del-bg); } .no > .pc-i svg { stroke: var(--error); }
.pc-end { padding-bottom: 0; }
.pc-end b { font-weight: 600; }

@container (max-width: 640px) {
  .pm th.pm-c, .pm td.pm-c { width: 44px; }
  .pm .long { display: none; }
  .pm .short { display: inline; }
  .pxp { grid-template-columns: minmax(0, 1fr); }
}

/* history --------------------------------------------------------------------------------------- */

.hhead { display: flex; align-items: center; gap: 8px; margin: 0; font: 400 .8125rem/1.5 var(--sans); }
.hhead b { font-weight: 600; flex: 1; }
a.hrow { color: inherit; text-decoration: none; }
.pl-list .hrow { grid-template-columns: 16px minmax(0, 1fr); padding-inline: 6px; }
.pl-list .hm { font-size: .8125rem; }
.pl-list .hs { font-size: .75rem; white-space: normal; }
.pl-list .rail i { background: var(--card); }
.pcompare { margin-top: 10px; }
.pcompare .sel { min-width: 12em; max-width: 20em; }
.pcompare .sel-btn { height: var(--ctl-s); font: 400 .8125rem/1.5 var(--sans); }
.pcompare .sel-list li { font: 400 .875rem/1.4 var(--sans); }
.pd-in .vsum { margin: 12px 0; }
.pd-in .lines { font: 400 .875rem/1.45 var(--sans); }
.perms .viewbar .sel-btn { height: var(--ctl-s); font: 400 .8125rem/1.5 var(--sans); }
.perms .viewbar .sel-list li { font: 400 .875rem/1.4 var(--sans); }
.perms .check { font-size: .8125rem; }

/* the table ------------------------------------------------------------------------------------- */

.ptable { display: none; flex: 1; min-width: 0; min-height: 0; padding: 12px 16px 8px; }
.pw.is-table { grid-template-columns: minmax(0, 1fr); }
.pw.is-table .pl, .pw.is-table .pd { display: none; }
.pw.is-table .ptable { display: flex; flex-direction: column; }
.ptable-wide, .ptable-in, .ptable-host { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.ptable-narrow { display: none; }
.ptable-in .tools { margin-bottom: 8px; flex: none; }
.ptable-host .mwrap { flex: 1; min-height: 0; max-height: none; }
.ptable-host .legend { flex: none; margin: 8px 0 0; }
.ptable-host .matrix .rn { max-height: 150px; overflow: hidden; text-overflow: ellipsis; }
.ptable-in .sel-btn { height: var(--ctl-s); font: 400 .8125rem/1.5 var(--sans); }
.ptable-in .sel-list li { font: 400 .875rem/1.4 var(--sans); }
.ptable-in .tools .psearch { flex: 0 1 16em; min-width: 12em; }

/* the tray and the window of edits ------------------------------------------------------------- */

.ptray { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 8px 12px; border-top: 1px solid var(--line); background: var(--card); font: 400 .8125rem/1.5 var(--sans); animation: rise .12s; }
.ptray-n { font-weight: 600; }
.ptray-d { color: var(--muted); }
.ptray .grow { flex: 1 1 0; }
.ptray .btn-soft { background: none; color: var(--muted); }
.prev { list-style: none; margin: 0; padding: 0; font: 400 .875rem/1.45 var(--sans); }
.prev li { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-top: 1px solid color-mix(in srgb, var(--line) 65%, transparent); }
.prev li:first-child { border-top: 0; }
.prev .ds { flex: none; width: 1.2em; font: 500 .9375rem/1 var(--mono); background: none; }
.prev .ds.mod { color: var(--muted); }
.prev .grow { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.pcopy:has(.sel-btn[aria-expanded="true"]) { min-height: 340px; } /* room for the open list: the dialog body clips it */

/* phone: the list is a step, with a way back ---------------------------------------------------- */

@media (max-width: 700px) {
  .perms { display: block; height: auto; min-height: 0; }
  .ptabs { width: 100%; }
  .ptabs a { flex: 1; padding-inline: 4px; text-align: center; min-height: 36px; line-height: 28px; }
  .ptop-tools { display: none; }
  .pframe { border: 0; border-radius: 0; overflow: visible; }
  .phost, .pw { display: block; }
  .pw:has(> .pl-check) { display: flex; flex-direction: column; }
  .pl-check, .pl-check .pl-scroll { display: contents; }
  .pd-check { margin-top: 16px; }
  .pins { order: 3; }
  .pw[data-step="list"] > .pd { display: none; }
  .pw[data-step="detail"] > .pl { display: none; }
  .pl { background: none; border: 0; }
  .pl-h { padding: 0 0 8px; }
  .pl-list, .pl-scroll, .pd { overflow: visible; padding-inline: 0; }
  .pl-scroll { padding-block: 0 16px; }
  .pli { min-height: 44px; }
  .pd-in, .pd-in.wide { padding-inline: 0; }
  .pd-check .pd-in.wide { padding-top: 0; }
  .pdh { padding-inline: 0; position: static; box-shadow: none; }
  .pd-back { display: inline-flex; }
  .pr { grid-template-columns: minmax(0, 1fr) auto; padding-block: 10px; }
  .pr-c .pr-s { max-width: 8em; }
  .pr .switch { width: 44px; height: 26px; }
  .pr .switch::after { top: 4px; left: 4px; width: 18px; height: 18px; }
  .pr .switch[aria-checked="true"]::after { transform: translateX(18px); }
  .pr-tri { grid-template-columns: minmax(0, 1fr); }
  .pr-tri .pr-c { justify-content: stretch; flex-wrap: wrap; }
  .tri { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
  .tri button { min-height: 40px; padding-inline: 2px; }
  .pdh-tools .psearch { flex: 1 1 100%; max-width: none; }
  .pm th.pm-c, .pm td.pm-c { width: 40px; }
  .pm td.pm-name { max-width: 0; }
  .pm-open { min-height: 44px; }
  .pxp { padding: 10px 8px 14px; }
  .ptable-wide { display: none; }
  .ptable-narrow { display: block; }
  .pw.is-table > .ptable { display: block; padding: 0; }
  .perms .viewbar .sel { max-width: none; }
  .ptray { position: sticky; bottom: 0; z-index: 12; margin-inline: calc(-1 * var(--g)); padding: 8px var(--g) calc(8px + env(safe-area-inset-bottom)); }
  .ptray .grow { flex-basis: 100%; height: 0; }
  .ptray .btn { flex: 1 1 auto; min-height: 40px; padding-inline: 6px; }
}