.navtoggle {
display: none;
width: var(--tap);
height: var(--tap);
flex-shrink: 0;
border-radius: var(--r-pill);
align-items: center;
justify-content: center;
color: var(--ink);
transition: background-color var(--t-fast) ease;
}
.navtoggle:hover { background: var(--surface-sunken-2); }
.navtoggle[aria-expanded="true"] { background: var(--surface-dark); color: var(--ink-invert); }
.navtoggle .navtoggle__open  { display: block; }
.navtoggle .navtoggle__close { display: none; }
.navtoggle[aria-expanded="true"] .navtoggle__open  { display: none; }
.navtoggle[aria-expanded="true"] .navtoggle__close { display: block; }
.nav-scrim {
position: fixed;
inset: 0;
z-index: 38;
background: rgba(28, 28, 30, 0.32);
-webkit-backdrop-filter: blur(2px);
backdrop-filter: blur(2px);
animation: fade 180ms var(--ease) both;
}
@media (max-width: 900px) {
:root { --topbar-w: 100%; }
.navtoggle { display: flex; }
.topbar {
height: auto;
min-height: 60px;
padding: 8px 8px 8px 16px;
gap: 10px;
flex-wrap: nowrap;
}
.topbar__nav {
display: none;
position: absolute;
top: calc(100% + 8px);
left: 0;
right: 0;
z-index: 39;
flex-direction: column;
align-items: stretch;
gap: 2px;
padding: 10px;
border-radius: var(--r-xl);
background: var(--surface-card);
-webkit-backdrop-filter: var(--blur);
backdrop-filter: var(--blur);
box-shadow: var(--shadow-card), rgba(28, 28, 30, 0.18) 0 18px 48px -12px;
overflow: visible;
animation: rise 220ms var(--ease) both;
}
.topbar__nav[data-open="true"] { display: flex; }
.topbar { position: sticky; }
.topbar__nav .navlink {
height: 48px;
padding: 0 14px;
gap: 12px;
font-size: var(--fs-body);
border-radius: var(--r-lg);
}
.topbar__nav .navlink span { display: inline; }
.topbar__nav .navlink .navlink__count { margin-left: auto; }
.topbar__end { margin-left: auto; }
.avatar-btn__name { display: none; }
.avatar-btn { padding: 0 6px; }
}
@media (min-width: 901px) {
.nav-scrim { display: none; }
}
@media (max-width: 1100px) {
[data-r="row"] {
flex-direction: column !important;
min-height: 0 !important;
}
[data-r="panel"],
[data-r="wide"] {
width: 100% !important;
max-width: 100% !important;
flex-shrink: 1 !important;
}
[data-r="band"] {
height: auto !important;
min-height: 0 !important;
}
[data-r="row"] > [data-lead] { order: -1 !important; }
[data-r="panel"][style*="height"] { height: auto !important; }
}
@media (min-width: 641px) and (max-width: 1100px) {
[data-r="tiles"],
.grid--2, .grid--3, .grid--4 {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
height: auto !important;
}
[data-r="tiles"] .chart { min-height: 230px; }
}
@media (max-width: 1100px) {
[data-split] { column-gap: 18px !important; }
}
@media (max-width: 900px) {
[data-split] {
flex-wrap: wrap !important;
row-gap: 14px !important;
}
[data-push] {
margin-left: 0 !important;
flex-shrink: 1 !important;
min-width: 0;
}
[data-r="band"] {
padding-top: 18px !important;
padding-bottom: 18px !important;
padding-left: 20px !important;
padding-right: 20px !important;
}
[data-r="band"] > [data-push] { width: 100% !important; }
}
@media (max-width: 640px) {
[data-r="band"] > [data-push] {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 14px 16px !important;
align-items: start !important;
}
[data-r="rule"] { display: none !important; }
[data-r="band"] { gap: 14px !important; }
[data-r="band"] h1 { font-size: 22px !important; line-height: 27px !important; }
}
@media (max-width: 640px) {
[data-flow] {
flex-wrap: wrap !important;
row-gap: 8px;
}
}
.mono,
[style*="ui-monospace"],
[style*="font-family: ui-monospace"] {
overflow-wrap: anywhere;
word-break: break-word;
}
@media (max-width: 640px) {
.board, .board p, .board span, .board td { overflow-wrap: break-word; }
}
@media (max-width: 900px) {
[data-r="grid-head"] { display: none !important; }
[data-r="grid"] {
grid-template-columns: minmax(0, 1fr) !important;
height: auto !important;
row-gap: 10px !important;
padding: 14px !important;
align-items: start !important;
background: rgba(255, 255, 255, 0.5);
border-radius: var(--r-lg);
}
[data-r="grid"] + [data-r="grid"] { margin-top: 10px; }
[data-r="grid"] > [data-col]::before {
content: attr(data-col);
display: block;
margin-bottom: 3px;
font-size: 9.5px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-soft);
}
[data-r="grid"] > [data-col]:first-child::before,
[data-r="grid"] > [data-col="Actions"]::before,
[data-r="grid"] > [data-col="Action"]::before { content: none; }
[data-r="grid"] > [data-col] { justify-self: stretch !important; }
[data-r="grid"] > [data-col=""] { display: none; }
.board [style*="overflow-y: auto"] {
overflow: visible !important;
max-height: none !important;
}
[data-r="spacer"] { height: 12px !important; }
}
@media (max-width: 640px) {
[data-r="stage"] {
width: 220px !important;
height: 220px !important;
}
[data-r="stage"] > span:not(.pl-logo) {
width: auto !important;
height: auto !important;
inset: 0 !important;
}
[data-r="stage"] img { max-width: 62%; height: auto; }
}
@media (max-width: 640px) {
:root { --gutter: 14px; --gap: 12px; }
[data-r="tiles"],
.grid--2, .grid--3, .grid--4 {
grid-template-columns: minmax(0, 1fr) !important;
height: auto !important;
}
.board h1, .phead h1 { font-size: 22px !important; line-height: 27px !important; }
.board h2 { font-size: 15px !important; line-height: 21px !important; }
.display { font-size: 22px; line-height: 27px; }
.phead { padding-left: 18px !important; padding-right: 18px !important; }
.phead__metrics { flex-wrap: wrap; row-gap: 12px; }
.phead__div { display: none; }
}
@media (max-width: 900px) {
html, body { max-width: 100%; overflow-x: hidden; }
.board, .page { min-width: 0; }
.board * { max-width: 100%; }
.chart { min-height: 220px; }
[data-r="paper"] {
max-width: none !important;
flex-shrink: 0 !important;
}
[data-paper-scroll] {
overflow-x: auto !important;
-webkit-overflow-scrolling: touch;
max-width: 100%;
}
[data-paper-scroll] > * { margin-inline: 0 !important; }
}
@media (max-width: 420px) {
.topbar__brand img { width: 30px; height: 30px; }
.btn { padding: 0 14px; font-size: 12px; }
}