/* 在 Pico CSS 之上做少量调整 */
:root {
  --pico-font-size: 15px;
  --pico-font-family: system-ui, -apple-system, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  --pico-spacing: .9rem;
  --pico-primary: #1d5c86;
  --pico-primary-background: #1d5c86;
  --pico-primary-hover-background: #164b6e;
  --ok: #2b7a4b; --ok-bg: #e3f2e8; --warn: #975807; --warn-bg: #fbefd9; --bad: #b1362e; --bad-bg: #fae5e2; --info: #164b6e; --info-bg: #e3edf5; --mute: #56626e; --mute-bg: #eceff2;
}
/* 只用亮色界面：index.html 的 <html data-theme="light"> 让 Pico 固定亮色，这里不再定义深色变量 */
h1 { font-size: 1.6rem; margin-bottom: .5rem; }
h2 { font-size: 1.2rem; margin: 1.6rem 0 .6rem; }
h3 { font-size: 1.05rem; margin: .2rem 0 .4rem; }
article { margin: 0 0 var(--pico-spacing); padding: 1rem 1.1rem; }
article > header { margin: -1rem -1.1rem .8rem; padding: .6rem 1.1rem; }
.boot { padding: 2rem; }
.muted { color: var(--pico-muted-color); }
.small, small { font-size: .82rem; }
.bad { color: var(--bad); } .warn { color: var(--warn); }
.eyebrow { letter-spacing: .1em; color: var(--pico-muted-color); }
.crumb { font-size: .85rem; color: var(--pico-muted-color); margin-bottom: .3rem; }
.narrow { max-width: 560px; }

.topbar { border-bottom: 1px solid var(--pico-muted-border-color); background: var(--pico-card-background-color); position: sticky; top: 0; z-index: 10; }
.topbar-in { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-top: .6rem; padding-bottom: .6rem; }
.brand { text-decoration: none; color: inherit; line-height: 1.3; }
.brand b { display: block; font-size: 1.05rem; }
.brand small { color: var(--pico-muted-color); }
.mainnav { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; font-size: .95rem; }
.mainnav a { text-decoration: none; }
.mainnav a.strong { font-weight: 600; }
.mainnav a.muted { color: var(--pico-muted-color); }
main.container { padding-top: 1.2rem; padding-bottom: 2rem; min-height: 70vh; }
.foot { font-size: .8rem; color: var(--pico-muted-color); border-top: 1px solid var(--pico-muted-border-color); padding: 1rem 0 2rem; }

