/* ==========================================================================
   Cyber City · the account page (page-account.php, assets/js/account.js) · theme 0.21.0
   Approved by Rayan 6 Oct 2026: direction C of the sign-in round (brief 09-التصميم/pages/header/00-brief.md, sections
   6 to 8), ported from site/proto/auth/auth.css. Signed out: the form beside the turning First light print. Signed in:
   the account in our look, WooCommerce's parts inside. Same rules as every sheet of the theme: tokens only, classes
   start with ecc- (or is-).
   ========================================================================== */
.ecc-au-page { display: grid; gap: var(--ecc-gap); }
/* ===================================================== 7 · THE ACCOUNT PAGE: THE FORMS */
/* One page, two views: Sign in and Create account switch in place (#sign-in, #create). A big friendly heading, one
   line under it, labels that are always there, one main button, then "or" and Google. */
.ecc-au { --_tall: clamp(40rem, calc(100svh - 10rem), 54rem); min-width: 0; }
.ecc-au-side { display: grid; place-items: center; min-width: 0; padding: var(--ecc-s-7) var(--ecc-s-6); }
.ecc-au-side__in { width: min(100%, 29rem); }
.ecc-au-views { display: grid; }
.ecc-au-view { min-width: 0; }
.ecc-au-title { font-size: clamp(2rem, 1.3rem + 1.75vw, 2.75rem); line-height: 1.04; letter-spacing: var(--ecc-ls-display); font-weight: var(--ecc-fw-display); font-stretch: var(--ecc-wdth-display); }
.ecc-au-title:focus { outline: none; } /* it takes the focus when the view switches, so a screen reader starts here; it is not a control */
.ecc-au-lead { margin-top: var(--ecc-s-3); color: var(--ecc-ink-2); max-width: 26em; }
.ecc-au-form { display: grid; gap: calc(var(--ecc-s-4) + 2px); margin-top: var(--ecc-s-6); }
.ecc-au-input { min-height: 52px; }
.ecc-au-err { margin-top: calc(var(--ecc-s-1) * -1); }
.ecc-au-pw { position: relative; }
.ecc-au-pw .ecc-input { padding-right: calc(var(--ecc-s-9) - var(--ecc-s-1)); }
.ecc-au-pw__btn {
  position: absolute; top: 3px; right: 3px; bottom: 3px; display: inline-flex; align-items: center; gap: var(--ecc-s-2); min-width: var(--ecc-hit); padding: 0 var(--ecc-s-3);
  border: 0; border-radius: calc(var(--ecc-r-sm) - 2px); background: transparent; color: var(--ecc-ink-2); font: inherit; font-size: var(--ecc-t-small); font-weight: var(--ecc-fw-medium); cursor: pointer;
  transition: background-color var(--ecc-d-fast) var(--ecc-ease-out), color var(--ecc-d-fast) var(--ecc-ease-out);
}
@media (hover: hover) and (pointer: fine) { .ecc-au-pw__btn:hover { background: var(--ecc-wash); color: var(--ecc-ink); } }
.ecc-au-pw__btn:focus-visible { outline-offset: calc(var(--ecc-focus-width) * -1); }
.ecc-au-pw__btn[aria-pressed="true"] { color: var(--ecc-ink); }
.ecc-au-pw__eye { display: block; flex: none; }
.ecc-au-pw__slash { display: none; }
.ecc-au-pw__btn[aria-pressed="true"] .ecc-au-pw__slash { display: inline; }
.ecc-au-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 var(--ecc-s-4); margin-block: calc(var(--ecc-s-2) * -1); }
.ecc-au-check { margin-left: 0; }
.ecc-au-forgot { display: inline-block; padding-block: 11px; margin-block: -11px; font-size: var(--ecc-t-small); } /* 44 px tall to press (it was 22), the row keeps its height (function audit m6) */
.ecc-au-submit { min-height: calc(var(--ecc-s-7) + var(--ecc-s-1) + 2px); margin-top: var(--ecc-s-1); font-size: var(--ecc-t-body-lg); }
.ecc-au-or { display: flex; align-items: center; gap: var(--ecc-s-3); margin: 0; color: var(--ecc-ink-2); font-size: var(--ecc-t-small); }
.ecc-au-or::before, .ecc-au-or::after { content: ""; flex: 1; height: 1px; background: var(--ecc-line-strong); }
.ecc-au-google { gap: var(--ecc-s-3); min-height: calc(var(--ecc-s-7) + var(--ecc-s-1)); }
.ecc-au-google__g { display: block; flex: none; }
.ecc-au-gnote { display: flex; align-items: baseline; gap: var(--ecc-s-2); margin: calc(var(--ecc-s-2) * -1) 0 0; padding: var(--ecc-s-3) var(--ecc-s-4); border: 1px solid var(--ecc-info-line); border-radius: var(--ecc-r-sm); background: var(--ecc-info-bg); color: var(--ecc-ink); font-size: var(--ecc-t-small); line-height: 1.45; }
.ecc-au-gnote::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: var(--ecc-r-voxel); background: var(--ecc-info-fg); translate: 0 -1px; }
.ecc-au-gnote:empty { display: none; }
.ecc-au-switch { margin: 0; color: var(--ecc-ink-2); text-align: center; }
.ecc-au-switch .ecc-link { font-weight: var(--ecc-fw-medium); }
.ecc-au-fine { margin: calc(var(--ecc-s-1) * -1) 0 0; color: var(--ecc-ink-2); font-size: var(--ecc-t-small); line-height: 1.5; }
.ecc-au-fine .ecc-link::after { inset: -12px -4px; }
/* the password hint: four voxels and a word, from the length and the mix of characters. No rule is invented. */
.ecc-au-meter { display: flex; align-items: center; gap: var(--ecc-s-3); color: var(--ecc-ink-2); font-size: var(--ecc-t-small); line-height: 1.4; }
.ecc-au-meter__bar { display: inline-grid; grid-auto-flow: column; gap: 3px; flex: none; }
.ecc-au-meter__bar i { width: var(--ecc-s-4); height: 6px; border-radius: var(--ecc-r-voxel); background: var(--ecc-wash-strong); }
.ecc-au-meter[data-level="1"] .ecc-au-meter__bar i:nth-child(-n+1) { background: var(--ecc-danger-line); }
.ecc-au-meter[data-level="2"] .ecc-au-meter__bar i:nth-child(-n+2) { background: var(--ecc-warning-line); }
.ecc-au-meter[data-level="3"] .ecc-au-meter__bar i:nth-child(-n+3) { background: var(--ecc-success-line); }
.ecc-au-meter[data-level="4"] .ecc-au-meter__bar i { background: var(--ecc-spark); }

