:root{--bl-font:'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;--bl-mono:ui-monospace, 'Cascadia Mono', Consolas, monospace;--bl-serif:Georgia, 'Times New Roman', serif;--bl-radius:8px;--bl-radius-card:14px;--bl-radius-pane:18px;--bl-radius-block:20px;--bl-radius-pill:999px;--bl-block-w:400px;--bl-bg:#0B0B0C;--bl-surface:#141416;--bl-header:#141416;--bl-soft:#1C1C20;--bl-text:#F5F5F7;--bl-muted:#9A9AA3;--bl-faint:#80808A;--bl-accent:#5B9BFF;--bl-border:#27272C;--bl-border-2:#3A3A42;--bl-focus:#5B9BFF;--bl-primary:#1160EE;--bl-primary-hover:#2A74FF;--bl-on-primary:#FFFFFF;--bl-good:#22C55E;--bl-caution:#E0B04A;--bl-alert:#EF6F62;--bl-navy:#0D1B36;--bl-navy-border:#2F6BFF;--bl-navy-text:#B7CCF5;--bl-navy-kicker:#8FB4FF;--bl-logo-main:#A6B7CB;--bl-logo-second:#EEF3FA;--bl-logo-word:#F7FAFF;--bl-logo-word-2:#A6B7CB;--bl-shadow-card:0 1px 2px rgba(0,0,0,.4);--bl-shadow-pop:0 8px 24px rgba(0,0,0,.45);--bl-hero:none;color-scheme:dark}html[data-theme="dark"]{--bl-bg:#0B0B0C;--bl-surface:#141416;--bl-header:#141416;--bl-soft:#1C1C20;--bl-text:#F5F5F7;--bl-muted:#9A9AA3;--bl-faint:#80808A;--bl-accent:#5B9BFF;--bl-border:#27272C;--bl-border-2:#3A3A42;--bl-focus:#5B9BFF;--bl-primary:#1160EE;--bl-primary-hover:#2A74FF;--bl-on-primary:#FFFFFF;--bl-good:#22C55E;--bl-caution:#E0B04A;--bl-alert:#EF6F62;--bl-navy:#0D1B36;--bl-navy-border:#2F6BFF;--bl-navy-text:#B7CCF5;--bl-navy-kicker:#8FB4FF;--bl-logo-main:#A6B7CB;--bl-logo-second:#EEF3FA;--bl-logo-word:#F7FAFF;--bl-logo-word-2:#A6B7CB;--bl-shadow-card:0 1px 2px rgba(0,0,0,.4);--bl-shadow-pop:0 8px 24px rgba(0,0,0,.45);--bl-hero:none;color-scheme:dark}html[data-theme="light"]{--bl-bg:#F5F5F7;--bl-surface:#FFFFFF;--bl-header:#FFFFFF;--bl-soft:#F0F1F5;--bl-text:#111114;--bl-muted:#6B6B75;--bl-faint:#767680;--bl-accent:#1160EE;--bl-border:#E3E4EA;--bl-border-2:#C9CBD4;--bl-focus:#1160EE;--bl-primary:#1160EE;--bl-primary-hover:#0E52CC;--bl-on-primary:#FFFFFF;--bl-good:#15803D;--bl-caution:#A16207;--bl-alert:#C93C3C;--bl-navy:#0D1B36;--bl-navy-border:#2F6BFF;--bl-navy-text:#B7CCF5;--bl-navy-kicker:#8FB4FF;--bl-logo-main:#253753;--bl-logo-second:#A6B7CB;--bl-logo-word:#172743;--bl-logo-word-2:#3E5372;--bl-shadow-card:0 1px 2px rgba(17,17,20,.05), 0 10px 30px -18px rgba(17,17,20,.25);--bl-shadow-pop:0 12px 36px -12px rgba(17,17,20,.28);--bl-hero:none;color-scheme:light}
:root,html[data-theme]{--ink:var(--bl-text);--ink-2:var(--bl-muted);--muted:var(--bl-muted);--faint:var(--bl-faint);
  --surface:var(--bl-surface);--bg:var(--bl-bg);--line:var(--bl-border);--line-2:var(--bl-border-2);--accent:var(--bl-accent)}
html{-webkit-text-size-adjust:100%}
html,body{height:100%;margin:0;background:var(--bl-bg);color:var(--bl-text)}
body{font:400 15px/1.5 var(--bl-font);-webkit-font-smoothing:antialiased}
a{color:inherit}
.serif{font-family:var(--bl-serif);font-weight:500}
/* The shelf: BaseLoom's locked interface (Dev, 2026-09-24). Shared by the website and the hub.
   Colours, type and radii are the --bl-* tokens from kit/design.py. Rules: docs/design/UI_UX_STANDARD.md.
   Every class starts with sh- so nothing here collides with Streamlit or older page styles. */

.sh-root{display:flex;flex-direction:column;height:100vh;height:100dvh;background:var(--bl-bg);color:var(--bl-text);font:15px/1.5 var(--bl-font);overflow:hidden;-webkit-font-smoothing:antialiased;text-align:left}
.sh-root *,.sh-root *:before,.sh-root *:after{box-sizing:border-box}
.sh-root.sh-fixed{position:fixed;inset:0;z-index:999990}
.sh-root.sh-flow{height:auto;min-height:0;overflow:visible}
.sh-root [hidden]{display:none!important}
.sh-root :focus-visible{outline:2px solid var(--bl-focus);outline-offset:2px}
.sh-root h1,.sh-root h2,.sh-root h3{color:inherit;font-family:var(--bl-font)}
.sh-root p{margin:0}
.sh-skip{position:absolute;left:-9999px;top:8px;z-index:10;background:var(--bl-surface);color:var(--bl-text);padding:8px 14px;border-radius:var(--bl-radius-pill)}
.sh-skip:focus{left:12px}

/* ---------------------------------------------------------------- header: search left, logo and tagline centre, action right */
.sh-top{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:16px;padding:12px 28px 4px;background:var(--bl-header);flex:0 0 auto;position:relative}
.sh-top.sh-solo{padding-bottom:12px;border-bottom:1px solid var(--bl-border)}
.sh-top>.sh-search,.sh-top>.sh-left{grid-column:1;justify-self:start}
.sh-top>.sh-brand{grid-column:2;justify-self:center}
.sh-brand{display:flex;flex-direction:column;align-items:center;gap:1px;min-width:0}
.sh-tag{font-size:12px;line-height:1.25;font-weight:500;color:var(--bl-muted);letter-spacing:.015em;white-space:nowrap;margin:0;text-align:center}
.sh-top>.sh-cta,.sh-top>.sh-right{grid-column:3;justify-self:end}
.sh-left,.sh-right{display:flex;align-items:center;gap:8px;min-width:0}
.sh-logo{display:flex;align-items:center;justify-self:center;text-decoration:none;padding:4px 8px;border-radius:var(--bl-radius)}
.sh-logo svg{height:24px;width:auto;display:block}
.sh-logo:hover{background:var(--bl-soft)}
.sh-search{display:flex;align-items:center;gap:8px;border:1px solid var(--bl-border-2);border-radius:var(--bl-radius-pill);padding:8px 16px;background:var(--bl-surface);width:122px;height:41px;cursor:text;overflow:hidden;transition:width .2s,border-color .2s;color:var(--bl-text);text-decoration:none;margin:0}
.sh-search svg{width:16px;height:16px;flex:0 0 auto;color:var(--bl-muted)}
.sh-mag{font-style:normal;font-size:15px;line-height:1;flex:0 0 auto}
.sh-search:hover{background:var(--bl-soft)}
.sh-search:focus-within,.sh-search.has{width:min(360px,100%);border-color:var(--bl-accent)}
.sh-search input{border:0;background:transparent;font:inherit;font-weight:600;flex:1;outline:0;color:var(--bl-text);min-width:0;padding:0;margin:0;box-shadow:none;height:auto}
.sh-search input::placeholder{color:var(--bl-text);font-weight:600;opacity:1}
.sh-search:focus-within input::placeholder{color:var(--bl-muted);font-weight:400}
.sh-search input::-webkit-search-cancel-button{display:none}
a.sh-search{cursor:pointer;font-weight:600;width:auto}
a.sh-search:focus-within,a.sh-search.has{width:auto}

/* ---------------------------------------------------------------- buttons: pills; one primary per screen */
.sh-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border-radius:var(--bl-radius-pill);padding:10px 20px;font:600 15px/1.2 var(--bl-font);border:1px solid var(--bl-border-2);background:var(--bl-surface);color:var(--bl-text);text-decoration:none;cursor:pointer;white-space:nowrap}
.sh-btn:hover{background:var(--bl-soft);color:var(--bl-text)}
.sh-btn svg{width:16px;height:16px}
.sh-btn-p{background:var(--bl-primary);color:var(--bl-on-primary);border-color:var(--bl-primary)}
.sh-btn-p:hover{background:var(--bl-primary-hover);border-color:var(--bl-primary-hover);color:var(--bl-on-primary)}
.sh-btn-s{padding:7px 14px;font-size:13.5px}
.sh-btn[aria-disabled="true"],.sh-btn:disabled{opacity:.35;pointer-events:none}