.hero { padding: 1.6rem 1.4rem; border-radius: var(--pico-border-radius); background: linear-gradient(120deg, #133f5f, #1d5c86); color: #fff; margin-bottom: 1rem; }
.hero h1 { color: #fff; }
.hero p { color: #dbe8f3; max-width: 640px; }
.hero [role=button] { margin: .3rem .4rem 0 0; }
.hero .secondary.outline { color: #fff; border-color: #fff; }

.grid2, .grid3, .grid4 { display: grid; gap: var(--pico-spacing); }
.grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .grid2, .grid3, .grid4 { grid-template-columns: 1fr; } .kpis.grid4, .kpis.grid3 { grid-template-columns: 1fr 1fr; } }
.grid2 > label, .grid3 > label { margin: 0; }

.card.link, .link { cursor: pointer; }
.card.link:hover { outline: 2px solid var(--pico-primary); }
.meter { font-size: .82rem; }
.meter progress, .kpi progress { margin: .2rem 0 .5rem; height: .45rem; }
.kpi small { display: block; }
.kpi b { display: block; font-size: 1.5rem; line-height: 1.3; }
.kpi b small { display: inline; font-size: .85rem; font-weight: 400; color: var(--pico-muted-color); }
.warnbox { background: var(--warn-bg); }

.row { display: flex; align-items: center; gap: .6rem; padding: .5rem 0; border-bottom: 1px dashed var(--pico-muted-border-color); }
.row > div { flex: 1; min-width: 0; }
.row:last-child { border-bottom: 0; }
.small-btn { padding: .25rem .7rem; font-size: .85rem; margin: .15rem .3rem .15rem 0; width: auto; }
.btns { display: flex; flex-wrap: wrap; gap: .3rem; }
.tag { display: inline-block; font-size: .75rem; padding: 0 .45rem; border-radius: 4px; white-space: nowrap; background: var(--mute-bg); color: var(--mute); }
.tag.ok { background: var(--ok-bg); color: var(--ok); }
.tag.warn { background: var(--warn-bg); color: var(--warn); }
.tag.bad { background: var(--bad-bg); color: var(--bad); }
.tag.info { background: var(--info-bg); color: var(--info); }
.notice { background: var(--info-bg); }
.notice.ok { background: var(--ok-bg); }
.notice.bad { background: var(--bad-bg); color: var(--bad); }

.sp-head { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; align-items: flex-start; }
.sp-head h1 .tag { font-size: .8rem; vertical-align: middle; }
.tabs { display: flex; flex-wrap: wrap; gap: .2rem 1.2rem; border-bottom: 1px solid var(--pico-muted-border-color); margin: .5rem 0 1rem; }
.tabs a { text-decoration: none; padding: .4rem 0; color: var(--pico-muted-color); border-bottom: 2px solid transparent; }
.tabs a.on { color: var(--pico-primary); border-bottom-color: var(--pico-primary); font-weight: 600; }
table { font-size: .88rem; }
td.ops select { padding: .2rem .4rem; font-size: .8rem; margin: 0 0 .2rem; height: auto; }
.upload { font-size: .78rem; color: var(--pico-primary); cursor: pointer; }
.upload input { display: none; }
.inline-form { display: flex; flex-wrap: wrap; gap: .5rem; align-items: flex-start; }
.inline-form > * { flex: 1 1 160px; margin: 0; }
.inline-form button { flex: 0 0 auto; }
.card-form { border: 1px solid var(--pico-muted-border-color); border-radius: var(--pico-border-radius); padding: 1rem; margin-bottom: 1rem; }
.progress-item p { margin: .3rem 0; }
.toast { position: fixed; left: 50%; bottom: 1.5rem; transform: translateX(-50%); background: #1b2530; color: #fff; padding: .6rem 1rem; border-radius: 8px; z-index: 50; max-width: 90vw; font-size: .9rem; }

/* Pico 默认把 nav 两端对齐，页签需要靠左排列 */
.tabs { justify-content: flex-start; }
.tabs a { margin: 0; }
.mainnav { justify-content: flex-end; }
.mainnav a { margin: 0; padding: .2rem 0; }
/* 过程表：日期、状态不折行，任务名和风险列可折行 */
.overflow-auto td { white-space: nowrap; }
.overflow-auto td:first-child, .overflow-auto td:nth-child(8) { white-space: normal; min-width: 9em; }

/* v2 补充 */
.badge { display: inline-block; min-width: 1.3em; padding: 0 .35em; margin-left: .2em; border-radius: 999px; background: var(--bad); color: #fff; font-size: .72rem; text-align: center; line-height: 1.5; }
.lede { font-size: 1.02rem; color: var(--pico-muted-color); }
.wall h3 { margin-top: .3rem; }
.callout-ok { border-left: 4px solid var(--ok); background: var(--ok-bg); }
.notice.warn { background: var(--warn-bg); color: var(--warn); }
.row.tight { padding: .2rem 0; border-bottom: 0; }
.row.unread b::before { content: "● "; color: var(--bad); }
code.big { font-size: 1.1rem; letter-spacing: .15em; }
code.wrap { white-space: normal; word-break: break-all; }
select.mini, input.mini { padding: .15rem .4rem; font-size: .8rem; margin: 0; height: auto; min-width: 6em; }
td.wide { min-width: 10em; white-space: normal !important; }
label.inline { display: inline-flex; align-items: center; gap: .3rem; margin: 0 .8rem .3rem 0; width: auto; }
fieldset { margin-bottom: .6rem; }
.actions { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.actions [role=button], .actions button { margin: 0; }
/* Pico 默认让下拉框和按钮占满宽度，在横向排列里会把文字挤成竖排 */
select.mini, input.mini { width: auto !important; }
.row > select, .row > button, .row > .tag, .row > a[role=button] { flex: 0 0 auto; width: auto; }
.row > span[style] { min-width: 8em; }
.inline-form select, .inline-form input:not([type=checkbox]):not([type=radio]) { width: auto; }