/* Reference primitives. Import tokens.css before this stylesheet. */
.ds-surface{font-family:var(--ds-font);font-size:var(--ds-text-ui);color:var(--ds-ink);background:var(--ds-canvas)}
.ds-panel{padding:var(--ds-space-3);background:var(--ds-surface);border:var(--ds-border-width) solid var(--ds-line);border-radius:var(--ds-radius-panel)}
.ds-title{font-size:var(--ds-text-title);white-space:nowrap;margin:0}
.ds-prose{font-size:var(--ds-text-body);line-height:1.65;white-space:normal;color:var(--ds-muted)}
.ds-field{display:grid;grid-template-columns:var(--ds-label-width) minmax(0,1fr);align-items:center;gap:var(--ds-space-2);margin-block:var(--ds-space-3)}
.ds-label{white-space:nowrap;font-size:var(--ds-text-ui)}
.ds-input{box-sizing:border-box;min-width:0;width:100%;min-height:var(--ds-control-height);font:inherit;color:var(--ds-ink);background:var(--ds-surface);border:var(--ds-border-width) solid var(--ds-line);border-radius:var(--ds-radius-control);padding:var(--ds-space-1) var(--ds-space-2)}
.ds-input[aria-invalid=true]{border-color:var(--ds-error)}
.ds-help,.ds-error{grid-column:2;margin:0;font-size:var(--ds-text-ui)}
.ds-help{white-space:normal;color:var(--ds-muted)}
.ds-error{white-space:nowrap;color:var(--ds-error)}
.ds-button{min-height:var(--ds-control-height);font:inherit;white-space:nowrap;padding:var(--ds-space-1) var(--ds-button-padding);border:var(--ds-border-width) solid var(--ds-line);border-radius:var(--ds-radius-control);background:var(--ds-action);color:var(--ds-on-action);cursor:pointer}
.ds-button:not(.secondary):not(:disabled):hover{background:var(--ds-action-hover)}
.ds-button:not(.secondary):not(:disabled):active{background:var(--ds-action-pressed)}
.ds-button.secondary{background:var(--ds-surface);color:var(--ds-ink)}
.ds-actions{display:flex;flex-wrap:wrap;gap:var(--ds-space-1)}
.ds-input:focus-visible,.ds-button:focus-visible{outline:var(--ds-focus-width) solid var(--ds-focus);outline-offset:var(--ds-space-optical)}
.ds-button:disabled,.ds-input:disabled{opacity:.5;cursor:default}
.ds-scroll{overflow-y:auto;overflow-x:hidden;scrollbar-width:none}.ds-scroll::-webkit-scrollbar{display:none;width:0;height:0}
@media(max-width:480px){.ds-field{grid-template-columns:minmax(0,1fr);gap:var(--ds-space-1)}.ds-help,.ds-error{grid-column:1}}

/* Lucide SVG sizing; the check mask is generated from the official Lucide asset. */
.ds-icon,[data-lucide],svg.lucide{width:var(--ds-icon-size);height:var(--ds-icon-size);stroke-width:var(--ds-icon-stroke);flex:none;color:inherit}
.ds-checkmark{width:var(--ds-icon-size);height:var(--ds-icon-size);background:currentColor;mask:var(--ds-icon-check-mask) center/contain no-repeat}

/* Keep native select semantics; reserve a separate decorative indicator area. */
.ds-select{position:relative;min-width:0;color:var(--ds-ink)}
.ds-select>.ds-input{appearance:none;padding-inline-end:calc(var(--ds-space-2) + var(--ds-icon-size) + var(--ds-space-1))}
.ds-select>.ds-icon{position:absolute;inset-inline-end:calc(var(--ds-border-width) + var(--ds-space-2));top:50%;transform:translateY(-50%);pointer-events:none}
.ds-select:has(select:disabled)>.ds-icon{opacity:.5}
@media(forced-colors:active){.ds-select>.ds-input{appearance:auto}.ds-select>.ds-icon{display:none}}

