/**
 * The two offers, and the report read over the top of them.
 *
 * Type, colour and buttons come from the theme. Only the arrangement
 * is stated here.
 */

.dsa-offers{ display:grid; gap:20px; grid-template-columns:1fr }

@media (min-width:640px){
  .dsa-offers{ grid-template-columns:repeat(2, minmax(0, 1fr)) }
}

/* Three of them are three across. */
.dsa-offers.is-three{ grid-template-columns:repeat(3, minmax(0, 1fr)) }

.dsa-offer{ display:flex; flex-direction:column; gap:10px;
  padding:22px; border-radius:6px;
  border:1px solid color-mix(in srgb, currentColor 16%, transparent) }

/* The paid card is the one being sold, so its edge is drawn in full
   rather than faded back like the free one's. currentColor, so it is
   the page's own off-white and not a second one invented here. */
.dsa-offer.is-paid{ border-color:currentColor }

/* The panel sets overflow-wrap:anywhere so a long address cannot
   push the column wide. On a name it broke "Crescent" into "Cres"
   and "cent", so the heading opts out: a tier is called what it is
   called and wraps between words or not at all. */
.dsa-offer h3,
.dsa-offer h4{ margin:0 !important; overflow-wrap:normal }
.dsa-offer-price{ margin:0 !important; opacity:.75 }

/* The button spans the card, and the list sits below it with room
   between. Arrangement only. */
.dsa-offer .dsf-does{ margin:0 }

/* The panel sets overflow-wrap:anywhere so a long address cannot push
   the column wide, and it inherits onto a button label: "Purchase"
   came out as "Purcha se". A label is words and breaks between them
   or not at all. */
.dsa-offer .ds-btn{ width:100%; justify-content:center;
  overflow-wrap:normal }

.dsa-offer-list{ margin:14px 0 0 !important; padding:0; list-style:none;
  display:flex; flex-direction:column; gap:0 }

/* A check against each line, holding its own column so every line
   starts at one place. The size is the theme's small text, set on the
   item itself as .ds-as-small. */
.dsa-offer-list li{ padding:7px 0; position:relative;
  display:flex; align-items:baseline; gap:16px }

/* Green is the one colour these screens state, the same one the done
   step uses: it is the thing being signalled and the page's own ink
   cannot say it.
 *
 * Nudged down a tenth of an em. The row aligns on the baseline, and
 * an inline-flex box takes its own bottom edge as that baseline - so
 * the mark sat on the line the letters stand on rather than level
 * with them. */
.dsa-tick{ flex:0 0 auto; display:inline-flex;
  /* The site's accent, not a green. A tick in a feature list is not a
     passing test - it is the one mark the page repeats, and it belongs
     to the palette the rest of the account is drawn in. */
  color:var(--ds-accent);
  transform:translateY(.1em) }

/* Sized against the words beside it.
 *
 * An icon carries its own width as a share of the window, which is
 * the right answer for one standing on a page and the wrong one next
 * to a line of small text - it came out larger than the words it
 * belongs to. An em is whatever that line is set at. */
.dsa-tick .ds-icon{ width:1.15em; height:1.15em;
  /* The set draws at 1.6 on a 24 grid, which is a hairline once the
     mark is down at the size of the words. CSS beats the attribute. */
  stroke-width:3 }

/* The rule above a line, drawn in rather than simply being there.
 *
 * It was a border, and a border cannot be transformed, so the words
 * arrived and the lines between them were already finished. This is
 * an element, so it can be: motion.js adds is-in when the card is
 * reached and the transform is here. Each one waits a little longer
 * than the one above it, so the list draws down the card. */
.dsa-rule{ position:absolute; inset:0 0 auto 0; height:1px;
  background:color-mix(in srgb, currentColor 14%, transparent);
  transform:scaleX(0); transform-origin:left center;
  transition:transform .55s cubic-bezier(.22,1,.36,1) var(--dsa-rule-wait, 0s) }

.dsa-rule.is-in{ transform:scaleX(1) }

@media (prefers-reduced-motion: reduce){
  .dsa-rule{ transition:none; transform:scaleX(1) }
}




/* ------------------------------------------------------------------
 * The report, over the account.
 * ---------------------------------------------------------------- */

/* A report is a document, so it is read on paper rather than on the
   page's own ground - which on this site is near black. The surface
   is stated here and the document inside the frame is given the same
   one, so the two do not meet at a seam. */
