/**
 * The beta surfaces: the introduction, the usage panel, feedback, and Admin.
 *
 * A separate file for the same reason `mobile.css` is one — these are four
 * COMPOSITIONS that arrived together, not a tail of overrides on existing
 * components. They use the same tokens as everything else: no new colours, no
 * new type scale, no second visual language. Admin is denser than the rest of
 * Life OS and spends its difference on information, not on decoration.
 */

/* ══ The beta mark ═══════════════════════════════════════════════════════
 *
 * Small, quiet, and next to the name rather than across the top of the screen.
 * It explains the rough edges without being the first thing anybody reads —
 * and it is a shortcut to feedback, because the moment you remember you are
 * on a beta is usually the moment you have something to say.
 */
.beta-tag{
  display:inline-flex; align-items:center;
  margin-left:8px; padding:1px 6px;
  font-size:9.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--accent-pale);
  background:rgba(var(--accent-rgb),.13);
  border:1px solid rgba(var(--accent-rgb),.28);
  border-radius:999px;
  cursor:pointer; user-select:none;
  transition:background var(--t-hover), color var(--t-hover);
}
.beta-tag:hover,.beta-tag:focus-visible{
  background:rgba(var(--accent-rgb),.22); color:#fff; outline:none;
}
.beta-tag-m{ margin-left:6px; }

/* ══ The introduction ════════════════════════════════════════════════════ */

.bi-scrim{
  position:fixed; inset:0; z-index:120;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  /* The background covers the WHOLE viewport, including behind a phone's
     browser chrome. The previous version painted a gradient on a centred box
     and left black at the edges — which reads as a rendering failure rather
     than as a design. */
  background:
    radial-gradient(1100px 620px at 50% -10%, rgba(var(--accent-rgb),.20), transparent 70%),
    radial-gradient(760px 520px at 88% 110%, rgba(var(--accent-deep-rgb),.16), transparent 72%),
    var(--app-bg-flat);
  animation:bi-in var(--d-base) var(--e-out);
}
@keyframes bi-in{ from{ opacity:0 } to{ opacity:1 } }

.bi{
  max-width:820px; margin:0 auto;
  padding:clamp(32px,8vh,88px) clamp(20px,5vw,40px) clamp(40px,10vh,96px);
  display:flex; flex-direction:column; gap:clamp(24px,4vh,40px);
}
.bi-head{ text-align:center; display:flex; flex-direction:column; gap:12px; }
.bi-eyebrow{
  margin:0; font-size:12px; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--accent-pale);
}
.bi-h{
  margin:0; font-size:clamp(30px,6vw,46px); line-height:1.08; letter-spacing:-.02em;
  background:var(--name-grad); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:var(--text);
}
.bi-lede{
  margin:0 auto; max-width:56ch;
  font-size:clamp(15px,2.4vw,17px); line-height:1.62; color:var(--text-2);
}

.bi-cards{ display:grid; gap:14px; }
@media (min-width:720px){ .bi-cards{ grid-template-columns:1fr 1fr; } }

.bi-card{
  padding:20px 22px 22px;
  background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012));
  border:1px solid var(--border); border-radius:16px;
  display:flex; flex-direction:column; gap:9px;
}
.bi-card p{ margin:0; font-size:14px; line-height:1.62; color:var(--text-2); }
.bi-kicker{
  font-size:10.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent-pale);
}
.bi-card-h{ margin:0; font-size:17px; line-height:1.3; color:var(--text); letter-spacing:-.01em; }

