/* What every Settings page shares, so the pages read as one set: the page's
   name, one gap under it, prose at a reading measure, and text fields as wide
   as an address rather than as the column. */
.settings-nav ~ article main {
  /* `article h1` is the other layouts' centred hero. This one heads the
     column, level with the menu beside it. */
  & > h1 {
    margin: 0 0 2rem;
    font-size: 1.5em;
    text-align: start;
  }

  /* Whatever comes first brings no margin of its own, so the gap is the
     heading's alone. */
  & > h1 + *,
  & > h1 + * > :first-child {
    margin-top: 0;
  }

  p {
    max-width: 65ch;
  }

  :is(input[type=text], input[type=url], input[type=password], input[type=email]) {
    max-width: 32rem;
  }
}

/* Installing really is a sequence, so the steps are numbered. The first one
   is the download button. The rest are spaced to match it, so the four read
   as one list, and the numbers start at the paragraph's left edge. */
.install-steps {
  margin: 1rem 0 0;
  padding-left: 1.25em;

  li + li {
    margin-top: 0.5rem;
  }
}

.account-facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.5rem 2rem;
  margin: 0 0 1rem;

  dt {
    color: var(--mid-color);
  }

  dd {
    margin: 0;
  }
}

/* Section names are labels, the same as the group names on the start page,
   so the two pages read as one app. */
:is(.user-section h2, #import-export h3) {
  padding-bottom: 0.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--highlight-color);
  border-bottom: 0.0625rem solid var(--border-color);
}

.user-section {
  margin: 2.5em 0;
  ul {
    margin: 0;
  }
  h2 {
    margin: 0 0 1rem;
  }
}

/* The editor's error list, at the size of the help text here. The editor's
   rows are denser than any form in Settings. */
.password-form .form-errors {
  margin: 0 0 1em;
  font-size: 0.875rem;
}

/* The answer to the last save, at the right end of the heading row. It is
   placed over the row rather than in the flow, so its arrival moves nothing
   under the pointer. */
#user-preferences {
  position: relative;
}

.save-status {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
  font-size: 0.75rem;
  color: var(--mid-color);

  /* Each save swaps in a new span, so a second "Saved" fades in again
     instead of looking like the first one still sitting there. */
  span {
    animation: save-status-in 0.4s ease-out;
  }

  .alert {
    color: var(--danger-color);
  }
}

@keyframes save-status-in {
  from { opacity: 0; }
}

#connection-settings {
  /* Spaced by a gap rather than by paragraph margins: three <p> in a row is
     three 1em margins, which put 40px between lines that belong together. */
  /* As wide as the address field it takes the place of. */
  .connection-status {
    box-sizing: border-box;
    max-width: 32rem;
    margin: 1em 0;
    padding: 1em;
    border: 0.0625rem solid var(--border-color);
    border-radius: 0.5em;

    display: flex;
    flex-direction: column;
    gap: 0.375em;

    p {
      margin: 0;
    }
  }

  /* Tier 1: what the state is. The only line at body size or above. */
  .connection-state {
    font-size: 1.125em;
  }

  /* Tier 2: the token's facts, sitting under the state as its subtitle. */
  .connection-facts {
    font-size: 0.875em;
    color: var(--mid-color);
  }

  /* Tier 3: a footnote about how renewal behaves. Same size as the facts but
     ruled off from them, because it is explanation rather than data — that
     separation is what tells the two apart, not a third font size.

     `p.` for specificity: `.connection-status p { margin: 0 }` above matches an
     element as well as a class, so a bare class loses to it and the rule ends up
     sitting 6px under the facts instead of clear of them. */
  p.connection-note {
    margin-top: 0.5em;
    padding-top: 0.75em;
    border-top: 0.0625rem solid var(--border-color);
    font-size: 0.875em;
    color: var(--mid-color);
  }

  /* Also only styled inside a form's .form-group, so the pending box's status
     line was rendering as plain body text too. */
  .help-text {
    font-size: 0.875em;
    color: var(--mid-color);
  }

  /* The accent, not --positive-color: a hard-coded green ignored the accent the
     rest of the page is painted in, and on a red or pink accent it read as
     something from another app. */
  .connection-status.connected {
    border-color: var(--highlight-color);
  }

  /* Muted, because this box is the quiet state — but the message inside it stays
     in --danger-color, because it is a real failure carrying a real error, not a
     "not connected yet". That state renders no box at all, just the form. */
  .connection-status.disconnected {
    border-color: var(--border-color);
    color: var(--danger-color);
  }

  /* Inside the status box now, so it needs to clear the footnote above it. Set
     on the button_to's form, which is the actual flex child. */
  .connection-status form {
    margin-top: 0.5em;
  }

  .connect-form {
    max-width: none;
    display: flex;
    flex-direction: column;
    gap: 1em;

    & > div {
      margin: 0;
    }

    /* Everything else about the button is .action-button's; this is only about
       not being stretched by the column it sits in. */
    .action-button {
      align-self: start;
    }
  }
}