.dsa-modal{ width:min(560px, 90vw); height:min(88vh, 920px);
  position:relative; padding:0; border:0; border-radius:8px; overflow:hidden;
  background:var(--dsa-paper, #f7f7f5);
  color:var(--dsa-ink, #15161a) }

/* A column once it is open, so the bar and the footer take what they
   need and the report gets the rest. It was a block with the frame
   told to be the height less forty-nine pixels, which is a figure that
   stops being true the moment either of them changes. */
.dsa-modal[open]{ display:flex; flex-direction:column }

.dsa-modal::backdrop{ background:rgba(0,0,0,.72) }

.dsa-modal-bar{ display:flex; align-items:center; gap:16px;
  flex:0 0 auto; padding:12px 16px;
  border-bottom:1px solid color-mix(in srgb, currentColor 16%, transparent) }

/* A strong element because it names the thing the sheet is showing,
   and not drawn bold: it is a label on a bar, not emphasis in a
   sentence. */
.dsa-modal-name{ margin-right:auto; font-weight:400 }

.dsa-modal-shut{ background:none; border:0; cursor:pointer;
  padding:4px 8px; color:inherit; line-height:1 }

.dsa-modal-body{ position:relative; flex:1 1 auto; min-height:0 }

.dsa-modal-frame{ display:block; width:100%; height:100%;
  border:0; background:var(--dsa-paper, #f7f7f5) }

.dsa-modal-foot{ display:flex; justify-content:flex-end;
  flex:0 0 auto; padding:12px 16px;
  border-top:1px solid color-mix(in srgb, currentColor 16%, transparent) }

/* Dark on the paper, so the one control in the footer reads as the
   control. The two colours are the report's own pair the other way
   round, not a third pair stated here.
 *
 * Set as the theme's own variables rather than as background and
 * color: the look is chosen by a class on the body - .ds-btn-solid
 * here - and that rule names two classes, so stating the colours
 * directly loses to it. Through the variables the theme paints the
 * button whichever look is on. */
.dsa-modal-foot .ds-btn{
  --ds-btn2-fill:var(--dsa-ink, #15161a);
  --ds-btn2-edge:var(--dsa-ink, #15161a);
  --ds-btn2-ink:var(--dsa-paper, #f7f7f5);
  /* And the inversion on hover, the same two the other way about. */
  --ds-btn2-fill-hover:var(--dsa-paper, #f7f7f5);
  --ds-btn2-edge-hover:var(--dsa-ink, #15161a);
  --ds-btn2-ink-hover:var(--dsa-ink, #15161a) }

/* ------------------------------------------------------------------
 * The three steps on the account's front screen.
 *
 * Numbered while they are outstanding and ticked once they are not,
 * so the number is a count of what is left rather than decoration.
 * ---------------------------------------------------------------- */

.dsa-journey{ display:flex; flex-direction:column; gap:0 }

/* The rows are divs with list roles, not list items, so the text
   effects leave them alone and none of this needs weight. */
.dsa-journey-step{ display:flex; align-items:center; gap:22px;
  flex-wrap:nowrap; padding:26px 0 }

/* The button on the right of its row, whatever is to the left of it.
   Without this the text block took the full width and the button
   dropped onto a line of its own. */
.dsa-journey-step > .ds-btn{ flex:0 0 auto; margin-left:auto }

.dsa-journey-step + .dsa-journey-step{
  border-top:1px solid color-mix(in srgb, currentColor 14%, transparent) }

.dsa-journey-mark{ flex:0 0 auto;
  width:44px; height:44px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid color-mix(in srgb, currentColor 30%, transparent);
  font-variant-numeric:tabular-nums; line-height:1 }

/* Done is the one place a colour is stated, because done is the thing
   being signalled and the page's own ink cannot say it. The site's
   accent says it, the same as every other tick on these screens - a
   green here and an orange two cards down is two palettes. */
.dsa-journey-step.is-done .dsa-journey-mark{
  color:var(--ds-accent);
  border-color:currentColor }

/* The title and what it says, side by side with room between them. */
.dsa-journey-what{ display:flex; flex-wrap:wrap;
  align-items:baseline; gap:4px 14px;
  min-width:0 }

.dsa-journey-said{ opacity:.55; overflow-wrap:anywhere }

.dsa-journey-step.is-done .dsa-journey-what strong{ opacity:.65 }

/* ------------------------------------------------------------------
 * A report section nobody has paid for.
 *
 * The heading stays readable and the figures go behind a blur with
 * the offer over the top. The shape of what is there - how many rows,
 * how long - is part of the argument, so it is not hidden, only made
 * unreadable.
 * ---------------------------------------------------------------- */

/* Room under a heading, and between sections. The theme's own
   heading margins are collapsed away inside the panel. */
.dsa-part{ margin:0 0 34px }
.dsa-part > h3{ margin:0 0 12px !important }
.dsa-line{ margin:0 0 6px !important }

/* A heading over a group of lines inside a section. It needs the room
   above it, not below: what it names starts on the next line. Nothing
   above the first, which already has the section's own heading over
   it. */
.dsa-line.is-head{ margin:22px 0 6px !important }
.dsa-part-body > .dsa-line.is-head:first-child{ margin-top:0 !important }
.dsa-audit-head{ margin:0 0 10px !important }

/* No blur. There is nothing behind it to blur: a locked section is
   sent without its rows, and these are bars standing in for them.
   A filter would only have been a promise that the figures were there
   and unreadable, and they were there and perfectly readable. */
.dsa-part.is-locked .dsa-part-body{ opacity:.45; pointer-events:none }

.dsa-part.is-locked .dsa-part-body ul{ list-style:none; padding:0;
  display:flex; flex-direction:column; gap:10px }

.dsa-bar{ height:.85em; border-radius:3px;
  background:currentColor; opacity:.25 }

/* Under the bars, not over them. It was positioned on top of a blur,
   and there is no blur any more - it was landing across the bars.
 *
 * One band across the section holding both the count and the button.
 * They were a column with the button a long way under the line it
 * belongs to, which read as two separate things on the page. The grey
 * is the page's own ink at a fifth, so it is the paper's grey rather
 * than a second one stated here. */
.dsa-part-locked{ display:flex; flex-direction:column; align-items:center;
  gap:10px; margin:14px 0 0 !important; text-align:center;
  padding:18px 20px;
  background:color-mix(in srgb, currentColor 20%, transparent) }

.dsa-part-locked span{ opacity:.8 }

/* What a section is asking them to do, under its words. Dark on the
   paper, the report's own two colours the other way round - the same
   pair the modal's footer button takes, and through the same escape:
   Secondary is what the dark row's button rule is written to leave
   alone. */
.dsa-does{ margin:16px 0 0 !important }

.dsa-does .ds-btn{
  --ds-btn2-fill:var(--dsa-ink, #15161a);
  --ds-btn2-edge:var(--dsa-ink, #15161a);
  --ds-btn2-ink:var(--dsa-paper, #f7f7f5);
  --ds-btn2-fill-hover:var(--dsa-paper, #f7f7f5);
  --ds-btn2-edge-hover:var(--dsa-ink, #15161a);
  --ds-btn2-ink-hover:var(--dsa-ink, #15161a) }

@media print{
  .dsa-part.is-locked .dsa-part-body{ display:none }
  .dsa-part-locked{ position:static; align-items:flex-start }
}

/* A group of questions inside a step. */
.dsa-group{ margin:50px 0 14px !important }
.dsa-group:first-child{ margin-top:0 !important }

/* ------------------------------------------------------------------
 * Transaction history.
 *
 * A row of facts about one payment. Arrangement only - the type is
 * the page's.
 * ---------------------------------------------------------------- */

.dsa-money-list{ display:flex; flex-direction:column }

.dsa-money-row{ display:flex; flex-wrap:wrap; align-items:baseline;
  gap:6px 20px; padding:14px 0 }

.dsa-money-row + .dsa-money-row{
  border-top:1px solid color-mix(in srgb, currentColor 14%, transparent) }

.dsa-money-what{ margin-right:auto; overflow-wrap:anywhere }
.dsa-money-sum{ font-variant-numeric:tabular-nums }

/* ------------------------------------------------------------------
 * The audit, on the account.
 *
 * Rank draws this in the admin and it reads well there, but that
 * renderer is an admin screen - a dialog, admin-post, the admin
 * stylesheet. None of it belongs on a client's account, so this is
 * the same information in the same shape with its own rules. Nothing
 * here is shared with the admin side and nothing in the admin reads
 * these names.
 *
 * It keeps the theme's typeface and its sizes. What it states is the
 * surface - a report is read on paper, not on the site's own ground -
 * and the three colours of the lights.
 * ---------------------------------------------------------------- */

:root{
  --dsa-paper:#f7f7f5;
  --dsa-ink:#15161a;
  --dsa-rule:rgba(0,0,0,.12);
  --dsa-quiet:rgba(0,0,0,.55);
}


.dsa-report{ color:var(--dsa-ink) }

/* Whose report it is, and then the site. The theme's heading margin is
   half an em, which on a title this size is a gap wide enough to read
   as a break between two things. */
.dsa-report > h2{ margin:0 0 20px !important }

/* The theme paints headings for its own dark ground. On paper they
   have to take the paper's ink or they are white on white. */
.dsa-report h1,.dsa-report h2,.dsa-report h3,.dsa-report h4{ color:var(--dsa-ink) }

/* --- the four numbers ---------------------------------------------- */

.dsa-figures{ display:flex; flex-wrap:wrap; gap:10px;
  margin:0 0 24px }

.dsa-figure{ flex:1 1 90px; display:flex; flex-direction:column; gap:2px;
  padding:14px 16px; border-radius:6px;
  border:1px solid var(--dsa-rule) }

.dsa-num{ font-variant-numeric:tabular-nums; line-height:1 }
.dsa-flabel{ color:var(--dsa-quiet) }

/* --- the lights ---------------------------------------------------- */

.dsa-num.is-ok,   .dsa-dot.is-ok{   color:#1f9d55 }
.dsa-num.is-half, .dsa-dot.is-half{ color:#c77700 }
.dsa-num.is-bad,  .dsa-dot.is-bad{  color:#cf2d30 }
.dsa-dot.is-none{ color:var(--dsa-quiet) }

.dsa-audit-block{ margin:0 0 22px }
.dsa-audit-head{ margin:0 0 8px !important }

/* A line the section has a verdict on, with the same light in front of
   it that the audit draws. Laid out like a check for the same reason:
   the dot holds its own column so the text of every line starts at one
   place. */
.dsa-line.is-lit{ display:flex; align-items:baseline; gap:12px }

.dsa-checks{ list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column }

.dsa-check{ display:flex; align-items:baseline; gap:12px;
  padding:9px 0 }

.dsa-check + .dsa-check{ border-top:1px solid var(--dsa-rule) }

.dsa-dot{ flex:0 0 auto; width:9px; height:9px; border-radius:50%;
  background:currentColor; transform:translateY(-1px) }

.dsa-check-what{ flex:1 1 auto; min-width:0 }
.dsa-check-said{ flex:0 1 auto; color:var(--dsa-quiet); text-align:right;
  overflow-wrap:anywhere }

/* The button row, spaced as the field grid spaces its rows.
 *
 * Darkside Forms puts its send button inside the grid, so the grid's
 * own row gap holds it off the last field and dsf-does carries no
 * margin of its own. These screens have several grids and the button
 * sits after them, so it takes the same gap rather than a number
 * invented here. */
.dsa-company .dsf-does,
.dsa-profile .dsf-does,
.dsa-comms .dsf-does{ margin-top:var(--ds-field-gap, 14px) }

/* The wait, while a report loads. Over the frame's own box, which is
   where the report will be. */
.dsa-modal-wait{ position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center }

.dsa-modal-wait[hidden]{ display:none }

.dsa-spin{ width:26px; height:26px; border-radius:50%;
  border:2px solid color-mix(in srgb, currentColor 22%, transparent);
  border-top-color:currentColor;
  animation:dsa-spin .7s linear infinite }

@keyframes dsa-spin{ to{ transform:rotate(360deg) } }

@media (prefers-reduced-motion:reduce){
  .dsa-spin{ animation-duration:2.4s }
}

.dsa-sronly{ position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap }

/* The page the score is about. */
.dsa-shot{ margin:0 0 22px; border-radius:6px; overflow:hidden;
  border:1px solid var(--dsa-rule) }
.dsa-shot img{ display:block; width:100%; height:auto }

/* Still working on it. The button is the thing that would be
   pressed, so it is the thing that says why it cannot be. */
.dsa-working{ cursor:default }
.dsa-working .dsa-spin{ width:15px; height:15px; border-width:2px;
  flex:0 0 auto }