/* SETTINGS AS FULL PAGES, AND THE MAIN AGENT CHANGING THEM (2026-11-01; js/settings.js, js/page-agent.js).
   Automations' wide page and the side panel's settings views (Network, Experimental features) fill the page
   under the top bar, with no margins over the world or Focus. The assistant's field stays anchored at the
   bottom centre, with the page's context as a chip, and its answers are change cards. Phones already show these
   full screen: their rules stay mobile.css's, plus the chip and the cards below. */

/* ------------------------------------------------------------------ the page */

@media (min-width: 600px) {
  .fl-page,
  body.focus-mode .fl-page { top: 58px; left: 0; right: 0; bottom: 0; border-radius: 0; border-width: 1px 0 0; box-shadow: none; }
  :root[data-glass] .fl-page.glass { border-radius: 0; }
  /* The field floats over the page's foot: the lists end above it. */
  .fl-page .fl-list-screen { padding-bottom: 96px; }
  .fl-page .fl-nav { padding-bottom: 96px; }

  body.side-page:not(.focus-phone) #side,
  body.focus-mode.side-page:not(.focus-phone) #side { left: 0 !important; right: 0 !important; top: 58px !important; bottom: 0 !important; width: auto !important; z-index: 26; border-radius: 0; border-width: 1px 0 0; box-shadow: none; }
  body.side-page:not(.focus-phone) #side .side-head,
  body.side-page:not(.focus-phone) #side .side-body { padding-left: max(18px, calc((100% - 880px) / 2)); padding-right: max(18px, calc((100% - 880px) / 2)); }
  body.side-page:not(.focus-phone) #side .side-body { padding-bottom: 110px; padding-top: 14px; gap: 6px; }
  body.side-page:not(.focus-phone) #side .side-body h2 { font-size: 22px; }
  body.side-page:not(.focus-phone) #side .side-body .sd-sec { padding: 4px 0 10px; }
  body.side-page:not(.focus-phone) #side .net-caps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body.side-page .callstack, body.side-page .camctl, body.side-page .depthnav, body.side-page .hint, body.side-page .crumbs { visibility: hidden; }
  /* On a page the field centres on the page, not on the gap between the rails. */
  body.side-page .dock, body.flows-open .dock { left: 50%; width: min(680px, calc(100vw - 24px)); }
}

.sp-head { gap: 10px; }
.sp-crumbs { list-style: none; display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; flex: 1; min-width: 0; font-size: 12.5px; color: var(--ink-3); overflow: hidden; }
.sp-crumbs li { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; min-width: 0; }
.sp-crumbs li + li::before { content: '›'; color: var(--ink-3); margin-right: 2px; }
.sp-crumbs span { display: inline-flex; align-items: center; gap: 5px; overflow: hidden; text-overflow: ellipsis; }
.sp-crumbs [aria-current] { color: var(--ink); font-weight: 600; }
.sp-crumbs button { border: 0; background: none; padding: 2px 4px; border-radius: 5px; color: var(--accent-ink); cursor: pointer; font: inherit; }
.sp-crumbs button:hover { background: var(--accent-soft); }
.sp-close { margin-left: auto; }
.sp-intro { max-width: 640px; margin-bottom: 6px; }
.sp-feats { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 4px; }
.sp-feats li { border-radius: 10px; padding: 8px 10px; }
.sp-feats li:nth-child(odd) { background: color-mix(in srgb, var(--ink) 3%, transparent); }
.net-sw { position: relative; display: flex; align-items: flex-start; gap: 10px; cursor: pointer; padding: 4px 0; }
.net-sw input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.net-sw .sw { margin-top: 2px; }
.net-sw input:disabled + .sw { opacity: 0.5; }
.net-prec { display: flex; flex-direction: column; gap: 3px; margin: 6px 0 4px 36px; max-width: 260px; }

/* ------------------------------------------------------------------ the chip in the field */

.dock-context.page { display: inline-flex !important; align-items: center; gap: 2px; max-width: min(46%, 340px); padding: 2px 2px 2px 8px; font-size: 11.5px; }
.dock-context.page span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dock-context.page button { border: 0; background: none; color: inherit; cursor: pointer; padding: 0 5px; border-radius: 5px; font-size: 14px; line-height: 1; opacity: 0.7; }
.dock-context.page button:hover { opacity: 1; background: color-mix(in srgb, var(--accent) 18%, transparent); }

/* ------------------------------------------------------------------ change cards */

.pa-card { margin-top: 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; position: relative; overflow: hidden; }
.pa-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent); }
.pa-card.st-applied::before { background: var(--ok); }
.pa-card.st-ask::before, .pa-card.st-asked::before { background: var(--orange); }
.pa-card.st-person::before, .pa-card.st-no::before { background: var(--ink-3); }
.pa-card.st-cancelled, .pa-card.st-undone { opacity: 0.7; }
.pa-h { display: flex; align-items: center; gap: 7px; font-size: 13px; }
.pa-h b { font-weight: 600; flex: 1; min-width: 0; }
.pa-st { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); font-weight: 600; white-space: nowrap; }
.pa-card.st-applied .pa-st { color: var(--ok); }
.pa-card.st-ask .pa-st, .pa-card.st-asked .pa-st { color: var(--orange-2); }
.pa-diff { margin: 0; display: grid; gap: 6px; }
.pa-diff > div { display: grid; gap: 2px; }
.pa-diff dt { font-size: 11px; color: var(--ink-3); }
.pa-diff dd { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; }
.pa-diff s { color: var(--ink-3); text-decoration-color: color-mix(in srgb, var(--danger) 60%, transparent); }
.pa-diff ins { text-decoration: none; background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ink); padding: 1px 6px; border-radius: 5px; font-weight: 500; }
.pa-arrow { color: var(--ink-3); }
.pa-diff input, .pa-diff select { font: inherit; font-size: 13px; padding: 4px 7px; border: 1px solid var(--accent); border-radius: 6px; background: var(--card); color: var(--ink); min-width: 0; flex: 1; }
.pa-note, .pa-why { font-size: 12px; color: var(--ink-2); }
.pa-why { display: flex; gap: 5px; align-items: baseline; color: var(--ink-2); }
.pa-acts { display: flex; gap: 6px; flex-wrap: wrap; }

/* The change, lit where it is on the page: while proposed, and once more when applied. */
.pa-hl { outline: 2px dashed var(--accent) !important; outline-offset: 3px; border-radius: 8px; background-color: color-mix(in srgb, var(--accent) 9%, transparent) !important; transition: outline-color 200ms ease; }
.pa-done { outline: 2px solid var(--ok) !important; outline-offset: 3px; border-radius: 8px; animation: pa-done 1.8s ease forwards; }
@keyframes pa-done { 0% { background-color: color-mix(in srgb, var(--ok) 22%, transparent); } 100% { background-color: transparent; outline-color: transparent; } }

/* ------------------------------------------------------------------ phones */

@media (max-width: 599.98px) {
  .dock-context.page { max-width: 52%; font-size: 12.5px; min-height: 30px; }
  .dock-context.page button { min-width: 30px; min-height: 30px; font-size: 18px; }
  /* The dock's sheet is the phone's sheet: a change card fills its width, its buttons a finger's size. */
  .pa-card { padding: 12px 14px; }
  .pa-diff dd { font-size: 15px; }
  .pa-acts .btn { min-height: 40px; flex: 1; justify-content: center; }
  .pa-diff input, .pa-diff select { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .pa-done { animation: none; }
}