/* The three account screens: Settings, Profile, Storage.
 *
 * Shaped like the mobile app rather than like the tool screens, because
 * they are the same screens: a small-caps section label, a card, and rows
 * inside it. Someone who has used the phone app should recognise this
 * page before reading a word of it.
 *
 * Colours come from shared/brand.css and follow the theme. Nothing here
 * defines a colour of its own.
 */

.ac {
  margin: 0 auto;
  max-width: 760px;
  padding: 28px 20px 56px;
}

.ac-head {
  margin-bottom: 26px;
}

.ac-head h1 {
  font-size: 30px;
  letter-spacing: -0.02em;
  margin: 0 0 6px;
}

.ac-lede {
  color: var(--pf-muted);
  margin: 0;
  max-width: 58ch;
}

.ac-section {
  color: var(--pf-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin: 28px 0 8px;
  text-transform: uppercase;
}

.ac-section:first-of-type {
  margin-top: 0;
}

.ac-card {
  background: var(--pf-card);
  border: 1px solid var(--pf-line);
  border-radius: var(--pf-radius);
  overflow: hidden;
}

/* A card holding PROSE rather than rows.
 *
 * .ac-card carries no padding of its own, because what normally goes
 * inside it is a list of rows and each row brings its own. Put a bare
 * paragraph in one and the text presses against the border: measured
 * on the About page at 3px from the left edge and 1px from the bottom,
 * which reads as a layout bug rather than a card.
 *
 * .ac-note's own "8px 2px 0" margin is what the rows expect, so the
 * padding goes on the card and the note's margin is zeroed here rather
 * than changed globally. */
.ac-card.is-prose {
  padding: 18px 16px;
}

.ac-card.is-prose > .ac-note {
  margin: 0;
}

.ac-card.is-prose > .ac-note + .ac-note {
  margin-top: 12px;
}

.ac-card.is-prose > .ac-actions {
  margin-top: 16px;
}

/* A note under a card, the way the mobile app explains a setting it has
   just offered. */
.ac-note {
  color: var(--pf-muted);
  font-size: 13.5px;
  line-height: 1.55;
  margin: 8px 2px 0;
}

.ac-row {
  align-items: center;
  border-bottom: 1px solid var(--pf-line);
  display: flex;
  gap: 16px;
  min-height: 58px;
  padding: 12px 16px;
  width: 100%;
}

.ac-row:last-child {
  border-bottom: 0;
}

.ac-row-text {
  flex: 1;
  min-width: 0;
}

.ac-row-text strong {
  display: block;
  font-size: 15px;
  font-weight: 600;
}

.ac-row-text small {
  color: var(--pf-muted);
  display: block;
  font-size: 13px;
  line-height: 1.5;
  margin-top: 2px;
}

/* A row that navigates. A button, not a link, when it opens something in
   place; a link when it really goes somewhere, so middle-click works. */
a.ac-row,
button.ac-row {
  background: none;
  border-left: 0;
  border-right: 0;
  border-top: 0;
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: left;
  text-decoration: none;
}

a.ac-row:hover,
button.ac-row:hover {
  background: var(--pf-surface);
}

.ac-chevron {
  color: var(--pf-muted);
  flex: none;
  height: 18px;
  width: 18px;
}

/* ---- Switch -------------------------------------------------------------
 *
 * A real checkbox underneath, moved off screen rather than display:none,
 * so it keeps its place in the tab order and its label association. The
 * visible part is drawn from the checkbox's own :checked state, so there
 * is no second source of truth to get out of step.
 */

.ac-switch {
  flex: none;
  position: relative;
}

.ac-switch input {
  height: 100%;
  left: 0;
  margin: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 1;
  cursor: pointer;
}

.ac-switch span {
  background: var(--pf-line-strong);
  border-radius: 999px;
  display: block;
  height: 28px;
  transition: background 0.15s ease;
  width: 48px;
}

.ac-switch span::after {
  background: #ffffff;
  border-radius: 50%;
  content: "";
  display: block;
  height: 22px;
  margin: 3px;
  transition: transform 0.15s ease;
  width: 22px;
}

.ac-switch input:checked + span {
  background: var(--pf-primary);
}

.ac-switch input:checked + span::after {
  transform: translateX(20px);
}

.ac-switch input:focus-visible + span {
  outline: 2px solid var(--pf-green-600);
  outline-offset: 2px;
}

/* A switch that cannot be used has to look it.
 *
 * Without this the off track keeps its full-strength colour, which in
 * dark mode is a desaturated green, and an unavailable switch reads as
 * one that might be on. Dimmed and with the cursor saying no, it reads
 * as what it is: a control this server cannot honour. */
.ac-switch input:disabled {
  cursor: not-allowed;
}

.ac-switch input:disabled + span {
  opacity: 0.45;
}

/* The row that holds it goes quiet too, so the disabled state is a
   property of the setting rather than of one small widget. */
.ac-row:has(input:disabled) .ac-row-text strong {
  opacity: 0.6;
}

/* ---- Form --------------------------------------------------------------- */

.ac-form {
  display: grid;
  gap: 14px;
  padding: 16px;
}

.ac-field {
  display: grid;
  gap: 5px;
}

.ac-field > label {
  font-size: 13.5px;
  font-weight: 600;
}

.ac-field input,
.ac-field select,
.ac-field textarea {
  background: var(--pf-card);
  border: 1px solid var(--pf-line-strong);
  border-radius: 9px;
  color: var(--pf-ink);
  min-height: 44px;
  padding: 8px 12px;
  width: 100%;
}

.ac-field textarea {
  min-height: 76px;
  resize: vertical;
}

.ac-field input:focus,
.ac-field select:focus,
.ac-field textarea:focus {
  border-color: var(--pf-primary);
  outline: 2px solid var(--pf-green-600);
  outline-offset: 1px;
}

.ac-field small {
  color: var(--pf-muted);
  font-size: 12.5px;
}

.ac-field.is-bad input {
  border-color: var(--pf-danger);
}

.ac-field-error {
  color: var(--pf-danger);
  font-size: 12.5px;
  font-weight: 600;
}

/* A country code and a phone number are one value typed in two boxes. */
.ac-split {
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(96px, 150px) 1fr;
}

.ac-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0 16px 16px;
}

