:root{
  /* Newspaper-like theme (align with other sections) */
  --paper: #F7F5F0;
  --paper-light: #FDFCF9;
  --paper-dark: #EBE8E0;
  --ink: #1C1C1C;
  --muted: #6B6B6B;
  --rule: #2C2C2C;
  --rule-light: #D4D0C8;
  --accent-red: #C41E3A;

  /* UI tokens */
  --line: rgba(44,44,44,.18);
  --text: var(--ink);
  --shadow: 0 10px 28px rgba(0,0,0,.10);

  --p0:#ef4444;
  --p1:#f59e0b;
  --ok:#10b981;

  /* card type colors */
  --t-general-bg:#ffffff;
  --t-general-br:#e5e7eb;

  --t-ops-bg:#fff1f2;      /* rose */
  --t-ops-br:#fecdd3;

  --t-meeting-bg:#eff6ff;  /* blue */
  --t-meeting-br:#bfdbfe;

  --t-product-bg:#f0fdf4;  /* green */
  --t-product-br:#bbf7d0;

  --t-risk-bg:#fffbeb;     /* amber */
  --t-risk-br:#fde68a;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background: var(--paper);
  color:var(--text);
  font: 14px/1.6 ui-sans-serif, -apple-system, system-ui, Segoe UI, Roboto, "Noto Sans SC", Arial, sans-serif;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
}

/* Masthead + nav (align with homepage) */
.masthead{background:var(--paper-light); border-bottom:3px double var(--rule); padding:12px 0 8px;}
.masthead-inner{max-width:1600px; margin:0 auto; padding:0 24px;}
.masthead-top{display:flex; justify-content:space-between; align-items:flex-end; padding-bottom:8px; border-bottom:1px solid var(--rule-light);}
.masthead-left,.masthead-right{font-size:.7rem; color:var(--muted); letter-spacing:.05em;}
.masthead-link{color:inherit;text-decoration:none;border-bottom:1px solid transparent;}
.masthead-link:hover{border-bottom-color:var(--rule-light);}
.masthead-center{text-align:center; flex:1;}
.masthead-title{font-family: ui-serif, "Noto Serif SC", "Source Serif 4", Georgia, serif; font-size:2.8rem; font-weight:900; letter-spacing:.08em; color:var(--ink); text-transform:uppercase; line-height:1; margin:0;}
.masthead-subtitle{font-size:.75rem; color:var(--muted); letter-spacing:.3em; text-transform:uppercase; margin-top:4px;}

/* nav-bar removed to keep header consistent */

.page-header{max-width:1600px; margin:0 auto; padding:32px 24px 24px; border-bottom:1px solid var(--rule-light);}
.page-title-row{display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; gap:16px; flex-wrap:wrap;}
.page-title{display:flex; align-items:center; gap:16px;}
.page-icon{width:48px;height:48px; background:var(--ink); display:flex; align-items:center; justify-content:center; font-size:1.5rem;}
.page-title h1{font-family: ui-serif, "Noto Serif SC", "Source Serif 4", Georgia, serif; font-size:1.8rem; font-weight:700; margin:0;}
.page-title-en{font-size:.75rem; color:var(--muted); letter-spacing:.15em; text-transform:uppercase; margin-top:2px;}
.archive-stats{display:flex; gap:24px; font-size:.8rem; color:var(--muted);}
.stat-item{display:flex; align-items:center; gap:6px;}
.stat-number{font-family: ui-serif, "Noto Serif SC", "Source Serif 4", Georgia, serif; font-size:1.2rem; font-weight:700; color:var(--ink);}

