/* Circle Hub: the Simple Hub, a phone-only way in (Rami, October 2026: "a really clean, simple, quick, not buggy" Hub for the
   things people need on the go). Shoots first: a list and a month, edge to edge, green for Confirmed (a shoot you are going to)
   and no colour for the rest. Every rule sits under #simple so nothing here touches the full Hub. Cadence tokens. */
#simple{--go:#16a34a;--on-go:#fff;position:fixed;inset:0;z-index:80;background:var(--c-bg);color:var(--c-ink);font-family:var(--font-sans);display:flex;flex-direction:column;overflow:hidden}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) #simple{--go:#22c55e;--on-go:#06140b}}
:root[data-theme="dark"] #simple{--go:#22c55e;--on-go:#06140b}
#simple[hidden],#simple [hidden]{display:none!important}
body.simple-on{overflow:hidden}
#simple button{font:inherit;color:inherit}
#simple :focus-visible{outline:2px solid var(--focus);outline-offset:2px}
#simple .sx-screen{position:absolute;inset:0;display:flex;flex-direction:column;background:var(--c-bg)}

/* the choice */
#simple .sx-pick{justify-content:center;padding:28px 22px;gap:14px}
#simple .sx-pick svg{width:44px;height:44px;margin-bottom:6px;color:var(--c-ink)}
#simple .sx-pick h1{margin:0;font-size:26px;line-height:1.15;font-weight:800;letter-spacing:-.01em;text-wrap:balance}
#simple .sx-pick p{margin:0 0 10px;color:var(--ink-muted)}
#simple .sx-opt{all:unset;cursor:pointer;display:grid;gap:4px;padding:18px;border-radius:18px;background:var(--surface);box-shadow:0 0 0 1px var(--border) inset}
#simple .sx-opt b{font-size:18px}#simple .sx-opt span{color:var(--ink-muted);font-size:14px}
#simple .sx-opt.sx-main{background:var(--c-ink);color:var(--surface);box-shadow:none}#simple .sx-opt.sx-main span{color:inherit;opacity:.75}
#simple .sx-pick small{color:var(--ink-subtle);text-align:center;margin-top:6px}

/* the top of Shoots */
#simple .sx-top{padding:calc(14px + env(safe-area-inset-top)) 16px 10px;background:var(--c-bg);display:grid;gap:12px;border-bottom:1px solid var(--border)}
#simple .sx-row{display:flex;align-items:center;gap:10px}
#simple .sx-top h2{margin:0;font-size:24px;font-weight:800;margin-inline-end:auto}
#simple .sx-seg{display:inline-flex;background:var(--surface-sunken);border-radius:999px;padding:3px}
#simple .sx-seg button{all:unset;cursor:pointer;padding:6px 12px;border-radius:999px;font-size:13px;font-weight:600;color:var(--ink-muted)}
#simple .sx-seg button[aria-pressed="true"]{background:var(--surface);color:var(--c-ink);box-shadow:0 1px 3px rgba(0,0,0,.12)}
#simple .sx-views{display:grid;grid-template-columns:1fr 1fr;background:var(--surface-sunken);border-radius:14px;padding:4px}
#simple .sx-views button{all:unset;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:7px;height:38px;border-radius:11px;font-size:14px;font-weight:700;color:var(--ink-muted)}
#simple .sx-views svg,#simple .sx-bar svg,#simple .sx-who svg,#simple .sx-go svg,#simple .sx-back svg{fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
#simple .sx-views svg{width:18px;height:18px}
#simple .sx-views button[aria-pressed="true"]{background:var(--surface);color:var(--c-ink);box-shadow:0 1px 4px rgba(0,0,0,.14)}
#simple .sx-days{display:flex;gap:6px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:0 -16px;padding:0 16px}
#simple .sx-days::-webkit-scrollbar{display:none}
#simple .sx-day{all:unset;cursor:pointer;scroll-snap-align:start;flex:0 0 46px;display:grid;justify-items:center;gap:2px;padding:7px 0 8px;border-radius:14px;color:var(--ink-muted)}
#simple .sx-day small{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em}
#simple .sx-day b{font-size:18px;color:var(--c-ink);font-variant-numeric:tabular-nums}
#simple .sx-day i{width:6px;height:6px;border-radius:50%;background:transparent}
#simple .sx-day.sx-has i{background:var(--c-ink)}#simple .sx-day.sx-ok i{background:var(--go)}
#simple .sx-day.sx-today b{color:var(--focus)}
#simple .sx-day.sx-on{background:var(--c-ink)}#simple .sx-day.sx-on b,#simple .sx-day.sx-on small{color:var(--surface)}#simple .sx-day.sx-on.sx-has i{background:var(--surface)}