/* ---- Panels -------------------------------------------------------------- */

.ac-panel {
  background: var(--pf-tint);
  border: 1px solid var(--pf-tint-line);
  border-radius: 10px;
  display: flex;
  gap: 10px;
  padding: 12px 14px;
}

.ac-panel svg {
  color: var(--pf-primary);
  flex: none;
  height: 18px;
  margin-top: 2px;
  width: 18px;
}

.ac-panel p {
  font-size: 13.5px;
  line-height: 1.55;
  margin: 0;
}

.ac-panel.is-danger {
  background: var(--pf-danger-soft);
  border-color: var(--pf-danger);
}

.ac-panel.is-danger svg {
  color: var(--pf-danger);
}

.ac-panel.is-warning {
  background: var(--pf-warn-soft);
  border-color: var(--pf-warn-line);
}

.ac-panel.is-warning svg {
  color: var(--pf-warn);
}


/* ---- Storage ------------------------------------------------------------- */

.ac-total {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  padding: 16px;
}

.ac-total b {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
}

.ac-total span {
  color: var(--pf-muted);
  font-size: 14px;
}

.ac-item {
  align-items: center;
  border-bottom: 1px solid var(--pf-line);
  display: flex;
  gap: 14px;
  padding: 12px 16px;
}

.ac-item:last-child {
  border-bottom: 0;
}

.ac-item svg {
  color: var(--pf-muted);
  flex: none;
  height: 20px;
  width: 20px;
}

.ac-item-text {
  flex: 1;
  min-width: 0;
}

