/* ============================================================
   Settings, redesigned (session 377). Daniel, 22 October 2026: "I want it to be easy to understand and to drill into and
   edit things ... intuitive and easy to understand what settings are connected to what tools."
   The home (By area, By screen, search, Needs a look), every settings page's header and section list, the rules written
   as sentences with Edit in place, and the small "Settings for this page" link under every screen that has settings.
   Values from tokens.css only.
   ============================================================ */
.stg{ max-width:1320px; margin:0 auto; color:var(--ink) }
.stg a{ color:var(--teal-dark) }
.stg-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:var(--s5); flex-wrap:wrap; margin:var(--s2) 0 var(--s5) }
.stg-head h1{ font-size:32px; font-weight:600; letter-spacing:-.024em; color:var(--teal-dark); margin:0 }
.stg-head .stg-line{ font-size:14.5px; color:var(--text); margin:6px 0 0; max-width:640px }
.stg-tools{ display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap }
.stg-search{ position:relative; display:flex; align-items:center }
.stg-search svg{ position:absolute; left:12px; color:var(--muted); pointer-events:none }
.stg-search input{ width:340px; max-width:100%; padding-left:36px }

/* Needs a look */
.stg-look{ background:var(--white); border:1px solid var(--line); border-left:4px solid var(--amber-dot); border-radius:0 var(--radius-lg) var(--radius-lg) 0; padding:var(--s4) var(--s5); margin:0 0 var(--s5) }
.stg-look h2{ font-size:14.5px; font-weight:550; color:var(--ink); margin:0 0 var(--s2) }
.stg-look-row{ display:flex; align-items:center; gap:var(--s3); padding:var(--s2) 0; border-top:1px solid var(--line-soft); flex-wrap:wrap }
.stg-look-row:first-of-type{ border-top:0 }
.stg-look-n{ min-width:32px; height:26px; padding:0 8px; border-radius:var(--pill-radius); background:var(--warn-bg); color:var(--warn-text); font-weight:600; font-size:13px; display:inline-flex; align-items:center; justify-content:center; font-variant-numeric:tabular-nums }
.stg-look-t{ font-size:14px; color:var(--ink); flex:1 1 260px }
.stg-look-w{ font-size:12.5px; color:var(--muted) }

/* Area groups: two per row; The Hub itself full width, three across */
.stg-groups{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s5); align-items:start }
.stg-group{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden }
.stg-group.wide{ grid-column:1 / -1 }
.stg-group.wide .stg-rows{ display:grid; grid-template-columns:repeat(3, 1fr) }
.stg-group.wide .stg-row{ border-right:1px solid var(--line-soft) }
.stg-group.wide .stg-row:nth-child(3n){ border-right:0 }
.stg-ghead{ display:flex; align-items:center; gap:var(--s3); padding:var(--s4) var(--s5); border-bottom:1px solid var(--line) }
.stg-gicon{ width:36px; height:36px; border-radius:var(--radius); background:var(--teal-pale); color:var(--teal-dark); display:inline-flex; align-items:center; justify-content:center; flex:none }
.stg-gname{ font-size:16px; font-weight:600; color:var(--ink) }
.stg-gline{ font-size:12.5px; color:var(--muted); margin-top:2px }
.stg-gcount{ margin-left:auto; font-size:12.5px; color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap }
.stg-row{ display:block; padding:var(--s4) var(--s5); border-top:1px solid var(--line-soft); cursor:pointer; text-decoration:none; color:inherit; position:relative }
.stg-rows > .stg-row:first-child{ border-top:0 }
.stg-group.wide .stg-rows > .stg-row:nth-child(-n+3){ border-top:0 }
.stg-row:hover{ background:var(--line-soft) }
.stg-row:hover::before, .stg-row:focus-visible::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--yellow) }
.stg-row:focus-visible{ outline:2px solid var(--teal-dark); outline-offset:-2px }
.stg-rtop{ display:flex; align-items:center; gap:var(--s2); flex-wrap:wrap }
.stg-rname{ font-size:14.5px; font-weight:550; color:var(--teal-dark) }
.stg-row:hover .stg-rname{ text-decoration:underline; text-underline-offset:2px }
.stg-lock{ display:inline-flex; align-items:center; gap:4px; font-size:12px; color:var(--muted); font-weight:500 }
.stg-rdec{ font-size:13.5px; color:var(--text); margin-top:4px; line-height:1.45 }
.stg-rnow{ font-size:13px; color:var(--ink); margin-top:6px }
.stg-rnow b{ font-weight:550 }
.stg-rnow .stg-k{ color:var(--muted) }
.stg-tags{ display:flex; flex-wrap:wrap; gap:6px; margin-top:var(--s2); align-items:center }
.stg-tags .stg-k{ font-size:12px; color:var(--muted); margin-right:2px }
.stg-tag{ display:inline-flex; align-items:center; padding:3px 9px; border-radius:var(--pill-radius); background:var(--teal-pale); color:var(--teal-deep); font-size:12px; font-weight:500; text-decoration:underline; text-decoration-color:rgba(29,110,119,.35); text-underline-offset:2px; border:1px solid transparent }
.stg a.stg-tag{ color:var(--teal-deep) }
.stg-tag:hover{ border-color:var(--teal-dark) }
.stg-tag:focus-visible{ outline:2px solid var(--teal-dark); outline-offset:1px }
.stg-tag.off{ background:var(--gray-bg); color:var(--text); text-decoration:none; cursor:default }
.stg-tag.off:hover{ border-color:transparent }

