/* Nira: projects, board, issue view. Built on tokens.css. */

.nira {
    width: 100%;
    font-family: var(--font-text);
    color: var(--text-body);
    padding-bottom: var(--space-7);
}

.nira a { color: var(--link); }
.nira a:hover { color: var(--link-hover); }

.nira-crumbs {
    font-size: var(--size-body-sm);
    color: var(--text-muted);
    margin: var(--space-4) 0 var(--space-2);
}
.nira-crumbs a { color: var(--text-muted); }
.nira-crumbs span { margin: 0 var(--space-1); }

.nira-titlebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}
.nira-titlebar h1, .nira-titlebar h2 {
    font-family: var(--font-display);
    font-weight: var(--w-medium);
    margin: 0;
}
.nira-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }

.nira-error {
    background: #FBE3DE;
    color: #9b3324;
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-3);
    margin-bottom: var(--space-3);
    font-size: var(--size-body-sm);
}

.nira-muted { color: var(--text-muted); }
.nira-small { font-size: var(--size-body-sm); }

/* ---- Projects list ----------------------------------------- */
.nira-project-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-4);
}
.nira-project-card {
    display: block;
    background: var(--surface-card);
    border: 1px solid var(--border-subtle);
    border-left: 4px solid var(--accent-strong);
    border-radius: var(--radius-md);
    padding: var(--space-4) var(--space-5);
    box-shadow: var(--shadow-xs);
    transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.nira-project-card:hover { box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.nira-project-card h4 { font-family: var(--font-display); margin: var(--space-1) 0; color: var(--text-strong); }
.nira-project-key {
    font-family: var(--font-mono);
    font-size: var(--size-caption);
    letter-spacing: var(--tracking-wide);
    color: var(--text-muted);
}
.nira-project-stats { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--space-4); font-size: var(--size-body-sm); color: var(--text-muted); margin-top: var(--space-3); }
.nira-project-stats > span { white-space: nowrap; }
.nira-project-products { display: flex; flex-wrap: wrap; gap: 4px; margin-top: var(--space-2); }
.nira-project-products span { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
    color: var(--text-muted); background: var(--gray-100); border-radius: 4px; padding: 1px 6px; }
.nira-project-stats .nira-project-phase { margin-left: auto; padding: 1px 8px; border-radius: var(--radius-pill);
    background: var(--green-spring-100); color: var(--ink); font-weight: var(--w-medium); white-space: nowrap; }
.nira-empty {
    background: var(--surface-card);
    border: 1px dashed var(--border-default);
    border-radius: var(--radius-md);
    padding: var(--space-6);
    text-align: center;
    color: var(--text-muted);
}

/* ---- Board toolbar ----------------------------------------- */
.nira-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}
.nira-toolbar .form-control { width: auto; height: 34px; padding: 2px 8px; font-size: var(--size-body-sm); }
.nira-toolbar .nira-search { min-width: 200px; }
.nira-toolbar label { display: inline-flex; align-items: center; gap: var(--space-1); margin: 0; font-size: var(--size-body-sm); }
.nira-toggle { cursor: pointer; }

/* ---- Board ------------------------------------------------- */
.nira-board { overflow-x: auto; padding-bottom: var(--space-3); }
.nira-board-header, .nira-lane-row {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(240px, 1fr);
    gap: var(--space-3);
}
.nira-col-head {
    font-size: var(--size-overline);
    letter-spacing: var(--tracking-overline);
    text-transform: uppercase;
    font-weight: var(--w-medium);
    color: var(--text-muted);
    padding: var(--space-2) var(--space-3);
    background: var(--gray-100);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    border-top: 3px solid var(--gray-300);
}
.nira-col-head.cat-in_progress { border-top-color: var(--slate); }
.nira-col-head.cat-done { border-top-color: var(--green-spring-600); }
.nira-col-count { margin-left: var(--space-1); color: var(--text-subtle); }

