/* Settings, two levels (settingstabs.js). All selectors prefixed st-.
   Level 1: real tabs (filled when active). Level 2: a sub-menu beside one section. */

.st-root { display: block; }

/* ---------- level 1: tab bar ---------- */
.st-tabs {
  display: flex;
  gap: 6px;
  margin: 0 0 20px;
  padding: 0 0 0;
  border-bottom: 1px solid var(--stroke, #E2DCCF);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.st-tabs::-webkit-scrollbar { display: none; }

.st-tab {
  position: relative;
  flex: 0 0 auto;
  white-space: nowrap;
  cursor: pointer;
  margin-bottom: -1px;                       /* sit on the bar's rule */
  padding: 11px 20px 12px;
  border: 1px solid var(--stroke, #E2DCCF);
  border-bottom-color: var(--stroke, #E2DCCF);
  border-radius: 11px 11px 0 0;
  background: var(--bone, #F4F0E9);
  color: var(--ink, #1A1B18);
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  transition: background .15s ease, color .15s ease;
}
.st-tab:hover { background: #fff; }
.st-tab.on {
  background: var(--ink, #1A1B18);
  border-color: var(--ink, #1A1B18);
  color: var(--paper, #FBF9F4);
}
.st-tab.on::after {                           /* gold under-bar */
  content: '';
  position: absolute;
  left: 14px; right: 14px; bottom: 0;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--gold, #A9824C);
}
.st-tab:focus-visible { outline: 2px solid var(--gold, #A9824C); outline-offset: 2px; }

/* ---------- panes ---------- */
.st-pane { display: none; }
.st-pane.on {
  display: grid;
  grid-template-columns: 216px minmax(0, 1fr);
  gap: 26px;
  align-items: start;
}
.st-pane.st-solo.on { grid-template-columns: minmax(0, 1fr); }
.st-pane.st-solo .st-sub { display: none; }
.st-content { min-width: 0; }

/* ---------- level 2: sub-menu ---------- */
.st-sub { position: sticky; top: 8px; }
.st-sub-list { display: flex; flex-direction: column; gap: 2px; }
.st-sub-sel { display: none; }
.st-sub-item {
  text-align: left;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 10px 14px;
  border-radius: 9px;
  border-left: 3px solid transparent;
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink-soft, #55564F);
  transition: background .12s ease, color .12s ease;
}
.st-sub-item:hover { background: var(--bone, #F4F0E9); color: var(--ink, #1A1B18); }
.st-sub-item.on {
  background: #fff;
  border-left-color: var(--gold, #A9824C);
  color: var(--ink, #1A1B18);
  font-weight: 700;
  box-shadow: 0 1px 3px rgba(26, 27, 24, .08);
}
.st-sub-item:focus-visible { outline: 2px solid var(--gold, #A9824C); outline-offset: 1px; }

/* ---------- hiding without moving ---------- */
.st-off { display: none !important; }
/* Split blocks: their host and grid wrappers stop drawing, so the one visible
   panel sits in the flow like any other. */
.st-flat, .st-flat .dash-col { display: block !important; }
.st-flat.st-off { display: none !important; }
.st-flat .bill-cols { display: block; }
.st-flat > .panel + .panel { margin-top: 16px; }

/* ---------- phone ---------- */
@media (max-width: 760px) {
  .st-tabs {
    margin: 0 -14px 14px;
    padding: 0 14px;
    gap: 4px;
  }
  .st-tab { padding: 10px 15px 11px; font-size: 13.5px; }
  .st-pane.on { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .st-sub { position: static; }
  .st-sub-list { display: none; }
  .st-sub-sel { display: flex; flex-direction: column; gap: 5px; }
  .st-sub-sel span {
    font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: var(--ink-faint, #8A8B84);
  }
  .st-select {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--stroke, #E2DCCF);
    border-radius: 11px;
    background: #fff;
    font-size: 15px;
    font-family: inherit;
    color: var(--ink, #1A1B18);
  }
}