/* Cafe skin (docs/cafe/makufood-cafe.html). Only applies on /cafe.html, where the server sets <html class="cafe" data-theme="light">. */
/* Always light; same red; a coffee brown as the second colour and a dark brown side menu. */
:root.cafe{--bg:#F5F4F2;--surf:#fff;--ink:#1C1714;--mute:#6F6863;--line:#E9E5E1;--side:#211A16;--side-t:#C9BFB8;--coffee:#6B4226;--coffee-s:#F3EBE4;color-scheme:light}
.cafe .coffee{background:var(--coffee-s);color:var(--coffee)}
.cafe .btn.c{background:var(--coffee);border-color:var(--coffee);color:#fff}
.cafe nav a.on{color:var(--ink)}
/* board: three columns on desktop, three tabs on a phone */
.cafe .stats{display:flex;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.cafe .stats div{background:var(--surf);border:1px solid var(--line);border-radius:14px;padding:8px 14px;font-size:13px;color:var(--mute)}
.cafe .stats b{color:var(--ink);font-size:18px;margin-inline-end:4px}
.cafe .board{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:start}
.cafe .bcol{background:#EFEBE7;border-radius:18px;padding:10px;min-height:300px}
.cafe .bcol h3{font-size:15px;font-weight:800;display:flex;align-items:center;gap:8px;padding:4px 6px 10px}
.cafe .bcol h3 .c{background:var(--surf);border-radius:99px;min-width:24px;text-align:center;font-size:13px}
.cafe .oc{background:var(--surf);border-radius:14px;padding:12px;margin-bottom:10px;border:2px solid transparent;box-shadow:0 2px 6px #0000000d}
.cafe .oc.hot{border-color:var(--brand);animation:cafe-pulse 1.6s ease-out 2}
@keyframes cafe-pulse{0%{box-shadow:0 0 0 0 #ff000055}100%{box-shadow:0 0 0 12px #ff000000}}
.cafe .oc .top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cafe .code{font-size:26px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.cafe .oc .who{font-size:13px;color:var(--mute);margin-inline-start:auto;text-align:end;line-height:1.5}
.cafe .oc .who b{color:var(--ink)}
.cafe .oc ul{list-style:none;padding:0;margin:10px 0 0}
.cafe .oc li{padding:6px 0;border-top:1px dashed var(--line);font-size:14px}
.cafe .oc li b{font-weight:800}
.cafe .oc li small{display:block;color:var(--mute);font-size:12.5px}
.cafe .oc .memo{background:var(--warn-s);color:var(--warn);border-radius:8px;padding:4px 10px;font-size:13px;margin-top:8px}
.cafe .oc .act{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap;align-items:center}
.cafe .pt{display:flex;gap:6px}
.cafe .pt button{border:1.5px solid var(--line);background:var(--surf);border-radius:10px;padding:2px 10px;font-weight:700;font-size:13px;min-height:32px}
.cafe .pt button[aria-pressed=true]{border-color:var(--coffee);background:var(--coffee-s);color:var(--coffee)}
.cafe .since{font-size:12px;color:var(--mute);margin-inline-start:auto}
.cafe .late{color:var(--brand);font-weight:700}
.cafe .btabs{display:none;gap:6px;margin-bottom:10px}
.cafe .btabs button{flex:1;border-radius:12px;padding:8px 4px;font-weight:700;background:var(--surf);border:1px solid var(--line);font-size:14px}
.cafe .btabs button[aria-selected=true]{background:var(--ink);color:#fff;border-color:var(--ink)}
@media(max-width:860px){
.cafe .board{grid-template-columns:1fr}
.cafe .btabs{display:flex}
.cafe .bcol{display:none;min-height:0}.cafe .bcol.show{display:block}
.cafe .act .btn{min-height:40px}
.cafe .stats{flex-wrap:nowrap;overflow-x:auto}.cafe .stats div{white-space:nowrap;flex:none}
}
/* menu and item editor */
.cafe .mcat{margin-bottom:16px;padding:16px 18px}
.cafe .mcat .hd{display:flex;align-items:center;gap:10px;margin-bottom:6px;flex-wrap:wrap}
.cafe .mcat .hd h3{font-size:17px;font-weight:800;margin:0}
.cafe .it{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--line);flex-wrap:wrap}
.cafe .it:first-of-type,.cafe .hd+.it{border-top:0}
.cafe .it .g1{flex:1;min-width:140px}
.cafe .it .g1 small{display:block;color:var(--mute);font-size:12.5px}
.cafe .it.out .th,.cafe .it.out .g1{opacity:.45}
.cafe .tags{display:flex;gap:4px;flex-wrap:wrap;margin-top:2px}.cafe .tags .chip{font-size:12px;padding:0 10px}
.cafe .box{border:1px solid var(--line);border-radius:14px;padding:12px}
.cafe .box h4{font-size:15px;font-weight:800;display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:4px}
.cafe .box h4 small{font-weight:400;color:var(--mute);font-size:12px}
.cafe .srow{display:flex;gap:8px;margin-top:8px;align-items:center}
.cafe .srow .ib{flex:none;width:36px;height:36px;color:var(--mute)}
.cafe .og{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--line)}
.cafe .og:first-of-type{border-top:0}
.cafe .og small{display:block;color:var(--mute);font-size:12.5px;font-weight:400}
.cafe .seg{display:flex;background:var(--bg);border-radius:12px;padding:3px;gap:3px;margin-top:6px;flex-wrap:wrap}
.cafe .seg button{flex:1;border:0;background:none;border-radius:10px;padding:7px;font-weight:700;color:var(--mute);font-size:14px;min-width:max-content}
.cafe .seg button[aria-pressed=true]{background:var(--surf);color:var(--ink);box-shadow:0 1px 4px #0001}
.cafe .orow{flex-direction:row;align-items:center;justify-content:space-between;gap:12px;font-weight:500;padding:6px 0}
.cafe .orow input{max-width:160px}
.cafe .og .g1{flex:1;min-width:0}
/* settings */
.cafe .chips{display:flex;flex-wrap:wrap;gap:8px}
.cafe .chips button{border:1px solid var(--line);background:var(--bg);border-radius:99px;padding:6px 14px;font-size:14px}
.cafe .chips button[aria-pressed=true]{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:700}
.cafe .chips[aria-invalid=true] button{border-color:var(--bad)}