/* Settings (#settings/<section>) incl. System health — docs/design/
 * Atlas_Experience_Redesign.md §7.15. Module layout only: section nav + a
 * 720 px content column; fields, toggles, checks, pills, alerts, tables and
 * dialogs are atlas-components.css. Replaces settings-workspace.css (S87),
 * system-workspace.css and their legacy fragments. */
@layer atlas.modules {
.settings-layout { display: grid; grid-template-columns: 220px minmax(0, var(--reading-max)); gap: var(--s-10); align-items: start; margin-top: var(--s-6); }
.settings--single .settings-layout { grid-template-columns: minmax(0, var(--reading-max)); }

/* Section nav */
.settings-nav { position: sticky; top: calc(var(--topbar-h) + var(--s-4)); }
.settings-nav ul { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
.settings-nav__group { margin: var(--s-4) 0 var(--s-1); padding: 0 var(--s-3); font: var(--type-caption); font-weight: 500; color: var(--text-3); }
.settings-nav__link {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 36px;
  padding: 0 var(--s-3);
  border-radius: var(--r-md);
  color: var(--text-2);
  font: var(--type-label);
  font-size: 14px;
  text-decoration: none;
}
.settings-nav__link > svg { width: var(--icon-sm); height: var(--icon-sm); flex: none; }
.settings-nav__link > svg:last-child { display: none; margin-left: auto; color: var(--text-3); }
.settings-nav__link:hover { background: var(--bg-muted); color: var(--text); text-decoration: none; }
.settings-nav__link[aria-current="page"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-1); }
.settings-nav__link:focus-visible { outline: var(--focus-outline); outline-offset: var(--focus-offset); }

/* Content */
.settings-content { display: flex; flex-direction: column; gap: var(--s-6); min-width: 0; }
.settings-section__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-4); }
.settings-section__title { margin: 0; font: var(--type-section); letter-spacing: var(--track-section); color: var(--text); }
.settings-section__title:focus { outline: none; }
.settings-section__sub { margin: var(--s-1) 0 0; font: var(--type-meta); color: var(--text-2); }
.settings-subhead { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.settings-subhead h3 { margin: 0; font: var(--type-heading); color: var(--text); }
.settings-muted { margin: 0; font: var(--type-meta); color: var(--text-2); }
.settings-muted > svg, .settings-readonly > svg { width: 14px; height: 14px; margin-right: 6px; vertical-align: -2px; }
.settings-readonly { margin: 0; font: var(--type-caption); color: var(--text-2); white-space: nowrap; }

.settings-form { display: flex; flex-direction: column; gap: var(--s-4); padding: var(--s-5); }
.settings-form__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3); }
.settings-form__title { margin: 0; font: var(--type-heading); color: var(--text); }
.settings-form__sub { margin: 2px 0 0; font: var(--type-meta); color: var(--text-2); }
.settings-form__meta { margin: 0; font: var(--type-caption); color: var(--text-2); }
.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
.settings-field--full { grid-column: 1 / -1; }
.settings-inline { display: flex; flex-wrap: wrap; gap: var(--s-4); }
.settings-inline-check { display: inline-flex; align-items: center; gap: var(--s-2); font: var(--type-body); color: var(--text); cursor: pointer; }
.settings-check { display: flex; align-items: flex-start; gap: var(--s-3); cursor: pointer; }
.settings-check > .atlas-check { margin-top: 2px; }
.settings-check__label { display: block; font: 500 14px/20px var(--font-sans); color: var(--text); }
.settings-check__help { display: block; font: var(--type-caption); color: var(--text-2); }
.settings-hours__tap { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }

/* Touch: every Settings control is at least 44 px (spec §6). A checkbox's
   target is its label (shared buttons are 44 px on touch already). */
@media (pointer: coarse) {
  .settings-hours__tap { min-width: 44px; min-height: 44px; }
  .settings-check, .settings-inline-check { min-height: 44px; align-items: center; }
  .settings-check > .atlas-check { margin-top: 0; }
}
.settings-days { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); margin: 0; padding: 0; border: 0; }
.settings-days > legend { width: 100%; margin-bottom: var(--s-2); }
.settings-facts { display: grid; gap: var(--s-2); margin: 0; }
.settings-facts > div { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: var(--s-3); }
.settings-facts dt { font: var(--type-meta); color: var(--text-2); }
.settings-facts dd { margin: 0; font: var(--type-body); color: var(--text); }
.settings-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.settings-list { display: flex; flex-direction: column; gap: var(--s-2); margin: 0; padding: 0; list-style: none; font: var(--type-body); }
.settings-list > li { display: flex; align-items: center; gap: var(--s-2); }
.settings-list svg { width: var(--icon-sm); height: var(--icon-sm); color: var(--text-2); }
.settings-caption { padding: var(--s-2) 0; font: var(--type-caption); color: var(--text-2); text-align: left; caption-side: top; }
.settings-form-feedback { display: flex; align-items: center; gap: var(--s-2); margin: 0; font: var(--type-meta); }
.settings-form-feedback > svg { width: var(--icon-sm); height: var(--icon-sm); flex: none; }
.settings-form-feedback.is-success { color: var(--positive); }
.settings-form-feedback.is-error { color: var(--danger); }