/* ===================================================================== 10 · C NIGHT */
/* A dark panel in Day and Night: the form on the left, on the right the First light pictures printed in the identity's
   squares (art.js, turning into each other) and the line typed out in chrome (account.js). */
.ecc-au-night { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); min-height: var(--_tall); overflow: hidden; }
.ecc-au-night .ecc-au-side { padding-inline: var(--ecc-s-7); }
.ecc-au-night__art { position: relative; min-width: 0; min-height: 22rem; overflow: hidden; }
.ecc-au-night__art .ecc-au-art { position: absolute; inset: -5rem 0 auto; height: calc(min(100%, 42rem) + 5rem); } /* a fixed box (a taller form never zooms the drawing) whose top runs above the panel: the photo's own top edge never prints */
.ecc-au-type { position: absolute; z-index: 1; left: var(--ecc-s-6); right: var(--ecc-s-6); bottom: var(--ecc-s-6); display: grid; gap: var(--ecc-s-3); }
.ecc-au-type__line {
  min-height: 1.1em; margin: 0; font-size: clamp(2rem, 1.2rem + 2.3vw, 3.25rem); line-height: 1.08;
  letter-spacing: var(--ecc-ls-display); font-weight: var(--ecc-fw-display); font-stretch: var(--ecc-wdth-display);
}
.ecc-au-type__text::before { content: attr(data-shown); } /* the typed copy is drawn, not written: the page's text holds the line once (the screen-reader copy) */
.ecc-js .ecc-au-type:not(.is-ready) .ecc-au-type__text { visibility: hidden; } /* while a script can run, the line waits for it: it never flashes whole and then types */
.ecc-au-type__cursor { display: inline-block; width: .3em; height: .3em; margin-left: .08em; border-radius: var(--ecc-r-voxel); background: var(--ecc-lime); vertical-align: baseline; }
.ecc-au-type__by { display: flex; align-items: center; gap: var(--ecc-s-2); margin: 0; color: var(--ecc-ink-2); }
@media (prefers-reduced-motion: no-preference) {
  html:not([data-ecc-motion="paused"]) .ecc-au-type.is-typing .ecc-au-type__cursor { animation: none; }
  html:not([data-ecc-motion="paused"]) .ecc-au-type.is-resting .ecc-au-type__cursor { animation: ecc-au-blink 1060ms steps(1, end) 4; } /* four blinks, then it stays on */
}
@keyframes ecc-au-blink { 50% { opacity: 0; } }