.ac-item-text strong {
  display: block;
  font-size: 14.5px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ac-item-text small {
  color: var(--pf-muted);
  display: block;
  font-size: 12.5px;
}

/* ---- Library ------------------------------------------------------------ */

.lib-actions {
  display: flex;
  flex: none;
  gap: 8px;
}

/* The divider between what is at risk and what has already been saved
   out. A heading inside the card rather than a second card, because
   they are one list read top to bottom. */
.lib-group {
  background: var(--pf-surface);
  border-bottom: 1px solid var(--pf-line);
  border-top: 1px solid var(--pf-line);
  color: var(--pf-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 8px 16px;
  text-transform: uppercase;
}

@media (max-width: 560px) {
  .ac-item {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .lib-actions {
    width: 100%;
  }

  .lib-actions > * {
    flex: 1;
  }
}

.ac-empty {
  color: var(--pf-muted);
  padding: 30px 16px;
  text-align: center;
}

.ac-empty strong {
  color: var(--pf-ink);
  display: block;
  font-size: 16px;
  margin-bottom: 4px;
}

/* ---- Shared bits --------------------------------------------------------- */

.ac-status {
  font-size: 13.5px;
  font-weight: 600;
  margin: 10px 2px 0;
  min-height: 20px;
}

.ac-status.error {
  color: var(--pf-danger);
}

.ac-status.ok {
  color: var(--pf-primary);
}

.ac-busy {
  color: var(--pf-muted);
  padding: 26px 16px;
  text-align: center;
}

@media (max-width: 560px) {
  .ac-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }

  /* A row that navigates keeps its chevron beside the text; only rows
     with a control in them stack. */
  a.ac-row,
  button.ac-row {
    align-items: center;
    flex-direction: row;
  }

  .ac-split {
    grid-template-columns: 1fr;
  }
}

/* A feature named but not built. Honest, and visibly not a control:
   nothing here is clickable, because there is nothing to click yet. */
.ac-chip-soon {
  background: var(--pf-surface);
  border: 1px solid var(--pf-line);
  border-radius: 999px;
  color: var(--pf-muted);
  flex: none;
  font-size: 11.5px;
  font-weight: 760;
  letter-spacing: 0.05em;
  padding: 5px 11px;
  text-transform: uppercase;
}

/* "(your identity)" beside the phone label: the same size as the
   label, not shouting, but it is the reason the field is required. */
.ac-field > label em {
  color: var(--pf-muted);
  font-style: normal;
  font-weight: 500;
}

/* ---- Account page ------------------------------------------------------
 *
 * Jump links instead of tabs. There are three short sections, and a tab
 * bar would hide two thirds of a page somebody opens twice a year.
 */

.ac-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 20px;
}

.ac-jump a {
  background: var(--pf-card);
  border: 1px solid var(--pf-line);
  border-radius: 999px;
  color: var(--pf-ink);
  font-size: 14px;
  padding: 7px 14px;
  text-decoration: none;
}

.ac-jump a:hover {
  border-color: var(--pf-green-700);
  color: var(--pf-green-700);
}

/* Which section you are actually looking at. These are jump links to
   three parts of one page, and without this all three looked the same
   wherever you had scrolled to, so the row said nothing about where
   you were. Set by the page as you scroll. */
.ac-jump a.is-current {
  background: var(--pf-green-700);
  border-color: var(--pf-green-700);
  color: #ffffff;
  font-weight: 650;
}

.ac-jump a.is-current:hover {
  color: #ffffff;
}

/* "Trial" beside the plan name: the plan somebody is on and the plan
   they are currently getting differ during a trial, and showing one
   without the other is how a lapse comes as a surprise. */
.ac-pill {
  background: var(--pf-green-700);
  border-radius: 999px;
  color: #ffffff;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 4px 10px;
  text-transform: uppercase;
  white-space: nowrap;
}

.ac-banner {
  background: var(--pf-warn-soft);
  border: 1px solid var(--pf-warn-line);
  border-radius: var(--pf-radius);
  color: var(--pf-warn);
  margin: 0 0 18px;
  padding: 12px 14px;
}

/* Status lines carry their own colour so "saved" and "could not save"
   are not the same grey sentence. */
.ac-status[data-kind="ok"] { color: var(--pf-green-700); }
.ac-status[data-kind="error"] { color: var(--pf-danger); }
.ac-status[data-kind="busy"] { color: var(--pf-muted); }

/* The read-only view of a profile. A definition list rather than a
   table: these are label/value pairs, and a table would need a header
   row that says nothing. */
.ac-view {
  display: grid;
  gap: 2px 18px;
  grid-template-columns: minmax(0, 11em) 1fr;
  margin: 0;
}

.ac-view dt {
  color: var(--pf-muted);
  font-size: 14px;
  padding: 7px 0;
}

.ac-view dd {
  margin: 0;
  padding: 7px 0;
  /* A long address or email must wrap rather than widen the card. */
  overflow-wrap: anywhere;
}

@media (max-width: 560px) {
  .ac-view {
    grid-template-columns: 1fr;
  }

  .ac-view dt {
    padding-bottom: 0;
  }

  .ac-view dd {
    padding-top: 2px;
  }
}

/* ---- Sign-up -----------------------------------------------------------
 *
 * Three panels on one page rather than three pages: the step strip shows
 * how much is left, and changing the number does not navigate away from
 * what has already been typed.
 */

.su-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
}

