/* ===================================================================================================================== THE NEW MOBILE DASHBOARD (owner's design, 20 Oct 2026: thirteen phone screens of the app he wants). PHONE ONLY. Every rule in this file sits inside the one breakpoint from css/plinth-mobile.css: (max-width:767px), or a touch screen under 501px tall (a phone on its side). There is no rule outside that query, so a desktop window cannot be reached by anything here. Loaded last in public/dashboard.html so it beats the generations' own !important rules; js/plinth-mobile-shell.js draws the bar and the groups it styles. What it draws, from his shots: - A top bar on every zone: Menu, the Plinth wordmark, the plan pill. The title's row is the title's again. - A grouped drawer: Workspace, Property media, Your site, the open zone marked, the theme at its foot. - A page header whose title and primary button share one row, the zone's line under them. - Primary buttons in the signature green, every tap target at least 44px, every input 16px. ===================================================================================================================== */ @media (max-width:767px),(pointer:coarse) and (max-height:500px){ /* 56px -> 48px (owner ruling, 26 Oct 2026: "zoom out abit more ... everything is so mega sized"). The bar holds one 44px tap target, so 48 is the floor that keeps the Menu button full size with air either side; anything less would shrink the target itself, which is the one thing that does not come down. 8px off every screen in the app. */ :root{--m-topbar:48px} /* --------------------------------------------------------------------------------------------------- the top bar */ /* The bar is created hidden in its own style attribute, so only this rule, inside the phone query, can show it. */ .m-topbar{position:fixed;top:0;left:0;right:0;z-index:310;display:flex!important;align-items:center;gap:12px; height:calc(var(--m-topbar) + var(--m-safe-t));padding:var(--m-safe-t) var(--m-gutter) 0; background:var(--paper);-webkit-tap-highlight-color:transparent} /* Ruling 226 (owner design, 21 Oct 2026): the menu is the icon alone. The boxed chip it used to sit in read as a button floating over the page, and in his shots it is just three lines beside the wordmark. */ .m-topbar .m-menu{flex:none;display:inline-flex;align-items:center;justify-content:center; width:var(--m-tap);height:var(--m-tap);margin-left:-10px;padding:0;border:0;border-radius:10px; background:none;color:var(--ink);cursor:pointer} .m-topbar .m-menu svg{width:20px;height:20px} .m-topbar .m-menu:focus-visible{outline:2px solid var(--sig);outline-offset:2px} .m-brand{font-size:var(--m-h3);font-weight:700;letter-spacing:-.03em;line-height:1;color:var(--sig)} .m-topbar .plan-badge{position:static!important;inset:auto!important;margin:0 0 0 auto!important;flex:none} /* The plan pill's old spot drew a second one under the bar: painted over, but the screen reader still read "Max" twice. Only the pill in the bar stands on a phone. */ :not(.m-topbar)>.plan-badge{display:none!important} /* The Menu button's old home was the page title's row (r144); his design gives it the bar, so the floating one goes. The title never made room for a button any more, and the button no longer drags (22 Oct 2026). */ html .shell-open{display:none!important} /* The page starts under the bar. (--m-plan-strip reserved room for the plan pill where it used to sit.) */ html #view{padding-top:calc(var(--m-topbar) + var(--m-safe-t) + 6px)!important} /* The zone's title sits right under the bar: the generations' own top margin would push it a line further down. */ #view>.head,#view .ve>.head{margin-top:0!important;padding-top:0!important} /* The open drawer carries its own wordmark and X, so the bar steps aside while it is open (his shot 3). */ html[data-side="open"] .m-topbar{display:none!important} /* ---------------------------------------------------------------------------------------------------- the drawer */ html #side{background:var(--paper)!important;padding:0 0 calc(16px + var(--m-safe-b))!important} html #side::after{content:none!important} html #side .side-close{display:none!important} .m-drawer{display:flex;flex-direction:column;gap:22px;padding:calc(14px + var(--m-safe-t)) 14px 0} .m-drawer-top{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:var(--m-tap)} .m-drawer-x{flex:none;display:inline-flex;align-items:center;justify-content:center;width:var(--m-tap);height:var(--m-tap); padding:0;border:1px solid var(--card-edge,var(--line-2));border-radius:12px;background:var(--card);color:var(--ink);cursor:pointer} .m-drawer-x svg{width:20px;height:20px} .m-drawer-x:focus-visible{outline:2px solid var(--sig);outline-offset:2px} .m-group-t{margin:0 0 6px;padding-left:2px;font-size:var(--m-cap-s);font-weight:600;letter-spacing:.08em; text-transform:uppercase;color:var(--ink-3)} .m-rows{border:1px solid var(--card-edge,var(--line-2));border-radius:14px;background:var(--card);overflow:hidden} /* A row keeps the button the sidebar built: its icon, its label, its badge and its handler. */ html #side .m-row{display:flex;flex-wrap:wrap;align-items:center;gap:0 12px;width:100%; min-height:56px!important;margin:0;padding:11px 14px;border:0;border-radius:0;background:transparent; color:var(--ink);font-size:16px;font-weight:600;line-height:1.25;text-align:left;cursor:pointer} html #side .m-rows>.m-row+.m-row{border-top:1px solid var(--line)} html #side .m-row svg{flex:none;width:21px;height:21px;color:var(--ink-2)} html #side .m-row .nl{flex:1 1 auto;min-width:0;font-size:16px!important} html #side .m-row .m-sub{flex:0 0 100%;padding-left:33px;font-size:13px;font-weight:400;color:var(--ink-3)} html #side .m-row .badge{flex:none;margin-left:auto} html #side .m-row[aria-current="true"]{background:var(--sig-bg);color:var(--sig); box-shadow:inset 3px 0 0 var(--sig)} html #side .m-row[aria-current="true"] svg,html #side .m-row[aria-current="true"] .m-sub{color:var(--sig)} html #side .m-row:focus-visible{outline:2px solid var(--sig);outline-offset:-2px} /* The theme pair, drawn as his segmented control: Light first, then Dark, as his shot reads. All four themes stay, because dropping the nature pair would take a function away on a phone; they sit on the row beneath. The hairlines are the grid's own 1px gaps showing the backing colour, so they do not depend on child order. */ html #side .m-theme .side-theme-grid-v23{display:grid;grid-template-columns:1fr 1fr;gap:1px; border:1px solid var(--card-edge,var(--line-2));border-radius:12px;background:var(--line-2);overflow:hidden} html #side .m-theme .side-theme-grid-v23 button{display:flex;align-items:center;justify-content:center;gap:8px; min-height:var(--m-tap)!important;border:0;border-radius:0;background:var(--card); font-size:14px!important;font-weight:600;color:var(--ink-2)} html #side .m-theme .side-theme-grid-v23 button[data-theme="light"]{order:1} html #side .m-theme .side-theme-grid-v23 button[data-theme="dark"]{order:2} html #side .m-theme .side-theme-grid-v23 button[data-theme="nature-light"]{order:3} html #side .m-theme .side-theme-grid-v23 button[data-theme="nature-dark"]{order:4} html #side .m-theme .side-theme-grid-v23 button .m-ico{width:18px;height:18px;flex:none} /* css/dashboard-extensions.css paints every pressed chip in the app with one !important rule; the chosen theme in his drawer is green on green, so this has to out-rank it. */ html[data-theme] #side .m-drawer .m-theme .side-theme-grid-v23 button[aria-pressed="true"]{ background:var(--sig-bg)!important;color:var(--sig)!important;border-color:transparent!important;box-shadow:none!important} html #side .side-utility-v22{display:grid;gap:0;border:1px solid var(--card-edge,var(--line-2));border-radius:14px; background:var(--card);overflow:hidden} html #side .side-utility-v22 button{min-height:56px!important;padding:11px 14px;border:0;border-radius:0; background:transparent;font-size:16px!important;font-weight:600;color:var(--ink)} html #side .side-utility-v22 button+button{border-top:1px solid var(--line)} html #side .sidefoot{padding:0} html #side .sidefoot .acct{width:100%;min-height:60px!important;padding:11px 14px; border:1px solid var(--card-edge,var(--line-2));border-radius:14px;background:var(--card)} /* ----------------------------------------------------------------------------------------------- the page header */ #view .head .htop{display:flex;flex-wrap:nowrap;align-items:center;gap:12px;min-height:var(--m-tap);margin:0} #view .head .who{flex:1 1 auto;min-width:0} #view .head .who h1{margin:0;font-size:30px;line-height:1.14;font-weight:700;letter-spacing:-.025em} #view .head .tools{flex:none;display:flex;align-items:center;gap:8px;width:auto} #view .head .sub{margin:8px 0 0;font-size:15px;line-height:1.45;color:var(--ink-2)} #view .head .strip:empty{display:none} /* ------------------------------------------------------------------------------------- controls, his green and 44px */ /* His primaries stand 48px, not the 44px floor (law L3). The zone header's primary needs the !important because css/dashboard-f27.css floors every button at 44px with one; inline solids elsewhere keep the 44px floor. */ #view .head .tools :is(.solid,.cta){min-height:48px!important} #view :is(button,a).solid,#view .cta,#view button.primary{min-height:48px;padding:0 16px;border-radius:10px; border:1px solid var(--sig);background:var(--sig);color:var(--on-sig);font-size:15px;font-weight:600} #view :is(button,a).ghost{min-height:var(--m-tap);padding:0 14px;border-radius:10px;font-size:15px} #view :is(input,select,textarea){font-size:16px} /* "Ruling 103": no line reads under 12px on a phone. max() only ever raises a size, so a small that is already bigger keeps its own; the Clients rows' phone numbers were 10.5px. */ #view small{font-size:max(12px,.82em)} /* The same floor where a zone sets its own small size: the tours' count line read 11px. */ #view .tour-app .tour-pagination{font-size:12px} #view :is(input[type="text"],input[type="search"],input:not([type]),select){min-height:48px;border-radius:10px} /* ------------------------------------------------------------------------------------------------ Clients (comp) */ /* Owner ruling, 21 Oct 2026 (Clients comp): the header, the search row and the Import link are one ladder on a grid: title and "Add client" share row 1, search and a compact filter row 2, "Import contacts" a quiet green link on row 3 at the right, then the cards. Import is injected INSIDE the header's tools by js/dashboard-extensions.js, above the search row in the markup, so the header, its row and its tools step aside (display:contents) and every piece becomes a grid cell of the zone. Scoped by :has(>.client-toolbar), so no other zone is touched. */ #view:has(>.client-toolbar){display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;row-gap:16px;align-content:start} #view:has(>.client-toolbar)>*{grid-column:1/-1} #view:has(>.client-toolbar)>.head, #view:has(>.client-toolbar)>.head .htop, #view:has(>.client-toolbar)>.head .tools{display:contents} #view:has(>.client-toolbar)>.head .who{grid-column:1;grid-row:1;align-self:center} #view:has(>.client-toolbar)>.head #addBtn{grid-column:2;grid-row:1;align-self:center;padding:0 18px} #view:has(>.client-toolbar)>.client-toolbar{grid-column:1/-1;grid-row:2} #view:has(>.client-toolbar)>.head #v27open{grid-column:1/-1;grid-row:3;justify-self:end;margin:-6px 0 0} /* His title is ink, not the zone green. */ #view:has(>.client-toolbar) h1{color:var(--ink)} /* Owner ruling, 21 Oct 2026: Import contacts is a quiet green link with an upload mark, not a bordered button. It keeps its button, its id and its handler; only the look changes. */ html #view #v27open{display:inline-flex;align-items:center;gap:8px;width:auto;min-height:var(--m-tap);padding:0 2px; border:0!important;border-radius:8px;background:transparent!important;box-shadow:none!important; color:var(--sig)!important;font-size:15px;font-weight:500} html #view #v27open::before{content:"";flex:none;width:20px;height:20px;background:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 16V4M7 9l5-5 5 5M4 15v4a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-4'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 16V4M7 9l5-5 5 5M4 15v4a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-4'/%3E%3C/svg%3E") center/contain no-repeat} html #view #v27open:focus-visible{outline:2px solid var(--sig);outline-offset:2px} /* Owner ruling, 21 Oct 2026: search takes the row, the filter is a compact box to its right (icon and caret; the word stays for screen readers, clipped rather than removed). The filter menu opens against the right edge so it cannot run off the screen from its new spot. */ #view .client-toolbar{flex-direction:row;align-items:stretch;gap:10px;margin:0} #view .client-toolbar .search{order:1;flex:1 1 auto;width:auto;min-width:0;min-height:52px;border-radius:10px} #view .client-toolbar .search{padding-top:0;padding-bottom:0;background:var(--card)} #view .client-toolbar .search input{min-height:52px} #view .client-toolbar .pf{order:2;flex:none;width:auto;display:flex} #view .client-toolbar .pf-btn{width:auto;min-height:52px;padding:0 14px;justify-content:center;gap:6px;border-radius:10px} #view .client-toolbar .pf-btn>span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} #view .client-toolbar .pf-menu{left:auto;right:0;min-width:min(280px,calc(100vw - 32px))} /* Owner ruling, 21 Oct 2026: a client card is a soft tile (48px), the name in bold, the number under it, a chevron. A client with no number shows the name alone, centred on the card (the empty small is taken out of the stack). */ #view .client-list .client-row{grid-template-columns:48px minmax(0,1fr) 20px!important;gap:16px!important; min-height:84px!important;padding:16px 14px!important;align-items:center} #view .client-list .client-row:hover{padding-left:14px!important;padding-right:14px!important} #view .client-list .client-row+.client-row,#view .client-list #cbody>.client-row+.client-row{margin-top:12px} #view .client-list .client-row .mono{width:48px!important;height:48px!important;border-radius:10px!important; font-size:15px!important;font-weight:600} #view .client-list .client-main{display:flex;flex-direction:column;justify-content:center;gap:3px;min-width:0} #view .client-list .client-row .client-main b{font-size:17px;font-weight:600;line-height:1.25} #view .client-list .client-row .client-main small{font-size:14.5px;line-height:1.3} #view .client-list .client-row .client-main small:empty{display:none} /* The arrow's shaft goes and its head stays: the icon the dashboard draws becomes his chevron. */ #view .client-list .client-row>.arw svg path:first-child{display:none} #view .client-list .client-row>.arw{color:var(--ink)} #view .client-list .client-row>.arw svg{width:22px;height:22px} /* The primary carries a drawn plus, as every one of his comps does ("+ Add client", "+ New deck", "+ Add article"). It is a stroked mark rather than a typed "+", so it matches the icons beside it (owner ruling, 21 Oct 2026). */ #view:has(>.client-toolbar)>.head #addBtn{display:inline-flex;align-items:center;justify-content:center;gap:9px} #view:has(>.client-toolbar)>.head #addBtn::before{content:"";flex:none;width:18px;height:18px;background:currentColor; -webkit-mask:var(--m-plus) center/18px no-repeat;mask:var(--m-plus) center/18px no-repeat; --m-plus:url('data:image/svg+xml;utf8,')} /* The search field is white in his comp, level with the filter box beside it. The theme sheets paint every input a cream with !important, so this has to out-rank them. */ #view .client-toolbar .search, #view .client-toolbar .search input#cq{background:var(--card,#fff)!important} /* The search and the filter share one row and STAY on it (owner ruling, 21 Oct 2026, his comp and his own phone). The base .client-toolbar wraps, so at a larger Android text size the search grew past the row and threw the filter onto a line of its own. The search is what gives way now: it shrinks, the filter keeps its size. */ #view .client-toolbar{flex-wrap:nowrap!important} #view .client-toolbar>.search{flex:1 1 auto;min-width:0} #view .client-toolbar>.search input#cq{min-width:0;text-overflow:ellipsis} #view .client-toolbar>.pf{flex:0 0 auto} }