body {
    --workspace-subtle-background: color-mix(in srgb, var(--color-border) 18%, transparent);
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 30;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg);
}

.site-header-nav {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 1.75rem;
    max-width: none;
    padding-top: 0;
    padding-bottom: 0;
    margin-bottom: 0;
}

.site-header-nav ul {
    display: flex;
    align-items: center;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-header-nav .site-header-actions {
    margin-left: auto;
}

.site-header-nav li {
    margin: 0;
    padding: 0;
}

.site-header-nav a {
    display: block;
    padding: 0.18rem 0.48rem;
    border-radius: 0.25rem;
    color: var(--color-muted);
    font-size: 0.72rem;
    font-weight: 500;
    text-decoration: none;
    line-height: 1;
}

.site-header-nav a:hover {
    color: var(--color);
    background: var(--workspace-subtle-background);
    text-decoration: none;
}

.site-header-brand {
    display: inline-flex !important;
    align-items: center;
    padding: 0.1rem 0.48rem 0.1rem 0.1rem !important;
    margin-right: 0.5rem;
}

.site-header-brand img {
    display: block;
    width: auto;
    height: 1.25rem;
}

.site-header-nav form {
    margin: 0;
}

.site-header-nav button,
.site-header-nav .btn {
    min-height: auto;
    padding: 0.15rem 0.5rem;
    font-size: 0.7rem;
    line-height: 1;
}

.site-header-nav a.btn:not(.secondary):not(.outline) {
    color: var(--primary-contrast);
}

.site-header-nav a.btn:not(.secondary):not(.outline):hover {
    color: var(--primary-contrast);
    background: var(--primary-hover);
}

.notification-menu {
    position: relative;
}

.notification-bell {
    position: relative;
    min-width: 1.75rem;
    padding-left: 0.42rem !important;
    padding-right: 0.42rem !important;
}

.notification-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1rem;
    height: 1rem;
    padding: 0 0.25rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    color: var(--color-muted);
    background: var(--color-bg);
    font-size: 0.62rem;
    line-height: 1;
}

.notification-count-active {
    color: var(--primary-contrast);
    border-color: var(--primary);
    background: var(--primary);
}

.notification-inbox {
    position: absolute;
    top: calc(100% + 0.35rem);
    right: 0;
    z-index: 40;
    width: min(22rem, calc(100vw - 1rem));
}

.notification-inbox:empty {
    display: none;
}

.help-page {
    display: grid;
    grid-template-columns: minmax(11rem, 15rem) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
    max-width: 72rem;
    margin: 1rem auto 2rem;
}

.help-navigation {
    position: sticky;
    top: 2.25rem;
    display: grid;
    gap: 0.55rem;
    padding: 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    background: var(--color-card-bg);
}

.help-navigation ul {
    display: grid;
    gap: 0.1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.help-navigation a {
    display: block;
    padding: 0.22rem 0.35rem;
    border-radius: 0.25rem;
    color: var(--color-muted);
    font-size: 0.74rem;
    line-height: 1.25;
    text-decoration: none;
}

.help-navigation a:hover,
.help-navigation a.active {
    color: var(--color);
    background: var(--workspace-subtle-background);
    text-decoration: none;
}

.help-navigation-home {
    font-weight: 700;
}

.help-language-switcher {
    display: flex;
    gap: 0.35rem;
    margin: 0;
}

.help-language-switcher button {
    flex: 1;
    min-width: 0;
    padding: 0.25rem 0.35rem;
    font-size: 0.72rem;
}

.help-language-switcher button.active {
    color: var(--primary-contrast);
    border-color: var(--primary);
    background: var(--primary);
}

.help-document {
    min-width: 0;
    padding: 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    background: var(--color-card-bg);
}

.help-document h1,
.help-document h2,
.help-document h3 {
    margin-top: 1.15rem;
    margin-bottom: 0.45rem;
}

.help-document h1:first-child,
.help-document h2:first-child,
.help-document h3:first-child {
    margin-top: 0;
}

.help-document p,
.help-document ul,
.help-document ol,
.help-document table,
.help-document pre {
    margin-top: 0.55rem;
    margin-bottom: 0.55rem;
}

.help-document table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
}

.help-document th,
.help-document td {
    vertical-align: top;
}

.help-document pre {
    overflow-x: auto;
}

.help-document code {
    overflow-wrap: anywhere;
}

.notification-inbox-panel {
    margin-bottom: 0;
    padding: 0.55rem;
    border: 1px solid var(--color-border);
    border-radius: 0.35rem;
    background: var(--color-bg);
    box-shadow: var(--card-shadow);
}

.notification-inbox-panel > header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 0.45rem;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid var(--color-border);
}

.notification-inbox-panel h2 {
    margin-bottom: 0;
    font-size: 0.78rem;
}

.notification-inbox-panel ol {
    display: grid;
    gap: 0.35rem;
    max-height: 24rem;
    overflow: auto;
    margin: 0;
    padding: 0;
    list-style: none;
}

.notification-inbox-panel li {
    margin: 0;
}

.notification-inbox-panel article {
    margin-bottom: 0;
    padding: 0.48rem;
    border-radius: 0.3rem;
    box-shadow: none;
}

.notification-unseen article {
    border-color: color-mix(in srgb, var(--primary) 45%, var(--color-border));
    background: color-mix(in srgb, var(--primary) 7%, var(--color-bg));
}

.notification-inbox-panel p {
    margin-bottom: 0.25rem;
    font-size: 0.76rem;
}

.notification-story-link {
    color: var(--color);
    text-decoration: none;
}

.notification-story-link:hover,
.notification-story-link:focus-visible {
    color: var(--primary);
    text-decoration: underline;
}

.notification-inbox-panel small,
.notification-inbox-panel > header span,
.notification-empty {
    color: var(--color-muted);
    font-size: 0.68rem;
}

.notification-inbox-panel menu {
    display: flex;
    justify-content: flex-end;
    margin: 0.35rem 0 0;
    padding: 0;
}

.notification-inbox-panel button {
    min-height: 1.3rem;
    padding: 0.12rem 0.48rem;
    font-size: 0.68rem;
}

.notification-close {
    width: 1.35rem;
    min-width: 1.35rem;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.mention-warnings {
    display: grid;
    gap: 0.2rem;
    margin: 0.25rem 0;
    padding: 0.35rem 0.45rem;
    border: 1px solid color-mix(in srgb, var(--color-info) 35%, var(--color-border));
    border-radius: 0.3rem;
    background: color-mix(in srgb, var(--color-info) 8%, var(--color-bg));
}

.mention-warnings p {
    margin: 0;
    color: var(--color-info);
    font-size: 0.72rem;
}

.story-create-warning {
    display: grid;
    gap: 0.18rem;
    margin: 0.25rem 0;
    padding: 0.35rem 0.45rem;
    border: 1px solid color-mix(in srgb, var(--color-error) 35%, var(--color-border));
    border-radius: 0.3rem;
    background: color-mix(in srgb, var(--color-error) 8%, var(--color-bg));
}

.story-create-warning p {
    margin: 0;
    color: var(--color-error);
    font-size: 0.72rem;
}

.story-create-warning ul {
    margin: 0.25rem 0 0;
    padding-left: 1.25rem;
    color: var(--color-error);
    font-size: 0.72rem;
}

.story-create-warning li {
    margin: 0.15rem 0;
}

.workspace-filter-bar {
    position: sticky;
    top: 1.75rem;
    z-index: 20;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg);
}

.workspace-filter-bar .workspace-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    height: 1.9rem;
    max-width: none;
    padding-top: 0;
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: none;
}

.home-page,
.hero,
.auth-panel {
    max-width: 42rem;
    margin: 4rem auto;
}

.hero > header,
.auth-panel > header {
    margin-bottom: 1.5rem;
    border-bottom: none;
}

.actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.profile-page {
    max-width: 56rem;
    margin: 3rem auto;
}

.profile-page > header {
    margin-bottom: 1.5rem;
}

.profile-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.75fr);
    gap: 1rem;
}

.profile-details {
    display: grid;
    gap: 0.75rem;
    margin: 0;
}

.profile-details div {
    display: grid;
    grid-template-columns: 7rem minmax(0, 1fr);
    gap: 1rem;
}

.profile-details dt {
    color: var(--color-muted);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
}

.profile-details dd {
    margin: 0;
}

.story-list {
    display: grid;
    gap: 1rem;
}

.form-error {
    color: var(--color-error);
}

.errorlist {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0.85rem 1rem;
    border: 1px solid color-mix(in srgb, var(--color-error) 30%, transparent);
    border-radius: var(--border-radius);
    background: color-mix(in srgb, var(--color-error) 10%, var(--color-bg));
    color: var(--color-error);
}

.errorlist + label,
.errorlist + .form-error {
    margin-top: 0;
}

.errorlist li {
    position: relative;
    padding-left: 1.25rem;
}

.errorlist li::before {
    /* content: "•"; */
    position: absolute;
    left: 0;
    color: var(--color-error);
}

label {
    margin-bottom: 1rem;
}

label > small {
    display: block;
    margin-top: 0.35rem;
}

.workspace-page {
    width: calc(100vw - 2rem);
    max-width: none;
    margin-left: 50%;
    padding-top: 0.45rem;
    transform: translateX(-50%);
}

.story-terminal {
    position: fixed;
    inset: 0 0 auto;
    z-index: 20;
    transform: translateY(-100%);
    transition: transform 180ms ease;
}

