/* ===========================================================================
   Kanvixo — Control Panel, top-bar button and account menu

   Replaces the slide-out drawer. Three surfaces:

     .control-panel-button   the way in, in the top bar, for admins only
     .account-menu           the personal and company links the drawer carried
     .cp-shell               the panel itself: docked nav plus content

   Everything is built on the existing --kx / --primary tokens, so it follows
   the brand theme and the Light / Dark / System control with no extra work.
   =========================================================================== */

:root{
  --cp-nav-w: 268px;
  --cp-line: var(--line, #e6e3ec);
  --cp-paper: #ffffff;
  --cp-ink: var(--ink, #24212a);
  --cp-muted: var(--muted, #6f6b7a);
  --cp-sunk: #f6f5f9;
  --cp-shadow: 0 24px 60px -30px rgba(24, 18, 48, .38);
}
html[data-theme="dark"]{
  --cp-line: rgba(255,255,255,.10);
  --cp-paper: #191826;
  --cp-ink: #eceaf4;
  --cp-muted: #a29db4;
  --cp-sunk: #131220;
  --cp-shadow: 0 24px 60px -26px rgba(0,0,0,.72);
}

/* ------------------------------------------------- the way in, in the top bar */

.app-header .control-panel-button{
  display: inline-flex; align-items: center; gap: 8px;
  height: 34px; padding: 0 14px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--primary, #6750e8) 32%, transparent);
  background: color-mix(in srgb, var(--primary, #6750e8) 10%, transparent);
  color: var(--primary, #6750e8);
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.app-header .control-panel-button b{ font-size: 13px; font-weight: 650; letter-spacing: .005em; }
.app-header .control-panel-button span{ font-size: 13px; line-height: 1; }
.app-header .control-panel-button:hover{
  background: color-mix(in srgb, var(--primary, #6750e8) 18%, transparent);
  border-color: color-mix(in srgb, var(--primary, #6750e8) 55%, transparent);
}
.app-header .control-panel-button.is-active{
  background: var(--primary, #6750e8);
  border-color: var(--primary, #6750e8);
  color: #fff;
}
.app-header .control-panel-button:focus-visible{ outline: 2px solid var(--primary, #6750e8); outline-offset: 2px; }

/* Below this width the full label stops fitting beside everything else, so the
   button keeps its mark and loses its words rather than wrapping the bar. */
@media (max-width: 1180px){
  .app-header .control-panel-button b{
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .app-header .control-panel-button{ padding: 0 11px; }
  .app-header .control-panel-button span{ font-size: 15px; }
}

/* ------------------------------------------------------------- account menu */

.account-menu{ position: relative; display: inline-flex; }
.account-menu > button.avatar{
  border: 0; cursor: pointer; padding: 0;
  font: inherit;
}
.account-menu > button.avatar:focus-visible{ outline: 2px solid var(--primary, #6750e8); outline-offset: 2px; }

.account-menu-panel{
  position: absolute; top: calc(100% + 10px); right: 0;
  z-index: 60;
  width: 296px; max-width: calc(100vw - 24px);
  padding: 8px;
  border: 1px solid var(--cp-line);
  border-radius: 16px;
  background: var(--cp-paper);
  box-shadow: var(--cp-shadow);
  color: var(--cp-ink);
}
.account-menu-panel[hidden]{ display: none; }

.account-menu-identity,
.account-menu-company{
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px;
}
.account-menu-identity{ border-bottom: 1px solid var(--cp-line); }
.account-menu-company{
  margin: 6px 0;
  border-radius: 11px;
  background: var(--cp-sunk);
}
.account-menu-company > span{
  display: inline-grid; place-items: center;
  width: 28px; height: 28px; flex: 0 0 28px;
  border-radius: 9px;
  background: var(--primary, #6750e8); color: #fff;
  font-size: 12px; font-weight: 700;
}
.account-menu-identity b,
.account-menu-company b{ display: block; font-size: 13.5px; line-height: 1.3; }
.account-menu-identity small,
.account-menu-company small{ display: block; font-size: 11.5px; color: var(--cp-muted); }
.account-menu-identity .avatar{ width: 34px; height: 34px; flex: 0 0 34px; }

.account-menu-group{ display: grid; gap: 1px; padding: 4px 0; }
.account-menu-foot{ border-top: 1px solid var(--cp-line); margin-top: 4px; padding-top: 5px; }

.account-menu-panel a,
.account-menu-panel button{
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 8px 10px;
  border: 0; border-radius: 10px;
  background: transparent; color: inherit;
  font: inherit; text-align: left; text-decoration: none;
  cursor: pointer;
}
.account-menu-panel a:hover,
.account-menu-panel button:hover{ background: var(--cp-sunk); }
.account-menu-panel a:focus-visible,
.account-menu-panel button:focus-visible{ outline: 2px solid var(--primary, #6750e8); outline-offset: -2px; }
.account-menu-panel a > span,
.account-menu-panel button > span{
  display: inline-grid; place-items: center;
  width: 26px; height: 26px; flex: 0 0 26px;
  border-radius: 8px;
  background: var(--cp-sunk); color: var(--cp-muted);
  font-size: 13px;
}
.account-menu-panel a > div, .account-menu-panel button > div{ min-width: 0; }
.account-menu-panel b{ display: block; font-size: 13px; font-weight: 600; }
.account-menu-panel em{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-menu-panel em{ display: block; font-size: 11px; font-style: normal; color: var(--cp-muted); }

/* ------------------------------------------------------------- panel shell */

.cp-shell{
  display: grid;
  grid-template-columns: var(--cp-nav-w) minmax(0, 1fr);
  align-items: start;
  /* --app-header-h is measured and set by app-shell.js, because the header's
     height depends on the brand logo and cannot be assumed. The fallback is the
     stock height, used only for the instant before the script runs. */
  min-height: calc(100vh - var(--app-header-h, 72px));
}
.cp-content{ min-width: 0; }

.cp-nav{
  position: sticky;
  /* The header pins on Control Panel pages (see body.cp-active below), so the
     rail sits directly under it. --app-header-h is measured from the real
     header rather than assumed; the fallback covers the instant before the
     script runs. */
  top: var(--app-header-h, 72px);
  align-self: start;
  max-height: calc(100vh - var(--app-header-h, 72px));
  overflow-y: auto;
  scrollbar-gutter: stable;
  display: flex; flex-direction: column;
  padding: 18px 14px 14px;
  border-right: 1px solid var(--cp-line);
  background: var(--cp-paper);
}
.cp-nav-head{
  display: flex; align-items: center; gap: 10px;
  padding: 0 6px 14px;
  border-bottom: 1px solid var(--cp-line);
}
.cp-nav-mark{
  display: inline-grid; place-items: center;
  width: 32px; height: 32px; flex: 0 0 32px;
  border-radius: 10px;
  background: var(--primary, #6750e8); color: #fff;
  font-size: 15px;
}
.cp-nav-head b{ display: block; font-size: 14px; }
.cp-nav-head small{ display: block; font-size: 11px; color: var(--cp-muted); }
.cp-nav-close{ display: none; }

.cp-nav nav{ display: grid; gap: 16px; padding: 14px 0; }
.cp-nav-group{ display: grid; gap: 2px; }
.cp-nav-group > small{
  padding: 0 8px 4px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .1em;
  color: var(--cp-muted);
}
.cp-nav-item{
  display: flex; align-items: center; gap: 10px;
  min-width: 0;                 /* let the hint ellipse instead of overflowing */
  padding: 8px 9px;
  border-radius: 10px;
  color: var(--cp-ink); text-decoration: none;
}
.cp-nav-item:hover{ background: var(--cp-sunk); }
.cp-nav-item:focus-visible{ outline: 2px solid var(--primary, #6750e8); outline-offset: -2px; }
.cp-nav-item > span{
  display: inline-grid; place-items: center;
  width: 26px; height: 26px; flex: 0 0 26px;
  border-radius: 8px;
  background: var(--cp-sunk); color: var(--cp-muted);
  font-size: 13px;
}
/* Without this the text column refuses to shrink and the hint runs off the
   edge of the rail instead of ellipsing. */
.cp-nav-item > div{ min-width: 0; }
.cp-nav-item b{ display: block; font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-nav-item em{
  display: block; font-size: 11px; font-style: normal; color: var(--cp-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cp-nav-item.is-active{
  background: color-mix(in srgb, var(--primary, #6750e8) 12%, transparent);
  color: var(--primary, #6750e8);
}
.cp-nav-item.is-active > span{ background: var(--primary, #6750e8); color: #fff; }
.cp-nav-item.is-active em{ color: color-mix(in srgb, var(--primary, #6750e8) 72%, var(--cp-muted)); }

.cp-nav footer{ margin-top: auto; padding-top: 12px; border-top: 1px solid var(--cp-line); }
.cp-nav-exit{
  display: block; padding: 8px 9px;
  border-radius: 10px;
  font-size: 12.5px; color: var(--cp-muted); text-decoration: none;
}
.cp-nav-exit:hover{ background: var(--cp-sunk); color: var(--cp-ink); }

.cp-nav-toggle{
  display: none;
  margin: 14px 0 0 16px;
  height: 36px; padding: 0 14px;
  border: 1px solid var(--cp-line); border-radius: 999px;
  background: var(--cp-paper); color: var(--cp-ink);
  font: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer;
}

/* The nav is tall. Below this width it becomes a disclosure rather than a
   column, so it does not push every panel page down by a full screen. */
@media (max-width: 900px){
  .cp-shell{ grid-template-columns: minmax(0, 1fr); }
  .cp-nav-toggle{ display: inline-block; }
  .cp-nav{
    position: fixed; inset: 0 auto 0 0;
    z-index: 55;
    width: min(320px, 86vw);
    transform: translateX(-100%);
    transition: transform .2s ease;
    box-shadow: var(--cp-shadow);
  }
  body.cp-nav-open .cp-nav{ transform: translateX(0); }
  .cp-nav-close{
    display: block;
    position: absolute; top: 14px; right: 12px;
    width: 30px; height: 30px;
    border: 0; border-radius: 8px;
    background: var(--cp-sunk); color: var(--cp-muted);
    font-size: 13px; cursor: pointer;
  }
}
@media (prefers-reduced-motion: reduce){
  .cp-nav{ transition: none; }
  .app-header .control-panel-button{ transition: none; }
}

/* ------------------------------------------------------- the overview page */

.cp-page{ padding: 26px 30px 60px; max-width: 1180px; }
.cp-page-head{
  display: flex; align-items: flex-end; justify-content: space-between; gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.cp-page-head h1{ margin: 0; font-size: 26px; letter-spacing: -.01em; }
.cp-page-head p{ margin: 6px 0 0; color: var(--cp-muted); font-size: 14px; }

.cp-alert{
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 22px; padding: 13px 16px;
  border: 1px solid color-mix(in srgb, #d4831f 40%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, #d4831f 10%, transparent);
  font-size: 13.5px;
}
.cp-alert b{ flex: 0 0 auto; }
.cp-alert span{ flex: 1 1 240px; color: var(--cp-muted); }
.cp-alert a{ flex: 0 0 auto; font-weight: 600; color: var(--primary, #6750e8); }

.cp-stats{
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
  margin-bottom: 32px;
}
.cp-stat{
  padding: 14px 16px;
  border: 1px solid var(--cp-line); border-radius: 14px;
  background: var(--cp-paper);
}
.cp-stat small{ display: block; font-size: 11.5px; color: var(--cp-muted); }
.cp-stat b{ display: block; margin: 5px 0 3px; font-size: 24px; letter-spacing: -.02em; }
.cp-stat em{ display: block; font-size: 11.5px; font-style: normal; color: var(--cp-muted); }

.cp-group{ margin-bottom: 30px; }
.cp-group h2{ margin: 0 0 12px; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--cp-muted); }
.cp-cards{ display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); }
.cp-card{
  display: block; padding: 16px;
  border: 1px solid var(--cp-line); border-radius: 14px;
  background: var(--cp-paper); color: var(--cp-ink); text-decoration: none;
  transition: border-color .15s ease, transform .15s ease;
}
.cp-card:hover{ border-color: color-mix(in srgb, var(--primary, #6750e8) 45%, transparent); transform: translateY(-1px); }
.cp-card:focus-visible{ outline: 2px solid var(--primary, #6750e8); outline-offset: 2px; }
.cp-card > span{
  display: inline-grid; place-items: center;
  width: 32px; height: 32px; margin-bottom: 10px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--primary, #6750e8) 12%, transparent);
  color: var(--primary, #6750e8);
  font-size: 15px;
}
.cp-card b{ display: block; font-size: 14px; }
.cp-card em{ display: block; margin-top: 3px; font-size: 12px; font-style: normal; color: var(--cp-muted); }
@media (prefers-reduced-motion: reduce){ .cp-card{ transition: none; } .cp-card:hover{ transform: none; } }

/* ===========================================================================
   Pricing & plans
   Each plan is a closed row that opens into its own form, so a page of six
   plans is still a page you can scan.
   =========================================================================== */

.pa-list{ display: grid; gap: 10px; margin-bottom: 34px; }

.pa-plan{
  border: 1px solid var(--cp-line); border-radius: 14px;
  background: var(--cp-paper);
  overflow: hidden;
}
.pa-plan.is-archived{ opacity: .72; }
.pa-plan > details > summary{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto 22px;
  align-items: center; gap: 16px;
  padding: 15px 18px;
  cursor: pointer;
  list-style: none;
}
.pa-plan > details > summary::-webkit-details-marker{ display: none; }
.pa-plan > details > summary:hover{ background: var(--cp-sunk); }
.pa-plan > details[open] > summary{ border-bottom: 1px solid var(--cp-line); }
.pa-plan > details[open] .pa-plan-open{ transform: rotate(180deg); }
.pa-plan-open{ color: var(--cp-muted); transition: transform .18s ease; }

.pa-plan-name{ display: flex; align-items: center; gap: 9px; flex-wrap: wrap; min-width: 0; }
.pa-plan-name b{ font-size: 15px; }
.pa-plan-name code{
  padding: 2px 7px; border-radius: 6px;
  background: var(--cp-sunk); color: var(--cp-muted);
  font-size: 11.5px;
}
.pa-tag{
  padding: 2px 8px; border-radius: 999px;
  font-size: 10.5px; font-style: normal; font-weight: 700; letter-spacing: .04em;
}
.pa-tag-off{ background: color-mix(in srgb, var(--cp-muted) 18%, transparent); color: var(--cp-muted); }
.pa-tag-star{ background: color-mix(in srgb, var(--primary, #6750e8) 15%, transparent); color: var(--primary, #6750e8); }
.pa-tag-sale{ background: color-mix(in srgb, #1d8a5a 16%, transparent); color: #1d8a5a; }
html[data-theme="dark"] .pa-tag-sale{ color: #56c894; }

.pa-plan-price{ text-align: right; white-space: nowrap; }
.pa-plan-price b{ font-size: 17px; letter-spacing: -.01em; }
.pa-plan-price em{ font-size: 11.5px; font-style: normal; color: var(--cp-muted); }
.pa-plan-price span{ display: block; font-size: 11.5px; color: var(--cp-muted); }
.pa-plan-use{ font-size: 12px; color: var(--cp-muted); white-space: nowrap; }

.pa-form{ padding: 18px; display: grid; gap: 16px; }
.pa-grid{ display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.pa-field{ display: grid; gap: 5px; min-width: 0; }
.pa-field.pa-wide{ grid-column: 1 / -1; }
.pa-field > span{ font-size: 12px; font-weight: 600; color: var(--cp-ink); }
.pa-field > span em{ font-style: normal; font-weight: 400; color: var(--cp-muted); }
.pa-field input,
.pa-field select,
.pa-field textarea{
  width: 100%; padding: 9px 11px;
  border: 1px solid var(--cp-line); border-radius: 9px;
  background: var(--cp-paper); color: var(--cp-ink);
  font: inherit; font-size: 13.5px;
}
.pa-field textarea{ resize: vertical; line-height: 1.5; }
.pa-field input:focus, .pa-field select:focus, .pa-field textarea:focus{
  outline: 2px solid color-mix(in srgb, var(--primary, #6750e8) 55%, transparent);
  outline-offset: -1px; border-color: transparent;
}

.pa-money{
  margin: 0; padding: 14px 16px;
  border: 1px solid var(--cp-line); border-radius: 12px;
  background: var(--cp-sunk);
  display: grid; gap: 12px;
}
.pa-money legend{ padding: 0 6px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--cp-muted); }
.pa-hint{ margin: 0; font-size: 11.5px; line-height: 1.5; color: var(--cp-muted); }

.pa-actions{
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding-top: 4px;
}
.pa-actions-right{ margin-left: auto; display: flex; gap: 8px; }
.pa-check{ display: inline-flex; align-items: center; gap: 7px; font-size: 13px; cursor: pointer; }
.pa-check input{ width: 16px; height: 16px; accent-color: var(--primary, #6750e8); }

.pa-archive{
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 18px;
  border-top: 1px solid var(--cp-line);
  background: var(--cp-sunk);
}
.pa-archive small{ font-size: 11.5px; color: var(--cp-muted); }

.pa-new{
  padding: 4px 0 0;
  border-top: 1px solid var(--cp-line);
}
.pa-new h2{ margin: 22px 0 0; padding: 0 18px; font-size: 15px; }
.pa-new .pa-form{ border: 1px solid var(--cp-line); border-radius: 14px; background: var(--cp-paper); margin-top: 12px; }

@media (max-width: 720px){
  .pa-plan > details > summary{ grid-template-columns: minmax(0, 1fr) 22px; row-gap: 8px; }
  .pa-plan-price{ text-align: left; grid-column: 1; }
  .pa-plan-use{ grid-column: 1; }
}
@media (prefers-reduced-motion: reduce){ .pa-plan-open{ transition: none; } }

/* The public pricing card gains a struck-through "was" price and an annual
   line, now that both come from the database. */
.public-plans .plan-price s{
  margin-right: 8px;
  color: color-mix(in srgb, currentColor 55%, transparent);
  font-weight: 500;
  text-decoration-thickness: 2px;
}
.public-plans .plan-price em{ font-size: .5em; font-style: normal; font-weight: 500; opacity: .7; }
.public-plans .plan-annual{ display: block; margin: 4px 0 2px; font-size: 12.5px; opacity: .72; }
.public-plans-empty{ text-align: center; padding: 32px; opacity: .7; }

/* ===========================================================================
   Checkout
   A page with one job. Everything that is not the amount, the plan and the pay
   button is out of the way, because a checkout that invites a second thought
   loses the sale.
   =========================================================================== */

body.checkout-body .checkout{
  display: grid; place-items: start center;
  padding: 48px 20px 80px;
  min-height: 60vh;
}
.checkout-card{
  width: min(520px, 100%);
  padding: 32px;
  border: 1px solid var(--cp-line); border-radius: 20px;
  background: var(--cp-paper);
  box-shadow: var(--cp-shadow);
  text-align: center;
}
.checkout-card header{ margin-bottom: 24px; }
.checkout-lock{ font-size: 24px; }
.checkout-card h1{ margin: 10px 0 8px; font-size: 22px; letter-spacing: -.01em; }
.checkout-card p{ margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--cp-muted); }
.checkout-test{
  padding: 1px 7px; border-radius: 999px;
  background: color-mix(in srgb, #d4831f 18%, transparent); color: #b46a10;
  font-style: normal; font-size: 11px; font-weight: 700;
}
html[data-theme="dark"] .checkout-test{ color: #e8a84b; }

.checkout-summary{
  margin: 0 0 22px; padding: 16px 18px;
  border: 1px solid var(--cp-line); border-radius: 14px;
  background: var(--cp-sunk);
  text-align: left;
  display: grid; gap: 9px;
}
.checkout-summary > div{ display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.checkout-summary dt{ font-size: 12.5px; color: var(--cp-muted); }
.checkout-summary dd{ margin: 0; font-size: 13.5px; font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.checkout-summary code{ font-size: 12px; }
.checkout-total{ padding-top: 9px; border-top: 1px solid var(--cp-line); }
.checkout-total dt{ font-weight: 600; color: var(--cp-ink); }
.checkout-total dd{ font-size: 20px; letter-spacing: -.02em; }

.checkout-go{ width: 100%; padding: 13px; font-size: 15px; }
.checkout-methods{ margin: 12px 0 0 !important; font-size: 11.5px; }
.checkout-note{ margin: 14px 0 0 !important; font-size: 12.5px; min-height: 1.2em; }
.checkout-note.is-bad{ color: #c0392b; }
html[data-theme="dark"] .checkout-note.is-bad{ color: #ff9a8e; }
.checkout-cancel{ display: inline-block; margin-top: 18px; font-size: 12.5px; color: var(--cp-muted); }

.checkout-badge{
  display: inline-grid; place-items: center;
  width: 52px; height: 52px; margin-bottom: 8px;
  border-radius: 999px;
  font-size: 24px; color: #fff;
}
.checkout-badge.ok{ background: #1d8a5a; }
.checkout-badge.bad{ background: #c0392b; }
.checkout-badge.wait{ background: #d4831f; }
.checkout-result .button{ display: block; width: 100%; margin-top: 18px; }

/* Payments admin: the routing card */
.pay-routing-now{ margin: 0 0 14px; font-size: 13px; line-height: 1.6; }
.pay-hint{ margin: 4px 0 12px; font-size: 11.5px; line-height: 1.55; opacity: .75; }
.pay-routing input[readonly]{ font-size: 12px; opacity: .85; cursor: pointer; }
/* The webhook block is a second subject inside the same card; without this it
   crowds the Save button above it. */
.pay-routing h2 + .pay-hint{ margin-top: 2px; }
.pay-routing button + h2{ margin-top: 26px; }


/* ---------------------------------------------------------------------------
   Company switcher

   Two fixed 1fr rows with no line-height meant the company name was clipped by
   its own row whenever the brand font ran taller than the stock one. The rows
   size to their content instead, and a long name ellipses rather than shoving
   the rest of the bar sideways. The top bar is the only navigation now, so it
   has to hold up under any brand font and any company name.
   --------------------------------------------------------------------------- */
.app-header .company-switcher{
  grid-template-rows: auto auto;
  row-gap: 1px;
  align-items: center;
  padding-block: 6px;
  min-width: 0;
  max-width: 280px;
}
.app-header .company-switcher select{
  min-width: 0; width: 100%;
  height: auto; min-height: 0;
  line-height: 1.35;
  text-overflow: ellipsis;
}
.app-header .company-switcher small{
  min-width: 0;
  line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   Dashboard at phone width

   The workspace already collapses to one column, but its content column keeps
   a min-content width set by the action bar, so the page scrolled sideways by
   about 105px on a 390px screen. Letting the grid track and its children shrink
   is what actually stops that — `grid-template-columns: 1fr` alone does not,
   because a grid item's default min-width is auto.

   Pre-existing, not introduced by the Control Panel work, but the dashboard is
   the first screen anyone sees and it is a two-line fix.
   --------------------------------------------------------------------------- */
@media (max-width: 900px){
  body .workspace{ grid-template-columns: minmax(0, 1fr); }
  body .workspace > .workspace-content,
  body .workspace > .workspace-nav{ min-width: 0; }
  body .workspace-content .ws-actionbar,
  body .workspace-content .ws-tabs,
  body .workspace-content .ws-greeting{ min-width: 0; flex-wrap: wrap; }
  body .workspace-content .ws-greeting b,
  body .workspace-content .ws-greeting small{ overflow-wrap: anywhere; }
}


/* ---------------------------------------------------------------------------
   A header that stays put inside the Control Panel

   Everywhere else the app header scrolls away with the page, which is fine — a
   dashboard is a single column and the top comes back quickly. The Control
   Panel is not: the rail is pinned, sections are long, and scrolling took the
   Control Panel button, the theme toggle and the account menu away with it.

   Scoped to body.cp-active on purpose, so the rest of the app keeps the
   behaviour it already had.
   --------------------------------------------------------------------------- */
body.cp-active .app-header{
  position: sticky;
  top: 0;
  z-index: 60;                 /* above the rail, below the mobile rail overlay */

  /* app.css leaves the dark header 4% translucent. That never mattered while it
     scrolled away; pinned, form labels and headings were legible straight
     through the navigation. Blurring the backdrop turns those 4% into a smear
     of colour rather than readable text, which is what makes the translucency
     read as intentional instead of broken. */
  backdrop-filter: saturate(160%) blur(16px);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
}
/* No backdrop-filter (older Firefox, some embedded browsers): make it opaque
   instead, because unreadable chrome is worse than a flat one. The colours are
   app.css's own, so the header still matches the rest of the app. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  body.cp-active .app-header{ background-color: #fffdfb; }
  html[data-theme="dark"] body.cp-active .app-header{ background-color: #151d22; }
}
@media (prefers-reduced-transparency: reduce){
  body.cp-active .app-header{
    backdrop-filter: none; -webkit-backdrop-filter: none;
    background-color: #fffdfb;
  }
  html[data-theme="dark"] body.cp-active .app-header{ background-color: #151d22; }
}

/* Flash messages must not tuck behind the pinned header. */
body.cp-active .flash{ z-index: 70; }

/* The mobile rail is a fixed overlay; it goes over the header rather than
   under it, and closes on its own after a tap. */
@media (max-width: 900px){
  body.cp-active .cp-nav{ z-index: 65; }
}


/* ===========================================================================
   Control Panel as a fixed app shell

   The page itself does not scroll. The header and the section rail hold still
   and only the content column moves — an application layout rather than a
   document one, which is what an admin surface with a permanent rail wants.

   Desktop only, on purpose. A fixed-height shell on a phone fights the
   browser's own collapsing address bar and the on-screen keyboard, so below
   901px the panel goes back to ordinary page scrolling with the rail as a
   drawer. `dvh` covers the browser chrome where it is supported.
   =========================================================================== */

@media (min-width: 901px){
  body.cp-active{
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;          /* the shell scrolls its parts, not the page */
  }

  body.cp-active .app-header{
    flex: 0 0 auto;
    position: static;          /* the flex column holds it now; sticky is moot */
    z-index: 60;
    /* Nothing passes underneath it any more, so the blur has no work to do. */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  body.cp-active .cp-shell{
    flex: 1 1 auto;
    min-height: 0;             /* without this the shell grows and the page scrolls */
    height: auto;
    overflow: hidden;
    align-items: stretch;      /* so both columns can be full height */
  }

  /* Each column scrolls on its own, and neither hands its overscroll to the
     page — a long section list and a long form are independent. */
  body.cp-active .cp-nav{
    position: static;
    height: 100%;
    max-height: none;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  body.cp-active .cp-content{
    height: 100%;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}