.members{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.member{display:flex;gap:8px;align-items:center;padding:6px 10px;border:1px solid rgba(0,0,0,.14);border-radius:999px;background:rgba(255,255,255,.60);box-shadow:0 8px 18px rgba(0,0,0,.06); user-select:none}
.member:hover{filter:brightness(1.02)}
.member.on{border-color:rgba(196,30,58,.45); box-shadow:0 10px 22px rgba(196,30,58,.10)}

@media (max-width: 700px){
  /* Members: single-row horizontal scroll to avoid awkward wrapping */
  .members{flex-wrap:nowrap;overflow-x:auto;padding-bottom:6px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .members::-webkit-scrollbar{display:none}
  .member{flex:0 0 auto}
}
.member .av{width:22px;height:22px;border-radius:999px;object-fit:cover;display:block}
.member .av-fallback{width:22px;height:22px;border-radius:999px;display:grid;place-items:center;background:rgba(0,0,0,.10);color:rgba(0,0,0,.7);font-weight:900;font-size:11px}
.member .name{font-weight:900;font-size:12px;color:var(--ink)}
.member .role{font-size:11px;color:var(--muted)}

.filter-bar{display:flex; align-items:center; gap:12px; flex-wrap:wrap;}

@media (max-width: 700px){
  .masthead-inner,.page-header,.wrap{padding-left:16px;padding-right:16px}
  .archive-stats{gap:14px}
  .input{min-width:0;width:100%}
  .select{min-width:0;width:100%}
  .filter-bar{gap:10px}
  .badge#updatedAt{width:100%;justify-content:center}
}

.wrap{max-width:1600px;margin:0 auto;padding:18px 24px 0}

.badges{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.badge{
  display:inline-flex; gap:8px; align-items:center;
  padding:7px 10px; border:1px solid rgba(0,0,0,.18);
  border-radius:999px; background: rgba(255,255,255,.62);
  color:var(--muted); font-size:12px;
  box-shadow: 0 8px 18px rgba(0,0,0,.08);
}
.dot{width:8px;height:8px;border-radius:50%}
.dot.p0{background:var(--p0)}
.dot.p1{background:var(--p1)}
.dot.ok{background:var(--ok)}

.controls{
  display:flex; flex-wrap:wrap; gap:10px;
  padding:10px 0 14px;
}
.input, .select{
  border:1px solid var(--line);
  background: rgba(255,255,255,.9);
  color:var(--text);
  border-radius:12px;
  padding:10px 12px;
  outline:none;
  box-shadow: 0 8px 18px rgba(15, 23, 42, .05);
}
.input{min-width:260px}
.select{min-width:170px}

.grid{display:grid;grid-template-columns:1fr;gap:14px;padding:16px 0 24px;}

.section{
  border:1px solid var(--line);
  background: rgba(255,255,255,.78);
  border-radius:18px;
  overflow:hidden;
  box-shadow: var(--shadow);
}

/* Ops consensus dashboard: blue-tinted background */
.section.ops-consensus{
  background: rgba(59,130,246,.08);
  border-color: rgba(59,130,246,.20);
}
.section.ops-consensus .section-h{
  background: rgba(59,130,246,.10);
}
.section.ops-consensus .col.biz{
  background: rgba(255,255,255,.82);
}
.section-h{
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 14px;
  border-bottom:1px solid var(--line);
  background: rgba(255,255,255,.85);
}
.section-h .name{font-weight:800}
.section-h .hint{color:var(--muted);font-size:12px}

.kanban{
  display:grid;
  /* Backlog column takes ~1/2 width; DOING + RELEASED share the rest */
  grid-template-columns:
    minmax(260px, 3fr)
    repeat(2, minmax(320px, 2fr));
  gap:12px;
  padding:12px;
  overflow-x:auto;
  overscroll-behavior-x:contain;
}
@media (max-width: 980px){
  /* Mobile: horizontally scrollable columns with nicer sizing */
  .kanban{grid-template-columns: repeat(3, minmax(82vw, 1fr));}
}

/* 商业 Dashboard：三列直排卡片 + 颜色区隔 */
.bizboard{
  display:grid;
  grid-template-columns: repeat(3, minmax(320px, 1fr));
  gap:12px;
  padding:12px;
  overflow-x:auto;
  overscroll-behavior-x:contain;
}
@media (max-width: 980px){
  .bizboard{grid-template-columns: repeat(3, minmax(82vw, 1fr));}
}

/* column accent */
.col.biz{background:rgba(255,255,255,.86);}
.col.biz .col-h{background:rgba(255,255,255,.92);}
.col.biz.biz-customer{background:rgba(239,246,255,.88); border-color:rgba(191,219,254,.95);}     /* blue */
.col.biz.biz-delivery{background:rgba(240,253,244,.88); border-color:rgba(187,247,208,.95);}      /* green */
.col.biz.biz-marketing{background:rgba(255,251,235,.90); border-color:rgba(253,230,138,.95);}     /* amber */

.col{
  border:1px solid var(--line);
  background: rgba(251,252,255,.85);
  border-radius:16px;
  overflow:hidden;
  min-height:120px;
}
.col-h{
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 12px;
  border-bottom:1px solid var(--line);
  background: rgba(255,255,255,.85);
}
.col-h .title{font-weight:900; letter-spacing:.3px}
.col-h .count{color:var(--muted)}

.cards{padding:10px; display:flex; flex-direction:column; gap:8px}

.card{
  border:1px solid var(--t-general-br);
  background: var(--t-general-bg);
  border-radius:12px;
  padding:10px;
  box-shadow: 0 8px 18px rgba(15, 23, 42, .08);
}

/* All cards: collapse by default to save space */
details.card.collapsed{padding:0;}
details.card.collapsed > summary{
  list-style:none;
  cursor:pointer;
  user-select:none;
  padding:10px;
  font-weight:900;
  margin:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
details.card.collapsed > summary::-webkit-details-marker{display:none;}
details.card.collapsed > summary:before{content:'▸ '; color:rgba(0,0,0,.55);}
details.card.collapsed[open] > summary:before{content:'▾ ';}
details.card.collapsed .t{margin:0;}
.collapsed-body{padding:0 10px 10px;}

/* Backlog cards: compact (about ~1/3 of normal height) */
.card.backlog{
  padding:8px;
}
.card.backlog .t{margin:0 0 4px; font-size:13px; line-height:1.25}
.card.backlog .desc{
  margin:0 0 6px;
  font-size:12px;
  color:var(--text);
  opacity:.88;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.card.backlog .meta.mini{margin:0 0 6px}
.card.backlog .progress.mini{margin-top:0; padding-top:6px}
.card.backlog details.history{display:none}
.card.type-ops{background:var(--t-ops-bg); border-color:var(--t-ops-br)}
.card.type-meeting{background:var(--t-meeting-bg); border-color:var(--t-meeting-br)}
.card.type-product{background:var(--t-product-bg); border-color:var(--t-product-br)}
.card.type-risk{background:var(--t-risk-bg); border-color:var(--t-risk-br)}

/* Biz dashboard cards: match kanban card look */
.card.biz{background:rgba(255,255,255,.92); border-color:rgba(0,0,0,.14)}

.card .t{font-weight:900;margin:0 0 6px}

.meta{display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin-bottom:8px}
.pill{
  font-size:12px;
  padding:3px 7px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.14);
  background: rgba(255,255,255,.65);
  color:var(--muted);
}
.pill.p0{border-color:rgba(239,68,68,.45); color:#991b1b; background: rgba(239,68,68,.10)}
.pill.p1{border-color:rgba(245,158,11,.45); color:#92400e; background: rgba(245,158,11,.12)}
.pill.done{border-color:rgba(16,185,129,.40); color:#065f46; background: rgba(16,185,129,.10)}

.desc{color:var(--text); opacity:.92; margin:0 0 8px}
.small{color:var(--muted); font-size:12px}

/* Modal + inline CRUD controls */
.card-top{display:flex;align-items:center;justify-content:space-between;gap:10px;flex:1;min-width:0}
.card-title{font-weight:900;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card-actions{display:flex;gap:6px;align-items:center;flex-wrap:wrap;flex-shrink:0}
.av-mini{width:22px;height:22px;border-radius:999px;object-fit:cover;border:1px solid rgba(0,0,0,.18);background:rgba(255,255,255,.85)}
.av-mini.fb{display:inline-flex;align-items:center;justify-content:center;font-weight:900;font-size:12px;color:var(--muted)}
.icon-btn{
  appearance:none;border:1px solid rgba(0,0,0,.18);
  background:rgba(255,255,255,.75);
  border-radius:10px;padding:6px 10px;
  cursor:pointer;font-weight:900;font-size:12px;line-height:1;
}

/* Modal action buttons a bit larger */
.modal-actions .icon-btn{font-size:14px; padding:10px 12px; border-radius:12px}
.icon-btn:hover{filter:brightness(1.02)}

/* small header add button */
.col-h .actions{display:flex;gap:6px;align-items:center}

.modal{position:fixed;inset:0;z-index:9999}
.modal-backdrop{position:absolute;inset:0;background:rgba(15,23,42,.42);backdrop-filter: blur(4px)}
.modal-card{position:relative;max-width:1280px;margin:6vh auto 0;background:rgba(255,255,255,.92);border:1px solid var(--line);border-radius:18px;box-shadow:0 24px 90px rgba(0,0,0,.25);overflow:hidden;width:min(1280px,96vw)}
.modal-h{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:12px 14px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.95)}
.modal-title{font-weight:900;font-size:20px}
.modal-sub{color:var(--muted);font-size:14px;margin-top:2px}
.modal-b{padding:14px}

/* Make edit modal readable (Eric request): larger typography + touch-friendly controls */
.modal-card{font-size:16px}

.modal-card input,
.modal-card select,
.modal-card textarea{
  font-size:16px;
  line-height:1.6;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.18);
  background:rgba(255,255,255,.92);
}

.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-grid .full{grid-column:1/-1}
/* Description field: make it visibly taller + more readable (override inline min-height) */
#m_summary{min-height:360px !important; resize:vertical; width:100%; box-sizing:border-box; font-size:16px; line-height:1.65}
.form-grid label{display:block;color:var(--muted);font-weight:900;font-size:13px;letter-spacing:.08em;text-transform:uppercase;margin:0 0 8px}
.people-pills{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.people-pills .pillbtn{border:1px solid rgba(0,0,0,.18);background:rgba(255,255,255,.86);border-radius:999px;padding:7px 10px;font-weight:900;cursor:pointer;font-size:12px}
.people-pills .pillbtn.on{border-color:rgba(196,30,58,.35);background:rgba(196,30,58,.10);color:var(--ink)}
/* Modal bottom buttons: keep Delete/Cancel/Save together and prominent */
.modal-actions{
  display:flex;
  justify-content:flex-end;
  gap:12px;
  align-items:center;
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid rgba(15,23,42,.12);
}
/* flatten left/right wrappers so all buttons sit in one row */
.modal-actions .left,
.modal-actions .right{display:contents;}

.btn{
  appearance:none;
  border:1px solid rgba(0,0,0,.18);
  background:rgba(255,255,255,.92);
  color:var(--ink);
  border-radius:12px;
  padding:10px 14px;
  font-weight:900;
  font-size:15px;
  line-height:1;
  cursor:pointer;
  box-shadow: 0 10px 22px rgba(15,23,42,.10);
}
.btn:hover{filter:brightness(1.02)}
.btn.primary{background:rgba(37,99,235,.95); border-color:rgba(37,99,235,.55); color:#fff}
.btn.danger{background:rgba(220,38,38,.95); border-color:rgba(220,38,38,.55); color:#fff}

/* Markdown-ish structured summary (safe render) */
.desc-md{margin:0 0 8px}
.desc-md .md-p{margin:0 0 6px}
.desc-md .md-ul,.desc-md .md-ol{margin:0 0 8px; padding-left:18px}
.desc-md .md-ul li,.desc-md .md-ol li{margin:4px 0}

.progress{margin-top:8px; padding-top:8px; border-top:1px dashed rgba(15,23,42,.12)}
.history{margin-top:6px}
.history > summary{cursor:pointer; color:var(--muted); font-size:12px; list-style:none}
.history > summary::-webkit-details-marker{display:none}
.history > summary:before{content:'▸ ';}
.history[open] > summary:before{content:'▾ ';}
.updates{margin:8px 0 0; padding-left:16px; color:var(--muted); font-size:12px}
.updates li{margin:6px 0}

.footer{padding:18px 0 18px;color:var(--muted);font-size:12px}
.footer code{color:#0f172a; background: rgba(15,23,42,.06); padding:2px 6px; border-radius:8px}

.site-footer{background:var(--ink); color:var(--paper); padding:24px; text-align:center; margin-top:12px; border-top:1px solid rgba(0,0,0,.12)}
.site-footer .logo{font-family: ui-serif, "Noto Serif SC", "Source Serif 4", Georgia, serif; font-size:1.2rem; font-weight:900; letter-spacing:.1em; margin-bottom:8px;}
.site-footer .copy{font-size:.72rem; opacity:.6; line-height:1.6;}