/* Your own Settings in the Hallmark look (Rami approved the Settings mockup on 2 November 2026; public/settings.js). The title with
   Find a setting and ⋯; the sections' index on the left (sticky), the sections on the right: a heading over a thick line, then one
   row per setting, its name and where it is kept on the left, its control on the right. A phone: the index is a row of chips that
   scrolls across inside its line, rows stack. Cadence tokens only, so light, dark and the colour themes follow by themselves; no
   sideways scroll at 400px. The rows other parts of the Hub draw (desktop notifications, the app, Gmail, notifications) keep their
   markup and are only restyled here. */
html body #setPage:not(#_){max-width:1240px;min-width:0;padding-bottom:40px}

/* the title, Find a setting, ⋯ */
html body #setPage .st-top:not(#_){display:flex;align-items:center;justify-content:space-between;gap:12px 20px;flex-wrap:wrap;margin:0 0 28px}
html body #setPage .st-h:not(#_):not(#_){font-size:30px;letter-spacing:-.02em;white-space:nowrap;margin:0}
html body #setPage .st-tr:not(#_){display:flex;align-items:center;gap:8px;min-width:0}
html body #setPage .st-find:not(#_){position:relative;display:inline-flex;align-items:center;min-width:0}
html body #setPage .st-find svg:not(#_){position:absolute;inset-inline-start:12px;width:15px;height:15px;fill:none;stroke:var(--ink-muted);stroke-width:1.6;stroke-linecap:round;pointer-events:none}
html body #setPage .st-find input:not(#_):not(#_){width:240px;max-width:100%;height:40px;box-sizing:border-box;padding-inline:34px 14px;border-radius:999px;border:1px solid var(--border);background:var(--surface);color:var(--c-ink);font:500 14px/1 var(--font-sans)}
html body #setPage .st-find input:focus-visible:not(#_){outline:2px solid var(--focus);outline-offset:1px}
html body #setPage .st-more:not(#_):not(#_){width:40px;height:40px;min-height:40px;padding:0;display:inline-grid;place-items:center}
html body #setPage .st-more svg:not(#_){width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6}

/* the index and the sections */
html body #setPage .st-wrap:not(#_){display:grid;grid-template-columns:220px minmax(0,1fr);gap:40px;align-items:start}
html body #setPage .st-idx:not(#_){position:sticky;top:72px;display:flex;flex-direction:column;gap:2px;max-height:calc(100dvh - 96px);overflow-y:auto;padding-bottom:12px}
html body #setPage .st-g:not(#_){font:700 12px/1.2 var(--font-sans);color:var(--ink-muted);padding:14px 10px 4px}
html body #setPage .st-g:first-child:not(#_){padding-top:0}
html body #setPage .st-idx a:not(#_){display:flex;align-items:center;min-height:34px;padding-inline:10px;border-radius:8px;font:600 13.5px/1.2 var(--font-sans);color:var(--ink-muted);text-decoration:none}
html body #setPage .st-idx a:hover:not(#_){background:var(--surface-hover);color:var(--c-ink)}
html body #setPage .st-idx a[aria-current="true"]:not(#_){background:var(--surface-sunken);color:var(--c-ink)}
html body #setPage .st-idx [hidden]:not(#_):not(#_){display:none}
html body #setPage .st-body:not(#_){display:flex;flex-direction:column;gap:44px;min-width:0;max-width:880px}
html body #setPage .st-sec:not(#_){display:flex;flex-direction:column;min-width:0}
html body #setPage .st-sec[hidden]:not(#_),html body #setPage .st-row[hidden]:not(#_),html body #setPage .st-gm[hidden]:not(#_),html body #setPage .st-sub[hidden]:not(#_){display:none}
html body #setPage .st-sec>header:not(#_){display:flex;align-items:center;gap:12px;padding-bottom:10px;border-bottom:2px solid var(--c-ink)}
html body #setPage .st-sec>header h2:not(#_){margin:0;font:600 21px/1.2 var(--font-sans);letter-spacing:-.015em;color:var(--c-ink)}
html body #setPage .st-own:not(#_){display:inline-flex;align-items:center;gap:5px;font:700 11.5px/1 var(--font-sans);color:var(--ink-muted);white-space:nowrap}
html body #setPage .st-own svg:not(#_){width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}
html body #setPage .st-sub:not(#_){font:700 13px/1.2 var(--font-sans);color:var(--ink-muted);padding:22px 0 4px}