.nira-lane { margin-top: var(--space-3); }
.nira-lane-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-weight: var(--w-medium);
    font-size: var(--size-body-sm);
    color: var(--text-strong);
    margin-bottom: var(--space-2);
    cursor: pointer;
    user-select: none;
}
.nira-col-body {
    background: var(--gray-100);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    padding: var(--space-2);
    min-height: 120px;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.nira-lane .nira-col-body { border-radius: var(--radius-md); min-height: 60px; }

.nira-card {
    background: var(--surface-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-3);
    box-shadow: var(--shadow-xs);
    cursor: grab;
    font-size: var(--size-body-sm);
}
.nira-card:hover { border-color: var(--border-default); box-shadow: var(--shadow-sm); }
.nira-card-title { color: var(--text-strong); margin-bottom: var(--space-2); word-break: break-word; }
.nira-card-title a { color: inherit; }
.nira-card-meta { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.nira-card-meta .nira-spacer { flex: 1; }
.nira-card.is-done .nira-card-title { color: var(--text-muted); }
.nira-card-ghost { opacity: 0.4; }
.nira-card-chosen { box-shadow: var(--shadow-md); }

.nira-key { font-family: var(--font-mono); font-size: var(--size-caption); color: var(--text-muted); white-space: nowrap; }
.nira-card.is-done .nira-key { text-decoration: line-through; }
.nira-points {
    background: var(--gray-150);
    border-radius: var(--radius-pill);
    padding: 0 7px;
    font-size: var(--size-caption);
    color: var(--text-body);
}
.nira-chip {
    display: inline-block;
    background: var(--slate-100);
    color: var(--slate);
    border-radius: var(--radius-sm);
    padding: 0 6px;
    font-size: var(--size-caption);
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}
.nira-chip.epic { background: var(--ink); color: var(--gray-50); }
.nira-chip.label { background: var(--teal-100); color: #4c6f77; }
.nira-chip button { border: 0; background: none; padding: 0 0 0 4px; color: inherit; cursor: pointer; }

/* ---- Icons, avatars, badges ------------------------------ */
.nira-icon { display: block; flex: none; }

/* Issue types: a small tile per type. Greens carry ink, per the brand rule. */
.nira-type {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 5px;
    flex: none;
}
.nira-type.t-epic { background: var(--ink); color: var(--green-spring); }
.nira-type.t-story { background: var(--green-spring); color: var(--ink); }
.nira-type.t-task { background: var(--teal-100); color: #3F6870; }
.nira-type.t-bug { background: #FBE6E2; color: #B23C2C; }
.nira-type.t-subtask { background: var(--gray-150); color: var(--gray-700); }

/* Priorities: the circle-arrow family, coloured by urgency. */
.nira-priority { display: inline-flex; flex: none; }
.nira-priority.p-highest, .nira-priority.p-high { color: #C94A39; }
.nira-priority.p-medium { color: #9A7414; }
.nira-priority.p-low, .nira-priority.p-lowest { color: var(--slate); }

/* Design-system Avatar: ink circle, spring-green initials. */
.nira-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    font-family: var(--font-display);
    font-size: 9.5px;
    font-weight: var(--w-medium);
    letter-spacing: 0.01em;
    color: var(--green-spring);
    background: var(--ink-2);
    flex: none;
}
.nira-avatar.empty { background: var(--surface-card); border: 1.5px dashed var(--gray-400); }
/* Clients: slate instead of ink, so they read apart from employees at a glance. */
.nira-avatar.is-external { background: var(--slate-100); color: #3F4A75; box-shadow: inset 0 0 0 1.5px var(--slate); }
.nira-avatar.lg { width: 32px; height: 32px; font-size: 12px; }
.nira-avatar-filter { display: inline-flex; padding-left: 4px; }
.nira-avatar-filter .nira-avatar {
    margin-left: -6px;
    width: 30px;
    height: 30px;
    font-size: 11px;
    cursor: pointer;
    box-shadow: 0 0 0 2px var(--surface-page);
    transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.nira-avatar-filter .nira-avatar:hover { transform: translateY(-1px); }
.nira-avatar-filter .nira-avatar.active { box-shadow: 0 0 0 2px var(--surface-page), 0 0 0 4px var(--green-spring); z-index: 1; }

/* Design-system Badge (pill + status dot) for workflow statuses. */
.nira-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 22px;
    padding: 0 10px;
    border-radius: var(--radius-pill);
    font-size: var(--size-caption);
    font-weight: 600;
    letter-spacing: 0.01em;
    white-space: nowrap;
    background: var(--gray-100);
    color: var(--gray-700);
}
.nira-status::before, .nira-dot {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--gray-500);
    flex: none;
}
.nira-status.cat-in_progress { background: var(--slate-100); color: #4E5A85; }
.nira-status.cat-done { background: #E2F5EA; color: #1E7B47; }
.nira-status.cat-in_progress::before, .nira-dot.cat-in_progress { background: var(--slate); }
.nira-status.cat-done::before, .nira-dot.cat-done { background: var(--status-success); }

/* ---- Select (replaces native <select>) ---------------------- */
.nira-select { position: relative; min-width: 0; }
.nira-select-trigger {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    height: 40px;
    padding: 0 10px 0 12px;
    background: var(--surface-card);
    border: 1.5px solid var(--border-default);
    border-radius: var(--radius-md);
    font-family: var(--font-text);
    font-size: var(--size-body-sm);
    color: var(--text-strong);
    text-align: left;
    cursor: pointer;
    transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
/* styles.css paints every button:hover green; triggers keep their own surface. */
.nira-select-trigger:hover { border-color: var(--gray-500); background: var(--surface-card); }
.nira-select-trigger:focus { outline: none; }
.nira-select-trigger:focus-visible, .nira-select.open .nira-select-trigger {
    border-color: var(--green-spring-600);
    box-shadow: 0 0 0 3px rgba(47, 185, 107, 0.16);
}
.nira-select.disabled .nira-select-trigger { background: var(--gray-100); cursor: not-allowed; opacity: 0.6; }
.nira-select-trigger > .nira-option-content { flex: 1; }
.nira-select-placeholder { flex: 1; color: var(--text-subtle); }
.nira-select-caret { margin-left: auto; color: var(--text-muted); transition: transform var(--dur-base) var(--ease-out); }
.nira-select.open .nira-select-caret { transform: rotate(180deg); }

.nira-select.s-sm .nira-select-trigger { height: 34px; padding: 0 8px 0 10px; }

/* Toolbar filters: pill-shaped, and tinted spring green once a filter is set. */
.nira-select.v-filter .nira-select-trigger { border-radius: var(--radius-pill); width: auto; min-width: 128px; max-width: 240px; }
.nira-select.v-filter.has-value .nira-select-trigger { background: var(--green-spring-100); border-color: var(--green-spring-600); }

/* Status: the trigger is the status badge. */
.nira-select.v-status .nira-select-trigger { font-weight: 600; background: var(--gray-100); border-color: transparent; }
.nira-select.v-status.cat-in_progress .nira-select-trigger { background: var(--slate-100); color: #4E5A85; }
.nira-select.v-status.cat-done .nira-select-trigger { background: #E2F5EA; color: #1E7B47; }
.nira-select.v-status .nira-select-caret { color: inherit; }

.nira-select-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 1060;
    min-width: 100%;
    width: max-content;
    max-width: 340px;
    background: var(--surface-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    padding: var(--space-1);
    animation: nira-menu-in var(--dur-fast) var(--ease-out);
}
.nira-select-menu.up { top: auto; bottom: calc(100% + 6px); }
@keyframes nira-menu-in { from { opacity: 0; transform: translateY(-4px); } }
.nira-select-menu.up { animation-name: nira-menu-in-up; }
@keyframes nira-menu-in-up { from { opacity: 0; transform: translateY(4px); } }

.nira-select-search {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0 0 var(--space-1);
    padding: 0 var(--space-2);
    height: 34px;
    border-bottom: 1px solid var(--border-subtle);
    color: var(--text-muted);
}
.nira-select-search input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: none;
    background: transparent;
    font-family: var(--font-text);
    font-size: var(--size-body-sm);
    color: var(--text-strong);
}
.nira-select-options { max-height: 264px; overflow-y: auto; }
.nira-select-option {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 34px;
    padding: 0 var(--space-2);
    border-radius: var(--radius-sm);
    font-size: var(--size-body-sm);
    color: var(--text-body);
    cursor: pointer;
}
.nira-select-option.active { background: var(--mist); color: var(--text-strong); }
.nira-select-option.selected { font-weight: 600; color: var(--text-strong); }
.nira-select-check { margin-left: auto; color: var(--green-spring-700); }
.nira-select-empty { padding: var(--space-2); font-size: var(--size-body-sm); color: var(--text-muted); }

.nira-option-content { display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0; }
.nira-option-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nira-option-content .nira-avatar { width: 22px; height: 22px; font-size: 9px; }

/* ---- Modal ------------------------------------------------- */
.nira-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(14, 20, 18, 0.45);
    z-index: 1050;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 6vh var(--space-4);
    overflow-y: auto;
}
.nira-modal {
    background: var(--surface-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    width: 100%;
    max-width: 640px;
}
.nira-modal-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--border-subtle);
}
.nira-modal-head h4 { margin: 0; font-family: var(--font-display); font-weight: var(--w-medium); }
.nira-modal-body { padding: var(--space-4) var(--space-5); }
.nira-modal-foot {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    border-top: 1px solid var(--border-subtle);
}
.nira-dialog-message { margin: 0; color: var(--text-body); white-space: pre-line; }
.nira-close { border: 0; background: none; font-size: 22px; line-height: 1; color: var(--text-muted); cursor: pointer; }

.nira-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.nira-form-grid .full { grid-column: 1 / -1; }
.nira-field label { font-size: var(--size-body-sm); font-weight: var(--w-medium); margin-bottom: var(--space-1); color: var(--text-strong); }
.nira-field .form-control { font-size: var(--size-body-sm); }
.nira-hint { font-size: var(--size-caption); color: var(--text-muted); margin-top: 2px; }

.nira-status-row {
    display: grid;
    grid-template-columns: auto 1fr 160px auto;
    gap: var(--space-2);
    align-items: center;
    margin-bottom: var(--space-2);
}
.nira-status-row .form-control { height: 32px; padding: 2px 8px; font-size: var(--size-body-sm); }
.nira-move-btns { display: flex; flex-direction: column; }
.nira-move-btns button { border: 0; background: none; line-height: 1; padding: 0 4px; color: var(--text-muted); cursor: pointer; }
.nira-move-btns button:disabled { opacity: 0.3; cursor: default; }

/* ---- Issue view -------------------------------------------- */
.nira-issue { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--space-6); }
.nira-issue-key { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); }
.nira-issue-title {
    font-family: var(--font-display);
    font-size: var(--size-h2);
    font-weight: var(--w-medium);
    color: var(--text-strong);
    padding: var(--space-1) var(--space-2);
    margin: 0 calc(-1 * var(--space-2)) var(--space-4);
    border-radius: var(--radius-sm);
    cursor: text;
    word-break: break-word;
}
.nira-issue-title:hover { background: var(--gray-100); }
.nira-issue-title-input { font-size: var(--size-h2); font-family: var(--font-display); margin-bottom: var(--space-4); }

.nira-section { margin-bottom: var(--space-6); }
.nira-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: var(--w-medium);
    color: var(--text-strong);
    margin-bottom: var(--space-2);
}
.nira-markdown {
    padding: var(--space-2);
    margin: 0 calc(-1 * var(--space-2));
    border-radius: var(--radius-sm);
    cursor: text;
    min-height: 40px;
    word-break: break-word;
}
.nira-markdown:hover { background: var(--gray-100); }
.nira-markdown.readonly { cursor: auto; }
.nira-markdown.readonly:hover { background: none; }
.nira-markdown p:last-child { margin-bottom: 0; }
.nira-markdown pre { background: var(--gray-100); padding: var(--space-3); border-radius: var(--radius-sm); }
.nira-markdown img { max-width: 100%; }
.nira-markdown table { border-collapse: collapse; }
.nira-markdown td, .nira-markdown th { border: 1px solid var(--border-subtle); padding: 4px 8px; }
.nira-placeholder { color: var(--text-subtle); }
.nira-mention {
    background: var(--green-spring-100);
    color: var(--green-spring-700);
    border-radius: var(--radius-sm);
    padding: 0 3px;
    font-weight: var(--w-medium);
}
.nira-editor textarea { font-family: var(--font-text); font-size: var(--size-body-sm); min-height: 140px; }
.nira-editor-actions { display: flex; gap: var(--space-2); margin-top: var(--space-2); align-items: center; }

.nira-list { border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--surface-card); }
.nira-list-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-top: 1px solid var(--border-subtle);
    font-size: var(--size-body-sm);
}
.nira-list-row:first-child { border-top: 0; }
.nira-list-row .nira-grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nira-list-row .nira-remove { border: 0; background: none; color: var(--text-subtle); cursor: pointer; }
.nira-list-row .nira-remove:hover { color: var(--status-danger); }
.nira-link-type { color: var(--text-muted); font-size: var(--size-caption); min-width: 92px; }
.nira-progress { height: 6px; border-radius: var(--radius-pill); background: var(--gray-200); overflow: hidden; margin-bottom: var(--space-2); }
.nira-progress > div { height: 100%; background: var(--green-spring-600); }
.nira-inline-form { display: flex; gap: var(--space-2); margin-top: var(--space-2); }
.nira-inline-form .form-control { height: 32px; font-size: var(--size-body-sm); padding: 2px 8px; }

.nira-tabs { display: flex; gap: var(--space-4); border-bottom: 1px solid var(--border-subtle); margin-bottom: var(--space-3); }
.nira-tabs button {
    border: 0;
    background: none;
    padding: var(--space-2) 0;
    color: var(--text-muted);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    cursor: pointer;
    font-weight: var(--w-medium);
}
.nira-tabs button.active { color: var(--text-strong); border-bottom-color: var(--green-spring-600); }

.nira-comment { display: flex; gap: var(--space-3); margin-bottom: var(--space-4); }
.nira-comment-body { flex: 1; min-width: 0; }
.nira-comment-head { font-size: var(--size-body-sm); margin-bottom: var(--space-1); }
.nira-comment-head strong { color: var(--text-strong); }
.nira-comment.internal .nira-markdown { background: #FFF7E3; }
.nira-internal-tag { font-size: var(--size-caption); color: #8a6512; background: #FCEFC7; border-radius: var(--radius-sm); padding: 0 6px; margin-left: var(--space-1); }
.nira-comment-tools button { border: 0; background: none; padding: 0; margin-right: var(--space-3); font-size: var(--size-caption); color: var(--text-muted); cursor: pointer; }
.nira-comment-tools button:hover { color: var(--text-strong); }

.nira-mention-menu {
    position: absolute;
    z-index: 20;
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    min-width: 220px;
    max-height: 220px;
    overflow-y: auto;
}
.nira-mention-menu div { padding: var(--space-2) var(--space-3); cursor: pointer; font-size: var(--size-body-sm); display: flex; gap: var(--space-2); align-items: center; }
.nira-mention-menu div.active, .nira-mention-menu div:hover { background: var(--gray-100); }

.nira-history-row { font-size: var(--size-body-sm); padding: var(--space-2) 0; border-bottom: 1px solid var(--border-subtle); display: flex; gap: var(--space-3); }
.nira-history-row:last-child { border-bottom: 0; }
.nira-history-change { color: var(--text-muted); }
.nira-history-change del { color: var(--text-subtle); }

.nira-side { align-self: start; position: sticky; top: var(--space-4); }
.nira-side-card { background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: var(--space-4); }
.nira-side-row { display: grid; grid-template-columns: 100px 1fr; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); font-size: var(--size-body-sm); }
.nira-side-row > label { margin: 0; color: var(--text-muted); font-weight: var(--w-medium); font-size: var(--size-body-sm); }
.nira-side-row .form-control { height: 32px; padding: 2px 6px; font-size: var(--size-body-sm); }
.nira-side-row .nira-link-btn { border: 0; background: none; padding: 0; color: var(--green-spring-700); font-size: var(--size-caption); cursor: pointer; }
.nira-side-dates { font-size: var(--size-caption); color: var(--text-muted); margin-top: var(--space-3); line-height: 1.8; }

@media (max-width: 900px) {
    .nira-issue { grid-template-columns: 1fr; }
    .nira-side { position: static; }
    .nira-form-grid { grid-template-columns: 1fr; }
}

.nira-side-row .nira-select-trigger { height: 34px; }

/* ---- Board: clickable cards and save feedback --------------- */
/* Cards are click and drag targets, so dragging must not select their text. */
.nira-card { position: relative; cursor: pointer; user-select: none; -webkit-user-select: none; transition: box-shadow var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), opacity var(--dur-base) var(--ease-out); }
.nira-card:focus { outline: none; }
.nira-card:focus-visible { border-color: var(--green-spring-600); box-shadow: 0 0 0 3px rgba(47, 185, 107, 0.16); }
.nira-card.is-selected { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink), var(--shadow-sm); }
.nira-card.is-saving { cursor: progress; }
.nira-card.is-saving > :not(.nira-card-state) { opacity: 0.55; }
.nira-card.is-saved { border-color: var(--green-spring-600); }
.nira-card.is-failed { border-color: var(--status-danger); animation: nira-shake 360ms var(--ease-out); }
.nira-card-title { padding-right: 18px; }
@keyframes nira-shake {
    20%, 60% { transform: translateX(-4px); }
    40%, 80% { transform: translateX(4px); }
}
.nira-card-state {
    position: absolute;
    top: 8px;
    right: 8px;
    display: inline-flex;
    color: var(--green-spring-700);
}
.nira-card.is-saved .nira-card-state { animation: nira-fade-out 1400ms var(--ease-out) forwards; }
@keyframes nira-fade-out { 0%, 60% { opacity: 1; } 100% { opacity: 0; } }

.nira-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid var(--green-spring-100);
    border-top-color: var(--green-spring-700);
    animation: nira-spin 700ms linear infinite;
    flex: none;
}
@keyframes nira-spin { to { transform: rotate(360deg); } }

.nira-sync {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--size-body-sm);
    color: var(--green-spring-700);
    margin-right: var(--space-2);
}
.nira-sync.busy { color: var(--text-muted); }

.nira-toasts {
    position: fixed;
    left: 50%;
    bottom: var(--space-5);
    transform: translateX(-50%);
    z-index: 1070;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    pointer-events: none;
}
.nira-toast {
    background: var(--ink);
    color: var(--gray-50);
    border-radius: var(--radius-pill);
    padding: 10px 18px;
    font-size: var(--size-body-sm);
    box-shadow: var(--shadow-md);
    animation: nira-toast-in var(--dur-base) var(--ease-out);
}
.nira-toast.error { border-left: 4px solid var(--status-danger); }
@keyframes nira-toast-in { from { opacity: 0; transform: translateY(8px); } }

/* ---- Slide-over issue panel ---------------------------------- */
:root { --nira-panel-w: min(760px, 100vw); }
.nira-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: var(--nira-panel-w);
    z-index: 1040;
    display: flex;
    flex-direction: column;
    background: var(--surface-page);
    border-left: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-lg);
    animation: nira-panel-in var(--dur-slow) var(--ease-out);
}
@keyframes nira-panel-in { from { transform: translateX(32px); opacity: 0; } }
.nira-panel-head {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4) var(--space-3) var(--space-5);
    border-bottom: 1px solid var(--border-subtle);
    background: var(--surface-card);
}
.nira-panel-head .nira-spacer { flex: 1; }
.nira-panel .nira-panel-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
}
.nira-panel .nira-panel-btn:hover { background: var(--gray-100); color: var(--text-strong); }
.nira-panel-body { flex: 1; overflow-y: auto; padding: var(--space-4) var(--space-5) var(--space-7); }

