/* Jotikin interface tokens and shared components. Loaded after legacy module styles. */
:root{
 --jotikin-accent:#08745c;
 --jotikin-accent-dark:#075841;
 --jotikin-accent-soft:#e9f5f0;
 --jotikin-brand:#0b352d;
 --jotikin-ink:#1d302c;
 --jotikin-muted:#526861;
 --jotikin-line:#d8e4de;
 --jotikin-surface:#fff;
 --jotikin-canvas:#f5f8f6;
 --jotikin-radius:12px;
 --jotikin-control-radius:10px;
 --jotikin-shadow:0 7px 22px rgba(12,46,36,.055);
 --jotikin-space-1:8px;
 --jotikin-space-2:16px;
 --jotikin-space-3:24px;
 --jotikin-content-width:1180px;
 --nordalith-steel:var(--jotikin-accent);
 --nordalith-copper:var(--jotikin-accent);
 --nordalith-slate:var(--jotikin-brand);
 --nordalith-canvas:var(--jotikin-canvas);
 --nordalith-action-height:44px;
 --nordalith-action-radius:var(--jotikin-control-radius);
 --nordalith-control-height:44px;
 --app-green:var(--jotikin-accent);
 --app-green-dark:var(--jotikin-brand);
 --app-navy:var(--jotikin-brand);
 --app-ink:var(--jotikin-ink);
 --app-green-soft:var(--jotikin-accent-soft);
 --app-bg:var(--jotikin-canvas);
 --app-line:var(--jotikin-line);
 --app-muted:var(--jotikin-muted);
 --app-shadow:var(--jotikin-shadow);
 --app-radius:var(--jotikin-radius);
 --stp-blue:var(--jotikin-accent);
 --stp-navy:var(--jotikin-brand);
 --stp-blue-soft:var(--jotikin-accent-soft);
 --stp-bg:var(--jotikin-canvas);
 --stp-line:var(--jotikin-line);
}
body.stp-app-body,body.stp-signup-body,body.stp-auth-body,body:has(.stp-public-wrap){background:var(--jotikin-canvas);color:var(--jotikin-ink)}
body.stp-app-body .stp-app-sidebar,body.nw-control-body .nw-platform-nav{background:var(--jotikin-brand)}
body.stp-app-body .stp-app-nav-link.is-active,body.nw-control-body .nw-platform-nav nav>a[aria-current=page]{box-shadow:inset 3px 0 0 var(--jotikin-accent);border-left-color:var(--jotikin-accent)}
body.stp-app-body .stp-app-mobile-nav .stp-app-nav-link.is-active{box-shadow:inset 0 3px 0 var(--jotikin-accent);color:var(--jotikin-accent)}
body.stp-app-body .stp-app-hero,body.stp-app-body .stp-app-page-head,body.nw-control-body .nw-control-hero{background:#fff;border-left-color:var(--jotikin-accent);box-shadow:var(--jotikin-shadow)}
body.stp-app-body .stp-app-eyebrow,body.stp-signup-body .stp-signup-eyebrow{color:var(--jotikin-accent-dark)}
body.stp-app-body :is(.stp-app-card,.nw-panel),body.stp-signup-body :is(.stp-signup-panel,.stp-auth-card),.stp-public-quote{border-color:var(--jotikin-line);border-radius:var(--jotikin-radius);box-shadow:var(--jotikin-shadow)}
body.stp-app-body :is(.stp-app-card,.nw-panel) h2,body.stp-signup-body :is(.stp-signup-panel,.stp-auth-card) h2{color:var(--jotikin-brand);font-size:clamp(19px,1.6vw,22px);line-height:1.25}
body.stp-app-body :is(.stp-app-hero,.stp-app-page-head) h1,body.stp-signup-body h1{color:var(--jotikin-brand);line-height:1.15}
body.stp-app-body :is(.stp-app-button,.stp-app-secondary-button),body.stp-signup-body :is(.stp-signup-button,.stp-auth-form button,.stp-signup-form>button),body.nw-control-body :is(.stp-app-button,.stp-app-secondary-button),.stp-public-wrap :is(button,.stp-public-secondary-button){
 align-items:center;border-radius:var(--jotikin-control-radius);display:inline-flex;justify-content:center;min-height:44px;height:auto;line-height:1.25;padding:10px 16px;
}
body.stp-app-body .stp-app-button,body.nw-control-body .stp-app-button,body.stp-signup-body :is(.stp-signup-button,.stp-auth-form button,.stp-signup-form>button),.stp-public-wrap :is(.stp-public-toolbar button,.stp-public-accept button,.stp-public-decision-accept button){background:var(--jotikin-accent);border-color:var(--jotikin-accent);color:#fff}
body.stp-app-body .stp-app-secondary-button,body.nw-control-body .stp-app-secondary-button{background:#fff;border-color:#b8cec3;color:var(--jotikin-accent-dark)!important}
body.stp-app-body :is(.stp-app-button,.stp-app-secondary-button):hover,body.stp-signup-body :is(.stp-signup-button,.stp-auth-form button,.stp-signup-form>button):hover{filter:brightness(.95)}
body.stp-app-body :is(.stp-app-form input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]),.stp-app-form select),body.stp-signup-body :is(.stp-signup-form input:not([type=checkbox]),.stp-signup-form select,.stp-auth-form input:not([type=checkbox])){border-radius:var(--jotikin-control-radius);min-height:44px}
body.stp-app-body :is(.stp-app-card,.nw-panel)+:is(.stp-app-card,.nw-panel){margin-top:20px}
body.nw-control-body .nw-platform-mark{display:grid;place-items:center;width:44px;height:44px;flex:none;border:0;border-radius:10px;background:#fff}
body.nw-control-body .nw-platform-mark img{width:38px;height:38px;display:block}
body.stp-signup-body .stp-signup-mark{background:#fff;border:1px solid var(--jotikin-line);border-radius:10px;overflow:hidden}
body.stp-signup-body .stp-signup-mark img{width:34px;height:34px;display:block}
body.stp-app-body :is(.stp-app-nav-link,.nw-platform-nav nav>a,.stp-app-icon-action) svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
body.stp-app-body .stp-app-icon-action svg{width:20px;height:20px}
body.stp-app-body .nw-empty-state{display:grid;grid-template-columns:44px minmax(0,1fr);align-items:center;gap:14px;margin:10px 0;padding:18px;border:1px dashed #b8d2c5;border-radius:var(--jotikin-radius);background:#f8fcfa;text-align:left}
body.stp-app-body .nw-empty-state-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:11px;background:var(--jotikin-accent-soft);color:var(--jotikin-accent-dark)}
body.stp-app-body .nw-empty-state-icon svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
body.stp-app-body .nw-empty-state strong{display:block;color:var(--jotikin-brand);font-size:15px}
body.stp-app-body .nw-empty-state p{margin:3px 0 0;color:var(--jotikin-muted);font-size:13px}
body.stp-app-body .nw-empty-state a{color:var(--jotikin-accent-dark);font-weight:750;text-decoration:underline}
body.stp-app-body td .nw-empty-state{margin:4px 0}
body.stp-app-body .stp-app-empty{border-color:#b8d2c5;background:#f8fcfa}
body.stp-app-body .stp-app-empty strong{font-size:15px}
body.stp-app-body :focus-visible,body.stp-signup-body :focus-visible,.stp-public-wrap :focus-visible{outline:3px solid var(--jotikin-accent);outline-offset:3px}
.nw-loading-host{position:relative}
.nw-page-skeleton{position:absolute;z-index:20;inset:0;min-height:300px;padding:24px;background:var(--jotikin-canvas);pointer-events:none}
.nw-page-skeleton-inner{max-width:1180px;margin:auto}
.nw-skeleton-bar,.nw-skeleton-card{background:linear-gradient(90deg,#e5eee9 20%,#f5faf7 50%,#e5eee9 80%);background-size:200% 100%;border-radius:10px;animation:nw-skeleton-shimmer 1.6s linear infinite}
.nw-skeleton-bar{height:20px;margin:0 0 14px}
.nw-skeleton-bar.is-title{width:min(300px,65%);height:34px;margin-bottom:26px}
.nw-skeleton-bar.is-short{width:min(420px,75%)}
.nw-skeleton-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:28px}
.nw-skeleton-card{height:120px}
.nw-page-skeleton [role=status]{font-size:13px;color:var(--jotikin-muted);margin:0 0 18px}
@keyframes nw-skeleton-shimmer{to{background-position-x:-200%}}
/* Existing modules use the same accents and surfaces without changing status meaning. */
body.stp-app-body .stp-today-focus{background:linear-gradient(125deg,var(--jotikin-brand),#175541)}
body.stp-app-body .stp-app-metric{border-top-color:var(--jotikin-accent)!important}
body.nw-control-body :is(.nw-metric,.nw-overview-metric,.nw-business-count){border-color:var(--jotikin-line);border-radius:var(--jotikin-radius);box-shadow:var(--jotikin-shadow)}
body.nw-control-body .nw-metric:first-child{background:var(--jotikin-brand)}
body.stp-app-body .nw-toolbox-photo-button{background:var(--jotikin-accent-soft);border-color:#a8c9b9;color:var(--jotikin-accent-dark)}
body.stp-app-body .nw-toolbox-back-bar{display:flex;align-items:center;margin:18px 0 20px}
body.stp-app-body .nw-toolbox-back{gap:10px;font-weight:750;box-shadow:0 5px 14px rgba(8,116,92,.18)}
body.stp-app-body .nw-toolbox-back svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
body.stp-app-body .nw-toolbox-photo-picker:hover .nw-toolbox-photo-button{background:#d8eee3}
body.stp-app-body .nw-toolbox-photo-picker:focus-within .nw-toolbox-photo-button{outline-color:var(--jotikin-accent)}
body.stp-signup-body :is(.stp-auth-help,.stp-signup-agreements a){color:var(--jotikin-accent-dark)}
body.stp-app-body .stp-app-toast:not([data-tone=warning]){border-left-color:var(--jotikin-accent)}
body.stp-app-body .stp-app-toast:not([data-tone=warning]) .stp-app-toast-mark{color:var(--jotikin-accent-dark);background:var(--jotikin-accent-soft)}
body.stp-app-body .nw-toolbox-photos .nw-empty-state{grid-column:1/-1}
/* Shared hierarchy, alignment and controls across the owner and platform modules. */
body.stp-app-body :is(.stp-app-main,.nw-control-content){min-width:0}
body.stp-app-body :is(.stp-app-main,.nw-control-content) :is(h1,h2,h3){overflow-wrap:anywhere;text-wrap:balance}
body.stp-app-body :is(.stp-app-main,.nw-control-content) h3{color:var(--jotikin-brand);font-size:clamp(16px,1.3vw,18px);line-height:1.35}
body.stp-app-body :is(.stp-app-card,.nw-panel){min-width:0}
body.stp-app-body :is(.stp-app-form,.nw-actions,.stp-app-list-actions){column-gap:var(--jotikin-space-2)}
body.stp-app-body :is(.stp-app-form,.nw-panel) :is(input:not([type=checkbox]):not([type=radio]),select,textarea){max-width:100%;border-radius:var(--jotikin-control-radius)}
body.stp-app-body :is(.stp-app-main,.nw-control-content) button:not(.stp-app-icon-action),body.stp-app-body :is(.stp-app-main,.nw-control-content) [role=button]{min-height:44px;border-radius:var(--jotikin-control-radius)}
body.stp-app-body :is(.stp-app-main,.nw-control-content) button:disabled{cursor:not-allowed}
body.stp-app-body :is(.stp-app-main,.nw-control-content) :is(svg[data-icon],.stp-app-icon-action svg){stroke-linecap:round;stroke-linejoin:round}
body.stp-app-body :is(.stp-app-main,.nw-control-content) a:not(.stp-app-button):not(.stp-app-secondary-button){text-underline-offset:2px}
body.stp-app-body :is(.stp-training-records,.stp-job-safety-add)>summary,body.stp-app-body .stp-platform-training-actions :is(a,button){color:var(--jotikin-accent-dark)}
body.stp-app-body .stp-training-review-dashboard a.is-active{border-color:var(--jotikin-accent);box-shadow:inset 0 0 0 1px var(--jotikin-accent)}
body.stp-app-body .stp-training-state.is-updated{background:var(--jotikin-accent-soft);color:var(--jotikin-accent-dark)}
body.stp-app-body .stp-training-card{border-top-color:var(--jotikin-accent)}
body.stp-app-body :is(.stp-product-status-form button,.stp-product-picker.is-empty a){color:var(--jotikin-accent-dark)}
body.stp-app-body .stp-platform-owner-card{border-left-color:var(--jotikin-accent)}
body.stp-app-body .stp-app-card.nw-enquiry-share{border-top-color:var(--jotikin-accent)}
body.nw-intake-page .nw-intake-kicker{color:var(--jotikin-accent-dark)}
body.nw-intake-page progress{accent-color:var(--jotikin-accent)}
body.nw-intake-page .nw-intake{width:min(100% - 32px,650px);margin-inline:auto;padding-inline:0}
body.nw-intake-page :is(button,input,textarea,select){border-radius:var(--jotikin-control-radius);max-width:100%}
body.nw-intake-page button{min-height:44px}
body.nw-tutorial-player{background:var(--jotikin-canvas);color:var(--jotikin-ink)}
body.nw-tutorial-player main{max-width:var(--jotikin-content-width);margin-inline:auto}
body.nw-tutorial-player :is(h1,h2){color:var(--jotikin-brand);line-height:1.2}
body.nw-tutorial-player section{border-radius:var(--jotikin-radius);box-shadow:var(--jotikin-shadow)}
body.nw-tutorial-player :focus-visible,body.nw-intake-page :focus-visible,body.nw-payment-page :focus-visible{outline:3px solid var(--jotikin-accent);outline-offset:3px}
body.nw-payment-page{background:var(--jotikin-canvas);color:var(--jotikin-ink)}
body.nw-payment-page main{border-radius:var(--jotikin-radius);box-shadow:var(--jotikin-shadow)}
body.nw-payment-page button{min-height:44px;border-radius:var(--jotikin-control-radius);background:var(--jotikin-accent)}
body.nw-payment-page a{color:var(--jotikin-accent-dark)}
.nw-public-wrap a{color:var(--jotikin-accent-dark)}
.nw-public-wrap button{background:var(--jotikin-accent)}
.nw-calendar-move:focus-visible,.nw-touch-target:focus-visible{outline:3px solid var(--jotikin-accent)!important;outline-offset:3px}
@media(max-width:760px){
 body.stp-app-body .stp-app-main,body.nw-control-body .nw-control-content{padding:18px 16px 32px}
 body.stp-app-body :is(.stp-app-hero,.stp-app-page-head){padding:18px;min-height:0}
 body.stp-app-body :is(.stp-app-hero,.stp-app-page-head) h1,body.stp-signup-body h1{font-size:clamp(24px,6vw,32px)}
 body.stp-app-body :is(.stp-app-card,.nw-panel)+:is(.stp-app-card,.nw-panel){margin-top:16px}
 body.stp-app-body :is(.stp-app-button,.stp-app-secondary-button),body.stp-signup-body :is(.stp-signup-button,.stp-auth-form button,.stp-signup-form>button){min-height:44px}
 .nw-skeleton-grid{grid-template-columns:1fr}
 .nw-skeleton-card{height:66px}
 body.stp-app-body :is(.stp-app-main,.nw-control-content) :is(table,.nw-table){max-width:100%;overflow-x:auto}
 body.stp-app-body :is(.stp-app-main,.nw-control-content) :is(.nw-actions,.stp-app-list-actions){flex-wrap:wrap;align-items:stretch}
 body.stp-app-body :is(.stp-app-main,.nw-control-content) :is(input,select,textarea){min-width:0}
}
@media(max-width:480px){body.stp-app-body .nw-empty-state{grid-template-columns:1fr}body.stp-app-body .nw-empty-state-icon{width:40px;height:40px}body.stp-app-body :is(.stp-app-main,.nw-control-content) :is(.stp-app-card,.nw-panel){padding-inline:max(14px,min(4vw,20px))}body.nw-tutorial-player main{padding-inline:16px}}
@media(prefers-reduced-motion:reduce){.nw-skeleton-bar,.nw-skeleton-card{animation:none}}
@media print{.nw-page-skeleton{display:none!important}body.stp-app-body :is(.stp-app-card,.nw-panel),.stp-public-quote{box-shadow:none}}