/* Save bar: sticky at the bottom of its form while it has unsaved changes. */
.settings-savebar {
  position: sticky;
  bottom: var(--s-4);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--s-2);
  margin: 0 calc(-1 * var(--s-2));
  padding: var(--s-2) var(--s-2) var(--s-2) var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-pop);
}
.settings-savebar[hidden] { display: none; }
.settings-savebar__text { margin-right: auto; font: var(--type-label); color: var(--text-2); }

/* Opening hours editor */
.settings-hours .atlas-table { table-layout: fixed; min-width: 600px; }
.settings-hours__day { width: 100px; }
.settings-hours__check { width: 64px; }
.settings-hours .atlas-table td { padding-left: var(--s-2); padding-right: var(--s-2); }
.settings-hours .atlas-input { width: 100%; min-width: 0; padding-left: var(--s-2); padding-right: var(--s-1); }
/* The table is narrow; typing and arrow keys set the time, so the picker icon
   makes room for 12-hour values such as "05:00 PM". */
.settings-hours .atlas-input::-webkit-calendar-picker-indicator { display: none; }
.settings-hours th[scope="row"] { font: 500 14px/20px var(--font-sans); white-space: nowrap; }
.settings-hours thead th { white-space: normal; overflow-wrap: normal; }
/* A day's problem sits in a row directly under that day. */
.settings-hours .atlas-table .settings-hours__problem > td { height: auto; padding-top: var(--s-2); padding-bottom: var(--s-2); white-space: normal; }
.settings-grid > .atlas-field { align-content: start; }

/* Team access */
.settings-permissions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2) var(--s-4); margin: 0; padding: 0; list-style: none; }

/* Integrations */
.settings-providers { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.settings-provider { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-4) var(--s-5); border-top: 1px solid var(--line-subtle); }
.settings-provider:first-child { border-top: 0; }
.settings-provider__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3); }
.settings-provider__name { margin: 0; font: var(--type-heading); color: var(--text); }
.settings-provider__status, .settings-provider__facts { margin: 2px 0 0; font: var(--type-meta); color: var(--text-2); }
.settings-needs { font: var(--type-meta); color: var(--text-2); }
.settings-needs > summary { width: fit-content; font: var(--type-label); color: var(--accent-text); cursor: pointer; }
.settings-needs > p { margin: var(--s-2) 0 0; }
.settings-apikey { display: flex; align-items: flex-end; gap: var(--s-2); }
.settings-apikey > .atlas-field { flex: 1 1 auto; }

/* Security */
.settings-security { display: flex; flex-direction: column; gap: var(--s-4); }
.settings-capabilities { display: flex; flex-direction: column; gap: var(--s-3); margin: 0; padding: 0; list-style: none; }
.settings-capabilities > li { display: flex; gap: var(--s-3); }
.settings-capabilities > li > svg { width: var(--icon-sm); height: var(--icon-sm); flex: none; margin-top: 2px; color: var(--text-2); }
.settings-capabilities strong { display: block; font: 500 14px/20px var(--font-sans); color: var(--text); }
.settings-capabilities span > span { display: block; font: var(--type-meta); color: var(--text-2); }

/* System health (assets/js/system-workspace.js) */
.settings-system { display: flex; flex-direction: column; gap: var(--s-4); }
.sys-summary { display: flex; flex-direction: column; gap: var(--s-3); }
.sys-summary__state { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.sys-summary__checked { font: var(--type-caption); color: var(--text-2); }
.sys-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-3); margin: 0; }
.sys-facts > div { display: flex; flex-direction: column; gap: 2px; }
.sys-facts dt { font: var(--type-caption); color: var(--text-2); }
.sys-facts dd { margin: 0; font: var(--type-num); font-variant-numeric: tabular-nums; color: var(--text); }
.sys-facts--list { grid-template-columns: minmax(0, 1fr); }
.sys-facts--list > div { flex-direction: row; justify-content: space-between; gap: var(--s-3); }
.sys-toolbar { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-3); }
.sys-toolbar .atlas-tabs { flex: 1 1 auto; min-width: 0; }
.sys-body { display: flex; flex-direction: column; gap: var(--s-4); }
.sys-block { display: flex; flex-direction: column; gap: var(--s-3); }
.sys-block__title { margin: 0; font: var(--type-heading); color: var(--text); }
.sys-filters { margin-bottom: var(--s-1); }
.sys-note, .sys-foot, .sys-muted { display: flex; align-items: center; gap: var(--s-2); margin: 0; font: var(--type-meta); color: var(--text-2); }
.sys-note > svg { width: 14px; height: 14px; flex: none; }
.sys-warn { color: var(--warning); }