/* Keep the whole board usable beside the panel instead of under it. */
.nira.has-panel .nira-board,
.nira.has-panel .nira-toolbar,
.nira.has-panel .nira-titlebar { margin-right: calc(var(--nira-panel-w) - (100vw - min(100vw, var(--page-max, 1400px))) / 2 + 8px); }

/* Issue view inside the panel: one column, fields first as a compact grid. */
.nira-issue-view.is-panel .nira-issue { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
/* Flatten the main column so the title can sit above the fields card. */
.nira-issue-view.is-panel .nira-issue > div:first-child { display: contents; }
.nira-issue-view.is-panel .nira-issue > div:first-child > * { order: 2; }
.nira-issue-view.is-panel .nira-issue > div:first-child > .nira-issue-title,
.nira-issue-view.is-panel .nira-issue > div:first-child > .nira-issue-title-input { order: 0; margin-bottom: 0; }
.nira-issue-view.is-panel .nira-side { position: static; order: 1; }
.nira-issue-view.is-panel .nira-side-card { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--space-5); }
.nira-issue-view.is-panel .nira-side-row { grid-template-columns: 92px minmax(0, 1fr); }
.nira-issue-view.is-panel .nira-side-dates { grid-column: 1 / -1; margin-top: 0; }
@media (max-width: 1100px) {
    .nira.has-panel .nira-board, .nira.has-panel .nira-toolbar, .nira.has-panel .nira-titlebar { margin-right: 0; }
}
@media (max-width: 700px) {
    .nira-issue-view.is-panel .nira-side-card { grid-template-columns: 1fr; }
}

/* ---- Page chrome: breadcrumbs + global search, project tabs ---- */
.nira-crumbs-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin: var(--space-4) 0 var(--space-2); }
.nira-crumbs-bar .nira-crumbs { margin: 0; }
.nira-global-search { position: relative; width: 260px; max-width: 45vw; }
.nira-global-search input {
    width: 100%;
    height: 34px;
    padding: 0 12px 0 34px;
    border: 1.5px solid var(--border-subtle);
    border-radius: var(--radius-pill);
    background: var(--surface-card);
    font-size: var(--size-body-sm);
}
.nira-global-search input:focus { outline: none; border-color: var(--green-spring-600); box-shadow: 0 0 0 3px rgba(47, 185, 107, 0.16); }
.nira-global-search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-muted); display: flex; }

.nira-title-group { display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; }
.nira-project-tabs { display: flex; gap: var(--space-1); background: var(--gray-100); border-radius: var(--radius-pill); padding: 3px; }
.nira-project-tabs a {
    padding: 4px 14px;
    border-radius: var(--radius-pill);
    font-size: var(--size-body-sm);
    font-weight: var(--w-medium);
    color: var(--text-muted);
}
.nira-project-tabs a:hover { color: var(--text-strong); }
.nira .nira-project-tabs a.active { background: var(--ink); color: var(--gray-50); }