.story-terminal-open {
    transform: translateY(0);
}

.story-terminal-panel {
    width: min(calc(100vw - 2rem), 72rem);
    margin: 0 auto;
    padding: 0.55rem;
    border: 1px solid var(--color-border);
    border-top: 0;
    border-radius: 0 0 0.35rem 0.35rem;
    background: var(--color-bg);
    box-shadow: var(--card-shadow);
}

.story-terminal form {
    position: relative;
}

.story-terminal label {
    margin-bottom: 0.35rem;
    color: var(--color-muted);
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
}

.story-terminal textarea {
    min-height: 2rem;
    max-height: 13.75rem;
    margin-bottom: 0;
    padding: 0.35rem 0.5rem;
    resize: none;
    font-family: var(--font-family-mono);
    font-size: 0.9rem;
    line-height: 1.4;
}

.story-terminal-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.32rem;
}

.story-terminal-submit {
    display: inline-flex;
    align-items: center;
    gap: 0.36rem;
    min-height: 1.85rem;
    margin: 0;
    padding: 0.24rem 0.36rem 0.24rem 0.5rem;
    border-color: color-mix(in srgb, var(--primary) 68%, var(--color-border));
    border-radius: 0.45rem;
    background: var(--primary);
    color: var(--primary-contrast);
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1;
}

.story-terminal-submit:hover,
.story-terminal-submit:focus-visible {
    background: var(--primary-hover);
}

.story-terminal-submit i {
    font-size: 0.82rem;
}

.story-terminal-shortcut,
.story-terminal-field-hint {
    display: inline-flex;
    align-items: center;
    gap: 0.12rem;
}

.story-terminal-shortcut {
    padding: 0.12rem 0.24rem;
    border-radius: 0.32rem;
    background: color-mix(in srgb, var(--color) 18%, transparent);
}

.story-terminal-shortcut kbd,
.story-terminal-field-hint kbd {
    min-width: 1rem;
    padding: 0.02rem 0.2rem;
    border: 1px solid color-mix(in srgb, currentColor 28%, transparent);
    border-radius: 0.22rem;
    background: color-mix(in srgb, var(--color-bg) 14%, transparent);
    color: inherit;
    font-family: var(--font-family-mono);
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
}

.story-terminal-preview {
    margin-top: 0.45rem;
}

.story-terminal-preview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(7rem, 10rem));
    gap: 0.32rem;
    align-items: start;
    margin: 0;
}

.story-terminal-preview-field {
    margin: 0;
    padding: 0.36rem 0.45rem;
    border: 1px solid color-mix(in srgb, var(--primary) 42%, var(--color-border));
    border-radius: 0.3rem;
    background: color-mix(in srgb, var(--primary) 9%, var(--color-card-bg));
    min-width: 7rem;
    max-width: 10rem;
}

.story-terminal-preview-field dt {
    color: var(--color-muted);
    font-size: 0.62rem;
    font-weight: 600;
    text-transform: uppercase;
}

.story-terminal-preview-field dd {
    display: flex;
    align-items: center;
    gap: 0.28rem;
    overflow: hidden;
    margin: 0;
    color: var(--color);
    font-size: 0.76rem;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.story-terminal-preview-field dd > span:first-child {
    overflow: hidden;
    min-width: 0;
    text-overflow: ellipsis;
}

.story-terminal-field-hint {
    flex: 0 0 auto;
    color: var(--color-muted);
}

.story-terminal-preview-field-active dt {
    color: var(--primary);
}

.story-terminal-preview-field-default {
    border-color: var(--color-border);
    background: var(--workspace-subtle-background);
}

.story-terminal-preview-field-default dt,
.story-terminal-preview-field-default dd {
    color: var(--color-muted);
}

.story-terminal-preview-field-missing {
    border-style: dashed;
    border-color: color-mix(in srgb, var(--color-muted) 42%, var(--color-border));
    background: transparent;
}

.story-terminal-preview-field-missing dt,
.story-terminal-preview-field-missing dd {
    color: color-mix(in srgb, var(--color-muted) 72%, var(--color-bg));
    font-weight: 500;
}

.story-terminal-warnings {
    display: grid;
    gap: 0.18rem;
    margin-top: 0.4rem;
    padding: 0.35rem 0.45rem;
    border: 1px solid color-mix(in srgb, var(--color-info) 35%, var(--color-border));
    border-radius: 0.3rem;
    background: color-mix(in srgb, var(--color-info) 8%, var(--color-bg));
}

.story-terminal-warnings[hidden] {
    display: none !important;
}

.story-terminal-warnings p {
    margin: 0;
    color: var(--color-info);
    font-size: 0.72rem;
}

.suggested-tag-scope {
    display: grid;
    gap: 0.35rem;
    margin: 0.65rem 0 0.45rem;
    padding: 0.65rem;
    border: 1px solid color-mix(in srgb, var(--color-info) 36%, var(--color-border));
    border-radius: 0.35rem;
}

.suggested-tag-scope legend {
    padding: 0 0.25rem;
    color: var(--color);
    font-size: 0.76rem;
    font-weight: 700;
}

.suggested-tag-scope-option {
    display: flex;
    align-items: center;
    gap: 0.42rem;
    margin: 0;
    padding: 0.36rem 0.48rem;
    border: 1px solid var(--color-border);
    border-radius: 0.35rem;
    background: var(--color-bg);
    color: var(--color);
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: none;
    cursor: pointer;
}

.suggested-tag-scope-option:has(input:checked) {
    border-color: color-mix(in srgb, var(--primary) 62%, var(--color-border));
    background: color-mix(in srgb, var(--primary) 10%, var(--color-bg));
}

.suggested-tag-scope-option input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    flex: 0 0 auto;
    width: 0.95rem;
    height: 0.95rem;
    margin: 0;
    border: 2px solid color-mix(in srgb, var(--color-muted) 45%, var(--color-border));
    border-radius: 999px;
    background: var(--color-bg);
    accent-color: var(--primary);
}

.suggested-tag-scope-option input[type="radio"]:checked {
    border-color: var(--primary);
    background:
        radial-gradient(circle at center, var(--primary) 0 38%, transparent 42%),
        var(--color-bg);
}

.story-terminal-warnings a,
.mention-warnings a {
    display: inline-flex;
    align-items: center;
    margin-left: 0.25rem;
    padding: 0.04rem 0.28rem;
    border: 1px solid color-mix(in srgb, var(--color-info) 45%, var(--color-border));
    border-radius: 999px;
    color: var(--primary-contrast);
    background: var(--primary);
    font-weight: 600;
    text-decoration: none;
}

.story-terminal-warnings a:hover,
.mention-warnings a:hover {
    color: var(--primary-contrast);
    background: var(--primary-hover);
    text-decoration: none;
}

.story-text-autocomplete {
    position: relative;
}

.story-terminal-autocomplete,
.story-text-autocomplete-menu {
    position: absolute;
    z-index: 2;
    display: grid;
    gap: 0.12rem;
    max-height: 14rem;
    overflow: auto;
    width: min(28rem, calc(100% - 1rem));
    min-width: min(17.5rem, calc(100% - 1rem));
    margin: 0;
    padding: 0.25rem;
    border: 1px solid var(--color-border);
    border-radius: 0.3rem;
    background: var(--color-bg);
    box-shadow: var(--card-shadow);
    list-style: none;
}

.story-terminal-autocomplete li,
.story-text-autocomplete-menu li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.story-terminal-autocomplete-search,
.story-text-autocomplete-search,
.story-badge-menu-search {
    padding-bottom: 0.2rem;
}

.story-terminal-autocomplete-search input,
.story-text-autocomplete-search input,
.story-badge-menu-search input {
    width: 100%;
    margin: 0;
    padding: 0.28rem 0.42rem;
    border-color: var(--color-border);
    font-size: 0.82rem;
}

.story-terminal-autocomplete-empty,
.story-text-autocomplete-empty,
.story-badge-menu-empty {
    padding: 0.3rem 0.42rem;
    color: var(--color-muted);
    font-size: 0.82rem;
}

.story-terminal-autocomplete button,
.story-text-autocomplete-menu button {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin: 0;
    padding: 0.24rem 0.4rem;
    border: 0;
    background: transparent;
    color: var(--color);
    text-align: left;
    font-size: inherit;
}

.story-terminal-autocomplete button[aria-current="true"],
.story-terminal-autocomplete button:hover,
.story-text-autocomplete-menu button[aria-current="true"],
.story-text-autocomplete-menu button:hover {
    background: var(--workspace-subtle-background);
}

.story-terminal-autocomplete small,
.story-text-autocomplete-menu small {
    color: var(--color-muted);
}

.story-description-edit-actions {
    display: flex;
    gap: 0.35rem;
    margin: 0.25rem 0 0;
    padding: 0;
}

.story-description-dirty-status,
.story-description-pending-actions,
.story-description-save-feedback {
    display: block !important;
    margin-top: 0.2rem;
    color: var(--color-muted);
}

.story-description-pending-actions,
.story-description-save-feedback {
    color: var(--color-info);
}

.story-description-dirty-status[hidden],
.story-description-pending-actions[hidden] {
    display: none !important;
}

.workspace-filters label {
    display: flex;
    align-items: center;
    gap: 0.28rem;
    margin-bottom: 0;
    color: var(--color-muted);
    font-size: 0.67rem;
    font-weight: 500;
    white-space: nowrap;
    line-height: 1;
}

