/* The customer hub (templates/dashboard.php, includes/hub-list.php), the list for someone with no account and the sign-in
   link's pages (includes/signin-links.php). The account's content sits on the light grey tile (theme.css), so the hub's
   own tiles are white on it. Mobile first: one column, targets at least 44 px, nothing wider than the screen. */

.hp-hub, .hp-signin {
  --h-ink: var(--wp--preset--color--ink, #1D1D1F);
  --h-body: var(--wp--preset--color--body, #3A3A3E);
  --h-quiet: var(--wp--preset--color--quiet, #6E6E73);
  --h-line: var(--wp--preset--color--line, #E8E8ED);
  --h-tile: var(--wp--preset--color--tile, #F5F5F7);
  --h-brand: var(--wp--preset--color--brand-deep, #5B46C7);
  --h-soft: var(--wp--preset--color--brand-soft, #EDE9FC);
}

.hp-hub { display: grid; gap: 1rem; min-width: 0; color: var(--h-body); }
.hp-hub > * { min-width: 0; margin: 0; }
.hp-hub__head h2 { margin: 0; font-size: var(--wp--preset--font-size--xx-large, 2.25rem); font-weight: 700; line-height: 1.1; letter-spacing: -0.015em; color: var(--h-ink); }
.hp-hub__lede { margin: 0.5rem 0 0.5rem; font-size: 1.0625rem; line-height: 1.5; color: var(--h-quiet); overflow-wrap: anywhere; }

.hp-hub__tile { padding: 1.25rem; background: var(--wp--preset--color--surface, #fff); border-radius: 24px; min-width: 0; }
.hp-hub__tile > h3 { margin: 0 0 0.75rem; font-size: 1.25rem; font-weight: 700; line-height: 1.2; color: var(--h-ink); }
@media (min-width: 640px) { .hp-hub__tile { padding: 1.5rem 1.75rem; } }

/* An unconfirmed email: one quiet line and its button. */
.hp-hub__confirm { margin: 0; padding: 0.25rem 0; }
.hp-hub__confirm p { margin: 0; line-height: 1.5; color: var(--h-quiet); }
.hp-hub__link-button { display: inline-flex; align-items: center; min-height: 44px; padding: 0; background: none; border: 0; font: inherit; font-weight: 500; color: var(--h-brand); cursor: pointer; text-align: left; }
.hp-hub__link-button:hover { text-decoration: underline; text-underline-offset: 0.2em; }

/* Needs you: first, on the soft violet of the job page's asks. */
.hp-hub__tile--needs { background: var(--h-soft); }
.hp-hub__needs { list-style: none; margin: 0; padding: 0; display: grid; }
.hp-hub__needs a { display: flex; align-items: center; min-height: 44px; font-size: 1.0625rem; font-weight: 500; line-height: 1.35; color: var(--h-ink); text-decoration: none; overflow-wrap: anywhere; }
.hp-hub__needs a span { margin-left: 0.35em; }
.hp-hub__needs a:hover { text-decoration: underline; text-underline-offset: 0.2em; }

/* The one list: what it is and the amount on the first line, its number and date and what is due on the second, where
   it stands on the third. */
.hp-hub__rows { list-style: none; margin: 0; padding: 0; }
.hp-hub__rows li + li .hp-hub__row { border-top: 1px solid var(--h-line); }
.hp-hub__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1rem; row-gap: 0.1rem; padding: 0.85rem 0; color: var(--h-body); text-decoration: none; }
.hp-hub__rows li:first-child .hp-hub__row { padding-top: 0.25rem; }
.hp-hub__rows li:last-child .hp-hub__row { padding-bottom: 0.25rem; }
.hp-hub__row--link { min-height: 44px; }
.hp-hub__row--link:hover .hp-hub__what { text-decoration: underline; text-underline-offset: 0.2em; }
.hp-hub__what { font-size: 1.0625rem; font-weight: 600; color: var(--h-ink); overflow-wrap: anywhere; }
.hp-hub__row--link .hp-hub__what::after { content: " \203A"; color: var(--h-brand); }
.hp-hub__amount { text-align: right; font-variant-numeric: tabular-nums; color: var(--h-ink); white-space: nowrap; }
.hp-hub__meta { font-size: 0.9375rem; color: var(--h-quiet); }
.hp-hub__due { text-align: right; font-size: 0.9375rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--h-ink); white-space: nowrap; }
.hp-hub__status { grid-column: 1 / -1; font-size: 0.9375rem; font-weight: 500; color: var(--h-ink); }
.hp-hub__empty { margin: 0; color: var(--h-quiet); }
.hp-hub__more { display: flex; flex-wrap: wrap; gap: 0 1.5rem; margin: 0.75rem 0 0; }
.hp-hub__more a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 500; color: var(--h-brand); text-decoration: none; }
.hp-hub__more a:hover { text-decoration: underline; text-underline-offset: 0.2em; }

/* The small tiles. */
.hp-hub__small { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 1rem; }
.hp-hub__tile--small { display: block; color: var(--h-ink); text-decoration: none; }
.hp-hub__tile--small h3 { margin: 0 0 0.35rem; font-size: 1rem; font-weight: 700; color: var(--h-ink); }
.hp-hub__tile--small p { margin: 0; color: var(--h-quiet); overflow-wrap: anywhere; }
.hp-hub__tile--small:hover { background: var(--h-soft); }

/* The list for someone with no account: the page's own content, on white. */
.hp-hub--guest .hp-hub__tile { background: var(--h-tile); }
.hp-hub__keep p { margin: 0 0 1rem; line-height: 1.5; }
.hp-hub__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 0 1.5rem; }
.hp-hub__quiet { display: inline-flex; align-items: center; min-height: 44px; padding: 0; background: none; border: 0; font: inherit; font-weight: 500; color: var(--h-brand); text-decoration: none; cursor: pointer; }
.hp-hub__quiet:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.hp-hub .hp-sr, .hp-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Sign in with a link: beside WooCommerce's own forms, and the pages a link opens. */
.hp-signin { margin-top: var(--wp--preset--spacing--50, 2.5rem); padding: 1.5rem 1.25rem; background: var(--h-tile); border-radius: 24px; color: var(--h-body); }
.hp-signin--link { margin-top: 0; }
.hp-signin h2 { margin: 0 0 0.5rem; font-size: 1.5rem; font-weight: 700; line-height: 1.2; color: var(--h-ink); }
.hp-signin p { margin: 0 0 1rem; line-height: 1.5; max-width: 40rem; }
.hp-signin__form { display: grid; gap: 0.5rem; max-width: 28rem; }
.hp-signin__form label { font-weight: 500; color: var(--h-ink); }
.hp-signin__form input[type="email"] { box-sizing: border-box; width: 100%; min-height: 48px; padding: 0.7rem 1rem; font: inherit; color: var(--h-ink); background: var(--wp--preset--color--surface, #fff); border: 1px solid var(--wp--preset--color--line-strong, #D2D2D7); border-radius: 12px; }
.hp-signin__form input[type="email"]:focus { outline: none; border-color: var(--h-ink); box-shadow: 0 0 0 3px var(--h-soft); }
.hp-signin__button { display: inline-flex; align-items: center; justify-content: center; justify-self: start; box-sizing: border-box; min-height: 48px; margin-top: 0.5rem; padding: 0.75rem 1.5rem; border: 0; border-radius: 999px; font: inherit; font-weight: 500; line-height: 1.2; color: #fff; background: var(--h-ink); cursor: pointer; transition: background-color 160ms ease; }
.hp-signin__button:hover, .hp-signin__button:focus-visible { background: var(--h-brand); }
.hp-signin__sent, .hp-hub > .hp-signin__sent { margin: 0 0 1rem; padding: 1rem 1.25rem; border-radius: 16px; background: var(--h-soft); color: var(--h-ink); line-height: 1.5; }
@media (min-width: 640px) { .hp-signin { padding: 1.75rem; } }

/* An event (includes/events.php): its orders under its row, set in a little. */
.hp-hub__rows--sub { margin: 0 0 0.5rem; padding-left: 1rem; border-left: 2px solid var(--h-line); }
.hp-hub__rows--sub .hp-hub__what { font-size: 1rem; font-weight: 500; }
.hp-hub__rows .hp-hub__rows--sub .hp-hub__row { border-top: 0; padding: 0.5rem 0; }

/* Account details: the reorder reminders box (includes/reminders.php). */
.woocommerce form .hp-reminders-field label, .hp-reminders-field label { display: flex; align-items: flex-start; gap: 0.75rem; min-height: 44px; line-height: 1.5 !important; cursor: pointer; }
.hp-reminders-field input[type="checkbox"] { flex: none; width: 22px; height: 22px; margin: 0.1rem 0 0; accent-color: var(--wp--preset--color--ink, #1D1D1F); }

/* Signed out, on a desktop: Sign in and Register side by side, Sign in with a link under Sign in (Chris, 2026-10-17: "all of the
   boxes are squished to the left. Login and register, at least on desktop, should be next to one another"). The page's own
   order is kept (sign in, the link, register: review M107), read down the left column and then the right. The fields fill
   their box. On a phone and a tablet they stay stacked (theme.css). */
@media (min-width: 960px) {
  .woocommerce-account:not(.logged-in) .woocommerce:has(> #customer_login), .woocommerce-account:not(.logged-in) .woocommerce:has(#customer_login) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: var(--wp--preset--spacing--40, 2rem); }
  .woocommerce-account:not(.logged-in) .woocommerce:has(#customer_login) > :not(#customer_login) { grid-column: 1 / -1; }
  .woocommerce-account:not(.logged-in) .woocommerce:has(#customer_login) > .woocommerce-notices-wrapper:empty { display: none; }
  #customer_login .u-column1 { grid-column: 1; grid-row: span 1; }
  #customer_login > .hp-signin { grid-column: 1; }
  #customer_login .u-column2 { grid-column: 2; grid-row: 1 / span 2; align-self: stretch; }
  .woocommerce-account:not(.logged-in) .woocommerce:has(> .woocommerce-notices-wrapper:not(:empty)) #customer_login .u-column2 { grid-row: 2 / span 2; }
  .woocommerce #customer_login form .form-row input.input-text { max-width: none; }
  #customer_login .password-input { display: block; width: 100%; max-width: none; }
  #customer_login .hp-signin__form { max-width: none; justify-items: start; }
  #customer_login .hp-signin__form input[type="email"] { justify-self: stretch; }
}