/* ---- Sprint banner on the board ---- */
.nira-sprint-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    background: var(--surface-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-3);
}
.nira-sprint-banner.is-quiet { background: transparent; border-style: dashed; padding: var(--space-2) var(--space-4); }
.nira-sprint-banner-title { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.nira-sprint-banner-title strong { font-family: var(--font-display); font-weight: var(--w-medium); color: var(--text-strong); }
.nira-status.cat-overdue { background: #FBE6E2; color: #B23C2C; }
.nira-status.cat-overdue::before { background: var(--status-danger); }

/* ---- Project phases (Eightfold Project) ---- */
.nira-phases {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    background: var(--surface-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: var(--space-1);
    margin-bottom: var(--space-3);
}
.nira-phase-list { display: flex; flex: 1; min-width: 0; gap: 2px; list-style: none; margin: 0; padding: 0; overflow-x: auto; }
.nira-phase { position: relative; flex: 1 1 0; min-width: 132px; }
.nira-phase > a, .nira-phase > span {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 100%;
    padding: 7px 12px;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.nira .nira-phase > a:hover { background: var(--gray-50); color: var(--text-strong); text-decoration: none; }
.nira-phase-step {
    flex: none;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1.5px solid var(--gray-300);
    font: var(--w-medium) 12px/1 var(--font-display);
}
.nira-phase-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.nira-phase-name { font-size: var(--size-body-sm); font-weight: var(--w-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nira-phase-kind { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-subtle); }
.nira-phase.is-done .nira-phase-name { color: var(--text-body); }
.nira-phase.is-done .nira-phase-step { background: var(--green-spring-100); border-color: var(--green-spring-100); color: var(--green-spring-700); }
.nira .nira-phase.is-current > a, .nira-phase.is-current > span { background: var(--ink); color: var(--gray-50); }
.nira .nira-phase.is-current > a:hover { background: var(--ink-2); color: var(--gray-50); }
.nira-phase.is-current .nira-phase-step { background: var(--green-spring); border-color: var(--green-spring); color: var(--ink); }
.nira-phase.is-current .nira-phase-kind { color: var(--text-on-dark-muted); }
.nira-phase-weeks { font-size: var(--size-caption); color: var(--text-muted); white-space: nowrap; }
.nira-phase.is-current .nira-phase-weeks { color: var(--green-spring); }
.nira-phase.is-current .nira-phase-weeks.is-over { color: #FFB86B; font-weight: var(--w-medium); }
.nira-phase-actions { display: flex; flex: none; gap: var(--space-1); margin-right: var(--space-1); }
.nira .nira-phase-back, .nira .nira-phase-next { white-space: nowrap; }
.nira-phase-next i { margin-left: 4px; font-size: 12px; }
.nira-phase-back i { margin-right: 4px; font-size: 12px; }
@media (max-width: 767px) {
    .nira-phases { flex-direction: column; align-items: stretch; }
    .nira-phase-actions { margin: 0 var(--space-1) var(--space-1); }
    .nira .nira-phase-back, .nira .nira-phase-next { flex: 1; }
}

/* ---- Backlog ---- */
.nira-backlog { display: flex; flex-direction: column; gap: var(--space-4); }
.nira-sprint { background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--space-3) var(--space-4) var(--space-4); }
.nira-sprint.is-active { border-color: var(--green-spring-600); box-shadow: inset 0 3px 0 var(--green-spring); }
.nira-sprint.is-backlog { background: var(--gray-50); }
.nira-sprint-head { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; min-height: 36px; }
.nira-sprint-head .nira-spacer { flex: 1; }
.nira .nira-sprint-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    height: auto;
    padding: 0;
    border: 0;
    background: none;
    color: var(--text-strong);
    font-size: var(--size-body);
}
.nira .nira-sprint-toggle:hover { background: none; }
.nira-sprint-toggle strong { font-family: var(--font-display); font-weight: var(--w-medium); }
.nira-sprint-toggle .fas { font-size: 11px; color: var(--text-muted); width: 12px; }
.nira-sprint-goal { display: flex; align-items: center; gap: var(--space-2); font-size: var(--size-body-sm); color: var(--text-muted); margin: var(--space-1) 0 var(--space-2) 20px; }

.nira-point-split { display: inline-flex; gap: 4px; }
.nira-point-split span { min-width: 26px; text-align: center; border-radius: var(--radius-pill); font-size: var(--size-caption); font-weight: 600; padding: 1px 7px; }
.nira-point-split .cat-todo { background: var(--gray-150); color: var(--gray-700); }
.nira-point-split .cat-in_progress { background: var(--slate-100); color: #4E5A85; }
.nira-point-split .cat-done { background: #E2F5EA; color: #1E7B47; }

.nira-menu-select .nira-select-trigger { min-width: 0 !important; width: 40px !important; padding: 0 !important; justify-content: center; }
.nira-menu-select .nira-select-caret { display: none; }
.nira-menu-select .nira-select-placeholder { flex: none; color: var(--text-strong); letter-spacing: 0.1em; }
.nira-menu-select .nira-select-menu { left: auto; right: 0; }

.nira-rows { min-height: 8px; margin-top: var(--space-2); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); overflow: hidden; background: var(--surface-card); }
.nira-rows:empty { border-style: dashed; min-height: 44px; background: transparent; }
.nira-rows-empty { font-size: var(--size-body-sm); color: var(--text-muted); padding: var(--space-2) var(--space-1) 0; }
.nira-rows:empty + .nira-rows-empty { margin-top: -38px; padding: 10px 14px; pointer-events: none; height: 38px; }
.nira-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: 42px;
    padding: 0 var(--space-3);
    border-top: 1px solid var(--border-subtle);
    font-size: var(--size-body-sm);
    background: var(--surface-card);
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
}
.nira-row:first-child { border-top: 0; }
.nira-row:hover { background: var(--gray-50); }
.nira-row:focus { outline: none; }
.nira-row:focus-visible { box-shadow: inset 0 0 0 2px var(--green-spring-600); }
.nira-row.is-selected { background: var(--mist); box-shadow: inset 3px 0 0 var(--ink); }
.nira-row.is-done .nira-row-title { color: var(--text-muted); }
.nira-row.is-done .nira-key { text-decoration: line-through; }
.nira-row.is-saving > :not(.nira-row-state) { opacity: 0.55; }
.nira-row.is-failed { animation: nira-shake 360ms var(--ease-out); box-shadow: inset 3px 0 0 var(--status-danger); }
.nira-row-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-strong); }
.nira-row-state { width: 16px; display: inline-flex; color: var(--green-spring-700); }
.nira-row.is-saved .nira-row-state { animation: nira-fade-out 1400ms var(--ease-out) forwards; }
.nira-points.empty { color: var(--text-subtle); background: transparent; }
.nira-row .nira-chip.epic { max-width: 180px; }
.nira-row.nira-card-ghost { background: var(--accent-soft); }

.nira-quick-create { margin-top: var(--space-2); }
.nira-quick-create .form-control { height: 36px; border-style: dashed; background: transparent; font-size: var(--size-body-sm); }
.nira-quick-create .form-control:focus { border-style: solid; background: var(--surface-card); }

.nira-complete-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
.nira-complete-stats div { background: var(--gray-50); border-radius: var(--radius-md); padding: var(--space-3); text-align: center; }
.nira-complete-stats strong { display: block; font-family: var(--font-display); font-size: var(--size-h2); font-weight: var(--w-medium); color: var(--text-strong); }
.nira-complete-stats span { font-size: var(--size-caption); color: var(--text-muted); }

/* ---- Attachments ---- */
.nira-hidden-input { display: none; }
.nira-attach-actions { display: inline-flex; align-items: center; gap: var(--space-2); }
.nira-attachments { border-radius: var(--radius-md); transition: box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); }
.nira-attachments.is-drop-target { background: var(--accent-soft); box-shadow: 0 0 0 2px var(--green-spring-600); }
.nira-dropzone {
    border: 1.5px dashed var(--border-default);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    text-align: center;
    font-size: var(--size-body-sm);
    color: var(--text-muted);
    cursor: pointer;
}
.nira-dropzone:hover { border-color: var(--green-spring-600); }
.nira-link-like { color: var(--green-spring-700); font-weight: var(--w-medium); }
.nira-attachment-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-2); }
.nira-attachment {
    position: relative;
    display: flex;
    gap: var(--space-2);
    align-items: center;
    background: var(--surface-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: var(--space-2);
    font-size: var(--size-caption);
}
.nira-attachment-preview {
    flex: none;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-sm);
    background: var(--gray-100);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.nira-attachment-preview img { width: 100%; height: 100%; object-fit: cover; }
.nira-attachment-ext { font-family: var(--font-mono); font-weight: var(--w-bold); font-size: 11px; color: var(--gray-700); }
.nira-attachment-meta { display: flex; flex-direction: column; min-width: 0; padding-right: 18px; }
.nira-attachment-name { font-size: var(--size-body-sm); color: var(--text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nira .nira-attachment .nira-remove,
.nira .nira-attachment .nira-remove:hover { position: absolute; top: 4px; right: 4px; height: auto; padding: 2px 6px; background: transparent; border: 0; }

/* ---- Search ---- */
.nira-search-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--space-6); margin-top: var(--space-4); }
.nira-filter-list { display: flex; flex-direction: column; gap: 2px; }
.nira-filter-list .n-overline { margin-bottom: var(--space-2); }
.nira .nira-filter-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    justify-content: space-between;
    height: auto;
    padding: 7px 10px;
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--text-body);
    font-size: var(--size-body-sm);
    font-weight: var(--w-regular);
    text-align: left;
}
.nira .nira-filter-item:hover { background: var(--gray-100); }
.nira .nira-filter-item.active { background: var(--ink); color: var(--gray-50); }
.nira-filter-shared { font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--green-spring-700); }
.nira-filter-item.active .nira-filter-shared { color: var(--green-spring); }
.nira-search-hero {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    height: 52px;
    padding: 0 var(--space-4);
    margin-bottom: var(--space-3);
    background: var(--surface-card);
    border: 1.5px solid var(--border-default);
    border-radius: var(--radius-lg);
    color: var(--text-muted);
}
.nira-search-hero:focus-within { border-color: var(--green-spring-600); box-shadow: 0 0 0 3px rgba(47, 185, 107, 0.16); }
.nira-search-hero input { flex: 1; border: 0; outline: none; background: transparent; font-size: var(--size-body-lg); color: var(--text-strong); height: 100%; padding: 0; }
.nira-results-head { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-2) 0; min-height: 34px; }
.nira-results-head .nira-spacer { flex: 1; }
.nira-results { display: flex; flex-direction: column; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--surface-card); overflow: hidden; }
.nira-results:has(.nira-empty) { border: 0; background: transparent; }
.nira-result {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    border-top: 1px solid var(--border-subtle);
    cursor: pointer;
}
.nira-result:first-child { border-top: 0; }
.nira-result:hover { background: var(--gray-50); }
.nira-result:focus { outline: none; }
.nira-result:focus-visible { box-shadow: inset 0 0 0 2px var(--green-spring-600); }
.nira-result.is-selected { background: var(--mist); box-shadow: inset 3px 0 0 var(--ink); }
.nira-result-body { flex: 1; min-width: 0; }
.nira-result-title { display: flex; gap: var(--space-2); align-items: baseline; color: var(--text-strong); font-size: var(--size-body-sm); }
.nira-result-title span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nira-result-snippet { font-size: var(--size-caption); color: var(--text-muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nira-result-snippet mark { background: var(--green-spring-100); color: var(--text-strong); padding: 0 1px; border-radius: 2px; }
.nira-result-date { width: 90px; text-align: right; flex: none; }

/* Search results as a table whose optional columns come from the Columns picker. */
.nira-results-scroll { overflow-x: auto; }
/* styles.css gives every table a top margin; this one sits flush in its card. */
.nira-results-table { width: 100%; margin: 0; border-collapse: collapse; font-size: var(--size-body-sm); }
.nira-results-table th {
    position: sticky;
    top: 0;
    padding: var(--space-2) var(--space-3);
    background: var(--gray-50);
    border-bottom: 1px solid var(--border-subtle);
    font-size: var(--size-caption);
    font-weight: var(--w-medium);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    text-align: left;
    white-space: nowrap;
}
.nira-results-table th.sortable { cursor: pointer; }
.nira-results-table th.sortable:hover { color: var(--text-strong); }
.nira-results-table th.sorted { color: var(--text-strong); box-shadow: inset 0 -2px 0 var(--green-spring-600); }
.nira-results-table td {
    padding: var(--space-2) var(--space-3);
    border-top: 1px solid var(--border-subtle);
    vertical-align: middle;
    white-space: nowrap;
    color: var(--text-body);
}
.nira-result-row { cursor: pointer; }
.nira-result-row:hover td { background: var(--gray-50); }
.nira-result-row:focus { outline: none; }
.nira-result-row:focus-visible td { box-shadow: inset 0 2px 0 var(--green-spring-600), inset 0 -2px 0 var(--green-spring-600); }
.nira-result-row.is-selected td { background: var(--mist); }
.nira-result-row.is-selected td:first-child { box-shadow: inset 3px 0 0 var(--ink); }
.nira-results-table .col-key { width: 1%; }
.nira-result-key { display: inline-flex; align-items: center; gap: var(--space-2); }
.nira-result-key .nira-key { color: var(--text-muted); }
.nira-results-table .col-title { min-width: 280px; max-width: 520px; white-space: normal; }
.nira-results-table .nira-result-title { color: var(--text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 520px; }
.nira-results-table .nira-result-snippet { max-width: 520px; }
.nira-cell-icon { display: inline-flex; align-items: center; gap: 6px; }
.nira-cell-icon .nira-avatar { width: 22px; height: 22px; font-size: 9px; }
.nira-results-table .col-parent > span { display: inline-block; max-width: 240px; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
.nira-results-table .col-labels .nira-chip { margin-right: 4px; }
.nira-results-table .col-story_points { text-align: right; }
.nira-cell-description { display: inline-block; max-width: 360px; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; color: var(--text-muted); }
.nira-overdue { color: var(--status-danger); font-weight: 600; }

.nira-column-picker { position: relative; }
.nira-column-picker .nira-select-trigger { min-width: 0; gap: 6px; }
.nira-column-menu { left: auto; right: 0; min-width: 240px; }
.nira-column-fixed { padding: var(--space-1) var(--space-2) var(--space-2); font-size: var(--size-caption); color: var(--text-muted); border-bottom: 1px solid var(--border-subtle); margin-bottom: var(--space-1); }
.nira-column-menu .nira-select-options { max-height: 360px; }
.nira-column-option { margin: 0; font-weight: normal; }
.nira-column-option:hover { background: var(--mist); color: var(--text-strong); }
.nira-column-option input { position: absolute; opacity: 0; pointer-events: none; }
.nira-column-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 18px;
    height: 18px;
    border: 1.5px solid var(--gray-500);
    border-radius: 4px;
    background: var(--surface-card);
}
.nira-column-option.selected .nira-column-box { background: var(--green-spring); border-color: var(--green-spring-700); color: var(--ink); }
.nira-column-option input:focus-visible + .nira-column-box { box-shadow: 0 0 0 3px rgba(47, 185, 107, 0.25); }
.nira-column-foot { border-top: 1px solid var(--border-subtle); margin-top: var(--space-1); padding-top: var(--space-1); text-align: right; }
@media (max-width: 900px) {
    .nira-search-layout { grid-template-columns: minmax(0, 1fr); }
    .nira-results-head { flex-wrap: wrap; }
    .nira-results-head > * { flex: none; }
    .nira-results-head .nira-spacer { flex-basis: 100%; height: 0; }
    .nira-filter-list { flex-direction: row; flex-wrap: wrap; }
}

/* ---- Boards menu in the project tabs ---- */
.nira-boards-menu { position: relative; }
.nira-boards-menu summary {
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px 4px 14px;
    border-radius: var(--radius-pill);
    font-size: var(--size-body-sm);
    font-weight: var(--w-medium);
    color: var(--text-muted);
    cursor: pointer;
    user-select: none;
}
.nira-boards-menu summary::-webkit-details-marker { display: none; }
.nira-boards-menu summary:hover { color: var(--text-strong); }
.nira-boards-menu.active summary { background: var(--ink); color: var(--gray-50); }
.nira-boards-menu[open] summary svg { transform: rotate(180deg); }
.nira-boards-menu-list {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 1060;
    min-width: 220px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: var(--surface-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    padding: var(--space-2);
}
.nira-boards-menu-list .n-overline { padding: 2px 8px 6px; }
.nira-boards-menu-list > span { padding: 4px 8px; }
.nira .nira-boards-menu-list a { padding: 7px 8px; border-radius: var(--radius-sm); font-size: var(--size-body-sm); color: var(--text-body); }
.nira .nira-boards-menu-list a:hover { background: var(--mist); color: var(--text-strong); }
.nira .nira-boards-menu-list a.current { font-weight: 600; color: var(--text-strong); }
.nira .nira-boards-menu-list a.nira-boards-create { border-top: 1px solid var(--border-subtle); margin-top: 4px; padding-top: 9px; border-radius: 0; color: var(--green-spring-700); font-weight: var(--w-medium); }

/* ---- Kanban columns: WIP limits, multi-status columns ---- */
.nira-col-head { display: flex; align-items: center; gap: var(--space-1); flex-wrap: wrap; }
.nira-col-head.over-wip { background: #FBE6E2; border-top-color: var(--status-danger); color: #B23C2C; }
.nira-col-head.over-wip .nira-col-count { color: #B23C2C; font-weight: var(--w-bold); }
.nira-wip-flag { margin-left: auto; font-size: 10px; letter-spacing: 0.06em; }
.nira-col-body.over-wip { background: #FDF1EE; }
.nira-status.nira-status-xs { height: 18px; padding: 0 7px; font-size: 10.5px; gap: 4px; }
.nira-status.nira-status-xs::before { width: 5px; height: 5px; }

/* ---- Board settings dialog ---- */
.nira-settings-section { margin-top: var(--space-5); }
.nira-settings-section h5 { font-family: var(--font-display); font-weight: var(--w-medium); margin-bottom: var(--space-1); }
.nira-filter-row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-2); }
.nira-filter-label { width: 84px; font-size: var(--size-body-sm); font-weight: var(--w-medium); color: var(--text-muted); }
.nira .nira-toggle-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 12px 0 8px;
    border: 1.5px solid var(--border-subtle);
    border-radius: var(--radius-pill);
    background: var(--surface-card);
    color: var(--text-body);
    font-size: var(--size-body-sm);
    font-weight: var(--w-regular);
    cursor: pointer;
}
.nira .nira-toggle-chip:hover { border-color: var(--gray-500); background: var(--surface-card); }
.nira .nira-toggle-chip.on { background: var(--green-spring-100); border-color: var(--green-spring-600); color: var(--text-strong); }
.nira span.nira-toggle-chip { cursor: default; padding-left: 12px; }
.nira .nira-chip-x { height: auto; padding: 0 0 0 2px; border: 0; background: none; color: var(--text-muted); font-size: 16px; line-height: 1; cursor: pointer; }
.nira .nira-chip-x:hover { background: none; color: var(--status-danger); }
.nira-column-row {
    display: grid;
    grid-template-columns: auto minmax(140px, 1fr) 96px minmax(0, 1.4fr) auto;
    gap: var(--space-2);
    align-items: center;
    margin-bottom: var(--space-2);
}
.nira-column-row .form-control { height: 34px; padding: 2px 8px; font-size: var(--size-body-sm); }
.nira-column-statuses { display: flex; flex-wrap: wrap; gap: 4px; }
.nira-mapping-row { display: grid; grid-template-columns: 180px 20px 220px; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); }
.nira-mapping-row.unmapped .nira-select-trigger { border-style: dashed; color: var(--text-muted); }
@media (max-width: 700px) {
    .nira-column-row { grid-template-columns: auto 1fr 80px auto; }
    .nira-column-statuses { display: none; }
    .nira-mapping-row { grid-template-columns: 1fr 20px 1fr; }
}

/* styles.css turns every button:hover green; link-style buttons stay plain. */
.nira .btn-link:hover, .nira .btn-link:focus { background: transparent; }

/* ---- Clone ------------------------------------------------- */
.nira-issue-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-top: 12px;
}
.nira-issue-actions .text-danger { margin-left: auto; }
.nira-check {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 6px;
    font-size: var(--size-body-sm);
    cursor: pointer;
}
/* Export is a download link styled as a button: match the buttons beside it. */
.nira a.nira-export {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 38px;
}
.nira a.nira-export.disabled { pointer-events: none; opacity: .5; }

/* ---- Watching ----------------------------------------------- */
.nira .nira-watch { display: inline-flex; align-items: center; gap: 6px; }
.nira .nira-watch.on, .nira .nira-watch.on:hover { background: var(--ink); border-color: var(--ink); color: var(--green-spring); }
.nira-watch-count {
    min-width: 18px;
    padding: 0 5px;
    border-radius: var(--radius-pill);
    background: var(--gray-100, #EEF1EF);
    color: var(--text-body);
    font-size: var(--size-caption);
    line-height: 18px;
    text-align: center;
}
.nira-watch.on .nira-watch-count { background: rgba(112, 245, 163, 0.18); color: var(--green-spring); }

/* ---- Admin: notifications ------------------------------------ */
.nira-titlebar h1 { font-size: var(--size-h2); }
/* What needs an admin, above the tabs: one line each, with the way to fix it. */
.nira-admin-status { list-style: none; padding: 0; margin: 0 0 var(--space-4); display: grid; gap: 6px; }
.nira-admin-status li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    border-left: 4px solid var(--status-success);
    background: var(--surface-card);
    color: var(--text-strong);
    font-size: var(--size-body-sm);
}
.nira-admin-status li.bad { border-left-color: var(--status-danger); background: #FBE3DE; color: #7d2a1e; }
.nira-admin-status li.warn { border-left-color: var(--status-warning); background: #FFF4D6; color: #5c4400; }
.nira .nira-admin-status a { color: inherit; font-weight: var(--w-medium); text-decoration: underline; }
.nira-admin-tabs { gap: var(--space-5); margin-bottom: var(--space-4); overflow-x: auto; }
.nira .nira-admin-tabs a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: var(--space-2) 0;
    color: var(--text-muted);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    font-weight: var(--w-medium);
    white-space: nowrap;
}
.nira .nira-admin-tabs a:hover { color: var(--text-strong); }
.nira .nira-admin-tabs a.active { color: var(--text-strong); border-bottom-color: var(--green-spring-600); }
.nira-admin-lede { color: var(--text-body); margin: 0 0 var(--space-3); max-width: 70ch; }
.nira-admin-stack { display: grid; gap: var(--space-4); margin-bottom: var(--space-4); }
.nira-admin-card h2 { font-family: var(--font-display); font-weight: var(--w-medium); font-size: 20px; margin: 2px 0 0; color: var(--text-strong); }
.nira-admin-finding {
    margin: 0 0 var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-left: 4px solid var(--status-warning);
    background: #FFF4D6;
    color: #5c4400;
    border-radius: var(--radius-md);
    font-size: var(--size-body-sm);
}
/* Inside admin, sentence-case table headers and brand-ink link buttons. */
.nira-admin .nira-results-table th { text-transform: none; letter-spacing: 0; font-size: var(--size-body-sm); }
.nira-admin .btn-link:not(.text-danger) { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.nira-admin .btn-link:not(.text-danger):hover { color: var(--green-spring-700); }
.nira-admin-card {
    background: var(--surface-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: var(--space-4) var(--space-5);
    box-shadow: var(--shadow-xs);
}
.nira-admin-card-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-bottom: var(--space-3);
}
.nira-admin-state {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    font-size: var(--size-caption);
    font-weight: var(--w-medium);
    background: var(--mist, #F3F5F4);
    color: var(--gray-700);
    white-space: nowrap;
}
.nira-admin-state .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.nira-admin-state.on { background: var(--ink); color: var(--green-spring); }
.nira-admin-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px var(--space-4); margin: 0 0 var(--space-3); font-size: var(--size-body-sm); }
.nira-admin-facts dt { font-weight: var(--w-medium); color: var(--text-muted); }
.nira-admin-facts dd { margin: 0; color: var(--text-strong); overflow-wrap: anywhere; }
.nira-admin-steps { padding-left: 20px; font-size: var(--size-body-sm); margin: 0 0 var(--space-3); }
.nira-admin-steps li { margin-bottom: var(--space-2); }
.nira-admin-code { position: relative; margin-top: var(--space-2); }
.nira-admin-code pre {
    background: var(--ink);
    color: #DCE7E1;
    border-radius: var(--radius-md);
    padding: var(--space-3);
    font-size: 12px;
    max-height: 220px;
    overflow: auto;
    margin: 0;
}
.nira .nira-admin-copy, .nira .nira-admin-copy:hover {
    position: absolute;
    top: 8px;
    right: 8px;
    height: auto;
    padding: 3px 10px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--green-spring);
    font-size: var(--size-caption);
}
.nira-admin-connect { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.nira-admin-connect .form-control { flex: 1 1 240px; height: 38px; font-family: var(--font-mono); font-size: var(--size-body-sm); }
.nira-admin-counts { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.nira-delivery {
    display: inline-block;
    padding: 1px 8px;
    border-radius: var(--radius-pill);
    font-size: var(--size-caption);
    font-weight: var(--w-medium);
    background: var(--mist, #F3F5F4);
    color: var(--gray-700);
    white-space: nowrap;
}
.nira-delivery.sent { background: var(--green-spring-100); color: #145C33; }
button.nira-delivery { border: 1px solid transparent; cursor: pointer; line-height: 1.6; }
button.nira-delivery:hover { border-color: var(--border-default); }
button.nira-delivery.picked { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.nira-delivery.failed { background: #FBE3DE; color: #9b3324; }
.nira-delivery.pending, .nira-delivery.sending { background: #FFF4D6; color: #7a5a00; }
.nira-delivery-result { white-space: normal !important; min-width: 220px; }
.nira-delivery-result .nira-small { display: block; margin-top: 2px; }
/* Bootstrap paints a disabled primary button blue; keep it brand green, just faded. */
.nira .btn-primary:disabled, .nira .btn-primary.disabled {
    background-color: var(--green-spring);
    border-color: var(--green-spring);
    color: var(--ink);
    opacity: .5;
}
.nira-admin-card code, .nira-admin-steps code {
    background: var(--mist);
    color: var(--ink);
    border-radius: 4px;
    padding: 1px 5px;
    font-size: 0.92em;
}

/* ---- Admin: mail server form --------------------------------- */
.nira-admin-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-3) var(--space-3); margin-top: var(--space-3); }
.nira-admin-form .nira-field { margin: 0; }
.nira-admin-form .nira-admin-wide { grid-column: 1 / -1; }
.nira-admin-form .nira-hint { margin: 0; }
@media (max-width: 520px) { .nira-admin-form { grid-template-columns: minmax(0, 1fr); } }

/* ---- My notification settings ------------------------------- */
.nira-prefs { display: grid; gap: var(--space-4); max-width: 720px; }
.nira-pref-list { list-style: none; padding: 0; margin: 0 0 var(--space-3); }
.nira-pref-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-3) 0;
    border-top: 1px solid var(--border-subtle);
}
.nira-pref-list li:first-child { border-top: 0; padding-top: 0; }
.nira-pref-label { font-weight: var(--w-medium); color: var(--text-strong); }
.nira .nira-switch, .nira .nira-switch:hover {
    flex: none;
    position: relative;
    width: 44px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-pill);
    background: var(--gray-300, #C9D1CD);
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-out);
}
.nira .nira-switch[aria-checked="true"] { background: var(--ink); }
.nira-switch-knob {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--white, #fff);
    transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.nira-switch[aria-checked="true"] .nira-switch-knob { transform: translateX(20px); background: var(--green-spring); }
.nira .nira-switch:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(47, 185, 107, 0.3); }
.nira .nira-switch:disabled { opacity: .6; cursor: progress; }

/* ---- Top navigation (nira_base.html) ------------------------- */
/* One ink bar replaces the ntools header on every Nira page. */
.nira-header {
    background: var(--ink);
    border-bottom: 1px solid var(--border-on-dark);
    margin-bottom: var(--space-3);
}
.nira.nira-topnav {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    max-width: var(--page-max, 1400px);
    margin: 0 auto;
    padding: 10px 15px 10px 30px;
    color: var(--text-on-dark);
}
.nira-topnav-brand,
.nira a.nira-topnav-brand,
.nira a.nira-topnav-brand:hover {
    display: flex;
    align-items: baseline;
    font-family: var(--font-display);
    font-weight: var(--w-medium);
    font-size: 29px;
    letter-spacing: -0.022em;
    line-height: 1;
    color: var(--white);
    text-decoration: none;
    white-space: nowrap;
    margin-right: var(--space-3);
}
/* The [\] mark stands in for the n, as in the design system's Nira logo. */
.nira-topnav-brand img { height: 20px; width: auto; align-self: center; position: relative; top: 0.045em; }
.nira-topnav-links { display: flex; align-items: center; gap: 4px; min-width: 0; }
.nira-topnav-links a,
.nira-topnav-icons a,
.nira a.nira-topnav-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 14px;
    border-radius: var(--radius-pill);
    color: var(--text-on-dark-muted);
    font-size: var(--size-body-sm);
    font-weight: var(--w-medium);
    white-space: nowrap;
    text-decoration: none;
    transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.nira .nira-topnav-links a:hover,
.nira .nira-topnav-icons a:hover,
.nira a.nira-topnav-back:hover { background: var(--ink-3); color: var(--white); text-decoration: none; }
.nira .nira-topnav-links a.active,
.nira .nira-topnav-icons a.active { background: var(--ink-3); color: var(--green-spring); }
.nira-topnav-icons { display: flex; align-items: center; gap: 2px; }
.nira-topnav-icons a { width: 38px; padding: 0; justify-content: center; font-size: 16px; }
.nira-topnav .nira-global-search { margin-left: auto; }
.nira-topnav .nira-global-search input { background: var(--ink-2); border-color: var(--ink-3); color: var(--white); }
.nira-topnav .nira-global-search input::placeholder { color: var(--text-on-dark-muted); }
.nira-topnav .nira-global-search-icon { color: var(--text-on-dark-muted); }
.nira a.nira-topnav-back { border: 1.5px solid var(--ink-3); height: 34px; padding: 0 12px; }
@media (max-width: 900px) {
    .nira.nira-topnav { flex-wrap: wrap; padding: 8px 15px; row-gap: 8px; }
    .nira-topnav-links { order: 3; width: 100%; overflow-x: auto; }
    .nira-topnav .nira-global-search { order: 4; flex: 1 1 100%; width: auto; max-width: none; }
    .nira-topnav-brand { margin-right: auto; }
    .nira a.nira-topnav-back { padding: 0 10px; }
}

/* Pending client invites on the admin cog. */
.nira .nira-topnav-icons a.nira-topnav-admin { position: relative; }
.nira-topnav-badge {
    position: absolute; top: 2px; right: 0;
    min-width: 17px; height: 17px; padding: 0 4px;
    border-radius: var(--radius-pill);
    background: var(--green-lime); color: var(--ink);
    font-family: var(--font-text); font-size: 11px; font-weight: 700; line-height: 17px; text-align: center;
}

/* ---- Client sign-in (nira_signin.html) ------------------------- */
.nira.nira-signin { display: flex; justify-content: center; padding: var(--space-7) 0; }
.nira-signin-card {
    width: 100%; max-width: 440px; padding: var(--space-6);
    background: var(--surface-card); border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg, 14px); box-shadow: var(--shadow-xs);
}
.nira-signin-card h1 { font-family: var(--font-display); font-weight: var(--w-medium); font-size: 32px; margin: 6px 0 12px; }
.nira-signin-card p { line-height: 1.5; }
.nira-signin-form { display: flex; flex-direction: column; gap: 8px; margin: var(--space-4) 0; }
.nira-signin-form label { font-weight: var(--w-medium); font-size: var(--size-body-sm); margin: 0; }
.nira-signin-form input {
    height: 44px; padding: 0 14px; border: 1.5px solid var(--border-subtle); border-radius: var(--radius-md);
    font-size: 16px; background: var(--surface-card);
}
.nira-signin-form input:focus { outline: none; border-color: var(--green-spring-600); box-shadow: 0 0 0 3px rgba(47, 185, 107, 0.16); }
.nira .nira-signin-submit { width: 100%; height: 44px; margin: var(--space-3) 0 var(--space-4); }
.nira-signin-form .nira-signin-submit { margin: var(--space-2) 0 0; }

/* ---- Dashboard ------------------------------------------------- */
.nira-dash-titlebar { align-items: flex-end; flex-wrap: wrap; }
.nira-dash-project { display: flex; align-items: center; gap: var(--space-2); min-width: 280px; }
.nira-dash-project .nira-select { flex: 1; }
.nira-dash-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
    align-items: start;
    transition: opacity var(--dur-base) var(--ease-out);
}
.nira-dash-grid.loading { opacity: 0.55; }
.nira-dash-card { min-width: 0; }
.nira-dash-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }
.nira-dash-head h3 {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    font-family: var(--font-display);
    font-weight: var(--w-medium);
    font-size: 18px;
    color: var(--text-strong);
}
.nira-dash-total { display: flex; align-items: baseline; gap: var(--space-2); margin-bottom: var(--space-3); flex-wrap: wrap; }
.nira-dash-number { font-family: var(--font-display); font-size: 44px; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.nira-dash-statuses { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: var(--space-2); }
.nira-dash-status {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    border-radius: var(--radius-md);
    background: var(--gray-50, #F7F9F8);
    border-top: 3px solid var(--gray-300);
}
.nira-dash-status.cat-in_progress { border-top-color: #6B7AB0; }
.nira-dash-status.cat-done { border-top-color: var(--green-spring-600); }
.nira-dash-status-count { font-family: var(--font-display); font-size: 26px; line-height: 1.1; color: var(--text-strong); font-variant-numeric: tabular-nums; }
.nira-dash-status-name { font-size: var(--size-caption); color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nira-dash-status.zero .nira-dash-status-count { color: var(--text-subtle); }

.nira-dash-progress-list { list-style: none; margin: 0; padding: 0; max-height: 420px; overflow-y: auto; }
.nira-dash-progress-list li { padding: 10px 0; border-top: 1px solid var(--border-subtle); }
.nira-dash-progress-list li:first-child { border-top: 0; padding-top: 0; }
.nira-dash-progress-label { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin-bottom: 6px; }
.nira-dash-progress-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-strong); font-weight: var(--w-medium); }
.nira a.nira-dash-progress-title { color: var(--text-strong); }
.nira a.nira-dash-progress-title:hover { color: var(--link-hover); }
.nira-dash-percent { flex: none; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--text-strong); }
.nira-dash-progress-list .nira-progress { height: 8px; margin-bottom: 4px; }
.nira-progress > span { display: block; height: 100%; background: var(--ink); border-radius: inherit; transition: width var(--dur-base) var(--ease-out); }
.nira-progress > span.full { background: var(--green-spring-600); }
.nira-dash-state {
    display: inline-block;
    margin-left: 6px;
    padding: 0 8px;
    border-radius: var(--radius-pill);
    font-size: var(--size-caption);
    font-weight: 600;
    background: var(--gray-100);
    color: var(--text-muted);
    vertical-align: 1px;
}
.nira-dash-state.active { background: var(--ink); color: var(--green-spring); }
@media (max-width: 900px) {
    .nira-dash-grid { grid-template-columns: minmax(0, 1fr); }
    .nira-dash-project { min-width: 0; width: 100%; }
}

.nira a.nira-dash-status { color: inherit; text-decoration: none; transition: background var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.nira a.nira-dash-status:hover { background: var(--mist); box-shadow: var(--shadow-xs); }
.nira a.nira-dash-status:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(47, 185, 107, 0.25); }

/* ---- Project logos ------------------------------------------- */
.nira-project-logo {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 22%;
    background: var(--white);
    border: 1px solid var(--border-subtle);
    object-fit: contain;
    vertical-align: middle;
}
.nira-project-logo.is-key {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--green-spring);
    font-family: var(--font-mono);
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1;
}
.nira-project-card-head { display: flex; align-items: center; gap: var(--space-3); }
.nira-project-card-head h4 { margin-bottom: 0; }
.nira-title-logo { display: inline-flex; align-items: center; gap: var(--space-3); }
.nira-notice {
    background: var(--mist);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    font-size: var(--size-body-sm);
    color: var(--text-body);
}
.nira-logo-settings { display: flex; align-items: flex-start; gap: var(--space-4); flex-wrap: wrap; }
.nira-logo-settings .nira-logo-fields { flex: 1; min-width: 240px; display: grid; gap: var(--space-2); }
.nira-logo-settings .nira-logo-row { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }
.nira-logo-settings .nira-logo-row .form-control { flex: 1 1 200px; }
.nira-result-project { display: inline-flex; align-items: center; gap: 6px; }

/* ---- At risk ---------------------------------------------------- */
.nira-at-risk-icon { display: inline-flex; align-items: center; gap: 4px; color: #B7791F; font-size: var(--size-caption); font-weight: 600; }
/* Flagged cards and rows: an amber edge and wash, still readable when selected. */
.nira-card.is-at-risk { border-color: var(--status-warning); background: #FFF8E6; box-shadow: inset 4px 0 0 var(--status-warning); }
.nira-card.is-at-risk:hover { border-color: #D69E2E; }
.nira-row.is-at-risk { background: #FFF8E6; box-shadow: inset 4px 0 0 var(--status-warning); }
.nira .nira-risk-toggle,
.nira .nira-risk-toggle:hover {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 12px;
    border: 1.5px solid var(--border-default);
    border-radius: var(--radius-pill);
    background: var(--surface-card);
    color: var(--text-body);
    font-size: var(--size-body-sm);
    font-weight: var(--w-medium);
    cursor: pointer;
}
.nira .nira-risk-toggle:hover { border-color: var(--status-warning); color: #8A5A12; }
.nira .nira-risk-toggle.on,
.nira .nira-risk-toggle.on:hover { background: #FFF1CC; border-color: var(--status-warning); color: #8A5A12; }
.nira .nira-risk-toggle:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(232, 178, 58, 0.35); }
.nira-dash-risk {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    background: #FFF1CC;
    color: #8A5A12;
    font-size: var(--size-body-sm);
}
.nira a.nira-dash-risk { color: #8A5A12; text-decoration: none; }
.nira a.nira-dash-risk:hover { background: #FFE7A8; color: #6B4510; }
.nira a.nira-dash-risk.none { background: var(--gray-100); color: var(--text-muted); }

/* ---- Account ------------------------------------------------- */
.nira .nira-topnav-icons a.nira-topnav-account {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--green-spring);
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
}
.nira .nira-topnav-icons a.nira-topnav-account:hover { background: var(--green-spring-300); color: var(--ink); }
.nira .nira-topnav-icons a.nira-topnav-account.is-external { background: var(--slate-100); color: #3F4A75; }
.nira .nira-topnav-icons a.nira-topnav-account.is-external:hover { background: #fff; }
.nira .nira-topnav-icons a.nira-topnav-account.active { box-shadow: 0 0 0 3px rgba(112, 245, 163, 0.45); }
.nira-account-head { display: flex; align-items: center; gap: var(--space-4); margin: var(--space-2) 0 var(--space-5); }
.nira-account-head h1 { font-size: var(--size-h2); margin: 0 0 4px; }
.nira-account-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px var(--space-2); color: var(--text-muted); overflow-wrap: anywhere; }
.nira-account-avatar.nira-avatar { width: 56px; height: 56px; font-size: 20px; flex: none; }
/* Notifications and AI access side by side on wide screens; one column otherwise or for people without AI access. */
.nira-account-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.nira-account-grid.single { grid-template-columns: minmax(0, 760px); }
@media (max-width: 1000px) { .nira-account-grid { grid-template-columns: minmax(0, 1fr); } }
.nira-account .nira-clients-heading:first-of-type { margin-top: var(--space-4); }
.nira-account-or { margin: var(--space-2) 0 4px; }
.nira-account-tag { padding: 1px 8px; border-radius: var(--radius-pill); background: var(--mist); font-size: var(--size-caption); font-weight: 600; color: var(--ink); }
.nira-pref-master {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin: var(--space-3) 0;
    padding: var(--space-3);
    border-radius: var(--radius-md);
    background: var(--gray-50);
}
.nira-pref-list.is-paused { opacity: 0.5; }

/* ---- Client access (nira_clients.js, admin page) ---------------- */
.nira-project-checklist { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; border: 0; max-height: 240px; overflow-y: auto; }
.nira-project-check {
    display: flex; align-items: center; gap: 10px; margin: 0;
    padding: 8px 10px; border: 1.5px solid var(--border-subtle); border-radius: var(--radius-md);
    cursor: pointer; font-weight: var(--w-regular, 400);
    transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.nira-project-check:hover { border-color: var(--green-spring-600); }
.nira-project-check.checked { border-color: var(--green-spring-600); background: var(--green-spring-100); }
.nira-project-check input { width: 16px; height: 16px; margin: 0; accent-color: var(--green-spring-700); flex: none; }
.nira-project-check-name { flex: 1; min-width: 0; color: var(--text-strong); }
.nira-invite-done { display: flex; flex-direction: column; gap: 6px; line-height: 1.5; }

.nira-clients-heading { font-size: var(--size-body); font-weight: var(--w-medium); margin: var(--space-5) 0 var(--space-2); display: flex; align-items: center; gap: 8px; }
.nira-count-pill { min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--radius-pill); background: var(--green-lime); color: var(--ink); font-size: 12px; font-weight: 700; line-height: 20px; text-align: center; }
.nira-invite-row {
    display: grid; grid-template-columns: minmax(220px, 1.2fr) minmax(220px, 1fr) auto; gap: var(--space-4); align-items: start;
    padding: var(--space-3) 0; border-top: 1px solid var(--border-subtle);
}
.nira-invite-who { display: flex; gap: 10px; align-items: flex-start; min-width: 0; overflow-wrap: anywhere; }
.nira-invite-projects { display: flex; flex-direction: column; gap: 4px; }
.nira-invite-actions { display: flex; gap: 6px; }
.nira-clients-table td { vertical-align: top; }
.nira-clients-table tr.is-suspended td { color: var(--text-muted); }
.nira-client-projects { display: flex; flex-wrap: wrap; gap: 4px; }
.nira-client-actions { white-space: nowrap; text-align: right; }
.nira-client-actions .btn + .btn { margin-left: 4px; }
.nira-clients-recent { margin-top: var(--space-4); }
.nira-clients-recent ul { margin: 6px 0 0; padding-left: 18px; color: var(--text-muted); }
.nira-admin-timeout { display: flex; align-items: center; gap: 8px; }
.nira-people-add { display: grid; grid-template-columns: minmax(200px, 1.2fr) minmax(160px, 1fr) 140px auto; gap: 8px; margin: var(--space-3) 0; align-items: center; }
.nira-people-table td { vertical-align: middle; }
.nira-people-table .nira-select { min-width: 130px; }
.nira-people-tools { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin: 0 0 var(--space-2); }
.nira-people-tools .form-control { flex: 0 1 320px; }
.nira-people-group td { background: var(--gray-50); white-space: normal; }
.nira .nira-people-toggle { border: 0; background: none; padding: 0; margin-right: var(--space-2); font-weight: var(--w-medium); color: var(--text-strong); }
.nira .nira-people-toggle:hover { background: none; color: var(--green-spring-700); }
.nira-people-toggle .fas { width: 12px; font-size: 11px; }
.nira-people-none { margin: var(--space-3) 0 0; }
/* Phones: each person is a two-line row (who above, role and edit below) instead of a squeezed table. */
@media (max-width: 640px) {
    .nira-people-table thead { display: none; }
    .nira-people-table, .nira-people-table tbody { display: block; }
    .nira-people-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px var(--space-2); padding: var(--space-2) 0; border-top: 1px solid var(--border-subtle); }
    .nira-people-table td { display: block; border: 0; padding: 0; white-space: normal; }
    .nira-people-table td.nira-people-who { grid-column: 1 / -1; overflow-wrap: anywhere; }
    .nira-people-table td:nth-child(3) { align-self: center; text-align: right; }
    .nira-people-table td.nira-client-actions { grid-column: 1 / -1; }
    .nira-people-table .nira-people-group { display: block; padding: var(--space-2); }
    .nira-people-group .nira-small { display: block; margin-top: 4px; }
    .nira-admin-card { padding: var(--space-3); }
    .nira-admin-tabs { gap: var(--space-4); }
}
@media (max-width: 760px) {
    .nira-invite-row { grid-template-columns: 1fr; }
    .nira-people-add { grid-template-columns: 1fr; }
    .nira-admin-timeout { flex-wrap: wrap; }
    .nira-client-actions { white-space: normal; text-align: left; }
}

/* ---- Column editor (nira_columns.js) ------------------------------ */
.nira-colmap { display: flex; flex-direction: column; gap: var(--space-2); }
.nira-colmap-presets { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: var(--space-1); }
.nira-colmap-col { border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 8px 10px; background: var(--surface-card); }
.nira-colmap-head { display: grid; grid-template-columns: auto 1fr 96px auto; gap: var(--space-2); align-items: center; }
.nira-colmap-head .form-control { height: 34px; padding: 2px 8px; font-size: var(--size-body-sm); }
.nira-colmap-statuses { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; padding-left: 34px; }
.nira-status.nira-colmap-chip { padding-right: 4px; }
.nira-colmap-chip .nira-chip-x { color: inherit; opacity: .6; font-size: 15px; }
.nira-colmap-chip .nira-chip-x:hover { opacity: 1; color: var(--status-danger); }
.nira-colmap-unmapped { border: 1px dashed var(--border-subtle); border-radius: var(--radius-md); padding: 8px 10px; }
.nira-colmap-unmapped .nira-colmap-statuses { padding-left: 0; margin-top: 6px; }
@media (max-width: 760px) {
    .nira-colmap-head { grid-template-columns: auto 1fr 72px auto; }
    .nira-colmap-statuses { padding-left: 0; }
}

/* ---- AI access (MCP) -------------------------------------------- */
.nira-mcp-form { display: grid; grid-template-columns: 1fr 140px auto; gap: var(--space-2); align-items: center; margin: var(--space-3) 0; }
.nira-mcp-form .form-control { height: 34px; font-size: var(--size-body-sm); }
.nira-mcp-new { display: flex; flex-direction: column; gap: 6px; padding: var(--space-3); margin: var(--space-3) 0;
    border: 1.5px solid var(--green-spring-600); border-radius: var(--radius-md); background: var(--green-spring-100); }
.nira-mcp-copy { display: flex; gap: var(--space-2); align-items: center; }
.nira-mcp-copy code { flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap; padding: 6px 8px;
    background: var(--surface-card); border-radius: var(--radius-sm, 6px); font-size: 12px; color: var(--ink); }
.nira-mcp-tokens { list-style: none; margin: var(--space-2) 0; padding: 0; }
.nira-mcp-tokens li { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3);
    padding: var(--space-2) 0; border-top: 1px solid var(--border-subtle); }
.nira-admin-mcp .nira-pref-master { border: 0; padding: 0; margin: 0; gap: 8px; }
@media (max-width: 760px) { .nira-mcp-form { grid-template-columns: 1fr; } }
.nira-oauth-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-4); }
.nira-mcp-apps { margin-top: var(--space-3); }

/* ---- Docs: spaces, folders and pages over Claude artifacts ---------------- */

.docs-search { margin: 0; }
.docs-search input { width: 240px; max-width: 100%; height: 34px; }
.docs-spaces { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-4); }
.docs-space-card { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4);
    background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); text-decoration: none; }
.nira .docs-space-card { color: var(--text-body); }
.docs-space-card:hover { border-color: var(--border-default); box-shadow: 0 2px 10px rgba(14, 20, 18, .06); }
.docs-space-card.archived { opacity: .65; }
.docs-space-card h3 { margin: 0; font-family: var(--font-display); font-weight: var(--w-medium); font-size: 1.15rem; color: var(--text-strong); }
.docs-key { font-family: var(--font-mono); font-size: var(--size-caption); letter-spacing: .06em; color: var(--text-muted); }
.docs-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; padding-top: var(--space-1); }
.docs-chip { display: inline-flex; align-items: center; gap: 4px; font-size: var(--size-caption); padding: 2px 8px; border-radius: 999px;
    white-space: nowrap; background: var(--surface-sunken); color: var(--text-body); }
.docs-chip.inline { background: var(--accent-soft); }
.docs-chip.client { background: #FFF4D6; }
.docs-chip.linkonly { background: transparent; border: 1px solid var(--border-default); }
.docs-results { margin-bottom: var(--space-5); }
.docs-results-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-2); }
.docs-excerpt { color: var(--text-body); margin-top: 2px; }
.docs-excerpt mark { background: var(--accent-soft); padding: 0 1px; border-radius: 2px; }