/* Two controls and a warning. The only heading is "Import", so the border under
   it is what divides the halves — the export button used to have a heading of
   its own that said nothing its own label didn't.

   The row's height is --button-height, because the picker has to line up with a
   button and the export button above it is one. tokens.css records what happens
   when two controls in a row disagree by a pixel. */
#import-export {
  --import-control-height: var(--button-height);

  /* The picker's own button. Pinned rather than left to its content, because the
     row's vertical centring is arithmetic — see input[type=file] below. */
  --import-picker-height: 2rem;

  h3 {
    margin: 2em 0 0.75em;
  }

  /* One row: the picker takes the space, the submit takes what it needs, and
     the warning wraps to its own line under both. */
  .import-form {
    max-width: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5em;

    /* The button inside a file input is centred by leaving it no room to be
       off-centre, not by aligning it: the padding is exactly the space left over
       once the pinned button height and the two borders are taken out of the
       row height, so the content box and the button are the same size.
       `display: flex; align-items: center` is the obvious thing and it does
       nothing — WebKit lays a file input's shadow content out regardless of the
       input's own `display`, so the button ends up flush against the top of the
       content box with all the slack underneath. Measured: 0px above / 8px
       below before this, 5px / 5px after. */
    input[type=file] {
      flex: 1 1 18em;
      box-sizing: border-box;
      height: var(--import-control-height);
      padding: calc((var(--import-control-height) - var(--import-picker-height) - 0.125rem) / 2) 0.75em;
      font-family: inherit;
      font-size: 0.875em;
      color: var(--fg-color);
      background: var(--bg-color);
      border: 0.0625rem solid var(--border-color);
      border-radius: 0.5em;
      outline: medium solid var(--bg-color);
      transition: 0.3s ease outline;

      &:focus {
        border-color: var(--highlight-color);
        outline: medium solid var(--highlight-color);
      }

      /* The native picker button, restyled to the same small bordered button
         the item lists use. Cheaper than hiding the input behind a label and a
         Stimulus controller, and it keeps the native affordance. */
      &::file-selector-button {
        box-sizing: border-box;
        height: var(--import-picker-height);
        /* Its own label centres on line-height, the height being fixed. */
        line-height: calc(var(--import-picker-height) - 0.125rem);
        font-family: inherit;
        font-size: inherit;
        font-weight: bold;
        margin-right: 0.75em;
        padding: 0 1em;
        color: var(--fg-color);
        background: var(--bg-color);
        border: 0.0625rem solid var(--border-color);
        border-radius: var(--control-radius);
        cursor: pointer;
        transition: 0.2s ease all;
      }

      &::file-selector-button:hover {
        background: var(--bg-highlight-color);
      }
    }

    /* .help-text is only styled inside .form-group, and this one isn't in one. */
    .help-text {
      flex-basis: 100%;
      margin: 0;
      font-size: 0.875rem;
      color: var(--mid-color);
    }
  }
}