/* ---------------------------------------------------------------- desk words */
.sh-tabs{display:flex;justify-content:safe center;gap:2px;padding:4px 28px 10px;background:var(--bl-header);border-bottom:1px solid var(--bl-border);overflow-x:auto;scrollbar-width:none;flex:0 0 auto}
.sh-tabs::-webkit-scrollbar{display:none}
.sh-tab{flex:0 0 auto;border:0;background:transparent;font:inherit;font-size:15px;color:var(--bl-muted);padding:8px 10px;border-radius:var(--bl-radius);cursor:pointer;white-space:nowrap;position:relative;text-decoration:none}
.sh-tab:hover{color:var(--bl-text);background:var(--bl-soft)}
.sh-tab.on{color:var(--bl-text);font-weight:600}
.sh-tab.on:after{content:"";position:absolute;left:10px;right:10px;bottom:1px;height:2px;border-radius:2px;background:var(--bl-primary)}
.sh-tab.sh-all{color:var(--bl-accent);margin-left:6px}
.sh-tab.sh-all+.sh-all{margin-left:0}

/* ---------------------------------------------------------------- the stage and the row head */
.sh-stage{flex:1 1 auto;min-height:0;position:relative;display:flex;flex-direction:column}
.sh-stage.sh-scroll{overflow-y:auto;display:block}
.sh-head{display:flex;flex-direction:column;align-items:center;text-align:center;padding:16px 28px 8px;flex:0 0 auto}
.sh-head h1{font-size:28px;margin:0;letter-spacing:-.02em;line-height:1.15;font-weight:700}
.sh-head h1 small{font-size:14px;color:var(--bl-muted);font-weight:500;margin-left:10px;letter-spacing:0}
.sh-head p{margin:3px 0 0;color:var(--bl-muted);font-size:14px;max-width:900px}
.sh-probs{display:inline-flex;border:1px solid var(--bl-border);border-radius:var(--bl-radius-pill);padding:3px;margin-top:10px;background:var(--bl-surface);max-width:100%}
.sh-probs a,.sh-probs button{border:0;background:transparent;font:inherit;font-size:13px;color:var(--bl-muted);padding:5px 13px;border-radius:var(--bl-radius-pill);cursor:pointer;white-space:nowrap;text-decoration:none}
.sh-probs a:hover,.sh-probs button:hover{color:var(--bl-text)}
.sh-probs .on{color:var(--bl-text);background:var(--bl-soft)}
.sh-outs{margin-top:12px;padding:4px}
.sh-outs button{font-size:14px;padding:7px 16px;font-weight:500;display:inline-flex;align-items:baseline;gap:7px}
.sh-outs button small{font-size:12px;color:var(--bl-faint);font-weight:500;font-variant-numeric:tabular-nums}
.sh-outs .on{color:var(--bl-text);background:var(--bl-soft);box-shadow:inset 0 0 0 1px var(--bl-border)}
.sh-outs .on small{color:var(--bl-accent)}

