/* Shifts redesign, scoped to creation routes so Events retain their own UI. */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800;900&family=IBM+Plex+Mono:wght@400;500&display=swap');
:root[data-shifts-ui][data-shifts-ui],html[data-shifts-ui][data-color-mode] #event-workspace[data-theme]{--ui-bg:#f4f4f1;--ui-surface:#fff;--ui-soft:#fdeee7;--ui-text:#17181a;--ui-muted:#696c71;--ui-border:#deded8;--ui-primary:#c93a08;--ui-on-primary:#fff;--ui-input:#fff;--ui-glow:transparent}
:root[data-shifts-ui][data-shifts-ui][data-color-mode=dark],html[data-shifts-ui][data-color-mode=dark] #event-workspace[data-theme]{--ui-bg:#101114;--ui-surface:#1a1b1f;--ui-soft:#3a251b;--ui-text:#f2f2ee;--ui-muted:#b0b4bc;--ui-border:#33343a;--ui-primary:#ff8a58;--ui-on-primary:#27160e;--ui-input:#1a1b1f}
html[data-shifts-ui] body{--bg:var(--ui-bg);--surface:var(--ui-surface);--text:var(--ui-text);--ink:var(--ui-text);--muted:var(--ui-muted);--border:var(--ui-border);--line:var(--ui-border);--accent:var(--ui-primary);margin:0;padding:0 0 0 220px;background:var(--ui-bg);color:var(--ui-text);font-family:Archivo,system-ui,sans-serif}
html[data-shifts-ui] body>header:not(.shifts-topbar){display:none!important}
[data-shifts-shell][hidden]{display:none!important}
.shifts-sidebar,.shifts-topbar{display:none}
html[data-shifts-ui] .shifts-sidebar{display:flex;flex-direction:column;position:fixed;inset:0 auto 0 0;width:220px;padding:33px 20px;background:var(--ui-surface);border-right:1px solid var(--ui-border);z-index:40;overflow-y:auto}
html[data-shifts-ui] a{text-decoration:none;color:inherit}
html[data-shifts-ui] .shifts-brand{font-size:33px;font-weight:900;letter-spacing:-2px;display:flex;align-items:center;gap:12px}
html[data-shifts-ui] .shifts-brand b,html[data-shifts-ui] .shifts-mobile-brand b{font:500 10px 'IBM Plex Mono',monospace;letter-spacing:1px;text-transform:uppercase;padding:6px 9px;background:var(--ui-primary);color:var(--ui-on-primary);border-radius:3px}
html[data-shifts-ui] .shifts-workspace{border:1px solid var(--ui-border);border-radius:8px;margin:30px 0 22px;padding:12px;font-size:12px;font-weight:600}
html[data-shifts-ui] .shifts-workspace small{display:block;color:var(--ui-muted);font-size:10px;margin-top:6px;font-weight:400}
html[data-shifts-ui] .shifts-sidebar nav{display:grid;gap:5px}
html[data-shifts-ui] .shifts-sidebar nav a{display:flex;gap:12px;align-items:center;padding:12px 10px;border-radius:7px;font-size:12px;color:var(--ui-muted)}
html[data-shifts-ui] .shifts-sidebar svg{flex-shrink:0}
html[data-shifts-ui] .shifts-sidebar nav a[aria-current]{background:var(--ui-soft);color:var(--ui-primary);font-weight:700}
html[data-shifts-ui] .shifts-nav-caption{font:9px 'IBM Plex Mono',monospace;letter-spacing:1.5px;color:var(--ui-muted);margin:30px 10px 12px}
html[data-shifts-ui] .shifts-sidebar-bottom{margin-top:auto;padding-top:45px;font-size:11px;color:var(--ui-muted)}
html[data-shifts-ui] .shifts-profile{display:flex;align-items:center;gap:12px;border-top:1px solid var(--ui-border);padding:20px 0 0;margin-top:20px;color:var(--ui-text)}
html[data-shifts-ui] .shifts-topbar{display:flex;position:relative;height:78px;margin:0;padding:0 42px;border-bottom:1px solid var(--ui-border);background:var(--ui-bg);align-items:center;justify-content:space-between;font-size:12px;color:var(--ui-muted);z-index:30}
html[data-shifts-ui] .shifts-crumb span{margin:0 10px;color:var(--ui-border)}
html[data-shifts-ui] .shifts-crumb b{font-weight:400;color:var(--ui-text)}
html[data-shifts-ui] .shifts-top-actions{display:flex;align-items:center;gap:24px}
html[data-shifts-ui] .shifts-appearance{font:inherit;background:transparent;border:1px solid var(--ui-border);color:var(--ui-text);border-radius:6px;padding:8px 11px}
html[data-shifts-ui] .shifts-menu,html[data-shifts-ui] .shifts-mobile-brand{display:none}
html[data-shifts-ui] #event-workspace{background:var(--ui-bg);color:var(--ui-text);min-height:calc(100vh - 78px)}
html[data-shifts-ui] #event-workspace .workspace-shell{max-width:1330px;margin:0 auto;padding:28px 42px 65px}
html[data-shifts-ui] .workspace-top{margin-bottom:30px;font-size:11px;color:var(--ui-muted)}
html[data-shifts-ui] .shifts-eyebrow{font:10px 'IBM Plex Mono',monospace;letter-spacing:1.4px;color:var(--ui-primary);margin:0 0 14px}
html[data-shifts-ui] .shifts-editor-heading h1{font:800 clamp(30px,3vw,42px)/1.1 Archivo,system-ui,sans-serif;letter-spacing:-1.6px;margin:0 0 13px}
html[data-shifts-ui] .shifts-editor-heading>p:last-child{font-size:14px;line-height:1.6;color:var(--ui-muted);margin:0 0 32px}
html[data-shifts-ui] .editor-layout{grid-template-columns:minmax(0,1.45fr) minmax(275px,1fr);gap:30px;align-items:start}
html[data-shifts-ui] .editor-form-wrap{grid-column:1;grid-row:1;min-width:0}
html[data-shifts-ui] .editor-art{grid-column:2;grid-row:1;position:sticky;top:25px;min-width:0;width:100%;max-width:none}
html[data-shifts-ui] #event-editor{border:1px solid var(--ui-border);border-radius:10px;background:var(--ui-surface);padding:26px}
html[data-shifts-ui] .shifts-section-title{font:700 16px Archivo,system-ui,sans-serif;margin:0 0 22px;color:var(--ui-text)}
html[data-shifts-ui] .shifts-section-title:not(:first-child){border-top:1px solid var(--ui-border);padding-top:26px;margin-top:28px}
html[data-shifts-ui] #event-editor label[for=event-name]{display:block;font-size:12px;font-weight:500;margin-bottom:9px}
html[data-shifts-ui] #event-workspace .event-title-input{font:400 14px Archivo,system-ui,sans-serif!important;padding:13px!important;margin:0 0 24px!important;border:1px solid var(--ui-border)!important;border-radius:6px!important;background:var(--ui-input)!important;color:var(--ui-text)!important}
html[data-shifts-ui] #event-workspace .editor-panel{background:transparent;color:var(--ui-text);border:0;border-top:1px solid var(--ui-border);border-radius:0;box-shadow:none;padding:23px 0 0;margin:0 0 24px}
html[data-shifts-ui] #event-workspace :is(input,textarea,select){font-family:Archivo,system-ui,sans-serif;color:var(--ui-text);background:var(--ui-input);border-color:var(--ui-border);border-radius:6px}
html[data-shifts-ui] #event-workspace :is(.panel-title,.shift-duration,.break-controls,.event-options){color:var(--ui-text)}
html[data-shifts-ui] #event-workspace :is(.settings-help,.form-note,.creation-note,.upload-help,.schedule-row,.panel-title small,.shift-duration-summary,.break-summary){color:var(--ui-muted)}
html[data-shifts-ui] #event-workspace :is(.outline,.ticket-type-toggle button,.location-toggle button){background:var(--ui-surface);color:var(--ui-text);border:1px solid var(--ui-border);box-shadow:none;border-radius:6px}
html[data-shifts-ui] #event-workspace :is(.primary,[aria-pressed=true]:not(.theme-dot)){background:var(--ui-primary);color:var(--ui-on-primary);border-color:var(--ui-primary);box-shadow:none;border-radius:6px}
html[data-shifts-ui] .shift-ai-entry{margin:0 0 16px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
html[data-shifts-ui] .shift-ai-entry .settings-help{font-size:11px}
html[data-shifts-ui] .preview-label{font:9px 'IBM Plex Mono',monospace;letter-spacing:1px;margin-bottom:15px;color:var(--ui-muted)}
html[data-shifts-ui] .live-preview{display:flex;flex-direction:column;position:relative;border:1px solid var(--ui-border);border-radius:10px;background:var(--ui-surface);overflow:hidden;box-shadow:0 6px 20px #00000005;color:var(--ui-text)}
html[data-shifts-ui] .shifts-ticket-top{display:flex;justify-content:space-between;gap:15px;background:#202124;color:#f2f2ee;padding:18px 22px;font:9px 'IBM Plex Mono',monospace;letter-spacing:1.1px}
html[data-shifts-ui] .live-preview #preview-cover{position:absolute;right:22px;top:74px;width:42px;height:42px;min-height:0;border-radius:8px;object-fit:contain;padding:5px}
html[data-shifts-ui] .preview-copy{padding:26px 22px 20px;background:transparent;color:var(--ui-text);min-height:180px}
html[data-shifts-ui] .preview-copy h2{font:800 27px/1.15 Archivo,system-ui,sans-serif;letter-spacing:-.6px;padding-right:42px;color:var(--ui-text);margin:14px 0 18px;overflow-wrap:anywhere}
html[data-shifts-ui] .preview-copy #preview-date{padding-right:45px;font:10px/1.6 'IBM Plex Mono',monospace;color:var(--ui-primary)}
html[data-shifts-ui] .preview-copy p{font-size:12px;color:var(--ui-muted)}
html[data-shifts-ui] .shifts-ticket-facts{display:grid;grid-template-columns:1fr 1.7fr .8fr;gap:12px;padding:20px 22px;border-top:1px dashed var(--ui-border)}
html[data-shifts-ui] .shifts-ticket-facts span{display:block;font:8px 'IBM Plex Mono',monospace;letter-spacing:1px;color:var(--ui-muted);margin-bottom:8px}
html[data-shifts-ui] .shifts-ticket-facts strong{font-size:12px;font-weight:600;overflow-wrap:anywhere}
html[data-shifts-ui] .shifts-ticket-bottom{padding:13px 22px;background:var(--ui-soft);color:var(--ui-primary);font:8px 'IBM Plex Mono',monospace;letter-spacing:1px}
html[data-shifts-ui] .editor-tip{display:block;margin-top:22px;padding:22px;border:1px solid var(--ui-border);border-radius:10px;background:var(--ui-surface);color:var(--ui-text)}
html[data-shifts-ui] .editor-tip h3{font-size:16px;margin:0 0 10px}
html[data-shifts-ui] .editor-tip p{font-size:12px;line-height:1.7;color:var(--ui-muted);margin:0}
html[data-shifts-ui] .cover-tools{margin-top:18px;gap:8px}
html[data-shifts-ui] .cover-tools .outline{font-size:11px;padding:10px}
html[data-shifts-ui] .theme-row{color:var(--ui-muted);font-size:11px}
html[data-shifts-ui] :is(a,button,input,textarea,select):focus-visible{outline:2px solid var(--ui-primary);outline-offset:3px}
@media(max-width:1100px){html[data-shifts-ui] body{padding-left:190px}html[data-shifts-ui] .shifts-sidebar{width:190px;padding:28px 14px}html[data-shifts-ui] #event-workspace .workspace-shell{padding:25px}html[data-shifts-ui] .editor-layout{gap:22px;grid-template-columns:minmax(0,1.3fr) minmax(250px,1fr)}html[data-shifts-ui] #event-editor{padding:20px}html[data-shifts-ui] .shifts-topbar{padding:0 25px}}
@media(max-width:850px){html[data-shifts-ui] body{padding-left:0}html[data-shifts-ui] .shifts-sidebar{display:none;width:240px;top:66px;box-shadow:12px 0 32px #0002}html[data-shifts-ui] .shifts-nav-open .shifts-sidebar{display:flex}html[data-shifts-ui] .shifts-topbar{height:66px;padding:0 20px;gap:12px}html[data-shifts-ui] .shifts-menu{display:block;padding:7px;background:transparent;color:var(--ui-text);font-size:20px}html[data-shifts-ui] .shifts-top-actions{margin-left:auto;gap:12px}}
@media(max-width:650px){html[data-shifts-ui] .editor-layout{display:flex;flex-direction:column;gap:30px}html[data-shifts-ui] .editor-form-wrap{width:100%}html[data-shifts-ui] .editor-art{position:static;width:100%;max-width:440px;align-self:center}html[data-shifts-ui] #event-workspace .workspace-shell{padding:22px 18px 50px}html[data-shifts-ui] .shifts-crumb{display:none}html[data-shifts-ui] .shifts-mobile-brand{display:flex;align-items:center;gap:9px;font-size:24px;font-weight:800;letter-spacing:-1px}html[data-shifts-ui] .shifts-top-actions>a{display:none}html[data-shifts-ui] .shifts-editor-heading h1{font-size:32px}html[data-shifts-ui] .workspace-top{gap:15px;font-size:10px}html[data-shifts-ui] .schedule-row{grid-template-columns:40px minmax(0,1fr) 100px}html[data-shifts-ui] #event-editor{padding:18px}html[data-shifts-ui] .shifts-appearance{font-size:11px}}

html[data-shifts-ui][data-home][data-color-mode] #event-workspace{background:var(--ui-bg)}
html[data-shifts-ui] .shifts-section-title{letter-spacing:0}
html[data-shifts-ui] .live-preview{align-items:stretch}
@media(max-width:650px){html[data-shifts-ui] .editor-form-wrap{order:1}html[data-shifts-ui] .editor-art{order:2}}
@media(max-width:650px){html[data-shifts-ui] .schedule-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}html[data-shifts-ui] .schedule-row>span{grid-column:1/-1}html[data-shifts-ui] .schedule-row input{width:100%;min-width:0;padding:10px 7px}}
/* A visible route from the first detail to the final creation action. */
html[data-shifts-ui] .shifts-progress{display:block;margin:0 0 28px;scroll-margin-top:20px}
html[data-shifts-ui] .shifts-progress ol{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));list-style:none;margin:0;padding:0;border:1px solid var(--ui-border);border-radius:10px;overflow:hidden;background:var(--ui-surface)}
html[data-shifts-ui] .shifts-progress li{min-width:0;border-right:1px solid var(--ui-border)}
html[data-shifts-ui] .shifts-progress li:last-child{border:0}
html[data-shifts-ui] .shifts-progress button{display:flex;align-items:center;gap:12px;width:100%;height:100%;padding:18px;text-align:left;border:0;border-radius:0;background:transparent;color:var(--ui-muted)}
html[data-shifts-ui] .shifts-progress button[aria-current=step]{background:var(--ui-soft);color:var(--ui-primary)}
html[data-shifts-ui] .shifts-step-number{display:grid;place-items:center;width:30px;height:30px;flex-shrink:0;border:1px solid var(--ui-border);border-radius:50%;font:12px 'IBM Plex Mono',monospace}
html[data-shifts-ui] [aria-current=step] .shifts-step-number{background:var(--ui-primary);border-color:var(--ui-primary);color:var(--ui-on-primary)}
html[data-shifts-ui] .is-complete .shifts-step-number{color:var(--ui-primary);border-color:var(--ui-primary)}
html[data-shifts-ui] .shifts-progress strong{display:block;font-size:12px;font-weight:600}
html[data-shifts-ui] .shifts-progress small{display:block;margin-top:6px;font-size:10px;color:var(--ui-muted)}
html[data-shifts-ui] .shifts-step-guidance{margin:0 0 18px}
html[data-shifts-ui] .shifts-step-guidance>span{font:9px 'IBM Plex Mono',monospace;letter-spacing:1px;color:var(--ui-primary)}
html[data-shifts-ui] .shifts-step-guidance p{font-size:12px;line-height:1.6;color:var(--ui-muted);margin:7px 0 0}
html[data-shifts-ui] .shifts-step-actions{display:flex;justify-content:space-between;gap:12px;border-top:1px solid var(--ui-border);padding-top:22px;margin-top:24px}
html[data-shifts-ui] .shifts-step-actions button{padding:12px 16px;font-size:12px}
html[data-shifts-ui] .shifts-step-actions [data-shift-next]{margin-left:auto}
html[data-shifts-ui] .shifts-step-panel>.shifts-section-title:first-child{border:0;margin-top:0;padding-top:0}
html[data-shifts-ui] .shifts-step-panel:focus{outline:none}
html[data-shifts-ui] .shifts-review>p{font-size:12px;line-height:1.7;color:var(--ui-muted)}
html[data-shifts-ui] .shifts-review dl{display:grid;grid-template-columns:110px minmax(0,1fr);margin:24px 0;font-size:12px;line-height:1.6}
html[data-shifts-ui] .shifts-review dt,html[data-shifts-ui] .shifts-review dd{padding:12px 0;margin:0;border-bottom:1px solid var(--ui-border);overflow-wrap:anywhere}
html[data-shifts-ui] .shifts-review dt{color:var(--ui-muted);padding-right:12px}
html[data-shifts-ui] .shifts-review dd{font-weight:500}
@media(max-width:650px){html[data-shifts-ui] .shifts-progress button{flex-direction:column;align-items:flex-start;gap:10px;padding:12px 10px}html[data-shifts-ui] .shifts-progress strong{font-size:11px;line-height:1.5}html[data-shifts-ui] .shifts-progress small{display:none}html[data-shifts-ui] .shifts-step-actions{flex-wrap:wrap}html[data-shifts-ui] .shifts-step-actions [data-shift-next]{flex:1}}

/* Keep the alternative drafting action beside the page introduction. */
html[data-shifts-ui] .shifts-editor-heading{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:28px;margin-bottom:32px;align-items:center}
html[data-shifts-ui] .shifts-editor-heading>.shifts-eyebrow,html[data-shifts-ui] .shifts-editor-heading>h1,html[data-shifts-ui] .shifts-editor-heading>p{grid-column:1}
html[data-shifts-ui] .shifts-editor-heading>p:not(.shifts-eyebrow){font-size:14px;line-height:1.6;color:var(--ui-muted);margin:0}
html[data-shifts-ui] .shifts-editor-heading>.shift-ai-entry{grid-column:2;grid-row:1/4;margin:0}
html[data-shifts-ui] #event-workspace .shifts-editor-heading .shift-ai-entry a{display:inline-flex;align-items:center;justify-content:center;background:var(--ui-primary);color:var(--ui-on-primary);border:1px solid var(--ui-primary);padding:13px 18px;font-size:13px;font-weight:600;white-space:nowrap}
@media(max-width:650px){html[data-shifts-ui] .shifts-editor-heading{grid-template-columns:1fr;gap:0}html[data-shifts-ui] .shifts-editor-heading>.shift-ai-entry{grid-column:1;grid-row:auto;margin-top:20px}}

html[data-shifts-ui] .shifts-appearance{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;padding:8px;flex-shrink:0}
/* Chat is the quiet, primary starting point. Details appear as a draft takes shape. */
html[data-shifts-ui] #event-workspace.shifts-chat-first>.workspace-shell{max-width:1120px;padding-top:38px}
html[data-shifts-ui] .shifts-chat-card{border:1px solid var(--ui-border);border-radius:12px;background:var(--ui-surface);height:clamp(340px,48vh,560px);min-height:340px;overflow:hidden}
html[data-shifts-ui] .shifts-chat-card .sai-chat-header{padding:18px 22px;background:var(--ui-surface);position:static}
html[data-shifts-ui] .shifts-chat-card .sai-chat-title h1{font-family:Archivo,system-ui,sans-serif;font-size:17px;font-weight:700;letter-spacing:0}
html[data-shifts-ui] .shifts-chat-card .sai-chat-title span{font-size:11px}
html[data-shifts-ui] .shifts-chat-card .sai-avatar{border-radius:9px;background:var(--ui-soft);color:var(--ui-primary)}
html[data-shifts-ui] .shifts-chat-card .sai-bubble{border-radius:12px;max-width:85%;padding:16px 18px}
html[data-shifts-ui] .shifts-chat-card .sai-bubble p{font-size:14px;line-height:1.7;color:inherit}
html[data-shifts-ui] .shifts-chat-card #sai-availability{font-size:11px;margin-bottom:18px}
html[data-shifts-ui] .shifts-chat-card #sai-prompt-form{border-radius:10px;padding:10px 12px;background:var(--ui-bg)}
html[data-shifts-ui] .shifts-chat-card #sai-prompt{font-family:Archivo,system-ui,sans-serif;font-size:13px}
html[data-shifts-ui] .shifts-chat-card #sai-generate{border-radius:8px}
html[data-shifts-ui] .shifts-chat-card .sai-composer{padding:14px 22px}
html[data-shifts-ui] .shifts-manual-entry{text-align:center;font-size:12px;line-height:1.8;color:var(--ui-muted);margin:20px 0 0}
html[data-shifts-ui] .shifts-manual-entry a{color:var(--ui-primary);font-weight:600;margin-left:6px;text-decoration:underline;text-underline-offset:3px}
@media(max-width:650px){html[data-shifts-ui] #event-workspace.shifts-chat-first>.workspace-shell{padding-top:26px}html[data-shifts-ui] .shifts-chat-card{height:420px}html[data-shifts-ui] .shifts-chat-card .sai-chat-header,html[data-shifts-ui] .shifts-chat-card .sai-composer{padding:14px}html[data-shifts-ui] .shifts-manual-entry a{display:block;margin:5px 0 0}}
/* Chat column fills full width by default; preview expands to two columns when toggled open */
html[data-shifts-ui] .shifts-chat-columns{display:grid;grid-template-columns:1fr;gap:24px;align-items:start}
html[data-shifts-ui] .shifts-preview-open{grid-template-columns:minmax(0,1.35fr) minmax(270px,1fr)}
html[data-shifts-ui] .shifts-chat-column{min-width:0}
html[data-shifts-ui] .shifts-chat-preview{display:none;min-width:0;position:sticky;top:24px}
html[data-shifts-ui] .shifts-preview-open .shifts-chat-preview{display:block}
html[data-shifts-ui] .shifts-chat-preview .preview-copy h2{padding-right:0}
html[data-shifts-ui] .shifts-chat-preview [data-ticket-date]{font:10px/1.6 'IBM Plex Mono',monospace;color:var(--ui-primary)}
html[data-shifts-ui] .shifts-chat-preview .live-preview+.live-preview{margin-top:18px}
html[data-shifts-ui] .shifts-preview-help{font-size:12px;line-height:1.7;color:var(--ui-muted);margin:16px 0}
html[data-shifts-ui] .shifts-chat-columns .shifts-chat-card{height:clamp(420px,65vh,700px)}
html[data-shifts-ui] .sai-ready-cta{padding:16px 22px;text-align:center}
html[data-shifts-ui] .sai-ready-cta .primary{display:inline-block;width:100%;max-width:320px}
html[data-shifts-ui] .shifts-chat-columns .sai-chat-header{padding:16px;gap:10px}
html[data-shifts-ui] .shifts-chat-columns .sai-bubble{max-width:100%}
html[data-shifts-ui] .shifts-chat-columns .sai-chat-title span{font-size:10px}
@media(max-width:700px){html[data-shifts-ui] .shifts-chat-columns{grid-template-columns:1fr}html[data-shifts-ui] .shifts-chat-columns .shifts-chat-card{height:420px}}

html[data-shifts-ui] .sai-examples{margin:18px 0 0}
html[data-shifts-ui] .sai-examples>p{font:9px 'IBM Plex Mono',monospace;text-transform:uppercase;letter-spacing:1px;color:var(--ui-muted);margin:0 0 10px}
html[data-shifts-ui] .sai-examples>div{display:flex;gap:8px;flex-wrap:wrap}
html[data-shifts-ui] .sai-examples button{font-family:Archivo,system-ui,sans-serif;font-size:11px;line-height:1.5;text-align:left;border:1px solid var(--ui-border);border-radius:7px;padding:9px 11px;background:var(--ui-surface);color:var(--ui-text)}
html[data-shifts-ui] .sai-examples button:hover{background:var(--ui-soft);border-color:var(--ui-primary);color:var(--ui-primary)}
html[data-shifts-ui] .sai-examples button:disabled{opacity:.5;cursor:default}

/* Ticket preview toggle — pill button, visible in both modes */
html[data-shifts-ui] .shifts-preview-toggle{display:inline-flex;padding:6px 14px;margin:8px 0 0;background:transparent;border:1px solid var(--ui-border);border-radius:16px;color:var(--ui-muted);font:11px 'IBM Plex Mono',monospace;letter-spacing:.5px;cursor:pointer}
html[data-shifts-ui] .shifts-preview-toggle:hover{color:var(--ui-text);border-color:var(--ui-text)}

/* Dark mode: sidebar brand logo — purple (#c9a6f5) → white */
html[data-shifts-ui][data-color-mode=dark] .shifts-brand{color:#ffffff}

/* Dark mode: assistant bubble — use neutral surface instead of brownish --ui-soft.
   The warm #3a251b background makes the off-white text appear purple by simultaneous
   contrast; a neutral dark surface (#1a1b1f) lets --ui-text read as clean white. */
html[data-shifts-ui][data-color-mode=dark] .sai-bubble.sai-assistant{background:var(--ui-surface);color:var(--ui-text);border:1px solid var(--ui-border)}
/* Dark mode: bubble text — target <p> directly because tixs-theme.css sets
   html[data-tixs-standalone] p { color:var(--brand-muted) } which overrides
   inherited color from the parent .sai-bubble. */
html[data-shifts-ui][data-color-mode=dark] .sai-bubble,
html[data-shifts-ui][data-color-mode=dark] .sai-bubble p{color:var(--ui-text)}
/* Dark mode: active sidebar nav link — orange (#ff8a58) → white */
html[data-shifts-ui][data-color-mode=dark] .shifts-sidebar nav a[aria-current]{color:#ffffff}
/* Dark mode: active step in progress nav — orange (#ff8a58) → white */
html[data-shifts-ui][data-color-mode=dark] .shifts-progress [aria-current=step]{color:#ffffff}
/* Dark mode: chat prompt textarea — tixs-theme.css sets background:var(--brand-surface) on
   all textareas; !important needed because that rule loads after ours in the cascade. */
html[data-shifts-ui][data-color-mode=dark] .shifts-chat-card #sai-prompt{background:var(--ui-surface)!important;color:var(--ui-text)!important}

/* Dark mode mobile: prevent iOS text-size scaling, fix contrast, and keep the response
   visible when the keyboard opens. Scoped to [data-color-mode=dark] per design intent. */
html[data-shifts-ui][data-color-mode=dark]{-webkit-text-size-adjust:100%}

@media(max-width:850px){
  /* Clip overflow without breaking position:sticky (overflow-x:hidden would break it) */
  html[data-shifts-ui][data-color-mode=dark] #event-workspace{overflow-x:clip}
}

@media(max-width:650px){
  /* Active step: white text on dark. The brownish --ui-soft background made neutral
     #b0b4bc look cool/purple by simultaneous contrast; white avoids that entirely. */
  /* Ensure subtitle can break anywhere on narrow viewports */
  html[data-shifts-ui][data-color-mode=dark] .shifts-editor-heading>p{overflow-wrap:anywhere;word-break:break-word}

  /* Chat card: respond to dvh (visual viewport) so the card shrinks when the iOS keyboard
     opens, keeping both the response and the input visible without scrolling. */
  html[data-shifts-ui][data-color-mode=dark] .shifts-chat-card{height:auto;min-height:220px}
  html[data-shifts-ui][data-color-mode=dark] .shifts-chat-columns .shifts-chat-card{height:auto;min-height:220px}
  /* Allow the card to grow with content: remove flex constraints so the scroll container
     doesn't clip messages — user scrolls the page, not an internal overflow div. */
  html[data-shifts-ui][data-color-mode=dark] .shifts-chat-card .sai-layout,
  html[data-shifts-ui][data-color-mode=dark] .shifts-chat-card .sai-chat{height:auto;flex:none}
  html[data-shifts-ui][data-color-mode=dark] .shifts-chat-card .sai-scroll{height:auto;overflow-y:visible;flex:none}

  /* Bubble text: ensure long words break so they don't overflow the card on iOS */
  html[data-shifts-ui][data-color-mode=dark] .shifts-chat-card .sai-bubble{overflow-wrap:anywhere;word-break:break-word}
}