.docs-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: var(--space-5); align-items: start; }
@media (max-width: 860px) { .docs-layout { grid-template-columns: minmax(0, 1fr); } }
.docs-sidebar { position: sticky; top: var(--space-3); background: var(--surface-card); border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md); padding: var(--space-3) var(--space-2); max-height: calc(100vh - 120px); overflow: auto; }
@media (max-width: 860px) { .docs-sidebar { position: static; max-height: none; } }
.docs-sidebar-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
    padding: 0 var(--space-2) var(--space-2); border-bottom: 1px solid var(--border-subtle); margin-bottom: var(--space-2); }
.nira .docs-space-name { font-family: var(--font-display); font-weight: var(--w-medium); color: var(--text-strong); text-decoration: none; min-width: 0; }
.docs-sidebar-actions { display: flex; gap: 4px; flex: none; }
.docs-sidebar-hint { font-size: var(--size-caption); color: var(--text-subtle); padding: var(--space-2) var(--space-2) 0; margin: 0; }
.docs-tree-list { list-style: none; margin: 0; padding: 0; }
.docs-drop { min-height: 4px; }
.docs-node { user-select: none; }
.docs-tree-row { display: flex; align-items: center; gap: 6px; padding: 4px 8px 4px calc(4px + var(--depth, 0) * 16px);
    border-radius: var(--radius-sm); font-size: var(--size-body-sm); text-decoration: none; }