/* a setting */
html body #setPage .st-row:not(#_){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,auto);gap:10px 24px;align-items:center;padding:14px 2px;border-bottom:1px solid var(--border)}
html body #setPage .st-row.wide:not(#_){grid-template-columns:minmax(0,1fr)}
html body #setPage .st-lab:not(#_){display:flex;flex-direction:column;gap:3px;min-width:0}
html body #setPage .st-lab b:not(#_){font:600 14.5px/1.3 var(--font-sans);color:var(--c-ink)}
html body #setPage .st-lab mark:not(#_){background:var(--status-working-bg);color:var(--status-working-fg);border-radius:3px;padding:0 2px}
html body #setPage .st-meta:not(#_){display:flex;flex-wrap:wrap;gap:4px 10px;font:500 12.5px/1.3 var(--font-sans);color:var(--ink-muted);min-width:0;overflow-wrap:anywhere}
html body #setPage .st-kept:not(#_){display:inline-flex;align-items:center;gap:5px}
html body #setPage .st-kept:not(#_)::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ink-muted)}
html body #setPage .st-kept.acc:not(#_)::before{background:var(--accent-sky)}
html body #setPage .st-ctl:not(#_){display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end;min-width:0}
html body #setPage .st-row.wide .st-ctl:not(#_){justify-content:flex-start}
html body #setPage .st-ctl:empty:not(#_){display:none}

/* segmented controls: Text size, Dark mode, Language, Arabic */
html body #setPage :is(.st-seg,.st-size .ui-size,.st-lang .ui-lang):not(#_):not(#_){display:inline-flex;align-items:center;gap:3px;padding:3px;margin:0;border-radius:10px;background:var(--surface-sunken);flex:none}
html body #setPage :is(.st-size .ui-size,.st-lang .ui-lang)>span:not(#_):not(#_){display:none}
html body #setPage :is(.st-seg,.st-size .ui-size,.st-lang .ui-lang) button:not(#_):not(#_){display:inline-grid;place-items:center;min-height:32px;min-width:38px;height:auto;width:auto;padding:0 12px;border:0;border-radius:7px;background:transparent;color:var(--ink-muted);font:600 13px/1 var(--font-sans);cursor:pointer;white-space:nowrap;box-shadow:none}
html body #setPage .st-size .ui-size button:not(#_):not(#_){padding:0 6px;font-weight:700}
html body #setPage .st-size .ui-size button:nth-of-type(1):not(#_):not(#_){font-size:11px}html body #setPage .st-size .ui-size button:nth-of-type(2):not(#_):not(#_){font-size:12.6px}html body #setPage .st-size .ui-size button:nth-of-type(3):not(#_):not(#_){font-size:14.2px}html body #setPage .st-size .ui-size button:nth-of-type(4):not(#_):not(#_){font-size:15.8px}html body #setPage .st-size .ui-size button:nth-of-type(5):not(#_):not(#_){font-size:17.4px}html body #setPage .st-size .ui-size button:nth-of-type(6):not(#_):not(#_){font-size:19px}
html body #setPage :is(.st-seg,.st-size .ui-size,.st-lang .ui-lang) button:hover:not(#_):not(#_){color:var(--c-ink);background:transparent}
html body #setPage :is(.st-seg,.st-size .ui-size,.st-lang .ui-lang) button:is(.on,[aria-pressed="true"]):not(#_):not(#_){background:var(--surface);color:var(--c-ink);box-shadow:var(--shadow-raised)}
html body #setPage :is(.st-seg,.st-size,.st-lang) button:focus-visible:not(#_):not(#_){outline:2px solid var(--focus);outline-offset:1px}