/* ================================================================= 11 · TABLETS, PHONES */
/* below 1024: the picture becomes a band above the form */
@media (max-width: 1023px) {
  .ecc-au { --_tall: auto; }
  .ecc-au-night { grid-template-columns: minmax(0, 1fr); }
  .ecc-au-night__art { order: -1; min-height: 0; height: calc(var(--ecc-s-9) * 3); }
  .ecc-au-side, .ecc-au-night .ecc-au-side { padding: var(--ecc-s-6) var(--ecc-s-5) var(--ecc-s-7); }
}
@media (max-width: 760px) {
  .ecc-au-side, .ecc-au-night .ecc-au-side { padding: var(--ecc-s-5) var(--ecc-s-4) var(--ecc-s-6); }
  .ecc-au-form { margin-top: var(--ecc-s-5); gap: var(--ecc-s-4); }
  .ecc-au-lead { margin-top: var(--ecc-s-2); }
  /* C: a band of the drawing, the line typed over its foot */
  .ecc-au-night__art { display: grid; height: auto; }
  .ecc-au-night__art .ecc-au-art { position: relative; inset: auto; height: calc(var(--ecc-s-9) + var(--ecc-s-7)); }
  .ecc-au-type { position: relative; left: auto; right: auto; bottom: auto; gap: var(--ecc-s-1); padding: 0 var(--ecc-s-4) var(--ecc-s-1); }
  .ecc-au-type__line { font-size: var(--ecc-t-h2); }
}


/* ======================================================= 12 · REDUCED MOTION, MOTION SWITCH */
@media (prefers-reduced-motion: no-preference) {
  html:not([data-ecc-motion="paused"]) .ecc-au-view.is-entering { animation: ecc-au-in var(--ecc-d-slow) var(--ecc-ease-out) both; }
  html:not([data-ecc-motion="paused"]) .ecc-au-view.is-leaving { animation: ecc-au-out var(--ecc-d-fast) var(--ecc-ease-out) both; }
}
@keyframes ecc-au-in { from { opacity: 0; translate: 0 var(--ecc-rise); } }
@keyframes ecc-au-out { to { opacity: 0; translate: 0 calc(var(--ecc-rise) * -1); } }



/* =================================================== WOOCOMMERCE'S MESSAGES, OUR LOOK */
/* A sign-in WooCommerce refused (a wrong password): its message, in the identity's danger colours, read first. */
.ecc-au-notice { display: flex; align-items: baseline; gap: var(--ecc-s-3); padding: var(--ecc-s-3) var(--ecc-s-4); border: 1px solid var(--ecc-danger-line); border-radius: var(--ecc-r-sm); background: var(--ecc-danger-bg); color: var(--ecc-ink); font-size: var(--ecc-t-small); line-height: 1.45; }
.ecc-au-notice::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: var(--ecc-r-voxel); background: var(--ecc-danger-fg); translate: 0 -1px; }
.ecc-au-notice:focus { outline: none; }
.ecc-au-notice a { color: inherit; text-underline-offset: var(--ecc-s-1); }
.ecc-au-submit.is-busy { cursor: progress; opacity: .8; }

/* ============================================================ THE SIGNED-IN ACCOUNT */
/* The account panel's graphite side (who, the parts, Sign out) beside the part shown. WooCommerce prints the orders,
   the addresses and the details forms; they take the identity's controls here. */
