.tdb-ui-page{display:grid;font-family:var(--bf-font-family-sans);gap:1.5rem;color:var(--bf-color-text)}.tdb-ui-page-header{display:grid;gap:.45rem}.tdb-ui-page-header h2,.tdb-ui-section h3,.tdb-ui-card h3,.tdb-ui-card h4{margin:0;color:var(--bf-color-text)}.tdb-ui-page-header h2{font-size:clamp(1.45rem,3vw,2rem)}.tdb-ui-page-header p,.tdb-ui-section>p,.tdb-ui-card p{margin:0;line-height:1.6}.tdb-ui-eyebrow{color:var(--bf-color-text-muted);font-size:.75rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.tdb-ui-section{display:grid;gap:.85rem}.tdb-ui-grid{display:grid;gap:.85rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr))}.tdb-ui-card{display:grid;align-content:start;gap:.55rem;min-width:0;padding:1rem;border:1px solid var(--bf-color-border);border-radius:10px;background:var(--bf-color-surface)}.tdb-ui-card a{color:var(--bf-color-action);font-weight:700}.tdb-ui-card ul,.tdb-ui-card ol,.tdb-ui-section ul,.tdb-ui-section ol{margin:0;padding-left:1.2rem;line-height:1.55}.tdb-ui-status{width:fit-content;display:inline-flex;align-items:center;min-height:1.65rem;padding:.2rem .5rem;border:1px solid #b9c5d6;border-radius:999px;background:var(--bf-color-surface-subtle);color:var(--bf-color-text-muted);font-size:.72rem;font-weight:800;letter-spacing:.03em;text-transform:uppercase}.tdb-ui-note{display:grid;gap:.45rem;padding:1rem;border-left:4px solid #667085;border-radius:0 8px 8px 0;background:var(--bf-color-surface-subtle)}.tdb-ui-note strong{color:var(--bf-color-text)}.tdb-ui-colors,.tdb-ui-type-samples{display:grid;gap:.75rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr))}.tdb-ui-color-card{display:grid;grid-template-columns:3.25rem minmax(0,1fr);gap:.75rem;align-items:center;padding:.75rem;border:1px solid var(--bf-color-border);border-radius:10px;background:var(--bf-color-surface)}.tdb-ui-color-card div{display:grid;gap:.15rem;min-width:0}.tdb-ui-color-card code{overflow-wrap:anywhere;color:var(--bf-color-text-muted);font-size:.75rem}.tdb-ui-color-card span:last-child{color:var(--bf-color-text-muted);font-size:.8rem}.tdb-ui-swatch{width:3.25rem;aspect-ratio:1;border:1px solid #c9d1dc;border-radius:8px;background:repeating-linear-gradient(135deg,#f2f4f7 0 8px,#fff 8px 16px)}.tdb-ui-swatch.is-application-shell{background:var(--bf-color-application-shell)}.tdb-ui-swatch.is-text-on-shell{background:var(--bf-color-text-on-shell)}.tdb-ui-swatch.is-canvas{background:#f5f7fa}.tdb-ui-swatch.is-surface{background:var(--bf-color-surface)}.tdb-ui-swatch.is-text{background:#101828}.tdb-ui-swatch.is-muted{background:#667085}.tdb-ui-swatch.is-border{background:#d6dbe4}.tdb-ui-type-samples .tdb-ui-card p{color:var(--bf-color-text)}.tdb-ui-type-display p{font-size:clamp(1.75rem,4vw,2.5rem);font-weight:800;line-height:1.1}.tdb-ui-type-heading p{font-size:1.4rem;font-weight:700;line-height:1.2}.tdb-ui-type-body p{font-size:1rem;line-height:1.6}.tdb-ui-type-meta p{color:#667085!important;font-size:.85rem}.tdb-ui-spacing-scale{display:grid;gap:.6rem}.tdb-ui-spacing-token{display:grid;grid-template-columns:4rem minmax(0,1fr);gap:.75rem;align-items:center}.tdb-ui-spacing-token span{display:block;min-height:.6rem;border-radius:999px;background:#98a2b3}.tdb-ui-pattern-stage{min-width:0;overflow:hidden;border:1px dashed #98a2b3;border-radius:var(--bf-radius-large);padding:clamp(var(--bf-space-3),3vw,var(--bf-space-5));background:var(--bf-color-surface-subtle)}.tdb-ui-pattern-stage>:first-child{width:min(100%,var(--bf-page-width-standard));margin-inline:auto}.tdb-ui-pattern-stage.is-wide>:first-child{width:min(100%,var(--bf-page-width-workspace))}.tdb-ui-pattern-demo-grid{display:grid;gap:var(--bf-space-4);grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr))}.tdb-ui-pattern-demo-card{display:grid;gap:var(--bf-space-3);min-width:0;border:1px solid var(--bf-color-border);border-radius:var(--bf-radius-medium);padding:var(--bf-space-4);background:var(--bf-color-surface)}.tdb-ui-pattern-demo-card>h4,.tdb-ui-pattern-demo-card>p{margin:0}.tdb-ui-pattern-demo-card>p{color:var(--bf-color-text-muted);line-height:1.5}.tdb-ui-pattern-mobile-scroll{width:min(100%,25rem);max-height:27rem;margin-inline:auto;overflow-y:auto;border:1px solid var(--bf-color-border);border-radius:var(--bf-radius-large);background:var(--bf-color-surface);box-shadow:var(--bf-shadow-overlay);scrollbar-width:thin}.tdb-ui-pattern-mobile-body{display:grid;gap:var(--bf-space-4);min-height:34rem;padding:var(--bf-space-4)}.tdb-ui-pattern-mobile-body h4,.tdb-ui-pattern-mobile-body p{margin:0}.tdb-ui-pattern-mobile-body p{color:var(--bf-color-text-muted);line-height:1.55}.tdb-ui-pattern-narrow{display:grid;width:min(100%,24rem);gap:var(--bf-space-4);margin-inline:auto;border:1px solid var(--bf-color-border);border-radius:var(--bf-radius-large);padding:var(--bf-space-3);background:var(--bf-color-surface)}.tdb-ui-pattern-code{display:block;overflow-x:auto;border:1px solid var(--bf-color-border);border-radius:var(--bf-radius-small);padding:var(--bf-space-2) var(--bf-space-3);background:var(--bf-color-surface-subtle);color:var(--bf-color-text-muted);font-size:var(--bf-font-size-meta);line-height:1.45;white-space:nowrap}.tdb-ui-preview-register{display:grid;gap:.6rem}.tdb-ui-preview-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1rem;align-items:center;padding:.9rem 1rem;border:1px solid var(--bf-color-border);border-radius:10px;background:var(--bf-color-surface)}.tdb-ui-preview-row div{display:grid;gap:.25rem}.tdb-ui-preview-row h4,.tdb-ui-preview-row p{margin:0}.tdb-ui-preview-row h4{color:var(--bf-color-text)}.tdb-ui-preview-row p{color:var(--bf-color-text-muted);line-height:1.5}.tdb-ui-preview-canvas{display:grid;place-items:start center;padding:clamp(1rem,4vw,2rem);overflow-x:auto;border:1px dashed #98a2b3;border-radius:12px;background:#eef2f6}.tdb-ui-preview-phone{width:min(100%,25rem);display:grid;gap:1rem;padding:1rem;border:1px solid #c8d0dc;border-radius:18px;background:var(--bf-color-surface);box-shadow:0 12px 30px #1018281a}.tdb-ui-preview-heading{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.75rem;align-items:center}.tdb-ui-preview-heading div{display:grid;gap:.1rem}.tdb-ui-preview-heading span{color:var(--bf-color-text-muted);font-size:.78rem}.tdb-ui-preview-heading h4{margin:0;color:var(--bf-color-text);font-size:1.45rem}.tdb-ui-preview-heading button,.tdb-ui-preview-actions button{min-height:2.65rem;border:1px solid #98a2b3;border-radius:9px;background:var(--bf-color-surface);color:var(--bf-color-text);font-weight:800}.tdb-ui-preview-heading button{width:2.65rem;padding:0}.tdb-ui-preview-actions{display:grid;grid-template-columns:1fr 1fr;gap:.65rem}.tdb-ui-preview-list{display:grid;gap:.45rem}.tdb-ui-preview-list h5{margin:0;color:var(--bf-color-text-muted);font-size:.8rem;letter-spacing:.04em;text-transform:uppercase}.tdb-ui-preview-list a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.15rem .75rem;padding:.8rem;border:1px solid var(--bf-color-border);border-radius:10px;color:inherit;text-decoration:none}.tdb-ui-preview-list strong{color:var(--bf-color-text)}.tdb-ui-preview-list span{color:var(--bf-color-text-muted);font-size:.8rem}.tdb-ui-preview-list b{grid-column:2;grid-row:1 / span 2;align-self:center;font-size:1.35rem}.tdb-ui-preview-list.is-muted{opacity:.72}@media(max-width:560px){.tdb-ui-preview-row{grid-template-columns:1fr}}.tdb-ui-decision{width:fit-content;display:inline-flex;align-items:center;min-height:1.35rem;padding:.08rem .38rem;border:1px solid var(--bf-color-border);border-radius:var(--bf-radius-pill);background:var(--bf-color-surface-subtle);color:var(--bf-color-text-muted);font-size:.65rem;font-weight:var(--bf-font-weight-strong);letter-spacing:.04em;line-height:1;text-transform:uppercase}.tdb-ui-decision.is-approved{border-color:var(--bf-color-success);color:var(--bf-color-success)}.tdb-ui-live-type-sample{margin:0;color:var(--bf-color-text);font-family:var(--bf-font-family-sans)}.tdb-ui-token-grid{display:grid;gap:var(--bf-space-3);grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr))}.tdb-ui-token-grid.is-single-column{grid-template-columns:1fr}.tdb-ui-token-card{display:grid;gap:var(--bf-space-1);min-width:0;padding:var(--bf-space-3);border:1px solid var(--bf-color-border);border-radius:var(--bf-radius-medium);background:var(--bf-color-surface)}.tdb-ui-token-card code,.tdb-ui-radius-demo code,.tdb-ui-shadow-demo-list code,.tdb-ui-state-demo code{overflow-wrap:anywhere;color:var(--bf-color-text-muted);font-size:var(--bf-font-size-meta)}.tdb-ui-token-card span,.tdb-ui-radius-demo span,.tdb-ui-shadow-demo-list span,.tdb-ui-state-demo small,.tdb-ui-spacing-token small{color:var(--bf-color-text-muted);font-size:var(--bf-font-size-meta)}.tdb-ui-spacing-token>div{display:grid;gap:.1rem}.tdb-ui-spacing-token code{overflow-wrap:anywhere}.tdb-ui-foundation-columns{display:grid;gap:var(--bf-space-4);grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr))}.tdb-ui-foundation-demo-row{display:grid;gap:var(--bf-space-3);grid-template-columns:repeat(2,minmax(0,1fr))}.tdb-ui-radius-demo{display:grid;gap:var(--bf-space-1);min-height:5rem;align-content:center;padding:var(--bf-space-3);border:1px solid var(--bf-color-selected-border);background:var(--bf-color-selected)}.tdb-ui-control-demo-list{display:grid;gap:var(--bf-space-2)}.tdb-ui-control-demo-list button{display:flex;gap:var(--bf-space-2);align-items:center;justify-content:space-between;width:100%;padding:0 var(--bf-space-3);border:1px solid var(--bf-color-border);border-radius:var(--bf-radius-small);background:var(--bf-color-surface);color:var(--bf-color-text);font:inherit;font-weight:var(--bf-font-weight-semibold)}.tdb-ui-control-demo-list button small{color:var(--bf-color-text-muted)}.tdb-ui-control-demo-list button:focus-visible{outline:2px solid var(--bf-color-focus);outline-offset:2px;box-shadow:var(--bf-focus-ring)}.tdb-ui-shadow-demo-list{display:grid;gap:var(--bf-space-5);padding:var(--bf-space-3)}.tdb-ui-shadow-demo-list>div{display:grid;gap:var(--bf-space-1);padding:var(--bf-space-4);border:1px solid var(--bf-color-border);border-radius:var(--bf-radius-medium);background:var(--bf-color-surface)}.tdb-ui-state-grid{display:grid;gap:var(--bf-space-4);grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr))}.tdb-ui-state-demo{display:grid;gap:var(--bf-space-1);min-width:0;padding:var(--bf-space-4);border:1px solid var(--bf-color-border);border-radius:var(--bf-radius-medium);background:var(--bf-color-surface);color:var(--bf-color-text)}.tdb-ui-state-demo>span{color:var(--bf-color-text-muted);line-height:var(--bf-line-height-body)}.tdb-ui-state-demo.is-focus{border-color:var(--bf-color-focus);box-shadow:var(--bf-focus-ring)}.tdb-ui-state-demo.is-disabled{opacity:var(--bf-disabled-opacity)}.tdb-ui-state-demo.is-selected{border-color:var(--bf-color-selected-border);background:var(--bf-color-selected)}@media(max-width:520px){.tdb-ui-foundation-demo-row{grid-template-columns:1fr}}.tdb-ui-composition-heading{display:flex;flex-wrap:wrap;gap:var(--bf-space-3) var(--bf-space-5);align-items:flex-end;justify-content:space-between}.tdb-ui-composition-heading>div:first-child{display:grid;gap:var(--bf-space-1);min-width:min(100%,22rem)}.tdb-ui-composition-heading h3,.tdb-ui-composition-heading p{margin:0}.tdb-ui-composition-heading>div:first-child>p:last-child{max-width:var(--bf-page-width-reading);color:var(--bf-color-text-muted);line-height:var(--bf-line-height-body)}.tdb-ui-composition-checks{display:flex;flex-wrap:wrap;gap:var(--bf-space-2)}.tdb-ui-composition-grid{display:grid;grid-template-columns:minmax(19rem,.78fr) minmax(34rem,1.55fr);gap:var(--bf-space-5);align-items:start;min-width:0;overflow-x:auto;padding:var(--bf-space-1) 0 var(--bf-space-2);scrollbar-width:thin}.tdb-ui-composition-viewport{min-width:0;overflow:hidden;border:1px solid var(--bf-color-border);border-radius:var(--bf-radius-large);background:var(--bf-color-surface-subtle);box-shadow:var(--bf-shadow-overlay)}.tdb-ui-composition-viewport.is-narrow{width:min(100%,27rem);justify-self:center}.tdb-ui-composition-viewport.is-wide{min-width:34rem}.tdb-ui-composition-label{display:flex;flex-wrap:wrap;gap:var(--bf-space-1) var(--bf-space-3);align-items:baseline;justify-content:space-between;border-bottom:1px solid var(--bf-color-border);padding:var(--bf-space-2) var(--bf-space-3);background:var(--bf-color-surface-subtle);color:var(--bf-color-text-muted);font-size:var(--bf-font-size-meta)}.tdb-ui-composition-label strong{color:var(--bf-color-text)}.tdb-ui-composition-shell{display:grid;grid-template-rows:auto minmax(30rem,auto) auto;min-height:38rem;background:var(--bf-color-canvas)}.tdb-ui-composition-shell__header{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:var(--bf-space-2);align-items:center;min-height:3.35rem;box-sizing:border-box;padding:var(--bf-space-2) var(--bf-space-3);background:var(--bf-color-application-shell);color:var(--bf-color-text-on-shell)}.tdb-ui-composition-shell__header>button{width:var(--bf-control-height-default);height:var(--bf-control-height-default);border:1px solid rgb(255 255 255 / 34%);border-radius:var(--bf-radius-small);padding:0;background:transparent;color:inherit;font:inherit;font-weight:var(--bf-font-weight-bold)}.tdb-ui-composition-shell__header.is-wide{grid-template-columns:auto minmax(0,1fr) auto auto;padding-inline:var(--bf-space-5)}.tdb-ui-composition-shell__header nav{display:flex;gap:var(--bf-space-1);align-items:center;min-width:0}.tdb-ui-composition-shell__header nav a{border-radius:var(--bf-radius-small);padding:var(--bf-space-2) var(--bf-space-3);color:inherit;font-size:var(--bf-font-size-meta);font-weight:var(--bf-font-weight-semibold);text-decoration:none}.tdb-ui-composition-shell__header nav a:hover,.tdb-ui-composition-shell__header nav a:focus-visible,.tdb-ui-composition-shell__header nav a.is-current{outline:none;background:#ffffff29}.tdb-ui-composition-avatar{display:inline-grid;width:2rem;height:2rem;place-items:center;border:1px solid rgb(255 255 255 / 38%);border-radius:50%;font-size:.72rem;font-weight:var(--bf-font-weight-strong)}.tdb-ui-composition-shell__main{width:100%;max-width:29rem;box-sizing:border-box;margin-inline:auto;padding:var(--bf-space-4) var(--bf-space-3) var(--bf-space-5)}.tdb-ui-composition-shell__main.is-wide{max-width:var(--bf-page-width-wide);padding:var(--bf-space-6) var(--bf-space-5)}.tdb-ui-composition-shell__footer{padding:var(--bf-space-3);background:var(--bf-color-application-shell);color:var(--bf-color-text-on-shell);font-size:.68rem;line-height:1.4;text-align:center}.tdb-ui-composition-primary-actions{display:grid;grid-template-columns:1fr 1fr;gap:var(--bf-space-2)}.tdb-ui-composition-overview-wide{display:grid;grid-template-columns:minmax(13rem,.42fr) minmax(0,1fr);gap:var(--bf-space-5);align-items:start}.tdb-ui-composition-context-card{display:grid;gap:var(--bf-space-2);align-content:start}.tdb-ui-composition-context-card h5,.tdb-ui-composition-context-card p{margin:0}.tdb-ui-composition-context-card h5{font-size:var(--bf-font-size-heading)}.tdb-ui-composition-context-card p{color:var(--bf-color-text-muted);line-height:1.45}.tdb-ui-composition-detail-wide{display:grid;grid-template-columns:minmax(0,1fr) minmax(14rem,.38fr);gap:var(--bf-space-5);align-items:start}.tdb-ui-composition-summary-panel{display:grid;gap:var(--bf-space-3);border:1px solid var(--bf-color-border);border-radius:var(--bf-radius-medium);padding:var(--bf-space-4);background:var(--bf-color-surface)}.tdb-ui-composition-summary-panel h5{margin:0;color:var(--bf-color-text);font-size:var(--bf-font-size-heading)}.tdb-ui-composition-summary-panel dl{display:grid;gap:var(--bf-space-2);margin:0}.tdb-ui-composition-summary-panel dl>div{display:flex;gap:var(--bf-space-3);align-items:baseline;justify-content:space-between;border-bottom:1px solid var(--bf-color-border);padding-bottom:var(--bf-space-2)}.tdb-ui-composition-summary-panel dt{color:var(--bf-color-text-muted)}.tdb-ui-composition-summary-panel dd{margin:0;color:var(--bf-color-text);font-weight:var(--bf-font-weight-bold)}@media(max-width:900px){.tdb-ui-composition-grid{grid-template-columns:minmax(19rem,1fr);overflow-x:visible}.tdb-ui-composition-viewport.is-wide{width:100%;min-width:0}}@media(max-width:700px){.tdb-ui-composition-shell__header.is-wide nav{overflow-x:auto;scrollbar-width:thin}.tdb-ui-composition-overview-wide,.tdb-ui-composition-detail-wide{grid-template-columns:1fr}}@media(max-width:520px){.tdb-ui-composition-heading{align-items:stretch}.tdb-ui-composition-primary-actions{grid-template-columns:1fr}.tdb-ui-composition-shell__main.is-wide{padding-inline:var(--bf-space-3)}}.tdb-ui-color-card.is-browser-editable{position:relative}.tdb-ui-color-card__edit{grid-column:1 / -1;min-height:var(--bf-control-height-compact);border:1px solid var(--bf-color-action);border-radius:var(--bf-radius-small);padding:.35rem .65rem;background:var(--bf-color-surface);color:var(--bf-color-action);font:inherit;font-size:.78rem;font-weight:var(--bf-font-weight-bold);cursor:pointer}.tdb-ui-color-card__edit:hover{background:var(--bf-color-selected)}.tdb-ui-color-card__edit:focus-visible{outline:none;box-shadow:var(--bf-focus-ring)}