.workspace-filters select,
.workspace-filters input {
    min-height: 1.35rem;
    margin-bottom: 0;
    padding-top: 0.1rem;
    padding-bottom: 0.1rem;
    padding-left: 0.35rem;
    padding-right: 0.35rem;
    font-size: 0.7rem;
    line-height: 1;
}

.workspace-filters select {
    width: auto;
    min-width: max-content;
    padding-right: 1.65rem;
}

.workspace-grid {
    --workspace-containers-column-width: 9.5rem;
    --workspace-backlog-column-width: minmax(16rem, 1fr);
    --workspace-context-column-width: 22rem;
    display: grid;
    grid-template-columns:
        minmax(7.5rem, var(--workspace-containers-column-width))
        var(--workspace-backlog-column-width)
        minmax(18rem, var(--workspace-context-column-width));
    gap: 0.45rem;
    align-items: start;
    min-width: 45rem;
}

.workspace-grid.workspace-column-resizing {
    cursor: col-resize;
    user-select: none;
}

.workspace-grid.workspace-column-resize-hover {
    cursor: col-resize;
}

.workspace-column {
    min-height: 36rem;
    max-height: calc(100vh - 5rem);
    overflow: auto;
    padding: 0.4rem;
    border: 1px solid var(--color-border);
    border-radius: 0.35rem;
    background: var(--color-bg);
}

.workspace-column-backlog,
#backlog-column-content {
    min-width: 0;
}

.workspace-column > header {
    position: sticky;
    top: 0;
    z-index: 1;
    margin-bottom: 0.25rem;
    padding: 0;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg);
}

.workspace-column > header h2 {
    margin-bottom: 0;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: uppercase;
    color: var(--color-muted);
}

.workspace-column-header-with-action {
    display: flex;
    gap: 0.5rem;
    align-items: flex-end;
    justify-content: space-between;
}

.workspace-column-header-action {
    min-height: 1.35rem !important;
    margin: 0 0 0.25rem;
    padding: 0.1rem 0.55rem !important;
    font-size: 0.7rem !important;
    line-height: 1 !important;
    white-space: nowrap;
}

.workspace-section-header-with-action {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 0.35rem;
}

.workspace-section-header-with-action h3 {
    margin-bottom: 0;
}

.workspace-inline-form {
    margin-bottom: 0.45rem;
    padding: 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: 0.35rem;
    background: var(--workspace-subtle-background);
}

.workspace-inline-form p {
    margin-bottom: 0.45rem;
}

.workspace-inline-form input,
.workspace-inline-form textarea {
    margin-bottom: 0;
}

.workspace-inline-form textarea {
    min-height: 4rem;
}

.workspace-story-list-navigation {
    display: inline-flex;
    align-items: flex-end;
    gap: 0.32rem;
    min-width: 0;
}

.workspace-story-list-tabs,
.workspace-container-tabs {
    display: inline-flex;
    align-items: flex-end;
    gap: 0.12rem;
    margin-top: 0;
    padding: 0;
    background: transparent;
}

.workspace-story-list-tabs button,
.workspace-container-tabs > button {
    gap: 0.35rem;
    min-height: 1.85rem;
    margin: 0 0 -1px;
    padding: 0.28rem 0.75rem;
    border: 1px solid var(--color-border);
    border-bottom-color: var(--color-border);
    border-radius: 0.35rem 0.35rem 0 0;
    color: var(--color-muted);
    background: var(--workspace-subtle-background);
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.1;
    box-shadow: none;
}

.workspace-story-list-tabs button:hover,
.workspace-container-tabs > button:hover {
    color: var(--color);
    border-color: var(--color-border);
    background: var(--color-card-bg);
}

.workspace-story-list-tabs button[aria-selected="true"],
.workspace-container-tabs > button[aria-selected="true"] {
    color: var(--color);
    border-bottom-color: var(--color-bg);
    background: var(--color-bg);
}

.workspace-story-list-tabs button:focus-visible,
.workspace-container-tabs > button:focus-visible {
    position: relative;
    z-index: 1;
}

.workspace-container-tabs {
    display: flex;
    margin-bottom: 0.25rem;
    border-bottom: 1px solid var(--color-border);
}

.workspace-container-tabs-action {
    display: inline-flex;
    margin-left: auto;
}

.workspace-project-scope {
    display: grid;
    gap: 0.18rem;
}

.workspace-scope-button {
    justify-content: flex-start;
    width: 100%;
    min-height: 1.55rem;
    margin: 0;
    padding: 0.22rem 0.5rem;
    border: 1px solid var(--color-border);
    color: var(--color-muted);
    background: var(--workspace-subtle-background);
    font-size: 0.72rem;
    line-height: 1.1;
    text-align: left;
    box-shadow: none;
}

.workspace-scope-button:hover,
.workspace-scope-button:focus-visible,
.workspace-scope-button.active {
    border-color: var(--primary);
    color: var(--primary-hover);
    background: color-mix(in srgb, var(--primary) 10%, var(--color-card-bg));
}

.workspace-project-group {
    padding: 0.24rem;
    border: 1px solid var(--color-border);
    border-left: 3px solid color-mix(in srgb, var(--story-project-color) 72%, var(--color-border));
    border-radius: 0.35rem;
    background: var(--color-bg);
}

.workspace-project-group.active {
    border-color: var(--primary);
    border-left-color: var(--story-project-color);
}

.workspace-project-group summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.45rem;
    cursor: pointer;
    color: var(--color);
    font-size: 0.76rem;
    font-weight: 600;
    line-height: 1.2;
}

.workspace-project-group summary small {
    flex: 0 0 auto;
    color: var(--color-muted);
    font-size: 0.64rem;
    font-weight: 500;
}

.workspace-project-group > .workspace-scope-button,
.workspace-project-group > .workspace-project-actions,
.workspace-project-group > [id$="-epic-form-container"],
.workspace-project-group > .workspace-card-list,
.workspace-project-group > p {
    margin-top: 0.22rem;
}

.workspace-project-actions {
    display: flex;
    justify-content: flex-end;
}

.team-project-management-callout {
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    padding: 1rem;
}

.project-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.project-actions .btn {
    font-size: 0.875rem;
    padding: 0.25rem 0.5rem;
}

.project-status-muted {
    color: var(--color-muted);
}

.project-create-panel {
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    background: var(--color-card-bg);
}

.project-create-panel summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 1rem;
    font-weight: 600;
}

.project-create-panel summary span {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.project-create-panel summary i {
    color: var(--primary);
    transition: transform 0.16s ease;
}

.project-create-panel[open] summary i {
    transform: rotate(90deg);
}

.project-create-panel summary small {
    color: var(--color-muted);
    font-size: 0.8rem;
    font-weight: 500;
}

.project-create-panel form {
    padding: 0 1rem 1rem;
}

.project-archive-section {
    margin-top: 1rem;
}

.workspace-epic-card {
    display: grid;
    gap: 0.18rem;
    width: 100%;
    min-height: 0;
    margin: 0;
    padding: 0.42rem 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: 0.35rem;
    color: var(--color);
    background: var(--color-card-bg);
    font: inherit;
    line-height: 1.2;
    text-align: left;
    box-shadow: none;
}

.workspace-epic-card:hover,
.workspace-epic-card:focus-visible,
.workspace-epic-card.active {
    border-color: var(--primary);
    background: color-mix(in srgb, var(--primary) 7%, var(--color-card-bg));
}

.workspace-epic-card-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.45rem;
}

.workspace-epic-card-header strong {
    min-width: 0;
    overflow-wrap: anywhere;
    font-size: 0.75rem;
    font-weight: 650;
}

.workspace-epic-card-header span,
.workspace-epic-card-description {
    color: var(--color-muted);
    font-size: 0.66rem;
}

.workspace-epic-card-header span {
    flex: 0 0 auto;
}

.workspace-epic-card-description {
    overflow-wrap: anywhere;
}

.workspace-trash-list-button {
    display: inline-flex;
    align-items: center;
    gap: 0.32rem;
    min-width: 1.85rem;
    min-height: 1.85rem;
    margin: 0 0 -1px;
    padding: 0.28rem 0.48rem;
    border: 1px solid transparent;
    border-radius: 0.35rem;
    color: var(--color-muted);
    background: transparent;
    font-size: 0.72rem;
    box-shadow: none;
}

.workspace-trash-list-button:hover,
.workspace-trash-list-button:focus-visible,
.workspace-trash-list-button.active {
    border-color: color-mix(in srgb, var(--story-backlog-trash-color) 45%, var(--color-border));
    color: var(--story-backlog-trash-color);
    background: color-mix(in srgb, var(--story-backlog-trash-color) 9%, var(--color-card-bg));
}

.workspace-story-tab-count {
    min-width: 1rem;
    padding: 0.04rem 0.28rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    color: var(--color);
    background: var(--color-card-bg);
    font-size: 0.62rem;
    line-height: 1.1;
    text-align: center;
}

.workspace-story-tab-pulse .workspace-story-tab-count {
    animation: workspace-story-tab-count-pulse 0.7s ease-in-out 2;
}

.workspace-story-filter-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    max-width: min(18rem, 38vw);
    min-height: 1.55rem;
    margin-bottom: 0.14rem;
    padding: 0.16rem 0.45rem 0.16rem 0.55rem;
    border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--color-border));
    border-radius: 999px;
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 8%, var(--color-card-bg));
    font-size: 0.68rem;
    font-weight: 600;
    line-height: 1.1;
    box-shadow: none;
}

