/* settings
   The settings area and its inner rail.

   Loaded by `stylesheet_link_tag :app`, which includes every .css under
   app/assets sorted by filename — so the NUMBER PREFIX IS THE CASCADE ORDER.
   Renaming a file moves it in the cascade. */

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

/* A second rail INSIDE the content, so it reads as a place you've gone rather
   than a mode the whole app is in. */
.settings-shell {
  display: grid;
  grid-template-columns: 176px minmax(0, 1fr);
  gap: 34px;
  align-items: start;
}

.settings-nav { position: sticky; top: 26px; }
.settings-nav-head { padding: 0 0 10px; border-bottom: 1px solid var(--line); margin-bottom: 8px; }
.settings-nav-title {
  font: 600 11px var(--ui); text-transform: uppercase; letter-spacing: .08em;
  color: var(--ink-3); text-decoration: none;
}
.settings-nav-title:hover { color: var(--ink); }

.settings-nav-item {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  padding: 6px 10px; margin: 0 -10px;
  border-radius: 6px; text-decoration: none;
  color: var(--ink-2); font-size: 13.5px;
}
.settings-nav-item:hover { background: var(--paper); color: var(--ink); }
.settings-nav-item.active { background: var(--surface); color: var(--ink); font-weight: 500; }
/* The marker is the accent, not the whole row — the row is somewhere you are,
   not something that needs shouting. */
.settings-nav-item.active .settings-nav-name { box-shadow: inset 0 -2px 0 var(--signal); }
.settings-nav-count { font: 400 11.5px var(--mono); color: var(--ink-3); }

.settings-content { min-width: 0; }

/* The landing page is a map: what each area controls, and what's in it. */
.settings-map {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}
.settings-card {
  display: block; text-decoration: none;
  padding: 16px 18px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
}
.settings-card:hover { border-color: var(--line-2); }
.settings-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.settings-card h2 {
  font-size: 15px; margin: 0; letter-spacing: -0.01em; color: var(--ink);
}
.settings-card-count { font: 500 12px var(--mono); color: var(--ink-3); }
.settings-card p {
  margin: 6px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-3);
}

@media (max-width: 900px) {
  .settings-shell { grid-template-columns: 1fr; gap: 18px; }
  .settings-nav { position: static; display: flex; flex-wrap: wrap; gap: 4px; }
  .settings-nav-head { width: 100%; }
  .settings-nav-item { margin: 0; }
}

/* An area with parts, opened in place. The rail is where people look for the
   way between sibling pages; a diagram floating above the page was not. */
.settings-nav-parts {
  margin: 2px 0 6px 10px;
  padding-left: 9px;
  border-left: 1px solid var(--line);
}
.settings-nav-part { font-size: 13px; padding: 5px 10px; }
.settings-nav-part .settings-nav-name { color: var(--ink-3); }
.settings-nav-part.active .settings-nav-name { color: var(--ink); }
/* The parent is where you are without being the page you are on, so it keeps
   the ground and gives up the marker. */
.settings-nav-item.is-open { background: var(--surface); color: var(--ink); font-weight: 500; }

.settings-card-parts {
  display: flex; flex-wrap: wrap; gap: 4px 14px;
  margin-top: 10px; padding-top: 9px;
  border-top: 1px solid var(--line);
  font-size: 12px; color: var(--ink-3);
}
.settings-card-parts b { font: 500 12px var(--mono); color: var(--ink-2); }

@media (max-width: 900px) {
  /* The rail is a wrapping row down here. The parts take a line of their own
     under it rather than joining the row — mixed in, "Levels" and "Rules"
     read as areas of their own rather than as what is inside Pricing. */
  .settings-nav-parts {
    width: 100%;
    display: flex; flex-wrap: wrap; gap: 2px;
    margin: 2px 0 4px; padding: 0 0 0 10px;
  }
}