/* =============================================================================
   Cylocybe - My Account, v2 skin (2026-08-31)

   Implements the approved account-v2 mockup on the real account pages. Loaded
   AFTER cylocybe-account.css and deliberately built as a layer on top of it
   rather than a replacement: 52KB of component CSS in that file (order cards,
   stock alerts, reviews, comm prefs, address forms) is scoped to .cyca-acc, and
   most of it reads the --cyc-* tokens. Redefining those tokens re-skins the lot
   for free. This file then does three things the tokens cannot:

     1. neutralises .cyca-acc's own PAGE layout, so the rail can go hard left
     2. builds the new shell (rail / sticky bar / content column / mobile tabs)
     3. overrides the handful of colours the old file hardcoded rather than
        tokenised - chiefly #ff9a52, which no token change can reach

   Palette is the mockup's, chosen fresh rather than inherited from the
   storefront: one accent for actions, and an amber reserved EXCLUSIVELY for
   "this needs you" so attention has somewhere to go.
   ============================================================================= */

/* ---------- tokens ----------------------------------------------------------
   Scoped to the account body, so nothing here can leak into the storefront. */
body.woocommerce-account{
  --cyc-ink:#14161a;
  --cyc-soft:#3d424b;
  --cyc-mute:#6d7280;
  --cyc-orange:#15654a;          /* the old "accent" token: now the action green */
  --cyc-hair:#e6e5e2;
  --cyc-panel:#ffffff;

  --a2-paper:#faf9f7;
  --a2-surface:#ffffff;
  --a2-line:#e6e5e2;
  --a2-line-2:#f1f0ed;
  --a2-accent:#15654a;
  --a2-accent-ink:#0f4a36;
  --a2-alert:#9a5b00;
  --a2-alert-wash:#fdf3e4;
  --a2-alert-line:#f0dcbb;
  --a2-danger:#9d2f2a;
  --a2-rail:264px;
  --a2-bar:57px;                 /* height of the sticky title bar */
  --a2-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;

  background:var(--a2-paper);
}

/* ---------- break out of the centred page container -------------------------
   the_content() renders the account inside the theme's measure. The rail has to
   touch the viewport edge, so the shell goes full-bleed. max-width:100vw plus
   the overflow clip below stops the classic scrollbar-width horizontal scroll. */
/* cylocybe-account.css:15 sets `body.woocommerce-account #main{min-height:60vh}`. The bug
   report bar renders inside #main (it hangs off get_footer, which fires before footer.php is
   loaded), so on a short view that forced minimum became a band of empty paper between the
   bar and the footer. The rail sets a sensible floor on its own now. */
body.woocommerce-account #main{min-height:0!important}
body.woocommerce-account{overflow-x:clip}
.cyca-acc.cyca2{
  width:100vw;max-width:100vw;
  margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
  margin-top:0;margin-bottom:0;padding:0;
  font-family:var(--a2-font);color:var(--cyc-ink);
  display:grid;grid-template-columns:var(--a2-rail) minmax(0,1fr);
  align-items:start;
  min-height:auto;
  /* paints the rail column (and its 1px divider) for the full height of the row, so the rail
     element itself no longer needs a height to look like a column */
  background:linear-gradient(90deg,
    var(--a2-surface) 0, var(--a2-surface) var(--a2-rail),
    var(--a2-line) var(--a2-rail), var(--a2-line) calc(var(--a2-rail) + 1px),
    transparent calc(var(--a2-rail) + 1px));
}
.cyca2 *{box-sizing:border-box}
/* the old link colour rule is (0,1,1) and would repaint every button in here */
.cyca-acc.cyca2 a{color:inherit;text-decoration:none}

/* ---------- rail ------------------------------------------------------------ */
.cyca2__rail{
  position:sticky;top:0;align-self:start;
  /* height:100vh here was setting the floor for the whole grid row - see the note above */
  max-height:100vh;
  background:transparent;border-right:0;
  display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;z-index:5;
}
.cyca2__who{display:flex;align-items:center;gap:.7rem;padding:1.15rem 1.15rem .9rem;flex:0 0 auto}
.cyca2__av{width:38px;height:38px;border-radius:50%;background:var(--cyc-ink);color:#fff;
  display:grid;place-items:center;font-weight:700;font-size:14px;flex:0 0 auto}