.workspace-story-filter-badge:hover,
.workspace-story-filter-badge:focus-visible {
    border-color: var(--primary);
    color: var(--primary-hover);
    background: color-mix(in srgb, var(--primary) 12%, var(--color-card-bg));
}

.workspace-story-filter-badge span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.workspace-story-filter-badge i {
    flex: 0 0 auto;
}

@keyframes workspace-story-tab-count-pulse {
    50% {
        border-color: var(--primary);
        color: var(--primary-contrast);
        background: var(--primary);
    }
}

@media (prefers-reduced-motion: reduce) {
    .workspace-story-tab-pulse .workspace-story-tab-count {
        animation: none;
    }
}

.workspace-card-list {
    display: grid;
    gap: 0.22rem;
    min-width: 0;
}

.workspace-parent-story-card {
    margin: 0;
    padding: 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: 0.35rem;
    background: var(--color-card-bg);
    box-shadow: none;
}

.workspace-parent-story-card.active {
    border-color: var(--primary);
    background: color-mix(in srgb, var(--primary) 7%, var(--color-card-bg));
}

.workspace-parent-story-card header {
    margin-bottom: 0.35rem;
}

.workspace-parent-story-card header h4,
.workspace-parent-story-card header p {
    overflow-wrap: anywhere;
}

.workspace-trash-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.45rem;
    padding: 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: 0.35rem;
    background: var(--workspace-subtle-background);
}

.workspace-trash-actions p {
    margin: 0;
    color: var(--color-muted);
    font-size: 0.75rem;
}

.workspace-card-action {
    min-height: 1.45rem;
    padding: 0.18rem 0.55rem;
    font-size: 0.7rem;
    line-height: 1.1;
}

.story-card,
.relation-card,
.workspace-banner {
    margin-bottom: 0;
}

.story-card {
    min-width: 0;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: 0.35rem;
    background: var(--color-card-bg);
    box-shadow: none;
}

.story-card-action-required {
    border-left-color: var(--color-info);
    border-left-width: 0.22rem;
}

.workspace-dialog {
    position: fixed;
    inset: 50% auto auto 50%;
    z-index: 40;
    width: min(34rem, calc(100vw - 2rem));
    max-height: calc(100vh - 2rem);
    overflow: auto;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    background: var(--color-card-bg);
    box-shadow: var(--card-shadow);
    transform: translate(-50%, -50%);
}

.workspace-dialog::backdrop {
    background: color-mix(in srgb, var(--color-text) 22%, transparent);
}

.workspace-dialog-close-form {
    position: absolute;
    top: 0.45rem;
    right: 0.45rem;
    margin: 0;
}

.workspace-dialog-close {
    width: 1.7rem;
    min-width: 1.7rem;
    min-height: 1.7rem;
    padding: 0;
    border-radius: 999px;
}

.workspace-dialog-form {
    display: grid;
    gap: 0.5rem;
    padding: 1rem;
}

.workspace-dialog-form header {
    display: grid;
    gap: 0.2rem;
    padding-right: 2rem;
}

.workspace-dialog-form h3,
.workspace-dialog-form p {
    margin: 0;
}

.workspace-dialog-form p,
.workspace-dialog-form small {
    color: var(--color-muted);
    font-size: 0.75rem;
}

.workspace-dialog-summary {
    display: grid;
    gap: 0.15rem;
    padding: 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    background: var(--workspace-subtle-background);
}

.workspace-dialog-summary h4,
.workspace-dialog-summary p {
    margin: 0;
}

.workspace-dialog-summary h4 {
    color: var(--color-muted);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
}

.workspace-dialog-form textarea {
    min-height: 5rem;
}

.workspace-dialog-form footer {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    justify-content: flex-end;
}

button.danger {
    border-color: var(--color-error);
    background: var(--color-error);
    color: var(--primary-contrast);
}

.workspace-inspector-header-with-actions {
    display: flex;
    gap: 0.35rem;
    align-items: flex-start;
}

.workspace-inspector-heading {
    flex: 1 1 0;
    min-width: 0;
}

.story-card-compact {
    padding: 0.22rem 0.35rem;
    cursor: pointer;
}

.story-card-parent {
    background: var(--workspace-subtle-background);
}

.story-card-compact:focus {
    outline: 2px solid var(--primary-focus);
    outline-offset: 2px;
}

.story-card-compact .story-card-actions {
    display: flex;
}

.story-card-compact .story-card-title-row {
    min-height: 1.45rem;
}

.story-card summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.25rem;
    align-items: center;
    position: relative;
    min-height: 1.75rem;
    padding: 0.22rem 1.35rem 0.22rem 0.18rem;
    cursor: pointer;
    list-style: none;
}

.story-card summary::-webkit-details-marker {
    display: none;
}

.story-card summary::after {
    content: "+";
    position: absolute;
    top: 0.35rem;
    right: 0.45rem;
    color: var(--color-muted);
}

.story-card[open] summary {
    border-bottom: 1px solid var(--color-border);
    background: var(--workspace-subtle-background);
}

.story-card[open] summary::after {
    content: "-";
}

.story-card-reorderable:not([open]) summary {
    cursor: grab;
}

.story-card-compact.story-card-reorderable {
    cursor: grab;
}

.story-card-reorderable:not([open]) summary:active {
    cursor: grabbing;
}

.story-card-compact.story-card-reorderable:active {
    cursor: grabbing;
}

.story-card-title-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.24rem;
    min-width: 0;
}

.story-card-heading {
    display: flex;
    gap: 0.35rem;
    align-items: flex-start;
    max-width: 100%;
    min-width: 0;
}

.story-card-trailing {
    display: flex;
    align-items: flex-start;
    min-width: 0;
}

.story-code {
    flex: 0 0 auto;
    padding: 0.015rem 0.28rem;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    background: var(--color-card-bg);
    color: var(--color-muted);
    font-family: var(--font-family-mono);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.2;
}

.story-code-copy {
    cursor: pointer;
}

.story-code-copy:hover,
.story-code-copy:focus-visible {
    border-color: var(--primary);
    background: var(--color-card-bg);
    color: var(--primary);
}

.story-code-copy-control {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
}

.story-code-copy i {
    font-size: 0.58rem;
}

.story-card-title {
    min-width: 0;
    overflow-wrap: anywhere;
    font-size: 0.8rem;
    font-weight: 400;
    letter-spacing: 0.018em;
    line-height: 1.28;
    white-space: normal;
}

.story-card-meta {
    --story-card-action-size: 1.38rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    align-items: center;
    margin-left: auto;
    min-width: 0;
    color: var(--color-muted);
    font-size: 0.66rem;
    white-space: nowrap;
}

.story-card-required-actions {
    --story-card-action-size: 1.38rem;
    --story-card-action-required-color: var(--color-info);
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    margin-right: 0.42rem;
    min-height: var(--story-card-action-size);
}

.story-card-meta > span {
    padding: 0.015rem 0.28rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-card-bg);
}

.story-parent-indicator {
    display: inline-flex;
    gap: 0.2rem;
    align-items: center;
    color: var(--color-muted);
}

.story-container-breadcrumb {
    display: inline-flex;
    align-items: stretch;
    min-width: 0;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-card-bg);
}

.story-container-breadcrumb > section {
    min-width: 0;
}

.story-container-breadcrumb > section + section {
    border-left: 1px solid var(--color-border);
}

.story-container-breadcrumb .story-display-field {
    max-width: var(--story-container-label-max-width);
    border: 0 !important;
    border-radius: 0;
    background: transparent !important;
    background-color: transparent !important;
}

.story-container-breadcrumb > section:first-child .story-display-field {
    border-radius: 999px 0 0 999px;
}

.story-container-breadcrumb > section:last-child .story-display-field {
    border-radius: 0 999px 999px 0;
}

.story-container-breadcrumb > section:only-child .story-display-field {
    border-radius: 999px;
}

.story-card-meta .story-relationship-badge {
    display: inline-flex;
    gap: 0.2rem;
    align-items: center;
    min-height: 1.24rem;
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 7%, var(--color-card-bg));
    border-color: color-mix(in srgb, var(--primary) 30%, var(--color-border));
    font-weight: 600;
}

.story-card-required-actions .story-required-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: var(--story-card-action-size);
    min-width: var(--story-card-action-size);
    min-height: var(--story-card-action-size);
    margin-right: 0;
    padding: 0;
    border: 1px solid color-mix(in srgb, var(--story-card-action-required-color) 58%, var(--color-border));
    border-radius: 999px;
    background: color-mix(in srgb, var(--story-card-action-required-color) 13%, var(--color-card-bg));
    color: var(--story-card-action-required-color);
    font-size: 0.66rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
}

.story-card-required-actions .story-required-action:hover {
    background: color-mix(in srgb, var(--story-card-action-required-color) 20%, var(--color-card-bg));
}

.story-card-required-actions .story-required-action::after {
    content: "";
    position: absolute;
    top: 0.1rem;
    right: -0.34rem;
    bottom: 0.1rem;
    width: 1px;
    background: var(--color-border);
}

.story-card-required-actions .story-required-action i {
    font-size: 0.72rem;
}

.story-required-action-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.story-relationship-badge i {
    font-size: 0.58rem;
}

.story-relationship-badge span {
    overflow: hidden;
    max-width: 7rem;
    text-overflow: ellipsis;
}

