/* Development board (#FeosDevBoard, feos:views/dev-board; Peter, 5 Oct 2026): the Kanban of FEOS's development. */
.feos-board { --fb-todo: #8a96a3; --fb-work: #e8a33d; --fb-testing: #0a72ba; --fb-done: #2e9e5b;
    --fb-focus: #c2410c; --fb-focus-soft: #fff1e6; padding-bottom: 40px; }
.feos-board .fb-empty { padding: 40px; text-align: center; color: var(--feos-muted); }
.fb-head { display: flex; justify-content: space-between; gap: 16px 24px; align-items: flex-end; flex-wrap: wrap;
    margin: 4px 0 14px; }
.fb-head h3 { margin: 0 0 4px; font-weight: 800; font-size: 24px; color: var(--feos-ink); }
.fb-sub { color: var(--feos-muted); max-width: 640px; }
.fb-totals { display: flex; gap: 6px; flex-wrap: wrap; }
.fb-total { border-radius: 999px; padding: 4px 12px; font-size: 13px; background: #fff; border: 1px solid var(--feos-line);
    color: var(--feos-muted); white-space: nowrap; }
.fb-total b { color: var(--feos-ink); font-size: 15px; margin-right: 2px; }
.fb-total.is-todo { border-left: 4px solid var(--fb-todo); }
.fb-total.is-work { border-left: 4px solid var(--fb-work); }
.fb-total.is-testing { border-left: 4px solid var(--fb-testing); }
.fb-total.is-done { border-left: 4px solid var(--fb-done); }
.fb-tools { display: flex; gap: 8px 10px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.fb-tools .form-control { width: auto; min-width: 170px; }
.fb-tools input[type=search] { min-width: 240px; flex: 1 1 240px; max-width: 360px; }
.fb-check { display: inline-flex; gap: 6px; align-items: center; margin: 0; font-weight: 600; cursor: pointer;
    padding: 6px 12px; border: 1px solid var(--feos-line); border-radius: 999px; background: #fff; }
.fb-check b { color: var(--fb-focus); }

.fb-needs { background: var(--fb-focus-soft); border: 1px solid #f7c9a8; border-radius: 12px; padding: 10px 16px 12px;
    margin-bottom: 16px; }
.fb-needs summary { cursor: pointer; font-weight: 800; color: #7a2e0b; font-size: 15px; }
.fb-needs summary span { background: var(--fb-focus); color: #fff; border-radius: 999px; padding: 1px 9px; font-size: 12px;
    margin-left: 4px; }
.fb-needs summary small { font-weight: 400; color: #9a5b3a; margin-left: 8px; }
.fb-needs ol { margin: 10px 0 0 20px; padding: 0; columns: 2 420px; column-gap: 32px; }
.fb-needs li { margin: 0 0 7px; break-inside: avoid; color: #4a2a17; }
.fb-needs li a { font-weight: 700; color: #7a2e0b; }
.fb-pri { display: inline-block; width: 8px; height: 8px; border-radius: 50%; vertical-align: middle; margin: 0 2px; }
.fb-pri.is-high { background: #d92d20; }
.fb-pri.is-normal { background: #e8a33d; }
.fb-pri.is-low { background: #b8c2cc; }
.fb-dtop .fb-pri { width: auto; height: auto; border-radius: 6px; padding: 1px 8px; color: #fff; font-size: 11px;
    font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.fb-dtop .fb-pri.is-low { color: #334155; }

.fb-cols { display: grid; grid-template-columns: repeat(var(--fb-n, 4), minmax(250px, 1fr)); gap: 14px;
    align-items: start; }
.fb-cols:has(> .fb-col:nth-child(3):last-child) { --fb-n: 3; }
.fb-col { background: #eef2f6; border-radius: 14px; padding: 10px; min-width: 0; }
.fb-col > header { display: grid; grid-template-columns: 1fr auto; gap: 0 8px; padding: 4px 6px 10px;
    border-top: 4px solid var(--fb-todo); margin: -10px -10px 8px; padding: 10px 16px; border-radius: 14px 14px 0 0;
    background: #e6ebf1; }
.fb-col.is-work > header { border-top-color: var(--fb-work); }
.fb-col.is-testing > header { border-top-color: var(--fb-testing); }
.fb-col.is-done > header { border-top-color: var(--fb-done); }
.fb-col > header b { font-size: 15px; color: var(--feos-ink); }
.fb-col > header span { font-weight: 800; color: var(--feos-muted); }
.fb-col > header small { grid-column: 1 / -1; color: var(--feos-muted); font-size: 12px; line-height: 1.35; }
.fb-list { display: flex; flex-direction: column; gap: 8px; }
.fb-none { color: var(--feos-muted); font-size: 13px; padding: 10px 6px; }
.fb-card { display: block; background: #fff; border: 1px solid var(--feos-line); border-left: 4px solid transparent;
    border-radius: 10px; padding: 10px 12px; color: inherit; box-shadow: 0 1px 2px rgba(15, 27, 38, .05);
    transition: box-shadow .12s, transform .12s; }
.fb-card:hover, .fb-card:focus { text-decoration: none; color: inherit; box-shadow: 0 4px 14px rgba(15, 27, 38, .12);
    transform: translateY(-1px); }
.fb-card.is-high { border-left-color: #d92d20; }
.fb-card.has-focus { background: linear-gradient(180deg, #fff 0%, #fffaf6 100%); }
.fb-card.is-auto { opacity: .78; border-style: dashed; border-left-style: solid; }
.fb-ctop { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; text-transform: uppercase;
    letter-spacing: .04em; color: var(--feos-muted); }
.fb-own { font-weight: 700; color: var(--feos-accent-dark); text-align: right; }
.fb-title { font-weight: 700; color: var(--feos-ink); font-size: 14.5px; line-height: 1.3; margin: 4px 0 3px; }
.fb-sum { color: var(--feos-muted); font-size: 12.5px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 3;
    -webkit-box-orient: vertical; overflow: hidden; }
.fb-foot { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-top: 8px; font-size: 11.5px; }
.fb-grow { flex: 1; }
.fb-b { border-radius: 6px; padding: 1px 7px; font-weight: 700; white-space: nowrap; }
.fb-b.is-focus { background: var(--fb-focus); color: #fff; }
.fb-b.is-open { background: #e8f0f8; color: #0b4a78; }
.fb-b.is-wait { background: #f1e9fb; color: #6b3fa0; }
.fb-b.is-bad { background: #fdecea; color: #b42318; }
.fb-b.is-ok { background: #e6f6ec; color: #1e7a45; }
.fb-ver { color: var(--feos-muted); font-variant-numeric: tabular-nums; }
.fb-date { color: var(--feos-muted); }
.fb-date.is-stale { color: #b45309; font-weight: 700; }

.fb-rel { margin-top: 22px; background: #fff; border: 1px solid var(--feos-line); border-radius: 12px; padding: 10px 16px; }
.fb-rel summary { cursor: pointer; font-weight: 800; color: var(--feos-ink); }
.fb-rel summary span { color: var(--feos-muted); font-weight: 600; margin-left: 4px; }
.fb-rel ol { list-style: none; margin: 10px 0 0; padding: 0; }
.fb-rel li { padding: 10px 0; border-top: 1px solid var(--feos-line); display: grid; grid-template-columns: 110px 1fr;
    gap: 2px 14px; }
.fb-rv b { display: block; color: var(--feos-ink); }
.fb-rv span { color: var(--feos-muted); font-size: 12px; }
.fb-rn { font-size: 13px; color: var(--text-color, #1d2733); }
.fb-rm { grid-column: 2; display: flex; gap: 4px; flex-wrap: wrap; }
.fb-rm span { font-size: 11px; background: #eef2f6; border-radius: 5px; padding: 0 6px; color: var(--feos-muted); }

.fb-drawer { position: fixed; inset: 0; z-index: 1100; }
.fb-drawer[hidden] { display: none; }
.fb-back { position: absolute; inset: 0; background: rgba(15, 27, 38, .38); }
.fb-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(620px, 100%); background: #fff; overflow-y: auto;
    padding: 22px 26px 40px; box-shadow: -10px 0 40px rgba(15, 27, 38, .25); animation: fb-in .16s ease-out; }
@keyframes fb-in { from { transform: translateX(30px); opacity: .4; } to { transform: none; opacity: 1; } }
.fb-x { position: absolute; top: 10px; right: 14px; border: 0; background: none; font-size: 30px; line-height: 1;
    color: var(--feos-muted); cursor: pointer; }
.fb-dtop { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; font-size: 12.5px; color: var(--feos-muted);
    padding-right: 30px; }
.fb-colname { color: #fff; border-radius: 6px; padding: 1px 8px; font-weight: 700; background: var(--fb-todo); }
.fb-colname.is-work { background: var(--fb-work); }
.fb-colname.is-testing { background: var(--fb-testing); }
.fb-colname.is-done { background: var(--fb-done); }
.fb-panel h3 { margin: 10px 0 6px; font-weight: 800; font-size: 22px; color: var(--feos-ink); }
.fb-dsum { color: var(--feos-muted); font-size: 15px; margin: 0 0 8px; }
.fb-meta { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13px; color: var(--feos-muted); margin-bottom: 8px; }
.fb-meta .is-ok b { color: #1e7a45; }
.fb-sec { margin-top: 16px; }
.fb-sec h5 { margin: 0 0 6px; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
    color: var(--feos-muted); }
.fb-sec p { margin: 0; line-height: 1.55; }
.fb-sec ul { margin: 0; padding-left: 20px; }
.fb-sec li { margin: 0 0 5px; line-height: 1.5; }
.fb-sec.is-focus { background: var(--fb-focus-soft); border: 1px solid #f7c9a8; border-radius: 10px; padding: 10px 14px; }
.fb-sec.is-focus h5 { color: var(--fb-focus); }
.fb-sec.is-open h5 { color: #0b4a78; }
.fb-sec.is-wait h5 { color: #6b3fa0; }
.fb-sec.is-bad { background: #fdecea; border-radius: 10px; padding: 10px 14px; }
.fb-sec.is-bad h5 { color: #b42318; }
.fb-sec code, .fb-rn code, .fb-needs code { font-size: 12px; background: #eef2f6; padding: 0 4px; border-radius: 4px; }
.fb-st { font-size: 11px; background: #eef2f6; border-radius: 5px; padding: 0 6px; margin-left: 4px; }
.fb-log { list-style: none; padding: 0 !important; }
.fb-log li span { color: var(--feos-muted); font-size: 12px; margin-right: 6px; white-space: nowrap; }
.fb-links { margin-top: 20px; padding-top: 12px; border-top: 1px solid var(--feos-line); font-size: 13px; }
body.feos-board-open { overflow: hidden; }

@media (max-width: 1100px) {
    .fb-cols { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(270px, 82vw);
        overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; }
    .fb-col { scroll-snap-align: start; }
}
@media (max-width: 640px) {
    .fb-tools .form-control, .fb-tools input[type=search] { flex: 1 1 100%; max-width: none; min-width: 0; }
    .fb-needs ol { columns: 1; }
    .fb-panel { padding: 18px 16px 40px; }
    .fb-rel li { grid-template-columns: 1fr; }
    .fb-rm { grid-column: 1; }
}