/* ---------------------------------------------------------------- the row: centred, looping, brushed sideways */
.sh-rowwrap{position:relative;flex:1 1 auto;min-height:0;display:flex}
.sh-rail{flex:1 1 auto;min-height:0;display:flex;gap:18px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;padding:6px calc(50% - var(--bl-block-w)/2) 14px;scrollbar-width:none;scroll-behavior:smooth;cursor:grab;overscroll-behavior-x:contain}
.sh-rail::-webkit-scrollbar{display:none}
.sh-rail.dragging{cursor:grabbing;user-select:none}
.sh-rail.static{justify-content:safe center;scroll-snap-type:none;padding:6px 28px 14px;cursor:default}
.sh-rail.static>*{opacity:1;transform:none}
.sh-paddle{position:absolute;top:50%;transform:translateY(-60%);width:56px;height:56px;border-radius:999px;background:var(--bl-surface);border:1.5px solid var(--bl-border-2);color:var(--bl-text);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:3;box-shadow:var(--bl-shadow-pop);padding:0;transition:transform .12s}
.sh-paddle svg{width:24px;height:24px}
.sh-paddle.sh-l{left:16px}
.sh-paddle.sh-r{right:16px}
.sh-paddle:hover{border-color:var(--bl-accent);color:var(--bl-accent);transform:translateY(-60%) scale(1.06)}
html.no-js .sh-paddle,html.no-js .sh-scrub{display:none}

