/* webcafe.build - styles on top of app.css (the shared Webcafe app look). */

/* ---- stage / task / check badges ---- */
.stage-idea, .stage-planning { background: #F1F5F9 !important; color: var(--slate) !important; border: 1px solid var(--line); }
.stage-building { background: var(--ice) !important; color: var(--link) !important; border: 1px solid var(--frost); }
.stage-testing { background: var(--amber-soft) !important; color: var(--amber) !important; border: 1px solid var(--amber-line); }
.stage-live { background: var(--lime-soft) !important; color: var(--lime-ink) !important; border: 1px solid #D9F0C1; }
.stage-paused, .stage-retired { background: #fff !important; color: var(--slate) !important; border: 1px dashed #CBD5E1; }
.ts-doing { background: var(--ice) !important; color: var(--link) !important; border: 1px solid var(--frost); }
.ts-next { background: var(--amber-soft) !important; color: var(--amber) !important; border: 1px solid var(--amber-line); }
.ts-backlog, .ts-dropped { background: #F1F5F9 !important; color: var(--slate) !important; border: 1px solid var(--line); }
.ts-done { background: var(--lime-soft) !important; color: var(--lime-ink) !important; border: 1px solid #D9F0C1; }
.lvl-required { background: var(--navy) !important; color: #fff !important; }
.lvl-recommended { background: #F1F5F9 !important; color: var(--slate) !important; border: 1px solid var(--line); }
.lvl-off { background: #fff !important; color: var(--slate) !important; border: 1px dashed #CBD5E1; }
.prio { color: var(--slate); font-size: .82rem; }
.prio.hi { color: var(--red); font-weight: 600; }
.prio.lo { opacity: .75; }
.flag { display: inline-flex; align-items: center; gap: .3rem; font-size: .8rem; font-weight: 600; white-space: nowrap; }
.flag.bad { color: var(--red); }
.flag.warn { color: var(--amber); }
.flag.good { color: var(--lime-ink); }

/* ---- progress bar (a native <progress>, so no inline styles are needed) ---- */
.pbar { display: inline-flex; align-items: center; gap: .5rem; width: 100%; max-width: 150px; vertical-align: middle; }
.pbar progress { flex: 1; min-width: 40px; height: 8px; border: 0; border-radius: 99px; background: #E2E8F0; overflow: hidden;
                 appearance: none; -webkit-appearance: none; color: var(--sky); }
.pbar progress::-webkit-progress-bar { background: #E2E8F0; border-radius: 99px; }
.pbar progress::-webkit-progress-value { background: var(--sky); border-radius: 99px; }
.pbar progress::-moz-progress-bar { background: var(--sky); border-radius: 99px; }
.pbar progress.full { color: var(--lime); }
.pbar progress.full::-webkit-progress-value { background: var(--lime); }
.pbar progress.full::-moz-progress-bar { background: var(--lime); }
.pbar .pct { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--navy); font-size: .82rem; min-width: 2.6rem; text-align: right; }
.pbar.wide { max-width: none; }
.pbar.wide progress { height: 12px; }
.pbar.wide .pct { font: 800 1.6rem/1 var(--font-head); min-width: 4.4rem; }

/* ---- app page ---- */
.app-head { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 1.25rem; margin-bottom: 1.25rem; }
.app-head .panel { margin: 0; }
.fact-row { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; font-size: .86rem; color: var(--slate); margin-top: .6rem; }
.fact-row b { color: var(--navy); font-weight: 600; }
.fact-row a { overflow-wrap: anywhere; }
.phase-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; margin-top: .9rem; }
.phase-strip a { display: block; border: 1px solid var(--line); border-radius: 8px; padding: .45rem .6rem; text-decoration: none; color: inherit; background: var(--white); }
.phase-strip a:hover, .phase-strip a.on { border-color: var(--navy); }
.phase-strip .nm { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--slate); font-weight: 600; }
.phase-strip .ct { font: 700 1rem/1.3 var(--font-head); color: var(--navy); }
.next-box textarea { min-height: 5.5rem; font-size: .92rem; }
.subnav { display: flex; flex-wrap: wrap; gap: .25rem; border-bottom: 1px solid var(--line); margin-bottom: 1rem; }
.subnav a { padding: .55rem .9rem; font-weight: 600; font-size: .9rem; color: var(--slate); text-decoration: none; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.subnav a:hover { color: var(--navy); }
.subnav a.on { color: var(--navy); border-bottom-color: var(--lime); }
.subnav .count { opacity: .7; margin-left: .3rem; font-weight: 500; }
.pre-wrap { white-space: pre-wrap; overflow-wrap: anywhere; }

/* ---- checklist ---- */
.check-group { margin-bottom: 1.25rem; }
.check-group > h3 { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 .4rem; }
.check-group > h3 small { font: 500 .8rem var(--font-body); color: var(--slate); letter-spacing: 0; }
.check-list { background: var(--white); border: 1px solid var(--line); border-radius: 10px; }
.check-row { border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 7.2rem minmax(0, 1fr); align-items: start; }
.check-row:last-child { border-bottom: 0; }
.check-row > .tick { margin: .5rem 0 .5rem .7rem; justify-self: start; }
.check-row > details > summary { display: grid; grid-template-columns: 4.4rem minmax(0, 1fr) auto; gap: .7rem; align-items: center; padding: .55rem .7rem;
                                 cursor: pointer; list-style: none; }
.check-row > details > summary::-webkit-details-marker { display: none; }
.check-row > details > summary:hover .ttl { color: var(--link); }
.check-row .code { color: var(--slate); font-size: .78rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.check-row .ttl { font-weight: 500; color: var(--ink); }
.check-row.is-done .ttl, .check-row.is-na .ttl { color: var(--slate); }
.check-row.is-na .ttl { text-decoration: line-through; }
.check-row .meta { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; justify-content: flex-end; font-size: .78rem; color: var(--slate); }
.check-row .body { padding: 0 .9rem .9rem 5.8rem; font-size: .9rem; }
.check-row > details { min-width: 0; }
.check-row .body .guidance { color: var(--ink); margin-bottom: .6rem; max-width: 70ch; }
.check-row .body form.note { display: flex; gap: .5rem; max-width: 640px; }
.tick { display: inline-flex; border: 1px solid #CBD5E1; border-radius: 8px; overflow: hidden; background: var(--white); }
.tick button { border: 0; background: transparent; padding: .3rem .5rem; font-size: .76rem; font-weight: 600; color: var(--slate); border-right: 1px solid #CBD5E1; line-height: 1.2; }
.tick button:last-child { border-right: 0; }
.tick button:hover { background: var(--ice); color: var(--navy); }
.tick button.on.s-done { background: var(--lime); color: var(--navy); }
.tick button.on.s-na { background: #64748B; color: #fff; }
.due-note { color: var(--amber); font-weight: 600; }

/* ---- dashboard ---- */
.dash-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; margin-bottom: 1.25rem; }
.dash-grid .panel { margin: 0; }
.pick-list { list-style: none; margin: 0; padding: 0; }
.pick-list li { padding: .7rem 1.1rem; border-bottom: 1px solid var(--line); }
.pick-list li:last-child { border-bottom: 0; }
.pick-list .top { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
.pick-list .top a { font-weight: 600; color: var(--navy); text-decoration: none; }
.pick-list .top a:hover { color: var(--link); text-decoration: underline; }
.pick-list .next { color: var(--ink); font-size: .88rem; margin-top: .15rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pick-list .sub { color: var(--slate); font-size: .8rem; white-space: nowrap; }
.pick-list .empty { color: var(--slate); }

/* ---- guide ---- */
.guide { max-width: 78ch; }
.guide h2 { margin-top: 2rem; padding-top: 1.2rem; border-top: 1px solid var(--line); }
.guide li { margin-bottom: .45rem; }
.guide .lead-in { font-size: 1.05rem; color: var(--slate); }
.inline-form { display: inline; margin: 0; }
.row-actions { display: inline-flex; gap: .3rem; }
.w-ref { width: 4.5rem; } .w-sm { width: 7rem; } .w-md { width: 9.5rem; } .w-lg { width: 12rem; } .w-xl { width: 15rem; }
.token-box { font-family: ui-monospace, Consolas, monospace; font-size: .95rem; overflow-wrap: anywhere; }

@media (max-width: 900px) {
    .app-head, .dash-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .check-row { grid-template-columns: minmax(0, 1fr); }
    .check-row > .tick { margin-bottom: 0; }
    .check-row > details > summary { grid-template-columns: minmax(0, 1fr); gap: .2rem; }
    .check-row .code { display: none; }
    .check-row .meta { justify-content: flex-start; }
    .check-row .body { padding-left: .9rem; }
    .phase-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}