/* Project Board is a page at every viewport. Its compact list is the phone default; the optional
   four-column projection only becomes columns when there is room and never requires dragging. */
.board-page {
    position: fixed;
    inset: var(--head-h, 52px) 0 0;
    z-index: 35;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: clamp(14px, 3vw, 32px);
    background:
        radial-gradient(circle at 82% -8%, rgba(217, 119, 87, .12), transparent 29rem),
        var(--bg);
    color: var(--ink);
}
.board-page[hidden], .board-page [hidden] { display: none; }
.board-page button:focus-visible,
.board-page input:focus-visible,
.board-page textarea:focus-visible,
.board-page select:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.board-head {
    display: flex;
    align-items: center;
    gap: 10px;
    width: min(1180px, 100%);
    margin: 0 auto 12px;
}
.board-head h1 { min-width: 0; margin: 0; font-size: clamp(24px, 5vw, 38px); letter-spacing: -.04em; }
#board-back, #board-new, #board-layout, .board-button {
    min-height: 40px;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 8px 12px;
    background: rgba(22, 22, 26, .86);
    color: var(--ink);
    text-align: center;
}
#board-back:hover, #board-new:hover, #board-layout:hover, .board-button:hover {
    border-color: var(--accent-ed);
    background: var(--card-hi);
}
#board-new { margin-left: auto; border-color: var(--accent-ed); color: var(--accent); }
#board-new:disabled, .board-button:disabled { cursor: not-allowed; opacity: .45; }

#board-status {
    display: flex;
    align-items: center;
    gap: 10px;
    width: min(1180px, 100%);
    min-height: 22px;
    margin: 0 auto 10px;
    color: var(--dim);
    font-size: 13px;
}
#board-status.board-status-error {
    border-left: 2px solid var(--bad);
    padding: 7px 10px;
    color: var(--warn);
}
.board-retry { flex: none; min-height: 32px; padding: 4px 10px; }

.board-filters {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    gap: 8px;
    width: min(1180px, 100%);
    margin: 0 auto 14px;
}
.board-filters label { display: grid; gap: 4px; color: var(--faint); font-size: 11px; }
.board-filters input, .board-filters select,
.board-field input, .board-field textarea, .board-field select,
.board-check-row select, .board-milestone-row select {
    width: 100%;
    min-width: 0;
    min-height: 42px;
    border: 1px solid var(--line);
    border-radius: 9px;
    padding: 8px 10px;
    background: var(--card);
    color: var(--ink);
}
#board-layout { align-self: end; width: 100%; }