/* the list: edge to edge, one shoot a row */
#simple .sx-list{flex:1;overflow-y:auto;overflow-x:hidden;padding:0 0 calc(96px + env(safe-area-inset-bottom));display:grid;grid-template-columns:minmax(0,1fr);align-content:start;overscroll-behavior:contain}
#simple .sx-dh{padding:16px 16px 8px;font-size:13px;font-weight:700;color:var(--ink-muted);text-transform:uppercase;letter-spacing:.05em;display:flex;justify-content:space-between}
#simple .sx-dh span{text-transform:none;letter-spacing:0;font-weight:500}
#simple .sx-card{all:unset;cursor:pointer;display:grid;grid-template-columns:62px minmax(0,1fr) auto;gap:2px 12px;padding:14px 16px;background:var(--surface);border-bottom:1px solid var(--border);min-width:0}
#simple .sx-card:active{background:var(--surface-sunken)}
#simple .sx-card.sx-ok{box-shadow:inset 6px 0 0 var(--go)}
#simple .sx-t{grid-row:1/4;align-self:start;font-size:20px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.1}
#simple .sx-t small{display:block;font-size:12px;font-weight:500;color:var(--ink-subtle);margin-top:2px}
#simple .sx-c{font-weight:700;font-size:16px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#simple .sx-p{grid-column:2/4;color:var(--ink-muted);font-size:14px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#simple .sx-k{grid-column:2/4;display:flex;gap:6px;flex-wrap:wrap;margin-top:6px;min-width:0}
#simple .sx-chip{display:inline-flex;align-items:center;height:24px;padding:0 9px;border-radius:999px;font-size:12px;font-weight:600;background:var(--surface-sunken);color:var(--ink-muted);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#simple .sx-st{justify-self:end;align-self:start;font-size:12px;font-weight:700;padding:3px 8px;border-radius:999px;color:var(--ink-muted);background:var(--surface-sunken);white-space:nowrap}
#simple .sx-st.sx-ok{background:var(--go);color:var(--on-go)}
#simple .sx-who{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr);gap:6px;margin-top:10px;padding:10px 12px;border-radius:12px;background:var(--surface-sunken);font-size:14px;min-width:0}
#simple .sx-who div{display:flex;align-items:center;gap:8px;min-width:0}
#simple .sx-who svg{width:18px;height:18px;flex:none}
#simple .sx-who .sx-ph svg{color:var(--accent-sky)}#simple .sx-who .sx-vd svg{color:var(--accent-rose)}
#simple .sx-who b{font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#simple .sx-who small{color:var(--ink-subtle);font-size:12.5px;width:46px;flex:none}
#simple .sx-card.sx-next{background:var(--c-ink);color:var(--surface);border-bottom:0}
#simple .sx-card.sx-next .sx-t small,#simple .sx-card.sx-next .sx-p{color:inherit;opacity:.75}
#simple .sx-card.sx-next .sx-chip,#simple .sx-card.sx-next .sx-st:not(.sx-ok){background:rgba(127,127,127,.22);color:inherit}
#simple .sx-card.sx-next .sx-t{grid-row:2/5}
#simple .sx-lead{grid-column:1/-1;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;opacity:.8;margin-bottom:6px}
#simple .sx-card.sx-next .sx-who{background:rgba(127,127,127,.18)}#simple .sx-card.sx-next .sx-who small{color:inherit;opacity:.7}#simple .sx-card.sx-next .sx-who svg{color:inherit}
#simple .sx-empty{padding:28px 16px;background:var(--surface);color:var(--ink-muted);text-align:center;border-bottom:1px solid var(--border)}
#simple .sx-sync{font-size:12px;color:var(--ink-subtle);text-align:center;padding:14px 16px}

