/* The settled-rows panel (practice-settings spec 4.1; the approved concept
   docs/superpowers/specs/assets/2026-10-18-practice-settings/), on the app's
   own variables. The panel is the concept's --field card, 720 px of rows
   inside it; rows part on an --edge hairline. A closed row is its label and
   value; an open row sits on a --page card inside the panel. Chips carry no
   icon or tick: the fill alone says chosen. The toast sits in the page flow at the panel's foot,
   never fixed over a control (board.css's rule); sticky, it rides the
   viewport's foot while the panel runs past it. Every target is 44 px tall
   with 8 px to its neighbour. Motion only where the person has not asked
   for less. */

.flow-page:has(> .settings) { max-width: 896px; }
/* The practice page inside the app shell's sidebar (bugs N1-2, N1-3): the
   column starts under the shell's 84 px top bar line, and Back, the shared
   back.svg Back, sits in the flow above the panel rather than at
   .auth-back's fixed corner. */
.flow-shell-page { width: 100%; margin: 0; padding: 40px 32px 32px; }
.flow-back { position: static; align-self: flex-start; margin: 0 0 16px -4px; text-decoration: none; }
@media (max-width: 640px) { .flow-shell-page { padding: 16px; } }
.settings { box-sizing: border-box; max-width: 864px; padding: 44px clamp(16px, 6vw, 72px) 48px;
  border-radius: 16px; background: var(--field); }
.settings-title { margin: 0; font-size: 32px; line-height: 40px; letter-spacing: -0.32px; }
.settings-sub { margin: 8px 0 0; color: var(--label); font-size: 14px; line-height: 18px; }
/* The value inside a muted line: the practice's name, the practice's rate. */
.settings-ink { color: var(--ink); }
.settings-status { margin: 16px 0 0; }

/* A project's tabs: Board, Issues, Brief, Settings. board.css draws them
   (.board-tabs, .tab), so the row matches the other three tabs' own; its
   place under the title, and 8 px between tabs, are the panel's. */
.settings-tabs { margin: 18px 0 0; gap: 8px; }

.settings-rows { margin-top: 26px; }
.settings-group + .settings-group { padding-top: 22px; }
.settings-group-label { margin: 0; padding: 0 0 6px; font-size: 12px; line-height: 16px; font-weight: 400;
  color: var(--label); }

/* A row */
.settings-row { padding: 4px 0; border-top: 1px solid var(--edge); border-radius: 10px; }
.settings-row.is-open { background: var(--page); border-top-color: transparent; }
.settings-row.is-open + .settings-row { border-top-color: transparent; }
.settings-head { display: grid; grid-template-columns: 168px 1fr auto; align-items: center; gap: 16px;
  box-sizing: border-box; width: 100%; min-height: 44px; padding: 8px 12px; margin: 0; background: none;
  border: 0; border-radius: 10px; text-align: left; font: inherit; color: inherit; }
button.settings-head { cursor: pointer; }
button.settings-head:hover { background: var(--page); }
.settings-row.is-open button.settings-head:hover { background: transparent; }
.settings-head:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.settings-label { font-size: 14px; line-height: 18px; color: var(--label); }
.settings-label small { display: block; margin-top: 2px; font-size: 12px; line-height: 14px; color: var(--label); }
.settings-value { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 10px; min-width: 0;
  font-size: 16px; line-height: 20px; color: var(--ink); overflow-wrap: anywhere; }
.settings-value small { font-size: 13px; color: var(--label); }
.settings-value.is-muted { color: var(--label); }
.settings-aside { display: flex; align-items: center; gap: 12px; }
.settings-chev { width: 16px; height: 16px; color: var(--carbon-60); opacity: 0; }
button.settings-head:hover .settings-chev, button.settings-head:focus-visible .settings-chev,
.settings-row.is-open .settings-chev { opacity: 1; }
.settings-row.is-open .settings-chev { transform: rotate(180deg); }
.settings-saved { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ok); }
.settings-busy { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--edge);
  border-top-color: var(--label); box-sizing: border-box; }

/* An open row's editor, under the value column */
.settings-edit { display: grid; gap: 14px; padding: 8px 12px 14px 196px; }
.settings-inline { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.settings-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.settings-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px;
  border-radius: 1000px; border: 1px solid var(--sage-80); background: var(--field); font: inherit;
  font-size: 14px; color: var(--ink); cursor: pointer; }
.settings-chip:hover { border-color: var(--carbon-60); }
.settings-chip:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.settings-chip.is-on { background: var(--ink); border-color: var(--ink); color: var(--carbon-100); }
.settings-chip small { font-size: 12px; color: inherit; opacity: .7; }
.settings-box { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 12px;
  box-sizing: border-box; border: 1px solid var(--sage-80); border-radius: 10px; background: var(--field);
  font-size: 15px; }
.settings-box:focus-within { border-color: var(--carbon-60); }
.settings-box input { align-self: stretch; min-width: 0; padding: 0; border: 0; outline: 0;
  background: transparent; font: inherit; color: var(--ink); }
.settings-box input[aria-invalid="true"] { color: var(--danger); }
.settings-box-wide input { width: 260px; }
.settings-box-name input { width: 180px; }
.settings-box-rate input { width: 44px; text-align: right; }
.settings-box-amount input { width: 90px; text-align: right; }
.settings-box.is-off { opacity: .4; }
.settings-unit { font-size: 14px; color: var(--label); white-space: nowrap; }
.settings-switch { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0; border: 0;
  background: none; font: inherit; font-size: 14px; color: var(--label); cursor: pointer; }
