/* The admin center's shell (public/manage/index.html): a header, the
   sidebar of the main path with Advanced folded under it, and the page.
   The pages themselves are the shared ones (workspace.js), dressed by
   app.css as they are in the inbox; only the frame is set here. Colours
   are design.css's tokens, so both themes follow the inbox's. */
body.manage { height: auto; min-height: 100%; overflow-x: hidden; }

.mg-skip { position: absolute; left: -9999px; top: 8px; z-index: 50; padding: 8px 12px;
  border-radius: 8px; background: var(--surface); color: var(--text); }
.mg-skip:focus { left: 8px; }

.mg-top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 12px;
  min-height: 56px; padding: 8px 16px; padding-top: max(8px, env(safe-area-inset-top));
  background: var(--surface); border-bottom: 1px solid var(--border); }
.mg-title { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.mg-brand { font-weight: 500; font-size: 16px; }
.mg-ws { color: var(--text-2); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mg-back { flex: none; text-decoration: none; }
/* The Android app's way out (manage.js IN_APP): 44px, the text colour. */
.mg-close { display: inline-flex; flex: none; width: 44px; height: 44px; margin-right: -6px;
  border-radius: 12px; align-items: center; justify-content: center; color: var(--text); }
.mg-close svg { width: 24px; height: 24px; fill: currentColor; }
.mg-close:hover { background: var(--surface-2); }
.mg-close:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* The side and the page, centred together on a wide desk (Trello 76,
   docs/admin-layout.md §7 decision 2): the side's 320 px and a wide page
   beside it, growing with the window from 840 px up to a shell of
   1440 px, where the page is about 1090 px wide. */
.mg-shell { display: flex; align-items: flex-start; max-width: 1440px; margin: 0 auto; }

/* The page ground of Settings, behind the side and the page
   (design.css --set-page). */
body.manage { background: var(--set-page); }
.mg-top { background: var(--set-page); }

/* The side, on a desk: the groups of Home as compact rows, under the
   search, as the mockup has them (docs/admin-layout/after/desk-*.png);
   each row's one-line summary shows from 1280 px, where there is room. */
/* Its width follows the window, 272 px at 840 up to 320 px from about
   1230, so a small desk keeps a page worth reading beside it; a rule
   down its edge parts it from the page (Trello 76). */
.mg-nav { background: transparent; position: sticky; top: 57px; flex: none; width: clamp(272px, 26vw, 320px);
  max-height: calc(100vh - 57px); overflow-y: auto; padding: 12px 12px 24px; box-sizing: border-box;
  border-right: 1px solid var(--border); }
.mg-nav.ws-pixel:not(#settings) .set-group { margin-bottom: 12px; }
.mg-nav.ws-pixel:not(#settings) .cat-row { min-height: 48px; padding: 4px 12px; gap: 12px; text-decoration: none; color: var(--text); }
.mg-nav.ws-pixel:not(#settings) .cat-ic[data-tone] { width: 32px; height: 32px; }
.mg-nav.ws-pixel:not(#settings) .cat-ic[data-tone] svg { width: 18px; height: 18px; }
/* Outweighs app.css's .ws-pixel:not(#settings) row rules (an id each). */
#mg-nav.mg-nav.ws-pixel .cat-body > span { display: none; }
@media (min-width: 1280px) {
  #mg-nav.mg-nav.ws-pixel .mg-groups .cat-body > .mg-sum { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
#mg-nav.mg-nav.ws-pixel .mg-find .cat-body > span { display: block; }
.mg-nav.ws-pixel:not(#settings) .cat-row[aria-current="page"] { background: var(--set-selected); }
.mg-nav .cat-row[aria-current="page"] .cat-body b { font-weight: 500; }
.mg-nav.ws-pixel:not(#settings) .settings-search { margin-bottom: 12px; min-height: 48px; }
.mg-nav.mg-finding > .mg-groups { display: none; }
.mg-finds .settings-found { padding: 4px 18px 6px; }

.mg-main { flex: 1; min-width: 0; padding: 8px 16px 48px; outline: none; }
.mg-banner { max-width: 1100px; margin: 8px auto 12px; padding: 10px 14px; border-radius: 12px; background: var(--warn-soft);
  color: var(--text); box-sizing: border-box; }
.mg-gate { max-width: 520px; margin: 48px auto; padding: 24px; border-radius: 20px;
  background: var(--card); border: 1px solid var(--border); }
.mg-gate h1 { margin: 0 0 8px; font-size: 20px; }
.mg-gate p { margin: 0 0 16px; color: var(--text-2); }
.mg-gate .btn { text-decoration: none; display: inline-flex; }

/* The shared pages, in Settings' look (each page's round Back and large
   title, app.css .ws-pixel), on a wide page: up to 1100 px, the rows and
   tables across it, its help text wrapped to a line one can read
   (app.css, .ws-pixel's readable measure). */
.manage .settings { overflow: visible; height: auto; }
.manage .settings-content { max-width: 1100px; margin: 0 auto; }
.manage #ws-layer a.cat-row { color: var(--text); text-decoration: none; }
.manage #ws-layer .cat-head { position: static; display: flex; align-items: center; }
/* Home needs no head: the bar above names the admin center. */
.manage #cat-workspace > .cat-head { display: none; }
/* A page shown under another (Blocked and opt-outs): its name as a
   section's, and no Back of its own. */
#ws-layer .settings-cat[data-mg-stack] > .cat-head { margin: 0; padding: 0; }
#ws-layer .settings-cat[data-mg-stack] > .cat-head :is(.cat-back, #mg-none) { display: none; }
/* Workspace's inbox settings name their own sections. */
#ws-layer #cat-workspace-messaging[data-mg-stack] > .cat-head { display: none; }
#ws-layer .settings-cat[data-mg-stack] > .cat-head h2 { font: 500 14px var(--ui); color: var(--primary); padding: 16px 18px 6px; }
.manage .btn { text-decoration: none; }
/* A page that is part of a shared page shows only its own cards
   (manage.js showParts). */
.manage .mg-off { display: none !important; }
.manage .mg-home-search { margin-bottom: 16px; }
.manage #cat-workspace.mg-finding > :is(#ov-attention-card, #ov-groups) { display: none; }

/* Easy to read on a computer (Trello 76): on a desk the page's main
   text is 15-16 px (titles 16, the line under them, help text and the
   section heads 15), the groups a little further apart, and a run of
   rows no wider than 880 px, so a row's name and its value or switch
   stay near each other; a card that holds a table (a phone system's
   reported calls, deliveries, Recent changes) takes the page's width. */
@media (min-width: 840px) {
  .manage #ws-layer { --set-group-gap: 24px; }
  .manage #ws-layer :is(.cat-row .cat-body > span, .setting .label > span, .ws-lede, .field-hint, .head-sub) { font-size: 15px; }
  .manage #ws-layer :is(.subhead, .ws-card-title, .sp-sub) { font-size: 15px; }
  .manage #ws-layer :is(.set-group, .settings-group, .ws-card):not(:has(table)) { max-width: 880px; }
  .manage .mg-main { padding-left: 24px; padding-right: 24px; }
}
@media (min-width: 840px) {
  /* The side is the way between pages: a page one step in keeps its Back. */
  body.manage:not(.mg-deep) #ws-layer .settings-cat[data-mg-root] > .cat-head :is(.cat-back, #mg-none) { display: none; }
  .manage .mg-home-search, .manage #mg-home-finds { display: none !important; }
}
/* A phone, or a narrow window: one column. Home is the way in, and each
   page's Back the way out. */
@media (max-width: 839px) {
  .mg-nav { display: none; }
  .mg-top { padding-left: 16px; }
  .mg-main { padding: 4px 16px 40px; }
  .mg-back { padding-left: 12px; padding-right: 12px; }
}
/* Broadcasts is the inbox's page too; here it has no lede paragraph
   (docs/admin-layout.md §2.3): what it does is said where it is sent. */
#ws-layer #cat-broadcasts .group > .ws-lede:first-child { display: none; }