/* account.css -- THE ACCOUNT'S PLAN AND /PROFILE IN THE LIVING SURFACE (Code B Design; Lane A D64-112,
   D64-113)

   SERVED ONLY WHILE ROK_MAKEOVER IS ON, as /app/account.css (execution/engines/routes/makeover_routes.py,
   ASSETS), after /app/app.css on both pages that link it: the advisor (app.html) and /profile.

   THE PLAN PANEL (D64-112), on both: plan_panel.js unhides it only from GET /billing/plan's answer, so
   until that read is served nothing here draws. It is the capture editor's plate -- the g2 ground,
   the glass line and the gold top rule -- with the label in Cinzel gold, the plan's name in Cinzel,
   its lines in bone-mute, and Manage billing as the editor's gold-ruled pill.

   /PROFILE (D64-113; the founder liked the sidebar editor's family): the page takes the advisor's
   desk register (app.css body.desk, on tokens.css), and this sheet gives it the rest: the mark
   above the wordmark, the cards as the desk's glass panels, the long form's fieldsets as the
   capture editor's plates with the legend as its Cinzel label, and the embers in the gutters
   beside the column, so none meets a word.

   PRESENTATION ONLY: no copy, no field and no behaviour; every id, label and handler is the page's.
   Elements that start `hidden` are drawn only through :not([hidden]), so a hidden one stays hidden.
   The one continuous motion, the embers, is transform and opacity only and runs only under
   prefers-reduced-motion: no-preference; under reduce, nothing moves and no ember is drawn. */

/* ------------------------------------------------------------------ the plan panel, both pages */
body.desk .plan-panel:not([hidden]) { display: flex; flex-direction: column; gap: .35rem;
  background: var(--g2); border: 1px solid var(--glass-line); border-top: 2px solid var(--gold);
  border-radius: var(--r-ctrl); padding: 14px 16px 15px; margin: 0 0 1rem; }
body.desk .plan-panel :is(h2, h3) { margin: 0; font: 600 12px/1.3 "Cinzel", serif; letter-spacing: .08em;
  text-transform: uppercase; color: var(--gold-hi); }
body.desk .plan-panel .plan-name { margin: .1rem 0 0; font: 700 1.3rem/1.2 "Cinzel", serif;
  letter-spacing: .04em; color: var(--parchment); }
body.desk .plan-panel .plan-line { margin: 0; font-size: 14px; line-height: 1.45; color: var(--bone-mute); }
body.desk .plan-panel .plan-acts { margin: .45rem 0 0; display: flex; flex-wrap: wrap; gap: .6rem; }
body.desk .plan-panel .plan-manage { border: 1px solid var(--gold-dim); border-radius: 999px;
  padding: 5px 16px; background: transparent; color: var(--gold-hi); font: 600 14px "Albert Sans", system-ui, sans-serif;
  cursor: pointer; transition: border-color var(--t-fast), box-shadow var(--t-fast); }
body.desk .plan-panel .plan-manage:hover:not(:disabled),
body.desk .plan-panel .plan-manage:focus-visible { border-color: var(--gold); box-shadow: var(--glow-soft); }
body.desk .plan-panel .plan-manage:disabled { opacity: .6; cursor: progress; }
body.desk .plan-panel .plan-choose { color: var(--gold-hi); text-decoration-color: var(--gold-dim);
  font-weight: 600; font-size: 14px; }
body.desk .plan-panel .plan-status { margin: .2rem 0 0; font-size: 13px; color: var(--bone); }
/* the Free variant's gold Get Companion (D66 plan-panel): app.css's button.primary, the plans page's
   button, the panel's width; one line where it fits, and where it does not (a narrow panel, a wider face,
   a larger text setting) it wraps after the dash, never clips (D67-42) */
body.desk .plan-panel button.primary.companion { width: 100%; padding: 11px 12px; font-size: 14px; line-height: 1.25;
  white-space: normal; overflow-wrap: anywhere; }

/* ------------------------------------------------------------------ /profile: the page */
body.desk[data-page="profile"] { --col: min(46rem, calc(100vw - 2rem)); }
body.desk[data-page="profile"] :is(header, main, footer) { position: relative; z-index: 1; }
body.desk[data-page="profile"] .ac-head { --wm: 1.5rem; text-align: center; padding: 2rem 0 .75rem; }
body.desk[data-page="profile"] .ac-mark[hidden] { display: block; }
body.desk[data-page="profile"] .ac-mark { width: calc(var(--wm) * 4); height: calc(var(--wm) * 4);
  margin: 0 auto calc(var(--wm) * .5); }
body.desk[data-page="profile"] .ac-wordmark { margin: 0; font: 700 var(--wm)/1.2 "Cinzel", serif;
  letter-spacing: .14em; text-transform: uppercase; color: var(--parchment); }