/* the month */
#simple .sx-cal-h{display:flex;align-items:center;justify-content:space-between;padding:8px}
#simple .sx-cal-h b{font-size:17px}
#simple .sx-cal-h button{all:unset;cursor:pointer;width:40px;height:40px;display:grid;place-items:center;font-size:22px;color:var(--ink-muted)}
#simple .sx-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border-top:1px solid var(--border);background:var(--surface)}
#simple .sx-grid small{text-align:center;font-size:11px;font-weight:700;color:var(--ink-subtle);padding:6px 0;border-bottom:1px solid var(--border)}
#simple .sx-cell{all:unset;cursor:pointer;min-height:68px;min-width:0;padding:6px 4px;display:grid;align-content:start;justify-items:start;gap:3px;font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;border-bottom:1px solid var(--border);border-inline-end:1px solid var(--border);background:var(--surface)}
#simple .sx-cell:nth-of-type(7n){border-inline-end:0}
#simple .sx-cell em{font-style:normal;font-size:10.5px;font-weight:700;line-height:1.25;padding:1px 4px;border-radius:4px;background:var(--surface-sunken);color:var(--c-ink);max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
#simple .sx-cell em.sx-ok{background:var(--go);color:var(--on-go)}
#simple .sx-cell.sx-out{color:var(--ink-subtle);background:var(--c-bg)}#simple .sx-cell.sx-out em{opacity:.6}
#simple .sx-cell.sx-today>span{color:var(--surface);background:var(--focus);border-radius:999px;min-width:22px;height:22px;display:grid;place-items:center;margin:-2px 0 0 -2px}
#simple .sx-cell.sx-on{background:var(--surface-hover)}
#simple .sx-legend{display:flex;flex-wrap:wrap;gap:6px 14px;padding:10px 16px;font-size:12.5px;color:var(--ink-muted);background:var(--surface);border-bottom:1px solid var(--border)}
#simple .sx-legend span{display:inline-flex;align-items:center;gap:6px}#simple .sx-legend i{width:12px;height:12px;border-radius:3px;background:var(--surface-sunken);box-shadow:inset 0 0 0 1px var(--border)}
#simple .sx-legend i.sx-ok{background:var(--go);box-shadow:none}

/* the bar */
#simple .sx-bar{z-index:5;position:absolute;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));display:flex;gap:4px;padding:6px;border-radius:22px;background:var(--surface);box-shadow:var(--shadow-menu),0 0 0 1px var(--border) inset}
#simple .sx-bar button{all:unset;cursor:pointer;flex:1;display:grid;justify-items:center;gap:2px;padding:7px 0;border-radius:16px;font-size:11.5px;font-weight:600;color:var(--ink-subtle)}
#simple .sx-bar svg{width:22px;height:22px;stroke-width:1.8}
#simple .sx-bar button.sx-on{background:var(--surface-hover);color:var(--c-ink)}