.su-steps li {
  align-items: center;
  color: var(--pf-muted);
  display: flex;
  font-size: 14px;
  gap: 8px;
}

.su-steps li span {
  align-items: center;
  background: var(--pf-card);
  border: 1px solid var(--pf-line);
  border-radius: 999px;
  display: inline-flex;
  font-size: 12.5px;
  font-weight: 700;
  height: 26px;
  justify-content: center;
  width: 26px;
}

.su-steps li.is-current {
  color: var(--pf-ink);
  font-weight: 600;
}

.su-steps li.is-current span {
  background: var(--pf-primary);
  border-color: var(--pf-primary);
  color: #ffffff;
}

/* A finished step is marked, not hidden: it is also how somebody knows
   they can go back to it. */
.su-steps li.is-done span {
  background: var(--pf-ok-soft);
  border-color: var(--pf-green-700);
  color: var(--pf-green-700);
}

.su-panel {
  margin-bottom: 14px;
}

.su-title {
  font-size: 18px;
  margin: 0 0 4px;
}

.su-note {
  color: var(--pf-muted);
  font-size: 13.5px;
  line-height: 1.5;
  margin: 0 0 16px;
  max-width: 54ch;
}

/* The code field is the one place where character spacing helps: six
   digits read as six digits rather than as a number. */
.su-code {
  font-size: 24px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.4em;
  max-width: 220px;
  text-align: center;
}

/* ---- About -------------------------------------------------------------
 *
 * The hero from the phone's About screen: mark, wordmark, the one line
 * that says what this is for, and the version. Somebody reporting a
 * problem is asked which version they are on, and the web client had no
 * About page at all to answer with.
 */
.ab-hero {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px;
  text-align: center;
}

.ab-mark {
  border-radius: 14px;
  height: 60px;
  width: 60px;
}

.ab-brand {
  color: var(--pf-primary);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 3px;
  margin: 0;
}

.ab-tagline {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  margin: 2px 0 0;
}

.ab-version {
  color: var(--pf-muted);
  font-size: 12px;
  font-weight: 600;
  margin: 4px 0 0;
}

.ab-footer {
  color: var(--pf-muted);
  font-size: 11px;
  margin-top: 24px;
  text-align: center;
}

/* ---- Status History ----------------------------------------------------
 *
 * One row per scan, opening to the per-issue counts. <details> rather
 * than a second screen: there are only ever a handful of numbers behind
 * a row, and a navigation for that is a navigation too many.
 */
.sh-bar {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  margin: 18px 0 10px;
}

.sh-entry {
  margin-bottom: 8px;
  padding: 0;
}

.sh-entry > summary {
  align-items: center;
  cursor: pointer;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  justify-content: space-between;
  list-style: none;
  padding: 14px 16px;
}