/* a switch */
html body #setPage .st-sw:not(#_){position:relative;display:inline-flex;align-items:center;width:40px;height:24px;flex:none;padding:0;border:0;border-radius:999px;background:var(--surface-sunken);box-shadow:inset 0 0 0 1.5px var(--border);cursor:pointer;transition:background-color .12s}
html body #setPage .st-sw:not(#_)::after{content:"";position:absolute;inset-inline-start:3px;width:18px;height:18px;border-radius:50%;background:var(--surface);box-shadow:0 1px 2px rgba(0,0,0,.3);transition:transform .22s cubic-bezier(.16,1,.3,1)}
html body #setPage .st-sw[aria-checked="true"]:not(#_){background:var(--accent-green);box-shadow:none}
html body #setPage .st-sw[aria-checked="true"]:not(#_)::after{transform:translateX(16px)}
html[dir="rtl"] body #setPage .st-sw[aria-checked="true"]:not(#_)::after{transform:translateX(-16px)}
html body #setPage .st-sw:focus-visible:not(#_){outline:2px solid var(--focus);outline-offset:2px}
@media (prefers-reduced-motion:reduce){html body #setPage .st-sw:not(#_)::after{transition:none}}

/* Colour: each theme a round swatch with its name under it */
html body #setPage .pal-pick:not(#_):not(#_){display:flex;flex-wrap:wrap;gap:10px;padding:0}
html body #setPage .pal-pick button:not(#_):not(#_){display:flex;flex-direction:column;align-items:center;gap:6px;width:76px;padding:2px 0;border-radius:10px;outline:0;background:none;text-align:center}
html body #setPage .pal-pick .pp-sw:not(#_):not(#_){width:44px;height:44px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.1)}
html body #setPage .pal-pick button[aria-checked="true"] .pp-sw:not(#_):not(#_){box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--c-ink)}
html body #setPage .pal-pick small:not(#_):not(#_){font:600 11.5px/1.25 var(--font-sans);color:var(--ink-muted)}
html body #setPage .pal-pick button[aria-checked="true"] small:not(#_):not(#_){color:var(--c-ink)}
html body #setPage .pal-pick button:focus-visible:not(#_):not(#_){outline:2px solid var(--focus);outline-offset:2px}

/* the view a page opens in */
html body #setPage .st-pick select:not(#_):not(#_){min-height:36px;padding-block:0;font-weight:600;max-width:100%}

/* rows the Hub draws itself (desktop notifications, the computer or phone app): restyled as a setting */
html body #setPage .st-raw .me-srow:not(#_):not(#_),html body #setPage .st-gm .me-srow:not(#_):not(#_){display:contents}
html body #setPage .st-raw .me-srow>span:first-child:not(#_):not(#_),html body #setPage .st-gm .me-srow>span:first-child:not(#_):not(#_){font:600 14.5px/1.3 var(--font-sans);color:var(--c-ink);align-self:center}
html body #setPage .st-raw .me-srow>:not(:first-child):not(#_):not(#_),html body #setPage .st-gm .me-srow>:not(:first-child):not(#_):not(#_){display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end;min-width:0;max-width:520px;justify-self:end;text-align:end}
html body #setPage .st-raw .sub:not(#_):not(#_),html body #setPage .st-gm .sub:not(#_):not(#_){font-size:12.5px;color:var(--ink-muted)}
html body #setPage .st-raw .me-tour:not(#_):not(#_){display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:13.5px}

/* Connections › Gmail (mailjobs.js): its own card, laid out as a setting */
html body #setPage .st-gm .ml-conn:not(#_):not(#_){display:block;padding:0;margin:0;border:0;border-radius:0;background:none;box-shadow:none}
html body #setPage .st-gm .ml-conn>h3:not(#_):not(#_){display:none}
html body #setPage .st-gm [data-mlgmail]:not(#_):not(#_){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,auto);gap:10px 24px;align-items:center;padding:14px 2px;border-bottom:1px solid var(--border)}
html body #setPage .st-gm .ml-g:not(#_):not(#_){display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;align-items:center}

/* Your phone bar (app.js barPicker): open, ticks as round ticks with their place */
html body #setPage .st-bar:not(#_){width:100%;min-width:0}
html body #setPage .st-bar .mo-bar:not(#_):not(#_){margin:0;padding:0;background:none;border:0;box-shadow:none}
html body #setPage .st-bar .mo-bar>summary:not(#_):not(#_){display:none}
html body #setPage .st-bar .mo-sub:not(#_):not(#_){margin:0 0 6px;padding:0;font-size:12.5px;color:var(--ink-muted)}
html body #setPage .st-bar .mo-warn:empty:not(#_):not(#_){display:none}
html body #setPage .st-bar .mo-pick:not(#_):not(#_){display:grid;grid-template-columns:22px minmax(0,1fr) auto auto;gap:10px;align-items:center;min-height:40px;padding:6px 0;margin:0;border:0;border-bottom:1px solid var(--border);border-radius:0;background:none;cursor:pointer}
html body #setPage .st-bar .mo-pick:last-child:not(#_):not(#_){border-bottom:0}
html body #setPage .st-bar .mo-pick .mo-ic:not(#_):not(#_){display:grid;place-items:center;width:22px;height:22px;background:none;color:var(--ink-muted)}
html body #setPage .st-bar .mo-pick .mo-ic svg:not(#_):not(#_){width:18px;height:18px}
html body #setPage .st-bar .mo-pick .mo-t b:not(#_):not(#_){font-weight:600;font-size:14px}
html body #setPage .st-bar .mo-pick input:not(#_):not(#_){order:4}
html body #setPage .st-bar .mo-pick .mo-no:not(#_):not(#_){order:3;display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--c-ink);color:var(--surface);font:700 11.5px/1 var(--font-sans);font-style:normal}

/* round ticks: the notifications' In the Hub and Pop-up, the phone bar */
html body #setPage :is(.ns-tick input,.mo-pick input):not(#_):not(#_){-webkit-appearance:none;appearance:none;position:relative;width:24px;height:24px;margin:0;border-radius:50%;border:2px solid var(--ink-muted);background:transparent;cursor:pointer;display:grid;place-items:center;flex:none}
html body #setPage :is(.ns-tick input,.mo-pick input):checked:not(#_):not(#_){background:var(--accent-green);border-color:var(--accent-green)}
html body #setPage :is(.ns-tick input,.mo-pick input):checked:not(#_):not(#_)::after{content:"";width:10px;height:5px;margin-top:-3px;border:solid #fff;border-width:0 0 2px 2px;transform:rotate(-45deg)}
html body #setPage :is(.ns-tick input,.mo-pick input):disabled:not(#_):not(#_){opacity:.45;cursor:not-allowed}
html body #setPage :is(.ns-tick input,.mo-pick input):focus-visible:not(#_):not(#_){outline:2px solid var(--focus);outline-offset:2px}

/* Choose what you're told (noticeset.js): a table, What · In the Hub · Pop-up */
html body #setPage .st-ns:not(#_){width:100%;min-width:0}
html body #setPage .st-ns .ns-intro:not(#_):not(#_){margin:0 0 6px;font-size:12.5px;color:var(--ink-muted)}
html body #setPage .st-ns .ns-g:not(#_):not(#_){gap:0}
html body #setPage .st-ns .ns-g h4:not(#_):not(#_){margin:0;padding:18px 6px 6px;font:700 12.5px/1.2 var(--font-sans);color:var(--ink-muted)}
html body #setPage .st-ns :is(.ns-head,.ns-row):not(#_):not(#_){grid-template-columns:minmax(0,1fr) 84px 84px;gap:8px}
html body #setPage .st-ns .ns-head:not(#_):not(#_){padding:0 6px 6px;border-bottom:1px solid var(--border)}
html body #setPage .st-ns .ns-head span:not(#_):not(#_){font:600 12px/1.2 var(--font-sans);color:var(--ink-muted)}
html body #setPage .st-ns .ns-row:not(#_):not(#_){padding:9px 6px;border-top:0;border-bottom:1px solid var(--border)}
html body #setPage .st-ns .ns-row.ns-also:not(#_):not(#_){padding-inline-start:22px;padding-top:9px}
html body #setPage .st-ns .ns-t b:not(#_):not(#_){font:600 14px/1.3 var(--font-sans);color:var(--c-ink)}
html body #setPage .st-ns .ns-t small:not(#_):not(#_){font-size:12px;color:var(--ink-muted)}
html body #setPage .st-ns .ns-lock:not(#_):not(#_){color:var(--ink-muted);margin-inline-end:5px}

html body #setPage .st-out:not(#_):not(#_){color:var(--status-stuck-fg);border-color:color-mix(in srgb,var(--status-stuck-fg) 45%,transparent)}
html body #setPage .st-none:not(#_){padding:30px 4px;color:var(--ink-muted)}
html body #setPage .st-lnk:not(#_){border:0;background:none;padding:0;font:inherit;font-weight:600;color:var(--c-ink);text-decoration:underline;cursor:pointer}
html body #setPage .st-pill:not(#_):not(#_){height:30px;padding:0 12px}

/* a phone: the title and Find on their own lines, the index a row of chips scrolling across inside its line, rows stack */
@media (max-width:860px){
  html body #setPage .st-top:not(#_){margin-bottom:14px}
  html body #setPage .st-h:not(#_):not(#_){font-size:26px}
  html body #setPage .st-tr:not(#_){flex:1 1 100%}
  html body #setPage .st-find:not(#_){flex:1 1 auto}
  html body #setPage .st-find input:not(#_):not(#_){width:100%;height:44px;font-size:16px}
  html body #setPage .st-wrap:not(#_){grid-template-columns:minmax(0,1fr);gap:16px}
  html body #setPage .st-idx:not(#_){position:sticky;top:calc(56px + env(safe-area-inset-top,0px));z-index:5;flex-direction:row;gap:6px;max-height:none;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;padding:8px 0;margin:0;background:var(--c-bg)}
  html body #setPage .st-idx::-webkit-scrollbar{display:none}
  html body #setPage .st-g:not(#_){display:none}
  html body #setPage .st-idx a:not(#_){flex:none;min-height:36px;padding:0 12px;border-radius:999px;background:var(--surface-sunken);white-space:nowrap}
  html body #setPage .st-idx a[aria-current="true"]:not(#_){background:var(--c-ink);color:var(--surface)}
  html body #setPage .st-body:not(#_){gap:32px}
  html body #setPage .st-sec>header h2:not(#_){font-size:19px}
  html body #setPage .st-row:not(#_),html body #setPage .st-gm [data-mlgmail]:not(#_):not(#_){grid-template-columns:minmax(0,1fr)}
  html body #setPage .st-ctl:not(#_),html body #setPage .st-raw .me-srow>:not(:first-child):not(#_):not(#_),html body #setPage .st-gm .me-srow>:not(:first-child):not(#_):not(#_),html body #setPage .st-gm .ml-g:not(#_):not(#_){justify-content:flex-start;justify-self:start;text-align:start}
  html body #setPage .st-ns :is(.ns-head,.ns-row):not(#_):not(#_){grid-template-columns:minmax(0,1fr) 56px 56px}
  html body #setPage :is(.st-seg,.st-size .ui-size,.st-lang .ui-lang) button:not(#_):not(#_){min-height:40px}
  html body #setPage .pal-pick button:not(#_):not(#_){width:64px}
}

/* after the first screenshots: the size and language picked, white and raised as the mockup (not the old blue); a phone offers up
   to Large (app.css); the view pickers as wide as their words; Gmail's line the full width of its section */
html body #setPage :is(.st-size .ui-size,.st-lang .ui-lang) button.on:not(#_):not(#_):not(#_):not(#_){background:var(--surface)!important;color:var(--c-ink)!important;border-color:transparent!important;box-shadow:var(--shadow-raised)}
@media (max-width:860px){html body #setPage .st-size .ui-size :is([data-ui-size="1.2"],[data-ui-size="1.3"]):not(#_):not(#_):not(#_){display:none}}
html body #setPage .st-pick select:not(#_):not(#_):not(#_){width:auto;min-width:140px}
html body #setPage .st-gm,html body #setPage .st-gm .ml-conn:not(#_):not(#_):not(#_){width:100%;max-width:none}
/* Settings at the bottom of the side menu is lit on this page */
html body #app>aside #navSet.on:not(#_):not(#_){background:var(--side-active);color:var(--side-ink,#fff)}
/* Calendars to show (3 November 2026): one line per Google calendar, its colour, its name, a switch */
html body #setPage .st-gcals:not(#_){display:flex;flex-direction:column;gap:8px;width:100%;min-width:0}
html body #setPage .st-gl:not(#_){list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
html body #setPage .st-gl li:not(#_){display:flex;align-items:center;gap:10px;min-height:44px;border-top:1px solid var(--border);min-width:0}
html body #setPage .st-gl li:first-child:not(#_){border-top:0}
html body #setPage .st-gl li>span:not(#_){flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}
html body #setPage .st-gl li>span small:not(#_){color:var(--ink-muted);font-size:12px;margin-inline-start:6px}
html body #setPage .st-gdot:not(#_){width:10px;height:10px;border-radius:50%;flex:none}
html body #setPage .st-gnote:not(#_){color:var(--ink-muted);font-size:13px}
html body #setPage .st-gnote.bad:not(#_){color:var(--status-stuck-fg)}
/* Taller rows on a phone (Settings › This device, 3 November 2026): list rows and menu lines get more room to tap */
@media (max-width:860px){
  html.rows-tall body :is(.mk-row,.mk-item,.wk-row,.ct-tr:not(.ct-head2),.hl-pop .hl-mi,.hl-pop .hl-pk,.st-gl li,.st-row):not(#_):not(#_):not(#_):not(#_){min-height:58px!important}
  html.rows-tall body :is(.mk-row,.mk-item):not(#_):not(#_):not(#_):not(#_){padding-top:18px!important;padding-bottom:18px!important}
  html.rows-tall body table tbody td:not(#_):not(#_){padding-top:14px;padding-bottom:14px}
}
/* Your phone bar's small preview is a phone-only picture; on Settings at any width it stays hidden, and its icons never draw full size
   (Rami, 3 November 2026: on a computer the preview's icons filled the page) */
html body #setPage .mo-bar .mo-prev:not(#_):not(#_){display:none}
html body .mo-bar .mo-prev svg:not(#_){width:20px;height:20px;max-width:20px;max-height:20px}