.ecc-dash { display: grid; grid-template-columns: minmax(16rem, 20rem) minmax(0, 1fr); gap: var(--ecc-gap); align-items: start; }
.ecc-dash__side { position: sticky; top: var(--ecc-gap); display: grid; gap: var(--ecc-s-3); padding: var(--ecc-s-5); border-radius: var(--ecc-r); background: var(--ecc-panel-2); color: var(--ecc-ink); font-family: var(--ecc-f-text); }
.ecc-dash__nav { display: grid; margin: 0; padding: var(--ecc-s-2) 0 0; list-style: none; border-top: 1px solid var(--ecc-line); }
.ecc-dash__nav .ecc-acct__row[aria-current="page"] { background: var(--ecc-wash-strong); box-shadow: inset 2px 0 0 var(--ecc-spark); }
.ecc-dash__main { min-width: 0; font-family: var(--ecc-f-text); }
.ecc-dash__hi { margin: 0; font-size: clamp(2rem, 1.3rem + 1.75vw, 2.75rem); line-height: 1.04; letter-spacing: var(--ecc-ls-display); font-weight: var(--ecc-fw-display); font-stretch: var(--ecc-wdth-display); }
.ecc-dash__lead { margin: var(--ecc-s-3) 0 0; color: var(--ecc-ink-2); max-width: 32em; }
.ecc-dash__tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ecc-gap); margin: var(--ecc-s-6) 0 0; padding: 0; list-style: none; }
.ecc-dash__tile {
  display: grid; align-content: start; gap: var(--ecc-s-2); min-height: calc(var(--ecc-s-9) + var(--ecc-s-6)); padding: var(--ecc-s-4);
  border-radius: var(--ecc-r-sm); box-shadow: inset 0 0 0 1px var(--ecc-line-strong); color: var(--ecc-ink); text-decoration: none;
}
.ecc-dash__tile b { font-weight: var(--ecc-fw-strong); font-size: var(--ecc-t-body-lg); }
.ecc-dash__tile span { color: var(--ecc-ink-2); font-size: var(--ecc-t-small); line-height: 1.45; }
@media (hover: hover) and (pointer: fine) { .ecc-dash__tile:hover { background: var(--ecc-wash); --ecc-icon-spark: var(--ecc-spark); } }
/* WooCommerce's own parts inside: headings, tables, forms and buttons in the identity's look */
.ecc-dash__main h2, .ecc-dash__main h3, .ecc-dash__main legend { margin: 0 0 var(--ecc-s-3); font-size: var(--ecc-t-h3); font-weight: var(--ecc-fw-strong); font-stretch: var(--ecc-wdth-heading); }
.ecc-dash__main p { color: var(--ecc-ink-2); }
.ecc-dash__main table { width: 100%; border-collapse: collapse; font-size: var(--ecc-t-small); }
.ecc-dash__main th, .ecc-dash__main td { padding: var(--ecc-s-3) var(--ecc-s-2); border-bottom: 1px solid var(--ecc-line); text-align: left; vertical-align: top; }
.ecc-dash__main th { color: var(--ecc-ink-2); font-weight: var(--ecc-fw-medium); }
.ecc-dash__main form { display: grid; gap: var(--ecc-s-4); max-width: 36rem; }
.ecc-dash__main fieldset { margin: var(--ecc-s-4) 0 0; padding: 0; border: 0; display: grid; gap: var(--ecc-s-4); }
.ecc-dash__main label { display: block; margin-bottom: var(--ecc-s-1); font-weight: var(--ecc-fw-medium); }
.ecc-dash__main input[type="text"], .ecc-dash__main input[type="email"], .ecc-dash__main input[type="password"], .ecc-dash__main input[type="tel"], .ecc-dash__main select, .ecc-dash__main textarea {
  width: 100%; min-height: var(--ecc-hit); padding: 0 var(--ecc-s-3); border: 1px solid var(--ecc-control-line); border-radius: var(--ecc-r-sm); background: var(--ecc-surface); color: var(--ecc-ink); font: inherit;
}
.ecc-dash__main .button, .ecc-dash__main button[type="submit"], .ecc-dash__main .woocommerce-Button {
  display: inline-flex; align-items: center; justify-content: center; min-height: var(--ecc-hit); padding: 0 var(--ecc-s-4); border: 0; border-radius: var(--ecc-r-sm);
  background: var(--ecc-btn-bg); color: var(--ecc-btn-fg); font: inherit; font-weight: var(--ecc-fw-strong); text-decoration: none; cursor: pointer;
}
.ecc-dash__main .woocommerce-message, .ecc-dash__main .woocommerce-info, .ecc-dash__main .woocommerce-error {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ecc-s-3); margin: 0 0 var(--ecc-s-4); padding: var(--ecc-s-3) var(--ecc-s-4);
  border: 1px solid var(--ecc-info-line); border-radius: var(--ecc-r-sm); background: var(--ecc-info-bg); color: var(--ecc-ink); list-style: none;
}
.ecc-dash__main .woocommerce-message { border-color: var(--ecc-success-line); background: var(--ecc-success-bg); }
.ecc-dash__main .woocommerce-error { border-color: var(--ecc-danger-line); background: var(--ecc-danger-bg); }
.ecc-dash__main .woocommerce-Addresses { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--ecc-gap); }
.ecc-dash__main address { font-style: normal; color: var(--ecc-ink-2); line-height: 1.6; }
@media (max-width: 1023px) {
  .ecc-dash { grid-template-columns: minmax(0, 1fr); }
  .ecc-dash__side { position: static; }
}
@media (max-width: 760px) {
  .ecc-dash__tiles { grid-template-columns: minmax(0, 1fr); }
  .ecc-dash__main table, .ecc-dash__main thead, .ecc-dash__main tbody, .ecc-dash__main tr, .ecc-dash__main th, .ecc-dash__main td { display: block; }
  .ecc-dash__main thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}

