/* ---------------------------------------------------------------- settings */

/* ---------------------------------------------------------------- settings

   Six panels in a grid rather than nine sections in a column.

   The column was 620px wide and eighteen hundred tall, which is a lot of
   scrolling past things you did not come for to reach the one you did. The
   width is now enough for two panels side by side on a desktop and exactly one
   on anything narrower, and the grid decides which without a breakpoint. */
.settings {
  max-width: 1080px;
  gap: var(--space-6);
}

.settings-grid {
  display: grid;

  /* 320px is a panel that still holds a theme picker three across. Below two of
     them plus the gap, auto-fit gives one column and the page reads exactly as
     it used to. */
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--space-4);

  align-items: start;
}

/* Two columns that pack, rather than a grid that stretches.
   
   A grid gives every panel in a row the height of the tallest, so Privacy —
   which is four lines and a button — was drawn as tall as the export panel with
   two thirds of it empty. Columns let each panel be its own height and flow the
   next one up underneath, which is what a settings page wants and what a grid
   cannot do without masonry.
   
   The grid rules above still apply below the breakpoint, where there is one
   column and the two behave identically. */
@media (min-width: 900px) {
  .settings-grid {
    display: block;
    column-count: 2;
    column-gap: var(--space-4);
  }

  .settings-grid > .setting-panel {
    /* A panel split across a column break is a panel nobody can read. */
    break-inside: avoid;
    margin-block-end: var(--space-4);
  }
}

.setting-panel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);

  padding: var(--space-5);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-panel);
  background: var(--surface-2);
}

/* A second subject inside a panel — importing under exporting, the device lock
   under the note lock. Separated by a rule rather than by a gap, because a gap
   at this size reads as the panel having ended. */
.setting-divide {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);

  width: 100%;
  margin-block-start: var(--space-3);
  padding-block-start: var(--space-4);
  border-block-start: 1px solid var(--border-subtle);
}

/* Buttons on their own line, wrapping rather than overflowing a narrow panel. */
.setting-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-block-start: var(--space-1);
}

/* The one that cannot be undone. Full width under the grid, alone, so it never
   shares a row with something harmless. */
.settings > .setting-danger {
  border-color: var(--danger);
  background: var(--danger-soft);
}

.settings > .setting-danger .setting-heading {
  color: var(--danger);
}

/* A card inside a card is always wrong, and the usage panel is a card.
   Inside a settings panel it gives up its own chrome and becomes what it always
   was: a heading and three numbers about the plan named directly above it. */
.setting-panel .panel {
  width: 100%;
  padding: 0;
  border: none;
  background: none;
  box-shadow: none;
}

.setting-panel .panel .panel-head {
  display: none;
}

@media (max-width: 700px) {
  .setting-panel {
    padding: var(--space-4);
  }
}

.setting-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}

.setting-heading {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--ink-muted);
}

.setting-note {
  font-size: var(--text-xs);
  color: var(--ink-muted);
  max-width: 60ch;
  line-height: 1.55;
}

/* Sits under the control that failed, not at the top of the page, so the
   message and the button that produced it are read together. */
.setting-error,
.account-error {
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  color: var(--danger);
  max-width: 60ch;
  line-height: 1.55;
}

.account-error {
  padding: 0 var(--space-2);
}

.facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--space-2) var(--space-6);
  margin: 0;
  width: 100%;
  font-size: var(--text-xs);
}

.facts dt { color: var(--ink-muted); }

.facts dd { margin: 0; color: var(--ink); }

/* ---- the profile page ----
   Identity above the fields, because the picture and the name answer the same
   question and the rest of the page is detail about them. */

.profile-identity {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  flex-wrap: wrap;
  margin-block-end: var(--space-8);
}

.profile-picture-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* Its own line at every width. A hint that sometimes sits beside a button and
   sometimes under it moves the whole row as the text changes length.
   .field-hint itself is styled in app.css, where the rest of the field is. */
.profile-hint {
  flex-basis: 100%;
  margin: 0;
  color: var(--ink-muted);
  font-size: var(--text-xs);
  max-width: var(--measure);
}

.profile-fields {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  max-width: 28rem;
}

.profile-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-block-start: var(--space-8);
}

.profile-saved {
  color: var(--ink-muted);
  font-size: var(--text-sm);
}

/* A comment's head is a row, so the picture needs to sit on the text baseline
   rather than hang below it. */
.comment-head .avatar {
  align-self: center;
}

/* ------------------------------------------------------ asking your notes */

.ask {
  display: grid;
  /* Packed to the top rather than spread down the page: a grid in a tall
     container stretches its rows, which left the question, the note about who
     reads it, and the answer floating a long way apart. */
  align-content: start;
  gap: var(--space-4);
  max-inline-size: 46rem;
}

.ask-form {
  display: flex;
  gap: var(--space-3);
}

.ask-input {
  flex: 1;
  min-inline-size: 0;
  height: var(--control-h);
  padding: 0 var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  background: var(--bg);
  font: inherit;
  font-size: var(--text-sm);
}

.ask-quiet {
  margin: 0;
  color: var(--ink-faint);
  font-size: var(--text-xs);
  line-height: var(--leading-body);
  max-inline-size: 60ch;
}

.ask-answer {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-5);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-panel);
  background: var(--surface-2);
}

.ask-text {
  font-size: var(--text-base);
  line-height: var(--leading-body);
}

/* The notes it came from, because an answer you cannot check is a rumour. */
.ask-sources {
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-subtle);
}

.ask-sources-title {
  margin: 0 0 var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--ink-muted);
}

.ask-source-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-2);
}

.ask-source a {
  display: grid;
  gap: 2px;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-control);
  background: var(--bg);
  text-decoration: none;
  color: inherit;
}

@media (hover: hover) {
  .ask-source a:hover {
    background: var(--surface-3);
  }
}

.ask-source-title {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}

.ask-source-snippet {
  font-size: var(--text-xs);
  color: var(--ink-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- the themes that are not recommended ----

   A door, styled like the one under a note: quiet, a real target, and clearly a
   thing that opens rather than a thing that is. */

.theme-more {
  margin-block-start: var(--space-3);
}

.theme-more-summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);

  min-height: 40px;
  color: var(--ink-muted);
  font-size: var(--text-sm);
  cursor: pointer;
  list-style: none;

  transition: color var(--duration-fast) var(--ease-out);
}

.theme-more-summary::-webkit-details-marker {
  display: none;
}

@media (hover: hover) {
  .theme-more-summary:hover {
    color: var(--ink);
  }
}

.theme-more-summary:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-control);
}

.theme-more-summary .icon {
  transition: transform var(--duration-fast) var(--ease-out);
}

.theme-more[open] > .theme-more-summary .icon {
  transform: rotate(90deg);
}

.theme-more[open] > .theme-toggle {
  margin-block-start: var(--space-2);
}

@media (prefers-reduced-motion: reduce) {
  .theme-more-summary,
  .theme-more-summary .icon {
    transition: none;
  }
}


/* A newer version is ready.
 *
 * The same object as the sync line and deliberately not the same colour: this
 * is not a fault and must not read as one. Quiet, and it waits — reloading
 * somebody's page because a deploy happened is worse than the staleness. */
.sync-toast.sync-fresh {
  border-color: var(--border);
  background: var(--surface-2);
  color: var(--ink);
}