/* ---------------------------------------------------------------- the block: photo, icon, figure, name */
.sh-block{scroll-snap-align:center;flex:0 0 var(--bl-block-w);height:100%;background:var(--bl-surface);border:1px solid var(--bl-border);border-radius:var(--bl-radius-block);padding:0;cursor:pointer;display:flex;flex-direction:column;text-align:center;overflow:hidden;opacity:.62;transform:scale(.975);transition:opacity .25s,transform .25s,border-color .2s;color:var(--bl-text);text-decoration:none;--ink:hsl(var(--hue,214) 48% 64%)}
html[data-theme="light"] .sh-block,html[data-theme="light"] .sh-pane{--ink:hsl(var(--hue,214) 45% 38%)}
.sh-block.is-centre,.sh-block:hover,.sh-block:focus-visible,html.no-js .sh-block{opacity:1;transform:none;border-color:var(--bl-border-2)}
.sh-block:hover{color:var(--bl-text)}
.sh-ph{position:relative;flex:1 1 0;min-height:72px;overflow:hidden;background:var(--bl-soft)}
.sh-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;filter:grayscale(.6) contrast(1.06) brightness(.74);transition:filter .4s,transform .8s;max-width:none}
.sh-ph:before{content:"";position:absolute;inset:0;z-index:1;background:#1160EE;mix-blend-mode:soft-light;opacity:.4;pointer-events:none}
.sh-ph:after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,0) 48%,var(--bl-surface) 100%);pointer-events:none}
.sh-block.is-centre .sh-ph img,.sh-block:hover .sh-ph img,.sh-pane .sh-ph img,.sh-band .sh-ph img{filter:grayscale(.15) contrast(1.04) brightness(.9);transform:scale(1.03)}
html[data-theme="light"] .sh-ph img{filter:grayscale(.55) contrast(1.02) brightness(1.02)}
html[data-theme="light"] .sh-block.is-centre .sh-ph img,html[data-theme="light"] .sh-block:hover .sh-ph img,html[data-theme="light"] .sh-pane .sh-ph img,html[data-theme="light"] .sh-band .sh-ph img{filter:grayscale(.1) brightness(1.02)}
html[data-theme="light"] .sh-ph:before{opacity:.22}
.sh-bd{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;padding:0 22px 18px;position:relative;z-index:2}
.sh-ic{width:48px;height:48px;margin-top:-24px;border-radius:999px;border:1px solid var(--bl-border-2);display:flex;align-items:center;justify-content:center;color:var(--ink);background:var(--bl-surface);box-shadow:0 6px 18px rgba(0,0,0,.35);flex:0 0 auto}
.sh-ic svg{width:22px;height:22px}
.sh-k{display:block;font:11px/1.5 var(--bl-mono);text-transform:uppercase;letter-spacing:.08em;color:var(--bl-muted);margin-top:10px}
.sh-rail:not(.sh-show-desk) .sh-kd{display:none}
/* the outcome first, in the accent; the desk after it, cut short when the block is narrow */
.sh-block .sh-k{display:flex;white-space:nowrap;min-width:0}
.sh-block .sh-kp{order:-1;flex:none;color:var(--bl-accent)}
.sh-block .sh-kd{overflow:hidden;text-overflow:ellipsis;min-width:0}
.sh-rail.sh-show-desk .sh-kp:after{content:"\B7 ";margin:0 .6em;color:var(--bl-faint)}
.sh-k [data-desk]{cursor:pointer}
.sh-k [data-desk]:hover{color:var(--bl-accent)}
.sh-v{font-size:44px;font-weight:600;letter-spacing:-.025em;line-height:1;font-variant-numeric:tabular-nums;margin-top:10px}
.sh-v.alert{color:var(--bl-alert)}
.sh-v.good{color:var(--bl-good)}
.sh-v.accent{color:var(--bl-accent)}
.sh-l{font-size:13px;color:var(--bl-muted);margin:6px 0 0}
.sh-block h3{margin:14px 0 4px;font-size:19px;letter-spacing:-.01em;line-height:1.25;font-weight:700}
.sh-block .sh-s{margin:0;color:var(--bl-muted);font-size:13.5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sh-foot{margin-top:12px;font-size:13px;color:var(--bl-muted)}
.sh-foot b{color:var(--bl-text);font-weight:600}
.sh-dot{display:inline-flex;align-items:center;gap:6px;margin-left:10px}
.sh-dot:before{content:"";width:7px;height:7px;border-radius:999px;background:var(--bl-good);display:inline-block}

/* navy text blocks: the site's own doorways (partners, trust, start) */
.sh-block.sh-text{background:var(--bl-navy);color:#fff;border-color:var(--bl-navy-border)}
.sh-block.sh-text:hover{color:#fff}
.sh-text .sh-k{color:var(--bl-navy-kicker)}
.sh-block.sh-text .sh-ph img{filter:grayscale(1) contrast(1.05) brightness(.8)!important}
.sh-text .sh-ph:before{background:#2F6BFF;mix-blend-mode:color;opacity:.55}
.sh-text .sh-ph:after{background:linear-gradient(180deg,rgba(13,27,54,.1) 40%,var(--bl-navy) 100%)}
.sh-text h3{font-size:26px;line-height:1.12;letter-spacing:-.02em;margin:10px 0}
.sh-text p{color:var(--bl-navy-text);margin:0 0 16px;font-size:14.5px}
.sh-text .sh-btn{background:#fff;border-color:#fff;color:#0D1B36}
.sh-text .sh-ic{color:var(--bl-navy-kicker);border-color:var(--bl-navy-border);background:#10224a}

/* desk spines in the all-tools view */
.sh-spine{scroll-snap-align:center;flex:0 0 112px;height:100%;background:var(--bl-soft);color:var(--bl-text);border:1px solid var(--bl-border);border-radius:var(--bl-radius-block);cursor:pointer;display:flex;flex-direction:column;justify-content:space-between;align-items:center;padding:20px 16px;text-decoration:none}
.sh-spine b{writing-mode:vertical-rl;transform:rotate(180deg);font-size:26px;letter-spacing:-.01em;line-height:1.1;font-weight:700;max-height:100%;overflow:hidden;text-overflow:ellipsis}
.sh-spine span{font:11px var(--bl-mono);color:var(--bl-muted);text-transform:uppercase;letter-spacing:.08em}
.sh-spine:hover{background:var(--bl-primary);color:#fff;border-color:var(--bl-primary)}
.sh-spine:hover span{color:#D6E4FF}

/* ---------------------------------------------------------------- the slider under the row */
.sh-scrub{flex:0 0 auto;padding:0 28px 14px;display:grid;grid-template-columns:44px 1fr 44px;column-gap:16px;align-items:center}
.sh-count{font:600 13px var(--bl-mono);color:var(--bl-muted);text-align:center}
.sh-labels{display:flex;gap:2px;height:20px;margin-bottom:8px}
.sh-labels button{flex:1;border:0;background:transparent;font:600 12px/1 var(--bl-font);color:var(--bl-muted);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 4px;border-radius:6px;min-width:0}
.sh-labels button.on{color:var(--bl-accent);background:var(--bl-soft)}
.sh-labels button:hover{color:var(--bl-text)}
.sh-labels i{flex:1}
.sh-track{position:relative;height:8px;border-radius:999px;background:var(--bl-soft);cursor:pointer;display:flex;overflow:visible}
.sh-track s{flex:1;border-right:2px solid var(--bl-bg);text-decoration:none}
.sh-track s:last-of-type{border-right:0}
.sh-thumb{position:absolute;top:-7px;height:22px;min-width:60px;border-radius:999px;background:var(--bl-primary);box-shadow:0 4px 14px rgba(17,96,238,.45);cursor:grab}
.sh-thumb.dragging{cursor:grabbing}
.sh-empty{padding:30px 28px;color:var(--bl-muted);text-align:center}

/* ---------------------------------------------------------------- the opened view: Previous, Back, Next; three panes */
.sh-opened{position:absolute;inset:0;background:var(--bl-bg);padding:14px 28px 18px;display:flex;flex-direction:column;overflow:auto;z-index:4;align-items:center;text-align:center}
.sh-opened.sh-page{position:relative;inset:auto;flex:1 1 auto;min-height:0;z-index:auto}
.sh-obar{width:100%;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px}
.sh-obar>:first-child{justify-self:start}
.sh-obar>:last-child{justify-self:end}
.sh-opened>.sh-k{margin-top:10px}
.sh-opened h1,.sh-opened h2{font-size:34px;margin:4px 0 2px;letter-spacing:-.02em;line-height:1.1;font-weight:700}
.sh-lead{color:var(--bl-muted);font-size:15px;margin:0 0 14px;max-width:900px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sh-grid{display:grid;grid-template-columns:1fr 1.15fr 1fr;gap:18px;flex:1 1 auto;min-height:0;width:100%;text-align:left}
.sh-pane{background:var(--bl-surface);border:1px solid var(--bl-border);border-radius:var(--bl-radius-pane);padding:22px 24px;display:flex;flex-direction:column;min-height:0;overflow:hidden;--ink:hsl(var(--hue,214) 48% 64%)}
.sh-pane>.sh-k{margin:0}
.sh-pane b.sh-h{display:block;font-size:11px;color:var(--bl-muted);text-transform:uppercase;letter-spacing:.08em;margin:16px 0 4px;font-weight:700}
.sh-pane .sh-m{margin:0;font-size:13.5px;color:var(--bl-text);line-height:1.45}
.sh-pane p.sh-m,.sh-evl,.sh-pane p.sh-c3{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.sh-pane p.sh-c3{-webkit-line-clamp:3}
.sh-pane .sh-st{margin-bottom:6px}
.sh-pane .sh-st i{font-style:normal;font-weight:600;color:var(--bl-accent);margin-right:8px}
.sh-evl{margin:12px 0 0;background:var(--bl-soft);border:1px solid var(--bl-border);border-left:3px solid var(--bl-accent);border-radius:var(--bl-radius);padding:10px 12px;font:12.5px/1.55 var(--bl-mono);color:var(--bl-text);word-break:break-word}
.sh-pane.sh-mid{padding:0;text-align:center}
.sh-pane.sh-mid .sh-ph{min-height:150px}
.sh-pane.sh-mid .sh-bd{padding:0 22px 20px}
.sh-pane .sh-v{font-size:54px;margin-top:12px}
.sh-pane .sh-l{font-size:14px;margin:8px 0 14px}
.sh-cr{position:absolute;top:10px;right:10px;z-index:3;font-size:11px;color:#fff;background:rgba(0,0,0,.5);padding:2px 9px;border-radius:999px;text-decoration:none}
.sh-cr:hover{background:rgba(0,0,0,.75);color:#fff}
.sh-mini{width:100%;border-collapse:collapse;font-size:12px;table-layout:fixed;text-align:left}
.sh-mini th{color:var(--bl-muted);font-weight:500;padding:4px 6px 4px 0;border-bottom:1px solid var(--bl-border-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sh-mini td{padding:5px 6px 5px 0;border-bottom:1px solid var(--bl-border);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--bl-text)}
.sh-pager{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px;font-size:12px;color:var(--bl-muted)}
.sh-pager button{border:1px solid var(--bl-border-2);background:var(--bl-surface);color:var(--bl-text);border-radius:999px;width:28px;height:28px;cursor:pointer;font:inherit;padding:0}
.sh-pager button:disabled{opacity:.35;cursor:default}
.sh-pane.sh-side p{margin:0 0 12px;font-size:14px}
.sh-pane.sh-side>b,.sh-pane.sh-side .sh-f>b{display:block;font-size:11px;color:var(--bl-muted);text-transform:uppercase;letter-spacing:.08em;margin-bottom:2px}
.sh-pane .sh-row{margin-top:auto;display:flex;gap:8px;flex-wrap:wrap}
.sh-pane ul.sh-list{list-style:none;margin:6px 0 0;padding:0}
.sh-pane ul.sh-list li{padding:8px 0;border-bottom:1px solid var(--bl-border);font-size:13.5px}
.sh-pane ul.sh-list li b{display:block;font-size:14px;color:var(--bl-text)}
.sh-pane ul.sh-list li span{color:var(--bl-muted);font-size:12.5px}
.sh-pane ul.sh-list a{color:var(--bl-text);text-decoration:none}
.sh-pane ul.sh-list a:hover b{color:var(--bl-accent)}

/* ---------------------------------------------------------------- forms inside panes */
.sh-form label{display:block;font-size:12px;font-weight:600;color:var(--bl-muted);margin:10px 0 4px}
.sh-form input,.sh-form select,.sh-form textarea{width:100%;background:var(--bl-bg);color:var(--bl-text);border:1px solid var(--bl-border-2);border-radius:var(--bl-radius);padding:9px 11px;font:14px var(--bl-font)}
.sh-form input:focus,.sh-form select:focus,.sh-form textarea:focus{outline:2px solid var(--bl-focus);outline-offset:0;border-color:transparent}
.sh-form .sh-two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sh-form .sh-check{display:flex;gap:8px;align-items:flex-start;font-weight:400;color:var(--bl-text);font-size:12.5px;margin-top:12px}
.sh-form .sh-check input{width:auto;margin-top:3px}
.sh-form .sh-err{color:var(--bl-alert);font-size:13px;margin:8px 0 0}
.sh-trap{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

/* ---------------------------------------------------------------- reading pages (legal texts): the stage scrolls */
.sh-read{max-width:780px;margin:0 auto;padding:30px 28px 64px}
.sh-read .sh-k{margin:0 0 6px}
.sh-read h1{font-size:34px;letter-spacing:-.02em;line-height:1.15;margin:0 0 10px;font-weight:700}
.sh-read h2{font-size:21px;margin:30px 0 8px;letter-spacing:-.01em}
.sh-read h3{font-size:17px;margin:22px 0 6px}
.sh-read p,.sh-read li{font-size:15px;line-height:1.7;color:var(--bl-text)}
.sh-read p{margin:0 0 12px}
.sh-read ul,.sh-read ol{padding-left:22px;margin:0 0 12px}
.sh-read a{color:var(--bl-accent)}
.sh-read code{font:13px var(--bl-mono);background:var(--bl-soft);padding:1px 5px;border-radius:5px}
.sh-read table{width:100%;border-collapse:collapse;margin:12px 0 18px;font-size:13.5px}
.sh-read th,.sh-read td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--bl-border);vertical-align:top}
.sh-read th{color:var(--bl-muted);font-weight:600}
.sh-read hr{border:0;border-top:1px solid var(--bl-border);margin:24px 0}
.sh-read .sh-lede{color:var(--bl-muted);font-size:16px;margin:0 0 20px}

/* ---------------------------------------------------------------- the tool band (Workbench): photo, icon, name */
.sh-band{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;border:1px solid var(--bl-border);border-radius:var(--bl-radius-block);overflow:hidden;background:var(--bl-surface);margin:0 0 18px;--ink:hsl(var(--hue,214) 48% 64%)}
html[data-theme="light"] .sh-band{--ink:hsl(var(--hue,214) 45% 38%)}
.sh-band .sh-ph{height:120px;flex:0 0 auto;width:100%}
.sh-band .sh-bd{padding:0 24px 16px}
.sh-band h1{font-size:26px;margin:8px 0 2px;letter-spacing:-.02em;line-height:1.15;font-weight:700}
.sh-band p{color:var(--bl-muted);font-size:14px;max-width:760px}

/* ---------------------------------------------------------------- footer: switch left, links centre, note right */
.sh-footer{flex:0 0 auto;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:12px;padding:10px 28px;font-size:12px;color:var(--bl-muted);border-top:1px solid var(--bl-border);background:var(--bl-header)}
.sh-footer nav{display:flex;gap:18px;justify-self:center;flex-wrap:wrap;justify-content:center}
.sh-footer a,.sh-footer button{color:var(--bl-muted);background:none;border:0;font:inherit;cursor:pointer;padding:0;text-decoration:none}
.sh-footer a:hover,.sh-footer button:hover{color:var(--bl-text)}
.sh-footer .sh-theme{justify-self:start}
.sh-footer .sh-note{justify-self:end;text-align:right}

/* ---------------------------------------------------------------- sizes */
@media (max-width:1400px){.sh-tab{font-size:14px;padding:8px 7px}.sh-tab.on:after{left:7px;right:7px}}
@media (max-width:1100px){.sh-top>.sh-cta{display:none}}
@media (max-height:780px){
  .sh-block .sh-s{display:none}.sh-block .sh-v{font-size:38px}.sh-text p{font-size:13.5px}
  .sh-opened{padding-top:10px}.sh-opened h1,.sh-opened h2{font-size:28px}.sh-lead{margin-bottom:10px}
  .sh-pane{padding:16px 20px}.sh-pane.sh-mid .sh-ph{min-height:80px}.sh-pane .sh-v{font-size:44px;margin-top:8px}
  .sh-pane .sh-l{margin:6px 0 10px}.sh-pane .sh-st+.sh-st{display:none}.sh-pane .sh-rb{display:none}
  .sh-outs{margin-top:8px}.sh-outs button{font-size:13px;padding:5px 13px}
}
@media (max-width:760px){
  :root{--bl-block-w:86vw}
  .sh-top{padding:10px 16px 2px;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}
  .sh-top.sh-solo{padding-bottom:10px}
  .sh-logo svg{height:22px}
  .sh-tag{font-size:11px;white-space:normal;max-width:210px;text-wrap:balance}
  .sh-search{width:41px;padding:0;justify-content:center;transition:none}
  .sh-search input{width:0;opacity:0;flex:0 0 auto}
  .sh-search:focus-within,.sh-search.has{position:fixed;left:16px;right:16px;top:10px;width:auto;justify-self:stretch;padding:8px 14px;justify-content:flex-start;z-index:5}
  .sh-search:focus-within input,.sh-search.has input{width:auto;opacity:1;flex:1 1 auto}
  a.sh-search,a.sh-search:focus-within,a.sh-search.has{width:41px}
  a.sh-search span{display:none}
  .sh-tabs{justify-content:flex-start;padding:4px 16px 8px}
  .sh-head{padding:12px 16px 8px}.sh-head h1{font-size:22px}
  .sh-probs{flex-wrap:wrap;justify-content:center}
  .sh-outs button{font-size:13px;padding:5px 10px;gap:5px}
  .sh-paddle,.sh-labels{display:none}
  .sh-rail{padding:6px calc(50% - var(--bl-block-w)/2) 12px}
  .sh-scrub{padding:0 16px 12px}
  .sh-block .sh-v{font-size:36px}
  .sh-opened{padding:12px 16px 16px}.sh-grid{grid-template-columns:1fr}
  .sh-opened h1,.sh-opened h2{font-size:26px}.sh-opened .sh-btn{padding:8px 14px;font-size:14px}
  .sh-read{padding:22px 16px 48px}.sh-read h1{font-size:26px}
  .sh-footer{display:flex;justify-content:center;flex-wrap:wrap;gap:10px 16px;padding:10px 16px}
  .sh-footer nav{gap:14px}.sh-footer .sh-note{display:none}
}
@media (prefers-reduced-motion:reduce){.sh-rail{scroll-behavior:auto}.sh-block,.sh-ph img{transition:none}}

/* pages whose stage scrolls: the panes grow with their content instead of clipping it */
.bl-page .sh-opened.sh-page{overflow:visible;flex:0 0 auto}
.bl-page .sh-grid{flex:0 0 auto}
.bl-page .sh-pane{overflow:visible}
.bl-page .sh-pane p.sh-m,.bl-page .sh-pane p.sh-c3,.bl-page .sh-lead{-webkit-line-clamp:unset;display:block}
.bl-page .sh-pane .sh-st+.sh-st,.bl-page .sh-pane .sh-rb{display:block}
.bl-page .sh-pane.sh-mid .sh-ph{min-height:170px;flex:0 0 170px}
.sh-pane .sh-m a,.sh-pane .sh-c3 a,.bl-note a{color:var(--bl-accent)}
.bl-note{max-width:900px;margin:14px auto 0;font-size:13px;color:var(--bl-muted);text-align:center}

/* the apply form inside a pane */
.sh-pane.sh-form{gap:0}
.sh-form .bl-errors{border:1px solid var(--bl-alert);border-radius:var(--bl-radius);padding:10px 12px;margin:0 0 6px;font-size:13px}
.sh-form .bl-errors b{color:var(--bl-alert)}
.sh-form .bl-errors ul{margin:4px 0 0;padding-left:18px}
.sh-form .opt{font-weight:400;color:var(--bl-faint)}
.sh-form .sh-check a{color:var(--bl-accent)}
.sh-form .sh-row{margin-top:14px;align-items:center}
.sh-form .bl-fine{font-size:12px;color:var(--bl-faint)}

/* reading pages: legal texts, the rules, the document list, the result of an application */
.sh-read .bl-actions{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0 0}
.bl-center{text-align:center}
.bl-center .bl-actions{justify-content:center}
.sh-read details{border-bottom:1px solid var(--bl-border);padding:12px 0}
.sh-read summary{cursor:pointer;font-weight:600;font-size:15px}
.sh-read details p{margin:8px 0 0;color:var(--bl-muted)}
.bl-docs{list-style:none;padding:0!important;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.bl-docs li{margin:0}
.bl-docs a{display:block;height:100%;border:1px solid var(--bl-border);border-radius:var(--bl-radius-card);padding:12px 14px;background:var(--bl-surface);text-decoration:none;color:var(--bl-text)}
.bl-docs a:hover{border-color:var(--bl-accent)}
.bl-docs b{display:block;font-size:14px}
.bl-docs span{display:block;font-size:12.5px;color:var(--bl-muted);line-height:1.45;margin-top:2px}
.bl-code{display:flex;align-items:baseline;gap:12px;border:1px solid var(--bl-border-2);border-radius:var(--bl-radius-card);padding:14px 18px;background:var(--bl-surface);margin:8px 0 18px}
.bl-code b{font:600 22px var(--bl-mono);letter-spacing:.04em}
.bl-code span{font-size:12px;color:var(--bl-muted)}
.bl-links div{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:12px;padding:8px 0;border-bottom:1px solid var(--bl-border);font-size:13.5px}
.bl-links code{overflow-wrap:anywhere}

/* the status board: every desk, every app, its own sample run */
.bl-wide{max-width:1240px;margin:0 auto;padding:18px 28px 56px}
.bl-banner{display:flex;gap:14px;align-items:center;border:1px solid var(--bl-border);border-radius:var(--bl-radius-card);background:var(--bl-surface);padding:14px 18px;margin:6px 0 20px}
.bl-banner i{width:12px;height:12px;border-radius:999px;background:var(--bl-good);flex:none}
.bl-banner i.warn{background:var(--bl-caution)}
.bl-banner b{display:block;font-size:16px}
.bl-banner span{font-size:13px;color:var(--bl-muted)}
.bl-board{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:14px}
.bl-desk{border:1px solid var(--bl-border);border-radius:var(--bl-radius-card);background:var(--bl-surface);padding:14px 16px}
.bl-desk h2{font-size:12px;font:11px/1.5 var(--bl-mono);text-transform:uppercase;letter-spacing:.08em;color:var(--bl-muted);margin:0 0 6px}
.bl-desk ul{list-style:none;margin:0;padding:0}
.bl-desk a{display:grid;grid-template-columns:10px minmax(0,1fr) auto;gap:8px;align-items:center;padding:5px 0;font-size:13px;text-decoration:none;color:var(--bl-text);border-top:1px solid var(--bl-border)}
.bl-desk li:first-child a{border-top:0}
.bl-desk a:hover .bl-n{color:var(--bl-accent)}
.bl-desk i{width:7px;height:7px;border-radius:999px;background:var(--bl-good)}
.bl-desk .bad i{background:var(--bl-caution)}
.bl-n{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bl-ms{font:12px var(--bl-mono);color:var(--bl-muted);font-variant-numeric:tabular-nums}
.bl-issue{border:1px solid var(--bl-caution);border-radius:var(--bl-radius-card);padding:12px 16px;margin:10px 0}
.bl-small{font-size:12.5px;color:var(--bl-faint);margin:14px 0 0}

@media (max-width:760px){
  .bl-wide{padding:14px 16px 40px}
  .bl-links div{grid-template-columns:1fr;gap:2px}
  .sh-form .sh-two{grid-template-columns:1fr}
}