/* ============================================================== FORCED COLOURS */
@media (forced-colors: active) {
  .ecc-au-gnote, .ecc-au-notice { border: 1px solid CanvasText; }
  .ecc-au-meter__bar i { border: 1px solid CanvasText; }
  .ecc-au-type__cursor { background: Highlight; }
  .ecc-dash__side { border: 1px solid CanvasText; }
}

/* ===================================================== 12 · ONE SCREEN, NO SCROLL (theme 0.23.1) */
/* Rayan 8 Oct 2026: «العناصر كلها تكون موجوده وواضحه قدامك بدون اي سكرول». On a computer the whole form, from the
   title to "Already have an account? Sign in", fits the screen under the header: tighter rhythm, same parts and order. */
@media (min-width: 1024px) {
  .ecc-au { --_tall: clamp(34rem, calc(100svh - 11.5rem), 54rem); }
  .ecc-au-side, .ecc-au-night .ecc-au-side { padding-block: var(--ecc-s-5); }
  .ecc-au-lead { margin-top: var(--ecc-s-2); }
  .ecc-au-form { gap: var(--ecc-s-3); margin-top: var(--ecc-s-4); }
  .ecc-au-input { min-height: 46px; }
  .ecc-au-submit { min-height: 48px; margin-top: 0; }
  .ecc-au-google { min-height: 46px; }
  .ecc-au-pw__btn { top: 2px; bottom: 2px; }
}
/* a short screen (a laptop): smaller title and fields so it still fits */
@media (min-width: 1024px) and (max-height: 860px) {
  .ecc-au-title { font-size: clamp(1.75rem, 1.2rem + 1.2vw, 2.25rem); }
  .ecc-au-form { gap: var(--ecc-s-2); margin-top: var(--ecc-s-3); }
  .ecc-au-input { min-height: 42px; }
  .ecc-au-submit, .ecc-au-google { min-height: 44px; }
}

/* ======================================================== 13 · EMPTY STATES, NOTICES (theme 0.23.2) */
/* Rayan 8 Oct 2026: the blue notice was wrong («غلط يكون ازرق … الاوتلاين دوتات»). An empty list is a card with a
   dotted frame of small squares, the icon in a lime voxel tile, a title, one line and the one action. WooCommerce's
   other info notices take the same dotted frame, never blue. */
