/* cartesianecu.com/account/: the customer's read-only profile page (assets/account.js). On top of site.css (tokens, header,
   buttons, footer); nothing here is used by the home page. */
.acc-page{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
/* text colours with AA contrast (4.5:1) on their tints; the plain --ok and --bad stay for dots and bars. (The light theme's
   buttons are the app's blue now: white ink on #2563eb is 5.2:1, site.css's own --accent-ink) */
.acc-page{--bad:#e5484d;--ok-text:var(--ok);--bad-text:#ff6b6f}
:root[data-theme="light"] .acc-page{--ok-text:#11703f;--bad-text:#b42318}
.acc{flex:1;padding:0 0 64px}
.acc > .acc-wrap{padding-top:32px}
.acc-wrap{max-width:860px}
.acc-page .head-tools > .lang-dd{display:block}                    /* no menu drawer here: the language stays in the header */
.acc-page .site-foot{padding:0 0 22px}
.acc-page .foot-legal{margin-top:0;align-items:center}
.acc-page .foot-legal a{color:var(--muted)}
@media (hover:hover){.acc-page .foot-legal a:hover{color:var(--accent)}}

.acc-head{margin-bottom:26px}
.acc-head h1{font-weight:600;letter-spacing:-.02em;font-size:clamp(28px,4.4vw,40px);margin:10px 0 0}
.acc-head .sec-lede{margin-top:10px}

/* loading and the message states */
.acc-state{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:30px 28px}
.acc-page [hidden]{display:none!important}                         /* a state, the note, a cell: hidden wins over any display */
#accLoading{display:flex;align-items:center;gap:14px;color:var(--muted)}
#accLoading p{margin:0}
.acc-spin{width:22px;height:22px;flex:none;border-radius:50%;border:3px solid var(--line2);border-top-color:var(--accent);animation:acc-spin .8s linear infinite}
@keyframes acc-spin{to{transform:rotate(360deg)}}
.acc-msg h2{font-size:21px}
.acc-msg p{margin:10px 0 0;color:var(--muted);max-width:60ch}
.acc-msg p.acc-lead{color:var(--text);font-size:17px}
.acc-msg .btn{margin-top:18px}
.acc-msg::before{content:"";display:block;width:44px;height:44px;border-radius:12px;margin-bottom:16px;background:color-mix(in srgb,var(--accent) 15%,transparent) no-repeat center/24px}
#accGone::before,#accBusy::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='%23ff8a3d' stroke-width='2'/%3E%3Cpath d='M12 7v5l3 2' fill='none' stroke='%23ff8a3d' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E")}
#accError::before,#accNone::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3l9.5 17h-19z' fill='none' stroke='%23ff8a3d' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M12 10v4M12 17v.5' fill='none' stroke='%23ff8a3d' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E")}

/* the profile */
#accProfile{display:grid;gap:18px}
.acc-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:24px 26px;min-width:0}
.acc-card > h2{font-size:18px;margin-bottom:14px}
.acc-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap}
.acc-card-head h2{font-weight:600;letter-spacing:-.02em;font-size:clamp(20px,3vw,26px);margin-top:4px;overflow-wrap:anywhere}
.acc-label,.acc-grid dt{display:block;font-size:12.5px;font-weight:600;color:var(--muted)}
.acc-badge{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:700;padding:6px 12px;border-radius:999px;white-space:nowrap;
  color:var(--ok-text);background:color-mix(in srgb,var(--ok) 14%,transparent)}
.acc-badge::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.acc-badge[data-st="expiring"]{color:var(--accent-text);background:color-mix(in srgb,var(--accent) 16%,transparent)}
.acc-badge[data-st="expired"],.acc-badge[data-st="suspended"],.acc-badge[data-st="revoked"]{color:var(--bad-text);background:color-mix(in srgb,var(--bad) 14%,transparent)}
.acc-note{margin:16px 0 0;padding:12px 14px;border-radius:12px;border:1px solid color-mix(in srgb,var(--accent) 40%,var(--line));
  background:color-mix(in srgb,var(--accent) 8%,transparent);font-size:15px}
.acc-note a{color:var(--accent-text);font-weight:600;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.acc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 20px;margin:20px 0 0}
.acc-grid dd{margin:4px 0 0;font-size:16px;font-weight:600;overflow-wrap:anywhere}
.mono{font-family:ui-monospace,'Cascadia Mono',Consolas,monospace;letter-spacing:.02em}

.acc-pcs,.acc-use{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.acc-pc{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 14px;align-items:center;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--panel2)}
.acc-pc-head{grid-column:1;min-width:0}
.acc-pc-name{font-weight:700;overflow-wrap:anywhere}
.acc-tag{display:inline-block;margin-left:8px;font-size:12px;font-weight:600;padding:2px 8px;border-radius:999px;color:var(--accent-text);
  background:color-mix(in srgb,var(--accent) 14%,transparent);vertical-align:1px}
.acc-pc-meta{grid-column:1;display:flex;flex-wrap:wrap;gap:4px 16px;color:var(--muted);font-size:13.5px}
.acc-pc-meta .mono{font-size:12.5px}
.acc-open{grid-column:2;grid-row:1 / span 2;display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:var(--muted);white-space:nowrap}
.acc-open::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--line2)}
.acc-open[data-open="1"]{color:var(--ok-text)}
.acc-open[data-open="1"]::before{background:var(--ok);box-shadow:0 0 0 4px color-mix(in srgb,var(--ok) 20%,transparent)}