.story-card-meta section {
    margin-bottom: 0;
}

.story-card-meta form,
.story-card-meta p {
    margin-bottom: 0;
}

.story-card-meta label,
.story-card-meta small {
    display: none;
}

.story-card-meta select,
.story-card-meta input {
    min-height: 1.38rem;
    max-width: 11rem;
    margin-bottom: 0;
    padding: 0.08rem 0.32rem;
    font-size: 0.68rem;
}

.story-card-body {
    display: grid;
    gap: 0.32rem;
    position: relative;
    min-width: 0;
    padding: 0.32rem 0.42rem 0.42rem;
}

.story-relationship-context {
    display: grid;
    gap: 0.18rem;
    margin: 0;
    padding: 0.28rem 0.36rem;
    border: 1px solid color-mix(in srgb, var(--primary) 24%, var(--color-border));
    border-radius: var(--border-radius);
    background: color-mix(in srgb, var(--primary) 5%, var(--color-card-bg));
    color: var(--color-muted);
    font-size: 0.7rem;
    line-height: 1.25;
}

.story-relationship-context p,
.story-relationship-context p > a {
    display: flex;
    gap: 0.3rem;
    align-items: center;
    min-width: 0;
    margin: 0;
}

.story-relationship-context a {
    color: inherit;
    text-decoration: none;
}

.story-relationship-context a:hover,
.story-relationship-context a:focus-visible {
    color: var(--primary);
    text-decoration: underline;
}

.story-relationship-context i {
    flex: 0 0 auto;
    width: 0.78rem;
    color: var(--primary);
    font-size: 0.62rem;
    text-align: center;
}

.story-relationship-context span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.story-relationship-context strong {
    color: var(--color);
    font-family: var(--font-family-mono);
    font-size: 0.68rem;
}

.story-card-actions {
    display: flex;
    gap: 0.2rem;
    align-items: center;
    justify-content: flex-end;
    position: relative;
    margin-left: 0.1rem;
    padding-left: 0.38rem;
}

.story-card-actions::before {
    content: "";
    align-self: stretch;
    width: 1px;
    min-height: 1.15rem;
    margin-right: 0.16rem;
    background: var(--color-border);
}

.story-card:not([open]) .story-card-actions {
    display: none;
}

.story-card-compact:not([open]) .story-card-actions {
    display: flex;
}

.story-card-action-button {
    width: var(--story-card-action-size);
    min-width: var(--story-card-action-size);
    min-height: var(--story-card-action-size);
    margin: 0;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-card-bg);
    color: var(--color-muted);
    font-size: 0.66rem;
    box-shadow: none;
}

.story-icebox-action-button:hover,
.story-icebox-action-button:focus-visible {
    border-color: color-mix(in srgb, var(--story-backlog-icebox-active-color) 55%, var(--color-border));
    color: var(--story-backlog-icebox-active-color);
    background: color-mix(in srgb, var(--story-backlog-icebox-active-color) 8%, var(--color-card-bg));
}

.story-follow-up-action-button:hover,
.story-follow-up-action-button:focus-visible {
    border-color: color-mix(in srgb, var(--primary) 55%, var(--color-border));
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 8%, var(--color-card-bg));
}

.story-breakdown-action-button:hover,
.story-breakdown-action-button:focus-visible {
    border-color: color-mix(in srgb, var(--primary) 55%, var(--color-border));
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 8%, var(--color-card-bg));
}

.story-icebox-action-button.active {
    border-color: color-mix(in srgb, var(--story-backlog-icebox-active-color) 82%, var(--color-border));
    color: var(--story-backlog-icebox-active-color);
    background: color-mix(in srgb, var(--story-backlog-icebox-active-color) 18%, var(--color-card-bg));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--story-backlog-icebox-active-color) 18%, transparent);
}

.story-icebox-action-button.active:hover,
.story-icebox-action-button.active:focus-visible {
    border-color: var(--story-backlog-icebox-active-color);
    color: var(--story-backlog-icebox-active-color);
    background: color-mix(in srgb, var(--story-backlog-icebox-active-color) 24%, var(--color-card-bg));
}

.story-trash-menu-button:hover,
.story-trash-menu-button:focus-visible,
.story-trash-menu-button[aria-expanded="true"] {
    border-color: color-mix(in srgb, var(--story-backlog-trash-color) 55%, var(--color-border));
    color: var(--story-backlog-trash-color);
    background: color-mix(in srgb, var(--story-backlog-trash-color) 8%, var(--color-card-bg));
}

.story-trash-menu {
    position: absolute;
    top: calc(100% + 0.12rem);
    right: 0;
    z-index: 20;
    min-width: 10rem;
    margin: 0;
    padding: 0.08rem;
    border: 1px solid var(--color-border);
    border-radius: 0.3rem;
    background: var(--color-bg);
    box-shadow: var(--card-shadow);
    list-style: none;
}

.story-trash-menu li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.story-trash-menu button {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 1.55rem;
    margin: 0;
    padding: 0.24rem 0.42rem;
    border: 0;
    border-radius: 0.22rem;
    background: transparent;
    color: var(--color);
    font-size: 0.72rem;
    line-height: 1.15;
    text-align: left;
    box-shadow: none;
}

.story-trash-menu button:hover,
.story-trash-menu button:focus-visible {
    background: var(--workspace-subtle-background);
    color: var(--color);
    outline: none;
}

.story-trash-menu button.danger {
    color: var(--story-backlog-trash-color);
}

.story-card-primary-fields,
.story-card-fields {
    display: grid;
    grid-template-columns: minmax(10rem, 1fr) minmax(10rem, 1.35fr) minmax(6.5rem, 0.55fr) minmax(6.5rem, 0.55fr);
    gap: 0.22rem;
}

.story-card-primary-fields {
    grid-template-columns: minmax(6rem, 0.35fr) minmax(6rem, 0.35fr) minmax(8rem, 0.45fr);
}

.story-card-fields section:first-child,
.story-card-fields section:nth-child(2) {
    grid-column: auto;
}

.story-card-primary-fields section,
.story-card-fields section,
.story-card-fields form,
.story-card-fields p {
    margin-bottom: 0;
}

.story-card-fields small {
    display: none;
}

.story-card-fields label {
    margin-bottom: 0;
    font-size: 0.64rem;
    line-height: 1.1;
}

.story-card-fields input,
.story-card-fields select,
.story-card-fields textarea {
    min-height: 1.55rem;
    margin-bottom: 0;
    padding: 0.12rem 0.35rem;
    font-size: 0.72rem;
}

.story-card-fields textarea {
    height: 1.55rem;
    min-height: 1.55rem;
    resize: vertical;
}

.story-card-body > section {
    min-width: 0;
    margin-bottom: 0;
}

.story-card-body section form,
.story-card-body section p {
    margin-bottom: 0;
}

.story-card-body section form {
    display: grid;
    gap: 0.12rem;
}

.story-card-body section label {
    margin-bottom: 0;
    font-size: 0.64rem;
    line-height: 1.1;
}

.story-card-body section input,
.story-card-body section select,
.story-card-body section textarea {
    min-height: 1.55rem;
    margin-bottom: 0;
    padding: 0.12rem 0.35rem;
    font-size: 0.72rem;
}

.story-card-body section textarea {
    height: 2.25rem;
    min-height: 2.25rem;
    resize: vertical;
}

.story-card-body section textarea[data-inline-story-description] {
    height: auto;
    overflow: hidden;
}

.story-card-body section small {
    display: none;
}

button.story-display-field,
.story-display-field {
    display: inline-flex;
    align-items: center;
    width: 100%;
    min-height: 1.38rem;
    gap: 0.24rem;
    margin: 0;
    padding: 0.08rem 0.32rem !important;
    border: 1px solid var(--color-border) !important;
    border-radius: 999px;
    background: var(--color-card-bg) !important;
    background-color: var(--color-card-bg) !important;
    color: var(--color) !important;
    font-size: 0.68rem;
    line-height: 1.1;
    text-align: left;
    box-shadow: none !important;
}

button.story-display-field:hover,
button.story-display-field:focus,
button.story-display-field:focus-visible,
.story-display-field:hover,
.story-display-field:focus,
.story-display-field:focus-visible {
    border-color: color-mix(in srgb, var(--primary) 45%, var(--color-border)) !important;
    background: color-mix(in srgb, var(--color) 4%, var(--color-card-bg)) !important;
    background-color: color-mix(in srgb, var(--color) 4%, var(--color-card-bg)) !important;
    color: var(--color) !important;
    outline: 2px solid var(--primary-focus);
}

button.story-display-field:focus:not(:focus-visible) {
    outline: none;
}

.story-display-field i {
    width: 0.78rem;
    color: var(--color-muted);
    font-size: 0.62rem;
    text-align: center;
}