.nira .docs-tree-row, .nira .docs-tree-row a { color: var(--text-body); text-decoration: none; }
.docs-tree-row a { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.docs-tree-row:hover { background: var(--surface-sunken); }
.docs-tree-row.current { background: var(--accent-soft); font-weight: var(--w-medium); }
.nira .docs-caret-btn { flex: none; width: 20px; height: 20px; min-height: 0; padding: 0; margin: 0; border: 0; border-radius: var(--radius-sm);
    background: transparent; color: var(--text-muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.nira .docs-caret-btn:hover, .nira .docs-caret-btn:focus { background: var(--border-subtle); color: var(--text-strong); }
.docs-caret { transition: transform .12s; }
.docs-caret.open { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) { .docs-caret { transition: none; } }
.docs-caret-gap { width: 20px; flex: none; }
.docs-ico { flex: none; color: var(--text-muted); }
.docs-tree-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.docs-tree-badge { color: var(--text-subtle); display: inline-flex; flex: none; }
.docs-tree-empty { padding: 2px 8px 2px calc(30px + var(--depth, 0) * 16px); font-size: var(--size-caption); color: var(--text-subtle); font-style: italic; }
.docs-node.nira-card-ghost > .docs-tree-row { background: var(--accent-soft); opacity: .6; }

.docs-main { min-width: 0; }
.docs-page-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-3); }
.docs-page-titles { min-width: 0; }
.docs-page-head h2 { font-family: var(--font-display); font-weight: var(--w-medium); margin: 0 0 4px; text-wrap: balance; }
.docs-page-actions { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.docs-page-actions .btn { display: inline-flex; align-items: center; gap: 6px; }
.docs-menu { position: relative; }
.docs-menu > summary { list-style: none; cursor: pointer; }
.docs-menu > summary::-webkit-details-marker { display: none; }
.docs-menu-list { position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; min-width: 230px; background: var(--surface-card);
    border: 1px solid var(--border-subtle); border-radius: var(--radius-md); box-shadow: 0 10px 30px rgba(14, 20, 18, .12); padding: 4px; }
.nira .docs-menu-list button { display: block; width: 100%; height: auto; min-height: 0; text-align: left; background: transparent; border: 0;
    color: var(--text-body); padding: 8px 10px; border-radius: var(--radius-sm); font-size: var(--size-body-sm); margin: 0; }
.nira .docs-menu-list button:hover, .nira .docs-menu-list button:focus { background: var(--surface-sunken); color: var(--text-strong); }
.nira .docs-menu-list button.danger { color: #9b3324; }
.docs-source { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; font-size: var(--size-caption); color: var(--text-muted);
    border-top: 1px solid var(--border-subtle); padding-top: var(--space-2); margin-bottom: var(--space-3); }
.docs-frame { width: 100%; min-height: 400px; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: #fff; display: block; }
.docs-linkonly, .docs-empty { background: var(--surface-card); border: 1px dashed var(--border-default); border-radius: var(--radius-md);
    padding: var(--space-5); max-width: 680px; }
.docs-empty { color: var(--text-muted); }
.docs-empty strong { display: block; color: var(--text-strong); margin-bottom: 4px; }
.docs-linkonly h3 { margin: 0 0 var(--space-2); font-family: var(--font-display); font-weight: var(--w-medium); }
.docs-linkonly p { margin: 0 0 var(--space-3); }
.docs-prompt { white-space: pre-wrap; background: var(--surface-sunken); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3);
    font-size: var(--size-caption); margin: var(--space-2) 0 var(--space-3); color: var(--text-body); }
.docs-history { margin-top: var(--space-4); }
.docs-history summary { cursor: pointer; }
.docs-history ul { margin: var(--space-2) 0 0; padding-left: 1.2em; }
.docs-check { display: flex; gap: var(--space-2); align-items: flex-start; font-size: var(--size-body-sm); }
.docs-check input { margin-top: 4px; }
.docs-check .nira-hint { display: block; }

.docs-listing { list-style: none; margin: 0; padding: 0; background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); }
.docs-listing li + li { border-top: 1px solid var(--border-subtle); }
.nira .docs-listing a { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); text-decoration: none; color: var(--text-body); }
.docs-listing a:hover { background: var(--surface-page); }
.docs-listing-main { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.docs-listing-main strong { color: var(--text-strong); font-weight: var(--w-medium); }
.docs-listing-when { white-space: nowrap; }
@media (max-width: 600px) { .docs-listing-when { display: none; } }
.nira.docs .btn-link { color: var(--text-muted); padding-left: 0; padding-right: 0; }
.nira.docs .btn-link:hover { color: var(--link-hover); }
.nira-search-docs { background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4); margin-bottom: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); }
.nira-search-docs-head { display: flex; justify-content: space-between; align-items: baseline; }
.nira .nira-search-doc { display: flex; flex-wrap: wrap; gap: 0 6px; align-items: baseline; text-decoration: none; color: var(--text-body); }
.nira .nira-search-doc:hover strong { text-decoration: underline; }
.nira-search-doc .docs-excerpt { flex-basis: 100%; }
.nira-search-doc .docs-excerpt mark, .docs-excerpt mark { background: var(--accent-soft); padding: 0 1px; border-radius: 2px; }