.settings-switch:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 10px; }
/* A Client view row (variation pricing N2): the whole row is the switch; the
   knob sits at the row's end. Greyed, it reads muted and does not press. */
.settings-row-switch .settings-value { font-size: 14px; line-height: 18px; }
.settings-row-switch.is-muted .settings-head { cursor: default; opacity: .5; }
.settings-row-switch.is-muted button.settings-head:hover { background: none; }
.settings-group-note { margin: 8px 12px 0; font-size: 12px; line-height: 16px; color: var(--label); }
.settings-knob { position: relative; width: 36px; height: 20px; border-radius: 10px; background: var(--ink); }
.settings-knob::after { content: ''; position: absolute; top: 2px; left: 18px; width: 16px; height: 16px;
  border-radius: 50%; background: var(--field); }
.settings-knob.is-off { background: var(--suede-70); }
.settings-knob.is-off::after { left: 2px; }
.settings-stages { display: grid; gap: 2px; margin: 4px 0 0; padding: 0; list-style: none; }
.settings-stage { display: grid; grid-template-columns: 24px 1fr; align-items: center; gap: 12px; }
.settings-stage-n { font-size: 12px; color: var(--label); text-align: right; }
.settings-stage input { box-sizing: border-box; width: 100%; max-width: 360px; height: 32px; padding: 0 10px;
  margin-left: -10px; border: 1px solid transparent; border-radius: 8px; background: transparent; outline: 0;
  font: inherit; font-size: 15px; color: var(--ink); }
.settings-stage input::placeholder { color: var(--ink); }
.settings-stage input:hover { border-color: var(--sage-80); background: var(--field); }
.settings-stage input:focus { border-color: var(--carbon-60); background: var(--field); }
.settings-stage input.is-renamed { font-weight: 700; }
.settings-error { margin: 0; font-size: 13px; line-height: 16px; color: var(--danger); }
.settings-reset { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px;
  border-radius: 1000px; border: 1px solid var(--sage-80); background: var(--field); font: inherit;
  font-size: 13px; color: var(--label); cursor: pointer; }
.settings-reset:hover { border-color: var(--carbon-60); color: var(--ink); }

/* The toast: the board's dark 44 px pill at the panel's foot. In the flow,
   under the last row, when the panel ends on screen; stuck 16 px above the
   viewport's foot while the panel runs past it. Undo and the close button
   fill its height. While it shows, whatever the browser scrolls to (a
   focused box, an opened row) stops above its 76 px band (16 + 44 + 16). */
html:has(.settings-toast) { scroll-padding-bottom: 76px; }
.settings-toast { position: sticky; bottom: 16px; z-index: 1; display: flex; align-items: center; gap: 8px;
  width: fit-content; max-width: 100%; box-sizing: border-box; min-height: 44px; margin: 24px auto 0;
  padding: 0 0 0 18px; border-radius: 1000px;
  background: var(--ink); color: var(--carbon-100); font-size: 14px; box-shadow: 0 12px 30px rgba(0, 0, 0, .18); }
.settings-undo { min-height: 44px; padding: 0 16px; border: 0; border-radius: 1000px;
  background: rgba(255, 255, 255, .12); font: inherit; font-size: 13px; color: inherit; cursor: pointer; }
.settings-toast-close { min-width: 44px; min-height: 44px; padding: 0; border: 0; background: none; font: inherit;
  font-size: 1.125rem; color: inherit; cursor: pointer; }
.settings-undo:focus-visible, .settings-toast-close:focus-visible { outline: 2px solid var(--carbon-100);
  outline-offset: -4px; }

/* A stage box is the concept's 32 px line under a mouse alone; where any
   pointer is a finger, and at phone width, it is a 44 px target 8 px from
   the next. */
@media (max-width: 600px), (any-pointer: coarse) {
  .settings-stages { gap: 8px; }
  .settings-stage input { height: 44px; }
}

@media (max-width: 600px) {
  .flow-page:has(> .settings) { padding: 0; }
  .settings { padding: 28px 16px 32px; border-radius: 0; min-height: 100vh; min-height: 100dvh; }
  .settings-head { grid-template-columns: 1fr; gap: 4px; }
  .settings-head .settings-label { grid-row: 1; }
  .settings-head .settings-aside { grid-row: 1; justify-self: end; }
  .settings-edit { padding-left: 12px; }
  .settings-box-wide input, .settings-box-name input { width: 100%; }
  .settings-box-wide, .settings-box-name { flex: 1 1 160px; }
}

@media (prefers-reduced-motion: no-preference) {
  .settings-row, button.settings-head { transition: background .15s; }
  .settings-chev { transition: opacity .15s, transform .15s; }
  .settings-knob { transition: background .15s; }
  .settings-knob::after { transition: left .15s; }
  .settings-busy { animation: settings-spin .8s linear infinite; }
  @keyframes settings-spin { to { transform: rotate(360deg); } }
}

/* The project address, a section of Project settings (Nolan's menu ruling
   of 18 Oct 2026). */
.settings-address { margin-top: 24px; display: flex; flex-direction: column; gap: 6px; }
.settings-address-value { margin: 0; font-family: var(--font-mono); font-size: 15px; overflow-wrap: anywhere; }
.settings-address-line { margin: 0; color: var(--helper); }
.settings-address-link { align-self: flex-start; min-height: 44px; display: inline-flex; align-items: center; color: var(--ink); }