.story-display-field span {
    overflow: hidden;
    min-width: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.story-display-field-title {
    border-color: transparent;
    border-radius: 0.25rem;
    padding-left: 0;
    font-size: 0.78rem;
    font-weight: 600;
}

.story-display-field-description,
.story-display-field-expected-deliverable-details {
    display: flex;
    overflow: hidden;
    align-items: flex-start;
    min-height: 2.35rem;
    padding: 0.34rem 0.42rem !important;
    border-radius: var(--border-radius);
    background: var(--workspace-subtle-background) !important;
    background-color: var(--workspace-subtle-background) !important;
}

.story-display-field-description span,
.story-display-field-expected-deliverable-details span {
    flex: 1;
    overflow: visible;
    overflow-wrap: anywhere;
    color: var(--color);
    font-size: 0.8rem;
    line-height: 1.35;
    text-overflow: clip;
    white-space: normal;
    word-break: break-word;
}

.story-display-field-description a {
    color: var(--primary);
}

[data-story-display-edit-trigger] {
    cursor: pointer;
}

.story-description-block {
    display: grid;
    gap: 0.42rem;
    padding: 0.56rem;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    background: var(--workspace-subtle-background);
}

.story-description-block .story-display-field-description {
    min-height: 0;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

.story-deliverable-block {
    display: grid;
    gap: 0.3rem;
    padding: 0.38rem 0.42rem;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    background: var(--workspace-subtle-background);
}

.story-description-block .story-deliverable-block {
    margin: 0;
    padding: 0.42rem 0 0;
    border: 0 !important;
    border-top: 1px solid var(--color-border);
    border-radius: 0;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

.story-deliverable-block h4 {
    margin-bottom: 0;
    color: var(--color-muted);
    font-size: 0.66rem;
    font-weight: 600;
    line-height: 1.1;
    text-transform: uppercase;
}

.story-deliverable-fields {
    display: grid;
    gap: 0.24rem;
}

.story-display-field-edit-button {
    flex: 0 0 auto;
    width: 1.35rem;
    min-height: 1.35rem;
    margin: 0;
    padding: 0 !important;
    border: 1px solid var(--color-border) !important;
    border-radius: 999px;
    background: var(--color-card-bg) !important;
    color: var(--color-muted) !important;
    box-shadow: none !important;
}

.story-display-field-edit-button:hover,
.story-display-field-edit-button:focus,
.story-display-field-edit-button:focus-visible {
    border-color: color-mix(in srgb, var(--primary) 45%, var(--color-border)) !important;
    color: var(--primary) !important;
    outline: 2px solid var(--primary-focus);
}

.story-summary-badge {
    width: auto;
    min-height: 1.24rem;
    padding-top: 0.035rem !important;
    padding-bottom: 0.035rem !important;
    white-space: nowrap;
}

.story-badge-menu-control {
    position: relative;
    z-index: 8;
}

.story-badge-menu-form {
    position: relative;
    margin: 0;
}

.story-badge-menu-trigger {
    cursor: default;
    outline: 2px solid var(--primary-focus);
}

.story-badge-menu-caret {
    margin-left: 0.08rem;
    color: var(--color-muted);
    font-size: 0.54rem;
}

.story-badge-menu-options {
    position: absolute;
    top: calc(100% + 0.12rem);
    left: 0;
    z-index: 20;
    min-width: max(100%, 8.5rem);
    max-height: 14rem;
    overflow-y: auto;
    margin: 0;
    padding: 0.08rem;
    border: 1px solid var(--color-border);
    border-radius: 0.3rem;
    background: var(--color-bg);
    box-shadow: var(--card-shadow);
    list-style: none;
}

.story-badge-menu-options li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.story-badge-menu-options button {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 1.55rem;
    margin: 0;
    padding: 0.24rem 0.42rem;
    border: 0;
    border-radius: 0.22rem;
    background: transparent;
    color: var(--color);
    font-size: 0.72rem;
    line-height: 1.15;
    text-align: left;
    box-shadow: none;
}

.story-badge-menu-options button:hover,
.story-badge-menu-options button:focus,
.story-badge-menu-options button[aria-current="true"] {
    background: var(--workspace-subtle-background);
    color: var(--color);
    outline: none;
}

button.story-display-field.story-state-badge,
.story-display-field.story-state-badge {
    border-color: color-mix(in srgb, var(--story-state-color) 70%, var(--color-border)) !important;
    background: color-mix(in srgb, var(--story-state-color) 18%, var(--color-card-bg)) !important;
    background-color: color-mix(in srgb, var(--story-state-color) 18%, var(--color-card-bg)) !important;
}

button.story-display-field.story-state-badge:hover,
button.story-display-field.story-state-badge:focus,
button.story-display-field.story-state-badge:focus-visible,
.story-display-field.story-state-badge:hover,
.story-display-field.story-state-badge:focus,
.story-display-field.story-state-badge:focus-visible {
    border-color: var(--story-state-color) !important;
    background: color-mix(in srgb, var(--story-state-color) 28%, var(--color-card-bg)) !important;
    background-color: color-mix(in srgb, var(--story-state-color) 28%, var(--color-card-bg)) !important;
}

.story-display-field.story-state-badge i {
    color: var(--story-state-color);
}

button.story-display-field.story-project-badge,
.story-display-field.story-project-badge {
    border-color: color-mix(in srgb, var(--story-project-color) 58%, var(--color-border)) !important;
    background: color-mix(in srgb, var(--story-project-color) 13%, var(--color-card-bg)) !important;
    background-color: color-mix(in srgb, var(--story-project-color) 13%, var(--color-card-bg)) !important;
}

button.story-display-field.story-project-badge:hover,
button.story-display-field.story-project-badge:focus,
button.story-display-field.story-project-badge:focus-visible,
.story-display-field.story-project-badge:hover,
.story-display-field.story-project-badge:focus,
.story-display-field.story-project-badge:focus-visible {
    border-color: var(--story-project-color) !important;
    background: color-mix(in srgb, var(--story-project-color) 21%, var(--color-card-bg)) !important;
    background-color: color-mix(in srgb, var(--story-project-color) 21%, var(--color-card-bg)) !important;
}

.story-display-field.story-project-badge i {
    color: var(--story-project-color);
}

.story-state-drafted {
    --story-state-color: var(--story-state-drafted-color);
}

.story-state-refined {
    --story-state-color: var(--story-state-refined-color);
}

.story-state-started {
    --story-state-color: var(--story-state-started-color);
}

.story-state-finished {
    --story-state-color: var(--story-state-finished-color);
}

.story-state-delivered {
    --story-state-color: var(--story-state-delivered-color);
}

.story-state-checked {
    --story-state-color: var(--story-state-checked-color);
}

.story-state-done {
    --story-state-color: var(--story-state-done-color);
}

.story-project-color-1 {
    --story-project-color: var(--project-color-1);
}

.story-project-color-2 {
    --story-project-color: var(--project-color-2);
}

.story-project-color-3 {
    --story-project-color: var(--project-color-3);
}

.story-project-color-4 {
    --story-project-color: var(--project-color-4);
}

.story-project-color-5 {
    --story-project-color: var(--project-color-5);
}

.story-project-color-6 {
    --story-project-color: var(--project-color-6);
}

.story-project-color-7 {
    --story-project-color: var(--project-color-7);
}

.story-project-color-8 {
    --story-project-color: var(--project-color-8);
}

.story-card-details {
    display: flex;
    flex-wrap: wrap;
    gap: 0.18rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.story-card-details li {
    display: block;
    max-width: 13rem;
    margin: 0;
    list-style: none;
}

.story-card-details section {
    margin-bottom: 0;
}

.story-card-details .story-display-field {
    color: var(--color-muted);
}

.story-card-details .story-card-timestamp {
    display: inline-flex;
    align-items: center;
    min-height: 1.38rem;
    gap: 0.24rem;
    padding: 0.08rem 0.32rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    color: var(--color-muted);
    font-size: 0.68rem;
    line-height: 1.1;
    white-space: nowrap;
}

.story-card-details .story-card-timestamp i {
    width: 0.78rem;
    font-size: 0.62rem;
    text-align: center;
}

.story-card-comments,
.story-card-activity {
    margin: 0;
    padding-top: 0.22rem;
    border-top: 1px solid var(--color-border);
}

.story-comments-panel {
    display: grid;
    gap: 0.28rem;
}

.story-comments-panel header {
    margin-bottom: 0;
}

.story-comments-panel h4,
.story-card-activity h4 {
    margin-bottom: 0.16rem;
    color: var(--color-muted);
    font-size: 0.66rem;
    font-weight: 600;
    text-transform: uppercase;
}

.story-comments-panel ol,
.story-card-activity ol {
    display: grid;
    gap: 0.12rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.story-comments-panel article {
    display: grid;
    gap: 0.08rem;
    padding: 0.28rem 0.35rem;
    border: 1px solid var(--color-border);
    border-radius: 0.3rem;
    background: var(--workspace-subtle-background);
}

.story-comments-panel article header {
    display: flex;
    gap: 0.35rem;
    align-items: baseline;
    justify-content: space-between;
}

.story-comments-panel strong {
    font-size: 0.68rem;
}

.story-comments-panel article p {
    color: var(--color-text);
    font-size: 0.72rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.story-comment-reactions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem;
    margin: 0.3rem 0 0.1rem;
    padding: 0;
    list-style: none;
}

.reaction-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    min-height: unset;
    padding: 0.1rem 0.32rem;
    border: 1px solid var(--color-border);
    border-radius: 2rem;
    background: transparent;
    color: var(--color-muted);
    font-size: 0.62rem;
    line-height: 1;
    cursor: pointer;
    transition: border-color 0.12s, color 0.12s, background 0.12s;
}

.reaction-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 8%, transparent);
}

.reaction-btn.active {
    border-color: var(--primary);
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 12%, transparent);
    font-weight: 600;
}

.reaction-btn.empty {
    opacity: 0.35;
}

.reaction-btn.empty:hover {
    opacity: 1;
}

.reaction-btn span {
    font-size: 0.6rem;
    font-weight: 600;
}

.story-comment-actions {
    display: flex;
    justify-content: flex-end;
}

.story-comment-actions button,
.story-comment-edit-form menu button {
    min-height: 1.35rem;
    padding: 0.08rem 0.38rem;
    font-size: 0.64rem;
}

.story-comment-edit-form {
    display: grid;
    gap: 0.18rem;
}

.story-comment-edit-form menu {
    display: flex;
    gap: 0.25rem;
    margin: 0;
    padding: 0;
}

.story-comments-empty {
    margin: 0;
    color: var(--color-muted);
    font-size: 0.68rem;
    line-height: 1.25;
}

.story-comments-panel form {
    margin-top: 0.04rem;
}

.story-comments-panel form button {
    justify-self: start;
    min-height: 1.5rem;
    padding: 0.12rem 0.48rem;
    font-size: 0.68rem;
}

.story-card-activity li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.3rem;
    align-items: center;
    font-size: 0.68rem;
}