#board-projects, #board-items, #board-detail {
    width: min(1180px, 100%);
    margin-right: auto;
    margin-left: auto;
}
.board-items { display: grid; gap: 9px; padding-bottom: 50px; }
.board-item-card {
    display: grid;
    gap: 7px;
    width: 100%;
    min-width: 0;
    min-height: 112px;
    border: 1px solid var(--line);
    border-left: 3px solid var(--line);
    border-radius: 13px;
    padding: 13px 14px;
    background: rgba(22, 22, 26, .9);
    color: var(--ink);
    text-align: left;
}
.board-item-card:hover { border-color: var(--accent-ed); background: var(--card-hi); }
.board-item-card[data-board-state="execution"] { border-left-color: var(--accent); }
.board-item-card[data-board-state="verified"] { border-left-color: var(--peer); }
.board-item-card[data-board-state="integrated"],
.board-item-card[data-board-state="closed"] { border-left-color: var(--ok); }
.board-card-top, .board-card-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 11px; }
.board-card-top { justify-content: space-between; }
.board-card-key { color: var(--faint); font: 11px/1.4 var(--mono); }
.board-type, .board-chip {
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 2px 8px;
    color: var(--dim);
    font-size: 11px;
}
.board-card-title { overflow-wrap: anywhere; font-size: 15px; line-height: 1.35; }
.board-card-state { color: var(--dim); font-size: 12px; }
.board-card-summary {
    display: -webkit-box;
    overflow: hidden;
    color: var(--dim);
    font-size: 13px;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.board-card-next { color: var(--warn); font-size: 12px; }
.board-card-facts { color: var(--faint); font-size: 11px; }
.board-card-usage { font-family: var(--mono); }
.board-empty { border: 1px dashed var(--line); border-radius: 13px; padding: 24px; color: var(--dim); text-align: center; }
.board-empty-small { margin: 4px 0; color: var(--faint); font-size: 12px; }

.board-items-board { align-items: start; }
.board-column { display: grid; gap: 8px; min-width: 0; }
.board-column-title {
    position: sticky;
    top: -1px;
    z-index: 1;
    margin: 0;
    border-bottom: 1px solid var(--line);
    padding: 9px 2px 7px;
    background: var(--bg);
    color: var(--dim);
    font-size: 13px;
}

.board-create-panel {
    order: -1;
    border: 1px solid var(--accent-ed);
    border-radius: 14px;
    padding: 14px;
    background: var(--accent-in);
}
.board-create-panel h2 { margin: 0 0 10px; font-size: 17px; }

.board-detail-header {
    display: grid;
    gap: 8px;
    border-bottom: 1px solid var(--line);
    padding: 8px 2px 18px;
}
.board-detail-key { color: var(--faint); font: 11px/1.4 var(--mono); }
.board-detail-title { margin: 0; overflow-wrap: anywhere; font-size: clamp(23px, 5vw, 36px); letter-spacing: -.035em; }
.board-detail-summary { max-width: 760px; margin: 0; color: var(--dim); font-size: 14px; white-space: pre-wrap; }
.board-detail-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.board-detail-header > .board-button { justify-self: start; }

.board-section {
    display: grid;
    gap: 8px;
    border-bottom: 1px solid var(--line);
    padding: 18px 2px;
}
.board-section-title { margin: 0; font-size: 16px; letter-spacing: -.015em; }
.board-section-help { margin: 0; color: var(--faint); font-size: 12px; }
.board-usage-value { margin: 0; color: var(--ink); font: 650 17px/1.4 var(--mono); }
.board-usage-unknown { margin: 0; color: var(--warn); font-style: italic; }
.board-fact, .board-check-row, .board-milestone-row, .board-obligation,
.board-link-row, .board-span-row, .board-history-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 9px 11px;
    background: rgba(22, 22, 26, .6);
}
.board-fact-label, .board-history-at { flex: none; color: var(--faint); font: 11px/1.4 var(--mono); }
.board-fact-value { min-width: 0; overflow-wrap: anywhere; text-align: right; }
.board-check-title, .board-milestone-title, .board-link-label { min-width: 0; overflow-wrap: anywhere; }
.board-check-required { color: var(--warn); font-size: 11px; }
.board-check-row select, .board-milestone-row select { width: auto; min-height: 36px; }
.board-obligation { border-left: 3px solid var(--warn); }
.board-artifact-link, .board-artifact-invalid { overflow-wrap: anywhere; }
.board-artifact-link { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.board-artifact-invalid { color: var(--faint); text-decoration: line-through; }
.board-artifact-accepted { color: var(--ok); font-size: 12px; }
.board-button-small { min-height: 34px; padding: 5px 9px; font-size: 12px; }

.board-inline-form {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    border: 1px dashed var(--line);
    border-radius: 11px;
    padding: 10px;
    background: rgba(14, 14, 17, .45);
}
.board-field { display: grid; gap: 4px; min-width: 0; }
.board-field-label { color: var(--faint); font-size: 11px; }
.board-field textarea { min-height: 76px; resize: vertical; }
.board-field input[type="checkbox"] { width: 22px; min-height: 22px; }
.board-form-actions { display: flex; align-items: end; }
.board-button-primary { border-color: var(--accent-ed); color: var(--accent); }

@media (min-width: 700px) {
    .board-filters { grid-template-columns: minmax(170px, .9fr) minmax(240px, 1.5fr) minmax(120px, .65fr) minmax(120px, .65fr) auto; }
    #board-layout { width: auto; white-space: nowrap; }
    .board-inline-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .board-inline-form .board-form-actions { align-self: end; }
}

@media (min-width: 960px) {
    .board-items-board { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
}

@media (max-width: 560px) {
    .board-head { flex-wrap: wrap; }
    .board-head h1 { order: -1; width: 100%; }
    #board-new { margin-left: 0; }
    .board-fact, .board-check-row, .board-milestone-row, .board-obligation,
    .board-link-row, .board-span-row, .board-history-row { align-items: flex-start; flex-direction: column; }
    .board-fact-value { text-align: left; }
    .board-check-row select, .board-milestone-row select { width: 100%; }
}

@media (pointer: coarse) {
    #board-back, #board-new, #board-layout, .board-button { min-height: 46px; }
    .board-item-card { min-height: 124px; }
}