.sh-entry > summary::-webkit-details-marker {
  display: none;
}

.sh-when {
  font-size: 14.5px;
  font-weight: 600;
}

.sh-figures {
  color: var(--pf-muted);
  font-size: 13px;
}

.sh-clean {
  color: var(--pf-primary);
}

.sh-issues {
  color: var(--pf-warn, #b45309);
}

.sh-detail {
  border-top: 1px solid var(--pf-line);
  padding: 12px 16px 14px;
}

.sh-issue {
  display: flex;
  font-size: 13.5px;
  gap: 12px;
  justify-content: space-between;
  padding: 6px 0;
}

.sh-issue + .sh-issue {
  border-top: 1px solid var(--pf-line);
}

/* ---- Promises and perks ------------------------------------------------
 *
 * The phone states plainly what is stored, what is never done, and how
 * it is protected, and makes the case for switching the profile on. The
 * web page had the switch and neither argument.
 */
.pf-perks,
.pf-promises {
  display: grid;
  gap: 10px;
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
}

.pf-perks li,
.pf-promises li {
  display: grid;
  font-size: 13.5px;
  gap: 10px;
  grid-template-columns: 20px minmax(0, 1fr);
  line-height: 1.5;
}

.pf-perks svg,
.pf-promises svg {
  height: 16px;
  margin-top: 2px;
  width: 16px;
}

.pf-perks svg {
  color: var(--pf-primary);
}

/* A tick and a cross carry the meaning, so they must not be the same
   colour: "we never sell your data" with a green tick beside it reads
   as the opposite of what it says. */
.pf-promises .is-yes,
.pf-promises li.is-yes svg {
  color: var(--pf-primary);
}

.pf-promises li.is-no svg {
  color: var(--pf-danger, #b42318);
}

.pf-promises li span:last-child {
  color: var(--pf-ink);
}

.pf-promise-head {
  color: var(--pf-muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  margin: 16px 0 0;
  text-transform: uppercase;
}

/* ---- Sign up: the number step -----------------------------------------
 *
 * The card was full width with the controls strung across it: the note
 * ran to the card's edge, the number box was as wide as the page for a
 * nine-digit number, and the button sat tight under the fields looking
 * like part of them. Narrow, centred, and spaced.
 */
.su-panel {
  margin-bottom: 14px;
  padding: 22px;
}

/* The whole step is a centred column, so the eye has one line to follow
   rather than tracking across a wide card. */
.su-panel .su-title,
.su-panel .su-note,
.su-phone-field,
.su-actions {
  margin-left: auto;
  margin-right: auto;
  max-width: 420px;
}

.su-panel .su-note {
  max-width: 420px;
}

/* Flag, country, number: the number gets the room, the other two only
   what they need. A nine-digit number does not want a full-width box. */
.su-phone {
  align-items: center;
  display: grid;
  gap: 8px;
  grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.1fr);
}

.su-flag {
  align-items: center;
  border: 1px solid var(--pf-line);
  border-radius: 8px;
  display: flex;
  height: 44px;
  justify-content: center;
  overflow: hidden;
  width: 40px;
}

.su-flag img {
  display: block;
  height: 18px;
  object-fit: cover;
  width: 24px;
}

/* Clear of the fields, so it reads as the thing you press when the
   fields are right rather than as a third field. */
.su-actions {
  justify-content: center;
  margin-top: 20px;
}

@media (max-width: 560px) {
  .su-phone {
    grid-template-columns: auto minmax(0, 1fr);
  }

  /* The number takes its own row on a phone: sharing one with the
     country select left both too narrow to read. */
  .su-phone input {
    grid-column: 1 / -1;
  }
}

/* One line pointing at Help and the privacy notice, where the long
   explanations live. They used to be ON this page: the case for signing
   up and three lists of what is and is not kept, both correct and
   neither belonging on a screen somebody opens to change their address. */
.su-elsewhere {
  margin: -6px 0 18px;
}