.story-card-activity i {
    color: var(--color-muted);
    font-size: 0.58rem;
}

.story-card-activity li > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.story-comments-panel small,
.story-card-activity small {
    display: inline;
    color: var(--color-muted);
    font-size: 0.64rem;
    white-space: nowrap;
}

.workspace-column article:not(.workspace-banner):not(.story-card) {
    padding: 0.5rem;
    border-radius: 0.35rem;
    box-shadow: none;
}

.workspace-column article h3,
.workspace-column article h4 {
    margin-bottom: 0.15rem;
    font-size: 0.84rem;
}

.workspace-column article p {
    margin-bottom: 0.3rem;
    font-size: 0.76rem;
}

.relation-card {
    cursor: pointer;
}

.relation-card:focus {
    outline: 2px solid var(--primary-focus);
    outline-offset: 2px;
}

.workspace-inspector {
    display: grid;
    gap: 0.45rem;
}

.workspace-context-tabs {
    display: flex;
    gap: 0.18rem;
    align-items: center;
    margin-bottom: 0.1rem;
    border-bottom: 1px solid var(--color-border);
}

.workspace-context-tabs a,
.workspace-context-tabs span {
    display: inline-flex;
    align-items: center;
    min-height: 1.75rem;
    padding: 0.18rem 0.44rem;
    border: 1px solid transparent;
    border-bottom: 0;
    border-radius: 0.28rem 0.28rem 0 0;
    color: var(--color-muted);
    font-size: 0.74rem;
    font-weight: 600;
}

.workspace-context-tabs a:hover,
.workspace-context-tabs a:focus-visible,
.workspace-context-tabs .active {
    border-color: var(--color-border);
    background: var(--color-card-bg);
    color: var(--color);
}

.workspace-context-tabs .disabled {
    opacity: 0.55;
}

.workspace-inspector > header p,
.workspace-inspector > p {
    margin-bottom: 0;
    color: var(--color-muted);
    font-size: 0.76rem;
}

.story-share-status {
    position: absolute;
    z-index: 1;
    top: calc(100% + 0.2rem);
    left: 0;
    padding: 0.18rem 0.35rem;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    background: var(--color-card-bg);
    box-shadow: var(--card-shadow);
    color: var(--color);
    font-size: 0.68rem;
    white-space: nowrap;
}

.story-share-status:empty {
    display: none;
}

.workspace-scope-summary {
    display: grid;
    gap: 0.5rem;
    margin-bottom: 0;
}

.workspace-scope-summary header {
    margin-bottom: 0;
}

.workspace-scope-summary h3 {
    margin-bottom: 0.12rem;
    font-size: 0.95rem;
}

.workspace-scope-summary p {
    margin-bottom: 0;
    color: var(--color-muted);
    font-size: 0.76rem;
}

.workspace-scope-summary nav {
    display: grid;
    gap: 0.24rem;
}

.workspace-scope-link {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    justify-content: space-between;
    min-height: 2rem;
    padding: 0.32rem 0.42rem;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    background: var(--color-card-bg);
    color: var(--color);
    font-size: 0.78rem;
}

.workspace-scope-link:hover,
.workspace-scope-link:focus-visible,
.workspace-scope-link.active {
    border-color: color-mix(in srgb, var(--primary) 45%, var(--color-border));
    background: color-mix(in srgb, var(--primary) 7%, var(--color-card-bg));
    color: var(--color);
}

.workspace-scope-link.highlighted {
    border-color: color-mix(in srgb, var(--color-info) 58%, var(--color-border));
    background: color-mix(in srgb, var(--color-info) 13%, var(--color-card-bg));
}

.workspace-scope-link strong {
    min-width: 1.8rem;
    padding: 0.05rem 0.34rem;
    border-radius: 999px;
    background: var(--workspace-subtle-background);
    color: var(--color-muted);
    font-size: 0.72rem;
    line-height: 1.25;
    text-align: center;
}

.workspace-scope-link.highlighted strong {
    background: color-mix(in srgb, var(--color-info) 18%, var(--color-card-bg));
    color: var(--color-info);
}

.workspace-inspector-relations {
    display: grid;
    gap: 0.3rem;
    margin-bottom: 0;
}

.workspace-inspector-relations > header {
    margin-bottom: 0;
    padding-top: 0.15rem;
    border-top: 1px solid var(--color-border);
}

.workspace-inspector-relations > header h4 {
    margin-bottom: 0;
    color: var(--color-muted);
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
}

.highlight-flash {
    animation: story-highlight 2s ease;
}

@keyframes story-highlight {
    0% {
        outline: 3px solid var(--primary);
        background: color-mix(in srgb, var(--primary) 14%, var(--color-card-bg));
    }
    100% {
        outline: 0 solid transparent;
        background: var(--color-card-bg);
    }
}

/* ─── Story Inspector Card ──────────────────────────────────────────────── */

.story-inspector-card {
    display: grid;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    background: var(--color-card-bg);
    overflow: hidden;
}

.story-inspector-card.story-card-action-required {
    border-left-color: var(--color-info);
    border-left-width: 0.22rem;
}

/* Header */

.story-inspector-header {
    display: grid;
    gap: 0.38rem;
    padding: 0.65rem 0.75rem 0.55rem;
    border-bottom: 1px solid var(--color-border);
    background: color-mix(in srgb, var(--color-card-bg) 100%, transparent);
}

.story-inspector-title-row {
    display: flex;
    gap: 0.35rem;
    align-items: flex-start;
    min-width: 0;
}

