/*
 * Account area — login, registration, and the buyer's file dashboard.
 *
 * Loaded only on WooCommerce account pages (see executor_kit_assets()), so the
 * rest of the site never carries it.
 *
 * Mode is Operate, not Persuade: a buyer arrives here for one reason, which is
 * to get their files back. Everything is ordered around that. The account is
 * deliberately optional — checkout still works as a guest — so nothing in here
 * is allowed to imply the files are locked behind a login.
 */

/*
 * This theme sets no global border-box, so anything of mine pairing width:100%
 * with padding overflows its own container: the file card's Download button
 * did exactly that on mobile, by 44px (100% resolved to 288px, then 43px of
 * padding and 2px of border were added on top).
 *
 * Scoped to the elements this stylesheet owns. Flipping the box model globally
 * would be the tidier-looking fix and would silently shift layout on every
 * other page of the site.
 */
.woocommerce-account .ek-auth-card,
.woocommerce-account .ek-panel,
.woocommerce-account .ek-file,
.woocommerce-account .ek-dash__empty,
.woocommerce-account .button,
.woocommerce-account button[type="submit"],
.woocommerce-account input[type="text"],
.woocommerce-account input[type="email"],
.woocommerce-account input[type="password"],
.woocommerce-account input[type="tel"] {
  box-sizing: border-box;
}

.woocommerce-account .woocommerce {
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}

/*
 * interior.css deliberately exempts .woocommerce from the 720px reading
 * measure so the signed-in sidebar layout can breathe. The logged-out view
 * shares that wrapper but is prose plus two cards, so it takes the measure
 * back here rather than stretching to the full commerce width.
 */
.woocommerce-account .woocommerce:not(:has(.woocommerce-MyAccount-navigation)) {
  max-width: var(--ek-reading-width, 720px);
}

/* ---------------------------------------------------------------------------
   Shared field and button styling
   ------------------------------------------------------------------------- */

.woocommerce-account .woocommerce-form-row {
  display: flex;
  flex-direction: column;
  margin: 0 0 1.15rem;
}

.woocommerce-account label,
.woocommerce-account .woocommerce-form-row label {
  margin-bottom: .4rem;
  color: var(--wp--preset--color--authority-ink);
  font-size: var(--wp--preset--font-size--label);
  font-weight: 700;
  letter-spacing: .04em;
}

/*
 * 16px minimum. Anything smaller makes iOS Safari zoom the viewport on focus,
 * which on a login form reads as the page breaking.
 */
.woocommerce-account input[type="text"],
.woocommerce-account input[type="email"],
.woocommerce-account input[type="password"],
.woocommerce-account input[type="tel"] {
  width: 100%;
  min-height: 44px;
  padding: .7rem .85rem;
  border: 1px solid var(--wp--preset--color--paper-rule);
  border-radius: var(--wp--custom--radius--field, 6px);
  background: var(--wp--preset--color--paper-surface);
  color: var(--wp--preset--color--authority-ink);
  font-family: var(--wp--preset--font-family--working-sans);
  font-size: 1rem;
  line-height: 1.4;
}

.woocommerce-account input[type="text"]:focus,
.woocommerce-account input[type="email"]:focus,
.woocommerce-account input[type="password"]:focus,
.woocommerce-account input[type="tel"]:focus {
  outline: 3px solid var(--wp--preset--color--institutional-blue);
  outline-offset: 1px;
  border-color: var(--wp--preset--color--institutional-blue);
}

/*
 * The checkbox stacked above its own text because two separate rules had to be
 * cleared, not one:
 *
 *   display     .woocommerce .woocommerce-form-login .woocommerce-form-login__rememberme
 *               (0,3,0) in woocommerce.css, setting inline-block
 *   font-weight .woocommerce form .form-row label
 *               (0,2,2) in interior.css, setting 700
 *
 * Hence the long selector: (0,4,2) clears both. Specificity is the correct
 * instrument here — these are stylesheet rules, not inline styles, so
 * !important would be reaching for a bigger hammer than the problem needs.
 */
.woocommerce-account .woocommerce form .form-row label.woocommerce-form__label-for-checkbox {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: .55rem;
  margin-bottom: 1.15rem;
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0;
}

.woocommerce-account .woocommerce-form__input-checkbox {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--wp--preset--color--institutional-blue);
}