/* Search results */
.stg-results{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius-lg); margin:0 0 var(--s5); overflow:hidden }
.stg-results h2{ font-size:14.5px; font-weight:550; margin:0; padding:var(--s3) var(--s5); border-bottom:1px solid var(--line) }
.stg-results .stg-row .stg-rwhere{ font-size:12px; color:var(--muted); margin-left:auto }
.stg-results mark{ background:var(--warn-bg); color:inherit; padding:0 1px; border-radius:3px }
.stg-empty{ padding:var(--s5); color:var(--muted); font-size:14px }

/* By screen */
.stg-bys{ display:grid; grid-template-columns:280px 1fr; gap:var(--s5); align-items:start }
.stg-side{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius-lg); padding:var(--s2); position:sticky; top:calc(var(--hdrH, 64px) + var(--bandH, 0px) + 16px) }
.stg-side h3{ font-size:12.5px; font-weight:500; color:var(--muted); margin:var(--s2) var(--s3) var(--s1) }
.stg-side button, .stg-side a.stg-sl{ display:flex; width:100%; align-items:center; gap:var(--s2); padding:9px var(--s3); border:0; border-radius:var(--radius); background:none; font:inherit; font-size:14px; color:var(--ink); text-align:left; cursor:pointer; text-decoration:none }
.stg-side button:hover, .stg-side a.stg-sl:hover{ background:var(--line-soft) }
.stg-side button:focus-visible, .stg-side a.stg-sl:focus-visible{ outline:2px solid var(--teal-dark); outline-offset:-2px }
.stg-side button.on{ background:var(--teal-dark); color:var(--white) }
.stg-side button.on .stg-c{ color:var(--white); background:rgba(255,255,255,.18) }
.stg-side .stg-c{ margin-left:auto; font-size:12px; color:var(--muted); background:var(--line-soft); border-radius:999px; padding:1px 8px; font-variant-numeric:tabular-nums }
.stg-side .stg-sep{ border-top:1px solid var(--line-soft); margin:var(--s2) var(--s2) }
.stg-panel{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden }
.stg-phead{ padding:var(--s4) var(--s5); border-bottom:1px solid var(--line); display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap }
.stg-phead h2{ font-size:20px; font-weight:600; color:var(--ink); margin:0 }
.stg-part{ padding:var(--s3) var(--s5) var(--s1); font-size:12.5px; font-weight:500; color:var(--muted); background:var(--line-soft) }

