/* Interactive catalogue and navigation overrides. */
.ds-header{position:fixed!important;z-index:20;top:22px;left:0;width:100%;padding:0 var(--ds-gutter);background:transparent;border:0;backdrop-filter:none;pointer-events:none}.ds-nav{width:max-content;min-width:620px;max-width:100%;height:62px;margin:0 auto;padding:7px 10px 7px 14px;display:flex;align-items:center;gap:24px;background:rgba(255,253,248,.9);border:1px solid rgba(21,91,90,.09);border-radius:18px;box-shadow:0 14px 34px rgba(17,55,59,.14);backdrop-filter:blur(18px);pointer-events:auto}.ds-nav-links{margin-left:14px;padding-left:22px;display:flex;align-items:center;gap:20px;border-left:1px solid var(--ds-line);color:#436164;font-size:13px}.ds-nav-links a{position:relative}.ds-nav-links a::after{position:absolute;right:100%;bottom:-8px;left:0;height:1.5px;background:var(--ds-primary);content:"";transition:right .2s}.ds-nav-links a:hover::after,.ds-nav-links a:focus-visible::after{right:0}.ds-back{margin-left:auto;color:var(--ds-paper);background:var(--ds-ink);border-color:var(--ds-ink);box-shadow:var(--ds-shadow-sm)}.ds-hero{padding-top:154px}
.ds-patterns{background:#e9f3ef}.component-grid>.component-card{gap:0}.component-message,.tab-panel{margin:13px 0;color:var(--ds-muted);font-size:11px;line-height:1.45}.ds-button:disabled{cursor:wait;opacity:.72}.segmented{width:max-content;display:flex;padding:3px;background:#e4ece8;border-radius:var(--ds-radius-sm)}.segmented button{padding:7px 10px;color:var(--ds-muted);background:transparent;border:0;border-radius:6px;font-size:11px;font-weight:700}.segmented button.is-selected{color:var(--ds-ink);background:var(--ds-paper);box-shadow:0 1px 3px rgba(23,52,58,.12)}.switch{width:max-content;padding:4px;display:flex;align-items:center;gap:8px;color:var(--ds-ink);background:transparent;border:0;font-size:12px;font-weight:700}.switch i{width:34px;height:20px;padding:3px;display:block;background:#bfcfcd;border-radius:20px;transition:background .2s}.switch i::after{width:14px;height:14px;display:block;background:var(--ds-paper);border-radius:50%;content:"";box-shadow:0 1px 2px rgba(23,52,58,.18);transition:transform .2s}.switch[aria-checked="true"] i{background:var(--ds-primary)}.switch[aria-checked="true"] i::after{transform:translateX(14px)}.tabs{display:flex;gap:2px;border-bottom:1px solid var(--ds-line)}.tabs button{padding:7px 9px;color:var(--ds-muted);background:transparent;border:0;border-bottom:2px solid transparent;font-size:11px;font-weight:700}.tabs button[aria-selected="true"]{color:var(--ds-primary);border-bottom-color:var(--ds-primary)}.disclosure{width:100%;padding:10px 0;display:flex;justify-content:space-between;color:var(--ds-ink);background:transparent;border:0;border-top:1px solid var(--ds-line);border-bottom:1px solid var(--ds-line);font-size:12px;font-weight:700;text-align:left}.disclosure b{color:var(--ds-primary);font-size:17px;line-height:.8}.disclosure-panel{padding:10px 0;color:var(--ds-muted);font-size:11px}.menu-demo{position:relative;width:max-content}.menu-panel{position:absolute;z-index:2;top:47px;left:0;width:175px;padding:5px;background:var(--ds-paper);border:1px solid var(--ds-line);border-radius:var(--ds-radius-md);box-shadow:var(--ds-shadow-md)}.menu-panel button{width:100%;padding:8px;color:var(--ds-ink);background:transparent;border:0;border-radius:6px;font-size:11px;text-align:left}.menu-panel button:hover{background:var(--ds-mint)}.progress-demo>div{display:flex;justify-content:space-between;margin-bottom:7px;color:var(--ds-muted);font-size:11px}.progress-demo>div b{color:var(--ds-primary)}.progress-demo button{width:100%;height:7px;padding:0;background:#dbe5e1;border:0;border-radius:8px;overflow:hidden}.progress-demo i{display:block;width:60%;height:100%;background:linear-gradient(90deg,var(--ds-primary),var(--ds-primary-bright));border-radius:8px;transition:width .3s}.toast{position:fixed;z-index:30;right:24px;bottom:24px;width:min(350px,calc(100% - 40px));padding:12px;display:flex;align-items:center;gap:10px;background:var(--ds-paper);border:1px solid var(--ds-line);border-radius:var(--ds-radius-md);box-shadow:var(--ds-shadow-lg);opacity:0;transform:translateY(14px);pointer-events:none;transition:opacity .2s,transform .2s}.toast.is-visible{opacity:1;transform:translateY(0);pointer-events:auto}.toast .ds-mark{width:30px;height:30px;padding:7px 6px;gap:3px}.toast div{display:grid;gap:1px}.toast b{font:700 11px var(--ds-font-display)}.toast small{color:var(--ds-muted);font-size:10px}.toast>button{margin-left:auto;color:var(--ds-muted);background:transparent;border:0;font-size:20px}.toast>button:hover{color:var(--ds-ink)}
@media(max-width:850px){.ds-header{top:14px}.ds-nav{width:100%;min-width:0;height:58px}.ds-nav-links{display:none}.ds-back{margin-left:auto;font-size:11px}.ds-hero{padding-top:126px}}
.ds-nav{padding-right:var(--ds-nav-inset);border-radius:var(--ds-nav-radius)}
.ds-nav .ds-back:hover{color:var(--ds-paper);background:var(--ds-primary);border-color:var(--ds-primary);box-shadow:var(--ds-shadow-md);transform:translateY(-1px)}.ds-nav .ds-back:active{transform:translateY(0)}
.navigation-variants{grid-template-columns:repeat(4,1fr)}
@media(max-width:680px){.navigation-variants{grid-template-columns:1fr}}
.navigation-specimen{padding:18px;background:var(--ds-sand);border:1px solid var(--ds-line);border-radius:var(--ds-radius-lg)}.navigation-specimen-bar{min-height:62px;padding:7px 10px 7px 14px;display:flex;align-items:center;gap:10px;background:rgba(255,253,248,.9);border:1px solid rgba(21,91,90,.09);border-radius:18px;box-shadow:var(--ds-shadow-md)}.navigation-specimen-bar .ds-mark{width:32px;height:32px;padding:8px 6px;gap:3px}.navigation-specimen-bar>b{font:700 16px var(--ds-font-display);letter-spacing:-.05em}.navigation-specimen-links{margin-left:12px;padding-left:14px;color:#436164;border-left:1px solid var(--ds-line);font-size:11px}.navigation-specimen-bar .ds-locale{margin-left:auto}.navigation-specimen-action{padding:8px 10px;color:var(--ds-paper);background:var(--ds-ink);border-radius:var(--ds-radius-sm);font-size:10px;font-weight:700}.navigation-variants{margin-top:13px;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;color:var(--ds-muted);font-size:11px}.navigation-variants span{padding:9px;background:var(--ds-paper);border:1px solid var(--ds-line);border-radius:var(--ds-radius-sm)}.navigation-variants b{display:block;margin-bottom:2px;color:var(--ds-ink);font-size:10px}@media(max-width:680px){.navigation-specimen{padding:10px}.navigation-specimen-links{display:none}.navigation-variants{grid-template-columns:1fr}.navigation-specimen-action{display:none}}
@media(min-width:681px){.navigation-variants{grid-template-columns:repeat(4,1fr)}}