/* ===========================================================================
MOBILE — phone and tablet only.
Everything here is inside a max-width query, so the desktop app is not
touched by any of it. Load this LAST so it wins without !important wars.
These rules also hold inside a native shell (Capacitor / WKWebView /
Android WebView): a wrapped app is this same document in a full-screen
web view, so the same breakpoints apply. The two things a wrapper adds —
the notch and the home indicator — are handled here with safe-area insets,
which are inert in a desktop browser and only take effect where the OS
reports them.
=========================================================================== */
@media (max-width: 900px) {
/* ---- no scrollbars, anywhere ----------------------------------------
A phone has no pointer to grab a scrollbar with, so the bar is pure
noise: it eats horizontal room in tables and draws a grey stripe down
every panel. Scrolling itself is untouched — only the indicator goes. */
* {
scrollbar-width: none !important;
-ms-overflow-style: none !important;
}
*::-webkit-scrollbar { width: 0 !important; height: 0 !important; display: none !important; }
/* Panes that declare their own scrollbars still answer to this. */
.mt-drawer-b, .mt-gif-grid, .mt-thread, .pm-menu, .mt-in {
scrollbar-width: none !important; -ms-overflow-style: none !important;
}
/* ---- the floating bar is a desktop object ---------------------------
It assumes a pointer, room to expand sideways, and a window you can
drag it around. On a phone it covers content and cannot be moved out of
the way, so it goes; its jobs live in the page's own navigation. */
.gtb-bar, #gtb-bar-root, #gtb-shell,
.cpl-strip, .cpl-mini-item, .cpl-div { display: none !important; }
body.gtb-active, body.gtb-docked { padding-top: 0 !important; }
:root { --gtb-dock-space: 0px; }
/* ---- the notch and the home bar -------------------------------------
Inert in a browser; real in a wrapped app. Declared here so the app
build needs no separate stylesheet. */
.admin-main, .writer-main, main {
padding-left: max(env(safe-area-inset-left), 0px);
padding-right: max(env(safe-area-inset-right), 0px);
}
body { padding-bottom: env(safe-area-inset-bottom); }
.admin-side { padding-top: env(safe-area-inset-top); }
/* A wrapped app should not rubber-band the whole document behind the UI;
panes scroll, the page itself does not. */
html, body { overscroll-behavior-y: none; }
/* THE HOME-SCREEN APP'S BOTTOM GAP. In the installed app the page runs
under the clock and battery, and iOS takes that top strip off the
bottom of the layout whenever the page is not at least that much taller
than the screen — every bottom bar, drawer and pop-up shade then sat
~52px short, with a band under them. Counting the top strip into the
page's own height stops that. In Safari the strip is 0, so nothing
changes there; short pages still just fit, nothing extra scrolls into
view (scrollbars are hidden on phones). */
html { min-height: calc(100% + env(safe-area-inset-top)); }
/* THE PAGE PAINTS ITS OWN FLOOR. With no colour of its own, the page's root
let the installed app's launch colour (orange, fixed when the app was
added to the home screen) show through anywhere the page is see-through —
most visibly at the soft edges of the blurred dashboard behind the
"address immediately" pop-up. The root now carries the page's own colour,
so there is nothing orange left to show. */
html { background: var(--cream); }
html:has(.wp-shell) { background: var(--warm-white); }
/* The portal's page is --cream in dark mode (black), not --warm-white (a
dark grey): the root showed grey below any page shorter than the screen. */
html[data-theme="dark"]:has(.wp-shell) { background: var(--cream); }
/* ---- 1. A DIALOG KEEPS ITS DESIGN, AND GETS THE ROOM ----------------
The first attempt turned every overlay into a full screen page. It
worked, but it rebuilt something that was already right: the scrim, the
blur, the card, the buttons are all designed — the only thing wrong on
a phone was that the card was sized for a desktop column and left most
of the screen unused.
So nothing is rebuilt. The overlay keeps its own scrim, blur and card.
The card simply takes the width it can — 94% of the screen instead of
a 420px box centred in 375px — and is allowed to scroll if it is taller
than the phone. Structure untouched, buttons untouched.
The only addition is stacking: a dialog opened from inside another must
sit above it (see mobile-shell.js), because several of these are
written with fixed z-index values that assume nothing is already open. */
.modal-overlay, .md-overlay, .ptd-overlay, .notif-modal-overlay,
#shc-overlay, .shc-ov, .cnw-ov, .gcal-overlay, #detail-modal {
padding: max(12px, env(safe-area-inset-left)) 12px calc(12px + env(safe-area-inset-bottom)) !important;
align-items: center !important;
}
.modal-overlay > *, .md-overlay > *, .ptd-overlay > *, .notif-modal-overlay > *,
#shc-overlay > *, .shc-ov > *, .cnw-ov > *, #detail-modal > * {
width: 100% !important; max-width: 100% !important;
max-height: calc(100dvh - 24px - env(safe-area-inset-bottom)) !important;
overflow-y: auto !important; -webkit-overflow-scrolling: touch;
box-sizing: border-box !important;
}
/* The record view is the one that genuinely wants the whole screen: it is
a page's worth of content, not a question. */
#detail-modal > * {
max-height: calc(100dvh - 20px) !important; min-height: 60dvh;
}
.md-tr {
display: grid !important; grid-template-columns: auto 1fr !important;
row-gap: 8px !important; align-items: center !important;
}
.md-tr .md-c-name {
grid-column: 1 / -1 !important; flex: 1 0 100% !important; min-width: 0 !important;
white-space: normal !important; overflow: visible !important;
text-overflow: clip !important; text-align: left !important;
line-height: 1.3 !important;
}
.md-tr .md-c-due { flex: none !important; }
/* The board's rows match the suggested list's, so the toggle changes what
is shown and not how big it is. */
.mt-title { font-size: 14px !important; line-height: 1.35 !important; }
.md-title { font-size: 14px !important; }
.md-count { font-size: 11px !important; }
.md-tr .md-acks, .md-tr .md-ack { flex: none !important; }
#dash-links .ql-list, .ql-list {
display: flex !important; flex-wrap: nowrap !important;
overflow-x: auto !important; -webkit-overflow-scrolling: touch;
}
.ql-pill {
flex: none !important; width: 168px !important; max-width: 168px !important;
}
/* ---- 2. THE MENU HANGS OFF YOUR FACE --------------------------------
The account is where every phone app puts it, and it is also the way
into the menu — one target instead of a hamburger beside an avatar. */
.nav-fab, .menu-btn, #menu-btn { display: none !important; }
.admin-shell,
body.nav-rail .admin-shell {
display: block !important;
grid-template-columns: none !important;
width: 100% !important; max-width: 100% !important;
}
.admin-side .side-foot, .admin-side .side-tag { display: none !important; }
/* The drawer IS the screen. */
.admin-shell > .admin-side, .admin-side {
position: fixed !important; inset: 0 !important;
width: 100% !important; height: 100dvh !important;
max-width: none !important; z-index: 60 !important;
background: #0C0C0C !important; border-right: none !important;
padding: calc(22px + env(safe-area-inset-top)) 26px calc(22px + env(safe-area-inset-bottom)) !important;
transform: translateX(-101%) !important;
transition: transform 0.26s cubic-bezier(.4,0,.2,1) !important;
overflow-y: auto !important; box-shadow: none !important;
}
.admin-shell > .admin-side.open, .admin-side.open {
display: flex !important; flex-direction: column !important;
transform: translateX(0) !important;
}
/* Links at a size you hit without aiming, not a desktop list scaled down. */
.admin-side .side-nav { margin-top: 30px; gap: 0; }
body.nav-rail .admin-side .side-nav a > span,
body.nav-rail .admin-side .side-nav a > .side-label,
.admin-side .side-nav a > span { display: inline !important; }
body.nav-rail .admin-side .side-nav a::after { content: none !important; }
body.nav-rail .admin-side .side-nav a.side-link-mini { display: flex !important; }
.admin-side .side-nav a[data-key="automations"],
.admin-side .side-nav a[data-key="templates"] { display: none !important; }
.admin-side .side-nav a {
white-space: nowrap !important;
font-family: var(--font-display) !important;
font-size: clamp(26px, 7.4vw, 40px) !important; font-weight: 600 !important;
letter-spacing: -0.04em; line-height: 1.1;
color: #fff !important; background: none !important;
padding: 4px 0 !important; border-radius: 0 !important;
justify-content: flex-start !important; gap: 0 !important;
}
.admin-side .side-nav a.on, .admin-side .side-nav a:hover { color: var(--accent) !important; background: none !important; }
/* At that size an icon is a speck; the word is the target. */
.admin-side .side-nav .ico, .admin-side .side-tag,
.admin-side .rail-btn, .admin-side .side-brand { display: none !important; }
.admin-side .side-group-toggle {
font-family: var(--font-display) !important;
font-size: clamp(30px, 8.6vw, 44px) !important; font-weight: 600 !important;
letter-spacing: -0.04em; color: rgba(255,255,255,0.5) !important;
padding: 4px 0 !important; background: none !important;
}
.admin-side .side-adminbox { background: none !important; border: none !important; padding: 0 !important; }
.admin-side .side-subnav a { font-size: clamp(22px, 6vw, 30px) !important; color: rgba(255,255,255,0.72) !important; }
.admin-side .side-foot, .admin-side #side-user {
margin-top: auto; padding-top: 18px; width: 100%;
border-top: 1px solid rgba(255,255,255,0.14); color: rgba(255,255,255,0.7) !important;
}
.admin-side .side-foot a, .admin-side #side-user a { color: rgba(255,255,255,0.7) !important; }
.mob-navx {
position: absolute; top: calc(16px + env(safe-area-inset-top)); right: 18px;
width: 34px; height: 34px; border: none; border-radius: 50%;
background: rgba(255,255,255,0.1); color: #fff; cursor: pointer;
display: flex; align-items: center; justify-content: center; z-index: 5;
}
.mob-navx:active { background: rgba(255,255,255,0.2); }
.mob-navx svg { width: 17px; height: 17px; }
/* Full-bleed leaves nothing to click beside it — the avatar closes it. */
.nav-scrim { display: none !important; }
body.nav-open .mob-av {
opacity: 1; pointer-events: auto; z-index: 70;
background: rgba(255,255,255,0.14); box-shadow: none;
}
/* The bar the avatar sits on. Opaque, because a translucent strip over a
dark card and a light one cannot both read. */
.mob-topbar {
position: fixed; top: 0; left: 0; right: 0; z-index: 59;
height: calc(58px + env(safe-area-inset-top));
padding-top: env(safe-area-inset-top);
background: var(--cream, #F3F0EA);
box-shadow: 0 1px 0 rgba(21,20,15,0.07);
}
html[data-theme="dark"] .mob-topbar { background: #111110; box-shadow: 0 1px 0 rgba(255,255,255,0.08); }
body.nav-open .mob-topbar { background: transparent; box-shadow: none; }
.mob-av {
position: fixed; top: calc(10px + env(safe-area-inset-top)); left: 14px;
width: 38px; height: 38px; border-radius: 50%; border: none; padding: 0;
z-index: 60; cursor: pointer; overflow: hidden;
background: var(--accent, #FF3B1F); color: #fff;
font-family: var(--font-body); font-size: 13px; font-weight: 700;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 4px 14px rgba(20,18,12,0.2);
}
.mob-av img { width: 100%; height: 100%; object-fit: cover; }
body.nav-open .mob-av { opacity: 0; pointer-events: none; }
/* ---- 3. HEADERS BELONG TO THE VIEWPORT ------------------------------
Titles were sized for a 1400px column; at 390px they wrapped to three
lines or clipped. They scale with the screen, and the header runs the
full width rather than sitting in a desktop gutter. */
.admin-main, .mp-main, .writer-main, main {
padding-left: max(16px, env(safe-area-inset-left)) !important;
padding-right: max(16px, env(safe-area-inset-right)) !important;
}
/* Clear of the avatar. */
.admin-main { padding-top: calc(70px + env(safe-area-inset-top)) !important; }
.admin-head {
width: 100%; flex-wrap: wrap; gap: 10px;
align-items: flex-start; margin-bottom: 16px;
}
.mp-title { font-size: 17px !important; letter-spacing: -0.01em; }
.sg-h1, .sc-h1 {
font-size: clamp(28px, 9vw, 44px) !important;
line-height: 1.04; letter-spacing: -0.03em;
text-wrap: balance;
}
.admin-head .a-btn, .admin-head .pbtn { flex: none; }
.pillbar-row, .toolbar, .rep-bar {
flex-wrap: wrap !important; width: 100%; box-sizing: border-box;
}
/* SUB-NAVIGATION IS THE SAME CONTROL AS A FILTER. Placements collapses its
pill row into one dark pill that names the current choice and opens a
sheet; a tab strip asks the same kind of question, so it gets the same
answer instead of a second pattern that only settings uses. */
.tabs { display: none !important; }
/* THE TITLE STARTS AT THE EDGE, as it does on every other screen. Settings
was the one page whose heading sat inside the content gutter, so it read
as a different kind of page. */
.admin-main .admin-head,
.admin-main > .admin-title,
.admin-main .tabs {
box-sizing: border-box !important;
width: calc(100% + var(--mob-gutter, 16px) * 2) !important;
max-width: none !important;
margin-left: calc(var(--mob-gutter, 16px) * -1) !important;
margin-right: calc(var(--mob-gutter, 16px) * -1) !important;
padding-left: var(--mob-gutter, 16px) !important;
padding-right: var(--mob-gutter, 16px) !important;
}
/* The header already carries the gutter — its own padding was a second
one, and the title inside it paid for both. */
/* ---- PROFILE & SETTINGS: ONE LAYOUT, SIX PANES ------------------------
Every pane was inheriting a desktop layout and then arguing with it
separately, so the first card began at a different height on each one,
some rows were tables and some were cards, and the action buttons
landed wherever the desktop had put them. These rules describe the
screen once. */
.admin-main .tabs { margin-bottom: 0 !important; }
.admin-main > .mob-tabs-btn,
.admin-main > .mob-filter-btn { margin-bottom: 30px !important; }
/* Every pane starts at the same place. */
.admin-main .pane { padding: 0 !important; margin: 0 !important; }
.admin-main .pane > *:first-child { margin-top: 0 !important; }
.admin-main .pane > .card:first-child,
.admin-main .pane > .row:first-child { margin-top: 0 !important; }
/* A pane's action row is a full-width button under the heading, not a
thing floated to the right of a heading that is no longer there. */
.admin-main .pane > .row:first-child {
display: block !important; margin-bottom: 16px !important;
}
.admin-main .pane > .row:first-child .a-btn {
display: block !important; width: 100% !important; box-sizing: border-box;
text-align: center !important; min-height: 46px !important;
}
/* ---- Team, in the shape Roles & permissions already has ------------- */
#pane-team .t-table.t-stack tbody tr {
background: var(--warm-white);
border-radius: 18px !important;
padding: 18px !important;
margin-bottom: 12px !important;
box-shadow: 0 1px 0 rgba(21,20,15,0.06);
}
html[data-theme="dark"] #pane-team .t-table.t-stack tbody tr {
background: rgba(252,251,248,0.05); box-shadow: none;
}
/* The person is the card's heading: face, name, address. */
#pane-team .t-table.t-stack tbody td:first-child {
padding: 0 0 14px !important;
margin-bottom: 4px !important;
border-bottom: 1px solid var(--taupe-xlight) !important;
}
#pane-team .u-cell { display: flex !important; align-items: center !important; gap: 12px !important; }
#pane-team .u-cell > div { min-width: 0; }
#pane-team .u-av, #pane-team .u-cell img {
width: 40px !important; height: 40px !important; border-radius: 50% !important; flex: none;
}
#pane-team .u-name {
font-family: var(--font-display) !important; font-size: 18px !important;
font-weight: 600 !important; line-height: 1.2 !important;
}
#pane-team .u-email, #pane-team .u-email-inp {
font-size: 13px !important; color: var(--stone) !important; margin-top: 3px;
}
/* Every other cell is a labelled line: name left, value right. */
#pane-team .t-table.t-stack tbody td {
padding: 12px 0 !important;
border-bottom: 1px solid var(--taupe-xlight) !important;
}
#pane-team .t-table.t-stack tbody td:last-child { border-bottom: none !important; }
html[data-theme="dark"] #pane-team .t-table.t-stack tbody td,
html[data-theme="dark"] #pane-team .t-table.t-stack tbody td:first-child {
border-bottom-color: rgba(252,251,248,0.1) !important;
}
#pane-team .t-table.t-stack tbody td::before {
font-size: 10px !important; letter-spacing: 0.1em !important;
color: var(--stone) !important;
}
/* A value that can be changed looks like the field it is. */
#pane-team .u-pos, #pane-team .pos-td button,
#pane-team .t-table.t-stack tbody td button:not(.a-btn) {
min-height: 40px !important; padding: 0 12px !important;
border-radius: 10px !important;
border: 1px solid var(--taupe-light) !important;
background: var(--cream) !important;
font-family: var(--font-body) !important; font-size: 14px !important;
color: var(--dark) !important;
}
html[data-theme="dark"] #pane-team .t-table.t-stack tbody td button:not(.a-btn) {
background: rgba(252,251,248,0.08) !important;
border-color: rgba(252,251,248,0.16) !important; color: #FCFBF8 !important;
}
/* ---- Roles & permissions ----------------------------------------------
A PERMISSIONS MATRIX IS A GRID, and a grid does not fit a phone. The
desktop shows areas down one axis and access levels across the other;
here the bar wrapped into three lines, the role description ran as a
four-word column beside it, and the segmented controls squeezed to
nothing. So the matrix becomes what it is on every other mobile
screen: a card per group, a row per area, and the access level as its
value on the right. */
.rlbar {
display: flex !important; flex-direction: column !important;
align-items: stretch !important; gap: 10px !important;
margin-bottom: 18px !important;
}
.rlmode { display: flex !important; width: 100%; }
.rlmode-b { flex: 1 !important; min-height: 42px !important; }
.rlpick {
width: 100% !important; box-sizing: border-box !important;
display: flex !important; align-items: center !important;
justify-content: space-between !important; min-height: 48px !important;
padding: 0 14px !important; border-radius: 12px !important;
background: var(--cream) !important;
border: 1px solid var(--taupe-light) !important;
position: relative;
}
/* The kicker leaves the button and becomes its heading. */
.rlpick .rlpick-k {
position: absolute !important; top: -20px !important; left: 0 !important;
font-family: var(--font-body) !important; font-size: 10px !important;
font-weight: 700 !important; letter-spacing: 0.1em !important;
text-transform: uppercase !important; color: var(--taupe) !important;
}
.rlpick { margin-top: 22px !important; }
.rlpick .rlpick-v {
flex: 1; min-width: 0; text-align: left !important;
font-family: var(--font-body) !important; font-size: 15px !important;
font-weight: 600 !important; color: var(--dark) !important;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* One chevron, drawn like the selects beside it. */
.rlpick .rlpick-cv {
flex: none; width: 15px; height: 15px; margin-left: 10px;
background: no-repeat center / 15px 15px;
background-image: url("data:image/svg+xml;utf8,");
}
html[data-theme="dark"] .rlpick {
background: rgba(252,251,248,0.08) !important;
border-color: rgba(252,251,248,0.16) !important;
}
html[data-theme="dark"] .rlpick .rlpick-v { color: #FCFBF8 !important; }
html[data-theme="dark"] .rlpick .rlpick-cv {
background-image: url("data:image/svg+xml;utf8,");
}
/* The role's description is prose, not a column. */
.rlbar-meta {
order: 3; max-width: none !important; width: 100% !important;
text-align: left !important; line-height: 1.55 !important;
font-size: 12.5px !important;
}
.permcard {
display: block !important; width: 100% !important;
box-sizing: border-box !important; margin-bottom: 12px !important;
padding: 16px 18px !important; border-radius: 18px !important;
}
.permcards, .permgrid {
display: block !important; grid-template-columns: none !important;
}
.permrow {
display: flex !important; align-items: center !important;
justify-content: space-between !important; gap: 12px !important;
padding: 11px 0 !important; flex-wrap: nowrap !important;
}
.permrow-l {
flex: 1 1 auto; min-width: 0;
font-size: 14px !important; line-height: 1.35 !important;
}
.permseg { flex: none !important; }
.permseg-b {
min-height: 34px !important; padding: 0 11px !important;
font-size: 11px !important;
}
/* ---- Integrations and Data --------------------------------------------
Both were rows built for a 1200px table: a name, a description and a
control on one line. On a phone the control goes under the thing it
controls rather than fighting it for width. */
#pane-int .int-row, #pane-int .row,
#pane-data .row {
display: block !important; width: 100% !important;
box-sizing: border-box !important;
}
#pane-int .int-row > * + *,
#pane-data .row > * + * { margin-top: 10px !important; }
#pane-int .a-btn, #pane-data .a-btn {
display: block !important; width: 100% !important;
box-sizing: border-box !important; text-align: center !important;
min-height: 46px !important;
}
/* The capacity bars and their captions read down the card. */
#cap-card .cap-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
#cap-card .cap-plan {
display: block !important;
}
#cap-card .cap-plan > * + * { margin-top: 10px !important; }
#cap-card .cap-orph {
display: block !important;
}
#cap-card .cap-orph > * + * { margin-top: 12px !important; }
/* A NATIVE SELECT IS THE OPERATING SYSTEM'S IDEA OF A CONTROL, and it
looked like it: grey, square, 28px tall, in a screen of dark pills.
Same shape as the field it sits beside, its own chevron, and a real
touch target. */
.pane select,
.admin-main select,
.mf-select {
appearance: none !important; -webkit-appearance: none !important;
box-sizing: border-box !important;
width: 100% !important; min-height: 46px !important;
padding: 0 40px 0 14px !important;
border-radius: 12px !important;
border: 1px solid var(--taupe-light) !important;
background-color: var(--cream) !important;
background-image: url("data:image/svg+xml;utf8,") !important;
background-repeat: no-repeat !important;
background-position: right 13px center !important;
background-size: 15px 15px !important;
font-family: var(--font-body) !important; font-size: 15px !important;
color: var(--dark) !important;
}
html[data-theme="dark"] .pane select,
html[data-theme="dark"] .admin-main select,
html[data-theme="dark"] .mf-select {
background-color: rgba(252,251,248,0.08) !important;
border-color: rgba(252,251,248,0.16) !important;
color: #FCFBF8 !important;
background-image: url("data:image/svg+xml;utf8,") !important;
}
/* A CHECKBOX IS A CIRCLE HERE. The square box is the browser's default and
the only square control on any of these screens. */
.pane input[type="checkbox"] {
appearance: none; -webkit-appearance: none;
width: 22px !important; height: 22px !important; flex: none;
border-radius: 50% !important; box-sizing: border-box;
border: 1.5px solid var(--taupe-light) !important;
background: transparent !important; margin: 0 !important; cursor: pointer;
position: relative;
}
.pane input[type="checkbox"]:checked {
border-color: var(--accent) !important; background: var(--accent) !important;
}
.pane input[type="checkbox"]:checked::after {
content: ""; position: absolute; left: 6px; top: 3.5px;
width: 6px; height: 10px; border: solid var(--on-orange, #fff);
border-width: 0 2px 2px 0; transform: rotate(45deg);
}
/* A SETTING'S NAME IS A SENTENCE, NOT A LABEL. Small caps at 0.1em
tracking is a field label; run it across a whole option row and every
name needs two lines to fit — which is what happened to "Mentions and
messages to me". Options read as text; only the kicker above a group
keeps the caps. */
.pane .ntf-row .ntf-t {
font-family: var(--font-body) !important;
font-size: 14.5px !important; font-weight: 500 !important;
letter-spacing: 0 !important; text-transform: none !important;
color: var(--dark) !important; line-height: 1.4 !important;
}
.pane .ntf-row {
display: flex !important; align-items: center !important; gap: 12px !important;
padding: 11px 0 !important;
}
.pane .ntf-row .ntf-w {
margin-left: auto; flex: none; white-space: nowrap;
font-family: var(--font-body) !important; font-size: 10px !important;
font-weight: 700 !important; letter-spacing: 0.09em !important;
text-transform: uppercase !important; color: var(--taupe) !important;
}
html[data-theme="dark"] .pane .ntf-row .ntf-t { color: #FCFBF8 !important; }
/* The swatches are a preference, not the subject of the card. */
#acc-card .acc-sw { width: 30px !important; height: 30px !important; }
#acc-card .acc-row { gap: 10px !important; }
#acc-card .acc-role .acc-sw { width: 24px !important; height: 24px !important; }
.admin-head { padding-left: 0 !important; padding-right: 0 !important; }
.admin-head > .admin-title, .admin-head div > .admin-title {
box-sizing: border-box !important;
width: calc(100% + var(--mob-gutter, 16px) * 2) !important;
max-width: none !important;
margin-left: calc(var(--mob-gutter, 16px) * -1) !important;
margin-right: calc(var(--mob-gutter, 16px) * -1) !important;
padding-left: var(--mob-gutter, 16px) !important;
padding-right: var(--mob-gutter, 16px) !important;
}
/* A PAGE DESCRIPTION IS DESKTOP FURNITURE. Two lines of explanation above
the controls costs a fifth of a phone screen to say what the title and
the sections already say. */
.admin-main > .admin-sub, .admin-head .admin-sub { display: none !important; }
/* ---- Profile & Settings, condensed -------------------------------------
Nothing removed: the same cards, read down one column, with the tables
that were built for a 1200px window allowed to scroll on their own
instead of squeezing six columns into 390px. */
.admin-main .card, #pane-profile .card, #pane-data .card {
padding: 20px 18px !important; border-radius: 20px !important;
margin-bottom: 14px !important; box-shadow: 0 1px 0 rgba(21,20,15,0.06) !important;
}
html[data-theme="dark"] .admin-main .card { box-shadow: none !important; }
.admin-main .card h3 {
font-family: var(--font-display) !important;
font-size: 19px !important; font-weight: 600 !important;
letter-spacing: -0.01em !important; margin: 0 0 4px !important;
}
/* A field label reads as a label, at the size the rest of the app uses. */
.pane .mf-label, .pane .f-label, .pane label {
font-family: var(--font-body) !important; font-size: 10px !important;
font-weight: 700 !important; letter-spacing: 0.1em !important;
text-transform: uppercase !important; color: var(--taupe) !important;
}
.pane .mf-group, .pane .f-group { margin-bottom: 16px !important; }
.admin-main .card .sub, .admin-sub { font-size: 12.5px !important; line-height: 1.55 !important; }
.pane .f-grid, .pane .f-row, #pane-profile .f-grid {
display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 12px !important;
}
.pane input[type="text"], .pane input[type="email"], .pane input[type="password"],
.pane select, .pane textarea {
width: 100% !important; box-sizing: border-box !important; min-height: 44px;
font-size: 15px !important; /* 16px-ish: anything smaller and iOS zooms the page */
}
/* A TABLE BECOMES A LIST OF CARDS. Six columns cannot be compared on a
390px screen, so the grid stops pretending: each row is a card, each
cell is a label-and-value line, and the heading that used to sit at the
top of a column now sits beside the value it describes — the same shape
every other mobile page uses. */
.pane .t-table.t-stack,
.pane .t-table.t-stack thead,
.pane .t-table.t-stack tbody,
.pane .t-table.t-stack tr,
.pane .t-table.t-stack td { display: block !important; width: auto !important; }
.pane .t-table.t-stack thead { display: none !important; }
.pane .t-table.t-stack { min-width: 0 !important; border-collapse: separate !important; }
.pane .t-table.t-stack tbody tr {
background: var(--warm-white); border-radius: 16px; padding: 14px 16px;
margin-bottom: 10px; box-shadow: 0 1px 0 rgba(21,20,15,0.06);
}
html[data-theme="dark"] .pane .t-table.t-stack tbody tr { background: rgba(252,251,248,0.05); box-shadow: none; }
.pane .t-table.t-stack tbody td {
display: flex !important; align-items: center; justify-content: space-between;
gap: 14px; padding: 7px 0 !important; border: none !important;
min-height: 0 !important; text-align: right;
}
.pane .t-table.t-stack tbody td::before {
content: attr(data-mlabel);
flex: none; text-align: left;
font-family: var(--font-body); font-size: 10px; font-weight: 700;
letter-spacing: 0.1em; text-transform: uppercase; color: var(--taupe);
}
.pane .t-table.t-stack tbody td[data-mlabel=""]::before { display: none; }
/* The first cell names the row, so it reads as a heading rather than as
another value in the list. */
.pane .t-table.t-stack tbody td:first-child {
display: block !important; text-align: left;
padding-bottom: 12px !important; margin-bottom: 4px;
border-bottom: 1px solid var(--taupe-xlight) !important;
}
.pane .t-table.t-stack tbody td:first-child::before { display: none; }
html[data-theme="dark"] .pane .t-table.t-stack tbody td:first-child {
border-bottom-color: rgba(252,251,248,0.12) !important;
}
.pane .t-table.t-stack .u-cell { display: block; }
.pane .t-table.t-stack .u-name {
font-family: var(--font-display); font-size: 17px; font-weight: 600;
color: var(--dark); white-space: normal;
}
html[data-theme="dark"] .pane .t-table.t-stack .u-name { color: #FCFBF8; }
.pane .t-table.t-stack .u-email, .t-table.t-stack .u-email-inp {
display: block !important; width: 100% !important; box-sizing: border-box;
margin-top: 4px; font-size: 13px; color: var(--stone);
white-space: normal; word-break: break-all; text-align: left;
}
/* A control in a cell fills the space the value would have taken. */
.pane .t-table.t-stack tbody td select,
.pane .t-table.t-stack tbody td input:not([type="checkbox"]):not([type="radio"]) {
flex: 1 1 auto; min-width: 0; max-width: 62%; text-align: right;
}
/* The dock covers the last card otherwise. */
body.app-mode .admin-main { padding-bottom: calc(104px + env(safe-area-inset-bottom)) !important; }
.toolbar { min-width: 0; }
.admin-main, .writer-main, main {
max-width: 100vw !important; overflow-x: hidden !important;
box-sizing: border-box !important;
}
.admin-main > *, .mp-main > * { min-width: 0 !important; max-width: 100% !important; }
.admin-main * { min-width: 0 !important; }
.top-row, .cols, #stats { width: 100% !important; max-width: 100% !important; }
.top-row, .cols {
display: flex !important; flex-direction: column !important;
gap: 0 !important;
}
/* The calendar column leads on desktop; it leads here too. */
.top-row > .chat-panel { order: -1 !important; }
/* …but once the phone gathers every card into one column (#stats), the
order is the person's — set by dragging, see dashboard-reorder.js. The
desktop rule ".top-row .chat-panel { order: -1 }" also matched it in
there and yanked the calendar back to the top after every drop, which
is why it "never stuck". */
#stats > .chat-panel { order: 0 !important; }
/* Every card keeps air beneath it, wherever it sits in the tree. */
.chat-panel, .panel, #dash-links, #dash-clocks, #dash-week, #dash-msgs,
#dash-stack-top, #stats, #dash-stack, .top-row {
margin-bottom: 10px !important;
}
/* A wrapper whose last card already carries the margin must not add a
second one. */
#stats, #dash-stack, .top-row { margin-bottom: 0 !important; }
.cols > *:not(:last-child) { margin-bottom: 10px !important; }
#stats > *:last-child, #dash-stack > *:last-child { margin-bottom: 0 !important; }
.cols > *:last-child { margin-bottom: 0 !important; }
#stats, .stat-row, .dash-grid, .pgrid, .dt-grid {
display: flex !important; flex-direction: column !important;
gap: 0 !important; width: 100% !important;
}
/* Inline placement loses to this; nothing stays pinned to a track that no
longer exists. */
#stats > *, .stat-row > *, .dash-grid > *, #dash-stack > * {
grid-area: auto !important; grid-column: auto !important; grid-row: auto !important;
width: 100% !important; max-width: none !important; min-width: 0 !important;
margin-left: 0 !important; margin-right: 0 !important;
}
#dash-stack {
display: flex !important; flex-direction: column !important;
gap: 0 !important; width: 100% !important; height: auto !important;
}
/* Heights tuned to sit beside a tall chart are wrong once stacked. */
#dash-clocks, #dash-week, #dash-msgs, .dt-loadw, .dt-week {
height: auto !important; min-height: 0 !important; max-height: none !important;
}
#dash-links {
height: auto !important; max-height: none !important;
min-height: 62px !important;
display: flex !important; align-items: center !important;
}
#dash-links .ql-list { align-items: center !important; }
/* The faces row scrolls sideways rather than dictating the card's width. */
.dm-faces { flex-wrap: nowrap !important; overflow-x: auto !important; }
/* A two-column band of number cards is four unreadable slivers at 375px. */
.rw-grid { grid-template-columns: minmax(0, 1fr) !important; }
.rw-hero, .rw-paper, .rw-card.span2, .rw-card.wide { grid-column: auto !important; grid-row: auto !important; }
/* Tables get their own scroller instead of stretching the page sideways. */
/* ---- the task list, as a list ---------------------------------------
A spreadsheet does not survive the trip to a phone. Nine columns became
four, and four still read as a table with a header you have to decode
before the first row means anything — plus a rank number, a status dot
and a flag competing with the one thing you came for.
So it stops being a table. Each task is a row in the sense the Notes
app means it: the name in full, on its own line, at reading size; one
quiet line underneath for when it is due and how long it takes; a hair
rule between. No header, no rank, no dots. Everything dropped is one
tap away in the record. */
.tday-head { display: none !important; }
.tday-over, .tday-plan, .tday-focus { padding: 0 !important; margin: 0 !important; }
.tday-over .trow, .tday-plan .trow, .tday-focus .trow, .trow {
padding-left: 16px !important; padding-right: 16px !important;
}
.tday-cut { padding-left: 16px !important; padding-right: 16px !important; }
.tday-cut { padding: 14px 16px 6px !important; margin: 0 !important; }
.trow {
display: grid !important;
grid-template-columns: auto 1fr !important;
grid-template-areas: "st title" !important;
align-items: center !important; gap: 0 !important;
padding: 13px 2px !important;
border-bottom: 1px solid var(--taupe-xlight, #EDE9E1) !important;
}
html[data-theme="dark"] .trow { border-bottom-color: rgba(252,251,248,0.1) !important; }
.trow:last-child { border-bottom: none !important; }
.trow-num, .trow-why, .trow-start, .trow-swap,
.trow-prio, .rowedit-dot, .trow-dur, .trow-meta { display: none !important; }
/* The status ring leads the row, centred on the name. */
.trow-status {
grid-area: st !important; display: flex !important;
align-items: center !important; justify-self: start !important;
margin-right: 10px !important;
}
.trow-status svg { width: 16px !important; height: 16px !important; }
.trow-title, .trow-title * {
grid-area: title !important; min-width: 0 !important; align-self: center !important;
white-space: normal !important; overflow: visible !important;
text-overflow: clip !important; text-align: left !important;
font-size: 16px !important; font-weight: 500 !important; line-height: 1.3 !important;
}
.trow-title * { display: inline !important; }
html[data-theme="dark"] .trow-title, html[data-theme="dark"] .trow-title * { color: #FCFBF8 !important; }
/* No hover wash: there is no hover on a phone, only a stuck grey row. */
.trow:hover, .trow.hover, .trow.waiting, .trow.sel, .trow.on, .trow:active {
background: transparent !important;
}
/* The view toggle was sized for a desktop header and ran into the title. */
.panel .panel-scroll, #tasks-scroll { padding-left: 0 !important; padding-right: 0 !important; }
.panel-riser .view-seg button { font-size: 9px !important; padding: 4px 9px !important; }
.panel-tab {
display: flex !important; flex-wrap: wrap !important; gap: 8px !important;
align-items: center !important; box-sizing: border-box !important;
max-width: 100% !important; overflow: hidden !important;
}
.panel-riser {
height: auto !important; position: static !important;
flex: 0 1 auto !important; min-width: 0 !important;
display: flex !important; justify-content: flex-start !important;
}
.panel-riser .view-seg { position: static !important; transform: none !important; flex: none !important; }
#tasks-heading { flex: 1 1 100% !important; }
/* The warning sat a mile above the first card. */
#dash-today-banner { margin-bottom: 12px !important; }
.table-wrap, #tasks-scroll, .panel .tbl-wrap {
overflow-x: auto !important; -webkit-overflow-scrolling: touch;
}
.table-wrap table { min-width: 560px !important; }
#tasks-scroll { overflow-x: hidden !important; }
}
@media (max-width: 900px) {
/* The avatar IS the menu button — app mode hides the sidebar, not this. */
/* mob-av stays */
body.app-mode .mob-av, .mob-av { display: flex !important; }
/* mob-topbar owns the top-left corner; the page begins under it. */
.mob-topbar {
position: fixed; top: 0; left: 0; z-index: 61;
padding: calc(10px + env(safe-area-inset-top)) 0 0 14px;
pointer-events: none;
}
.mob-topbar .mob-av { pointer-events: auto; }
.mob-av {
width: 38px; height: 38px; border-radius: 50%; border: none; padding: 0;
background: #15140F; color: #FCFBF8; cursor: pointer; overflow: hidden;
align-items: center; justify-content: center;
font-family: var(--font-body); font-size: 13px; font-weight: 700;
box-shadow: 0 4px 14px rgba(20,18,12,0.22);
}
.mob-av img { width: 100%; height: 100%; object-fit: cover; }
.mob-av.is-open { background: #FCFBF8; color: #15140F; }
.admin-main { padding-top: calc(58px + env(safe-area-inset-top)) !important; }
/* The page scrolls; only sideways spill is clipped. */
html { overflow: visible !important; }
body { overflow-y: visible !important; overflow-x: clip !important; }
}
@media (max-width: 900px) {
.table-wrap { overflow: visible !important; }
.table-wrap table,
.table-wrap thead, .table-wrap tbody,
.table-wrap tr, .table-wrap td {
display: block !important;
width: auto !important;
min-width: 0 !important;
max-width: none !important;
}
.table-wrap thead { display: none !important; }
/* A row is a card. */
.table-wrap tr.row-main {
position: relative;
background: var(--warm-white);
border-radius: 14px;
border: none !important;
padding: 14px 16px;
margin-bottom: 8px;
box-shadow: 0 1px 2px rgba(20,18,12,0.05);
}
html[data-theme="dark"] .table-wrap tr.row-main { background: #1C1B17; box-shadow: none; }
.table-wrap tr.row-main:active { background: var(--cream); }
html[data-theme="dark"] .table-wrap tr.row-main:active { background: rgba(252,251,248,0.06); }
/* Cells stack; each carries its own column name. */
.table-wrap td {
border: none !important;
padding: 4px 0 !important;
height: auto !important;
white-space: normal !important;
overflow: visible !important;
text-overflow: clip !important;
display: flex !important;
align-items: baseline;
justify-content: space-between;
gap: 14px;
}
.table-wrap td::before {
content: attr(data-colkey);
flex: none;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--taupe);
order: -1;
}
.table-wrap td:empty { display: none !important; }
/* The name is the card's headline, not a labelled row like the rest. */
.table-wrap td.name-cell,
.table-wrap td[data-colkey="title"],
.table-wrap td[data-colkey="name"],
.table-wrap td[data-colkey="taskName"] {
display: block !important;
font-family: var(--font-display);
font-size: 18px;
font-weight: 600;
letter-spacing: -0.02em;
line-height: 1.25;
padding: 0 0 8px !important;
}
.table-wrap td.name-cell::before,
.table-wrap td[data-colkey="title"]::before,
.table-wrap td[data-colkey="name"]::before,
.table-wrap td[data-colkey="taskName"]::before { content: none; }
.table-wrap td[data-colkey="assignee"] .tk-asg {
font-size: 0 !important; gap: 0 !important;
}
.table-wrap td[data-colkey="assignee"] .tk-av {
width: 30px !important; height: 30px !important;
font-size: 11px !important; line-height: 30px !important;
}
/* Its label still says whose it is. */
.table-wrap td[data-colkey="assignee"] .tk-none { font-size: 12.5px !important; }
/* The same on the dashboard's wide rows, which also show a face and a name. */
.trow .tk-asg, .trow-who { font-size: 0 !important; }
.trow .tk-av, .trow-av { width: 28px !important; height: 28px !important; font-size: 11px !important; }
/* Selection and the add-column control are desktop affordances. */
.table-wrap td.cb-col, .table-wrap th.cb-col,
.table-wrap td.col-add-td, .table-wrap th.col-add-th,
.table-wrap .col-resize, .table-wrap .col-remove { display: none !important; }
/* The waveform keeps its shape; only its label goes. */
.table-wrap td.cpl-wave-td { display: block !important; padding: 6px 0 !important; }
.table-wrap td.cpl-wave-td::before { content: none; }
.table-wrap .cpl-wave { width: 100% !important; }
}
@media (max-width: 900px) {
.admin-head {
display: block !important;
margin-bottom: 10px !important;
}
.admin-title {
display: block;
width: 100vw;
margin: 0 -16px !important;
padding: 0 16px;
font-size: 40px; /* replaced by the fitter on load */
line-height: 1;
letter-spacing: -0.04em;
white-space: nowrap;
overflow: hidden;
}
.admin-head .head-actions,
.admin-head > div:not(:first-child) { width: 100%; }
#toolbar { margin: 14px 0 12px !important; }
/* Full-bleed, scrolling, with the gutter restored inside so the first
pill still lines up with the title. */
.pillbar-row {
display: block !important;
width: auto !important;
max-width: 100% !important;
margin: 0 0 14px !important;
overflow: visible !important;
}
/* Four or more filters: the bar is replaced by the choice it represents. */
.pillbar-row .brand-bar,
.pillbar-row .pillbar,
.pillbar-row .seg { display: none !important; }
.pillbar-row {
display: flex !important;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.pillbar-row.mob-filter .pillbar-actions,
.pillbar-row.mob-filter .pill-actions {
display: flex !important;
gap: 8px !important;
padding: 0 !important;
margin-left: auto;
}
/* DESKTOP-ONLY ACTIONS.
Creating lives in the dock's + — two ways to make a record is one too
many. A CSV export has nowhere to go on a phone, and "rename all from
deal terms" is a bulk admin job nobody does standing up. What is left
is what you actually reach for on a phone: hide completed, and filter. */
#new-btn, #export-btn, #shared-export-btn, #retitle-btn,
#new-person-btn, #new-entry-btn, #playlist-new-btn, #resp-csv,
.pillbar-actions [title*="Export" i],
.pillbar-actions [title^="New" i],
.pillbar-actions [title*="Rename all" i] { display: none !important; }
.mob-filter-btn {
display: inline-flex; align-items: center; gap: 9px;
background: #15140F; color: #FCFBF8; border: none;
padding: 11px 16px; border-radius: 100px; cursor: pointer;
font-family: var(--font-body); font-size: 14px; font-weight: 600;
}
.mob-filter-btn .mfb-n {
font-size: 10.5px; font-weight: 700; color: rgba(252,251,248,0.5);
}
.mob-filter-btn svg { width: 14px; height: 14px; }
.mob-fsheet-ov {
position: fixed; inset: 0; z-index: 9200; background: rgba(12,11,8,0.5);
backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
opacity: 0; transition: opacity 0.2s;
}
.mob-fsheet-ov.open { opacity: 1; }
.mob-fsheet {
position: absolute; left: 0; right: 0; bottom: 0;
background: var(--warm-white); border-radius: 22px 22px 0 0;
padding: 8px 0 calc(16px + env(safe-area-inset-bottom));
max-height: 72vh; overflow-y: auto;
transform: translateY(100%); transition: transform 0.26s cubic-bezier(.4,0,.2,1);
}
.mob-fsheet-ov.open .mob-fsheet { transform: none; }
html[data-theme="dark"] .mob-fsheet { background: #1C1B17; }
.mob-fgrab {
width: 38px; height: 4px; border-radius: 100px;
background: var(--taupe-light); margin: 6px auto 10px;
}
.mob-fcap {
font-size: 10px; font-weight: 700; letter-spacing: 0.14em;
text-transform: uppercase; color: var(--taupe);
padding: 18px 22px 8px;
}
/* A rule where one question ends and the next begins. */
.mob-fcap + .mob-fopt { border-top: 1px solid var(--taupe-xlight); }
.mob-fsheet > .mob-fcap:first-of-type { padding-top: 6px; }
.mob-fsheet > .mob-fcap:first-of-type + .mob-fopt { border-top: none; }
html[data-theme="dark"] .mob-fcap + .mob-fopt { border-top-color: rgba(252,251,248,0.1); }
.mob-fopt {
display: flex; align-items: center; justify-content: space-between;
width: 100%; min-height: 50px; padding: 0 22px; border: none; background: none;
font-size: 16px;
font-family: var(--font-body); font-size: 16px; color: var(--dark);
cursor: pointer; text-align: left;
}
.mob-fopt.on { font-weight: 700; color: var(--accent); }
.mob-fopt:not(.on) { color: var(--dark); font-weight: 500; }
.mob-fopt:active { background: var(--cream); }
html[data-theme="dark"] .mob-fopt { color: #FCFBF8; }
html[data-theme="dark"] .mob-fopt.on { color: var(--accent); }
.mob-fopt .tick { color: var(--accent); font-size: 16px; }
.pillbar-row > div:first-child::-webkit-scrollbar,
.pillbar-row .pillbar::-webkit-scrollbar { height: 0; }
.pillbar-row button { flex: none !important; }
/* The actions share the filter's line; a rule that used to give them
their own row below it is what pushed them 6px off its centre. */
.pillbar-row .pill-actions,
.pillbar-row > div:last-child:not(:first-child) {
display: flex !important;
gap: 8px !important;
padding: 0 !important;
overflow-x: auto !important;
scrollbar-width: none;
}
}
@media (max-width: 900px) {
.filterpanel {
position: fixed !important;
transform: none !important;
left: 0 !important; right: 0 !important;
bottom: 0 !important; top: auto !important;
width: 100% !important; max-width: none !important;
z-index: 9300 !important;
border-radius: 22px 22px 0 0 !important;
max-height: 74vh; overflow-y: auto;
padding-bottom: calc(24px + env(safe-area-inset-bottom)) !important;
box-shadow: 0 -12px 40px rgba(0,0,0,0.4) !important;
}
/* The dock would sit on top of it otherwise. */
body:has(.filterpanel:not([hidden])) .app-dock { display: none !important; }
}
@media (max-width: 900px) {
/* The shared page header: avatar, title, search, filters, actions. */
.admin-head { margin: 0 0 4px !important; }
#toolbar { margin: 10px 0 12px !important; }
.pillbar-row { margin: 0 0 14px !important; min-height: 44px; }
.pillbar-row.mob-filter { align-items: center !important; }
/* Actions are the same size and order wherever they appear. */
.pillbar-actions .pbtn, .pill-actions .pbtn {
width: 40px !important; height: 40px !important; flex: none !important;
}
}
@media (max-width: 900px) {
/* The calendar's own header, in the shared shape. */
.shc-top {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
gap: 12px !important;
padding: 0 0 12px !important;
}
.shc-titlewrap { justify-content: flex-start !important; gap: 4px !important; }
.shc-title { font-size: 22px !important; letter-spacing: -0.02em; }
.shc-tools {
display: flex !important;
align-items: center !important;
gap: 10px !important;
flex-wrap: nowrap !important;
}
.shc-tools .shc-seg {
display: contents !important; /* keep Today reachable */
}
.shc-tools .shc-seg > button { display: none !important; }
.shc-tools .shc-seg > button:last-child {
display: inline-flex !important;
align-items: center; justify-content: center;
height: 40px; padding: 0 14px; border-radius: 100px;
font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
}
.shc-tools .pbtn {
width: 40px !important; height: 40px !important; flex: none !important;
}
.shc-tools .pbtn:last-child, /* New event — the dock owns creating */
.shc-tools [title="New event"],
#shc-wknd { display: none !important; }
/* Today stays: it is navigation, not creation. */
.shc-tools [title*="Today" i], .shc-tools .shc-today { display: inline-flex !important; }
.shc-tools .mob-filter-btn { margin-right: auto; }
.shc-key { font-size: 11px; }
}
@media (max-width: 900px) {
/* The day you picked, read properly. */
.shc-day {
margin-top: 18px;
padding-top: 16px;
border-top: 1px solid var(--taupe-xlight);
}
.shc-day-h {
font-family: var(--font-display);
font-size: 22px; font-weight: 700; letter-spacing: -0.02em;
margin-bottom: 12px;
}
.shc-day-e {
display: flex; gap: 12px; align-items: flex-start;
background: var(--warm-white); border-radius: 12px;
padding: 12px 14px; margin-bottom: 6px;
}
html[data-theme="dark"] .shc-day-e { background: #1C1B17; }
.shc-day-t {
flex: none; width: 58px;
font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums;
}
/* No time is not worth a column; the name starts where the eye is. */
.shc-day-e.notime .shc-day-t { display: none; }
.shc-day-t em { display: block; font-style: normal; font-size: 11.5px; font-weight: 400; color: var(--stone); }
.shc-day-bar { flex: none; width: 3px; border-radius: 3px; align-self: stretch; background: var(--accent); }
.shc-day-b { flex: 1; min-width: 0; }
.shc-day-n { display: block; font-size: 15px; font-weight: 600; line-height: 1.3; }
.shc-day-m { display: block; font-size: 12.5px; color: var(--stone); margin-top: 2px; }
.shc-day-empty { font-size: 13.5px; color: var(--stone); padding: 4px 0 8px; }
}
@media (max-width: 900px) {
.shc-week {
display: grid !important;
grid-auto-flow: column !important;
grid-auto-columns: 148px !important;
grid-template-columns: none !important;
overflow-x: auto !important;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
scrollbar-width: none;
/* Break the gutter so the first day starts at the page edge. */
width: 100vw !important;
margin: 0 -16px !important;
padding: 0 16px !important;
}
.shc-week::-webkit-scrollbar { height: 0; }
.shc-week > * {
scroll-snap-align: start;
min-width: 0;
}
/* Titles get the room the wider column bought them; nothing else
changes size. */
.shc-week .shc-line, .shc-week .shc-ev {
white-space: normal !important;
overflow: visible !important;
text-overflow: clip !important;
}
}
@media (max-width: 900px) {
.shc-week {
display: grid !important;
grid-auto-flow: column !important;
grid-auto-columns: 150px !important;
grid-template-columns: none !important;
overflow-x: auto !important;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x proximity;
scrollbar-width: none;
}
.shc-week::-webkit-scrollbar { height: 0; }
.shc-week > * { scroll-snap-align: start; min-width: 0; }
}
@media (max-width: 900px) {
.shc-rangepop {
position: fixed !important;
left: 0 !important; right: 0 !important;
bottom: 0 !important; top: auto !important;
width: 100% !important; max-width: none !important;
border-radius: 22px 22px 0 0 !important;
padding-bottom: calc(20px + env(safe-area-inset-bottom)) !important;
z-index: 9300 !important;
box-shadow: 0 -12px 40px rgba(0,0,0,0.38) !important;
}
.shc-rpchip { min-height: 46px; }
.shc-rpapply, .shc-rpclear { min-height: 44px; }
/* The title is the control, so it should look like one. */
.shc-title-btn { display: inline-flex !important; align-items: center; gap: 6px; }
.shc-titlecv { width: 16px; height: 16px; flex: none; }
}
/* ===========================================================================
CATALOG
=========================================================================== */
@media (max-width: 900px) {
/* The band stacks: the title owns its line, the player owns the next. */
.cpl-band-in {
flex-direction: column !important;
align-items: stretch !important;
gap: 14px !important;
padding: 18px 14px 14px !important;
}
.cpl-band-l, .cpl-band-r { width: 100% !important; flex: none !important; }
/* The title is the page's name — it runs to the edges of the card. */
.cpl-band .admin-title {
width: 100% !important; max-width: 100% !important;
padding: 0 !important; margin: 0 0 2px !important;
line-height: 0.92 !important; letter-spacing: -0.045em !important;
}
/* ---- the player, as a piece of artwork ---------------------------
A sleeve beside a column of text is a desktop object. Here the
artwork IS the card: the name sits on it, the transport sits on it,
and the scrub runs along the bottom — so a 390px screen spends its
width on the picture instead of on a layout. */
.cpl-band .cpl-hero {
position: relative !important;
width: 100% !important; max-width: none !important;
aspect-ratio: 16 / 10;
border-radius: 22px !important;
overflow: hidden !important;
background: #15140F !important;
}
/* The cover, blown up behind everything. */
.cpl-band .cpl-hero .ma-hero-bg {
display: block !important;
position: absolute !important; inset: 0 !important;
background-size: cover !important; background-position: center !important;
filter: none !important; opacity: 1 !important;
-webkit-mask-image: none !important; mask-image: none !important;
}
/* Ink from the bottom so the name stays readable on any photograph. */
.cpl-band .cpl-hero::after {
content: ""; position: absolute; inset: 0; pointer-events: none;
background: linear-gradient(to top, rgba(8,8,7,0.82) 0%, rgba(8,8,7,0.34) 42%, rgba(8,8,7,0.06) 70%);
}
/* And a matching fade from the top, so the version label and the controls
up there have the same ground as the name down here. */
.cpl-band .cpl-hero::before {
content: ""; position: absolute; left: 0; right: 0; top: 0; height: 46%;
pointer-events: none; z-index: 1;
background: linear-gradient(180deg, rgba(8,8,7,0.52) 0%, rgba(8,8,7,0.26) 48%, rgba(8,8,7,0) 100%);
}
.cpl-band .cpl-hero .ma-hero-glass {
position: absolute !important; inset: 0 !important; z-index: 2;
display: flex !important; flex-direction: column !important;
justify-content: flex-end !important;
background: none !important; backdrop-filter: none !important;
-webkit-backdrop-filter: none !important; box-shadow: none !important;
padding: 14px 16px 12px !important; gap: 10px !important;
}
.cpl-band .cpl-hero .ma-hero-glass::before { display: none !important; }
/* The sleeve is the background now, so the thumbnail is redundant. */
.cpl-band .cpl-hero .ma-hero-art { display: none !important; }
.cpl-band .cpl-hero .ma-hero-row {
align-items: flex-end !important; gap: 12px !important; flex-wrap: nowrap !important;
justify-content: space-between !important;
}
.cpl-band .cpl-hero .ma-hero-info {
/* flex:1 with auto right margin pins it to the left edge whatever the
row's own justification is — the name belongs at the same margin as
everything else on the card. */
flex: 1 1 auto !important; min-width: 0 !important; margin-right: auto !important;
text-align: left !important; align-items: flex-start !important;
display: flex !important; flex-direction: column !important;
}
.cpl-band .cpl-hero .ma-hero-info { flex: 1 !important; min-width: 0 !important; max-width: none !important; }
.cpl-band .cpl-hero .ma-hero-title {
font-family: var(--font-display) !important;
font-size: 21px !important; font-weight: 700 !important;
letter-spacing: -0.02em !important; color: #fff !important;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cpl-band .cpl-hero .cpl-kick {
display: block !important;
font-size: 8px !important; font-weight: 700 !important;
letter-spacing: 0.15em !important; text-transform: uppercase !important;
color: var(--accent-on-ink, var(--accent-fill)) !important;
margin: 0 0 1px !important; line-height: 1 !important;
}
.cpl-band .cpl-hero .ma-hero-sub {
font-size: 13px !important; color: rgba(255,255,255,0.72) !important;
}
/* Play is the one control worth a thumb; the rest sit quietly beside it. */
.cpl-band .cpl-hero .ma-hero-controls { flex: none !important; gap: 6px !important; }
.cpl-band .cpl-hero .ma-hero-btn {
width: 34px !important; height: 34px !important;
background: rgba(255,255,255,0.16) !important; color: #fff !important;
backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.cpl-band .cpl-hero .ma-hero-play {
width: 52px !important; height: 52px !important; border-radius: 16px !important;
background: rgba(255,255,255,0.92) !important; color: #15140F !important;
}
.cpl-band .cpl-hero .ma-hero-progress-row {
margin: 0 !important; gap: 10px !important;
}
.cpl-band .cpl-hero .ma-hero-time { color: rgba(255,255,255,0.75) !important; font-size: 11px !important; }
.cpl-band .cpl-hero .ma-hero-track { background: rgba(255,255,255,0.28) !important; height: 4px !important; }
.cpl-band .cpl-hero .ma-hero-fill { background: #fff !important; }
/* The band's own blur was for a two-column layout. */
.cpl-band-bg { display: none !important; }
/* ---- one control row --------------------------------------------
Two rows of navigation for one list — a pill plus a scope bar — was
the page asking the same question twice. The scope joins the pill's
own menu, so there is a single filter and a single line of actions,
all on one centre line. */
#subcat-bar.brand-bar { display: none !important; }
.pillbar-row.mob-filter {
display: flex !important; align-items: center !important;
gap: 8px !important; min-height: 44px;
}
.pillbar-row.mob-filter > * { align-self: center !important; }
.mob-filter-btn { height: 40px !important; }
.pillbar-row .pillbar-actions,
.pillbar-row .pill-actions {
display: flex !important; align-items: center !important;
gap: 8px !important; margin-left: auto !important;
padding: 0 !important; height: auto !important;
}
.pillbar-row .pillbar-actions .pbtn,
.pillbar-row .pill-actions .pbtn {
width: 40px !important; height: 40px !important;
display: flex !important; align-items: center !important; justify-content: center !important;
}
}
@media (max-width: 900px) {
.cfav, .row-main .pill, .row-main .status-pill, td .pill {
position: relative !important;
}
.cfav::after, .row-main .pill::after,
.row-main .status-pill::after, td .pill::after {
content: ""; position: absolute; left: 50%; top: 50%;
transform: translate(-50%, -50%);
width: max(44px, 100%); height: max(44px, 100%); z-index: 0;
}
/* The heart is only visible on hover on a desktop; a phone has none. */
.cfav { opacity: 1 !important; }
}
@media (max-width: 900px) {
/* ---- the app header ----------------------------------------------
One bar: the mark, then search and you. It floats over the page
rather than pushing it down, so a list still starts at the top of
the screen. */
.mob-topbar {
position: fixed; top: 0; left: 0; right: 0; z-index: 70;
display: flex; align-items: center; gap: 10px;
padding: calc(10px + env(safe-area-inset-top)) 14px 10px;
pointer-events: none;
}
.mob-topbar > * { pointer-events: auto; }
.mob-logo { height: 19px; width: auto; object-fit: contain; flex: none; }
.mob-search {
margin-left: auto; width: 38px; height: 38px;
border: none; background: none; color: var(--dark);
display: flex; align-items: center; justify-content: center; cursor: pointer;
padding: 0;
}
.mob-search svg { width: 20px; height: 20px; }
html[data-theme="dark"] .mob-search { color: #FCFBF8; }
.mob-topbar .mob-av { position: static !important; margin: 0 !important; }
/* The band no longer carries a search box; the header has it. */
.cpl-band #toolbar, .cpl-band .toolbar { display: none !important; }
/* A 95px word has a descender, and 0.92 of a line cut the g off. */
.cpl-band .admin-title {
line-height: 1.02 !important;
padding-bottom: 2px !important;
overflow: visible !important;
}
}
@media (max-width: 900px) {
/* ---- the player card ---------------------------------------------- */
/* The name belongs at the edge with everything else, not centred over
a photograph where it fights the subject. */
.cpl-band .cpl-hero .ma-hero-info { text-align: left !important; }
.cpl-band .cpl-hero .ma-hero-title,
.cpl-band .cpl-hero .ma-hero-sub { text-align: left !important; }
/* Two times with nothing between them is a gap, not a scrub — the
track is what tells you where you are in the song. */
.cpl-band .cpl-hero .ma-hero-progress-row {
display: flex !important; align-items: center !important;
gap: 10px !important; width: 100% !important;
}
.cpl-band .cpl-hero .ma-hero-track {
flex: 1 1 auto !important; min-width: 60px !important;
display: block !important; height: 4px !important;
border-radius: 100px !important; background: rgba(255,255,255,0.3) !important;
}
.cpl-band .cpl-hero .ma-hero-fill {
display: block !important; height: 100% !important;
border-radius: 100px !important; background: #fff !important;
}
.cpl-band .cpl-hero .ma-hero-time { flex: none !important; }
}
@media (max-width: 900px) {
/* The menu slides in from the left, the way it reads — the mark is on
that edge, so the panel arrives from under it. */
.admin-side { transition: transform 0.28s cubic-bezier(.32,.72,0,1) !important; }
/* Your own sheet: a face, a name, and the few things that are yours. */
.mob-you-ov {
position: fixed; inset: 0; z-index: 9200;
background: rgba(12,11,8,0.5);
backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
opacity: 0; transition: opacity 0.2s;
}
.mob-you-ov.open { opacity: 1; }
.mob-you {
position: absolute; left: 0; right: 0; bottom: 0;
background: var(--warm-white); border-radius: 22px 22px 0 0;
padding: 8px 0 calc(14px + env(safe-area-inset-bottom));
transform: translateY(100%); transition: transform 0.26s cubic-bezier(.4,0,.2,1);
}
.mob-you-ov.open .mob-you { transform: none; }
html[data-theme="dark"] .mob-you { background: #1C1B17; }
.mob-you-h {
display: flex; align-items: center; gap: 12px;
padding: 10px 22px 16px; border-bottom: 1px solid var(--taupe-xlight);
margin-bottom: 6px;
}
html[data-theme="dark"] .mob-you-h { border-bottom-color: rgba(252,251,248,0.12); }
.mob-you-av {
width: 44px; height: 44px; border-radius: 50%; overflow: hidden; flex: none;
background: var(--accent); color: #fff; font-size: 15px; font-weight: 700;
display: flex; align-items: center; justify-content: center;
}
.mob-you-av img { width: 100%; height: 100%; object-fit: cover; }
.mob-you-n {
display: flex; flex-direction: column; font-size: 16px; font-weight: 700;
color: var(--dark); min-width: 0;
}
html[data-theme="dark"] .mob-you-n { color: #FCFBF8; }
.mob-you-n em {
font-style: normal; font-size: 12px; font-weight: 500; color: var(--stone);
text-transform: capitalize;
}
.mob-you-o {
display: flex; align-items: center; width: 100%; box-sizing: border-box;
min-height: 52px; padding: 0 22px; border: none; background: none;
font-family: var(--font-body); font-size: 15.5px; color: var(--dark);
text-decoration: none; cursor: pointer; text-align: left;
}
html[data-theme="dark"] .mob-you-o { color: #FCFBF8; }
.mob-you-o:active { background: var(--cream); }
html[data-theme="dark"] .mob-you-o:active { background: rgba(252,251,248,0.08); }
/* The face, the name, and the one switch that belongs on this line. */
.mob-you-h { align-items: center; gap: 12px; }
.mob-you-h .mob-you-av { width: 46px; height: 46px; flex: none; order: 0; }
.mob-you-id { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mob-you-n {
font-family: var(--font-display); font-size: 20px; font-weight: 600;
line-height: 1.15; overflow-wrap: anywhere;
}
/* Name → email → title. Email is the second read, quieter than the name;
the title is a small caps label under it, the third. */
.mob-you-mail {
font-style: normal; font-family: var(--font-body); font-size: 13px;
color: var(--stone); margin-top: 2px; line-height: 1.3; overflow-wrap: anywhere;
}
html[data-theme="dark"] .mob-you-mail { color: rgba(252,251,248,0.66); }
.mob-you-role {
font-style: normal; font-family: var(--font-body); font-size: 8.5px; font-weight: 700;
letter-spacing: 0.1em; text-transform: uppercase;
color: var(--accent); margin-top: 3px; line-height: 1.2;
}
html[data-theme="dark"] .mob-you-role { color: var(--accent); }
/* A SWITCH IS NOT A DESTINATION. As a row in the list it sat among places
to go; it goes nowhere. */
.mob-you-ico {
flex: none; width: 38px; height: 38px; display: grid; place-items: center;
border: none; background: none; padding: 0; cursor: pointer;
color: var(--stone); margin-right: -8px;
}
.mob-you-ico svg { width: 20px; height: 20px; }
.mob-you-ico:active { color: var(--accent); }
html[data-theme="dark"] .mob-you-ico { color: rgba(252,251,248,0.7); }
.mob-you-facts {
list-style: none; margin: 0 0 8px; padding: 12px 22px 14px;
border-bottom: 1px solid var(--taupe-xlight);
}
.mob-you-facts li {
font-family: var(--font-body); font-size: 13.5px; line-height: 1.6;
color: var(--stone); overflow-wrap: anywhere;
}
html[data-theme="dark"] .mob-you-facts { border-bottom-color: rgba(252,251,248,0.12); }
html[data-theme="dark"] .mob-you-facts li { color: rgba(252,251,248,0.62); }
/* Sign out is a row like the one above it, with its own glyph — not a
full-width pill, which is the shape of the thing you most want pressed. */
.mob-you-signout {
gap: 12px; padding-bottom: calc(6px + env(safe-area-inset-bottom));
color: var(--stone) !important;
}
.mob-you-signout svg { flex: none; width: 18px; height: 18px; }
html[data-theme="dark"] .mob-you-signout { color: rgba(252,251,248,0.7) !important; }
.mob-you-o { justify-content: flex-start; gap: 12px; }
}
@media (max-width: 900px) {
.admin-side .side-actions {
display: flex !important; align-items: center; gap: 10px;
padding-top: 14px;
}
.admin-side #theme-toggle {
display: flex !important; align-items: center; gap: 9px;
background: rgba(255,255,255,0.1) !important;
color: rgba(255,255,255,0.8) !important;
border: none !important; border-radius: 100px !important;
padding: 10px 16px !important; min-height: 44px;
font-family: var(--font-body); font-size: 13.5px; font-weight: 600;
}
.admin-side #theme-toggle svg { width: 17px; height: 17px; }
.admin-side #theme-toggle .theme-toggle-label { display: inline !important; }
/* The header floats over the page, so the first card needs to clear it. */
.cpl-band { margin-top: calc(56px + env(safe-area-inset-top)) !important; }
}
@media (max-width: 900px) {
/* ---- one clearance under the header ------------------------------
The header floats, so every page has to start below it. Catalog was
given 56px and everything else inherited whatever its own layout
happened to leave — so one page looked airy and the rest looked
jammed. One number, everywhere. */
.admin-main { padding-top: calc(86px + env(safe-area-inset-top)) !important; }
.cpl-band { margin-top: 0 !important; }
/* Nothing to toggle to when only one of the two views fits. */
#doc-viewtog { display: none !important; }
.doc-layout, .form-layout, .pg-layout {
display: block !important;
grid-template-columns: none !important;
}
.doc-grid,
.dv-grid,
.cards,
.form-grid {
display: grid !important;
grid-template-columns: minmax(0, 1fr) !important;
gap: 12px !important;
}
#content .dv-card, #content .doc-card {
width: auto !important; max-width: none !important; min-width: 0 !important;
}
html[data-doc-view="list"] #page-shell > .admin-sub { display: none !important; }
.mob-fn {
margin-left: auto; font-style: normal; font-family: var(--font-body);
font-size: 11px; font-weight: 600; color: rgba(252,251,248,0.45);
}
.mob-fopt.on .mob-fn { color: var(--accent); }
/* ---- Documents ---------------------------------------------------------
A FOLDER RAIL IS A DESKTOP IDEA. Laid sideways it became a strip of
square tiles above the list — a fifth of the screen spent on three
folders, showing a count and an icon and no room for a name. The pill
row above the list is already the app's way of saying "which of these
am I looking at"; folders belong in it, not in furniture of their own. */
#doc-rail, .pg-side { display: none !important; }
/* Inside a document there is no list to head. The list shell is already
hidden by data-view; this covers the moment before that attribute
lands, which is what put a "Documents" title above an open document. */
html[data-doc-view="doc"] body .list-shell,
html[data-doc-view="doc"] .admin-shell.list-shell,
body[data-view="doc"] .admin-shell.list-shell { display: none !important; }
/* THE DOCUMENT TOOLBAR IS SEVEN CONTROLS ON A 390px LINE. Four of them
are one-tap-a-month decisions that already live in the kebab; what a
phone needs at the top of a document is the way back and the name. */
html[data-doc-view="doc"] .doc-top {
gap: 4px !important; padding: 0 var(--mob-gutter, 16px) !important;
padding-top: calc(10px + env(safe-area-inset-top)) !important;
}
html[data-doc-view="doc"] #doc-theme,
html[data-doc-view="doc"] #doc-teamvis,
html[data-doc-view="doc"] #doc-share,
html[data-doc-view="doc"] #doc-railtog,
html[data-doc-view="doc"] #nav-btn { display: none !important; }
html[data-doc-view="doc"] .doc-crumb {
flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* The way out, where a back control belongs. */
.doc-back {
flex: none; width: 38px; height: 38px; display: grid; place-items: center;
border: none; background: none; padding: 0; cursor: pointer; color: var(--dark);
margin-left: -8px;
}
.doc-back svg { width: 22px; height: 22px; }
html[data-theme="dark"] .doc-back { color: #FCFBF8; }
/* The list's own furniture must not follow you into the document. */
html[data-doc-view="doc"] #new-doc-btn,
html[data-doc-view="doc"] .pillbar-row,
html[data-doc-view="doc"] .mob-topbar { display: none !important; }
html[data-doc-view="doc"] .doc-main,
html[data-doc-view="doc"] .admin-main { padding-top: 0 !important; }
/* ---- Messages ----------------------------------------------------------
Same clearance as every other page at the top; the dock's height at the
bottom, so the message box is reachable rather than under the tab bar. */
.chat-col, .chat-main, .conv-col, .thread {
height: auto !important; min-height: 0;
}
.chat-col {
display: flex; flex-direction: column;
height: 100dvh !important;
padding-top: calc(86px + env(safe-area-inset-top));
box-sizing: border-box;
}
.chat-page-head {
flex: none; padding: 0 var(--mob-gutter, 16px) 14px !important;
background: transparent !important;
}
.chat-page-head .admin-head { margin: 0 0 4px !important; }
/* Tight to the title: the field belongs to it, not to the list below. */
.chat-page-head .toolbar { margin: 0 !important; }
.chat-page-head .search-input { font-size: 17px !important; padding: 6px 0 8px 24px !important; }
.chat-page-head .search-wrap { max-width: none; }
.chat-page-head { padding-bottom: 0 !important; }
.conv-head { padding: 14px var(--mob-gutter, 16px) 6px !important; }
.conv-list { padding-top: 0 !important; }
body:not(.chat-in-thread) .admin-shell,
body:not(.chat-in-thread) .chat-col {
height: auto !important; min-height: 0 !important; overflow: visible !important;
}
body:not(.chat-in-thread) { overflow-y: auto !important; height: auto !important; }
body:not(.chat-in-thread) .chat-main { overflow: visible !important; }
body:not(.chat-in-thread) .chat-main,
body:not(.chat-in-thread) .conv-col {
height: auto !important; min-height: 0 !important; overflow: visible !important;
}
body:not(.chat-in-thread) .conv-list {
flex: none !important; overflow: visible !important; max-height: none !important;
}
/* No white panel on a cream page. The columns were panels on a desktop
layout; here they are the page. */
.chat-col, .conv-col, .thread, .thread-head, .thread-body,
.composer, .rec-bar, .chat-page-head {
background: transparent !important;
}
html[data-theme="dark"] .chat-col, html[data-theme="dark"] .conv-col,
html[data-theme="dark"] .thread, html[data-theme="dark"] .thread-head,
html[data-theme="dark"] .thread-body, html[data-theme="dark"] .composer {
background: transparent !important;
}
/* WHOSE CONVERSATION THIS IS. The head sat mid-width at list scale, so the
screen opened on something that looked like a row rather than a title.
It starts at the gutter, at the size of a heading, with a rule under it
because it is the only place on this screen that needs one. */
body.chat-in-thread .thread-head {
gap: 10px !important;
padding: 18px var(--mob-gutter, 16px) 14px !important;
border-bottom: 1px solid var(--taupe-xlight) !important;
margin-bottom: 4px;
}
body.chat-in-thread .thread-head .conv-av { width: 52px !important; height: 52px !important; }
body.chat-in-thread .thread-title { font-size: 21px !important; font-weight: 600; }
body.chat-in-thread .thread-sub { font-size: 12.5px !important; }
body.chat-in-thread .thread-back { margin: 0 -4px 0 -8px; flex: none; }
body.chat-in-thread .chat-col { padding-top: calc(72px + env(safe-area-inset-top)) !important; }
body.embed.chat-in-thread .chat-col,
body.embed .chat-col { padding-top: 0 !important; }
body.embed.chat-in-thread .thread-head { padding-top: 10px !important; }
body.chat-in-thread .thread-body { padding-left: var(--mob-gutter, 16px) !important;
padding-right: var(--mob-gutter, 16px) !important; }
html[data-theme="dark"] body.chat-in-thread .thread-head {
border-bottom-color: rgba(252,251,248,0.12) !important; }
.msg.me .bubble { background: var(--accent) !important; color: #fff !important; }
.msg.me .bubble.tomb { background: transparent !important; color: var(--taupe) !important; }
.msg.me .vn-play { background: #fff !important; color: var(--accent) !important; }
.msg.me .vn-progress { background: #fff !important; }
/* Inside a thread the dock covers the message box and there is nowhere it
could take you that Back does not. */
body.chat-in-thread .app-dock { display: none !important; }
body.chat-in-thread .composer { padding-bottom: calc(14px + env(safe-area-inset-bottom)) !important; }
body.chat-in-thread .rec-bar { padding-bottom: calc(10px + env(safe-area-inset-bottom)) !important; }
.chat-main { flex: 1 1 auto; min-height: 0 !important; }
.conv-col, .thread { min-height: 0; max-height: 100%; }
.conv-list { flex: 1 1 auto; min-height: 0; overflow-y: auto;
padding-bottom: calc(104px + env(safe-area-inset-bottom)); }
/* Inside a thread the page title would be a second heading above the one
that names who you are talking to. */
.chat-main:not(.show-list) ~ * .chat-page-head,
body.chat-in-thread .chat-page-head { display: none !important; }
body.chat-in-thread .chat-col { padding-top: calc(58px + env(safe-area-inset-top)); }
.thread-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.composer {
flex: none;
padding-bottom: calc(14px + 84px + env(safe-area-inset-bottom)) !important;
}
.gif-pop { margin: 0 var(--mob-gutter, 16px) !important; }
.rec-bar { padding-bottom: calc(10px + 84px + env(safe-area-inset-bottom)) !important; }
/* ---- the descender ------------------------------------------------
A display face at 95px hangs its g well below the baseline, and a
tight line-height crops it. The line gets room and the box stops
clipping — on every page, since every page has a big title. */
.admin-title, .cpl-band .admin-title {
line-height: 1.14 !important;
padding-bottom: 0.1em !important;
overflow: visible !important;
}
/* ---- the title runs to the edges ----------------------------------
Catalog's title fills its card; every other page's should fill the
page the same way, so the type is the page's own margin and not a
size someone picked. */
.admin-head { padding-left: 0 !important; padding-right: 0 !important; }
.admin-title { width: 100% !important; max-width: 100% !important; }
/* The menu is near-black, so the mark has to be its light cut while
the menu is open — otherwise it disappears into the panel. */
html:not([data-theme="dark"]) body.nav-open .mob-logo { filter: invert(1) brightness(2); }
body.nav-open .mob-search { color: #fff !important; }
}
@media (max-width: 900px) {
body.app-mode .admin-side {
display: flex !important;
flex-direction: column !important;
transform: translateX(-101%) !important;
visibility: hidden;
transition: transform 0.28s cubic-bezier(.32,.72,0,1), visibility 0s linear 0.28s !important;
}
body.app-mode .admin-side.open {
transform: translateX(0) !important;
visibility: visible;
transition: transform 0.28s cubic-bezier(.32,.72,0,1), visibility 0s !important;
}
}
@media (max-width: 900px) {
/* ---- the drawer, tidied --------------------------------------------- */
/* 1 — the list starts below the mark, not against it. */
.admin-side .side-nav { margin-top: 62px !important; }
/* 3 — the active marker had the label pressed against it; the list
moves right so the bar has its own gutter. */
.admin-side .side-nav a { padding-left: 16px !important; }
.admin-side .side-nav a.on::before,
.admin-side .side-nav a.active::before {
left: 0 !important; width: 3px !important;
}
/* 2 — a dot is a mark beside a word, not a bullet across the room. */
.admin-side .side-nav a .nav-badge,
.admin-side .side-nav a .side-dot,
.admin-side .side-nav a .dot,
.admin-side .side-nav a .badge {
width: 7px !important; height: 7px !important;
min-width: 0 !important; padding: 0 !important;
font-size: 0 !important; line-height: 0 !important;
border-radius: 50% !important; background: var(--accent) !important;
margin-left: 10px !important; margin-right: 0 !important;
position: static !important; flex: none !important;
align-self: center !important;
}
.admin-side .side-nav a { justify-content: flex-start !important; }
/* 5 — the owner row said nothing the avatar does not. */
/* The avatar opens this menu, not your profile, so the menu carries the
way to it. Without it, anyone who can't see Settings in the nav (every
new team member) had no way to reach their own profile. */
.admin-side .side-foot #side-user,
.admin-side #side-user { display: flex !important; align-items: center; gap: 10px; }
/* 4 — Admin was a second nav nested in the first, and it doubled the
length of the menu. It is one line at the foot that opens its own
sheet, so the menu stays one screen. */
/* ADMIN IS A HEADING IN THE SAME COLUMN. It was indented past the nav
items it belongs with, sat further down than it needed to, and carried
no sign that something inside it wants attention — so a support ticket
could sit unread behind a collapsed group. It lines up with the items
above it, sits tighter to them, and shows a dot when there is something
in there to see. */
.admin-side .side-adminbox { padding: 0 !important; margin: 0 !important; }
.admin-side .side-group-toggle {
font-family: var(--font-body) !important;
font-size: 11px !important; font-weight: 700 !important;
letter-spacing: 0.1em !important; text-transform: uppercase !important;
color: var(--accent) !important;
padding: 12px 0 8px !important; margin: 0 !important;
/* TWO PIXELS, AND THEY COME FROM THE ACTIVE MARKER. Every nav link
reserves a 2px transparent left border for the bar that marks the
current page; this heading has no such border, so matching the
padding still left its text two pixels inboard of the labels above. */
padding-left: 18px !important;
box-sizing: border-box !important;
display: flex !important; align-items: center !important; gap: 8px !important;
}
/* The nav links declare 16px of their own; matching it is what puts the
two labels on one edge. */
.admin-side .side-nav a { padding-left: 16px !important; }
.admin-side .side-group-toggle .sgt-chev {
width: 14px !important; height: 14px !important; margin-left: auto !important;
margin-right: 16px !important;
}
/* Something in there needs you. */
.admin-side .side-group-toggle::after {
content: ""; display: none; width: 6px; height: 6px; border-radius: 50%;
background: var(--accent-notify, var(--accent));
}
body.admin-has-news .admin-side .side-group-toggle::after { display: block; }
.admin-side .side-subnav {
display: flex !important; flex-wrap: wrap !important; gap: 8px !important;
max-height: none !important; opacity: 1 !important;
padding: 0 16px 8px !important; margin: 0 !important;
}
.admin-side .side-subnav a {
font-family: var(--font-body) !important;
font-size: 13.5px !important; font-weight: 600 !important;
letter-spacing: 0 !important;
color: rgba(255,255,255,0.72) !important;
background: rgba(255,255,255,0.08) !important;
padding: 9px 14px !important; border-radius: 100px !important;
min-height: 0 !important;
}
.admin-side .side-subnav a.on { background: var(--accent) !important; color: #fff !important; }
/* 8 — the X is a glyph. */
.admin-side .mob-navx {
background: none !important; border: none !important;
box-shadow: none !important; color: rgba(255,255,255,0.7) !important;
}
.admin-side .mob-navx:active { color: #fff !important; }
/* 6 — the drawer travels over the header, in both directions. */
.admin-shell > .admin-side, .admin-side, body.app-mode .admin-side { z-index: 9600 !important; }
.admin-side-scrim, .nav-scrim { z-index: 9550 !important; }
body.nav-open .app-dock { z-index: 9000; }
.mob-topbar { z-index: 70; }
/* 7 — and the header's own controls go under it as it moves. */
body.nav-open .mob-search, body.nav-open .mob-logo { z-index: 1 !important; }
}
@media (max-width: 900px) {
/* The title and the artwork are one object; 14px of air read as two. */
.cpl-band-in { gap: 6px !important; }
.cpl-band .admin-title { margin-bottom: 0 !important; }
/* The mark stays visible over the open menu — it is the way back out.
Search is what goes under it. */
body.nav-open .mob-logo { z-index: 130 !important; position: relative; }
body.nav-open .mob-search { z-index: 1 !important; opacity: 0; pointer-events: none; }
.mob-topbar { z-index: 125; }
/* ---- Admin opens and closes ---------------------------------------
Forcing the panel open made the toggle a no-op and stacked the chips
down the screen. The group obeys its own state again, and the chips
size to their words so they sit in rows. */
.admin-side .side-subnav {
display: none !important;
flex-wrap: wrap !important; gap: 8px !important;
padding: 0 16px 10px !important; margin: 0 !important;
max-height: none !important; opacity: 1 !important; overflow: visible !important;
}
.admin-side .side-subnav.open {
display: flex !important;
max-height: none !important;
}
.admin-side .side-subnav a {
flex: 0 0 auto !important; width: auto !important;
display: inline-flex !important; align-items: center !important;
}
.admin-side .side-group-toggle { cursor: pointer; }
}
@media (max-width: 900px) {
.admin-side .mob-navx {
position: absolute !important;
top: calc(10px + env(safe-area-inset-top)) !important;
right: 14px !important;
width: 38px !important; height: 38px !important;
display: flex !important; align-items: center !important; justify-content: center !important;
padding: 0 !important;
}
.admin-side .mob-navx svg { width: 15px; height: 15px; stroke-width: 2.2; }
}
@media (max-width: 900px) {
/* Three controls on one line, so each is smaller than one alone would
be — the row still reads at a glance and the targets stay 38px. */
.mob-topbar .mob-ico, .mob-topbar .mob-search {
width: 34px; height: 34px; border: none; background: none; padding: 0;
color: var(--dark); cursor: pointer; position: relative;
display: flex; align-items: center; justify-content: center;
}
.mob-topbar #mob-search { margin-left: auto; }
.mob-topbar .mob-ico svg, .mob-topbar .mob-search svg { width: 18px; height: 18px; }
html[data-theme="dark"] .mob-topbar .mob-ico { color: #FCFBF8; }
.mob-ico-dot {
position: absolute; top: 6px; right: 6px;
width: 7px; height: 7px; border-radius: 50%; background: var(--accent-notify, var(--accent));
}
.mob-ico-dot[hidden] { display: none; }
/* The avatar comes down to match them. */
.mob-topbar .mob-av { width: 34px !important; height: 34px !important; font-size: 11px !important;
margin-left: 4px !important; }
.mob-topbar { gap: 8px; }
/* The glyph boxes sit flush to their icons so the air between them is
the gap, not padding. */
.mob-topbar .mob-ico, .mob-topbar .mob-search { width: 26px; }
.mob-topbar #mob-search { margin-left: auto; }
body.nav-open #mob-bell { z-index: 1 !important; opacity: 0; pointer-events: none; }
}
@media (max-width: 900px) {
.mob-fsheet, .mob-you, .app-sheet, .mob-sheet {
background: #15140F !important;
}
.mob-fgrab, .app-grab { background: rgba(252,251,248,0.3) !important; }
.mob-fcap { color: rgba(252,251,248,0.45) !important; }
.mob-fopt:not(.on),
.mob-you-o, .app-sheet a, .app-sheet button,
.mob-you-n { color: #FCFBF8 !important; }
.mob-fopt.on { color: var(--accent) !important; }
.mob-fcap + .mob-fopt,
.mob-you-h { border-color: rgba(252,251,248,0.12) !important; }
.mob-fopt:active, .mob-you-o:active, .app-sheet a:active {
background: rgba(252,251,248,0.08) !important;
}
.mob-you-n em, .app-sheet .chev { color: rgba(252,251,248,0.5) !important; }
.app-sheet-cap { color: var(--accent) !important; }
}
@media (max-width: 900px) {
/* THE TOP BAR STANDS DOWN WHILE THE MENU IS OPEN. Its icons are fixed
above everything, so with the panel open the search glyph landed on top
of the panel's own theme and close controls — two sets of icons in one
corner, one of them belonging to a screen you could no longer see. */
body.nav-open .mob-topbar .mob-ico,
body.nav-open .mob-topbar .mob-logo { opacity: 0; pointer-events: none; }
body.nav-open .mob-topbar { pointer-events: none; }
.mob-navtools {
position: absolute; top: calc(14px + env(safe-area-inset-top)); right: 16px;
display: flex; align-items: center; gap: 2px; z-index: 6;
}
.mob-navth {
width: 38px; height: 38px; border: none; background: none; padding: 0;
color: rgba(255,255,255,0.62); cursor: pointer; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
}
.mob-navth svg { width: 19px; height: 19px; }
.mob-navth:active { background: rgba(255,255,255,0.12); color: #fff; }
/* The X keeps its own placement rules; inside the pair it flows. */
.mob-navtools .mob-navx { position: static !important; top: auto !important; right: auto !important; }
}
/* CHAT LIST, phone: the list is one column exactly as wide as the screen.
The column was sized to its widest row — a long link in a preview — so
the whole page ran off the right edge and every row was cut off. */
@media (max-width: 900px) {
.chat-main { grid-template-columns: minmax(0, 1fr) !important; }
.chat-main > *, .conv-col, .conv-list, .conv-item { min-width: 0 !important; max-width: 100% !important; box-sizing: border-box; }
}
/* KEYBOARD OPEN, phone: the conversation shrinks to the space above the
keyboard and the message box sits right on top of it. The page was still
full height behind the keyboard, and the room kept for the home bar and
tab bar showed as a big empty band between the box and the keys. */
@media (max-width: 900px) {
body.kb-open .chat-col { height: var(--kb-vh, 100dvh) !important; }
body.kb-open .composer, body.kb-open.chat-in-thread .composer { padding-bottom: 8px !important; }
body.kb-open .app-dock, body.kb-open .wp-tabbar, body.kb-open .cf-tabbar { display: none !important; }
}
/* Admin chat, phone: the message box sits just above the home bar at rest,
and right on the keyboard when typing — pinned to the part of the screen
you can actually see, so nothing scrolls up under the clock. */
@media (max-width: 900px) {
body.chat-in-thread .composer { padding-bottom: max(8px, env(safe-area-inset-bottom)) !important; }
body.kb-open .chat-col { position: fixed !important; top: var(--kb-top, 0px) !important; left: 0; right: 0;
height: var(--kb-vh, 100dvh) !important; padding-top: calc(58px + env(safe-area-inset-top)) !important; z-index: 2; }
body.kb-open .mob-topbar, body.kb-open .mob-av, body.kb-open .mob-navtools, body.kb-open.chat-in-thread .thread-head {
transform: translateY(var(--kb-top, 0px)); }
body.kb-open .composer, body.kb-open.chat-in-thread .composer { padding-bottom: 6px !important; }
}
/* NOT TODAY — the day is full, so everything under that line reads as set
aside: greyed out. Moved back into the plan, a row renders in the plan
list and gets its normal colours again. */
@media (max-width: 900px) {
.tday-over .trow { filter: grayscale(1) !important; opacity: 0.5 !important; }
.tday-over .trow .trow-title { color: var(--stone) !important; }
}
/* The yellow "Add time" pill always has black text — on every row,
late or not, whatever colour the title around it is. */
html body .trow .trow-addtime, html body .trow .trow-addtime *,
html body .trow-addtime, html body .trow-addtime * {
color: #15140F !important; -webkit-text-fill-color: #15140F !important; stroke: #15140F;
}
html body .trow-addtime svg, html body .trow-addtime svg * { fill: none !important; stroke: #15140F !important; }
/* THE PHONE CHAT IS THE PAGE, NOT A CARD ON IT. The desktop's rounded,
tinted thread panel (and the gutter beside it) stopped at the edges here;
on a phone the conversation runs edge to edge. The page itself never
scrolls while a conversation is open — only the messages do — so nothing
rides up under the clock. */
@media (max-width: 900px) {
.chat-main { padding: 0 !important; gap: 0 !important; }
html body .chat-main > .thread,
html[data-theme="dark"] body .chat-main > .thread {
background: transparent !important; border-radius: 0 !important; box-shadow: none !important;
border: 0 !important; margin: 0 !important; width: 100% !important; max-width: none !important;
}
html:has(body.chat-in-thread), body.chat-in-thread { overflow: hidden !important; overscroll-behavior: none; }
body.chat-in-thread .thread-body { overscroll-behavior: contain; }
}
/* NO FLASH ON TAP. A phone paints its own pale box over any link or button
the moment it is touched — on a tap that opens a page, that box covered
the screen until the next page drew. Off everywhere; the app's own
pressed and hover states still show. */
html, html * { -webkit-tap-highlight-color: transparent !important; }
/* NO SIDEWAYS SCROLLING ON A PHONE — on any page. One wide thing (a search
box sized for desktop, a GIF, a long link) let the whole page slide left
and right. The page is clipped to the screen width; wide things inside
shrink or scroll within themselves. */
@media (max-width: 900px) {
html, body { overflow-x: clip !important; max-width: 100vw; }
img, video, iframe, table { max-width: 100%; }
.chat-page-head .search-wrap { width: 100% !important; }
.msg { max-width: 82% !important; min-width: 0; }
.msg .bubble { overflow-wrap: anywhere; }
.msg .bubble.media img, .msg .bubble.media video { max-width: 100% !important; height: auto; }
}