/* ==========================================================================
   The centred-card pages: / (landing + kill-switch control), /privacy,
   /login, /m. All four were the same shape already — a white card on a grey
   ground — so they share one stylesheet rather than four near-copies.

   Requires assets/allpoints-tokens.css then assets/ap-base.css.

   Was: 20px radius cards, system font stack, bespoke teal/red status colours.
   Now: §6.5 cards at 8px, Lato, and the §7 status families.
   ========================================================================== */

body{
  background:var(--ap-color-bg-layout);
  display:flex;justify-content:center;
  padding:var(--ap-space-lg) var(--ap-space) var(--ap-space-xxl);
}
body.ap-center{align-items:center;min-height:100vh}
body.ap-top{align-items:flex-start;min-height:100vh}

.card{
  width:100%;max-width:430px;
  background:var(--ap-color-bg-container);
  border:1px solid var(--ap-color-border-secondary);
  border-radius:var(--ap-radius-lg);
  box-shadow:var(--ap-shadow-popup);
  padding:var(--ap-space-lg);
}
.card-wide{max-width:680px}

.brand{
  font-size:var(--ap-text-sm);line-height:var(--ap-leading-sm);
  letter-spacing:0;text-transform:uppercase;
  color:var(--ap-color-primary);
  font-weight:var(--ap-font-weight-bold);
}
.card h1{
  font-size:var(--ap-text-h4);line-height:var(--ap-leading-h4);
  color:var(--ap-color-primary);
  margin:var(--ap-space-xxs) 0 var(--ap-space);
}
.card h2{
  font-size:var(--ap-text-h5);line-height:var(--ap-leading-h5);
  color:var(--ap-color-primary);
  margin:var(--ap-space-lg) 0 var(--ap-space-xs);
}
.card p,.card li{font-size:var(--ap-text-base);line-height:var(--ap-leading-base)}
.card ul{padding-left:var(--ap-space-md);margin:var(--ap-space-xs) 0}
.card li{margin-bottom:var(--ap-space-xs)}
.updated{
  font-size:var(--ap-text-sm);line-height:var(--ap-leading-sm);
  margin-bottom:var(--ap-space-md);
}

/* ── Status block (kill-switch control) → §7 families ──────────────────── */
.status{
  border-radius:var(--ap-radius-lg);
  border:1px solid transparent;
  padding:var(--ap-space-lg) var(--ap-space);
  text-align:center;margin-bottom:var(--ap-space);
}
.status .lbl{
  font-size:var(--ap-text-h4);line-height:var(--ap-leading-h4);
  font-weight:var(--ap-font-weight-bold);display:block;
}
.status .sub{font-size:var(--ap-text-base);line-height:var(--ap-leading-base);margin-top:var(--ap-space-xxs)}
.dot{
  width:10px;height:10px;border-radius:50%;
  display:inline-block;margin-right:var(--ap-space-xs);vertical-align:1px;
}
.on  {background:var(--ap-color-success-bg);border-color:var(--ap-color-success-border);color:var(--ap-color-success-text)}
.on   .dot{background:var(--ap-color-success)}
.off {background:var(--ap-color-error-bg);  border-color:var(--ap-color-error-border);  color:var(--ap-color-error-text)}
.off  .dot{background:var(--ap-color-error)}
.wait{background:var(--ap-color-bg-layout); border-color:var(--ap-color-border);        color:var(--ap-color-text)}
.wait .dot{background:var(--ap-color-border-solid)}

/* ── Flash messages ────────────────────────────────────────────────────── */
.flash{
  border-radius:var(--ap-radius);
  padding:var(--ap-space-sm) var(--ap-space);
  font-size:var(--ap-text-base);line-height:var(--ap-leading-base);
  margin-bottom:var(--ap-space-sm);display:none;
}
.flash.show{display:block}
.ok {background:var(--ap-color-success-bg);border:1px solid var(--ap-color-success-border);color:var(--ap-color-success-text)}
.err{background:var(--ap-color-error-bg);  border:1px solid var(--ap-color-error-border);  color:var(--ap-color-error-text)}

/* ── Buttons: §6.1 shape, role colour from §7 ─────────────────────────── */
.card button{
  width:100%;
  font:var(--ap-font-weight-bold) var(--ap-text-lg)/22px var(--ap-font-family);
  padding:var(--ap-space-xs) var(--ap-space);
  min-height:var(--ap-control-lg);
  border-radius:var(--ap-radius-lg);
  border:0;cursor:pointer;margin-bottom:var(--ap-space-xs);
  box-shadow:var(--ap-shadow-button);
  color:var(--ap-color-text-inverse);
  background:var(--ap-color-primary);
}
.card button:hover:not(:disabled){background:var(--ap-color-primary-hover)}
.card button:disabled{opacity:.5;cursor:default}
/* A destructive action is the one place §7's error red belongs on a button. */
.kill   {background:var(--ap-color-error-active)!important}
.kill:hover:not(:disabled){background:var(--ap-color-error-text)!important}
.restore{background:var(--ap-color-success-active)!important}
.restore:hover:not(:disabled){background:var(--ap-color-success-text)!important}
.ghost{
  background:transparent!important;
  color:var(--ap-color-text)!important;
  border:1px solid var(--ap-color-border-solid)!important;
  font-weight:var(--ap-font-weight-regular)!important;
}
.ghost:hover:not(:disabled){
  border-color:var(--ap-color-primary)!important;
  color:var(--ap-color-primary)!important;
}

/* A full-width link that reads as a button (the landing page's privacy link) */
.card .btn-link{
  display:block;text-align:center;
  background:var(--ap-color-primary);color:var(--ap-color-text-inverse);
  border-radius:var(--ap-radius-lg);
  padding:var(--ap-space-xs) var(--ap-space);
  min-height:var(--ap-control-lg);
  font-size:var(--ap-text-lg);line-height:22px;
  font-weight:var(--ap-font-weight-bold);
  text-decoration:none;margin-bottom:var(--ap-space-xs);
  box-shadow:var(--ap-shadow-button);
}
.card .btn-link:hover,.card .btn-link:focus{background:var(--ap-color-primary-hover);color:var(--ap-color-text-inverse)}

/* ── Explanatory footer inside the card ───────────────────────────────── */
.expl{
  font-size:var(--ap-text-sm);line-height:var(--ap-leading-sm);
  margin-top:var(--ap-space);padding-top:var(--ap-space-sm);
  border-top:1px solid var(--ap-color-split);
}
.expl b{font-weight:var(--ap-font-weight-bold)}
.back{
  display:inline-block;margin-top:var(--ap-space-lg);
  font-size:var(--ap-text-base);color:var(--ap-color-primary);
  font-weight:var(--ap-font-weight-bold);
  text-decoration:underline;text-underline-offset:4px;
}

@media (max-width:601px){
  body{padding:var(--ap-space) var(--ap-space) var(--ap-space-xl)}
  .card{padding:var(--ap-space)}
}