/* one shoot */
#simple .sx-sheet{z-index:6;transform:translateY(100%);transition:transform .32s cubic-bezier(.2,.8,.2,1)}
#simple .sx-sheet.sx-in{transform:none}
#simple .sx-sh{padding:calc(12px + env(safe-area-inset-top)) 16px 14px;display:grid;gap:10px;background:var(--surface);border-bottom:1px solid var(--border)}
#simple .sx-back{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:4px;font-weight:600;color:var(--ink-muted);font-size:14px;width:max-content;padding:4px 0}
#simple .sx-back svg{width:18px;height:18px;stroke-width:2}
#simple .sx-sh h3{margin:0;font-size:24px;font-weight:800;line-height:1.15}
#simple .sx-when{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;font-size:15px;font-weight:600}
#simple .sx-when span{color:var(--ink-muted);font-weight:500}
#simple .sx-place{display:flex;gap:8px;align-items:center}
#simple .sx-place p{margin:0;flex:1;min-width:0;font-size:14px;color:var(--ink-muted);overflow-wrap:anywhere}
#simple .sx-go{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 14px;border-radius:12px;background:var(--primary);color:var(--on-primary);font-weight:700;font-size:14px;white-space:nowrap;box-sizing:border-box}
#simple .sx-go svg{width:18px;height:18px;stroke-width:2}
#simple .sx-go.sx-ghost{background:var(--surface-sunken);color:var(--c-ink)}
#simple .sx-crew{display:flex;gap:6px 12px;flex-wrap:wrap}
#simple .sx-crew span{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--ink-muted)}
#simple .sx-crew i{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--surface-sunken);color:var(--c-ink);font-style:normal;font-size:11px;font-weight:700}
#simple .sx-contact{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 12px;border-radius:12px;background:var(--surface-sunken)}
#simple .sx-contact div{flex:1;min-width:140px;display:grid}
#simple .sx-contact b{font-size:14px}#simple .sx-contact small{font-size:12.5px;color:var(--ink-muted)}
#simple .sx-contact .sx-go{height:36px;padding:0 12px;background:var(--surface);color:var(--c-ink)}
#simple .sx-tabs{display:flex;gap:4px;padding:10px 16px 0;background:var(--surface);border-bottom:1px solid var(--border);overflow-x:auto;scrollbar-width:none}
#simple .sx-tabs button{all:unset;cursor:pointer;padding:8px 12px 11px;font-weight:600;font-size:14px;color:var(--ink-subtle);border-bottom:3px solid transparent;white-space:nowrap}
#simple .sx-tabs button[aria-selected="true"]{color:var(--c-ink);border-bottom-color:var(--c-ink)}
#simple .sx-panes{flex:1;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
#simple .sx-panes::-webkit-scrollbar{display:none}
#simple .sx-pane{flex:0 0 100%;scroll-snap-align:start;overflow-y:auto;padding:16px 18px 40px;box-sizing:border-box;min-width:0}
#simple .sx-pane h4{margin:18px 0 6px;font-size:13px;color:var(--ink-subtle);text-transform:uppercase;letter-spacing:.05em}
#simple .sx-pane h4:first-child{margin-top:0}
#simple .sx-pane p{margin:0 0 10px;font-size:16px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}
#simple .sx-pane .sx-none{color:var(--ink-muted)}
#simple .sx-full{display:flex;justify-content:center;padding:10px 16px 14px;border-top:1px solid var(--border);background:var(--surface)}
#simple .sx-toast{position:absolute;left:50%;bottom:calc(96px + env(safe-area-inset-bottom));transform:translateX(-50%);background:var(--c-ink);color:var(--surface);padding:9px 14px;border-radius:12px;font-size:13.5px;font-weight:600;opacity:0;transition:opacity .2s;pointer-events:none;white-space:nowrap;z-index:9}
#simple .sx-toast.sx-on{opacity:1}
@media (prefers-reduced-motion:reduce){#simple .sx-sheet{transition:none}}

/* the bar's numbers */
#simple .sx-bar button{position:relative}
#simple .sx-bdg{position:absolute;top:2px;left:calc(50% + 6px);min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--status-stuck-fg);color:#fff;font-size:11px;font-weight:700;display:grid;place-items:center;box-sizing:border-box}
#simple .sx-bdg:empty{display:none}

/* the month: fits the screen; swipe for other months */
#simple .sx-list.sx-calmode{display:flex;flex-direction:column;overflow:hidden;padding-bottom:calc(84px + env(safe-area-inset-bottom));overscroll-behavior:none}
#simple .sx-calmode .sx-cal-h{flex:none;padding:4px 8px}
#simple .sx-track-w{flex:1;min-height:0;overflow:hidden;touch-action:none}
#simple .sx-track{display:flex;height:100%;will-change:transform}
#simple .sx-mon{flex:0 0 100%;height:100%;min-width:0}
#simple .sx-calmode .sx-grid{height:100%;grid-template-rows:auto repeat(var(--wk),minmax(0,1fr))}
#simple .sx-calmode .sx-cell{min-height:0;overflow:hidden}
#simple .sx-calmode .sx-legend{flex:none;padding:8px 16px;gap:4px 12px}
#simple .sx-swipe{margin-inline-start:auto;color:var(--ink-subtle)}

/* the small sheet from the bottom */
#simple .sx-half{position:absolute;inset:0;z-index:8}
#simple .sx-scrim{position:absolute;inset:0;background:var(--scrim);opacity:0;transition:opacity .24s}
#simple .sx-half.sx-in .sx-scrim{opacity:1}
#simple .sx-hsheet{position:absolute;left:0;right:0;bottom:0;max-height:72%;display:flex;flex-direction:column;background:var(--c-bg);border-radius:20px 20px 0 0;transform:translateY(100%);transition:transform .26s cubic-bezier(.2,.8,.2,1);padding-bottom:env(safe-area-inset-bottom);overflow:hidden}
#simple .sx-half.sx-in .sx-hsheet{transform:none}
#simple .sx-hsheet form{display:contents}
#simple .sx-hh{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--border);background:var(--surface)}
#simple .sx-hh b{font-size:17px}
#simple .sx-x{all:unset;cursor:pointer;width:36px;height:36px;display:grid;place-items:center;font-size:24px;color:var(--ink-muted)}
#simple .sx-hb{overflow-y:auto;display:grid;grid-template-columns:minmax(0,1fr);align-content:start;padding-bottom:16px}
#simple .sx-hb .sx-in-t{margin:16px 16px 0;font:inherit;font-size:17px;color:var(--c-ink);background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:12px 14px}
#simple .sx-when-p{display:flex;gap:6px;flex-wrap:wrap;padding:12px 16px}
#simple .sx-when-p button{all:unset;cursor:pointer;padding:8px 14px;border-radius:999px;background:var(--surface-sunken);font-size:14px;font-weight:600;color:var(--ink-muted)}
#simple .sx-when-p button[aria-checked="true"]{background:var(--c-ink);color:var(--surface)}
#simple .sx-big{justify-content:center;height:48px;margin:4px 16px 0;font-size:15px}

/* tasks */
#simple .sx-three{grid-template-columns:repeat(3,1fr)}
#simple .sx-count{font-size:14px;font-weight:600;color:var(--ink-subtle)}
#simple .sx-dlate{color:var(--status-stuck-fg)}
#simple .sx-tk{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:0 10px;padding:6px 16px 6px 8px;background:var(--surface);border-bottom:1px solid var(--border);min-height:62px}
#simple .sx-tick{all:unset;cursor:pointer;width:44px;height:44px;display:grid;place-items:center}
#simple .sx-tick svg{width:26px;height:26px;padding:3px;box-sizing:border-box;border-radius:50%;box-shadow:inset 0 0 0 2px var(--border-strong);fill:none;stroke:transparent;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;transition:background .15s,stroke .15s}
#simple .sx-tick.sx-ticked svg,#simple .sx-done .sx-tick svg{background:var(--go);box-shadow:none;stroke:var(--on-go)}
#simple .sx-done .sx-tb b{text-decoration:line-through;color:var(--ink-subtle)}
#simple .sx-kd{width:26px;height:26px;margin:0 auto;border-radius:8px;display:grid;place-items:center;background:var(--surface-sunken);color:var(--ink-muted);font-size:12px;font-weight:700}
#simple .sx-tb{all:unset;cursor:pointer;display:grid;gap:2px;min-width:0;padding:8px 0}
#simple .sx-tb b{font-size:15.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
#simple .sx-tb small{font-size:13px;color:var(--ink-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#simple .sx-due{font-size:12px;font-weight:700;padding:3px 8px;border-radius:999px;background:var(--surface-sunken);color:var(--ink-muted);white-space:nowrap}
#simple .sx-due.sx-late{background:var(--status-stuck-bg);color:var(--status-stuck-fg)}
#simple .sx-due.sx-now{background:var(--status-working-bg);color:var(--status-working-fg)}
#simple .sx-fab{all:unset;cursor:pointer;position:absolute;right:20px;bottom:calc(96px + env(safe-area-inset-bottom));width:56px;height:56px;border-radius:50%;background:var(--c-ink);color:var(--surface);display:grid;place-items:center;font-size:30px;font-weight:300;box-shadow:var(--shadow-menu);z-index:4}
#simple .sx-kind{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-subtle)}
#simple .sx-tpane{display:grid;gap:10px;align-content:start;padding:18px 0}
#simple .sx-tpane .sx-none{padding:0 16px;font-size:14px}

/* chat */
#simple .sx-chips{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}
#simple .sx-chips button{all:unset;cursor:pointer;padding:7px 14px;border-radius:999px;background:var(--surface-sunken);font-size:13.5px;font-weight:600;color:var(--ink-muted);white-space:nowrap}
#simple .sx-chips button[aria-pressed="true"]{background:var(--c-ink);color:var(--surface)}
#simple .sx-cv{all:unset;cursor:pointer;display:grid;grid-template-columns:46px minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 16px;background:var(--surface);border-bottom:1px solid var(--border);min-width:0}
#simple .sx-cv:active{background:var(--surface-sunken)}
#simple .sx-av{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:var(--surface-sunken);color:var(--c-ink);font-weight:700;font-size:15px}
#simple .sx-av.k-client{border-radius:14px;background:var(--primary-soft);color:var(--focus)}
#simple .sx-ct{display:grid;gap:2px;min-width:0}
#simple .sx-ct b{font-size:15.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#simple .sx-ct small{font-size:14px;color:var(--ink-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#simple .sx-new .sx-ct b,#simple .sx-new .sx-ct small{color:var(--c-ink);font-weight:700}
#simple .sx-cm{display:grid;justify-items:end;gap:4px}
#simple .sx-cm small{font-size:12px;color:var(--ink-subtle)}
#simple .sx-cm .sx-bdg{position:static}
#simple .sx-th{display:flex;align-items:center;gap:10px;padding:calc(10px + env(safe-area-inset-top)) 16px 10px;background:var(--surface);border-bottom:1px solid var(--border)}
#simple .sx-th b{flex:1;min-width:0;font-size:17px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#simple .sx-thfull{font-size:13px;font-weight:600;color:var(--ink-muted);text-decoration:none}
#simple .sx-msgs{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:6px;background:var(--c-bg);overscroll-behavior:contain}
#simple .sx-msep{align-self:center;font-size:12px;color:var(--ink-subtle);padding:6px 0}
#simple .sx-m{max-width:80%;align-self:flex-start;background:var(--surface);border-radius:18px 18px 18px 6px;padding:8px 12px;box-shadow:0 0 0 1px var(--border);display:grid;gap:4px}
#simple .sx-m small{font-size:12px;font-weight:700;color:var(--focus)}
#simple .sx-m p{margin:0;font-size:15.5px;line-height:1.4;white-space:pre-wrap;overflow-wrap:anywhere}
#simple .sx-m img{max-width:100%;border-radius:12px;display:block}
#simple .sx-m blockquote{margin:0;padding:4px 8px;border-inline-start:3px solid var(--border-strong);font-size:13px;color:var(--ink-muted)}
#simple .sx-m time{font-size:11px;color:var(--ink-subtle);justify-self:end}
#simple .sx-m.sx-me{align-self:flex-end;background:var(--c-ink);color:var(--surface);box-shadow:none;border-radius:18px 18px 6px 18px}
#simple .sx-m.sx-me time{color:inherit;opacity:.6}
#simple .sx-say{display:flex;gap:8px;align-items:flex-end;padding:8px 10px calc(10px + env(safe-area-inset-bottom));background:var(--surface);border-top:1px solid var(--border)}
#simple .sx-say textarea{flex:1;font:inherit;font-size:16px;color:var(--c-ink);background:var(--surface-sunken);border:0;border-radius:22px;padding:11px 16px;resize:none;max-height:120px}
#simple .sx-send{all:unset;cursor:pointer;width:44px;height:44px;border-radius:50%;background:var(--c-ink);color:var(--surface);display:grid;place-items:center;flex:none}
#simple .sx-send svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* your Simple Hub: the gear, the picker, More */
#simple .sx-gear{all:unset;cursor:pointer;width:36px;height:36px;display:grid;place-items:center;border-radius:50%;color:var(--ink-muted);flex:none}
#simple .sx-gear svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
#simple .sx-row h2+.sx-gear,#simple .sx-row .sx-count+.sx-gear{margin-inline-start:0}
#simple .sx-row h2{order:0}#simple .sx-row .sx-gear{order:2}#simple .sx-row .sx-seg{order:1}
#simple .sx-km{fill:currentColor;stroke:none!important}
#simple .sx-plist{flex:1;overflow-y:auto;padding-bottom:20px}
#simple .sx-prow{display:grid;grid-template-columns:40px minmax(0,1fr) auto auto;align-items:center;gap:10px;padding:12px 16px;background:var(--surface);border-bottom:1px solid var(--border)}
#simple .sx-pic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--surface-sunken)}
#simple .sx-pic svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#simple .sx-prow label{display:grid;gap:2px;min-width:0;cursor:pointer}#simple .sx-prow label b{font-size:15.5px}#simple .sx-prow label small{font-size:13px;color:var(--ink-muted)}
#simple .sx-pmv{display:flex;gap:2px}
#simple .sx-pmv button{all:unset;cursor:pointer;width:32px;height:32px;display:grid;place-items:center;border-radius:8px;background:var(--surface-sunken);font-weight:700}
#simple .sx-pmv button:disabled{opacity:.3;cursor:default}
#simple .sx-sw{appearance:none;-webkit-appearance:none;width:46px;height:28px;border-radius:999px;background:var(--border-strong);position:relative;cursor:pointer;margin:0;transition:background .18s}
#simple .sx-sw::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;transition:transform .18s cubic-bezier(.2,.8,.2,1);box-shadow:0 1px 3px rgba(0,0,0,.25)}
#simple .sx-sw:checked{background:var(--go)}#simple .sx-sw:checked::after{transform:translateX(18px)}
#simple .sx-sw:disabled{opacity:.5;cursor:default}
#simple .sx-sh .sx-none{margin:0;font-size:14px}
#simple .sx-mlist{padding:6px 0 12px}
#simple .sx-mrow{all:unset;cursor:pointer;display:grid;grid-template-columns:28px minmax(0,1fr);gap:14px;align-items:center;padding:14px 18px;border-bottom:1px solid var(--border)}
#simple .sx-mrow svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#simple .sx-mrow span{display:grid;gap:2px}#simple .sx-mrow small{color:var(--ink-muted);font-size:13px}

/* time off */
#simple .sx-ofh{display:grid;gap:14px;padding:18px 16px;background:var(--surface);border-bottom:1px solid var(--border)}
#simple .sx-ofh>div{display:grid;gap:2px}
#simple .sx-ofh b{font-size:44px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
#simple .sx-ofh span{font-size:15px;color:var(--ink-muted)}#simple .sx-ofh small{font-size:13px;color:var(--status-working-fg)}
#simple .sx-ofh .sx-big{margin:0}
#simple .sx-orow{display:flex;align-items:center;gap:10px;padding:12px 16px;background:var(--surface);border-bottom:1px solid var(--border)}
#simple .sx-orow>span:first-child{flex:1;min-width:0;display:grid;gap:2px}#simple .sx-orow b{font-size:15px}#simple .sx-orow small{font-size:13px;color:var(--ink-muted)}
#simple .sx-owait{flex-wrap:wrap}
#simple .sx-oact{display:flex;align-items:center;gap:8px}
#simple .sx-oact .sx-go{height:36px;padding:0 12px}
#simple .sx-ost{font-style:normal;font-size:12px;font-weight:700;padding:3px 8px;border-radius:999px;background:var(--surface-sunken);color:var(--ink-muted)}
#simple .sx-ost.s-approved{background:var(--go);color:var(--on-go)}#simple .sx-ost.s-pending{background:var(--status-working-bg);color:var(--status-working-fg)}#simple .sx-ost.s-declined{background:var(--status-stuck-bg);color:var(--status-stuck-fg)}
#simple .sx-lnk{all:unset;cursor:pointer;font-size:13px;font-weight:600;color:var(--ink-muted);text-decoration:underline}
#simple .sx-ofm label{display:grid;gap:6px;padding:0 16px;font-size:13px;color:var(--ink-muted)}
#simple .sx-ofm input{font:inherit;font-size:16px;color:var(--c-ink);background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:10px 12px}
#simple .sx-ofm{gap:10px}

/* clients */
#simple .sx-find{flex:1;min-width:0;font:inherit;font-size:16px;color:var(--c-ink);background:var(--surface-sunken);border:0;border-radius:12px;padding:9px 12px}
#simple .sx-av img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
#simple .sx-ccard{display:grid;gap:3px;margin:0 16px;padding:14px;border-radius:14px;background:var(--surface);box-shadow:0 0 0 1px var(--border)}
#simple .sx-ccard b{font-size:17px}#simple .sx-ccard small{font-size:13.5px;color:var(--ink-muted)}
#simple .sx-cbtn{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
#simple .sx-tpane>.sx-cbtn{padding:0 16px;margin:0}
#simple .sx-kv{display:grid;gap:2px;padding:0 16px}#simple .sx-kv small{font-size:12px;color:var(--ink-subtle)}#simple .sx-kv b{font-weight:600}
#simple .sx-err{margin:0 16px;color:var(--status-stuck-fg);font-size:14px;font-weight:600}#simple .sx-err:empty{display:none}
#simple input.sx-sw{width:46px!important;height:28px!important;min-width:46px;flex:none;padding:0!important;border:0!important;border-radius:999px!important;box-shadow:none!important}
#simple svg.sx-km{fill:currentColor!important;stroke:none!important}
#simple .sx-det{margin:0 16px;font-size:15px;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere}
#simple .sx-flab{display:grid;gap:6px;padding:0 16px;font-size:13px;color:var(--ink-muted)}#simple .sx-flab .sx-in-t{margin:0}
#simple .sx-tpane .sx-ccard{margin:0 16px}
#simple a.sx-tb{color:inherit;text-decoration:none}
#simple input.sx-in-t{display:block;width:100%!important;box-sizing:border-box;font:inherit;font-size:16px!important;color:var(--c-ink);background:var(--surface)!important;border:1px solid var(--border)!important;border-radius:12px!important;padding:12px 14px!important;min-height:48px}

/* the Simple Hub is exactly the visible part of the screen (public/simple.js fit(): measured live, the page zoom undone) */
#simple{inset:auto;top:var(--sx-t,0);left:var(--sx-l,0);width:var(--sx-w,100vw);height:var(--sx-h,100dvh)}
@supports (height:100dvh){#simple{height:var(--sx-h,100dvh)}}