/* Shared components for both Meraki apps. Generated unchanged into Content Center. */
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:var(--font);font-size:var(--fs-md);line-height:var(--lh);background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased}
body{letter-spacing:normal}
button,input,select,textarea{font-family:var(--font);font-size:var(--fs-md);line-height:var(--lh)}
h1,h2,h3,h4,h5,p{overflow-wrap:anywhere}
h1,.topbar h1,.page-heading h1{font-size:var(--fs-2xl);font-weight:700;line-height:var(--lh-tight);letter-spacing:-.025em;margin:0 0 var(--s2);color:var(--text)}
h2,.section-heading h2{font-size:var(--fs-xl);font-weight:650;line-height:var(--lh-tight);letter-spacing:-.015em}
h3{font-size:var(--fs-lg);font-weight:650;line-height:var(--lh-tight)}
h4,h5{font-size:var(--fs-sm);font-weight:600}
a{color:var(--accent)}
.small,.muted.small{font-size:var(--fs-sm)}
.muted,.sub{color:var(--text-muted)}
.shell{grid-template-columns:248px minmax(0,1fr)}
.side,.agency-sidebar{background:var(--side);padding:var(--s5) var(--s3);color:var(--text);border-right:1px solid var(--line);display:flex;flex-direction:column;scrollbar-width:thin}
.agency-shell{display:flex;align-items:stretch;min-height:100vh}
.agency-sidebar{width:248px;flex:0 0 248px;height:100vh;position:sticky;top:0;overflow-y:auto}
.side .brand,.agency-sidebar .agency-brand,.agency-mobile-header .agency-brand{display:flex;align-items:center;gap:var(--s3);padding:0 var(--s3) var(--s5);margin:0;color:var(--text);text-decoration:none;flex:none;font-family:var(--font);letter-spacing:normal}
.side .brand img,.agency-brand>svg{width:38px;height:38px;flex:none;border-radius:var(--r)}
.agency-brand b,.side .brand b{display:block;font-size:var(--fs-xl);font-weight:700;line-height:var(--lh-tight);letter-spacing:-.025em}
.agency-brand small,.side .brand small{display:block;font-size:var(--fs-xs);letter-spacing:.06em;font-weight:600;color:var(--text-muted);line-height:var(--lh)}
.side .nav,.agency-sidebar .nav{display:flex;flex-direction:column;gap:var(--s1)}
.side .nav a,.agency-sidebar .nav a,.agency-mobile-menu nav a{display:flex;align-items:center;gap:var(--s3);padding:var(--s2) var(--s3);min-height:44px;border-radius:var(--r-sm);margin:0;color:var(--text);font-size:var(--fs-md);font-weight:500;text-decoration:none;line-height:var(--lh)}
.side .nav a:hover,.agency-sidebar .nav a:hover,.agency-mobile-menu nav a:hover{background:var(--surface-2)}
.side .nav a.active,.agency-sidebar .nav a[aria-current=page],.agency-mobile-menu nav a[aria-current=page]{background:var(--surface-2);color:var(--accent);font-weight:650}
.ic{flex:none}
.nav-heading,.agency-sidebar .nav-heading,.agency-mobile-menu .nav-heading{margin:var(--s5) var(--s3) var(--s2);color:var(--text-muted);font-size:var(--fs-xs);line-height:var(--lh);font-weight:650;letter-spacing:.06em;text-transform:uppercase}
.dot{width:8px;height:8px;border-radius:999px;background:var(--text-muted);flex:none;display:inline-block}
.scope-trigger .dot{background:var(--biz)}
.side .foot,.agency-sidebar .sidebar-bottom{padding:var(--s5) var(--s3) 0;margin-top:auto;color:var(--text-muted);font-size:var(--fs-sm)}
.agency-sidebar .user-card{padding:0;display:flex;gap:var(--s3);border:0;background:none}
.agency-sidebar .user-card strong{font-size:var(--fs-sm)}
.agency-sidebar .user-card .role-label{font-size:var(--fs-xs);color:var(--text-muted)}
.agency-sidebar .sidebar-signout{padding:var(--s2) 0;background:none;border:0;color:var(--text-muted);font-size:var(--fs-sm);min-height:44px}
.avatar,.agency-sidebar .avatar{width:36px;height:36px;border:1px solid var(--line);background:var(--surface-2);border-radius:999px;display:grid;place-items:center;color:var(--text)}
.agency-shell .workspace-main{flex:1;min-width:0}
.agency-shell .workspace-main main,.main{width:100%;max-width:1320px;margin:0 auto;padding:var(--s5) var(--s6) var(--s7)}
.breadcrumbs{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;color:var(--text-muted);font-size:var(--fs-sm);line-height:var(--lh);margin:0 0 var(--s5)}
.breadcrumbs a{color:var(--text-muted);text-decoration:none}
.breadcrumbs a:hover{color:var(--accent)}
.topbar,.workspace-main main>.page-heading{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--s4);margin:0 0 var(--s5)}
.topbar .page-heading{display:block;margin:0;flex:1;min-width:0}
.topbar .sub,.workspace-main main>.page-heading p{font-size:var(--fs-md);font-weight:400;line-height:var(--lh);color:var(--text-muted);margin:0;max-width:72ch}
.card,.metric,.list-card,.step-editor,.table-wrap,.c-panel{border-radius:var(--r);border-color:var(--line);background:var(--surface);color:var(--text)}
.c-panel{border:1px solid var(--line);padding:var(--s5);margin-bottom:var(--s5)}
.btn,button,.button{border-radius:var(--r-sm);min-height:44px;font-size:var(--fs-md);font-weight:600;line-height:var(--lh);font-family:var(--font)}
.btn,.button{padding:var(--s2) var(--s4);display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);border:1px solid var(--line);background:var(--surface);color:var(--text);text-decoration:none}
.btn.small{font-size:var(--fs-sm);min-height:44px}
.btn.primary,.button:not(.secondary):not(.ghost):not(.light){background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.btn.ghost,.button.secondary,.button.ghost{background:var(--surface);color:var(--text);border-color:var(--line)}
input,select,textarea{background:var(--bg);color:var(--text);border:1px solid var(--line);border-radius:var(--r-sm);min-height:44px;max-width:100%}
input[type=checkbox],input[type=radio]{min-height:20px;min-width:20px}
label{color:var(--text-muted);font-size:var(--fs-sm)}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.c-stat{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);padding:var(--s4)}
.c-stat .n,.c-stat .stat-number{font-size:var(--fs-num);font-weight:700;line-height:var(--lh-tight)}
.c-stat[data-tone=warn] .n{color:var(--warn)}
.c-item{border:1px solid var(--line);border-radius:var(--r);padding:var(--s4);background:var(--surface)}
.c-item h3,.c-item .task-content h3{font-size:var(--fs-lg);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.c-item .task-meta{font-size:var(--fs-sm)}
.c-empty,.empty-state,.empty{padding:var(--s5);text-align:center;color:var(--text-muted);background:var(--surface);border:1px dashed var(--line);border-radius:var(--r)}
.pill,.status{font-size:var(--fs-xs);font-weight:600;line-height:var(--lh);border-radius:999px;padding:var(--s1) var(--s2);display:inline-flex;gap:var(--s1);align-items:center;white-space:normal}
.pill[data-status=draft],.status.draft{color:var(--warn);background:var(--warn-bg)}
.pill[data-status=approved],.status.approved,.pill[data-status=posted],.status.posted{color:var(--ok);background:var(--ok-bg)}
.pill[data-status=skipped],.status.skipped{color:var(--text-muted);background:var(--surface-2);text-decoration:line-through}
.pill[data-status=missing],.status.missing{color:var(--text-muted);background:var(--bg);border:1px dashed var(--text-muted)}
.cell,.cell.posted,.cell.skipped{opacity:1;color:var(--text);font-size:var(--fs-sm);background:var(--surface);border-color:var(--line)}
.cell .s{font-size:var(--fs-xs);color:var(--text-muted)}
.cell.skipped .t{text-decoration:line-through}
.cell.posted .s,.cell.approved .s{color:var(--ok)}
.cell.draft .s{color:var(--warn)}
.cell.missing{border-style:dashed;color:var(--text-muted);background:var(--bg)}
.cell.elapsed{color:var(--text-muted);text-decoration:none}
.workspace-footer{display:flex;align-items:center;justify-content:center;gap:var(--s2);background:none;color:var(--text-muted);border-color:var(--line);padding:var(--s5) var(--s6);font-size:var(--fs-xs);line-height:var(--lh);text-align:center}
.main .workspace-footer{padding:var(--s5) 0}
.agency-mobile-header{display:none}
.more-menu{position:relative}
.more-menu summary{min-height:44px;display:flex;align-items:center;cursor:pointer;padding:var(--s2) var(--s4);border:1px solid var(--line);border-radius:var(--r-sm)}
.more-menu>div{position:absolute;right:0;top:100%;background:var(--surface);border:1px solid var(--line);padding:var(--s3);border-radius:var(--r);z-index:20;min-width:220px;box-shadow:var(--shadow)}
.more-menu>div .btn{width:100%;margin-bottom:var(--s1)}
[hidden]{display:none!important}
@media(max-width:860px){
 .shell{grid-template-columns:1fr}.agency-shell{display:block}.agency-shell .agency-sidebar{display:none}
 .agency-mobile-header{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);padding:var(--s4);border-bottom:1px solid var(--line);background:var(--side)}
 .agency-mobile-header .agency-brand{padding:0}.agency-mobile-header .agency-brand small{display:none}
 .agency-mobile-menu>summary{padding:var(--s2) var(--s3);border:1px solid var(--line);border-radius:var(--r-sm);font-size:var(--fs-md);min-height:44px;cursor:pointer}
 .agency-mobile-menu nav{position:absolute;z-index:80;left:var(--s3);right:var(--s3);top:80px;max-height:75vh;overflow:auto;padding:var(--s4);background:var(--side);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
 .agency-shell .workspace-main main,.main{padding:var(--s5) var(--s4) 100px}
 .agency-shell .workspace-footer{padding:var(--s5) var(--s4) 100px}.breadcrumbs{margin-bottom:var(--s4)}
 .agency-mobile-menu nav .ic{display:block}
}
@media(max-width:600px){.agency-mobile-header .agency-brand{display:none}.topbar h1,.page-heading h1{font-size:var(--fs-2xl)}.topbar .sub{font-size:var(--fs-md)}.c-panel{padding:var(--s4)}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

.business-title{border-left:4px solid var(--biz);padding-left:var(--s4);min-width:0}
.business-title h1,.sales-heading .business-title h1,.topbar .business-title h1{font-size:var(--fs-2xl);font-family:var(--font);font-weight:700;line-height:var(--lh-tight);letter-spacing:-.025em;color:var(--text);margin:0 0 var(--s2)}
.business-title .page-subtitle,.topbar .page-subtitle{font-size:var(--fs-md);font-weight:400;color:var(--text-muted);line-height:var(--lh);margin:0}
/* The drawer close control belongs only to the mobile navigation. */
.side .menu-close{display:none}
.workspace-switcher>button,.scope-trigger{font-size:var(--fs-md);font-family:var(--font);font-weight:600;color:var(--text);background:var(--surface);border-color:var(--line)}
.workspace-dot{background:var(--biz)}
@media(max-width:860px){.side .menu-close{display:inline-flex}}
/* Shared section navigation, account menu and bottom tabs. */
.nav-section{border:0;padding:0;margin:0}
.nav-section>summary{display:flex;align-items:center;justify-content:space-between;cursor:pointer;min-height:44px;padding:var(--s2) var(--s3);margin-top:var(--s3);color:var(--text-muted);font-size:var(--fs-xs);font-weight:650;letter-spacing:.06em;text-transform:uppercase;list-style:none}
.nav-section>summary::-webkit-details-marker{display:none}.nav-section>summary::after{content:'›';font-size:var(--fs-lg)}.nav-section[open]>summary::after{transform:rotate(90deg)}
.account-menu{width:100%}.account-menu>summary{display:flex;gap:var(--s3);align-items:center;cursor:pointer;min-height:44px;list-style:none}.account-menu summary b,.account-menu summary strong{display:block;font-size:var(--fs-sm);color:var(--text)}.account-menu summary span:not(.avatar){display:block;font-size:var(--fs-xs);color:var(--text-muted)}.account-menu>a,.account-menu button{display:flex;align-items:center;min-height:44px;background:none;border:0;color:var(--text-muted);font-size:var(--fs-sm)}
.agency-shell>.tabbar{display:none}.agency-mobile-header{position:static;inset:auto}
@media(max-width:860px){.agency-shell>.tabbar,.tabbar{position:fixed;display:flex;left:0;right:0;bottom:0;z-index:35;justify-content:space-around;background:var(--surface);border-top:1px solid var(--line);padding:var(--s2) var(--s1) calc(var(--s2) + env(safe-area-inset-bottom))}.tabbar a{display:flex;flex:1;flex-direction:column;align-items:center;justify-content:center;gap:var(--s1);min-height:48px;min-width:44px;color:var(--text-muted);font-size:var(--fs-xs);font-weight:600;text-decoration:none}.tabbar a.on,.tabbar a[aria-current=page]{color:var(--accent)}.tabbar .ti{height:24px;display:flex;align-items:center}.tabbar .ic{width:22px;height:22px}.agency-mobile-header{position:static}.agency-shell .workspace-main main{padding-top:var(--s5)}}
@media(max-width:860px){.agency-mobile-header{justify-content:flex-start;background:var(--bg);border:0;padding:var(--s4) var(--s4) 0;gap:var(--s3)}.agency-mobile-header>.workspace-switcher{max-width:260px;flex:1}.agency-mobile-menu>summary{display:grid;place-items:center;width:44px;height:44px;padding:0;background:var(--surface);list-style:none}.agency-mobile-menu>summary::-webkit-details-marker{display:none}}
.needs-attention ul{list-style:none;padding:0;margin:0}.needs-attention li{border-bottom:1px solid var(--line);padding:var(--s2) 0}.needs-attention li a{display:inline-flex;align-items:center;min-height:44px}
/* Readable tables become labelled cards on small screens. */
.range-picker,.nav a{min-height:44px}
@media(max-width:640px){
 table:has(td[data-label]),table:has(td[data-label]) tbody,table:has(td[data-label]) tr,table:has(td[data-label]) td{display:block;width:100%;min-width:0;max-width:100%}
 table:has(td[data-label]) thead{display:none}table:has(td[data-label]) tr{border:1px solid var(--line);border-radius:var(--r);margin-bottom:var(--s3);padding:var(--s3);background:var(--surface)}
 table:has(td[data-label]) td{padding:var(--s2);border:0;overflow-wrap:anywhere;white-space:normal}
 td[data-label]::before{content:attr(data-label);display:block;color:var(--text-muted);font-size:var(--fs-xs);font-weight:600;margin-bottom:var(--s1)}
 .table-wrap:has(td[data-label]){overflow:visible;border:0;background:none}
}
@media(max-width:600px){
 main a[href],main button,main summary,.scope-popup a,.account-menu a,.breadcrumbs a{min-height:44px;min-width:44px}
 main a[href]{display:inline-flex;align-items:center}.cell,.account-tabs a,.tabbar a{min-width:44px}
 .workspace-main main,.main{overflow-wrap:anywhere}main input,main select,main textarea{min-width:0;max-width:100%}
 .workspace-columns,.sales-columns,.brief-overview,.brief-grid{grid-template-columns:minmax(0,1fr)}
 .filters{display:flex;flex-wrap:wrap}.filters>div{flex:1 1 140px;min-width:0}.range-picker{flex-wrap:wrap}
 .sales-heading{flex-direction:column}.sales-heading h1{max-width:100%}.sales-mode{white-space:normal}
 .feed-card,.feed,.account-tile,.c-panel{min-width:0;max-width:100%}.feed-card header{flex-wrap:wrap}
 .chips{flex-wrap:wrap;overflow:visible}.chip{min-height:44px}.feed-card .feed-foot{flex-wrap:wrap}
 .c-panel a.button,.c-panel a.btn{white-space:normal}
}
/* Search, counters and loading feedback share the same appearance in both shells. */
.scope-popup,.workspace-options{max-height:70vh;overflow:auto;min-width:260px;max-width:calc(100vw - 32px);background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow)}
.scope-popup [role=option],.workspace-options [role=option]{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);color:var(--text);background:var(--surface);white-space:normal;min-height:44px}
.scope-popup [aria-selected=true],.workspace-options [aria-selected=true]{background:var(--surface-2);color:var(--accent)}
.switch-search{width:100%;padding:var(--s2);margin-bottom:var(--s2);min-height:44px}
.nav-count{font-size:var(--fs-xs);font-weight:650;color:var(--text);background:var(--surface-2);border:1px solid var(--line);padding:2px 7px;border-radius:999px;margin-left:auto;min-width:24px;text-align:center}
.scope-loading{display:grid;gap:var(--s4);padding:var(--s5);color:var(--text-muted)}
.skeleton{display:block;height:72px;border-radius:var(--r);background:var(--surface-2);animation:skeleton-pulse 1.2s ease-in-out infinite alternate}
@keyframes skeleton-pulse{to{opacity:.45}}
@media(prefers-reduced-motion:reduce){.skeleton{animation:none}}
.booking-tabs{display:flex;flex-wrap:wrap;gap:var(--s2);margin-bottom:var(--s5)}.booking-tabs a{display:inline-flex;align-items:center;min-height:44px;padding:var(--s2) var(--s4);border:1px solid var(--line);border-radius:var(--r-sm);text-decoration:none}.booking-tabs [aria-current=page]{color:var(--accent-ink);background:var(--accent)}
.invoice-total{font-size:var(--fs-2xl);font-weight:650}
.public-booking,.portal-main,.portal-header,.portal-nav{background:var(--bg);color:var(--text)}
.public-booking .book h1,.portal-main h1{font-family:var(--font);font-size:var(--fs-2xl);font-weight:700;line-height:var(--lh-tight);letter-spacing:-.025em;color:var(--text)}

/* Plain form actions stay recognizable in either theme. */
main button{border:1px solid var(--line)}
main form button:not([type=button]):not(.secondary):not(.ghost):not(.linkish){background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
main form button:not([type=button]):not(.secondary):not(.ghost):not(.linkish):hover{filter:brightness(.93)}
.notice.success{background:var(--ok-bg);color:var(--ok)}