/* =========================================================
   kitchen.css — 厨房换算
   配合 base.css + tool.css 使用。强调色走「嫩绿 + 玉米黄」，
   与其它工具的 amber/orange、cyan/mint、violet/pink 区分开。
   ========================================================= */

body.kitchen{--a1:#a4d95f;--a2:#ffcf5c}
body.kitchen .grad{background:linear-gradient(96deg,var(--a1),var(--a2) 62%,#fff0b8);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- 通用小块 ---------- */
.kz-inline{display:block;margin:0 0 20px;font-size:.84rem;line-height:1.9;color:var(--muted);max-width:42em}
.kz-inline b{font-family:var(--font-mono);font-weight:600;color:var(--a2);letter-spacing:.01em;margin:0 2px}
.kz-inline code{font-family:var(--font-mono);font-size:.9em;color:var(--ink-2);background:rgba(255,255,255,.06);padding:.12em .45em;border-radius:6px}
.kz-fhead{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 16px;margin:0 0 14px}
.kz-fhead .btn,.kz-fhead .chip{font-size:.8rem}
.kz-empty{margin:6px 0 0;padding:16px 18px;border-radius:var(--radius-sm);border:1px dashed var(--line-2);color:var(--muted);font-size:.88rem;line-height:1.7}
.kz-empty .mono{color:var(--ink-2)}

/* ---------- 换算表单 ---------- */
.kz-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}
.kz-grid .field--wide{grid-column:1/-1}
.kz-facts{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.kz-block{margin-top:14px}
.kz-custom{margin-top:12px;max-width:280px}
.kz-search{max-width:220px;flex:0 1 220px}
#kzModeSeg{margin-top:26px}

/* ---------- 结果列表 ---------- */
.kz-out{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px;margin:14px 0 0}
.kz-sec{grid-column:1/-1;margin-top:8px;padding:0 0 4px;border-bottom:1px solid var(--line);font-size:.78rem;letter-spacing:.16em;color:var(--muted)}
.kz-sec:first-child{margin-top:0}
.kz-row{
  display:grid;grid-template-columns:auto 1fr auto;gap:2px 10px;align-items:baseline;
  padding:11px 13px;border-radius:var(--radius-sm);background:rgba(255,255,255,.045);border:1px solid var(--line);
}
.kz-row.is-here{border-color:color-mix(in oklab,var(--a1) 60%,transparent);background:color-mix(in oklab,var(--a1) 12%,transparent)}
.kz-row__u{font-size:.84rem;color:var(--ink-2);white-space:nowrap}
.kz-row__v{justify-self:end;font-size:1.04rem;font-weight:680;color:#fff;letter-spacing:-.01em}
.kz-row.is-here .kz-row__v{color:var(--a1)}
.kz-row__x{grid-column:2/-1;font-style:normal;font-size:.72rem;color:var(--muted);text-align:right;min-height:1em}

/* ---------- 单位常量 / 配方动作 ---------- */
.kz-const{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:8px;margin:12px 0 0}
.kz-const li{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border-radius:var(--radius-sm);background:rgba(255,255,255,.035);border:1px solid var(--line)}
.kz-const b{font-family:var(--font-mono);font-size:.84rem;font-weight:600;color:var(--ink)}
.kz-const i{font-style:normal;font-size:.74rem;line-height:1.6;color:var(--muted)}
.kz-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}

/* ---------- 摄氏华氏互算 ---------- */
.kz-convrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;align-items:start;margin-bottom:14px}
.kz-convrow .field{min-width:0}
.kz-convrow .hint b{font-family:var(--font-mono);font-weight:660;color:var(--a1)}
.kz-eq{margin:0 0 18px;font-family:var(--font-mono);font-size:.8rem;color:var(--muted)}

/* ---------- 档位表 ---------- */
.kz-tblwrap{overflow-x:auto;margin:0 0 6px;border-radius:var(--radius-sm);border:1px solid var(--line);background:rgba(255,255,255,.03)}
table.kz-tbl{width:100%;min-width:560px;border-collapse:collapse;font-size:.86rem}
.kz-tbl th,.kz-tbl td{padding:11px 13px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.kz-tbl thead th{font-size:.72rem;letter-spacing:.14em;color:var(--muted);font-weight:600;background:rgba(255,255,255,.04)}
.kz-tbl tbody th{font-weight:660;color:#fff;white-space:nowrap}
.kz-tbl td.num{font-family:var(--font-mono);color:var(--a1);white-space:nowrap}
.kz-tbl__note{font-size:.76rem;color:var(--muted);line-height:1.6}
.kz-tbl tbody tr:last-child th,.kz-tbl tbody tr:last-child td{border-bottom:0}
/* 带说明副行的档位表：分隔线画在副行下面，主行和它的说明才像一组 */
.kz-tbl__tiprow td{padding-top:0;padding-bottom:13px;font-size:.76rem;line-height:1.6;color:var(--muted)}
.kz-tbl--paired th,.kz-tbl--paired td{border-bottom-color:transparent}
.kz-tbl--paired .kz-tbl__tiprow td{border-bottom:1px solid var(--line)}
.kz-tbl--paired tbody tr:last-child td{border-bottom:0}

/* ---------- 折叠的密度表 ---------- */
body.kitchen .seg{flex-wrap:wrap}
details.kz-dens{margin-top:22px;padding:0;overflow:hidden}
.kz-dens__head{
  cursor:pointer;padding:18px 22px;font-size:.95rem;font-weight:620;color:var(--ink);
  list-style:none;display:flex;align-items:center;gap:10px;
}
.kz-dens__head::-webkit-details-marker{display:none}
.kz-dens__head::before{content:"";width:8px;height:8px;border-right:2px solid var(--a1);border-bottom:2px solid var(--a1);transform:rotate(-45deg);transition:transform .3s var(--ease)}
details.kz-dens[open] .kz-dens__head::before{transform:rotate(45deg)}
.kz-dens__head:hover{color:#fff}
.kz-dens>.kz-inline,.kz-dens>.kz-tblwrap{margin-inline:22px}
.kz-dens>.kz-tblwrap{margin-bottom:22px}

/* ---------- 配方缩放 ---------- */
.kz-scalehead{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:26px 0 10px}
.kz-scalehead h2{font-size:1rem;font-weight:640;color:var(--ink-2)}
.kz-factor{font-family:var(--font-mono);font-size:1.5rem;font-weight:700;color:var(--a1);letter-spacing:-.02em}
.kz-scaled{display:grid;gap:6px;margin:0 0 6px}
.kz-item{
  display:grid;grid-template-columns:auto auto 1fr;gap:2px 10px;align-items:baseline;
  padding:12px 14px;border-radius:var(--radius-sm);background:rgba(255,255,255,.045);border:1px solid var(--line);
}
.kz-item__q{font-size:1.08rem;font-weight:700;color:#fff;white-space:nowrap}
.kz-item__u{font-size:.84rem;color:var(--ink-2);white-space:nowrap}
.kz-item__n{font-size:.95rem;font-weight:600}
.kz-item__note{grid-column:1/-1;font-style:normal;font-size:.72rem;color:var(--muted);line-height:1.6}
.kz-item.is-text{opacity:.72}
.kz-item.is-text .kz-item__q{font-size:.76rem;font-weight:500;color:var(--muted);font-family:var(--font-mono)}
.kz-errlist{display:grid;gap:6px;margin:10px 0 0}
.kz-err{
  display:grid;grid-template-columns:auto 1fr;gap:2px 10px;align-items:baseline;
  padding:11px 13px;border-radius:var(--radius-sm);background:rgba(255,120,90,.08);border:1px solid rgba(255,120,90,.3)
}
.kz-err b{font-family:var(--font-mono);font-size:.72rem;color:#ff9d7a;letter-spacing:.04em;white-space:nowrap}
.kz-err span{grid-column:1/-1;font-size:.74rem;color:var(--muted);line-height:1.6}

/* ---------- 家常量感 ---------- */
.kz-feels{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px;margin-top:16px}
.kz-feel{
  display:flex;flex-direction:column;gap:3px;padding:16px;border-radius:var(--radius-sm);
  background:linear-gradient(165deg,rgba(255,255,255,.07),rgba(255,255,255,.02) 60%,rgba(255,255,255,.045));
  border:1px solid var(--glass-brd);
}
.kz-feel__name{margin:0;font-size:.92rem;font-weight:640;color:var(--ink);line-height:1.4}
.kz-feel__name em{font-style:normal;margin-left:7px;font-size:.72rem;letter-spacing:.08em;color:var(--muted);white-space:nowrap;
  padding:.16em .5em;border-radius:6px;background:rgba(255,255,255,.06);border:1px solid var(--line);vertical-align:middle}
.kz-feel__val{margin:4px 0 0;font-size:1.16rem;font-weight:700;color:var(--a1);letter-spacing:-.015em}
.kz-feel__note{margin:0;font-size:.76rem;line-height:1.65;color:var(--muted)}

/* ---------- 窄屏 ---------- */
@media (max-width:560px){
  .kz-convrow{grid-template-columns:1fr}
  .kz-out{grid-template-columns:1fr}
  .kz-feels{grid-template-columns:1fr}
  /* 四个视图名都不短，让它两行排开，别把每个字都挤断 */
  body.kitchen .tabs{display:flex;flex-wrap:wrap;justify-content:center}
  body.kitchen .tab{flex:0 1 auto;padding:.55em .95em;font-size:.85rem;white-space:nowrap}
}
