/* =========================================================
   plate.css — 餐盘搭配参考
   配合 base.css + tool.css 使用。强调色叶菜绿 + 青，不撞家庭账本。
   ========================================================= */

body.plate{--a1:#43d68a;--a2:#2ec4c4}
.plate [hidden]{display:none!important}
body.plate .grad{background:linear-gradient(96deg,var(--a1),#7be3a6 45%,var(--a2));-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- 配一餐布局 ---------- */
.plate__wrap{display:grid;gap:clamp(18px,4vw,28px)}
.plate__top{display:grid;gap:16px}
#plateSvg{display:flex;justify-content:center;padding:6px 0}
#plateSvg svg{width:min(100%,300px);height:auto;overflow:visible}
#plateSvg text{font-family:var(--font-sans);paint-order:stroke;stroke:rgba(255,255,255,.35);stroke-width:2px}

.plate-gaps{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.plate-gap{
  display:inline-flex;align-items:baseline;gap:6px;padding:.4em .8em;border-radius:999px;
  font-size:.82rem;color:var(--ink-2);background:color-mix(in oklab,var(--a1) 12%,transparent);
  border:1px solid color-mix(in oklab,var(--a1) 30%,transparent)
}
.plate-gap b{font-weight:640;color:var(--ink)}
.plate-gap.is-miss{color:var(--pink);background:color-mix(in oklab,var(--pink) 12%,transparent);border-color:color-mix(in oklab,var(--pink) 32%,transparent)}
.plate-gap.is-miss b{color:var(--pink)}

.plate-advice{
  margin:0;padding:14px 16px;border-radius:var(--radius-sm);font-size:.94rem;line-height:1.8;color:var(--ink-2);
  background:color-mix(in oklab,var(--a2) 9%,transparent);border-left:3px solid var(--a2)
}

/* ---------- 份量 ---------- */
.plate__peoplerow{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:6px}
#peopleHint{margin:8px 0 0;font-size:.8rem;line-height:1.7;color:var(--muted);max-width:60ch}

/* ---------- 分类 chips ---------- */
.plate-cat{margin-top:16px}
.plate-cat__h{
  display:flex;align-items:center;gap:8px;margin:0 0 8px;
  font-size:.8rem;font-weight:640;letter-spacing:.04em;color:var(--ink-2)
}
.plate-cat__h em{font-style:normal;font-family:var(--font-mono);font-size:.72rem;color:var(--muted)}
.plate-dot{width:10px;height:10px;flex:none;border-radius:50%;display:inline-block}
.plate-chips{display:flex;flex-wrap:wrap;gap:7px}
.plate-chip{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:.46em 1em;border-radius:999px;font-size:.84rem;color:var(--ink-2);cursor:pointer;
  background:rgba(255,255,255,.045);border:1px solid var(--line);
  transition:color .25s var(--ease),background .25s var(--ease),border-color .25s var(--ease),transform .2s var(--ease)
}
.plate-chip:hover{color:var(--ink);border-color:var(--line-2);transform:translateY(-1px)}
.plate-chip.is-on{color:#06140c;font-weight:620;border-color:transparent;background:linear-gradient(100deg,var(--a1),var(--a2))}

/* ---------- 已选清单 ---------- */
.plate__subhead{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:26px 0 8px}
.plate__subhead h2{font-size:1.02rem;font-weight:640;color:var(--ink-2);margin:0}
#selCount{font-family:var(--font-mono);font-size:.78rem;color:var(--muted)}
.plate-sel-list{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.plate-sel{
  display:grid;grid-template-columns:auto 1fr auto auto;gap:4px 12px;align-items:center;
  padding:11px 14px;border-radius:var(--radius-sm);background:rgba(255,255,255,.04);border:1px solid var(--line)
}
.plate-sel__dot{width:11px;height:11px;border-radius:50%;flex:none}
.plate-sel__t{display:flex;flex-direction:column;gap:1px;min-width:0}
.plate-sel__t b{font-size:.95rem;font-weight:620}
.plate-sel__t i{font-style:normal;font-size:.72rem;color:var(--muted)}
.plate-sel__p{font-size:.82rem;color:var(--ink-2);white-space:nowrap}
.plate-sel__n{grid-column:2/-1;font-size:.76rem;line-height:1.6;color:var(--muted)}
.plate-sel__x{
  width:28px;height:28px;border-radius:9px;border:1px solid var(--line);background:rgba(255,255,255,.05);
  color:var(--muted);cursor:pointer;font-size:.9rem;line-height:1;padding:0;transition:color .25s,border-color .25s
}
.plate-sel__x:hover{color:var(--pink);border-color:rgba(255,92,168,.4)}

/* ---------- 操作条 ---------- */
.plate__actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.plate__copy{margin-top:12px}
.plate__copy label{display:block;font-size:.76rem;color:var(--muted);margin-bottom:6px}
#copyBox{width:100%;min-height:150px;font-family:var(--font-mono);font-size:.82rem;line-height:1.7}

/* ---------- 我的常配 ---------- */
.plate__combox{margin-top:clamp(30px,5vw,44px)}
.plate-combos{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.plate-combo{
  padding:15px 16px;border-radius:var(--radius-sm);background:rgba(255,255,255,.04);border:1px solid var(--line)
}
.plate-combo__name{margin:0 0 3px;font-size:.98rem;font-weight:640}
.plate-combo__items{margin:0 0 12px;font-size:.84rem;line-height:1.7;color:var(--muted)}
.plate-combo__acts{display:flex;flex-wrap:wrap;gap:8px}
.plate-combo__del{color:var(--pink);border-color:rgba(255,92,168,.32)}
.plate-combo__del:hover{background:rgba(255,92,168,.1)}
.addrow{display:flex;gap:10px;align-items:flex-end;margin-bottom:14px;flex-wrap:wrap}
.addrow .input{flex:1;min-width:150px}

/* ---------- 怎么搭更合理 ---------- */
.plate-guides{display:grid;gap:12px}
.plate-guide{
  padding:18px 20px;border-radius:var(--radius-sm);background:rgba(255,255,255,.04);border:1px solid var(--line)
}
.plate-guide h3{margin:0 0 10px;font-size:1.02rem;font-weight:660;color:var(--a1);letter-spacing:.01em}
.plate-guide ul{margin:0;padding-left:1.15em;display:grid;gap:7px}
.plate-guide li{font-size:.9rem;line-height:1.8;color:var(--ink-2)}

/* ---------- 一周看一眼 ---------- */
.plate__range{margin:0 0 14px;font-size:.92rem;color:var(--ink-2);font-weight:600}
.plate-weekblocks{display:grid;grid-template-columns:repeat(7,1fr);gap:7px;margin:6px 0 4px}
.plate-wk{
  padding:10px 6px;border-radius:10px;text-align:center;background:rgba(255,255,255,.035);
  border:1px solid var(--line);transition:border-color .25s,background .25s
}
.plate-wk.is-today{border-color:color-mix(in oklab,var(--a1) 60%,transparent);background:color-mix(in oklab,var(--a1) 12%,transparent)}
.plate-wk.is-empty{opacity:.6}
.plate-wk__d{margin:0;font-size:.72rem;color:var(--muted)}
.plate-wk__n{margin:2px 0 6px;font-size:.72rem;color:var(--ink-2)}
.plate-wk__dots{display:flex;flex-wrap:wrap;gap:3px;justify-content:center;min-height:14px}
.plate-wk__dot{width:9px;height:9px;border-radius:3px;display:inline-block}
.plate-wk__none{font-size:.8rem;color:var(--muted)}

.plate-wtips{margin:16px 0 4px;display:grid;gap:6px}
.plate-wtip{margin:0;font-size:.86rem;line-height:1.7;color:var(--ink-2)}
.plate-wtip--lead{color:var(--muted)}

.plate-days{display:grid;gap:8px;margin:10px 0 0;padding:0;list-style:none}
.plate-day{
  display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;
  padding:12px 14px;border-radius:var(--radius-sm);background:rgba(255,255,255,.04);border:1px solid var(--line)
}
.plate-day__d{font-size:.86rem;font-weight:620;color:var(--ink);white-space:nowrap}
.plate-day__chips{display:flex;flex-wrap:wrap;gap:6px}
.plate-day__chip{
  display:inline-flex;align-items:center;gap:5px;padding:.22em .6em;border-radius:999px;font-size:.76rem;color:var(--ink-2);
  background:rgba(255,255,255,.04);border:1px solid var(--line)
}
.plate-day__chip i{width:8px;height:8px;border-radius:50%;display:inline-block}

/* ---------- 桌面 / 窄屏 ---------- */
@media (min-width:761px){
  .plate__top{grid-template-columns:300px 1fr;align-items:start;gap:24px}
  .plate__top .plate__side{display:flex;flex-direction:column;gap:12px}
  .plate-guides{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:400px){
  .plate-weekblocks{grid-template-columns:repeat(4,1fr)}
  .plate-sel{grid-template-columns:auto 1fr auto;gap:4px 10px}
  .plate-sel__n{grid-column:1/-1}
}