/* owner: admin-v2 B4 · contract: server/ADMIN-V2.md sec. 5.5 to 5.12, 4.5 (settings.css: the settings frame and the sections
   macy, hours, number, limits and account)
   The frame's grid is base.css .grid2; a section's div.set is display: contents, so its cards are the grid's own items (and
   .span2 spans both columns). The sketch's .secdesc, .days, .dayb and .code are ported as they are, with the teal tokens.
   Frame rules sit under .view-settings, section rules under their .set-<id>; business and whatsapp are business.css. */

.view-settings .secdesc { margin: 0 4px 18px; color: var(--muted); }
.view-settings .set { display: contents; }

/* the owner-numbers card's lead sits right under its kicker */
.set-account .chead + p { margin-top: 8px; }

/* a state line with its icon: the kill switch, the code word (danger text when no word is set) */
:is(.set-limits, .set-account) .state { display: flex; align-items: center; gap: 10px; }
.set-account .state.bad { color: var(--bad); }

/* ---------- macy: the voice card (11.10): the woman / man switch, the list of voices with a play button on every row ---------- */
/* the two switches (woman / man, her two usual voices) are rows of their own, never side by side */
.set-macy .voice .seg { display: flex; width: max-content; }
.set-macy .voice .voice-more { margin-top: 14px; border-color: var(--fgLine); }
.set-macy .voice .voice-more .icon { transition: transform .15s; }
.set-macy .voice .voice-more[aria-expanded="true"] .icon { transform: rotate(90deg); }
.set-macy .voice .voice-menu { margin-top: 12px; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.set-macy .voice .voice-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: 336px; overflow-y: auto; }
.set-macy .voice .voice-row {
  display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 56px; padding-block: 0; padding-inline: 10px 12px;
  border-bottom: 1px solid var(--line);
}
.set-macy .voice .voice-name {
  display: inline-flex; flex: 1; align-items: center; gap: 8px; min-width: 0; min-height: 44px; padding: 0 8px;
  border: 0; border-radius: 12px; background-color: transparent; color: var(--fg); font: inherit; font-size: 15px; font-weight: 500;
  text-align: start; overflow-wrap: anywhere;
}
.set-macy .voice button.voice-name { cursor: pointer; }
.set-macy .voice button.voice-name:hover { background-color: var(--fgSoft); }
.set-macy .voice .voice-name[aria-pressed="true"] { color: var(--cta); }
.set-macy .voice .voice-row .xb { width: 40px; height: 40px; margin-inline-start: 0; }
.set-macy .voice .voice-row .xb .icon { width: 18px; height: 18px; }
@media (max-width: 760px) {
  .set-macy .voice .voice-list { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- hours: the week as seven circles ---------- */
.set-hours .days { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.set-hours .dayb {
  width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--fgLine); display: grid; place-items: center;
  font-weight: 500;
}
.set-hours .dayb.on { background-color: var(--solid); border-color: var(--solid); color: var(--onSolid); }

/* ---------- number: the big number, the dial codes, the go-live list ---------- */
.set-number .big a { text-decoration: none; }
.set-number .big a:hover { text-decoration: underline; text-underline-offset: 6px; }
.set-number .code { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; }
.set-number .code .num {
  min-width: 0; font-size: 24px; font-weight: 500; letter-spacing: .01em; white-space: normal; overflow-wrap: anywhere;
}
.set-number .golive { display: grid; margin-top: 8px; }
.set-number .golive li {
  display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 4px 12px; padding-block: 14px; border-top: 1px solid var(--line);
}
.set-number .golive li:first-child { border-top: 0; }
.set-number .golive .mark {
  width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--stone); color: transparent;
}
.set-number .golive .mark .icon { width: 14px; height: 14px; stroke-width: 2.5; }
.set-number .golive [data-done="true"] .mark { background-color: var(--ok); border-color: var(--ok); color: #fff; }
.set-number .golive .detail { grid-column: 2; font-size: 14px; line-height: 1.55; color: var(--fgMuted); }

/* ---------- limits: the caps as a grid of fields ---------- */
.set-limits .caps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 20px; margin-top: 18px; }
.set-limits .caps .field { margin-top: 0; }

@media (max-width: 1100px) {
  .set-limits .caps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .set-limits .caps { grid-template-columns: minmax(0, 1fr); }
  .set-number .code .num { font-size: 21px; }
  .set-hours .days { gap: 6px; }
  .set-hours .dayb { width: 38px; height: 38px; }
}

/* ---------- learning (30.9): the lessons, in the section (settings/learning.js) and on the call page (views/learning.js) ---------- */
.set-learning .tray { margin-top: 16px; }
.set-learning .toggle { margin-top: 14px; }
.lesson .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.lesson .lesson-text { margin-top: 12px; font-size: 17px; line-height: 1.5; overflow-wrap: anywhere; }
.lesson .textarea { width: 100%; margin-top: 10px; }
:is(.lesson, .learn) blockquote {
  margin-top: 10px; padding-inline-start: 14px; border-inline-start: 3px solid var(--stone); color: var(--fgMuted);
  font-size: 14px; line-height: 1.5; overflow-wrap: anywhere;
}
.learn .rate { align-items: center; margin-top: 0; }
.learn .lesson { margin-top: 0; }