/* =========================================================
   每日 · 早饭安排（docs/产品文档/05-日常与回顾.md 第 13 章）
   入口卡在每日页正文末尾；改饭、候选、清单在「每日早饭」整页里。
   ========================================================= */

/* ---- 入口卡：明天是主角，今天收成脚上一行 ---- */
/* 每日页正文底部留白按 390 的标签栏算的，320 上标签栏换行变高，最后一行会被压住几像素 */
.bf-card{margin-bottom:12px}
.bf-card .daily-section-head{margin-bottom:8px}
/* 暖色底与全站绿色系卡片区分层：它是「今晚要定的事」，不是同质的知识卡 */
.bf-hero-card{
  position:relative;overflow:hidden;
  background:linear-gradient(150deg,var(--warm) 0%,#efe7d8 62%,#e9e2d2 100%);
  border:1px solid #e0d7c4;border-radius:14px;
  color:#3a352a;
}
.bf-art{
  position:absolute;right:14px;top:12px;width:56px;height:56px;
  opacity:.45;pointer-events:none;
}
.bf-hero{position:relative;display:block;padding:14px 16px 0;cursor:pointer}
/* 日期要一眼看清：标签小一档，日期本身加粗提亮 */
.bf-kicker{display:flex;align-items:baseline;gap:7px;line-height:1.3}
.bf-kicker-tag{font-size:11px;letter-spacing:.06em;color:#8c7f63}
.bf-kicker-date{font-size:13px;font-weight:700;letter-spacing:.01em;color:#5f5740}
.bf-dish{
  font-family:var(--f-display);font-size:22px;font-weight:600;line-height:1.25;
  letter-spacing:-.01em;color:#3a352a;margin-top:6px;
  /* 让开右上角的碗；同类多样时只在顿号处折行，别把「鸡蛋羹」拆成两行 */
  max-width:calc(100% - 68px);word-break:keep-all;overflow-wrap:break-word;
}
.bf-dish.void{color:#a89a78}
/* 补充行：入口卡只负责进整页，不放整套重抽按钮，避免误触改掉一整天 */
.bf-again{font-size:12.5px;line-height:1.6;color:#6f6650;margin:10px 0 0}

/* 今天在卡底一条浅色带里：可点、但不与明天抢主角 */
.bf-also{
  display:flex;align-items:center;gap:8px;
  margin-top:13px;padding:11px 16px;
  background:rgba(140,127,99,.09);border-top:1px solid rgba(140,127,99,.18);
  cursor:pointer;font-size:12.5px;line-height:1.4;color:#6f6650;
}
.bf-also svg{flex:0 0 auto;width:13px;height:13px;color:#a89a78}
.bf-also-day{flex:0 0 auto;font-weight:600;color:#8c7f63}
.bf-also-names{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bf-also-names.void{color:#a89a78}
.bf-hero:focus-visible,.bf-also:focus-visible,.bf-state:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.bf-slot:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (hover:hover){
  .bf-hero:hover .bf-dish{color:#2f2a20}
  .bf-also:hover{background:rgba(140,127,99,.14)}
}

/* ---- 卡片异常态：加载、没拉到、清单空了。同样占住这张卡，不让整块消失 ---- */
.bf-state{
  display:flex;flex-direction:column;gap:2px;align-items:flex-start;
  padding:16px;color:#6f6650;font-size:12.5px;line-height:1.6;
}
.bf-state b{display:block;font-size:13.5px;color:#3a352a;font-weight:600;margin-bottom:1px}
.bf-state svg{width:16px;height:16px;color:#a89a78;margin-bottom:6px}
.bf-state[role="button"]{cursor:pointer;width:100%}

/* ---- 「每日早饭」整页：页头、日期切换、槽位卡 ---- */
.bf-head-row{display:flex;align-items:center;gap:10px;min-width:0}
.bf-head-row h2{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bf-seg{
  display:flex;background:var(--paper-2);border-radius:12px;padding:3px;gap:2px;margin:0 0 12px;
}
.bf-seg button{
  flex:1;font:inherit;font-size:13px;padding:8px 4px;border:0;border-radius:9px;
  background:transparent;color:var(--ink-3);cursor:pointer;white-space:nowrap;
}
.bf-seg button.on{background:var(--raise);color:var(--accent);font-weight:600;box-shadow:0 1px 4px rgba(0,0,0,.08)}

.bf-slots{background:var(--raise);border:1px solid var(--line);border-radius:14px;padding:0 14px}
.bf-slot{
  display:flex;align-items:center;gap:10px;min-height:56px;
  border-bottom:1px solid var(--line);cursor:pointer;
}
.bf-slot:last-child{border-bottom:0}
.bf-slot-lbl{flex:0 0 auto;width:56px;font-size:12.5px;color:var(--ink-3);letter-spacing:.04em}
/* 同类可以多样：名字用顿号连排，放不下就折行，行高跟着长 */
.bf-slot-val{
  flex:1 1 auto;min-width:0;font-size:15.5px;color:var(--ink);
  line-height:1.35;padding:9px 0;overflow-wrap:break-word;
}
.bf-slot-val.empty{color:var(--ink-4);font-size:14px;padding:0}
.bf-lock{
  flex:0 0 auto;font-size:10.5px;color:var(--accent);
  border:1px solid rgba(92,122,92,.35);background:var(--accent-bg);
  border-radius:999px;padding:2px 7px;
}
.bf-dice{
  flex:0 0 auto;width:30px;height:30px;border:1px solid var(--line);border-radius:9px;
  background:var(--raise);color:var(--ink-3);cursor:pointer;display:grid;place-items:center;
}
.bf-dice svg{width:14px;height:14px}

.bf-foot{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap}
.bf-btn{
  flex:1 1 auto;min-width:72px;font:inherit;font-size:13px;padding:11px 8px;
  border-radius:12px;border:1px solid var(--line);background:var(--raise);color:var(--ink-2);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:5px;white-space:nowrap;
}
.bf-btn svg{width:13px;height:13px}
.bf-btn.solid{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.bf-btn.warn{color:#a05a50}
.bf-btn:disabled{opacity:.55;cursor:not-allowed}
/* 重抽这一天：确认条替掉底栏，不把三个按钮挤在一行 */
.bf-confirm{
  margin-top:16px;padding:12px 14px;
  background:var(--raise);border:1px solid var(--line);border-radius:12px;
}
.bf-confirm p{margin:0 0 10px;font-size:12.5px;line-height:1.6;color:var(--ink-2)}
.bf-confirm-ops{display:flex;gap:8px}
.bf-confirm-ops .bf-btn{flex:1 1 0;padding:9px 8px}
.bf-sub{font-size:11.5px;color:var(--ink-4);margin-top:10px;line-height:1.7}
/* 视图顶部那句说明：紧贴分段条/候选区，不留浮层时代的上下空档 */
.bf-sub.top{margin:0 0 12px;font-size:12.5px;color:var(--ink-3)}
.bf-error{font-size:12px;color:#a05a50;margin-top:10px;line-height:1.6}

/* ---- 候选视图 ---- */
.bf-opts{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 4px}
.bf-opt{
  font:inherit;font-size:13px;padding:9px 13px;border-radius:999px;
  border:1px solid var(--line);background:var(--raise);color:var(--ink-2);cursor:pointer;
}
.bf-opt.on{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.bf-opt i{font-style:normal;opacity:.65;font-size:11px;margin-left:5px}
.bf-pick-actions{display:flex;gap:8px;margin-top:16px}
.bf-pick-actions .bf-btn{flex:1 1 0;padding:10px 8px}
/* 「好了」只是回改饭视图，不是保存：每次点选已经即时写入了 */
.bf-done{width:100%;margin-top:10px;padding:12px 8px}

/* ---- 清单视图 ---- */
.bf-addrow{display:flex;gap:8px;margin-top:14px}
.bf-addrow input{
  flex:1 1 auto;min-width:0;font:inherit;font-size:13.5px;padding:10px 12px;
  border:1px solid var(--line);border-radius:10px;background:var(--raise);color:var(--ink);
}
.bf-addrow .bf-btn{flex:0 0 auto;padding:0 16px}
.bf-list{background:var(--raise);border:1px solid var(--line);border-radius:14px;padding:0 14px}
.bf-li{display:flex;align-items:center;gap:8px;min-height:46px;border-bottom:1px solid var(--line)}
.bf-li:last-child{border-bottom:0}
.bf-li-n{flex:1 1 auto;min-width:0;font-size:14px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bf-li.off .bf-li-n{color:var(--ink-4);text-decoration:line-through}
.bf-li-add{cursor:pointer}
.bf-li-add .bf-li-n{font-size:13px;color:var(--accent)}
.bf-li-tag{flex:0 0 auto;font-size:10.5px;color:var(--ink-4);border:1px solid var(--line);border-radius:999px;padding:2px 6px}
.bf-li-ops{flex:0 0 auto;display:flex;gap:6px;align-items:center}
.bf-li-btn{
  font:inherit;font-size:12px;color:var(--accent);background:var(--paper-2);
  border:1px solid var(--line);border-radius:8px;padding:6px 9px;cursor:pointer;white-space:nowrap;
}
.bf-li-btn.solid{background:var(--accent);border-color:var(--accent);color:#fff}
.bf-li-btn.warn{color:#a05a50}
.bf-li-btn:disabled{opacity:.55;cursor:not-allowed}
.bf-rename{
  flex:1 1 auto;min-width:60px;font:inherit;font-size:13.5px;padding:7px 10px;
  border:1px solid var(--accent);border-radius:9px;background:var(--raise);color:var(--ink);
}

/* 窄屏（320 宽）：主菜字号收到不折三行，标签栏换行时底部留白已经由 .bf-card 让开 */
@media (max-width:360px){
  .bf-hero{padding:13px 14px 0}
  .bf-dish{font-size:20px;max-width:calc(100% - 60px)}
  .bf-art{right:12px;top:10px;width:52px;height:52px}
  .bf-also{padding:10px 14px}
  .bf-slot-lbl{width:48px}
  .bf-slots,.bf-list{padding:0 12px}
  .bf-foot .bf-btn{min-width:64px;font-size:12.5px}
}