.woocommerce-account .button,
.woocommerce-account button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: .85rem 1.35rem;
  border: 1px solid var(--wp--preset--color--authority-ink);
  border-radius: var(--wp--custom--radius--control, 6px);
  background: var(--wp--preset--color--authority-ink);
  color: var(--wp--preset--color--paper-surface);
  font-family: var(--wp--preset--font-family--working-sans);
  font-size: var(--wp--preset--font-size--label);
  font-weight: 700;
  letter-spacing: .06em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .16s ease-out;
}

.woocommerce-account .button:hover,
.woocommerce-account button[type="submit"]:hover {
  background: var(--wp--preset--color--working-ink);
  border-color: var(--wp--preset--color--working-ink);
}

.woocommerce-account .button:focus-visible,
.woocommerce-account button[type="submit"]:focus-visible {
  outline: 3px solid var(--wp--preset--color--institutional-blue);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   Logged out — login and registration
   ------------------------------------------------------------------------- */

.ek-auth-intro {
  max-width: var(--ek-reading-width, 720px);
  margin: 0 0 clamp(2rem, 4vw, 2.75rem);
  color: var(--wp--preset--color--working-ink);
}

.ek-auth-intro strong {
  color: var(--wp--preset--color--authority-ink);
}

.ek-auth-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(1.25rem, 3vw, 2rem);
  /* Stretch, not start: two ragged card bottoms beside each other read as a
     rendering fault rather than as a deliberate pairing. */
  align-items: stretch;
}

/*
 * WooCommerce's own stylesheet frames form.login and form.register with a
 * border, a 5px radius and 20px of padding. The card already provides that
 * frame, so the default renders a box inside a box — and its radius is off
 * this design system's scale besides.
 */
.woocommerce-account form.login,
.woocommerce-account form.register {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
}

/*
 * Align the page title with whatever sits beneath it, which differs by state.
 *
 * interior.css excludes .woocommerce-page from its centred-title rule so the
 * cart heading can sit flush with its full-width table, and that exclusion
 * swept the account pages in too — the title floated 169px left of its own
 * content.
 *
 * Logged out, the content is a reading-width column, so the title takes the
 * same measure. Signed in, the content is the full-width sidebar layout, so
 * the title stays full width and no rule is needed. The :has() test reads the
 * rendered state directly rather than inferring it from the logged-in body
 * class, which would be true in cases this rule does not care about.
 */
body.woocommerce-account main:not(:has(.woocommerce-MyAccount-navigation)) > .wp-block-group > .wp-block-post-title {
  max-width: var(--ek-reading-width, 720px);
  margin-inline: auto;
}

.ek-auth-card {
  padding: clamp(1.35rem, 3vw, 2rem);
  border: 1px solid var(--wp--preset--color--paper-rule);
  border-radius: var(--wp--custom--radius--panel, 10px);
  background: var(--wp--preset--color--paper-surface);
}

.ek-auth-card h2 {
  margin: 0 0 .4rem;
  font-size: clamp(1.2rem, 1.6vw, 1.4rem);
}

.ek-auth-card__note {
  margin: 0 0 1.5rem;
  color: var(--wp--preset--color--quiet-ink);
  font-size: .9375rem;
  line-height: 1.55;
}

.ek-auth-card form {
  margin: 0;
}

.ek-auth-card .woocommerce-form-login__submit,
.ek-auth-card .woocommerce-form-register__submit {
  width: 100%;
}

.ek-auth-card .woocommerce-LostPassword {
  margin: 1rem 0 0;
  font-size: .9375rem;
}

.ek-auth-card .woocommerce-privacy-policy-text {
  margin-top: 1rem;
  color: var(--wp--preset--color--quiet-ink);
  font-size: .9375rem;
  line-height: 1.55;
}

/* WooCommerce's own strength meter, brought onto the palette. */
.woocommerce-account .woocommerce-password-strength {
  margin-top: .5rem;
  padding: .45rem .7rem;
  border-radius: var(--wp--custom--radius--field, 6px);
  font-size: var(--wp--preset--font-size--label);
  font-weight: 700;
  text-align: left;
}

.woocommerce-account .woocommerce-password-strength.short,
.woocommerce-account .woocommerce-password-strength.bad {
  background: rgba(166, 90, 80, .12);
  color: var(--wp--preset--color--warning-brick);
}

.woocommerce-account .woocommerce-password-strength.good {
  background: rgba(152, 109, 49, .12);
  color: var(--wp--preset--color--decision-amber-text);
}

.woocommerce-account .woocommerce-password-strength.strong {
  background: rgba(79, 114, 92, .12);
  color: var(--wp--preset--color--completion-green);
}