.story-inspector-title-heading {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.story-inspector-title-control {
    min-width: 0;
}

.story-inspector-title-control .story-display-field-title {
    display: block;
    width: 100%;
    min-height: auto;
    padding: 0.1rem 0;
    border: none !important;
    border-radius: 0;
    background: transparent !important;
    background-color: transparent !important;
    color: var(--color);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.25;
    text-align: left;
    white-space: normal;
    word-break: break-word;
}

.story-inspector-title-control .story-display-field-title span {
    display: block;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
}

.story-inspector-title-control .story-display-field-title:hover,
.story-inspector-title-control .story-display-field-title:focus,
.story-inspector-title-control .story-display-field-title:focus-visible {
    background: color-mix(in srgb, var(--primary) 6%, var(--color-card-bg));
    border: none;
    border-radius: 0.2rem;
    outline: none;
    box-shadow: none;
}

.story-inspector-title-control form input {
    padding: 0.1rem 0.2rem;
    margin-bottom: 0;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.25;
    border-radius: 0.2rem;
}

.story-inspector-structural-actions {
    flex: 0 0 auto;
    display: flex;
    gap: 0.12rem;
    align-items: center;
    margin-top: 0.1rem;
}

.story-inspector-trash-banner {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.6rem;
    align-items: center;
    padding: 0.45rem 0.55rem;
    border: 1px solid color-mix(in srgb, var(--story-backlog-trash-color) 45%, var(--color-border));
    border-radius: var(--border-radius);
    background: color-mix(in srgb, var(--story-backlog-trash-color) 10%, var(--color-card-bg));
    color: var(--color);
    font-size: 0.73rem;
}

.story-inspector-trash-banner span:first-child {
    display: inline-flex;
    gap: 0.32rem;
    align-items: center;
    font-weight: 600;
    color: var(--story-backlog-trash-color);
}

.story-inspector-trash-banner span:last-child {
    color: var(--color-muted);
}

.story-inspector-trash-banner .story-restore-action-button {
    margin-left: auto;
}

.story-restore-action-button:hover,
.story-restore-action-button:focus-visible {
    border-color: color-mix(in srgb, var(--story-backlog-trash-color) 55%, var(--color-border));
    color: var(--story-backlog-trash-color);
    background: color-mix(in srgb, var(--story-backlog-trash-color) 8%, var(--color-card-bg));
}

/* Action row: action button + state badge */

.story-inspector-action-row {
    display: flex;
    gap: 0.45rem;
    align-items: center;
}

.story-inspector-action-btn {
    display: inline-flex;
    gap: 0.38rem;
    align-items: center;
    min-height: 1.75rem;
    padding: 0.22rem 0.72rem;
    border: none;
    border-radius: 999px;
    background: var(--inspector-action-color, var(--primary));
    color: #fff;
    font-size: 0.76rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: filter 0.12s;
}

.story-inspector-action-btn:hover {
    filter: brightness(0.9);
}

.story-inspector-action-btn i {
    font-size: 0.72rem;
}

/* Darken "check" action button: #2ecc71 is only ~2.3:1 with white */
.story-inspector-action-check {
    background: color-mix(in srgb, var(--story-state-checked-color) 65%, black);
}

.story-inspector-action-group {
    display: inline-flex;
    border: 1.5px solid var(--color-border);
    border-radius: 999px;
    overflow: hidden;
}

.story-inspector-action-group .story-inspector-action-btn {
    border-radius: 0;
    border: none;
    outline: none;
    padding: 0.22rem 0.6rem;
    transition: background 0.12s;
}

.story-inspector-action-group .story-inspector-action-accept:hover {
    filter: none;
    background: color-mix(in srgb, var(--inspector-action-color) 75%, #000);
}

.story-inspector-action-group .story-inspector-action-request-changes {
    background: var(--story-state-started-color);
    color: #fff;
    border-left: 1.5px solid rgba(255, 255, 255, 0.3);
}

.story-inspector-owner {
    margin: 0;
    color: var(--color-muted);
    font-size: 0.72rem;
}

.story-inspector-owner strong {
    font-weight: 500;
    color: var(--color);
}

.story-inspector-points {
    display: flex;
    align-items: center;
}

.story-inspector-points .story-display-field {
    min-height: 1.4rem;
    padding: 0.1rem 0.42rem;
    font-size: 0.72rem;
}

/* Body */

.story-inspector-body {
    display: grid;
    gap: 0;
}

.story-inspector-section {
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid var(--color-border);
}

.story-inspector-section:last-child {
    border-bottom: none;
}

.story-inspector-section-label {
    margin-bottom: 0.3rem;
    color: var(--color-muted);
    font-size: 0.64rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Description: prose block */

.story-inspector-description-section .story-display-field-description {
    font-size: 0.84rem;
    line-height: 1.55;
}

.story-inspector-description-section .story-display-field-description span {
    white-space: pre-wrap;
    word-break: break-word;
}

.story-inspector-description-section form textarea {
    padding: 0.34rem 0.42rem;
    margin-bottom: 0;
    font-size: 0.84rem;
    line-height: 1.55;
    background: var(--workspace-subtle-background);
}

/* Expected deliverable: reference block */

.story-inspector-deliverable-section .story-display-field-expected-deliverable-details span {
    font-size: 0.84rem;
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
}

.story-inspector-deliverable-section form textarea {
    padding: 0.34rem 0.42rem;
    margin-bottom: 0;
    font-size: 0.84rem;
    line-height: 1.55;
    background: var(--workspace-subtle-background);
}

/* Relationships */

.story-inspector-relations-fields {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.22rem;
    margin-bottom: 0.3rem;
}

.story-inspector-relationships {
    display: grid;
    gap: 0.35rem;
}

.story-inspector-relation-group {
    min-width: 0;
}

.story-inspector-relation-label {
    margin: 0.45rem 0 0;
    color: var(--color-muted);
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.story-inspector-relation-link {
    display: flex;
    gap: 0.35rem;
    align-items: baseline;
    flex-wrap: wrap;
    margin: 0.18rem 0 0;
    color: var(--color-muted);
    font-size: 0.74rem;
}

.story-inspector-relation-link a {
    display: inline-flex;
    gap: 0.3rem;
    align-items: center;
    color: var(--primary);
    font-size: 0.74rem;
    text-decoration: none;
}

.story-inspector-relation-link a:hover {
    text-decoration: underline;
}

.story-inspector-relation-list a {
    max-width: 100%;
}

.story-inspector-relation-item {
    display: inline-flex;
    max-width: 100%;
    gap: 0.18rem;
    align-items: center;
}

.story-inspector-relation-empty {
    color: var(--color-muted);
    font-size: 0.74rem;
}

.story-inspector-relation-picker {
    position: relative;
}

.story-inspector-relation-picker summary {
    list-style: none;
}

.story-inspector-relation-picker summary::-webkit-details-marker {
    display: none;
}

.story-inspector-relation-add-button {
    display: inline-flex;
    gap: 0.24rem;
    align-items: center;
    min-height: 1.35rem;
    padding: 0.08rem 0.38rem;
    border: 1px solid var(--color-border);
    border-radius: 0.3rem;
    color: var(--primary);
    background: var(--color-card-bg);
    font-size: 0.72rem;
    cursor: pointer;
}

.story-inspector-relation-add-button:hover,
.story-inspector-relation-add-button:focus-visible {
    border-color: var(--primary);
    background: var(--workspace-subtle-background);
}

.story-inspector-relation-picker-form {
    margin: 0;
}

.story-inspector-relation-picker-options {
    min-width: 14rem;
}

.story-inspector-relation-delete-button {
    width: 1.25rem;
    height: 1.25rem;
    min-height: 1.25rem;
    padding: 0;
    border-color: transparent;
    color: var(--color-muted);
    background: transparent;
    box-shadow: none;
}

.story-inspector-relation-delete-button:hover,
.story-inspector-relation-delete-button:focus-visible {
    border-color: color-mix(in srgb, var(--story-backlog-trash-color) 45%, var(--color-border));
    color: var(--story-backlog-trash-color);
    background: color-mix(in srgb, var(--story-backlog-trash-color) 8%, var(--color-card-bg));
}

.story-inspector-related-list {
    margin-top: 0.45rem;
    display: grid;
    gap: 0.12rem;
}

.story-inspector-related-label {
    margin: 0 0 0.18rem;
    color: var(--color-muted);
    font-size: 0.64rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    cursor: pointer;
    user-select: none;
    list-style: none;
}

.story-inspector-related-label::-webkit-details-marker {
    display: none;
}

.story-inspector-related-label::after {
    content: ' ›';
    font-size: 0.7rem;
}

.story-inspector-related-list[open] > .story-inspector-related-label::after {
    content: ' ⌄';
}

.story-inspector-related-link {
    display: flex;
    gap: 0.4rem;
    align-items: center;
    padding: 0.2rem 0.3rem;
    border-radius: 0.22rem;
    color: var(--color);
    font-size: 0.73rem;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.story-inspector-related-link:hover {
    background: var(--workspace-subtle-background);
    color: var(--color);
    text-decoration: none;
}

.story-inspector-related-link span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.story-inspector-related-state {
    flex: 0 0 auto;
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--story-state-color, var(--color-border));
}

/* People */

.story-inspector-people-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.22rem;
}

/* History (collapsed details) */

.story-inspector-history {
    padding: 0.5rem 0.75rem;
}

.story-inspector-history > summary {
    color: var(--color-muted);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    cursor: pointer;
    user-select: none;
}

.story-inspector-history > summary:hover {
    color: var(--color);
}

.story-inspector-history .story-card-activity {
    margin-top: 0.35rem;
    border-top: none;
    padding-top: 0;
}

.story-inspector-timestamps {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.35rem;
    color: var(--color-muted);
    font-size: 0.66rem;
}

.story-inspector-timestamps span {
    display: inline-flex;
    gap: 0.28rem;
    align-items: center;
}

/* Empty field affordance */

.story-display-field-empty {
    border-style: dashed !important;
    border-color: color-mix(in srgb, var(--color-muted) 35%, var(--color-border)) !important;
    background: transparent !important;
    background-color: transparent !important;
    color: var(--color-muted) !important;
}

.story-display-field-empty i {
    opacity: 0.5;
}

.story-display-field-empty:hover,
.story-display-field-empty:focus,
.story-display-field-empty:focus-visible {
    border-style: solid !important;
    border-color: color-mix(in srgb, var(--primary) 55%, var(--color-border)) !important;
    background: color-mix(in srgb, var(--primary) 6%, var(--color-card-bg)) !important;
    background-color: color-mix(in srgb, var(--primary) 6%, var(--color-card-bg)) !important;
    color: var(--primary) !important;
}

/* Field hints */

.story-field-with-hint {
    position: relative;
}

.story-inspector-field-hint {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 10;
    margin-top: 0.18rem;
    color: var(--color-muted);
    font-size: 0.68rem;
    font-style: italic;
    line-height: 1.3;
    pointer-events: none;
    white-space: nowrap;
}

/* Comment kind styling */

.story-comment-delivery {
    border-left: 3px solid var(--story-state-delivered-color);
    background: color-mix(in srgb, var(--story-state-delivered-color) 8%, var(--workspace-subtle-background)) !important;
}

.story-comment-change_request {
    border-left: 3px solid var(--color-error);
    background: color-mix(in srgb, var(--color-error) 8%, var(--workspace-subtle-background)) !important;
}

.story-comment-delivery .story-comment-evidence-label,
.story-comment-delivery .story-comment-note-label {
    margin: 0.18rem 0 0.08rem;
    color: var(--color-muted);
    font-size: 0.62rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.story-comment-ref {
    font-family: var(--font-monospace, monospace);
    font-size: 0.74rem;
    color: var(--color-text);
    word-break: break-all;
}

@media (max-width: 36rem) {
    .workspace-grid,
    .help-page,
    .profile-layout {
        min-width: 0;
        grid-template-columns: 1fr;
    }

    .help-navigation {
        position: static;
    }

    .workspace-filter-bar .workspace-filters {
        flex-wrap: wrap;
    }

    .workspace-column {
        max-height: none;
    }

    .story-card summary,
    .story-card-primary-fields,
    .story-card-fields {
        grid-template-columns: 1fr;
    }

    .story-card-meta {
        flex-wrap: wrap;
        justify-content: flex-start;
        white-space: normal;
    }
}