.acc-sub{margin:-6px 0 14px;color:var(--muted);font-size:14.5px}
.acc-use li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;align-items:baseline}
.acc-use b{font-variant-numeric:tabular-nums;font-size:15px}
.acc-use progress{grid-column:1 / -1;width:100%;height:8px;border:0;border-radius:999px;overflow:hidden;background:var(--line);color:var(--accent);
  -webkit-appearance:none;appearance:none}
.acc-use progress::-webkit-progress-bar{background:var(--line);border-radius:999px}
.acc-use progress::-webkit-progress-value{background:var(--accent);border-radius:999px}
.acc-use progress::-moz-progress-bar{background:var(--accent);border-radius:999px}
.acc-use li.full b{color:var(--bad-text)}
.acc-use li.full progress::-webkit-progress-value{background:var(--bad)}
.acc-use li.full progress::-moz-progress-bar{background:var(--bad)}
.acc-hint{margin:12px 0 0;color:var(--muted);font-size:13.5px}
.acc-hint a{color:var(--accent-text);font-weight:600;text-decoration:underline;text-underline-offset:3px}   /* the read-only line's account and contact */
.acc-bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px}
.acc-bottom .acc-hint,#accProfile > .acc-hint{margin:0}
.acc-refresh{padding:9px 16px;font-size:14px;border-radius:10px}

@media (max-width:760px){
  .acc{padding:30px 0 48px}
  .acc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .acc-card,.acc-state{padding:20px 18px}
}
@media (max-width:420px){
  .acc-pc{grid-template-columns:minmax(0,1fr)}
  .acc-open{grid-column:1;grid-row:auto}
  .acc-page .head-tools{gap:8px}
}
/* the header on a phone: the brand word, the language button and the theme button in 320 px */
@media (max-width:400px){
  .acc-page .brand{gap:8px}
  .acc-page .brand-word{height:19px}
  .acc-page .head-tools{gap:6px}
}

/* ---- the page card (site.css .page-card, 2026-11-08): the account's head on the home page's graphite card with the header's
   notch cut into it; the screens below as before ---- */
.acc-top{padding:calc(var(--head-h) + 40px) 0 30px}
.acc-top .acc-head{margin-bottom:0}
.acc-top h1{color:var(--card-ink)}
.acc-top .sec-lede{color:var(--card-ink2)}
@media (max-width:760px){.acc-top{padding:calc(var(--head-h) + 22px) 0 22px}}
@media (max-width:560px){.acc-page .head-dl,.acc-page .nav-lang{display:none}}
/* the card is inset by the page's margin (--card-g): while it is narrower than the head's column (under 880 px) its inner
   wrap gives that margin back, so the title stands on the same left edge as the cards below it (the suites measure it) */
@media (max-width:879px){.acc-top > .acc-wrap{padding-inline:calc(24px - var(--card-g))}}
@media (max-width:480px){.acc-top > .acc-wrap{padding-inline:calc(18px - var(--card-g))}}