.woocommerce-account .woocommerce-password-hint {
  display: block;
  margin-top: .45rem;
  color: var(--wp--preset--color--quiet-ink);
  font-size: .9375rem;
  line-height: 1.5;
}

/* ---------------------------------------------------------------------------
   Logged in — navigation beside content
   ------------------------------------------------------------------------- */

/*
 * Signed-in layout. The :has() test is what distinguishes it from the logged
 * out login/register view, which shares the same .woocommerce wrapper.
 *
 * max-width is released because interior.css constrains children of
 * post-content to the 720px reading measure. That is right for prose and for
 * the login cards, but a 720px box minus a 232px sidebar leaves 440px for the
 * files panel, which is not enough for a download row.
 */
.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
  max-width: none;
}

/*
 * Three WooCommerce defaults have to be undone here, and none of them are
 * visible from the markup alone:
 *
 * 1. .woocommerce-notices-wrapper is emitted as the FIRST child of
 *    .woocommerce. Under auto-placement it took row 1 / column 1, which
 *    pushed the navigation into column 2 and the content onto row 2.
 *    Placement is therefore explicit below, not automatic.
 * 2. Both panes are floated with percentage widths (30% / 68%). A grid
 *    container ignores the float for placement but still honours the width,
 *    so each pane sized itself against the wrong column and shrank.
 * 3. Those same percentages fight the grid tracks, so width returns to auto.
 */
.woocommerce-account .woocommerce > .woocommerce-notices-wrapper {
  grid-column: 1 / -1;
}

.woocommerce-account .woocommerce .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce .woocommerce-MyAccount-content {
  float: none;
  width: auto;
}

.woocommerce-account .woocommerce .woocommerce-MyAccount-navigation {
  grid-column: 1;
}

.woocommerce-account .woocommerce .woocommerce-MyAccount-content {
  grid-column: 2;
}

.woocommerce-MyAccount-navigation ul {
  margin: 0;
  padding: .4rem;
  border: 1px solid var(--wp--preset--color--paper-rule);
  border-radius: var(--wp--custom--radius--panel, 10px);
  background: var(--wp--preset--color--paper-surface);
  list-style: none;
}

.woocommerce-MyAccount-navigation li {
  margin: 0;
}

.woocommerce-MyAccount-navigation a {
  display: block;
  padding: .7rem .85rem;
  border-radius: var(--wp--custom--radius--control, 6px);
  color: var(--wp--preset--color--working-ink);
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
}

.woocommerce-MyAccount-navigation a:hover {
  background: var(--wp--preset--color--paper-ground);
  color: var(--wp--preset--color--authority-ink);
}

.woocommerce-MyAccount-navigation a:focus-visible {
  outline: 3px solid var(--wp--preset--color--institutional-blue);
  outline-offset: -1px;
}

.woocommerce-MyAccount-navigation .is-active a {
  background: var(--wp--preset--color--authority-ink);
  color: var(--wp--preset--color--paper-surface);
  font-weight: 700;
}

.woocommerce-MyAccount-content > :first-child {
  margin-top: 0;
}

/* ---------------------------------------------------------------------------
   Dashboard
   ------------------------------------------------------------------------- */

.ek-dash__greeting {
  margin: 0 0 1.75rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--wp--preset--color--paper-rule);
  color: var(--wp--preset--color--working-ink);
}

.ek-dash__greeting strong {
  color: var(--wp--preset--color--authority-ink);
}

.ek-dash section {
  margin: 0 0 clamp(1.75rem, 3.5vw, 2.5rem);
}

.ek-dash h2 {
  margin: 0 0 .35rem;
  font-size: clamp(1.5rem, 2vw, 1.75rem);
}

.ek-dash__lede {
  margin: 0 0 1.15rem;
  color: var(--wp--preset--color--working-ink);
  font-size: 1rem;
  line-height: 1.6;
}

/* The files panel — the reason the buyer is on this page at all. */
.ek-file {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem clamp(1rem, 2.5vw, 1.75rem);
  align-items: center;
  justify-content: space-between;
  padding: clamp(1.15rem, 2.5vw, 1.5rem);
  border: 1px solid var(--wp--preset--color--paper-rule);
  border-radius: var(--wp--custom--radius--panel, 10px);
  background: var(--wp--preset--color--paper-surface);
}

.ek-file + .ek-file {
  margin-top: 1rem;
}

