/* Client workflow and contextual help. Loaded after existing client styles. */
#app .topbar { gap:16px; flex-wrap:wrap; }
.topbar-help { display:flex; align-items:center; gap:12px; margin-left:auto; }
.extra-help-switch { display:flex; align-items:center; gap:9px; font:600 12px/1.4 Arial,sans-serif; cursor:pointer; position:relative; }
.extra-help-switch input { position:absolute; width:1px; height:1px; opacity:0; }
.help-switch-track { display:block; width:38px; height:23px; border:1px solid #b9a9cb; border-radius:20px; background:#554064; flex-shrink:0; }
.help-switch-track::after { content:''; display:block; width:17px; height:17px; margin:2px; border-radius:50%; background:white; transition:transform .15s; }
.extra-help-switch input:checked + .help-switch-track { background:#ff6123; border-color:#ff6123; }
.extra-help-switch input:checked + .help-switch-track::after { transform:translateX(15px); }
.extra-help-switch input:focus-visible + .help-switch-track { outline:3px solid white; outline-offset:3px; }
#open-hub-help { border:1px solid #b9a9cb; border-radius:8px; padding:9px 13px; }
#app .hub-welcome { padding:24px; box-shadow:none; }
#app .hub-welcome h1 { color:#fff; font-size:clamp(25px,3vw,38px); }
#app .hub-shortcuts { flex-wrap:wrap; overflow:visible; position:static; gap:6px; margin:0 0 20px; background:transparent; padding:0; box-shadow:none; border:none; }
#app .hub-shortcuts button { flex:1 1 auto; min-height:44px; border-radius:10px; padding:11px 14px; font-size:13px; }
#app .hub-shortcuts button:focus-visible, .help-suggestions button:focus-visible, .hub-help-bubble button:focus-visible { outline:3px solid #b76bdf; outline-offset:3px; }
#app .workspace-loading .hub-shortcuts { display:flex !important; }
#app .workspace-loading .workspace-intro, #app .workspace-loading #workspace-overview:not([hidden]), #app .workspace-loading > section:not([hidden]) { display:block !important; }
#app .workspace-loading .hub-welcome { display:flex; }
#app .workspace-loading .workspace-loading-state { min-height:0; padding:10px; margin-bottom:16px; flex-direction:row; font-size:12px; box-shadow:none; }
#app .home-actions { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
#app .home-action { min-height:125px; padding:22px; border-radius:14px; box-shadow:none; }
#app .home-action.primary { grid-column:1 / -1; min-height:140px; border:1px solid #e6c6b8; background:linear-gradient(120deg,#fff1e8,#fff); }
.home-help-row { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px; margin-bottom:18px; background:#f2eef7; border-radius:14px; }
.home-help-row strong,.home-help-row span { display:block; }
.home-help-row span { color:#61536e; font-size:13px; margin-top:5px; }
.optional-services > summary,#troubleshoot-section > details > summary { cursor:pointer; padding:16px 0; font-weight:700; color:#301a49; }
#hub-help-form > label { display:block; font-weight:700; margin:18px 0 8px; }
.help-question-row { display:flex; gap:10px; }
.help-question-row input { min-width:0; flex:1; padding:14px; border:1px solid #cdc3d6; border-radius:10px; font:inherit; background:white; }
.help-question-row .btn { white-space:nowrap; }
.help-suggestions { display:flex; flex-wrap:wrap; gap:8px; margin:20px 0; }
.help-suggestions button { padding:10px 13px; border:1px solid #d8cfe0; border-radius:20px; background:#f7f4fa; color:#301a49; font:inherit; font-size:13px; cursor:pointer; text-align:left; }
#hub-help-answer:not(:empty) { padding:20px; margin-bottom:20px; border:1px solid #ded5e7; border-radius:14px; background:#faf8fc; }
#hub-help-answer h3 { margin:0 0 12px; }
#hub-help-answer li { margin:10px 0; line-height:1.65; }
#hub-help-answer ol { padding-left:22px; }
#hub-help-answer details { margin-top:18px; border-top:1px solid #ded5e7; padding-top:12px; }
#hub-help-answer summary { cursor:pointer; font-weight:600; }
.help-extra-controls { display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
.hub-help-bubble { position:relative; display:block; box-sizing:border-box; padding:16px 44px 16px 18px; margin:0 0 16px; background:#fff4df; border:1px solid #e6c690; border-radius:14px 14px 14px 3px; color:#513511; font:14px/1.5 Arial,sans-serif; grid-column:1 / -1; flex-basis:100%; }
.hub-help-bubble strong { display:block; font-size:14px; padding:0; }
.hub-help-bubble p { margin:5px 0 0; color:#634820; font-size:13px; }
.hub-help-bubble button { position:absolute; top:5px; right:5px; min-width:34px; min-height:34px; padding:0; border:0; border-radius:8px; background:transparent; color:#513511; font:24px/1 Arial,sans-serif; cursor:pointer; }
#app .editor-actions { flex-wrap:wrap; }
#app [hidden] { display:none !important; }
@media (max-width:760px) {
  #app .topbar { grid-template-columns:auto minmax(0,1fr) auto; gap:8px; }
  #app .topbar-help { grid-column:1 / -1; grid-row:2; width:100%; justify-content:space-between; margin-left:0; }
  #app .topbar #logout-btn { grid-column:3; grid-row:1; }
  #app .extra-help-switch { min-height:44px; }
  #app main.dashboard { padding-bottom:calc(28px + env(safe-area-inset-bottom)); }
  #app .hub-shortcuts { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); position:static; margin:0 0 16px; padding:0; }
  #app .workspace-loading .hub-shortcuts { display:grid !important; }
  #app .hub-shortcuts button { font-size:12px; padding:10px 5px; min-height:44px; }
  #app .home-actions { grid-template-columns:1fr; }
  #app .home-action.primary { min-height:125px; }
  #app .home-action { min-height:110px; padding:18px; }
  #app .hub-welcome { padding:18px; }
  #app .editor-actions { position:static; }
  #app .workspace-intro:not([hidden]) { display:block !important; margin-bottom:16px; }
  .home-help-row { align-items:flex-start; flex-direction:column; }
  .help-question-row { flex-direction:column; }
  .help-question-row input { font-size:16px; }
  .hub-help-bubble { padding:14px 40px 14px 14px; }
}
@media (prefers-reduced-motion:reduce) { .help-switch-track::after { transition:none; } }

/* Setup-only accounts can use Help without revealing other workspaces. */
body.onboarding-prelaunch #app .hub-shortcuts { display:flex !important; }
body.onboarding-prelaunch #app .hub-shortcuts button:not([data-workspace-view="help"]):not([data-workspace-view="onboarding"]) { display:none !important; }
body.onboarding-prelaunch #app #dashboard-root > section { display:none !important; }
body.onboarding-prelaunch #app #dashboard-root > #hub-help-section:not([hidden]),
body.onboarding-prelaunch #app #dashboard-root > #onboarding-section:not([hidden]) { display:block !important; }

#app .hub-shortcuts button.active { color:white; background:#301a49; opacity:1; }
#app .hub-shortcuts button:not(.active) { color:#61556c; }
#leave-client-account { display:block; margin-top:20px; }
@media (max-width:760px) {
  #app .topbar .brand { grid-column:1; grid-row:1; }
  #app .topbar #org-switcher { grid-column:2; grid-row:1; }
  #app .topbar-help { grid-column:1 / -1; grid-row:2; }
}
body.onboarding-prelaunch #app #activity-section { display:none !important; }

/* Client home: a short welcome, everyday tasks, then smaller account tools. */
#app .home-welcome {
  display:flex;align-items:center;gap:16px;min-height:0;margin-bottom:18px;
  padding:22px 24px;background:#fff;border:1px solid #e7e1eb;border-radius:16px;
  color:#301a49;box-shadow:none;
}
#app .home-welcome-icon {display:grid;place-items:center;flex:0 0 50px;height:50px;border-radius:14px;background:#f1edf6;color:#56366e;}
#app .home-welcome-icon svg {width:26px;height:26px;}
#app .home-welcome .eyebrow {margin:0 0 5px;color:#817489;font-size:10px;letter-spacing:.11em;}
#app .home-welcome h1 {margin:0;color:#301a49;font-family:'Epilogue',Arial,sans-serif;font-size:clamp(23px,3vw,32px);font-weight:800;line-height:1.2;letter-spacing:-.8px;text-transform:none;}
#app .home-welcome p {display:block;margin:7px 0 0;color:#7a7081;font-size:13px;line-height:1.5;}
#app .hub-shortcuts {margin-bottom:26px;}
.home-overview {padding:0 2px;}
.home-section-heading {margin-bottom:16px;}
.home-section-heading h2,.home-section-heading h3 {margin:0;color:#392846;font-family:'Epilogue',Arial,sans-serif;font-weight:750;line-height:1.3;letter-spacing:-.45px;text-transform:none;}
.home-section-heading h2 {font-size:23px;}
.home-section-heading h3 {font-size:16px;}
.home-section-heading p {margin:6px 0 0;font-size:13px;line-height:1.5;color:#83778b;}
#app .home-actions {grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-bottom:0;}
#app .home-action {display:flex;flex-direction:column;align-items:flex-start;gap:18px;min-height:190px;padding:22px;border:1px solid #e4dde9;border-radius:16px;background:#fff;font-family:'Epilogue',Arial,sans-serif;box-shadow:none;transition:border-color .15s,background .15s;}
#app .home-action::after {content:none;}
#app .home-action:hover {transform:none;border-color:#bfa9ce;background:#fcfaff;}
#app .home-action:focus-visible,#app .home-tool:focus-visible {outline:3px solid #9b67bc;outline-offset:3px;}
#app .home-action .home-action-icon {display:grid;place-items:center;flex:0 0 42px;width:42px;height:42px;border-radius:12px;background:#f2edf7;color:#6b4783;}
#app .home-action .home-action-copy {display:flex;flex-direction:column;flex:1;gap:8px;min-width:0;width:100%;font-weight:400;text-transform:none;letter-spacing:normal;}
#app .home-action .home-action-copy strong {padding:0;color:#392846;font-size:18px;font-weight:750;line-height:1.3;}
#app .home-action .home-action-copy small {display:block;max-width:none;overflow:visible;margin:0;color:#817589;font-size:13px;line-height:1.6;-webkit-line-clamp:unset;}
#app .home-action .home-action-cta {display:flex;align-items:center;gap:10px;margin-top:auto;padding-top:12px;color:#6b4783;font-size:12px;font-weight:750;line-height:1.4;}
#app .home-action .home-action-cta>span {margin-left:auto;font-size:18px;}
#app .home-action.primary {grid-column:1/-1;flex-direction:row;align-items:center;gap:22px;min-height:180px;padding:30px;border-color:#e6c8b9;background:#fff7f1;}
#app .home-action.primary:hover {background:#fff2e8;border-color:#d8a286;}
#app .home-action.primary .home-action-icon {flex-basis:62px;width:62px;height:62px;border-radius:18px;background:#fff;color:#d65b27;border:1px solid #f2ddcf;}
#app .home-action.primary .home-action-icon svg {width:30px;height:30px;}
#app .home-action.primary .home-action-copy strong {font-size:25px;letter-spacing:-.65px;}
#app .home-action.primary .home-action-copy small {font-size:14px;}
#app .home-action.primary .home-action-cta {justify-content:flex-start;margin-top:2px;color:#a54825;}
#app .home-action.primary .home-action-cta>span {margin-left:0;}
.home-publish-note {display:flex;align-items:center;gap:7px;margin:14px 0 0;color:#85738a;font-size:12px;line-height:1.6;}
.home-publish-note>span {color:#886a9d;}
.home-utilities {margin:30px 0 24px;padding-top:24px;border-top:1px solid #e6e0e9;}
.home-tools {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;}
#app .home-tool {display:flex;align-items:center;gap:12px;min-width:0;min-height:76px;padding:15px;text-align:left;border:1px solid #e6e0e9;border-radius:12px;background:#faf8fc;color:#4f385f;font:inherit;cursor:pointer;}
#app .home-tool:hover {background:#f2edf7;border-color:#cdbbd8;}
.home-tool-icon {display:grid;place-items:center;flex:0 0 28px;color:#856d97;}
.home-tool>span:not(.home-tool-icon):not(.home-tool-arrow) {min-width:0;}
.home-tool strong {display:block;font-size:13px;font-weight:750;line-height:1.4;}
.home-tool small {display:block;margin-top:4px;color:#95869e;font-size:11px;line-height:1.4;}
.home-tool-arrow {margin-left:auto;color:#a390ae;font-size:22px;}
#app .home-help-row {margin:0;padding:18px 20px;background:#f1edf6;border-radius:13px;gap:16px;}
#app .home-help-row strong {font-size:14px;color:#4e375f;}
#app .home-help-row span {font-size:12px;line-height:1.6;color:#8c7999;}
#app .home-help-row .btn {display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:44px;padding:10px 16px;white-space:nowrap;font-family:'Epilogue',Arial,sans-serif;font-weight:650;text-transform:none;}
#app .home-help-row .btn>span {display:inline;margin:0;color:inherit;}
@media(min-width:900px) {
  #app .home-actions.has-inbox {grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media(max-width:899px) and (min-width:641px) {
  #app .home-actions.has-inbox .home-action:last-child {grid-column:1/-1;min-height:145px;}
}
@media(max-width:640px) {
  #app .home-welcome {padding:17px;gap:12px;margin-bottom:14px;}
  #app .home-welcome-icon {flex-basis:42px;height:42px;border-radius:12px;}
  #app .home-welcome h1 {font-size:23px;}
  #app .home-welcome p {font-size:12px;}
  #app .hub-shortcuts {margin-bottom:22px;}
  .home-section-heading h2 {font-size:20px;}
  #app .home-actions {grid-template-columns:1fr;gap:10px;}
  #app .home-action {flex-direction:row;align-items:flex-start;gap:14px;min-height:130px;padding:18px;}
  #app .home-action .home-action-copy strong {font-size:16px;}
  #app .home-action .home-action-copy small {font-size:12px;}
  #app .home-action.primary {min-height:166px;padding:21px 18px;gap:14px;}
  #app .home-action.primary .home-action-icon {flex-basis:44px;width:44px;height:44px;border-radius:13px;}
  #app .home-action.primary .home-action-icon svg {width:25px;height:25px;}
  #app .home-action.primary .home-action-copy strong {font-size:21px;}
  #app .home-action.primary .home-action-copy small {font-size:13px;}
  .home-utilities {margin-top:24px;padding-top:22px;}
  .home-tools {grid-template-columns:1fr;gap:8px;}
  #app .home-tool {min-height:67px;padding:13px 15px;}
  #app .home-help-row {padding:16px;flex-direction:row;align-items:center;}
}
@media(max-width:380px) {
  #app .home-welcome-icon {display:none;}
  #app .home-help-row {flex-direction:column;align-items:flex-start;}
  #app .home-help-row .btn {width:100%;}
}
@media(prefers-reduced-motion:reduce) {
  #app .home-action {transition:none;}
}