/* One settings page: breadcrumb, header, section list */
.stg-crumb{ display:flex; align-items:center; gap:6px; font-size:13px; margin:var(--s2) 0 var(--s3); flex-wrap:wrap; color:var(--muted) }
.stg-crumb a{ font-weight:500; text-decoration:underline; text-underline-offset:2px; text-decoration-color:rgba(29,110,119,.35) }
.stg-phero{ display:flex; gap:var(--s4); align-items:flex-start; background:var(--white); border:1px solid var(--line); border-radius:var(--radius-lg); padding:var(--s5); margin:0 0 var(--s5) }
.stg-picon{ width:48px; height:48px; border-radius:var(--radius-lg); background:var(--teal-pale); color:var(--teal-dark); display:inline-flex; align-items:center; justify-content:center; flex:none }
.stg-phero h1{ font-size:28px; font-weight:600; letter-spacing:-.02em; color:var(--teal-dark); margin:0 }
.stg-phero .stg-line{ font-size:15px; color:var(--text); margin:6px 0 0; max-width:820px; line-height:1.45 }
.stg-meta{ display:flex; flex-wrap:wrap; gap:var(--s2) var(--s5); align-items:center; margin-top:var(--s3); font-size:13px; color:var(--text) }
.stg-meta .stg-tags{ margin-top:0 }
.stg-body{ display:grid; grid-template-columns:240px minmax(0, 1fr); gap:var(--s5); align-items:start }
.stg-body.full{ grid-template-columns:minmax(0, 1fr) }
.stg-nav{ position:sticky; top:calc(var(--hdrH, 64px) + var(--bandH, 0px) + 16px); background:var(--white); border:1px solid var(--line); border-radius:var(--radius-lg); padding:var(--s2) }
.stg-nav h3{ font-size:12.5px; font-weight:500; color:var(--muted); margin:var(--s2) var(--s3) var(--s1) }
.stg-nav a{ display:flex; align-items:center; gap:var(--s2); padding:8px var(--s3); border-radius:var(--radius); font-size:14px; color:var(--ink); text-decoration:none }
.stg-nav a:hover{ background:var(--line-soft); text-decoration:underline; text-underline-offset:2px }
.stg-nav a:focus-visible{ outline:2px solid var(--teal-dark); outline-offset:-2px }
.stg-nav a.on{ background:var(--teal-pale); color:var(--teal-deep); font-weight:550 }
.stg-nav .stg-c{ margin-left:auto; font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums }
.stg-nav .stg-else a{ color:var(--teal-dark); text-decoration:underline; text-underline-offset:2px; text-decoration-color:rgba(29,110,119,.35) }
.stg-nav .stg-sep{ border-top:1px solid var(--line-soft); margin:var(--s2) var(--s2) }

