/* 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
   maya, 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); }

/* ---------- 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; }