body.desk[data-page="profile"] .ac-head .sub { margin: .55rem 0 0; }
body.desk[data-page="profile"] main > .card { background: var(--glass); border: 1px solid var(--glass-line);
  border-radius: var(--r-panel); backdrop-filter: blur(8px); padding: 20px 22px; margin: 1rem 0; }
body.desk[data-page="profile"] main > .card.plan-panel:not([hidden]) { background: var(--g2);
  border-top: 2px solid var(--gold); border-radius: var(--r-panel); padding: 18px 22px 20px; }
body.desk[data-page="profile"] main > .card.plan-panel .plan-name { font-size: 1.55rem; }
body.desk[data-page="profile"] main > .card:focus-within { box-shadow: none; }
body.desk[data-page="profile"] .rows .row { border-top: 1px solid var(--glass-line); }
body.desk[data-page="profile"] .rows .label { color: var(--bone); }

/* the long form: each fieldset the capture editor's plate, its legend the plate's Cinzel label */
body.desk[data-page="profile"] #intake fieldset { margin: 1rem 0; padding: 14px 16px 16px;
  background: var(--g2); border: 1px solid var(--glass-line); border-top: 2px solid var(--gold);
  border-radius: var(--r-ctrl); }
body.desk[data-page="profile"] #intake legend { float: left; width: 100%; padding: 0; margin: 0 0 .35rem;
  font: 600 12px/1.3 "Cinzel", serif; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-hi); }
body.desk[data-page="profile"] #intake legend + * { clear: both; }
body.desk[data-page="profile"] #intake .row { margin: .45rem 0; }
body.desk[data-page="profile"] #intake .row label { color: var(--bone-mute); font-size: 14px; }
body.desk[data-page="profile"] #intake .hint { font-size: 13px; }
body.desk[data-page="profile"] #intake button.text { font-weight: 600; color: var(--gold-hi); }
body.desk[data-page="profile"] #intake-save { margin-top: .4rem; }
body.desk[data-page="profile"] #card-manage p { margin: .4rem 0; }
body.desk[data-page="profile"] footer { text-align: center; }
@media (max-width: 40rem) {
  body.desk[data-page="profile"] .ac-head { --wm: 1.2rem; padding-top: 1.4rem; }
  body.desk[data-page="profile"] main > .card { padding: 16px 16px; }
  body.desk[data-page="profile"] #intake input[type="text"] { font-size: 16px; }   /* never zooms */
}

/* the embers, in the gutters beside the column */
body.desk[data-page="profile"] .ac-embers[hidden] { display: block; }
body.desk[data-page="profile"] .ac-embers { --gut: calc((100vw - var(--col)) / 2); position: fixed; inset: 0;
  z-index: 0; overflow: hidden; pointer-events: none; }
body.desk[data-page="profile"] .ac-embers span { position: absolute; bottom: -8px; width: 4px; height: 4px;
  border-radius: 50%; background: var(--gold-hi); box-shadow: 0 0 8px rgba(240, 215, 158, .75); opacity: 0; }
body.desk[data-page="profile"] .ac-embers span:nth-child(1) { left: calc(var(--gut) * .22); --dx: calc(var(--gut) * .14); --d: 19s; --l: -4s; }
body.desk[data-page="profile"] .ac-embers span:nth-child(2) { left: calc(var(--gut) * .5); --dx: calc(var(--gut) * -.12); --d: 23s; --l: -15s; }
body.desk[data-page="profile"] .ac-embers span:nth-child(3) { left: calc(var(--gut) * .72); --dx: calc(var(--gut) * -.1); --d: 16s; --l: -9s; }
body.desk[data-page="profile"] .ac-embers span:nth-child(4) { left: calc(100vw - var(--gut) * .78); --dx: calc(var(--gut) * .1); --d: 21s; --l: -12s; }
body.desk[data-page="profile"] .ac-embers span:nth-child(5) { left: calc(100vw - var(--gut) * .5); --dx: calc(var(--gut) * .12); --d: 17s; --l: -2s; }
body.desk[data-page="profile"] .ac-embers span:nth-child(6) { left: calc(100vw - var(--gut) * .25); --dx: calc(var(--gut) * -.14); --d: 24s; --l: -19s; }
@media (prefers-reduced-motion: no-preference) {
  body.desk[data-page="profile"] .ac-embers span { animation: ac-ember var(--d) linear var(--l) infinite; }
}
@media (prefers-reduced-motion: reduce) {
  body.desk[data-page="profile"] .ac-embers[hidden] { display: none; }
}
@keyframes ac-ember {
  0% { transform: translate(0, 0); opacity: 0; }
  10% { opacity: .85; }
  70% { opacity: .35; }
  100% { transform: translate(var(--dx), -100vh); opacity: 0; }
}