/* ---- Board types (Kanban / Sprint) ---- */
.nira .nira-board-kinds { display: flex; gap: 8px; flex-wrap: wrap; }
.nira .nira-board-kind { display: flex; flex-direction: column; gap: 2px; flex: 1 1 140px; margin: 0; cursor: pointer;
  border: 1.5px solid var(--border-default); border-radius: var(--radius-md); padding: 8px 12px; }
.nira .nira-board-kind input { position: absolute; opacity: 0; pointer-events: none; }
.nira .nira-board-kind strong { font-size: var(--size-body-sm); color: var(--text-strong); }
.nira .nira-board-kind span { font-size: var(--size-caption); color: var(--text-muted); }
.nira .nira-board-kind.on { border-color: var(--green-spring-700); background: var(--green-spring-100); }
.nira .nira-board-kind:focus-within { box-shadow: 0 0 0 3px rgba(47, 185, 107, 0.2); }
.nira .nira-board-kind-tag { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-muted); background: var(--gray-100); border-radius: 4px; padding: 1px 5px; margin-left: 4px; }

/* ---- Issue types from project templates ---- */
.nira-type.t-uat_defect { background: #FBE6E2; color: #B23C2C; }
.nira-type.t-hypercare_defect { background: #FDEBD8; color: #A3520F; }
.nira-type.t-feasibility { background: var(--green-lime-100); color: #4E7A12; }
.nira-type.t-playback_feedback, .nira-type.t-pb_feedback_entry { background: var(--slate-100); color: #4A5584; }
.nira-type.t-eightfold_item { background: var(--teal-100); color: #3F6870; }
.nira-type.t-milestone { background: var(--ink); color: var(--green-lime); }
.nira-type.t-risk { background: #FFF1D6; color: #8A5A00; }
.nira-type.t-change_request { background: var(--gray-150); color: var(--gray-700); }

/* ---- Project people -------------------------------------------- */
.nira-team-section + .nira-team-section { margin-top: var(--space-5); }
.nira-team-section h5 { margin: 0 0 var(--space-2); }
.nira-team-add { display: flex; gap: var(--space-2); align-items: center; margin-bottom: var(--space-2); }
.nira-team-add > :first-child { flex: 1; min-width: 0; }
.nira-team-list { list-style: none; margin: var(--space-2) 0 0; padding: 0; }
.nira-team-list li { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) 0; border-top: 1px solid var(--border-subtle); }
.nira-team-list li:first-child { border-top: 0; }
.nira-team-who { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.3; }
.nira-team-who > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nira-team-tag { flex: none; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; background: var(--green-spring-100); color: var(--green-spring-700); }
.nira-team-tag.is-muted { background: var(--gray-50); color: var(--text-subtle); }
.nira-project-filter { display: inline-flex; border: 1px solid var(--border-subtle); border-radius: 999px; padding: 2px; }
.nira-project-filter button { border: 0; background: none; border-radius: 999px; padding: 3px 12px; font-size: var(--size-body-sm); color: var(--text-muted); cursor: pointer; }
.nira-project-filter button.on { background: var(--ink); color: var(--gray-50); }

/* ---- Internal only ------------------------------------------------ */
.nira-visibility {
    display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2);
    margin-bottom: var(--space-3); padding: 6px 12px;
    border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
    font-size: var(--size-body-sm); color: var(--text-muted);
}
.nira-visibility .btn { margin-left: auto; }
.nira-visibility-text { flex: 1; min-width: 0; }
.nira-visibility.is-internal { background: #FCEFC7; border-color: #E8B23A; color: #6B4A08; padding: 10px 14px; }
.nira-visibility.is-internal > i { font-size: 16px; }
.nira-visibility.is-internal strong { color: #4A3305; margin-right: 4px; text-transform: uppercase; letter-spacing: .04em; }
.nira .nira-visibility.is-internal .btn-link { color: #6B4A08; text-decoration: underline; }
.nira-visibility-note { margin-left: auto; font-size: var(--size-caption); }
.nira-internal-badge {
    display: inline-flex; align-items: center; gap: 4px; flex: none;
    padding: 0 6px; border-radius: var(--radius-sm);
    background: #FCEFC7; color: #6B4A08; font-size: 11px; font-weight: 600; line-height: 18px;
}
.nira-internal-badge i { font-size: 10px; }
.nira-result-key .nira-internal-badge { margin-left: 6px; }
.nira-card.is-internal, .nira-row.is-internal { box-shadow: inset 3px 0 0 #E8B23A; }
.nira-internal-check { display: flex; align-items: center; gap: var(--space-2); margin: 0; padding: 8px 12px;
    border: 1px solid var(--border-subtle); border-radius: var(--radius-md); cursor: pointer; font-weight: normal; }
.nira-internal-check.on { background: #FCEFC7; border-color: #E8B23A; }
.nira-internal-check i { color: #6B4A08; }
/* Bootstrap's code stack starts with a font most machines lack; use the system monospace directly. */
.nira-account code { font-family: ui-monospace, Menlo, Consolas, monospace; }

/* ---- Admin: Jira import ------------------------------------- */
.nira-import-list { list-style: none; margin: 0 0 var(--space-3); padding: 0; }
.nira-import-list > li { padding: var(--space-2) 0; border-top: 1px solid var(--border-subtle); }
.nira-import-list > li:first-child { border-top: 0; }
.nira-import-row { display: flex; gap: var(--space-3); align-items: flex-start; }
.nira-import-icon { width: 22px; height: 22px; flex: none; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
                    font-size: 11px; background: var(--mist); color: var(--gray-700); margin-top: 2px; }
.is-waiting .nira-import-icon .fa-circle { font-size: 6px; }
.is-running .nira-import-icon { background: var(--ink); color: var(--green-spring); }
.is-done .nira-import-icon { background: var(--green-spring-100); color: #145C33; }
.is-failed .nira-import-icon { background: #FBE3DE; color: #9b3324; }
.is-failed .nira-import-who .nira-small { color: #9b3324; }
.nira-import-who { min-width: 0; flex: 1; }
.nira-import-list .nira-progress { margin: var(--space-2) 0 0 34px; }
.nira-import-notes { margin: 4px 0 0 34px; padding-left: 16px; }
.nira-import-log pre { max-height: 280px; overflow: auto; margin: var(--space-2) 0 0; padding: var(--space-3); border-radius: var(--radius-md);
                       background: var(--ink); color: #DCE7E1; font-size: 12px; white-space: pre-wrap; }
.nira-import-table td { vertical-align: middle; }
.nira-import-table label { margin: 0; cursor: pointer; font-weight: normal; }
.nira-import-table tr.is-chosen td { background: var(--green-spring-100); }
.nira-import-check { width: 36px; }
.nira-import-state { white-space: normal !important; }
.nira-import-replace { display: inline-flex; align-items: center; gap: 6px; margin-left: var(--space-3) !important; color: #9b3324; font-weight: var(--w-medium) !important; }
.nira-import-go { display: flex; justify-content: flex-end; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-3); }
.nira-import-blocked { color: #7a5a00; }

/* ---- Admin: initialize (go-live) ------------------------------ */
.nira-reset { border-left: 4px solid var(--status-danger); }
.nira-reset-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-3) var(--space-5); margin: var(--space-3) 0; }
.nira-reset-h { font-size: var(--size-body-sm); font-weight: var(--w-medium); text-transform: none; margin: 0 0 6px; color: var(--text-strong); }
.nira-reset-h.is-gone { color: #9b3324; }
.nira-reset-list { margin: 0 0 var(--space-3); padding-left: 18px; font-size: var(--size-body-sm); }
.nira-reset-list li + li { margin-top: 4px; }
.nira-reset-where { padding: 8px 12px; border-radius: var(--radius-sm); background: #FBE3DE; color: #7d2a1e; }
.nira-reset-option { display: flex; gap: 8px; align-items: flex-start; font-size: var(--size-body-sm); margin: 0 0 var(--space-3); }
.nira-reset-option input { margin-top: 3px; }
.nira-reset-confirm .nira-field { margin: 0; }

/* ---- Project settings: phase plan ----------------------------- */
.nira-phase-plan { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-2) var(--space-3); margin-bottom: var(--space-2); }
.nira-phase-plan .nira-field { margin: 0; }
.nira-phase-plan label { display: flex; justify-content: space-between; gap: 6px; }
.nira-phase-plan .is-current-phase label { color: var(--text-strong); }
.nira-phase-plan .nira-weeks-input { display: flex; align-items: center; gap: 6px; }
.nira-phase-plan .nira-weeks-input .form-control { width: 80px; }
.nira-phase-plan-foot { display: flex; align-items: flex-end; gap: var(--space-4); flex-wrap: wrap; }
.nira-phase-plan-foot .nira-field { margin: 0; }
fieldset.nira-field { border: 0; padding: 0; min-width: 0; }
.nira-label-legend { font-size: var(--size-body-sm); font-weight: var(--w-medium); color: var(--text-strong); margin-bottom: var(--space-2); width: auto; }

/* ---- Project settings: make it an Eightfold project ------------ */
.nira-make-eightfold { border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); }
.nira-make-eightfold legend { padding: 0 6px; margin-left: -6px; }
.nira-make-eightfold .nira-form-grid { margin-bottom: var(--space-3); }

/* ---- Dashboard: one view per phase (Eightfold) ----------------- */
.nira-dash-tabs { margin-bottom: var(--space-3); }
.nira-dash-now { font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; padding: 1px 6px; border-radius: 999px; background: var(--ink); color: var(--green-spring); vertical-align: 2px; }
.nira-dash-phase.loading { opacity: .55; }
.nira-dash-focus { margin: 0 0 var(--space-3); color: var(--text-body); }
.nira-dash-focus strong { color: var(--text-strong); }
.nira-dash-focus .is-over { color: #B4531C; font-weight: 600; }
.nira-dash-of { font-size: 24px; color: var(--text-subtle); }
.nira-dash-stack { display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: var(--gray-100); margin-bottom: var(--space-3); }
.nira-dash-stack span + span { box-shadow: inset 1px 0 0 var(--surface-card); }
.nira-dash-stack .tone-todo { background: var(--gray-300); }
.nira-dash-stack .tone-progress { background: #6B7AB0; }
.nira-dash-stack .tone-waiting { background: var(--status-warning); }
.nira-dash-stack .tone-blocked { background: var(--status-danger); }
.nira-dash-stack .tone-done { background: var(--green-spring-600); }
.nira-dash-status.tone-progress { border-top-color: #6B7AB0; }
.nira-dash-status.tone-waiting { border-top-color: var(--status-warning); }
.nira-dash-status.tone-blocked { border-top-color: var(--status-danger); }
.nira-dash-status.tone-done { border-top-color: var(--green-spring-600); }
.nira a.nira-dash-excluded { display: inline-block; margin-top: var(--space-2); color: var(--text-muted); }
.nira-dash-priorities { list-style: none; margin: 0; padding: 0; }
.nira-dash-priorities a { display: grid; grid-template-columns: 18px 72px minmax(0, 1fr) 32px; align-items: center; gap: var(--space-2); padding: 6px 0; color: var(--text-body); text-decoration: none; }
.nira-dash-priorities a:hover { color: var(--text-strong); }
.nira-dash-priorities strong { text-align: right; font-variant-numeric: tabular-nums; }
.nira-dash-priorities li.zero { opacity: .5; }
.nira-dash-priority-bar { height: 8px; border-radius: 999px; background: var(--gray-100); overflow: hidden; }
.nira-dash-priority-bar span { display: block; height: 100%; background: var(--ink-3); border-radius: 999px; }