.ecc-empty {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--ecc-s-4) var(--ecc-s-5);
  padding: var(--ecc-s-6) var(--ecc-s-5); border-radius: var(--ecc-r);
  background:
    radial-gradient(circle, color-mix(in srgb, var(--ecc-lime) 70%, transparent) 1.2px, transparent 1.6px) 0 0 / 10px 10px repeat-x,
    radial-gradient(circle, color-mix(in srgb, var(--ecc-lime) 70%, transparent) 1.2px, transparent 1.6px) 0 100% / 10px 10px repeat-x,
    radial-gradient(circle, color-mix(in srgb, var(--ecc-lime) 70%, transparent) 1.2px, transparent 1.6px) 0 0 / 10px 10px repeat-y,
    radial-gradient(circle, color-mix(in srgb, var(--ecc-lime) 70%, transparent) 1.2px, transparent 1.6px) 100% 0 / 10px 10px repeat-y,
    var(--ecc-surface-2);
}
.ecc-empty__icon { display: grid; place-items: center; width: calc(var(--ecc-s-7) + var(--ecc-s-2)); height: calc(var(--ecc-s-7) + var(--ecc-s-2)); border-radius: var(--ecc-r-sm); background: var(--ecc-lime); color: var(--ecc-on-lime); }
.ecc-empty__text { display: grid; gap: var(--ecc-s-1); }
.ecc-empty__title { margin: 0; font-size: var(--ecc-t-h3); font-weight: var(--ecc-fw-strong); font-stretch: var(--ecc-wdth-heading); color: var(--ecc-ink); }
.ecc-empty__line { margin: 0; max-width: 40em; color: var(--ecc-ink-2); line-height: 1.5; }
@media (max-width: 760px) {
  .ecc-empty { grid-template-columns: auto minmax(0, 1fr); }
  .ecc-empty__go { grid-column: 1 / -1; justify-self: start; }
}
.ecc-dash__main .woocommerce-info {
  border: 2px dotted color-mix(in srgb, var(--ecc-lime) 55%, transparent); background: var(--ecc-surface-2);
}

/* ======================================================= 14 · THE MENU FOLDED ON A PHONE (14 Oct 2026) */
/* Rayan 14 Oct 2026 (the partner round, question 9): on a phone the account menu folds into one row on every account
   page, so the part asked for is the first thing on the screen. The row opens and closes it (a few lines on the shell's
   script, inc/partners.php); without a script the menu stays open as before. */
.ecc-acctbar { display: none; }
@media (max-width: 1023px) {
  html.ecc-js .ecc-acctbar {
    display: flex; align-items: center; gap: var(--ecc-s-3); width: 100%; min-height: 60px; padding: var(--ecc-s-2) var(--ecc-s-4);
    border: 0; border-radius: var(--ecc-r); background: var(--ecc-panel-2); color: var(--ecc-ink); font: inherit; text-align: left; cursor: pointer;
  }
  html.ecc-js .ecc-acctbar .ecc-acct__vox { display: grid; place-items: center; padding: 6px 8px; border-radius: var(--ecc-r-sm); background: var(--ecc-screen); color: var(--ecc-lime); }
  html.ecc-js .ecc-acctbar .ecc-voxtext rect { fill: currentColor; }
  .ecc-acctbar__t { display: grid; flex: 1; min-width: 0; line-height: 1.3; }
  .ecc-acctbar__t b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ecc-acctbar__t small { color: var(--ecc-ink-2); font-size: var(--ecc-t-small); }
  .ecc-acctbar .ecc-icon { flex: none; transition: rotate .2s; }
  .ecc-acctbar[aria-expanded="true"] .ecc-icon { rotate: 180deg; }
  .ecc-acctbar:focus-visible { outline: var(--ecc-focus-ring); outline-offset: 2px; }
  html.ecc-js .ecc-dash > .ecc-dash__side:not(.is-open) { display: none; }
}
@media (prefers-reduced-motion: reduce) { .ecc-acctbar .ecc-icon { transition: none; } }
/* the partner row's chip ("$19.60 due", "In review") */
.ecc-acct__n--pt { font-family: var(--ecc-f-mono); white-space: nowrap; }