/* A section of rules */
.stg-sec{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius-lg); margin:0 0 var(--s5); scroll-margin-top:calc(var(--hdrH, 64px) + var(--bandH, 0px) + 16px) }
.stg-sec.editing{ border-color:var(--teal-dark); box-shadow:0 0 0 3px var(--teal-pale) }
.stg-shead{ display:flex; align-items:center; gap:var(--s3); padding:var(--s4) var(--s5); border-bottom:1px solid var(--line-soft); flex-wrap:wrap }
.stg-shead h2{ font-size:17px; font-weight:600; color:var(--ink); margin:0 }
.stg-shead .stg-c{ font-size:12.5px; color:var(--muted) }
.stg-shead .stg-when{ font-size:12.5px; color:var(--muted); margin-left:auto }
.stg-shead .btn{ margin-left:var(--s2) }
.stg-shead .stg-when + .btn{ margin-left:var(--s2) }
.stg-shead .btn:first-of-type:not(:only-child){ }
.stg-rule{ display:flex; align-items:flex-start; gap:var(--s4); padding:var(--s4) var(--s5); border-top:1px solid var(--line-soft) }
.stg-rules > .stg-rule:first-child{ border-top:0 }
.stg-sent{ font-size:16px; line-height:1.6; color:var(--ink); flex:1 1 auto; min-width:0 }
.stg-sent b.stg-v{ font-weight:600; color:var(--teal-deep); background:var(--teal-pale); border-radius:6px; padding:1px 7px; white-space:nowrap }
.stg-sent b.stg-v.none{ color:var(--warn-text); background:var(--warn-bg) }
.stg-sent .stg-in{ display:inline-flex; align-items:center; gap:6px; vertical-align:baseline }
.stg-sent .stg-in input{ height:34px; padding:4px 10px; font-size:15px; width:96px; text-align:right; font-variant-numeric:tabular-nums }
.stg-sent .stg-in input.wide{ width:320px; text-align:left }
.stg-sent .stg-in .stg-u{ font-size:14px; color:var(--muted) }
.stg-sent .ap-seg{ display:inline-flex; gap:6px; flex-wrap:wrap; vertical-align:middle; margin:2px 0 }
/* the choice buttons, as the old Appointments page drew them (shell.css .aps .ap-opt), for every page of rules */
.stg .ap-opt{ font-family:inherit; font-size:13px; font-weight:600; border-radius:var(--pa-radius-btn, 8px); padding:8px 12px; border:1px solid var(--pa-input-line, var(--line)); background:#fff; color:var(--pa-text, var(--ink)); cursor:pointer }
.stg .ap-opt:hover{ border-color:var(--teal-dark) }
.stg .ap-opt:focus-visible{ outline:2px solid var(--teal-dark); outline-offset:2px }
.stg .ap-opt.on{ background:var(--pa-teal-900, var(--teal-deep)); border-color:var(--pa-teal-900, var(--teal-deep)); color:#fff }
.stg-note{ font-size:13px; color:var(--muted); margin-top:4px; line-height:1.45 }
.stg-rule.locked .stg-sent{ color:var(--text) }
.stg-always{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:var(--muted); white-space:nowrap; flex:none; padding-top:4px }
.stg-swv{ display:inline-flex; align-items:center; gap:var(--s2); flex:none; padding-top:2px; font-size:13px; color:var(--text) }
.stg-swv .tg{ cursor:default }
.stg-sec.editing .stg-swv .tg{ cursor:pointer }
.stg-swv button.tg{ border:0; padding:0 }
.stg-swv button.tg:focus-visible{ outline:2px solid var(--teal-dark); outline-offset:2px }
.stg-swv .tg[disabled]{ opacity:.85 }
.stg-ex{ margin:0 var(--s5) var(--s4); padding:var(--s3) var(--s4); border:1px dashed var(--line); border-radius:var(--radius); background:var(--page-bg) }
.stg-ex .stg-exk{ font-size:12px; font-weight:500; color:var(--muted); margin-bottom:var(--s2) }
.stg-before{ margin:0 var(--s5) var(--s3); background:var(--warn-bg); color:var(--warn-text); border-radius:var(--radius); padding:10px 14px; font-size:13.5px }
.stg-sfoot{ display:flex; align-items:center; gap:var(--s2); justify-content:flex-end; padding:var(--s3) var(--s5) var(--s4); border-top:1px solid var(--line-soft); flex-wrap:wrap }
.stg-sfoot .stg-msg{ margin-right:auto; font-size:13px }
.stg-bad{ color:var(--danger-text) }
.stg-ok{ color:var(--green-text) }
.stg-readonly{ margin:0 0 var(--s5); font-size:13.5px; color:var(--text); background:var(--white); border:1px solid var(--line); border-radius:var(--radius-lg); padding:var(--s3) var(--s5); display:flex; gap:var(--s2); align-items:center }

/* A tool kept as it works: its own page under the new header (its old crumb and title are the header's now) */
.stg-tool > .s-settings{ max-width:none }
.stg-tool > .s-settings > .crumb:first-child, .stg-tool > .s-settings > .head:first-of-type, .stg-tool > .s-settings > h1.s-h1:first-of-type,
.stg-tool > .s-settings > a.crumb:first-child + h1, .stg-tool > .s-settings > a.crumb:first-child + .head{ display:none }
.stg-tool > .s-settings > a.crumb:first-child + h1 + .hint, .stg-tool > .s-settings > a.crumb:first-child + h1.s-h1 + p.hint{ display:none }

.stg-tool .s-reconciliation > .head:first-child{ display:none }

/* "Settings for this page", under every screen that has settings */
.mh-page-settings{ max-width:1320px; margin:-48px auto 0; padding:0 var(--s7) var(--s6); text-align:right; position:relative; z-index:2 }
.mh-page-settings[hidden]{ display:none }
.mh-page-settings a{ font-size:12.5px; color:var(--teal-dark); text-decoration:underline; text-underline-offset:2px; display:inline-flex; align-items:center; gap:6px }

@media (max-width:1100px){
  .stg-group.wide .stg-rows{ grid-template-columns:1fr 1fr }
  .stg-group.wide .stg-row{ border-right:0 }
  .stg-group.wide .stg-rows > .stg-row:nth-child(-n+3){ border-top:1px solid var(--line-soft) }
  .stg-group.wide .stg-rows > .stg-row:nth-child(-n+2){ border-top:0 }
}
@media (max-width:900px){
  .stg-groups{ grid-template-columns:1fr }
  .stg-body, .stg-bys{ grid-template-columns:minmax(0, 1fr) }
  .stg-nav, .stg-side{ position:static }
}
@media (max-width:760px){
  .stg-head h1{ font-size:26px }
  .stg-tools, .stg-search, .stg-search input{ width:100% }
  .stg-search input{ width:100% }
  .stg-group.wide .stg-rows{ grid-template-columns:1fr }
  .stg-group.wide .stg-rows > .stg-row:nth-child(-n+2){ border-top:1px solid var(--line-soft) }
  .stg-group.wide .stg-rows > .stg-row:first-child{ border-top:0 }
  .stg-ghead, .stg-row, .stg-shead, .stg-rule, .stg-sfoot{ padding-left:var(--s4); padding-right:var(--s4) }
  .stg-phero{ padding:var(--s4); flex-direction:column }
  .stg-phero h1{ font-size:24px }
  .stg-rule{ flex-direction:column; gap:var(--s2) }
  .stg-sent{ font-size:16px }
  .stg-sent .stg-in input.wide{ width:100% }
  .stg-ex, .stg-before{ margin-left:var(--s4); margin-right:var(--s4) }
  .mh-page-settings{ padding:0 var(--s4) var(--s5); margin-top:-40px }
}