/* The account screen the core draws where there is no shop.
 *
 * Deliberately the same shape as the shop's: label, one control, log out
 * pushed to the far end, a rule under it. A site that later installs the shop
 * should see the screen it already knows, not a second idea of one. */

.ds-account{ width:100% }

.ds-account-nav{ display:flex; flex-wrap:wrap; align-items:center; gap:12px;
  margin:0 0 28px; padding:0 0 12px;
  border-bottom:1px solid var(--ds-line, color-mix(in srgb, var(--ds-text,#fff) 18%, transparent)) }

/* Sized to itself, not to the row. The theme sets a form control to the full
   width of what holds it, which is right for a field in a form and wrong for
   one control in a row - stretched, it pushes Log out onto a line of its own. */
.ds-account-nav select{ flex:0 1 auto; width:auto;
  min-width:min(260px, 60vw); max-width:100% }

.ds-account-nav a{ text-decoration:none; color:inherit; opacity:.65; margin-left:auto }
.ds-account-nav a:hover{ opacity:1 }

/* The button is for a reader with no JavaScript, who has to be able to submit
   the form. With script the control navigates on change and the button is the
   same instruction twice, so the script marks the form and this takes it off -
   that way round, because a button hidden by default never comes back for the
   reader who needs it. */
.ds-account-nav.is-live .ds-account-go{ display:none }

/* ---------------------------------------------------------------------
 * Panel furniture
 *
 * Every plugin that hangs a panel here used to bring its own idea of a
 * field, a pair of fields and a button, which is how one account screen
 * ends up looking like four. These are the shared ones: a panel uses
 * them and inherits the theme instead of inventing a style that matches
 * nothing around it.
 * ------------------------------------------------------------------ */

.ds-account-panel,
.ds-account-panel *{ box-sizing:border-box; min-width:0 }

.ds-account-panel{ max-width:100%; overflow-wrap:anywhere }
.ds-account-panel + .ds-account-panel{ margin-top:40px; padding-top:32px;
  border-top:1px solid var(--ds-line, color-mix(in srgb, var(--ds-text,#fff) 14%, transparent)) }

/* Spacing only. The line height came with it and fought the heading
   size the theme sets, which is the same mistake as writing a label's
   size in here. */
.ds-account-panel h2{ margin:0 0 6px !important }
.ds-account-panel .ds-account-why{ margin:0 0 20px !important }

/* Two across on anything wider than a phone, one down on a phone.
 *
 * Two, and not however many fit: auto-fit was laying three and four
 * across on a wide screen, which turns a form into a wall and pairs
 * fields that have nothing to do with each other. A field is read down
 * a column, so the column count is a decision, not an outcome. */
.ds-account-grid{ display:grid; gap:16px 20px;
  grid-template-columns:1fr }

@media (min-width:560px){
  .ds-account-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)) }
}

/* A field that wants the width takes both. Two names because the
   screens write is-wide and the shop writes ds-wide, and a rule that
   knows only one of them silently leaves the other half-width. */
.ds-account-grid .ds-wide,
.ds-account-grid .is-wide{ grid-column:1 / -1 }

.ds-fld{ display:flex; flex-direction:column; gap:6px; margin:0 }

/* A label is whatever the Forms, Fields, Label card says it is.
 *
 * These had their own size, spacing and opacity written in, so a site
 * that had set its label color, size and case got none of them here -
 * the account was the one place on the site where the form settings
 * did nothing. The same variables the shop's fields read, named the
 * same way, so the two cannot drift apart. Nothing is styled here that
 * the theme has an answer for. */
.ds-fld > label{
  font-size:var(--ds-label-size, inherit);
  text-transform:var(--ds-label-case, none);
  color:var(--ds-field-label, inherit);
  /* Held back only while it has no color of its own. A color somebody
     chose is the color, not seven tenths of it - and the variable is
     only set once they have chosen one. */
  opacity:var(--ds-field-label-fade, .7);
  background:var(--ds-field-label-bg, transparent) }

.ds-fld input[type=text],
.ds-fld input[type=email],
.ds-fld input[type=tel],
.ds-fld input[type=url],
.ds-fld select,
.ds-fld textarea{ width:100% }

.ds-account-go-row{ display:flex; gap:12px; align-items:center; margin:24px 0 0 }

/* What just happened. Said once, at the top, rather than each panel
   growing its own way of saying Saved. */
.ds-account-said{ display:flex; gap:10px; align-items:center;
  margin:0 0 24px; padding:12px 16px; border-radius:5px;
  background:color-mix(in srgb, var(--ds-good,#3fbf6a) 16%, transparent);
  border:1px solid color-mix(in srgb, var(--ds-good,#3fbf6a) 42%, transparent) }

.ds-account-said.is-bad{
  background:color-mix(in srgb, var(--ds-bad,#e5484d) 14%, transparent);
  border-color:color-mix(in srgb, var(--ds-bad,#e5484d) 42%, transparent) }

/* A list of what somebody has, rather than a form. */
.ds-account-list{ list-style:none; margin:0; padding:0; display:grid; gap:12px }
.ds-account-list li{ display:flex; flex-wrap:wrap; gap:10px; align-items:baseline;
  padding:14px 16px; border-radius:5px;
  border:1px solid var(--ds-line, color-mix(in srgb, var(--ds-text,#fff) 14%, transparent)) }

.ds-account-table{ width:100%; border-collapse:collapse }
.ds-account-table th{ text-align:left; padding:0 12px 10px 0 }
.ds-account-table td{ padding:10px 12px 10px 0; vertical-align:top;
  border-top:1px solid var(--ds-line, color-mix(in srgb, var(--ds-text,#fff) 12%, transparent)) }
.ds-account-table td:nth-child(3){ font-variant-numeric:tabular-nums; white-space:nowrap }

/* ---------------------------------------------------------------------
 * The dashboard
 *
 * This is interface, not prose, and the two want different rhythm.
 * The band's line height is set for reading paragraphs and leaves a
 * card looking like three loose sentences floating in the dark; the
 * card borders, drawn from currentColor, came out invisible against
 * near-black. So the type and the surface are stated here outright.
 * Nothing else is: the typeface, the colour and the width still come
 * from the page.
 * ------------------------------------------------------------------ */

.ds-account-home,
.ds-account-home *{ box-sizing:border-box; min-width:0 }

.ds-account-home{ max-width:100%; overflow-wrap:anywhere }

.ds-account-hello{ margin:0 0 18px !important }

/* What to do next. One thing, stated once, with the way to do it. */
.ds-account-next{ margin:0 0 22px; padding:18px 20px; border-radius:6px;
  background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.12) }

.ds-account-next h2{ margin:0 0 8px !important }

.ds-account-next p{ margin:0 0 14px !important }
.ds-account-next p:last-child{ margin:0 !important }
.ds-account-next strong{ font-weight:600 }
.ds-account-next .ds-btn{ word-spacing:normal; letter-spacing:normal }

/* The standing picture. Equal height, real surfaces, three across on
   a desk and one on a phone. */
.ds-account-cards{ display:grid; gap:10px; align-items:stretch;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 220px), 1fr)) }

.ds-account-card{ display:flex; flex-direction:column; gap:4px;
  padding:16px 18px; border-radius:6px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
  border-left:3px solid rgba(255,255,255,.22) }

.ds-account-card h3{ margin:0 !important }

.ds-account-card p{ margin:0 !important }

.ds-account-card p + p{ margin-top:auto !important; padding-top:12px; opacity:1 }

.ds-account-card a{ text-decoration:none;
  border-bottom:1px solid currentColor; padding-bottom:1px }
.ds-account-card a:hover{ opacity:.75 }

/* The state, as a stripe. Worth noticing, not worth shouting: five
   coloured cards is a warning light with nothing to warn about. */
.ds-account-card.is-todo{ border-left-color:var(--ds-warn,#ff8a1f) }
.ds-account-card.is-done{ border-left-color:var(--ds-good,#3fbf6a) }
.ds-account-card.is-waiting{ border-left-color:rgba(255,255,255,.45) }

/* ---------------------------------------------------------------------
 * Signing in
 *
 * Two columns: what we sell, then the form. The selling side is the
 * wider of the two because it is what almost everybody opening this
 * page came for.
 * ------------------------------------------------------------------ */

.ds-login,
.ds-login *{ box-sizing:border-box; min-width:0 }

.ds-login{ max-width:100%; overflow-wrap:anywhere }

.ds-login-cols{ display:grid; gap:28px;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 280px), 1fr)) }

@media (min-width:900px){
  .ds-login-cols{ grid-template-columns:1.35fr 1fr; gap:40px }
}

.ds-login h2{ margin:0 0 6px !important }

.ds-login-offers{ display:grid; gap:12px }

.ds-login-offer{ padding:18px 20px; border-radius:6px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10) }

.ds-login-offer.is-paid{ border-color:rgba(255,255,255,.22) }

.ds-login-offer h3{ margin:0 !important }

.ds-login-price{ margin:2px 0 8px !important }

.ds-login-offer p{ margin:0 0 12px !important }
.ds-login-offer p:last-child{ margin:0 !important; opacity:1 }

/* The field spacing was written against .ds-login-in, the column the
   old two-column login page put the form in. The form is its own
   piece now and sits on pages that have no such column, so those
   fields had no spacing at all - which is how the reset page ended
   up with its address box against the captcha. Named on the form
   itself as well, so it carries its spacing wherever it is put. */
.ds-login-in form{ margin:0 0 26px }
.ds-login-in .ds-fld,
.ds-signin .ds-fld{ margin:0 0 14px }

/* And room under the last field, which is where the captcha goes. */
.ds-signin .dss-guard{ margin:0 0 18px }
.ds-login-remember label{ display:flex; align-items:center; gap:8px;
  }
.ds-login-remember input{ width:auto }

/* Fifty under the sign-in form, which is the gap asked for. The rule
   stays: it is the thing that says this is a separate request and
   not the end of the form above it. One line now rather than a
   second form - the reset has its own page. */
.ds-login-forgot{ margin:50px 0 0; padding-top:20px;
  border-top:1px solid rgba(255,255,255,.12) }

/* The pair on its own, which is what the account page shows somebody
   who is not signed in. The login page sets its own column width;
   here there is no column, so the form is held to a readable measure
   rather than running the width of the panel. */
.ds-account-panel > .ds-signin{ max-width:420px }

/* ------------------------------------------------------------------
 * The account menu.
 *
 * It is placed on the page now, as [account_menu] in its own column,
 * so the rules cannot hang off the wrapper the screen used to draw -
 * a menu laid out by hand was getting browser defaults and reading as
 * a bulleted list. Named on the menu itself, wherever it is put.
 *
 * It takes its type and its colors from the page, like the panels do.
 * Only the arrangement is stated here.
 * ---------------------------------------------------------------- */

/* A lined list: no marker, a rule between the items, nothing above the
   first or below the last. */
.ds-account-menu ul{ list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:0 }

.ds-account-menu-item + .ds-account-menu-item{
  border-top:1px solid color-mix(in srgb, currentColor 14%, transparent) }

/* Underlines off, and said with weight because something upstream
   insists: a plain text-decoration:none applies here and is overruled,
   so the links drew underlined inside a list that is already ruled. A
   navigation list reads as a list; underlining every item as well is
   two ways of saying the same thing. */
.ds-account-menu-item a{ display:block; padding:9px 0;
  text-decoration:none !important; opacity:.55;
  transition:opacity .18s ease }

.ds-account-menu-item a:hover,
.ds-account-menu-item a:focus-visible{ opacity:1 }

.ds-account-menu-item.is-here a{ opacity:1; font-weight:600 }

/* Log out is an item in the menu, not a thing beside it. It was set
   apart with a gap and dimmed, which made it read as a separate
   control that happened to sit under a list. */

/* Across, not down, once there is no column to sit in. */
@media (max-width:859px){
  .ds-account-menu ul{ flex-direction:row; flex-wrap:wrap; gap:2px 18px }
}

/* ------------------------------------------------------------------
 * Headings inside a screen.
 *
 * The page's own title is the only heading on these pages that is a
 * title. Everything a screen writes - the step it is on, the offer at
 * the bottom of the assessments list - is a subheading under it, and
 * drawn at the page's h4 size so a panel cannot out-shout the title
 * above it. Sized, not renamed: the levels stay what they are so the
 * page still reads in order to anything listening to it.
 * ---------------------------------------------------------------- */

/* Everything a screen writes under the page title, except an offer
   card's own heading - those take the theme's h3 and are left to it. */
.ds-account-panel :is(h2, h3, h4, h5):not(.dsa-offer *){
  font-size:var(--ds-h4-size);
  font-weight:var(--ds-h4-weight);
  text-transform:var(--ds-h4-case);
  line-height:var(--ds-h4-lh, 1em);
  letter-spacing:var(--ds-h4-track, 0em) }

/* ------------------------------------------------------------------
 * An account screen that draws its own menu.
 *
 * Only where the page has not placed one - see DSA_Screens::shell().
 * ---------------------------------------------------------------- */

/* ------------------------------------------------------------------
 * An account screen: the menu, then the screen itself.
 *
 * The menu is written by the screen rather than placed on the page,
 * because a menu that lives in the page can be deleted from the page -
 * and what goes with it is every link to the other screens and the way
 * out. Laid out here so all of them agree.
 *
 * It takes its type and its colors from the page, like the panels do;
 * only the arrangement is stated.
 * ---------------------------------------------------------------- */

.ds-account-screen{ display:grid; gap:28px;
  grid-template-columns:minmax(0,1fr) }

@media (min-width:860px){
  .ds-account-screen{ grid-template-columns:200px minmax(0,1fr); gap:40px }
}

@media (min-width:860px){
  .ds-account-screen-nav .ds-account-menu ul{ flex-direction:column; gap:2px;
    position:sticky; top:96px }
}

/* The way out, set apart from the screens it is not one of. */
/* The rule takes the page's own ink at low strength, rather than a
   white that only works on a dark page: these screens run on whatever
   the site is, and the login panel's rgba whites above do not. */


.ds-account-screen-body > .ds-account-panel:first-child{ margin-top:0 }