.cyca2__whotxt{min-width:0;line-height:1.2}
.cyca2__name{display:block;font-weight:700;font-size:15px;color:var(--cyc-ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cyca2__mail{display:block;font-size:12.5px;color:var(--cyc-mute);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* nav: the old file styles .cyca-acc-nav as a sticky floating block - undo that */
/* square nav (owner 2026-08-31): no side padding, so the active band spans the rail */
/* Log out is the last thing in the rail, so nothing pads below it. */
.cyca-acc.cyca2 .cyca-acc-nav{position:static;top:auto;flex:0 0 auto;min-height:0;
  overflow:visible;padding:.2rem 0 0;display:flex;flex-direction:column}
.cyca-acc.cyca2 .cyca2__navfoot li:last-child a{padding-bottom:.75rem}
.cyca2__nav ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px}
.cyca2__grp{margin:1.35rem 0 .45rem;padding:0 1.15rem;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--cyc-mute);font-weight:700}
.cyca2__navfoot{margin-top:1rem;padding-top:.4rem;border-top:1px solid var(--a2-line)}

/* roomier rows (owner 2026-08-31): the nav was tuned tight and felt cramped for something
   people click with a mouse. 44px+ tall, which is also the minimum comfortable pointer
   target, with the type up a notch. */
.cyca-acc.cyca2 .cyca-acc-nav li a{
  display:flex;align-items:center;gap:.85rem;width:100%;min-height:46px;
  padding:.78rem 1.15rem;border:0;background:none;border-radius:0;
  color:var(--cyc-soft)!important;font-size:15px;font-weight:500;line-height:1.35;
  text-decoration:none;transition:background .13s,color .13s}
.cyca-acc.cyca2 .cyca-acc-nav li a:hover{background:var(--a2-line-2);color:var(--cyc-ink)!important}
.cyca-acc.cyca2 .cyca-acc-nav li a svg{width:19px;height:19px;flex:0 0 auto;opacity:.6}
/* :not(.cyca-acc-nav__badge) matters - the unread badge is a <span> too, and flex:1 on it
   stretched it into a wide slab instead of a pill hugging the number. */
.cyca-acc.cyca2 .cyca-acc-nav li a span:not(.cyca-acc-nav__badge){flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cyca-acc.cyca2 .cyca-acc-nav__badge{flex:0 0 auto;min-width:1.35rem;height:1.35rem;
  padding:0 .4rem;justify-content:center}
.cyca-acc.cyca2 .cyca-acc-nav li.is-active a,
.cyca-acc.cyca2 .cyca-acc-nav li.woocommerce-MyAccount-navigation-link.is-active a{
  background:var(--cyc-ink);color:#fff!important;font-weight:650;border-radius:0;
  box-shadow:inset 3px 0 0 var(--a2-accent)}
.cyca-acc.cyca2 .cyca-acc-nav li.is-active a svg{opacity:1}
.cyca-acc.cyca2 .cyca-acc-nav__badge{
  background:var(--a2-alert);color:#fff;border-radius:999px;font-size:11px;font-weight:700;
  padding:.06rem .4rem;line-height:1.55;flex:0 0 auto}
.cyca-acc.cyca2 .cyca-acc-nav li.is-active .cyca-acc-nav__badge{background:#fff;color:var(--cyc-ink)}

/* Controls should not select their own label when the pointer moves a pixel between
   mousedown and mouseup. Deliberately limited to controls: order codes, addresses and
   copy stay selectable because people do copy those. */
.cyca-acc.cyca2 .cyca-acc-nav li a,
.cyca-acc.cyca2 .cyca2__burger,
.cyca-acc.cyca2 .cyca-ocard__btn,
.cyca-acc.cyca2 .cyca-ocard__toggle,
.cyca-acc.cyca2 .cyca-ocard__head,
.cyca-acc.cyca2 .cyca-tile__t,
.cyca-acc.cyca2 .button,
.cyca-acc.cyca2 button,
.cyca-acc.cyca2 input[type="submit"],
.cyca2-tab{-webkit-user-select:none;user-select:none}

/* ---------- main column ----------------------------------------------------- */
.cyca2__main{min-width:0;display:flex;flex-direction:column}
.cyca2__bar{position:sticky;top:0;z-index:4;
  background:rgba(250,249,247,.93);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--a2-line);
  display:flex;align-items:center;gap:.9rem;padding:.85rem 1.6rem;min-height:var(--a2-bar)}
.cyca2__title{margin:0;font-family:var(--a2-font);font-size:20px;font-weight:700;
  letter-spacing:-.01em;color:var(--cyc-ink);text-transform:none;line-height:1.25}
/* .cyca-acc button (0,1,1) in the older sheet forces display:inline-flex and a full button
   skin onto every <button> in here, which put this on desktop and painted it. (0,3,0) wins. */
.cyca-acc.cyca2 .cyca2__burger{display:none;background:none!important;
  border:1px solid var(--a2-line)!important;border-radius:8px!important;
  padding:.4rem .5rem!important;cursor:pointer;line-height:0;color:var(--cyc-ink)!important;
  box-shadow:none!important;font-size:inherit!important}
.cyca-acc.cyca2 .cyca2__burger:hover{background:var(--a2-line-2)!important;
  border-color:#d9d7d1!important;color:var(--cyc-ink)!important}
.cyca2__wrap{padding:1.6rem;max-width:1000px;width:100%}

/* the old file caps and pads the content column for the centred layout */
.cyca-acc.cyca2 .cyca-acc__content{max-width:none;padding:0;margin:0;min-width:0}

/* ---------- shared primitives re-skinned ------------------------------------ */
.cyca2 .cyca-card,
.cyca2 .cyca-panel{background:var(--a2-surface);border:1px solid var(--a2-line);
  border-radius:14px;padding:1.15rem 1.25rem}
.cyca2 .cyca-card__h{font-family:var(--a2-font);font-weight:700;font-size:16px;
  letter-spacing:-.005em;color:var(--cyc-ink)}

/* order cards */
.cyca-acc.cyca2 .cyca-ocard{border:1px solid var(--a2-line);border-radius:14px;
  background:var(--a2-surface);padding:.5rem 1.15rem 1.1rem}
.cyca-acc.cyca2 .cyca-ocard:hover{border-color:#d9d7d1}
.cyca-acc.cyca2 .cyca-ocard__legend{font-family:var(--a2-font);font-weight:700;font-size:14px}
.cyca-acc.cyca2 .cyca-ocard__num{color:var(--cyc-ink)}
.cyca-acc.cyca2 .cyca-ocard__btn{border-radius:8px;border:1px solid var(--a2-line);
  background:var(--a2-surface);color:var(--cyc-ink)!important;font-weight:650;font-size:13px;
  padding:.5rem .8rem;text-transform:none;letter-spacing:0}
.cyca-acc.cyca2 .cyca-ocard__btn:hover{background:var(--a2-line-2);border-color:#d9d7d1}
.cyca-acc.cyca2 .cyca-ocard__btn--payment_instructions{
  background:var(--a2-accent);border-color:var(--a2-accent);color:#fff!important}
.cyca-acc.cyca2 .cyca-ocard__btn--payment_instructions:hover{
  background:var(--a2-accent-ink);border-color:var(--a2-accent-ink);color:#fff!important}
.cyca-acc.cyca2 .cyca-ocard__toggle{
  background:var(--a2-line-2);color:var(--cyc-soft);border-radius:9px;
  font-weight:650;letter-spacing:.02em;text-transform:none;font-size:13.5px;padding:.65rem 1rem}
.cyca-acc.cyca2 .cyca-ocard__toggle:hover{background:#e9e7e2;color:var(--cyc-ink)}

/* buttons across every sub-view: the old file paints these orange in several
   places with !important, so these have to match that weight */
.cyca-acc.cyca2 .button,
.cyca-acc.cyca2 button[type="submit"],
.cyca-acc.cyca2 input[type="submit"],
.cyca-acc.cyca2 .cyca-btn2{
  background:var(--a2-accent)!important;border:1px solid var(--a2-accent)!important;
  color:#fff!important;border-radius:9px!important;font-family:var(--a2-font);
  font-weight:650!important;font-size:14.5px!important;letter-spacing:0!important;
  text-transform:none!important;padding:.72rem 1.15rem!important;box-shadow:none!important}
.cyca-acc.cyca2 .button:hover,
.cyca-acc.cyca2 button[type="submit"]:hover,
.cyca-acc.cyca2 input[type="submit"]:hover,
.cyca-acc.cyca2 .cyca-btn2:hover{
  background:var(--a2-accent-ink)!important;border-color:var(--a2-accent-ink)!important;
  color:#fff!important;filter:none!important}

/* forms */
.cyca-acc.cyca2 input[type="text"],.cyca-acc.cyca2 input[type="email"],
.cyca-acc.cyca2 input[type="tel"],.cyca-acc.cyca2 input[type="password"],
.cyca-acc.cyca2 input[type="number"],.cyca-acc.cyca2 select,.cyca-acc.cyca2 textarea{
  background:var(--a2-surface);border:1px solid var(--a2-line);border-radius:9px;
  color:var(--cyc-ink);padding:.65rem .75rem;font-family:var(--a2-font);font-size:15px}
.cyca-acc.cyca2 input:focus,.cyca-acc.cyca2 select:focus,.cyca-acc.cyca2 textarea:focus{
  outline:2px solid var(--a2-accent);outline-offset:1px;border-color:transparent}

/* headings inside views: the old file sets these in Anton, which does not belong
   to this design */
.cyca-acc.cyca2 h2,.cyca-acc.cyca2 h3,.cyca-acc.cyca2 .cyca-page-title{
  font-family:var(--a2-font);font-weight:700;letter-spacing:-.01em;color:var(--cyc-ink);
  text-transform:none}
/* The sticky bar already names the view, and it stays put while you scroll. Printing the
   same words again at the top of the content was pure duplication. */
.cyca-acc.cyca2 .cyca-page-title{display:none}

/* .cyca-tile__t sets font-family directly, so redefining --cyc-anton could not reach it. */
.cyca-acc.cyca2 .cyca-tile__t{font-family:var(--a2-font);font-weight:700;font-size:16px;
  letter-spacing:-.005em;line-height:1.3}
.cyca-acc.cyca2 .cyca-tile{border-radius:14px;background:var(--a2-surface);
  border:1px solid var(--a2-line);color:var(--cyc-soft)!important}
.cyca-acc.cyca2 .cyca-tile:hover{border-color:#d9d7d1;transform:none}
.cyca-acc.cyca2 .cyca-tile__link,.cyca-acc.cyca2 .cyca-tile__meta{
  color:var(--a2-accent)!important;font-weight:650;letter-spacing:.02em}

/* the payment views this account already hosts */
.cyca2 .cylo-osum,.cyca2 .cylo-due{border-color:var(--a2-line);border-radius:14px}
.cyca2 .cylo-due__chip{color:var(--a2-alert);background:var(--a2-alert-wash)}
.cyca2 .cylo-osum__st{color:var(--a2-alert)}
.cyca2 .cylo-due__go{background:var(--a2-accent)}
.cyca2 .cylo-due__go:hover{background:var(--a2-accent-ink)}
.cyca2 .cylo-acctpay__back a{color:var(--a2-accent)}

/* ---------- mobile tab bar --------------------------------------------------- */
.cyca2-tabs{display:none}

/* ============================================================================
   RESPONSIVE
   The rail becomes a slide-over. The five things people actually come for get a
   thumb-reachable bottom bar; everything else stays one tap away in the drawer.
   ========================================================================== */
@media(max-width:900px){
  .cyca-acc.cyca2{grid-template-columns:1fr;background:none}

  /* The site's sticky nav sits at a high z-index and was painting over the open drawer,
     hiding the first item or two. The drawer is a modal surface, so it goes above it. */
  .cyca2__rail{position:fixed;top:0;left:0;width:min(84vw,300px);height:100vh;max-height:100vh;
    background:var(--a2-surface);z-index:100003;   /* the site's sticky nav is 100001 */
    transform:translateX(-102%);transition:transform .22s ease;
    box-shadow:0 10px 40px rgba(20,22,26,.18)}
  .cyca2__rail.is-open{transform:none}
  .cyca2__scrim{position:fixed;inset:0;background:rgba(20,22,26,.42);z-index:100002}
  .cyca-acc.cyca2 .cyca2__burger{display:inline-flex}

  .cyca2__bar{padding:.75rem 1rem}
  .cyca2__title{font-size:18px}
  /* generous gutters were giving away ~40px of a 390px screen */
  .cyca2__wrap{padding:.85rem .7rem 5.5rem}

  /* cylocybe-account.css:317 makes every .cyca-acc-nav ul a bordered white card below
     860px. That was written for the one flat list the old page had; the grouped nav has
     four, so the drawer became four stacked cards. */
  .cyca-acc.cyca2 .cyca-acc-nav ul{border:0;border-radius:0;background:none;overflow:visible;
    flex-direction:column;flex-wrap:nowrap;gap:0}
  .cyca-acc.cyca2 .cyca-acc-nav li+li{border-top:0}
  .cyca-acc.cyca2 .cyca-acc-nav li a{min-height:50px;padding:.82rem 1.15rem;border-radius:0;
    border:0;background:none;font-size:15.5px}
  .cyca-acc.cyca2 .cyca-acc-nav li.is-active a{
    background:var(--cyc-ink);color:#fff!important;border:0;border-radius:0;
    padding-left:1.15rem;box-shadow:inset 3px 0 0 var(--a2-accent)}
  .cyca-acc.cyca2 .cyca-acc-nav li.is-active a svg{color:#fff;opacity:1}
  /* the drawer scrolls on its own, so the name block must not be scrolled away with it */
  .cyca2__who{position:sticky;top:0;background:var(--a2-surface);z-index:1;
    border-bottom:1px solid var(--a2-line)}

  .cyca2-tabs{display:grid;grid-template-columns:repeat(5,1fr);
    position:fixed;bottom:0;left:0;right:0;z-index:56;
    background:var(--a2-surface);border-top:1px solid var(--a2-line);
    padding-bottom:env(safe-area-inset-bottom)}
  .cyca2-tab{display:flex;flex-direction:column;align-items:center;gap:.18rem;
    padding:.55rem .2rem .6rem;border:0;background:none;cursor:pointer;
    color:var(--cyc-mute);font-size:10.5px;font-weight:600;position:relative;
    text-decoration:none;line-height:1.2;font-family:var(--a2-font)}
  .cyca2-tab.is-on{color:var(--cyc-ink)}
  .cyca2-tab svg{width:21px;height:21px;opacity:.6}
  .cyca2-tab.is-on svg{opacity:1}
  .cyca2-tab__b{position:absolute;top:.28rem;left:50%;margin-left:4px;
    background:var(--a2-alert);color:#fff;border-radius:999px;
    font-size:10px;font-weight:700;padding:.02rem .3rem;line-height:1.5}

  /* cards inside cards cost two borders and two paddings on a narrow screen */
  .cyca-acc.cyca2 .cyca-ocards{gap:.7rem}
  .cyca-acc.cyca2 .cyca-ocard{padding:.45rem .9rem 1rem}

  /* See the file header note: flex-basis on a column axis is a HEIGHT. The note was
     inheriting a 240px minimum height meant as a minimum width. */
  .cyca-acc.cyca2 .cyca-ocard__note{flex:0 0 auto;min-height:0}
  /* Nothing shares the row on a phone, so the name has no reason to be clipped. */
  .cyca-acc.cyca2 .cyca-ocard__iname{white-space:normal;overflow:visible;text-overflow:clip}
  .cyca-acc.cyca2 .cyca-ocard__actions{margin-left:0;justify-content:flex-start}
}
@media(min-width:901px){
  .cyca2__scrim{display:none}
}
@media(max-width:420px){
  .cyca2__title{font-size:17px}
}

/* ==========================================================================
 * THE VIEWS (2026-08-31)
 * Everything above this point styles the frame. This styles what is inside it.
 * ======================================================================== */

/* ---- the content column becomes a card ---------------------------------
   Skipped for views that already draw their own cards, so nothing nests. */
/* OPT-IN, not opt-out. Several views draw their own panel, and blanket-carding the
   content column put a card inside a card. Only views with genuinely bare content
   get the card. */
body.woocommerce-edit-account .cyca-acc.cyca2 .cyca-acc__content,
body.woocommerce-edit-address .cyca-acc.cyca2 .cyca-acc__content,
body.woocommerce-downloads .cyca-acc.cyca2 .cyca-acc__content,


/* ---- type inside a view ------------------------------------------------- */
.cyca-acc.cyca2 .cyca-acc__content > h2:first-child,
.cyca-acc.cyca2 .cyca-acc__content > h3:first-child{margin-top:0}
.cyca-acc.cyca2 .cyca-acc__content h2{font-size:17px;font-weight:700;margin:0 0 .35rem}
.cyca-acc.cyca2 .cyca-acc__content h3{font-size:15px;font-weight:700;margin:1.6rem 0 .5rem}
.cyca-acc.cyca2 .cyca-acc__content p{color:var(--cyc-soft);font-size:14.5px;margin:0 0 1rem}
.cyca-acc.cyca2 .cyca-acc__content > p:first-of-type{color:var(--cyc-mute);font-size:14px}
.cyca-acc.cyca2 .cyca-acc__content hr{border:0;border-top:1px solid var(--a2-line-2);margin:1.3rem 0}
.cyca-acc.cyca2 .cyca-acc__content a:not(.button):not(.cyca-ocard__btn){
  color:var(--a2-accent);font-weight:600;text-decoration:none}
.cyca-acc.cyca2 .cyca-acc__content a:not(.button):hover{text-decoration:underline}

/* ---- empty states ------------------------------------------------------
   These were a line of grey text centred in a void. Now a bordered, clearly
   deliberate panel, so an empty view reads as "nothing here yet" rather than
   as a page that failed to load. */
/* .woocommerce-info is used for ordinary explanatory copy in several views, not only for
   emptiness, so it is NOT dressed as an empty state. Left as plain, readable text. */
.cyca-acc.cyca2 .woocommerce-info{background:none!important;border:0!important;
  padding:0!important;margin:0 0 1rem!important;color:var(--cyc-soft)!important;
  font-size:14.5px}
.cyca-acc.cyca2 .woocommerce-info::before{display:none}

/* ---- forms -------------------------------------------------------------- */
.cyca-acc.cyca2 .cyca-acc__content label{display:block;font-size:12.5px;font-weight:650;
  color:var(--cyc-soft);margin:0 0 .35rem}
.cyca-acc.cyca2 .cyca-acc__content textarea{min-height:96px;resize:vertical;line-height:1.5}

/* ---- tables (downloads, alerts, reviews) -------------------------------- */
.cyca-acc.cyca2 .cyca-acc__content table{width:100%;border-collapse:collapse;margin:0 0 1rem}
.cyca-acc.cyca2 .cyca-acc__content th{text-align:left;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--cyc-mute);font-weight:800;padding:.6rem 0;
  border-bottom:1px solid var(--a2-line)}
.cyca-acc.cyca2 .cyca-acc__content td{padding:.85rem 0;border-bottom:1px solid var(--a2-line-2);
  font-size:14.5px;color:var(--cyc-soft);vertical-align:middle}

@media(max-width:900px){
   body.woocommerce-edit-account .cyca-acc.cyca2 .cyca-acc__content,
  body.woocommerce-edit-address .cyca-acc.cyca2 .cyca-acc__content,
  body.woocommerce-downloads .cyca-acc.cyca2 .cyca-acc__content,

  .cyca-acc.cyca2 .cyc-msg__form{grid-template-columns:1fr}
  .cyca-acc.cyca2 .cyc-msg__item{max-width:92%}
}

/* ==========================================================================
 * MESSAGES - a proper messenger (2026-08-31)
 * Class names read from cylocybe-messages.js, which renders #cyc-msg-app on the
 * client. The structure was already right; it just was not styled like one.
 * ======================================================================== */
.cyca-acc.cyca2 .cyca-acc__content:has(.cyc-msg-wrap){padding:0;border:0;background:none}
.cyca-acc.cyca2 .cyca-page-title--ico{display:none}   /* the bar already says Messages */

/* the column IS the messenger - no card, no radius, no second surface */
.cyca-acc.cyca2 .cyc-msg-card{background:none;border:0;border-radius:0;overflow:visible;
  display:flex;flex-direction:column;min-height:min(58vh,460px);
  max-height:calc(100vh - 210px)}
.cyca-acc.cyca2 .cyc-msg-toolbar{display:flex;align-items:center;gap:.8rem;flex:0 0 auto;
  padding:0 0 .9rem;border-bottom:1px solid var(--a2-line);background:none}
.cyca-acc.cyca2 .cyc-msg-tb-ico{width:22px;height:22px;color:var(--a2-accent);flex:0 0 auto}
.cyca-acc.cyca2 .cyc-msg-tb-t{margin:0;font-size:15px;font-weight:700;color:var(--cyc-ink)}
.cyca-acc.cyca2 .cyc-msg-tb-sub{margin:.1rem 0 0;font-size:12.5px;color:var(--cyc-mute);
  line-height:1.45}
.cyca-acc.cyca2 .cyc-msg-back{display:none}

/* the thread scrolls INSIDE the card, the way a messenger does, so the composer
   is always in the same place instead of drifting down the page */
.cyca-acc.cyca2 .cyc-msg-app{flex:1;min-height:0;display:flex;flex-direction:column}
.cyca-acc.cyca2 .cyc-msg-thread{flex:1;min-height:0;overflow-y:auto;
  padding:1.1rem 0;display:flex;flex-direction:column;gap:.7rem;background:none}
.cyca-acc.cyca2 .cyc-msg-row{display:flex;max-width:78%}
.cyca-acc.cyca2 .cyc-msg-row--store{align-self:flex-start}
.cyca-acc.cyca2 .cyc-msg-row--me{align-self:flex-end;justify-content:flex-end}
.cyca-acc.cyca2 .cyc-msg-bubble{padding:.7rem .95rem;border-radius:16px;font-size:14.5px;
  line-height:1.5;word-break:break-word}
.cyca-acc.cyca2 .cyc-msg-row--store .cyc-msg-bubble{background:var(--a2-surface);
  border:1px solid var(--a2-line);color:var(--cyc-soft);border-bottom-left-radius:5px}
.cyca-acc.cyca2 .cyc-msg-row--me .cyc-msg-bubble{background:var(--a2-accent);color:#fff;
  border-bottom-right-radius:5px}
.cyca-acc.cyca2 .cyc-msg-sender,
.cyca-acc.cyca2 .cyc-msg-time{font-size:11.5px;color:var(--cyc-mute);margin:.25rem .3rem 0}
.cyca-acc.cyca2 .cyc-msg-row--me .cyc-msg-time{text-align:right}
.cyca-acc.cyca2 .cyc-msg-empty{margin:auto;text-align:center;color:var(--cyc-mute);
  font-size:14.5px;max-width:34ch;background:none;border:0;padding:1rem}

/* composer pinned to the bottom of the card */
.cyca-acc.cyca2 .cyc-msg-composer{flex:0 0 auto;display:flex;align-items:flex-end;gap:.6rem;
  padding:.9rem 0 0;border-top:1px solid var(--a2-line);background:none}
.cyca-acc.cyca2 .cyc-msg-input{flex:1;min-width:0;min-height:44px;max-height:132px;
  resize:none;border:1px solid #c9c5bd!important;border-radius:22px!important;
  padding:.7rem 1.05rem!important;font-size:14.5px!important;line-height:1.4;
  background:var(--a2-surface)!important}
.cyca-acc.cyca2 .cyc-msg-input:focus{background:#fff!important;
  outline:2px solid var(--a2-accent)!important;outline-offset:1px;border-color:transparent!important}
.cyca-acc.cyca2 .cyc-msg-send{flex:0 0 auto;width:44px;height:44px;padding:0!important;
  border-radius:50%!important;display:grid;place-items:center;
  background:var(--a2-accent)!important;border:0!important;color:#fff!important;
  font-size:0!important;align-self:flex-end}
.cyca-acc.cyca2 .cyc-msg-send::after{content:"";width:17px;height:17px;
  background:currentColor;font-size:0;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 20l19-8L3 4l4 8z'/></svg>") center/contain no-repeat;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 20l19-8L3 4l4 8z'/></svg>") center/contain no-repeat}
.cyca-acc.cyca2 .cyc-msg-status{padding:0 .9rem .6rem;font-size:12.5px;color:var(--cyc-mute)}

/* ==========================================================================
 * REVIEWS - real class names this time (.cyca-rvcard, not .cyca-rv)
 * The blue pill with black text belonged to no palette on this page.
 * ======================================================================== */
.cyca-acc.cyca2 .cyca-rvgrid{display:grid;gap:.7rem;margin:0 0 1.3rem}
.cyca-acc.cyca2 .cyca-rvcard{background:var(--a2-surface);border:1px solid var(--a2-line);
  border-radius:12px;padding:.85rem 1rem}
.cyca-acc.cyca2 .cyca-rvcard__head{display:flex;align-items:center;gap:.9rem}
.cyca-acc.cyca2 .cyca-rvcard__art{width:52px;height:52px;border-radius:10px;overflow:hidden;
  background:var(--a2-line-2);flex:0 0 auto;display:grid;place-items:center}
.cyca-acc.cyca2 .cyca-rvcard__art img{width:100%;height:100%;object-fit:cover}
.cyca-acc.cyca2 .cyca-rvcard__art--store{background:var(--a2-accent-ink);color:#fff}
.cyca-acc.cyca2 .cyca-rvcard__info{min-width:0;flex:1}
.cyca-acc.cyca2 .cyca-rvcard__name{margin:0;font-size:14.5px;font-weight:700;color:var(--cyc-ink)}
.cyca-acc.cyca2 .cyca-rvcard__meta{margin:.15rem 0 0;font-size:12.5px;color:var(--cyc-mute)}
.cyca-acc.cyca2 .cyca-rvcard__btn{flex:0 0 auto;background:var(--a2-accent)!important;
  border:1px solid var(--a2-accent)!important;color:#fff!important;border-radius:9px!important;
  font-weight:650!important;font-size:13.5px!important;letter-spacing:0!important;
  text-transform:none!important;padding:.6rem 1rem!important;box-shadow:none!important}
.cyca-acc.cyca2 .cyca-rvcard__btn:hover{background:var(--a2-accent-ink)!important;
  border-color:var(--a2-accent-ink)!important}
.cyca-acc.cyca2 .cyca-acc-rv__h{font-size:14px;font-weight:700;margin:1.4rem 0 .3rem}
.cyca-acc.cyca2 .cyca-acc-rv__h:first-child{margin-top:0}
.cyca-acc.cyca2 .cyca-acc-rv__lead{font-size:13.5px;color:var(--cyc-mute);margin:0 0 .9rem}
.cyca-acc.cyca2 .cyc-rvw__submit{background:var(--a2-accent)!important;
  border-color:var(--a2-accent)!important;color:#fff!important;border-radius:9px!important;
  text-transform:none!important;letter-spacing:0!important}

@media(max-width:700px){
  .cyca-acc.cyca2 .cyc-msg-card{height:min(70vh,560px)}
  .cyca-acc.cyca2 .cyc-msg-row{max-width:88%}
  .cyca-acc.cyca2 .cyca-rvcard__head{flex-wrap:wrap}
  .cyca-acc.cyca2 .cyca-rvcard__btn{width:100%}
}

/* ==========================================================================
 * HONOURING THE MOCKUP (2026-08-31) - real class names, read from the page
 * ======================================================================== */

/* 1. cap the text, not the layout */
.cyca-acc.cyca2 .cyca2__wrap{max-width:none}
.cyca-acc.cyca2 .cyca-acc__content > p,
.cyca-acc.cyca2 .cyc-inbox__intro,
.cyca-acc.cyca2 .ezc-lede,
.cyca-acc.cyca2 .cyca-card__p,
.cyca-acc.cyca2 .cyc-comm__sub{max-width:72ch}

/* 2. the bar already names the view - do not print it again */
.cyca-acc.cyca2 .cyca-page-title{display:none}

/* ---- INBOX: a ruled list, not a stack of boxes ---- */
.cyca-acc.cyca2 .cyc-inbox__list{display:grid;gap:0;margin:0;padding:0;list-style:none;
  border-top:1px solid var(--a2-line)}
.cyca-acc.cyca2 .cyc-inbox__item{display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  gap:.9rem;align-items:center;background:none!important;border:0!important;border-radius:0!important;
  border-bottom:1px solid var(--a2-line-2)!important;padding:1rem .25rem!important;box-shadow:none!important}
.cyca-acc.cyca2 .cyc-inbox__item:hover{background:var(--a2-line-2)!important}
.cyca-acc.cyca2 .cyc-inbox__dot{width:8px;height:8px;border-radius:50%;
  background:var(--a2-line);flex:0 0 auto}
.cyca-acc.cyca2 .cyc-inbox__item.is-unread .cyc-inbox__dot{background:var(--a2-accent)}
.cyca-acc.cyca2 .cyc-inbox__subj{font-size:14.5px;font-weight:600;color:var(--cyc-ink);
  margin:0;line-height:1.4}
.cyca-acc.cyca2 .cyc-inbox__item.is-unread .cyc-inbox__subj{font-weight:750}
.cyca-acc.cyca2 .cyc-inbox__meta,
.cyca-acc.cyca2 .cyc-inbox__d{font-size:12.5px;color:var(--cyc-mute);white-space:nowrap;
  letter-spacing:0;text-transform:none}

/* ---- COMM PREFS: preference rows, no boxes ---- */
.cyca-acc.cyca2 .cyc-comm__cards{display:grid;gap:0;border-top:1px solid var(--a2-line)}
.cyca-acc.cyca2 .cyc-comm__card{background:none!important;border:0!important;
  border-bottom:1px solid var(--a2-line-2)!important;border-radius:0!important;
  padding:1.05rem .25rem!important;margin:0!important;box-shadow:none!important}
.cyca-acc.cyca2 .cyc-comm__card-row{display:flex;align-items:center;gap:1.2rem}
.cyca-acc.cyca2 .cyc-comm__head{background:none!important;border:0!important;padding:.4rem .25rem!important}
.cyca-acc.cyca2 .cyc-comm__head-type{font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--cyc-mute);font-weight:800}
.cyca-acc.cyca2 .cyc-comm__desc{font-size:13px;color:var(--cyc-mute);margin:.15rem 0 0}
.cyca-acc.cyca2 .cyc-comm__ch input[type=checkbox]{width:20px;height:20px;accent-color:var(--a2-accent);
  color-scheme:light;cursor:pointer}
.cyca-acc.cyca2 .cyc-comm__card.is-locked{opacity:1}
.cyca-acc.cyca2 .cyc-comm__note{font-size:12.5px;color:var(--cyc-mute)}

/* ---- STOCK ALERTS + EZ: no panel round a single subject ---- */
.cyca-acc.cyca2 .cyca-card,
.cyca-acc.cyca2 .cyc-ez-wrap > .cyca-card{background:none!important;border:0!important;
  border-radius:0!important;padding:0!important;box-shadow:none!important}
.cyca-acc.cyca2 .cyca-card__p{font-size:14.5px;color:var(--cyc-soft);margin:0 0 1rem}
.cyca-acc.cyca2 .ezc-lede{font-size:14.5px;color:var(--cyc-soft);margin:0 0 1.3rem}

/* ---- DOWNLOADS: an empty state that sits in the space ---- */
body.woocommerce-downloads .cyca-acc.cyca2 .cyca-acc__content{
  background:none;border:0;padding:0}
body.woocommerce-downloads .cyca-acc.cyca2 .woocommerce-info{
  text-align:center;padding:3.5rem 1.2rem 1rem!important;max-width:44ch;margin:0 auto!important;
  color:var(--cyc-mute)!important}
body.woocommerce-downloads .cyca-acc.cyca2 .button.wc-forward{display:block;width:max-content;
  margin:0 auto}

/* ---- REVIEWS: ruled rows, not grey slabs ---- */
.cyca-acc.cyca2 .cyca-rvgrid{display:grid;gap:0;border-top:1px solid var(--a2-line)}
.cyca-acc.cyca2 .cyca-rvcard{background:none!important;border:0!important;border-radius:0!important;
  border-bottom:1px solid var(--a2-line-2)!important;padding:1rem .25rem!important;
  box-shadow:none!important}
.cyca-acc.cyca2 .cyca-rvcard__head{display:flex;align-items:center;gap:.95rem}
.cyca-acc.cyca2 .cyca-rvcard__art{width:52px;height:52px;border-radius:10px;overflow:hidden;
  background:var(--a2-line-2);border:1px solid var(--a2-line);flex:0 0 auto}
.cyca-acc.cyca2 .cyca-rvcard__art img{width:100%;height:100%;object-fit:cover}
.cyca-acc.cyca2 .cyca-rvcard__btn{margin-left:auto}

/* ---- ADDRESS + ACCOUNT: the numbered-step chrome belongs to checkout, not here ---- */
body.woocommerce-edit-address .cyca-acc.cyca2 .cyc-step__body,
body.woocommerce-edit-account .cyca-acc.cyca2 .cyc-step__body{
  background:none;border:0;padding:0}
body.woocommerce-edit-address .cyca-acc.cyca2 .cyc-step,
body.woocommerce-edit-account .cyca-acc.cyca2 .cyc-step{
  display:block;padding:0 0 1.6rem}
body.woocommerce-edit-address .cyca-acc.cyca2 .cyc-step::before,
body.woocommerce-edit-account .cyca-acc.cyca2 .cyc-step::before{display:none}
body.woocommerce-edit-address .cyca-acc.cyca2 .cyc-step__n,
body.woocommerce-edit-account .cyca-acc.cyca2 .cyc-step__n{display:none}
body.woocommerce-edit-address .cyca-acc.cyca2 .cyc-step__t,
body.woocommerce-edit-account .cyca-acc.cyca2 .cyc-step__t{
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--cyc-mute);
  font-weight:800;margin:0 0 .8rem;display:block}

@media(max-width:700px){
  .cyca-acc.cyca2 .cyc-inbox__item,
  .cyca-acc.cyca2 .cyca-rvcard{grid-template-columns:auto minmax(0,1fr)}
  .cyca-acc.cyca2 .cyc-inbox__meta,
  .cyca-acc.cyca2 .cyc-inbox__d{white-space:normal}
  .cyca-acc.cyca2 .cyca-rvcard__head{flex-wrap:wrap}
  .cyca-acc.cyca2 .cyca-rvcard__btn{margin-left:0;width:100%}
}

/* inbox meta always beneath the subject: the three-column grid let a short subject share its
   row with the meta and a long one push it below, so consecutive rows disagreed. */
.cyca-acc.cyca2 .cyc-inbox__item{grid-template-columns:auto minmax(0,1fr)}
.cyca-acc.cyca2 .cyc-inbox__body{min-width:0}
.cyca-acc.cyca2 .cyc-inbox__meta,
.cyca-acc.cyca2 .cyc-inbox__d{display:block;margin:.2rem 0 0;white-space:normal}
.cyca-acc.cyca2 .cyc-inbox__sum{display:block;font-size:13px;color:var(--cyc-mute);margin:.25rem 0 0}

/* the unread marker is a dot, not a bar: as a grid child it was being stretched to the row
   height, so width/height alone were not enough - it needs to stop stretching too. */
.cyca-acc.cyca2 .cyc-inbox__dot{width:9px!important;height:9px!important;min-width:9px;
  min-height:9px;border-radius:50%!important;align-self:center;flex:0 0 auto;
  display:block;margin-top:.35rem}

/* ==========================================================================
 * MESSAGES COMPOSER - final (2026-08-31)
 * The plugin prints its own <style id="cyc-msg-css"> in the page BODY, so it lands
 * after this stylesheet. Its selectors are single-class (0,1,0); everything here is
 * (0,3,0) or better, so specificity settles it and document order does not matter.
 * The send button is now an icon button in the JS, so nothing has to be hidden.
 * ======================================================================== */
.cyca-acc.cyca2 .cyc-msg-composer{display:flex!important;align-items:flex-end;gap:.6rem!important;
  margin:0!important;padding:.9rem 0 0!important;border-top:1px solid var(--a2-line);background:none}
.cyca-acc.cyca2 .cyc-msg-input{flex:1 1 auto;min-width:0;min-height:46px!important;max-height:132px;
  resize:none!important;overflow-y:auto;
  border:1px solid #c9c5bd!important;border-radius:23px!important;
  padding:.78rem 1.1rem!important;font:inherit!important;font-size:14.5px!important;
  line-height:1.4!important;background:var(--a2-surface)!important;color:var(--cyc-ink)!important}
.cyca-acc.cyca2 .cyc-msg-input:focus{outline:2px solid var(--a2-accent)!important;outline-offset:1px;
  border-color:transparent!important}
.cyca-acc.cyca2 .cyc-msg-send{flex:0 0 auto!important;width:46px!important;height:46px!important;
  min-width:46px;padding:0!important;border:0!important;border-radius:50%!important;
  background:var(--a2-accent)!important;color:#fff!important;cursor:pointer;
  display:inline-flex!important;align-items:center;justify-content:center;
  box-shadow:none!important;font-size:0!important}
.cyca-acc.cyca2 .cyc-msg-send:hover{background:var(--a2-accent-ink)!important}
.cyca-acc.cyca2 .cyc-msg-send:disabled{opacity:.45;cursor:default}
.cyca-acc.cyca2 .cyc-msg-send__i{width:18px;height:18px;display:block;margin-left:2px}

/* toolbar: icon, name, one line of explanation - as the mockup */
.cyca-acc.cyca2 .cyc-msg-toolbar{align-items:flex-start!important;gap:.75rem!important}
.cyca-acc.cyca2 .cyc-msg-tb-ico{width:22px!important;height:22px!important;
  color:var(--a2-accent)!important;flex:0 0 auto;margin-top:.15rem}
.cyca-acc.cyca2 .cyc-msg-tb-txt{min-width:0}
.cyca-acc.cyca2 .cyc-msg-tb-t{display:block!important;margin:0!important;font-family:var(--a2-font);
  font-size:15px!important;font-weight:700!important;color:var(--cyc-ink)!important;
  text-transform:none!important;letter-spacing:0!important}
.cyca-acc.cyca2 .cyc-msg-tb-sub{display:block!important;margin:.1rem 0 0!important;
  font-size:13px!important;color:var(--cyc-mute)!important;line-height:1.45}
.cyca-acc.cyca2 .cyc-msg-status:empty{display:none}

/* The plugin caps the messenger at 900px, which left a dead band to the right. */
.cyca-acc.cyca2 .cyc-msg-wrap{max-width:none!important;margin:0!important}

/* ==========================================================================
 * DESIGN SIGNATURE (owner 2026-08-31)
 * The 2px #221c2e rule under the nav becomes a repeated mark: the right edge of
 * the sidebar, the rule under the view title, and the top and bottom of the bug
 * report bar. One weight, one colour, used deliberately in a few places rather
 * than a scatter of hairlines.
 * ======================================================================== */
.cyca-acc.cyca2{
  /* the column-painting gradient draws the sidebar's right edge, so the signature
     goes in there rather than as a border on the rail */
  background:linear-gradient(90deg,
    var(--a2-surface) 0, var(--a2-surface) var(--a2-rail),
    #221c2e var(--a2-rail), #221c2e calc(var(--a2-rail) + 2px),
    transparent calc(var(--a2-rail) + 2px))!important}
.cyca-acc.cyca2 .cyca2__bar{border-bottom:2px solid #221c2e!important}
@media(max-width:900px){
  .cyca-acc.cyca2{background:none!important}
  .cyca-acc.cyca2 .cyca2__rail{border-right:2px solid #221c2e}
}

/* the bar now carries name + one line, so the view's own duplicate heading goes */
.cyca-acc.cyca2 .cyca2__bar{align-items:baseline}
.cyca2__titlewrap{display:flex;align-items:baseline;gap:.85rem;flex-wrap:wrap;min-width:0}
.cyca2__sub{font-size:13px;color:var(--cyc-mute);line-height:1.4;min-width:0}
.cyca-acc.cyca2 .cyc-msg-toolbar{display:none!important}
@media(max-width:900px){
  .cyca2__titlewrap{gap:0;flex-direction:column;align-items:flex-start}
  .cyca2__sub{font-size:12.5px}
}

/* The signature edge as a real element rather than a background gradient. The gradient was
   being covered for the height of the sticky title bar, so the line started below it and the
   corner looked broken. A pseudo-element pinned down the column, above the bar's background,
   cannot be painted over. */
.cyca-acc.cyca2{position:relative}
.cyca-acc.cyca2::before{content:"";position:absolute;top:0;bottom:0;
  left:var(--a2-rail);width:2px;background:#221c2e;z-index:6;pointer-events:none}
@media(max-width:900px){.cyca-acc.cyca2::before{display:none}}

/* the view's own duplicate heading: hidden by name, not just by the toolbar wrapper */
.cyca-acc.cyca2 .cyc-msg-toolbar,
.cyca-acc.cyca2 .cyc-msg-tb-t,
.cyca-acc.cyca2 .cyc-msg-tb-sub,
.cyca-acc.cyca2 .cyc-msg-tb-ico{display:none!important}
.cyca-acc.cyca2 .cyc-msg-card{padding-top:.2rem}

/* ==========================================================================
 * The messenger fills the area it is given (owner 2026-08-31)
 * It had a min-height/max-height, so on a tall window the card stopped partway
 * down and the composer floated in the middle with dead paper beneath it. A
 * messenger's composer belongs at the bottom of the space, always.
 *
 * A flex chain from the main column down to the card does it without guessing
 * pixel offsets for the header, the notice bar or the title bar.
 * ======================================================================== */
/* the chrome above is the site header + the title bar; below is the bug bar. Measured
   rather than guessed: 120px overshot and left paper under the composer. */
/* --cyca2-top and --cyca2-foot are measured at runtime (cylocybe-account-v2.js): every
   fixed guess at this offset was wrong on some screen, which is why the composer kept
   sitting halfway up the page. */
.cyca-acc.cyca2 .cyca2__main:has(.cyc-msg-wrap){
  /* height, not min-height: flex children can only fill a DEFINITE height, which is why
     min-height left the composer floating with paper beneath it. */
  height:calc(100dvh - var(--cyca2-top,180px) - var(--cyca2-foot,0px));
  min-height:420px}
.cyca-acc.cyca2 .cyca2__wrap:has(.cyc-msg-wrap){padding-bottom:.6rem}
.cyca-acc.cyca2 .cyca2__wrap:has(.cyc-msg-wrap){display:flex;flex-direction:column;flex:1;min-height:0}
.cyca-acc.cyca2 .cyca-acc__content:has(.cyc-msg-wrap){display:flex;flex-direction:column;flex:1;min-height:0}
.cyca-acc.cyca2 .cyc-msg-wrap{display:flex;flex-direction:column;flex:1;min-height:0}
.cyca-acc.cyca2 .cyc-msg-card{flex:1;min-height:340px!important;max-height:none!important}
.cyca-acc.cyca2 .cyc-msg-app{flex:1;min-height:0;display:flex;flex-direction:column}

/* the EZ lede now lives in the title bar, so the in-view copy would be a duplicate */
.cyca-acc.cyca2 .ezc-lede{display:none!important}
.cyca2__sub a{color:var(--a2-accent);font-weight:600;text-decoration:none}
.cyca2__sub a:hover{text-decoration:underline}

/* ==========================================================================
 * COMM PREFS - toggle switches, per the mockup (2026-08-31)
 * The markup is a bare <input type="checkbox"> with no label to hang a fake control on,
 * so the input IS the switch: appearance:none turns off the native box, the element
 * becomes the track, and ::before is the knob. No markup change needed.
 * ======================================================================== */
.cyca-acc.cyca2 .cyc-comm__cards{border-top:2px solid #221c2e}
.cyca-acc.cyca2 .cyc-comm__head{display:none}          /* a two-column header for one column */
.cyca-acc.cyca2 .cyc-comm__card{display:block;padding:1.15rem .25rem!important}
.cyca-acc.cyca2 .cyc-comm__card-lg{display:block;float:none;width:auto;padding:0;
  font-family:var(--a2-font)!important;font-size:15px!important;font-weight:700!important;
  color:var(--cyc-ink)!important;text-transform:none!important;letter-spacing:0!important;
  margin:0 0 .2rem!important}
.cyca-acc.cyca2 .cyc-comm__card-row{display:flex;align-items:center;gap:1.4rem;justify-content:space-between}
.cyca-acc.cyca2 .cyc-comm__desc{font-size:13.5px!important;color:var(--cyc-mute)!important;
  margin:0!important;max-width:62ch;flex:1 1 auto}
.cyca-acc.cyca2 .cyc-comm__ch{flex:0 0 auto;display:inline-flex;align-items:center;gap:.7rem}

.cyca-acc.cyca2 .cyc-comm__ch input[type="checkbox"]{
  -webkit-appearance:none;appearance:none;margin:0;
  width:46px!important;height:27px!important;flex:0 0 46px;
  border:0!important;border-radius:999px!important;background:#d6d3cc!important;
  position:relative;cursor:pointer;transition:background .15s;color-scheme:light}
.cyca-acc.cyca2 .cyc-comm__ch input[type="checkbox"]::before{
  content:"";position:absolute;top:3px;left:3px;width:21px;height:21px;border-radius:50%;
  background:#fff;transition:transform .15s;box-shadow:0 1px 3px rgba(0,0,0,.24)}
.cyca-acc.cyca2 .cyc-comm__ch input[type="checkbox"]:checked{background:var(--a2-accent)!important}
.cyca-acc.cyca2 .cyc-comm__ch input[type="checkbox"]:checked::before{transform:translateX(19px)}
.cyca-acc.cyca2 .cyc-comm__ch input[type="checkbox"]:focus-visible{
  outline:2px solid var(--a2-accent);outline-offset:2px}
.cyca-acc.cyca2 .cyc-comm__ch input[type="checkbox"]:disabled{cursor:not-allowed;
  background:#c3ccc7!important}
.cyca-acc.cyca2 .cyc-comm__ch input[type="checkbox"]:disabled::before{box-shadow:none}
/* say WHY a locked row cannot be changed, rather than just greying it out */
.cyca-acc.cyca2 .cyc-comm__card.is-locked .cyc-comm__ch::before{
  content:"Always on";font-size:11.5px;color:var(--cyc-mute);white-space:nowrap}

.cyca-acc.cyca2 .cyc-comm__btn{background:var(--a2-accent)!important;
  border:1px solid var(--a2-accent)!important;color:#fff!important;border-radius:9px!important;
  font-weight:650!important;text-transform:none!important;letter-spacing:0!important;
  font-size:14.5px!important;padding:.7rem 1.15rem!important;box-shadow:none!important}
.cyca-acc.cyca2 .cyc-comm__btn--ghost{background:none!important;color:var(--cyc-ink)!important;
  border-color:var(--a2-line)!important}
.cyca-acc.cyca2 .cyc-comm__form{margin-top:1.4rem}
.cyca-acc.cyca2 .cyc-comm__note{margin-top:1rem}

@media(max-width:700px){
  .cyca-acc.cyca2 .cyc-comm__card-row{gap:.9rem}
  .cyca-acc.cyca2 .cyc-comm__card.is-locked .cyc-comm__ch::before{display:none}
}

/* the old sheet draws a tick with ::after on the checked box - a leftover tick floating
   inside the switch track once the native control is turned off */
.cyca-acc.cyca2 .cyc-comm__ch input[type="checkbox"]::after{content:none!important;display:none!important}
/* and no card round comm prefs: the mockup has the rows on the page */
body.woocommerce-comm-prefs .cyca-acc.cyca2 .cyca-acc__content{
  background:none!important;border:0!important;padding:0!important}

/* ==========================================================================
 * SITE LINKS in the account (2026-08-31) - the footer's links, moved into the rail
 * Ruled rows with a chevron, the same shape as every other list in here.
 * ======================================================================== */
.cyca-acc.cyca2 .cylo-links{list-style:none;margin:0;padding:0;border-top:2px solid #221c2e;
  max-width:44rem}
.cyca-acc.cyca2 .cylo-links li{margin:0}
.cyca-acc.cyca2 .cylo-links a{display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding:1.05rem .25rem;border-bottom:1px solid var(--a2-line-2);
  color:var(--cyc-ink)!important;font-size:15px;font-weight:600;text-decoration:none}
.cyca-acc.cyca2 .cylo-links a:hover{background:var(--a2-line-2);color:var(--a2-accent)!important}
.cyca-acc.cyca2 .cylo-links svg{flex:0 0 auto;opacity:.4}
.cyca-acc.cyca2 .cylo-links a:hover svg{opacity:1;color:var(--a2-accent)}
.cyca-acc.cyca2 .cylo-links li:last-child a{border-bottom:0}

/* ==========================================================================
 * EVERY REMAINING VIEW, to the mockup (2026-08-31)
 * account-views.html is the reference. Class names read from the rendered pages.
 * ======================================================================== */

/* ---- ORDERS: the mockup's card, with the next-step line -------------------- */
.cyca-acc.cyca2 .cyca-ocards{display:grid;gap:.85rem}
.cyca-acc.cyca2 .cyca-ocard{border:1px solid var(--a2-line);border-radius:14px;
  background:var(--a2-surface);padding:.4rem 1.15rem 1.1rem}
.cyca-acc.cyca2 .cyca-ocard--accent{border-color:var(--a2-alert-line)}
.cyca-acc.cyca2 .cyca-ocard__legend{padding:0 .5rem;font-family:var(--a2-font);
  font-size:14px;font-weight:700;display:flex;align-items:center;gap:.55rem}
.cyca-acc.cyca2 .cyca-ocard__num{color:var(--cyc-ink);font-weight:800}
.cyca-acc.cyca2 .cyca-ocard__dot{width:7px;height:7px;border-radius:50%}
.cyca-acc.cyca2 .cyca-ocard__head{display:flex;align-items:center;gap:.9rem;width:100%;
  background:none;border:0;padding:.55rem 0;text-align:left;cursor:pointer}
.cyca-acc.cyca2 .cyca-ocard__items{display:flex;flex-direction:column;align-items:stretch;
  gap:.55rem;min-width:0;flex:1 1 auto}
.cyca-acc.cyca2 .cyca-ocard__thumb{width:44px;height:44px;border-radius:10px;overflow:hidden;
  background:var(--a2-line-2)!important;border:1px solid var(--a2-line);flex:0 0 auto}
.cyca-acc.cyca2 .cyca-ocard__thumb img{width:100%;height:100%;object-fit:cover}
.cyca-acc.cyca2 .cyca-ocard__iname{font-size:14.5px;color:var(--cyc-soft)}
.cyca-acc.cyca2 .cyca-ocard__facts{margin-left:auto;text-align:right;display:flex;
  flex-direction:column;gap:.15rem;flex:0 0 auto}
.cyca-acc.cyca2 .cyca-ocard__date{font-size:12.5px;color:var(--cyc-mute);
  text-transform:none;letter-spacing:0}
.cyca-acc.cyca2 .cyca-ocard__total{font-weight:700;color:var(--cyc-ink);font-size:14.5px}
.cyca-acc.cyca2 .cyca-ocard__foot{display:block;padding:.2rem 0 0}
/* the mockup's "Next: ..." line - a quiet instruction, not a coloured alert slab */
.cyca-acc.cyca2 .cyca-ocard__note{background:var(--a2-line-2)!important;border:0!important;
  border-left:0!important;border-radius:9px!important;padding:.65rem .8rem!important;
  color:var(--cyc-soft)!important;font-size:13.5px!important;margin:.5rem 0 0!important;
  flex:0 0 auto;max-width:none}
.cyca-acc.cyca2 .cyca-ocard__actions{margin:.7rem 0 0!important;padding:0!important;
  border:0!important;background:none!important;display:flex;gap:.5rem;flex-wrap:wrap}
.cyca-acc.cyca2 .cyca-ocard__actions-lbl{display:none}
.cyca-acc.cyca2 .cyca-ocard__toggle{margin-top:.7rem;width:100%}

/* ---- STOCK ALERTS + DOWNLOADS: designed empty states ---------------------- */
.cyca-acc.cyca2 .cyca-card__p{font-size:14.5px;color:var(--cyc-soft);margin:0 0 1.1rem;max-width:70ch}
.cyca-acc.cyca2 .cyca-alerts{display:grid;border-top:2px solid #221c2e}
.cyca-acc.cyca2 .cyca-alerts li,
.cyca-acc.cyca2 .cyca-alerts > div{display:flex;align-items:center;gap:.95rem;
  padding:1rem .25rem;border-bottom:1px solid var(--a2-line-2)}
.cyca-acc.cyca2 .cyca-pill{font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  font-weight:700;border-radius:999px;padding:.24rem .6rem;background:var(--a2-line-2);
  color:var(--cyc-soft)}
.cyca-acc.cyca2 .cyca-pill--on{background:var(--a2-accent-wash);color:var(--a2-accent)}
.cyca-acc.cyca2 .cyca-btn2{background:none!important;color:var(--cyc-ink)!important;
  border:1px solid var(--a2-line)!important;border-radius:9px!important;
  font-size:13.5px!important;font-weight:650!important;letter-spacing:0!important;
  text-transform:none!important;padding:.55rem .85rem!important;box-shadow:none!important}
.cyca-acc.cyca2 .cyca-btn2:hover{background:var(--a2-line-2)!important}

body.woocommerce-downloads .cyca-acc.cyca2 .woocommerce-info,
.cyca-acc.cyca2 .cyca-alerts__empty{
  text-align:center!important;padding:3.6rem 1.2rem 1rem!important;max-width:46ch;
  margin:0 auto!important;color:var(--cyc-mute)!important;font-size:14.5px!important;
  background:none!important;border:0!important}
body.woocommerce-downloads .cyca-acc.cyca2 .button.wc-forward{
  display:inline-flex!important;margin:0 auto!important;background:none!important;
  color:var(--cyc-ink)!important;border:1px solid var(--a2-line)!important}

/* ---- EZ-REPLACEMENTS: the mockup's pickers -------------------------------- */
.cyca-acc.cyca2 .cyc-ez-wrap{max-width:none}
.cyca-acc.cyca2 .cyc-ez-wrap h3,
.cyca-acc.cyca2 .cyc-ez-wrap h4{font-family:var(--a2-font)!important;font-size:12px!important;
  letter-spacing:.09em!important;text-transform:uppercase!important;color:var(--cyc-mute)!important;
  font-weight:800!important;margin:1.7rem 0 .8rem!important}
.cyca-acc.cyca2 .cyc-ez-wrap h3:first-child{margin-top:0!important}
.cyca-acc.cyca2 .cyc-ez-wrap button,
.cyca-acc.cyca2 .cyc-ez-wrap .button{border-radius:9px!important;font-size:13.5px!important;
  text-transform:none!important;letter-spacing:0!important;padding:.6rem 1rem!important}

/* ---- ADDRESS + ACCOUNT: plain forms, mockup spacing ----------------------- */
body.woocommerce-edit-address .cyca-acc.cyca2 .cyca-acc__content,
body.woocommerce-edit-account .cyca-acc.cyca2 .cyca-acc__content{
  background:none!important;border:0!important;padding:0!important;max-width:44rem}
body.woocommerce-edit-address .cyca-acc.cyca2 .cyc-step__fields,
body.woocommerce-edit-account .cyca-acc.cyca2 .cyc-step__fields{
  display:grid;grid-template-columns:1fr 1fr;gap:0 1rem}
body.woocommerce-edit-address .cyca-acc.cyca2 .form-row,
body.woocommerce-edit-account .cyca-acc.cyca2 .form-row{
  grid-column:1 / -1;float:none!important;width:auto!important;margin:0 0 1rem!important;padding:0}
body.woocommerce-edit-address .cyca-acc.cyca2 label,
body.woocommerce-edit-account .cyca-acc.cyca2 label{
  display:block;font-size:12.5px;font-weight:650;color:var(--cyc-soft);margin:0 0 .35rem}
body.woocommerce-edit-address .cyca-acc.cyca2 input,
body.woocommerce-edit-account .cyca-acc.cyca2 input,
body.woocommerce-edit-address .cyca-acc.cyca2 select{
  border:1px solid #c9c5bd!important;border-radius:9px!important;padding:.7rem .8rem!important;
  background:var(--a2-surface)!important;font-size:15px!important}
.cyca-acc.cyca2 .cyc-step-actions{margin-top:.6rem}

@media(max-width:700px){
  body.woocommerce-edit-address .cyca-acc.cyca2 .cyc-step__fields,
  body.woocommerce-edit-account .cyca-acc.cyca2 .cyc-step__fields{grid-template-columns:1fr}
  .cyca-acc.cyca2 .cyca-ocard__facts{margin-left:0;text-align:left;flex-direction:row;
    justify-content:space-between;width:100%}
}

/* ==========================================================================
 * PASS 2 - what the screenshots showed was still wrong
 * ======================================================================== */

/* Orders: the item row was centring itself in the flex track. */
/* The base rule makes this a COLUMN (one row per line item), so align-items:center was
   centring the products horizontally. In a column container that axis is the cross axis. */
.cyca-acc.cyca2 .cyca-ocard__items{align-items:stretch;justify-content:flex-start}
.cyca-acc.cyca2 .cyca-ocard__item{justify-content:flex-start}
.cyca-acc.cyca2 .cyca-ocard__head{gap:1.1rem}
/* "View full order" was a full-width grey slab. The mockup has a quiet ruled link. */
.cyca-acc.cyca2 .cyca-ocard__toggle{background:none!important;border:0!important;
  border-top:1px solid var(--a2-line-2)!important;border-radius:0!important;
  padding:.75rem 0 .1rem!important;color:var(--cyc-mute)!important;font-size:13px!important;
  font-weight:650!important;text-transform:none!important;letter-spacing:0!important;
  display:flex!important;align-items:center;gap:.4rem;justify-content:flex-start}
.cyca-acc.cyca2 .cyca-ocard__toggle:hover{color:var(--cyc-ink)!important;background:none!important}

/* Stock alerts: the body opened by repeating the sentence already in the title bar. */
body.woocommerce-stock-alerts .cyca-acc.cyca2 .cyca-card__p:first-child{display:none}
body.woocommerce-stock-alerts .cyca-acc.cyca2 .cyca-card__p{
  text-align:center;max-width:44ch;margin:3.4rem auto 0;color:var(--cyc-mute);font-size:14.5px}

/* Account + address labels were shouting in caps; the mockup is sentence case. */
body.woocommerce-edit-account .cyca-acc.cyca2 label,
body.woocommerce-edit-address .cyca-acc.cyca2 label{
  text-transform:none!important;letter-spacing:0!important;font-size:13px!important;
  color:var(--cyc-soft)!important;font-weight:650!important}
body.woocommerce-edit-account .cyca-acc.cyca2 .cyc-step__body > .cyc-step__fields > p:nth-child(1),
body.woocommerce-edit-account .cyca-acc.cyca2 .cyc-step__body > .cyc-step__fields > p:nth-child(2){
  grid-column:span 1}
body.woocommerce-edit-account .cyca-acc.cyca2 em,
body.woocommerce-edit-account .cyca-acc.cyca2 .description{
  display:block;font-style:normal;font-size:12.5px;color:var(--cyc-mute);margin-top:.35rem}

/* ==========================================================================
 * PASS 3 - empty states, the one thing a customer sees most often
 * ======================================================================== */

/* Downloads had its sentence and its button sitting on one line mid-page.
   The mockup stacks them, centred, with a soft glyph above. */
body.woocommerce-downloads .cyca-acc.cyca2 .woocommerce-info{
  display:flex!important;flex-direction:column;align-items:center;gap:1rem;
  padding:4.5rem 1.2rem 1rem!important;max-width:40ch}
body.woocommerce-downloads .cyca-acc.cyca2 .woocommerce-info::before{content:"";display:block;width:60px;height:60px;border-radius:50%;background:var(--a2-line-2) url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23736e7d%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22><path d=%22M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4%22/><path d=%22M7 10l5 5 5-5%22/><path d=%22M12 15V3%22/></svg>") no-repeat center/26px 26px}
body.woocommerce-stock-alerts .cyca-acc.cyca2 .cyca-card{
  display:flex;flex-direction:column;align-items:center}
body.woocommerce-stock-alerts .cyca-acc.cyca2 .cyca-card__p{margin:0;padding-top:1rem}
body.woocommerce-stock-alerts .cyca-acc.cyca2 .cyca-card::before{content:"";display:block;width:60px;height:60px;border-radius:50%;margin:4.5rem auto 0;background:var(--a2-line-2) url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23736e7d%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22><path d=%22M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9%22/><path d=%22M13.7 21a2 2 0 0 1-3.4 0%22/></svg>") no-repeat center/26px 26px}

/* EZ-Replacements loads its picker over ajax; until it lands the raw sentence
   sat at the top left looking like a broken page. */
.cyca-acc.cyca2 .cyc-ez-wrap > p:only-child{
  text-align:center;color:var(--cyc-mute);font-size:14.5px;padding:4rem 0 0}

/* ==========================================================================
 * PASS 4 - the composer still floated: __main held the height but was not a
 * flex column, so the flex:1 chain beneath it had nothing to grow inside.
 * ======================================================================== */
.cyca-acc.cyca2 .cyca2__main:has(.cyc-msg-wrap){display:flex;flex-direction:column}
.cyca-acc.cyca2 .cyca2__main:has(.cyc-msg-wrap) > *{min-height:0}

/* If the messenger script has not painted its icon yet, the send button was a
   blank green slab. Draw a paper-plane fallback only when the icon is absent. */
.cyca-acc.cyca2 .cyc-msg-send:not(:has(.cyc-msg-send__i))::after{
  content:"";width:0;height:0;border-style:solid;border-width:8px 0 8px 13px;
  border-color:transparent transparent transparent #fff;margin-left:3px;
  background:none;border-radius:0;transform:none}

/* ==========================================================================
 * PASS 5 - the actual reason the composer floated.
 * The messenger plugin prints .cyc-msg-thread{max-height:52vh} in an inline
 * <style> in the body. My rules set flex/overflow but never max-height, so
 * there was nothing competing with it: the thread simply stopped at 52% of the
 * viewport and left the rest of the column empty. Nothing to do with the
 * flex chain, which is why every height guess above it missed.
 * ======================================================================== */
.cyca-acc.cyca2 .cyc-msg-thread{max-height:none!important}
.cyca-acc.cyca2 .cyc-msg-wrap{max-width:none!important}
.cyca-acc.cyca2 .cyc-msg-composer{margin-top:auto!important}

/* PASS 6 - real icons in the empty states; the CSS-drawn ones read as a stray glyph. */

/* ==========================================================================
 * DASHBOARD (2026-08-31)
 * dashboard.php was rebuilt to the mockup but its stylesheet was never written,
 * so the page shipped semantic markup with browser defaults: raw list bullets and
 * full-size thumbnails. This is the mockup's .todo / .card / .list / .track,
 * mapped onto the template's real class names.
 * ======================================================================== */
.cyca-acc.cyca2 .cyca-dash{display:block}

/* 1. NEEDS YOU - the only block allowed the alert colour */
.cyca-acc.cyca2 .cyca-dash__todo{background:var(--a2-alert-wash);border:1px solid var(--a2-alert-line);
  border-radius:14px;padding:1.15rem 1.25rem;margin:0 0 1.3rem}
.cyca-acc.cyca2 .cyca-dash__k{display:inline-flex;align-items:center;gap:.4rem;font-size:11.5px;
  letter-spacing:.09em;text-transform:uppercase;font-weight:700;color:var(--a2-alert);margin:0 0 .5rem}
.cyca-acc.cyca2 .cyca-dash__k svg{width:14px;height:14px;flex:0 0 auto}
.cyca-acc.cyca2 .cyca-dash__h{margin:0 0 .3rem;font-size:18px;font-weight:700;
  font-family:var(--a2-font);color:var(--cyc-ink);letter-spacing:0;text-transform:none}
.cyca-acc.cyca2 .cyca-dash__p{margin:0 0 1rem;color:var(--cyc-soft);font-size:14px}
.cyca-acc.cyca2 .cyca-dash__due{display:grid;grid-template-columns:1fr auto;gap:.9rem;
  align-items:center;background:var(--a2-surface);border:1px solid var(--a2-alert-line);
  border-radius:10px;padding:.85rem 1rem}
.cyca-acc.cyca2 .cyca-dash__duein{min-width:0}
.cyca-acc.cyca2 .cyca-dash__num{font-weight:700;color:var(--cyc-ink);font-size:14.5px}
.cyca-acc.cyca2 .cyca-dash__sub{display:block;margin:.15rem 0 0;font-size:12.5px;color:var(--cyc-mute)}
.cyca-acc.cyca2 .cyca-dash__go{display:inline-flex;align-items:center;justify-content:center;
  background:var(--a2-accent);color:#fff;border:0;border-radius:9px;padding:.6rem 1rem;
  font-size:13.5px;font-weight:650;text-decoration:none;white-space:nowrap}
/* it is an <a>; the theme's link colour was winning and the label rendered green on green */
.cyca-acc.cyca2 a.cyca-dash__go,
.cyca-acc.cyca2 a.cyca-dash__go:visited{color:#fff!important}
.cyca-acc.cyca2 .cyca-dash__go:hover{background:var(--a2-accent-ink);color:#fff!important}

/* 2 + 3. plain blocks, ruled lists - no card stack */
.cyca-acc.cyca2 .cyca-dash__blk{margin:0 0 1.6rem}
.cyca-acc.cyca2 .cyca-dash__bh{margin:0 0 .2rem;font-family:var(--a2-font);font-size:16px;
  font-weight:700;color:var(--cyc-ink);letter-spacing:0;text-transform:none}
.cyca-acc.cyca2 .cyca-dash__bs{margin:0 0 .9rem;font-size:13.5px;color:var(--cyc-mute)}
.cyca-acc.cyca2 .cyca-dash__bs a{color:var(--a2-accent);font-weight:650;text-decoration:none}

.cyca-acc.cyca2 .cyca-dash__list{list-style:none;margin:0;padding:0;border-top:2px solid #221c2e}
.cyca-acc.cyca2 .cyca-dash__row{display:grid;grid-template-columns:auto 1fr auto;gap:.9rem;
  align-items:center;padding:.9rem .25rem;border-bottom:1px solid var(--a2-line-2);margin:0}
.cyca-acc.cyca2 .cyca-dash__thumb{width:44px;height:44px;border-radius:10px;overflow:hidden;
  background:var(--a2-line-2);border:1px solid var(--a2-line);flex:0 0 auto;display:block}
.cyca-acc.cyca2 .cyca-dash__thumb img{width:100%;height:100%;object-fit:cover;display:block}
.cyca-acc.cyca2 .cyca-dash__rw{min-width:0;display:block}
.cyca-acc.cyca2 .cyca-dash__rt{display:block;font-size:14.5px;font-weight:650;color:var(--cyc-ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cyca-acc.cyca2 .cyca-dash__rm{display:block;margin:.15rem 0 0;font-size:12.5px;color:var(--cyc-mute)}
.cyca-acc.cyca2 .cyca-dash__st{font-weight:650}
.cyca-acc.cyca2 .cyca-dash__st.is-wait{color:var(--a2-alert)}
.cyca-acc.cyca2 .cyca-dash__st.is-go{color:var(--a2-accent)}
.cyca-acc.cyca2 .cyca-dash__st.is-done{color:var(--cyc-mute)}
.cyca-acc.cyca2 .cyca-dash__view{display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--a2-line);border-radius:9px;padding:.5rem .85rem;font-size:13px;
  font-weight:650;color:var(--cyc-ink);text-decoration:none;white-space:nowrap;background:none}
.cyca-acc.cyca2 .cyca-dash__view:hover{background:var(--a2-line-2);color:var(--cyc-ink)}
.cyca-acc.cyca2 .cyca-dash__empty{color:var(--cyc-mute);font-size:14.5px;margin:0}

/* the four-stage tracker */
.cyca-acc.cyca2 .cyca-track{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);
  gap:.4rem;margin:.9rem 0 0;padding:0}
.cyca-acc.cyca2 .cyca-track__s{position:relative;padding-top:1.5rem;font-size:12.5px;
  color:var(--cyc-mute);text-align:center;margin:0}
.cyca-acc.cyca2 .cyca-track__s::before{content:"";position:absolute;top:5px;left:50%;
  transform:translateX(-50%);width:12px;height:12px;border-radius:50%;background:var(--a2-line);
  border:2px solid var(--a2-paper);z-index:1}
.cyca-acc.cyca2 .cyca-track__s::after{content:"";position:absolute;top:10px;left:-50%;
  width:100%;height:2px;background:var(--a2-line)}
.cyca-acc.cyca2 .cyca-track__s:first-child::after{display:none}
.cyca-acc.cyca2 .cyca-track__s.is-done{color:var(--cyc-ink)}
.cyca-acc.cyca2 .cyca-track__s.is-done::before,
.cyca-acc.cyca2 .cyca-track__s.is-done::after{background:var(--a2-good,#1c7c54)}
.cyca-acc.cyca2 .cyca-track__s.is-now{color:var(--a2-alert);font-weight:700}
.cyca-acc.cyca2 .cyca-track__s.is-now::before{background:var(--a2-alert);
  box-shadow:0 0 0 4px var(--a2-alert-wash)}

@media(max-width:700px){
  .cyca-acc.cyca2 .cyca-dash__due{grid-template-columns:1fr}
  .cyca-acc.cyca2 .cyca-dash__go{width:100%}
  .cyca-acc.cyca2 .cyca-dash__row{grid-template-columns:auto 1fr;gap:.7rem}
  .cyca-acc.cyca2 .cyca-dash__view{grid-column:1/-1;width:100%}
  .cyca-acc.cyca2 .cyca-dash__rt{white-space:normal}
  .cyca-acc.cyca2 .cyca-track{gap:.2rem}
  .cyca-acc.cyca2 .cyca-track__s{font-size:11px}
}