.bi-foot{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.bi-cta{ padding:13px 26px; font-size:15px; }

/* ══ AI usage ════════════════════════════════════════════════════════════ */

.use-panel{ display:flex; flex-direction:column; gap:10px; width:100%; }

.use-headline{ display:flex; align-items:baseline; gap:9px; flex-wrap:wrap; }
.use-big{ font-size:30px; font-weight:650; letter-spacing:-.02em; color:var(--text); }
.use-of{ font-size:14px; color:var(--text-2); }
.use-pct{
  margin-left:auto; font-size:13px; font-weight:650; color:var(--accent-pale);
  font-variant-numeric:tabular-nums;
}

.use-bar{
  height:8px; border-radius:999px; overflow:hidden;
  background:rgba(255,255,255,.06);
}
.use-bar>i{
  display:block; height:100%; border-radius:999px;
  background:var(--brand);
  transition:width var(--t-select);
}
/* Amber only when it means something, red only when the assistant has
   actually stopped. Red for "nearly there" trains people to ignore red. */
.use-panel.is-notice .use-bar>i{ background:linear-gradient(180deg,#D9A93A,#C08A20); }
.use-panel.is-warn   .use-bar>i{ background:linear-gradient(180deg,#FFC44D,#E09B18); }
.use-panel.is-stop   .use-bar>i{ background:linear-gradient(180deg,#FF8A93,#E0424E); }

.use-left{ margin:0; font-size:13.5px; color:var(--text); }
.use-period{ margin:0; font-size:12.5px; color:var(--muted); }

.use-msg{
  margin:4px 0 0; padding:11px 13px; border-radius:12px;
  font-size:13.5px; line-height:1.55;
  background:rgba(255,255,255,.04); border:1px solid var(--border); color:var(--text-2);
}
.use-msg.is-notice{ border-color:rgba(255,196,77,.22); }
.use-msg.is-warn{
  background:rgba(255,196,77,.09); border-color:rgba(255,196,77,.34); color:#F6DFA8;
}
.use-msg.is-stop{
  background:rgba(255,100,110,.09); border-color:rgba(255,100,110,.34); color:#FFC3C7;
}

.use-details{ margin-top:4px; }
.use-details>summary{
  cursor:pointer; font-size:12.5px; color:var(--text-2);
  padding:6px 0; list-style:none;
}
.use-details>summary::-webkit-details-marker{ display:none; }
.use-details>summary::before{ content:'▸ '; color:var(--muted); }
.use-details[open]>summary::before{ content:'▾ '; }
.use-detail-body{ display:flex; flex-direction:column; gap:12px; padding-top:6px; }

.use-facts{ display:grid; gap:2px; }
.use-fact{
  display:flex; justify-content:space-between; gap:12px;
  padding:6px 0; border-bottom:1px solid var(--hairline); font-size:13px;
}
.use-fact:last-child{ border-bottom:none; }
.use-fact-k{ color:var(--text-2); }
.use-fact-v{ color:var(--text); font-variant-numeric:tabular-nums; }

.use-jobs{ display:grid; gap:2px; }
.use-job{
  display:grid; grid-template-columns:1fr auto auto; gap:10px; align-items:baseline;
  padding:6px 0; border-bottom:1px solid var(--hairline); font-size:13px;
}
.use-job:last-child{ border-bottom:none; }
.use-job-n{ color:var(--text-2); }
.use-job-c{ color:var(--muted); font-size:12px; }
.use-job-$,.use-job-\$ { color:var(--text); font-variant-numeric:tabular-nums; }
.use-fine{ margin:0; font-size:12px; line-height:1.55; color:var(--muted); }

.use-notice{
  margin:0 0 12px; padding:10px 13px; border-radius:12px; font-size:13px;
  background:rgba(255,255,255,.04); border:1px solid var(--border); color:var(--text-2);
}
.use-notice.is-warn{ background:rgba(255,196,77,.09); border-color:rgba(255,196,77,.32); color:#F6DFA8; }
.use-notice.is-stop{ background:rgba(255,100,110,.09); border-color:rgba(255,100,110,.32); color:#FFC3C7; }

/* ══ Feedback ════════════════════════════════════════════════════════════ */

.fb{ display:flex; flex-direction:column; gap:12px; width:100%; }
.fb-h{ margin:0; font-size:18px; letter-spacing:-.01em; color:var(--text); }
.fb-p{ margin:0; font-size:14px; line-height:1.6; color:var(--text-2); }
.fb-actions{ display:flex; gap:9px; flex-wrap:wrap; }
.fb-btn{ flex:1 1 190px; justify-content:center; }
.fb-missing{
  margin:0; padding:11px 13px; border-radius:12px; font-size:13px; line-height:1.55;
  background:rgba(255,196,77,.08); border:1px solid rgba(255,196,77,.3); color:#F6DFA8;
}
.fb-missing code{ font-size:12px; }
.fb-tech>summary{
  cursor:pointer; font-size:12.5px; color:var(--text-2); padding:6px 0; list-style:none;
}
.fb-tech>summary::-webkit-details-marker{ display:none; }
.fb-tech>summary::before{ content:'▸ '; color:var(--muted); }
.fb-tech[open]>summary::before{ content:'▾ '; }
.fb-tech-note{ margin:0 0 8px; font-size:12px; line-height:1.55; color:var(--muted); }
.fb-tech-pre{
  margin:0 0 10px; padding:11px 13px; border-radius:10px;
  background:rgba(0,0,0,.24); border:1px solid var(--hairline);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11.5px; line-height:1.6;
  color:var(--text-2); white-space:pre-wrap; word-break:break-word;
  user-select:text;
}
.fb-said{ font-size:12px; color:var(--muted); margin-left:9px; }

/* ══ Admin ═══════════════════════════════════════════════════════════════ */

.adm{ display:flex; flex-direction:column; gap:18px; padding-bottom:40px; }

.adm-head{ display:flex; align-items:flex-start; gap:16px; flex-wrap:wrap; }
.adm-title h2{ margin:0 0 4px; font-size:24px; letter-spacing:-.02em; color:var(--text); }
.adm-title p{ margin:0; font-size:13.5px; color:var(--text-2); max-width:60ch; }
.adm-exit{ margin-left:auto; }

.adm-tabs{ display:flex; gap:4px; border-bottom:1px solid var(--hairline); }
.adm-tabs button{
  appearance:none; background:none; border:none; cursor:pointer;
  padding:9px 14px; font:inherit; font-size:13.5px; color:var(--text-2);
  border-bottom:2px solid transparent; margin-bottom:-1px;
}
.adm-tabs button[aria-current="page"]{ color:var(--text); border-bottom-color:var(--accent); }
.adm-tabs button:hover{ color:var(--text); }

.adm-sec{ display:flex; flex-direction:column; gap:10px; }
.adm-h{
  margin:0; font-size:11px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted);
}
.adm-note{ margin:0; font-size:12.5px; line-height:1.55; color:var(--muted); }
.adm-empty,.adm-load{ margin:0; padding:20px 0; font-size:13.5px; color:var(--muted); }

.adm-stats{
  display:grid; gap:10px;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
}
.adm-stat{
  padding:13px 15px; border-radius:13px;
  background:var(--surface); border:1px solid var(--border);
  display:flex; flex-direction:column; gap:3px;
}
.adm-stat-v{ font-size:22px; font-weight:640; letter-spacing:-.02em; color:var(--text);
  font-variant-numeric:tabular-nums; }
.adm-stat-l{ font-size:12px; color:var(--text-2); }
.adm-stat-s{ font-size:11px; color:var(--muted); }

.adm-spark{
  display:flex; align-items:flex-end; gap:3px; height:64px;
  padding:8px 10px; border-radius:12px;
  background:var(--surface); border:1px solid var(--border);
}
.adm-spark>i{ flex:1; min-width:3px; border-radius:2px 2px 0 0; background:var(--brand); }

.adm-todo{ margin:0; padding-left:18px; display:flex; flex-direction:column; gap:8px; }
.adm-todo li{ font-size:13px; line-height:1.6; color:#F6DFA8; }
.adm-todo code{ font-size:12px; background:rgba(0,0,0,.25); padding:1px 5px; border-radius:5px; }

.adm-chip{
  display:inline-flex; padding:1px 7px; border-radius:999px;
  font-size:10.5px; font-weight:650; letter-spacing:.04em; white-space:nowrap;
}
.adm-chip.is-ok{ background:rgba(0,217,163,.12); color:#7FE8CB; }
.adm-chip.is-warn{ background:rgba(255,196,77,.13); color:#F6DFA8; }
.adm-chip.is-stop{ background:rgba(255,100,110,.13); color:#FFC3C7; }
.adm-chip.is-off{ background:rgba(255,255,255,.06); color:var(--muted); }
.adm-chip.is-admin{ background:rgba(var(--accent-rgb),.15); color:var(--accent-pale); }

.adm-bar{ height:5px; border-radius:999px; background:rgba(255,255,255,.07); overflow:hidden; }
.adm-bar>i{ display:block; height:100%; border-radius:999px; background:var(--brand); }
.adm-bar.is-notice>i{ background:linear-gradient(180deg,#D9A93A,#C08A20); }
.adm-bar.is-warn>i{ background:linear-gradient(180deg,#FFC44D,#E09B18); }
.adm-bar.is-stop>i{ background:linear-gradient(180deg,#FF8A93,#E0424E); }

/* The table and the card stack are the SAME markup. A desktop table squeezed
   onto a phone is a horizontal scroller nobody can read; a second markup path
   is a second thing to keep correct. */
.adm-table{ display:flex; flex-direction:column; gap:1px; }
.adm-tr{
  display:grid; gap:12px; align-items:center;
  grid-template-columns:minmax(160px,2fr) 1fr 1fr 1.3fr .9fr .9fr;
  padding:11px 13px; text-align:left;
}
.adm-thead{
  font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); padding-bottom:6px; border-bottom:1px solid var(--hairline);
}
.adm-row{
  appearance:none; background:var(--surface); border:1px solid var(--border);
  border-radius:12px; cursor:pointer; font:inherit; color:var(--text);
  transition:background var(--t-hover), border-color var(--t-hover);
}
.adm-row:hover{ background:var(--surface-2); border-color:var(--border-strong); }
.adm-who{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.adm-name{ font-size:14px; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.adm-mail{ font-size:11.5px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.adm-cell{ display:flex; flex-direction:column; gap:4px; font-size:13px;
  font-variant-numeric:tabular-nums; min-width:0; }
.adm-cell small{ font-size:11px; color:var(--muted); }
.adm-type{ font-size:12.5px; color:var(--text-2); text-transform:capitalize; }
.adm-quiet{ color:var(--muted); font-size:12px; }

.adm-detail-head{ display:flex; flex-direction:column; gap:5px; }
.adm-detail-head h3{ margin:0; font-size:20px; letter-spacing:-.02em; color:var(--text); }
.adm-detail-head p{ margin:0; font-size:12.5px; color:var(--muted); }
.adm-back,.adm-exit{
  display:inline-flex; align-items:center; gap:6px;
  background:none; border:none; padding:0; cursor:pointer; font:inherit;
  font-size:13px; color:var(--text-2); align-self:flex-start;
}
.adm-back:hover{ color:var(--text); }
.adm-back-chev{
  width:7px; height:7px; border-left:1.6px solid currentColor;
  border-bottom:1.6px solid currentColor; transform:rotate(45deg);
}

.adm-jobs,.adm-log{ display:flex; flex-direction:column; }
.adm-job{
  display:grid; gap:10px; align-items:baseline;
  grid-template-columns:1.4fr 1fr .7fr 1.3fr .7fr;
  padding:9px 0; border-bottom:1px solid var(--hairline); font-size:13px;
}
.adm-job:last-child{ border-bottom:none; }
.adm-job-n{ color:var(--text); }
.adm-job-m,.adm-job-c,.adm-job-t{ color:var(--muted); font-size:12px; }
.adm-job-t{ font-variant-numeric:tabular-nums; }

.adm-log-row{
  display:grid; gap:10px; align-items:baseline;
  grid-template-columns:100px 180px 1fr auto;
  padding:8px 0; border-bottom:1px solid var(--hairline); font-size:12.5px;
}
.adm-log-row:last-child{ border-bottom:none; }
.adm-log-t{ color:var(--muted); font-variant-numeric:tabular-nums; }
.adm-log-a{ color:var(--text-2); overflow:hidden; text-overflow:ellipsis; }
.adm-log-d{ color:var(--muted); word-break:break-word; }
.adm-log-d code{ font-size:11px; word-break:break-all; }
.adm-log-d em{ display:block; color:var(--text-2); font-style:normal; }

.adm-form{ display:flex; flex-direction:column; gap:14px; }
.adm-grid{ display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); }
.adm-field{ display:flex; flex-direction:column; gap:5px; }
.adm-field-l{ font-size:12px; font-weight:600; color:var(--label); }
.adm-field-h{ font-size:11.5px; line-height:1.5; color:var(--muted); }
.adm-field input,.adm-field select,.adm-field textarea{
  width:100%; box-sizing:border-box;
  padding:9px 11px; border-radius:10px; font:inherit; font-size:13.5px;
  background:var(--surface-2); border:1px solid var(--border); color:var(--text);
}
.adm-field input:focus,.adm-field select:focus,.adm-field textarea:focus{
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(var(--accent-rgb),.18);
}
.adm-actions{ display:flex; gap:9px; align-items:center; flex-wrap:wrap; }
.adm-said{ font-size:12px; color:var(--muted); }

/* ── Admin on a phone ────────────────────────────────────────────────────
 *
 * The table becomes cards, from the same markup: each cell keeps its own
 * label, so a row still reads as "Allowance R200" rather than as a column of
 * numbers whose headings scrolled off the screen half an hour ago.
 */
@media (max-width:900px){
  .adm-thead{ display:none; }
  .adm-tr{ grid-template-columns:1fr 1fr; gap:10px 14px; padding:13px 14px; }
  .adm-who{ grid-column:1 / -1; }
  .adm-cell[data-k]::before{
    content:attr(data-k);
    font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
    color:var(--muted);
  }
  .adm-table{ gap:8px; }
  .adm-job{ grid-template-columns:1fr auto; gap:4px 10px; }
  .adm-job-m,.adm-job-c,.adm-job-t{ grid-column:1 / -1; }
  .adm-log-row{ grid-template-columns:1fr auto; gap:3px 10px; }
  .adm-log-d{ grid-column:1 / -1; }
  .adm-head{ gap:10px; }
  .adm-exit{ margin-left:0; }
  .adm{ padding-bottom:96px; }
}

/* ══ The beta landing page ═══════════════════════════════════════════════
 *
 * ── The background that used to stop ─────────────────────────────────────
 *
 * `.lp::before` is positioned inside `.lp`, which is capped at 1160px and
 * centred. On anything wider than that the glow ended at the column edge and
 * the rest of the screen was flat black — which reads as a rendering failure
 * rather than as a design, and is exactly the "cuts off into black at the
 * edges" that was reported.
 *
 * Fixed to the VIEWPORT instead. It now covers an ultrawide desktop, a laptop,
 * a tablet and a phone identically, and costs nothing: it is two gradients on
 * a layer that never repaints.
 */
.lp::before{
  position:fixed; inset:0; height:auto; width:100vw;
  background:
    radial-gradient(1200px 700px at 22% -6%, rgba(var(--accent-deep-rgb),.26), transparent 68%),
    radial-gradient(900px 620px at 88% 4%, rgba(var(--accent-rgb),.14), transparent 70%),
    radial-gradient(1000px 800px at 50% 104%, rgba(var(--accent-deep-rgb),.12), transparent 72%);
}
/* And the page itself paints the ground, so nothing can show through at any
   size. `--app-bg-flat` rather than the gradient: the gradient is 100vh tall
   and this page is taller than that. */
body:has(#landing){ background:var(--app-bg-flat); }

.bl-tag{
  margin-left:9px; padding:2px 8px; border-radius:999px;
  font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--accent-pale);
  background:rgba(var(--accent-rgb),.14); border:1px solid rgba(var(--accent-rgb),.3);
}
.lp-nav-quiet{
  font-size:13.5px; color:var(--text-2); text-decoration:none;
  padding:8px 4px; transition:color var(--t-hover);
}
.lp-nav-quiet:hover{ color:var(--text); }

.bl-hero{
  max-width:64ch; margin:0 auto;
  padding:clamp(40px,10vh,104px) 0 clamp(26px,5vh,44px);
  text-align:center; display:flex; flex-direction:column; gap:14px;
}
.bl-eyebrow{
  margin:0; font-size:12.5px; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--accent-pale);
}
.bl-h{
  margin:0; font-size:clamp(34px,7vw,58px); line-height:1.04; letter-spacing:-.03em;
  background:var(--name-grad); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:var(--text);
}
.bl-lede{ margin:0; font-size:clamp(16px,2.4vw,19px); line-height:1.6; color:var(--text-2); }
.bl-sub{ margin:6px 0 0; font-size:14px; color:var(--muted); }

.bl-cards{
  display:grid; gap:14px; max-width:960px; margin:0 auto;
  grid-template-columns:1fr;
}
@media (min-width:760px){
  .bl-cards{ grid-template-columns:1fr 1fr; }
  .bl-card-wide{ grid-column:1 / -1; }
}
.bl-card{
  padding:22px 24px 24px; border-radius:18px;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.014));
  border:1px solid var(--border);
  display:flex; flex-direction:column; gap:10px;
  box-shadow:var(--e1);
}
.bl-card h2{ margin:0; font-size:18px; line-height:1.28; letter-spacing:-.015em; color:var(--text); }
.bl-card p{ margin:0; font-size:14.5px; line-height:1.64; color:var(--text-2); }
.bl-quiet{ color:var(--muted) !important; font-size:13.5px !important; }
.bl-kicker{
  font-size:10.5px; font-weight:700; letter-spacing:.15em; text-transform:uppercase;
  color:var(--accent-pale);
}

.bl-length{
  max-width:56ch; margin:clamp(28px,6vh,52px) auto 0;
  text-align:center; display:flex; flex-direction:column; gap:9px; align-items:center;
}
.bl-length h2{ margin:0; font-size:clamp(22px,3.4vw,28px); letter-spacing:-.02em; color:var(--text); }
.bl-length p{ margin:0; font-size:15px; line-height:1.6; color:var(--text-2); }

.bl-go{
  display:flex; flex-direction:column; align-items:center; gap:18px;
  padding:clamp(34px,8vh,72px) 0 clamp(40px,9vh,80px);
}
.bl-cta{
  padding:15px 30px; font-size:16px; font-weight:600; border-radius:13px;
  box-shadow:var(--glow-deep);
}
.bl-signin{
  display:flex; flex-direction:column; align-items:center; gap:11px;
  max-width:44ch; text-align:center;
  padding:22px 24px; border-radius:16px;
  background:rgba(255,255,255,.03); border:1px solid var(--border);
  animation:bl-reveal var(--d-slow) var(--e-out);
}
@keyframes bl-reveal{ from{ opacity:0; transform:translateY(10px) } to{ opacity:1; transform:none } }
.bl-signin-p{ margin:0; font-size:13.5px; line-height:1.6; color:var(--text-2); }
.bl-cta-note{ font-size:12.5px; color:var(--muted); }

@media (max-width:520px){
  .bl-hero{ padding-top:clamp(28px,7vh,56px); }
  .bl-card{ padding:19px 18px 20px; border-radius:16px; }
  .bl-go{ padding:28px 0 44px; }
  .bl-cta{ width:100%; }
}

/* The assistant's persistent explanation, when the allowance is the reason. */
.asst-src.asst-src-stop{
  background:rgba(255,196,77,.10); border:1px solid rgba(255,196,77,.32);
  border-radius:12px; padding:10px 13px; color:#F6DFA8; max-width:44ch;
}

/* ── Admin takes the screen ──────────────────────────────────────────────
 *
 * The habits rail and the assistant composer both belong to the everyday app.
 * On an operational screen they are noise beside the thing being looked at —
 * and the composer in particular is an invitation to spend money on a page
 * whose whole purpose is watching what money is being spent.
 *
 * Same mechanism Settings, Calendar, Projects, Library and Diary already use.
 */
body:has(.adm) .rail{ display:none; }
body:has(.adm) .composer{ display:none; }
body:has(.adm) .main-wrap{ padding-bottom:32px; }

.adm-denied{
  max-width:44ch; margin:clamp(40px,12vh,120px) auto; text-align:center;
  align-items:center; gap:12px;
}
.adm-denied h2{ margin:0; font-size:22px; letter-spacing:-.02em; color:var(--text); }
.adm-denied p{ margin:0; font-size:14px; color:var(--text-2); }

/* Sections need room to be sections. Without this the heading of one sat
   directly under the last row of the previous, and the page read as one long
   list rather than as four separate things. */
.adm-body{ display:flex; flex-direction:column; gap:26px; }

/* On a phone the top bar already carries a back chevron; a second way back
   in the page itself is one too many — the same rule Settings follows. */
@media (max-width:900px){
  .adm-exit{ display:none; }
}

/* The sheet body has no side padding of its own — `.msheet-pad` is what every
   other sheet wraps its content in. The feedback sheet is rendered straight
   into the body, so it carries its own. */
.msheet-feedback .fb{ padding:6px 18px 14px; }

/* The two contact routes are anchors, because they navigate. Styled as
   buttons, they must not also be underlined — a button with an underline
   reads as a mistake. */
.fb-btn{ text-decoration:none; }