/* Shared components. Application UI opts in with ds-scope; exported artwork stays independent. */
:root .ds-scope{color:var(--ink)}
:root .ds-scope .ds-tone-info{--semantic-color:var(--color-info);--semantic-bg:var(--color-info-soft)}
:root .ds-scope .ds-tone-success{--semantic-color:var(--color-success);--semantic-bg:var(--color-success-soft)}
:root .ds-scope .ds-tone-attention{--semantic-color:var(--color-attention);--semantic-bg:var(--color-attention-soft)}
:root .ds-scope .ds-tone-special{--semantic-color:var(--color-special);--semantic-bg:var(--color-special-soft)}
:root .ds-scope .ds-tone-danger{--semantic-color:var(--color-danger);--semantic-bg:var(--color-danger-soft)}
:root .ds-scope .ds-tone-linkedin{--semantic-color:var(--color-linkedin);--semantic-bg:var(--color-linkedin-soft)}
:root .ds-scope .ds-icon{display:inline-block;width:18px;height:18px;flex:0 0 18px;vertical-align:middle;pointer-events:none}
:root .ds-scope .ds-icon-badge{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;flex:0 0 30px;border-radius:50%;color:var(--semantic-color,var(--color-info));background:var(--semantic-bg,var(--color-info-soft));border:1px solid color-mix(in srgb,var(--semantic-color,var(--color-info)) 24%,transparent);box-shadow:0 2px 3px -2px var(--shadow-color),inset 0 1px 0 var(--highlight-color)}
:root .ds-scope .ds-icon-badge.small{width:24px;height:24px;flex-basis:24px}
:root .ds-scope .ds-icon-badge.small .ds-icon{width:15px;height:15px;flex-basis:15px}
:root .ds-scope .ds-badge{display:inline-flex;align-items:center;gap:5px;max-width:100%;padding:5px 9px;min-height:26px;border:1px solid color-mix(in srgb,var(--semantic-color,var(--color-info)) 30%,var(--border-soft));border-radius:var(--radius-pill);background:var(--semantic-bg,var(--color-info-soft));color:var(--ink);font-size:var(--font-small);font-weight:var(--weight-label);line-height:1.35}
:root .ds-scope .ds-badge>.ds-icon,:root .ds-scope .ds-channel>.ds-icon{color:var(--semantic-color,var(--color-info));width:15px;height:15px;flex-basis:15px}
:root .ds-scope .ds-channel{display:inline-flex;align-items:center;gap:5px;color:var(--ink);font:inherit;flex-wrap:wrap}
:root .ds-scope .ds-panel{background:var(--gradient-panel);border:var(--border-width) solid var(--border-primary);border-radius:var(--radius-large);box-shadow:var(--shadow-panel);backdrop-filter:none}
:root .ds-scope .ds-card{background:var(--gradient-card);border:var(--border-width) solid var(--border-primary);border-radius:var(--radius-medium);box-shadow:var(--shadow-card);backdrop-filter:none}
:root .ds-scope .ds-info{background:var(--bg-info);border:var(--border-width) solid var(--border-soft);border-radius:var(--radius-small);box-shadow:var(--shadow-control)}
:root .ds-scope :is(.ds-button,.primary,.secondary,.quick-btn,.research-mode-btn){display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:var(--control-height);height:auto;border-radius:var(--radius-small);font-size:var(--font-label);font-weight:var(--weight-heading);line-height:1.4;padding:9px 14px;text-shadow:none;transition:background var(--motion-fast),border-color var(--motion-fast),box-shadow var(--motion-fast)}
:root .ds-scope :is(.primary,.ds-button--primary){color:var(--color-primary-text);background:var(--gradient-action);border:var(--border-action-width) solid var(--color-primary-end);box-shadow:var(--shadow-action)}
:root .ds-scope :is(.secondary,.quick-btn,.research-mode-btn,.ds-button--secondary){color:var(--ink);background:var(--bg-info-soft);border:var(--border-action-width) solid var(--border-primary);box-shadow:var(--shadow-control)}
:root .ds-scope .ds-button--secondary>.ds-icon{color:var(--semantic-color,var(--color-info))}
:root .ds-scope .ds-button--tertiary{color:var(--color-info);background:transparent;border:var(--border-action-width) solid transparent;box-shadow:none}
:root .ds-scope .ds-button--danger{color:var(--color-danger);background:var(--color-danger-soft);border:var(--border-action-width) solid color-mix(in srgb,var(--color-danger) 55%,transparent);box-shadow:var(--shadow-control)}
:root .ds-scope :is(.primary,.ds-button--primary):not(:disabled):hover{background:linear-gradient(130deg,var(--color-primary-hover),var(--color-primary-end));border-color:var(--color-primary-hover)}
:root .ds-scope :is(.secondary,.quick-btn,.research-mode-btn,.ds-button--secondary):not(:disabled):hover{background:var(--color-info-soft);border-color:var(--border-active)}
:root .ds-scope .ds-button--tertiary:not(:disabled):hover{background:var(--color-info-soft);border-color:var(--border-soft)}
:root .ds-scope .ds-button--danger:not(:disabled):hover{border-color:var(--color-danger)}
:root .ds-scope :is(.secondary,.quick-btn,.filter-pill,.stage-switch-btn):not(.active):not(.selected):not(.active-mode):not(:disabled){border-color:var(--border-primary)}
:root .ds-scope :is(.secondary,.quick-btn,.filter-pill,.stage-switch-btn):not(.active):not(.selected):not(.active-mode):not(:disabled):hover{border-color:var(--border-active)}
:root .ds-scope .ds-button--tertiary:not(.active):not(.selected):not(.active-mode):not(:disabled){border-color:transparent}
:root .ds-scope .ds-button--tertiary:not(.active):not(.selected):not(.active-mode):not(:disabled):hover{border-color:var(--border-soft)}
:root .ds-scope :is(.primary,.ds-button--primary):not(:disabled):active{box-shadow:var(--shadow-control)}
:root .ds-scope :is(button,input,select,textarea,summary):focus-visible{outline:2px solid var(--color-focus);outline-offset:3px}
:root .ds-scope :is(button,input,select,textarea):disabled{opacity:.55;cursor:default;box-shadow:none}
:root .ds-scope :is(.field,.select,.ds-input,.ds-select,.compact-stage-select select,.assistant-composer textarea,.assistant-draft input,.assistant-draft textarea){min-height:var(--control-height);border:var(--border-action-width) solid var(--border-primary);border-radius:var(--radius-small);padding:10px 12px;background:var(--bg-info);color:var(--ink);font-size:var(--font-body);line-height:1.5;box-shadow:inset 0 1px 2px color-mix(in srgb,var(--shadow-color) 25%,transparent)}
:root .ds-scope :is(input,textarea)::placeholder{color:var(--ink-placeholder);opacity:1}
:root .ds-scope :is(.field,.select,.ds-input,.ds-select):focus{border-color:var(--border-active)}
:root .ds-scope .ds-metric{display:grid;grid-template-columns:24px minmax(0,1fr);grid-template-areas:"icon count" "label label";align-items:center;gap:var(--space-2);min-height:86px;padding:var(--space-3);text-align:left;color:var(--ink);background:var(--gradient-card);border:var(--border-action-width) solid var(--border-primary);border-radius:var(--radius-medium);box-shadow:var(--shadow-card);transform:none;outline:none;transition:border-color var(--motion-fast),box-shadow var(--motion-fast)}
:root .ds-scope .ds-metric>.ds-metric-label{font-size:var(--font-label);font-weight:var(--weight-label);line-height:1.45;color:var(--ink-secondary);grid-area:label;overflow-wrap:normal;word-break:normal;hyphens:none;min-width:0}
:root .ds-scope .ds-metric>strong{font-size:var(--font-number);font-weight:var(--weight-heading);color:var(--ink);line-height:1;grid-area:count;justify-self:end}
:root .ds-scope .ds-metric>.ds-icon-badge{color:var(--semantic-color);grid-area:icon}
:root .ds-scope .ds-metric:is(.active,button:hover){background:linear-gradient(145deg,var(--bg-card),var(--color-info-soft));border-color:var(--border-active);box-shadow:var(--shadow-selected);outline:none;transform:none}
:root .ds-scope .ds-heading{display:flex;align-items:center;gap:var(--space-2);color:var(--ink)}
:root .ds-scope .ds-timeline{list-style:none;margin:0;padding:0;display:grid;gap:0;min-width:0}
:root .ds-scope .ds-timeline-item{display:grid;grid-template-columns:32px minmax(0,1fr);gap:var(--space-3);position:relative;min-width:0;padding:0 0 var(--space-4)}
:root .ds-scope .ds-timeline-item:not(:last-child)::before{content:'';position:absolute;width:2px;background:var(--border-soft);left:15px;top:31px;bottom:-1px}
:root .ds-scope .ds-timeline-item>.ds-icon-badge{position:relative;z-index:1;margin-top:1px}
:root .ds-scope .ds-timeline-content{padding:var(--space-3) var(--space-4);min-width:0;border:var(--border-width) solid var(--border-soft);border-radius:var(--radius-small);background:var(--bg-info);box-shadow:var(--shadow-control)}
:root .ds-scope .ds-timeline-content h5{margin:0;font-size:var(--font-body);line-height:1.55;font-weight:var(--weight-heading);color:var(--ink);overflow-wrap:anywhere}
:root .ds-scope .ds-timeline-meta{display:flex;gap:var(--space-2);flex-wrap:wrap;font-size:var(--font-small);color:var(--ink-secondary);line-height:1.6;margin-top:var(--space-1)}
:root .ds-scope .ds-timeline-content p{margin:var(--space-2) 0 0;font-size:var(--font-body);line-height:var(--line-body);white-space:pre-wrap;overflow-wrap:anywhere;color:var(--ink)}
@media(prefers-reduced-motion:reduce){:root .ds-scope *{transition:none!important}}