.ek-file__name {
  margin: 0 0 .3rem;
  color: var(--wp--preset--color--authority-ink);
  font-family: var(--wp--preset--font-family--display-serif);
  font-size: 1.15rem;
  letter-spacing: -.016em;
}

.ek-file__meta {
  margin: 0;
  color: var(--wp--preset--color--quiet-ink);
  font-size: .9375rem;
  line-height: 1.5;
}

.ek-file .button {
  flex-shrink: 0;
}

/* Panels for order history, keeping-your-files, and support. */
.ek-panel {
  padding: clamp(1.15rem, 2.5vw, 1.5rem);
  border: 1px solid var(--wp--preset--color--paper-rule);
  border-radius: var(--wp--custom--radius--panel, 10px);
  background: var(--wp--preset--color--paper-ground);
}

.ek-panel--surface {
  background: var(--wp--preset--color--paper-surface);
}

.ek-panel p {
  margin: 0 0 .7rem;
  font-size: 1rem;
  line-height: 1.6;
}

.ek-panel p:last-child {
  margin-bottom: 0;
}

.ek-panel__title {
  margin: 0 0 .6rem;
  color: var(--wp--preset--color--authority-ink);
  font-family: var(--wp--preset--font-family--working-sans);
  font-size: var(--wp--preset--font-size--label);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.ek-orders {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ek-orders li {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1rem;
  align-items: baseline;
  justify-content: space-between;
  padding: .7rem 0;
  border-bottom: 1px solid var(--wp--preset--color--paper-rule);
  font-size: 1rem;
}

.ek-orders li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.ek-orders__meta {
  color: var(--wp--preset--color--quiet-ink);
}

/* Empty state — a buyer who has no purchase on this account. */
.ek-dash__empty {
  padding: clamp(1.5rem, 3.5vw, 2.25rem);
  border: 1px solid var(--wp--preset--color--paper-rule);
  border-radius: var(--wp--custom--radius--panel, 10px);
  background: var(--wp--preset--color--paper-surface);
}

.ek-dash__empty p {
  max-width: 58ch;
  margin: 0 0 1rem;
  color: var(--wp--preset--color--working-ink);
  line-height: 1.65;
}

.ek-dash__empty .button {
  margin-top: .35rem;
}

/* ---------------------------------------------------------------------------
   WooCommerce notices, on-palette

   These keep a coloured left edge where the file card and the checkout
   delivery block deliberately lost theirs. The difference is that here the
   colour is the state — success, information, failure — on an element whose
   whole job is to report one, and a coloured edge on an alert is a convention
   long predating the card decoration it resembles. It is never the only
   signal: the notice text always says what happened, so nothing depends on a
   reader distinguishing green from red.
   ------------------------------------------------------------------------- */

.woocommerce-account .woocommerce-message,
.woocommerce-account .woocommerce-info,
.woocommerce-account .woocommerce-error {
  margin: 0 0 1.5rem;
  padding: 1rem 1.15rem;
  border: 1px solid var(--wp--preset--color--paper-rule);
  border-left: 3px solid var(--wp--preset--color--institutional-blue);
  border-radius: var(--wp--custom--radius--panel, 10px);
  background: var(--wp--preset--color--paper-surface);
  color: var(--wp--preset--color--authority-ink);
  font-size: 1rem;
  line-height: 1.6;
  list-style: none;
}

.woocommerce-account .woocommerce-message {
  border-left-color: var(--wp--preset--color--completion-green);
}

.woocommerce-account .woocommerce-error {
  border-left-color: var(--wp--preset--color--warning-brick);
}

.woocommerce-account .woocommerce-error li {
  margin: 0 0 .4rem;
}

.woocommerce-account .woocommerce-error li:last-child {
  margin-bottom: 0;
}

/* ---------------------------------------------------------------------------
   Mobile
   ------------------------------------------------------------------------- */

@media (max-width: 860px) {
  .woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Single column: both panes span it, or they land side by side again. */
  .woocommerce-account .woocommerce .woocommerce-MyAccount-navigation,
  .woocommerce-account .woocommerce .woocommerce-MyAccount-content {
    grid-column: 1 / -1;
  }

  .woocommerce-MyAccount-navigation ul {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
  }

  .woocommerce-MyAccount-navigation li {
    flex: 1 1 auto;
  }

  .woocommerce-MyAccount-navigation a {
    text-align: center;
    white-space: nowrap;
  }
}

@media (max-width: 600px) {
  .ek-file {
    align-items: stretch;
  }

  .ek-file .button {
    width: 100%;
  }
}