/* Phone: section list screen → section screen (back chevron in the top bar). */
@media (max-width: 1023px) {
  .settings-layout { grid-template-columns: 180px minmax(0, 1fr); gap: var(--s-6); }
  .sys-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Opening hours: one block per day with labelled fields. */
  .settings-hours .atlas-table { min-width: 0; table-layout: auto; }
  .settings-hours .atlas-input::-webkit-calendar-picker-indicator { display: block; }
  .settings-hours thead, .settings-hours colgroup { display: none; }
  .settings-hours tbody, .settings-hours tr { display: block; }
  .settings-hours tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2) var(--s-3); padding: var(--s-3); border-top: 1px solid var(--line-subtle); }
  .settings-hours tr:first-child { border-top: 0; }
  .settings-hours .atlas-table th[scope="row"], .settings-hours .atlas-table td { display: flex; flex-direction: column; gap: 4px; height: auto; padding: 0; border: 0; background: transparent; }
  .settings-hours .atlas-table th[scope="row"] { position: static; grid-column: 1 / -1; }
  .settings-hours td::before { content: attr(data-label); font: var(--type-caption); color: var(--text-2); }
  .settings-hours .settings-hours__problem { padding-top: 0; border-top: 0; }
  .settings-hours .atlas-table .settings-hours__problem > td { grid-column: 1 / -1; }
  .settings-hours .settings-hours__problem > td::before { display: none; }
  .settings-hours td[data-label="Open"], .settings-hours td[data-label="Next day"] { flex-direction: row-reverse; justify-content: flex-end; align-items: center; gap: var(--s-2); }
  .settings-hours td[data-label="Open"], .settings-hours td[data-label="Next day"] { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  .settings-layout, .settings--single .settings-layout { grid-template-columns: minmax(0, 1fr); margin-top: var(--s-4); }
  .settings.has-section .settings-nav { display: none; }
  .settings.is-list .settings-content { display: none; }
  .settings-nav { position: static; }
  .settings-nav ul { gap: 0; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; }
  .settings-nav__group { margin: 0; padding: var(--s-4) var(--s-4) var(--s-1); background: var(--bg-subtle); }
  .settings-nav__link { min-height: 52px; padding: 0 var(--s-4); border-radius: 0; border-top: 1px solid var(--line-subtle); color: var(--text); font-size: 15px; }
  .settings-nav__link > svg:last-child { display: block; }
  .settings-nav__link[aria-current="page"] { box-shadow: none; }
  .settings-grid, .settings-permissions { grid-template-columns: minmax(0, 1fr); }
  .settings-form { padding: var(--s-4); }
  .settings-facts > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .settings-savebar { bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + var(--s-2)); }
  .settings-savebar > .atlas-btn { flex: 1 1 0; }
  .settings-savebar__text { display: none; }
  .settings-apikey { flex-direction: column; align-items: stretch; }
  .sys-toolbar { flex-direction: column; align-items: stretch; }
}

/* ---- S94B Integrations ---- */
/* Publishing capability list, platform review control, recent activity and
 * the Page / account / location picker sheet (docs/marketing/research/
 * 08-ux-spec.md §12). Tokens only; the sheet, radios and avatars are
 * atlas-components.css. */
.settings-provider__can { display: flex; flex-direction: column; gap: var(--s-1); margin: 0; padding: 0; list-style: none; font: var(--type-meta); color: var(--text-2); }
.settings-provider__can > li { display: flex; align-items: flex-start; gap: var(--s-2); }
.settings-provider__can > li > svg { flex: none; width: 16px; height: 16px; margin-top: 1px; color: var(--text-3); }
.settings-review__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-top: var(--s-2); }
.settings-review__row > .atlas-select { flex: 1 1 200px; max-width: 280px; }
.settings-provider__events { font: var(--type-meta); color: var(--text-2); }
.settings-provider__events > summary { width: fit-content; font: var(--type-label); color: var(--accent-text); cursor: pointer; }
.settings-provider__events > ul { display: flex; flex-direction: column; gap: 2px; margin: var(--s-2) 0 0; padding: 0; list-style: none; }
.settings-picker { display: flex; flex-direction: column; gap: var(--s-1); margin: 0; padding: 0; border: 0; min-width: 0; }
.settings-picker__option { align-items: center; gap: var(--s-3); min-height: var(--touch); padding: var(--s-2) var(--s-3); border: 1px solid var(--line-subtle); border-radius: var(--r-md); }
.settings-picker__option:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.settings-picker__option.is-disabled { cursor: not-allowed; color: var(--text-3); }
.settings-picker__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.settings-picker__name { font: var(--type-label); color: var(--text); overflow-wrap: anywhere; }
.settings-picker__meta { font: var(--type-meta); color: var(--text-2); overflow-wrap: anywhere; }
@media (max-width: 767px) {
  .settings-review__row > .atlas-select { max-width: none; }
}
}