/* GROUP-001: connected segments, logical edges and unclipped focus. */
.ds-button-group{display:inline-flex;align-items:stretch;gap:0;isolation:isolate}
.ds-button-group>.ds-button{position:relative;flex:none;border-radius:0}
.ds-button-group>.ds-button:first-child{border-start-start-radius:var(--ds-radius-control);border-end-start-radius:var(--ds-radius-control)}
.ds-button-group>.ds-button:last-child{border-start-end-radius:var(--ds-radius-control);border-end-end-radius:var(--ds-radius-control)}
.ds-button-group>.ds-button+.ds-button{margin-inline-start:calc(0px - var(--ds-border-width))}
.ds-button-group>.ds-button[aria-pressed=true]{z-index:1;background:var(--ds-accent-soft);color:var(--ds-on-accent-soft);border-color:var(--ds-focus)}
.ds-button-group>.ds-button:not(:disabled):not([aria-pressed=true]):hover{background:var(--ds-soft)}
.ds-button-group>.ds-button:not(:disabled):active{background:var(--ds-action-pressed);color:var(--ds-on-action)}
.ds-button-group>.ds-button:focus-visible{z-index:2}
.ds-button-group>.ds-button.icon-only{min-width:var(--ds-control-height);padding-inline:var(--ds-space-1)}
.ds-button-group[data-orientation=vertical]{flex-direction:column}
.ds-button-group[data-orientation=vertical]>.ds-button{border-radius:0;margin-inline-start:0}
.ds-button-group[data-orientation=vertical]>.ds-button+.ds-button{margin-block-start:calc(0px - var(--ds-border-width))}
.ds-button-group[data-orientation=vertical]>.ds-button:first-child{border-start-start-radius:var(--ds-radius-control);border-start-end-radius:var(--ds-radius-control)}
.ds-button-group[data-orientation=vertical]>.ds-button:last-child{border-end-start-radius:var(--ds-radius-control);border-end-end-radius:var(--ds-radius-control)}

/* CANVAS-001: fixed shared height, equal derived inner insets. */
.ds-canvas-checkbox{box-sizing:border-box;display:inline-flex;align-items:center;gap:var(--ds-space-1);height:var(--ds-control-height);min-height:var(--ds-control-height);padding:calc((var(--ds-control-height) - var(--ds-icon-size) - 2 * var(--ds-border-width)) / 2);font:inherit;line-height:var(--ds-icon-size);white-space:nowrap;color:var(--ds-ink);background:var(--ds-surface);border:var(--ds-border-width) solid var(--ds-line);border-radius:var(--ds-radius-control);cursor:pointer}
.ds-canvas-checkbox>input[type=checkbox]{box-sizing:border-box;width:var(--ds-icon-size);height:var(--ds-icon-size);margin:0;flex:none}
.ds-canvas-checkbox:has(input:focus-visible){outline:var(--ds-focus-width) solid var(--ds-focus);outline-offset:var(--ds-space-optical)}
.ds-canvas-checkbox:has(input:disabled){opacity:.5;cursor:default}

/* ACTION-001: align actions with controls; keep navigation as anchors. */
.ds-context-row{display:flex;align-items:flex-end;flex-wrap:wrap;gap:var(--ds-space-2)}
.ds-context-actions{display:flex;align-items:center;flex-wrap:wrap;gap:var(--ds-space-1)}
a.ds-button{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:var(--ds-space-1);text-decoration:none}

/* ICON-001: native disclosure semantics with a single Lucide indicator. */
summary.ds-disclosure{display:flex;align-items:center;gap:var(--ds-space-1);min-height:var(--ds-control-height);list-style:none;cursor:pointer;white-space:nowrap}
summary.ds-disclosure::-webkit-details-marker{display:none}
summary.ds-disclosure::marker{content:''}
.ds-disclosure>.ds-disclosure-icon{width:var(--ds-icon-size);height:var(--ds-icon-size);flex:none;transition:transform var(--ds-motion-duration)}
.ds-disclosure:dir(rtl)>.ds-disclosure-icon{transform:rotate(180deg)}
details[open]>.ds-disclosure>.ds-disclosure-icon{transform:rotate(90deg)}
.ds-disclosure:focus-visible{outline:var(--ds-focus-width) solid var(--ds-focus);outline-offset:var(--ds-space-optical)}
@media(prefers-reduced-motion:reduce){.ds-disclosure>.ds-disclosure-icon{transition:none}}

/* TOOLTIP-001: a structural surface pointer, not an application icon. */
.ds-tooltip{box-sizing:border-box;width:max-content;max-width:calc(100dvw - var(--ds-space-2) * 2);overflow:visible;padding:var(--ds-space-1) var(--ds-space-2);font-size:var(--ds-text-ui);color:var(--ds-tooltip-foreground);background:var(--ds-tooltip-surface);border:var(--ds-border-width) solid var(--ds-tooltip-surface);border-radius:var(--ds-radius-panel)}
.ds-tooltip::before{content:'';position:absolute;left:var(--ds-tooltip-arrow-x,50%);bottom:100%;width:var(--ds-space-2);height:var(--ds-space-1);transform:translateX(-50%);background:var(--ds-tooltip-surface);clip-path:polygon(50% 0,100% 100%,0 100%);pointer-events:none}
.ds-tooltip[data-side=top]::before{top:100%;bottom:auto;clip-path:polygon(0 0,100% 0,50% 100%)}
@media(forced-colors:active){.ds-tooltip{color:CanvasText;background:Canvas;border-color:CanvasText}.ds-tooltip::before{background:CanvasText}}