/* list tab, shop cards, swipe, add/search */
.quickadd{align-items:center;gap:6px;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:5px 5px 5px 8px;box-shadow:var(--shadow-1);transition:border-color .2s,box-shadow .2s}
.quickadd:focus-within{border-color:var(--red);box-shadow:var(--shadow-1),0 0 0 3px color-mix(in srgb,var(--red) 14%,transparent)}
.quickadd .field{background:transparent;border:0;border-radius:0;padding:8px 6px;font-family:var(--serif);font-size:17px}
.quickadd .field:focus-visible{outline:none;box-shadow:none}
.smsg{margin:6px 0 4px;font-size:14px;color:var(--sub)}
.caution{font-size:11px;color:var(--sub);margin:10px 0 0;display:grid;gap:4px}
.caution a{color:var(--red);font-size:13px}
.caution a.credit{color:var(--sub);font-size:11px}
.quickadd .btn{height:40px;border-radius:999px;padding:0 18px;font-size:15px;flex:none}
/* cards */
.list{display:grid;gap:9px}
.card{background:var(--card);border-radius:var(--r-lg);padding:16px 18px;position:relative;border:1px solid var(--line);box-shadow:var(--shadow-1)}
.card-hit{position:absolute;inset:0;border-radius:var(--r-lg);background:none;border:0;z-index:1}
.card > *:not(.card-hit){position:relative;z-index:2;pointer-events:none}
.card .live{pointer-events:auto}
.row{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.name{font-family:var(--serif);font-weight:700;font-size:19px;line-height:1.35;margin:0;word-break:break-word}
.area{font-size:12px;color:var(--sub);margin-top:2px}
.plan{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--red);margin-top:8px;font-weight:500}
.plan::before{content:"";width:7px;height:9px;border-radius:45%;background:var(--red);box-shadow:0 0 0 2px color-mix(in srgb,var(--red) 20%,transparent)}
.faces{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--sub)}
.stack{display:flex}
.stack img{width:22px;height:22px;border-radius:50%;border:2px solid var(--card);margin-left:-6px;background:var(--faint)}
.stack img:first-child{margin-left:0}
.want-btn{border:1px solid var(--line);background:var(--card);border-radius:999px;padding:5px 12px;font-size:12px;color:var(--sub)}
.want-btn[aria-pressed="true"]{border-color:var(--red);color:var(--red);background:color-mix(in srgb,var(--red) 7%,var(--card))}
/* "went" looks like a hanko stamp waiting to be pressed */
.went-btn{flex:none;width:54px;height:54px;border-radius:50%;border:1.5px solid var(--red);background:transparent;color:var(--red);
  box-shadow:inset 0 0 0 3px var(--card),inset 0 0 0 4px color-mix(in srgb,var(--red) 45%,transparent);
  font-size:13px;font-weight:700;line-height:1;letter-spacing:.02em;white-space:nowrap;display:grid;place-items:center;transform:rotate(-8deg)}
.went-btn:hover{background:color-mix(in srgb,var(--red) 8%,transparent)}
@keyframes pop{0%{transform:rotate(-8deg) scale(1)}35%{transform:rotate(-14deg) scale(.82);background:var(--red);color:var(--on-red)}100%{transform:rotate(-8deg) scale(1);background:var(--red);color:var(--on-red)}}
.marks{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:10px;font-size:12px;color:var(--sub)}
.marks span b{font-size:15px;color:var(--ink);font-weight:500;margin-left:3px}
.marks span b.top{color:var(--red)}
.badges{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.badges:empty{display:none}
.badge{font-size:11px;color:var(--gold);border:1px solid color-mix(in srgb,var(--gold) 45%,transparent);background:color-mix(in srgb,var(--gold) 8%,transparent);border-radius:999px;padding:1px 9px}
.date{font-size:12px;color:var(--sub);white-space:nowrap}
.tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px}
.tags span{font-size:11px;color:var(--sub);border:1px solid var(--line);border-radius:999px;padding:0 8px}
.shop2{padding:14px 14px 12px;overflow:hidden;background:linear-gradient(100deg,color-mix(in srgb,var(--c) 8%,var(--card)) 0%,var(--card) 42%)}
.shop2::before{content:"";position:absolute;left:0;top:16px;bottom:16px;width:3px;border-radius:0 3px 3px 0;background:var(--c);opacity:.75}
.sc-top{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center}
.crest{width:48px;height:48px;border-radius:50%;background:var(--c);color:#FFF8EF;display:grid;place-items:center;font-family:var(--brush);font-size:24px;line-height:1;box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 18%,transparent),inset 0 0 0 2px rgba(255,255,255,.22)}
.sc-main .name{font-size:18px}
.sc-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px;align-items:center}
.pill{font-size:11.5px;line-height:1.7;border-radius:999px;padding:1px 10px;border:1px solid var(--line);background:var(--card);color:var(--sub);display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.pill.h-open{color:var(--green);border-color:color-mix(in srgb,var(--green) 40%,transparent);background:color-mix(in srgb,var(--green) 10%,transparent);font-weight:700}
.pill.h-open::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:0 0 0 3px color-mix(in srgb,currentColor 25%,transparent)}
.pill.h-soon{color:var(--gold);border-color:color-mix(in srgb,var(--gold) 45%,transparent);font-weight:700}
.pill.h-off,.pill.h-done{opacity:.8}
.pill.plan{color:var(--on-red);background:var(--red);border-color:var(--red);font-weight:700}
.pill.yen{color:var(--ink);font-family:var(--serif);font-weight:700}
.pill.sense{color:var(--c);border-color:color-mix(in srgb,var(--c) 40%,transparent)}
.shop2 .date{align-self:start;font-size:12px}

/* swipe: the card slides over two action labels */
.swipe{position:relative;border-radius:var(--r-lg)}
.swipe > .card{touch-action:pan-y}
.swipe.drag > .card{transition:none;box-shadow:var(--shadow-2)}
/* member initials when there is no photo */
.stack .ph{width:22px;height:22px;border-radius:50%;border:2px solid var(--card);margin-left:-6px;background:color-mix(in srgb,var(--red) 16%,var(--card));color:var(--ink);display:inline-grid;place-items:center;font-size:10px;font-weight:700;line-height:1}
.stack .ph:first-child{margin-left:0}
.otable td.who .ph,.person .ph{display:inline-grid;place-items:center;font-weight:700;color:var(--ink)}
.person .ph{font-size:18px}
.otable td.who .ph{font-size:10px}
/* the search bar on 行きたい (opens the search screen) and the hand-add fold under it */
/* card pills: one height and one line, whatever the font (the ¥ pill uses the serif) */
.sc-chips{justify-content:flex-start}
.sc-chips .pill{height:26px;line-height:1;box-sizing:border-box;padding:0 10px;margin:0}   /* .sense also styles a block in 詳細 */
/* stars */
.stars{--sz:16px;display:inline-block;width:calc(var(--sz)*5);height:var(--sz);flex:none;
  background:linear-gradient(90deg,#E8A33C calc(var(--v)/5*100%),color-mix(in srgb,var(--ink) 14%,transparent) 0);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.2l2.9 6.2 6.8.8-5 4.6 1.3 6.7L12 17.2l-6 3.3 1.3-6.7-5-4.6 6.8-.8z'/%3E%3C/svg%3E") 0 0/var(--sz) var(--sz) repeat-x;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.2l2.9 6.2 6.8.8-5 4.6 1.3 6.7L12 17.2l-6 3.3 1.3-6.7-5-4.6 6.8-.8z'/%3E%3C/svg%3E") 0 0/var(--sz) var(--sz) repeat-x}
.stars.big{--sz:40px;touch-action:none;cursor:pointer}
.starline{display:flex;align-items:center;gap:8px;margin-top:12px}
.starline .st-v{font-size:16px;font-variant-numeric:tabular-nums}
.starline small{font-size:12px;color:var(--sub)}
/* 「お店を探して追加」: a clear button that opens the search screen */
.pk-bar{margin-bottom:12px}
/* "…" on cards */
.sc-top{grid-template-columns:auto minmax(0,1fr) auto auto}
/* the floating ＋ on the list */
.fab{position:fixed;right:max(16px,calc(50% - 320px + 16px));bottom:calc(92px + env(safe-area-inset-bottom,0px));z-index:14;width:58px;height:58px;border-radius:50%;border:0;
  background:var(--red);color:var(--on-red);font-size:32px;font-weight:300;line-height:1;box-shadow:0 6px 18px color-mix(in srgb,var(--red) 40%,transparent),var(--shadow-2)}
@media (prefers-reduced-motion:no-preference){ .fab:active{transform:scale(.92)} }
#view:has(.fab){padding-bottom:70px}
body:has(.toast:not([hidden])) .fab{transform:translateY(-68px)}
.fab{transition:transform .25s var(--ease-out)}
/* "…" sits at the card's bottom right */
/* 行きたい: a small 外す at the bottom right */
/* compact cards: one row, buttons stacked on the right */
.shop2{padding:10px 12px}
.shop2::before{top:12px;bottom:12px}
.shop2 .sc-top{grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center}
.shop2 .crest{width:38px;height:38px;font-size:19px;box-shadow:0 0 0 2px color-mix(in srgb,var(--c) 22%,transparent)}
.shop2 .sc-main .name{font-size:16px;line-height:1.3}
.shop2 .sc-chips{margin-top:4px;gap:6px}
.shop2 .sc-chips:empty{display:none}
.shop2 .sc-chips .pill{height:22px;padding:0 8px;font-size:11.5px}
.shop2 .sc-chips .starline{margin:0;gap:4px}
.shop2 .sc-chips .starline .stars{--sz:12px}
.shop2 .sc-chips .starline .st-v{font-size:12.5px}
.sc-side{display:flex;flex-direction:column;align-items:center;gap:4px}
.shop2 .went-btn{width:44px;height:44px;font-size:12px}
.shop2 .badges{margin-top:6px}
.sc-side{flex-direction:row;gap:8px}
.shop2 .sc-side .went-btn{width:44px;height:44px;font-size:11px;letter-spacing:0;padding:0}
.swipe-act{position:absolute;inset:0;border-radius:var(--r-lg);display:flex;align-items:center;justify-content:space-between;padding:0 24px;font-weight:700;font-size:14px;opacity:0;transition:opacity .15s}
.swipe-act span{display:flex;align-items:center;gap:8px;transition:transform .2s var(--ease-spring)}
.swipe.r .swipe-act{opacity:1;background:var(--red);color:var(--on-red)}
.swipe.l .swipe-act{opacity:1;background:var(--ink);color:var(--bg);justify-content:flex-end}
.swipe.r .swipe-act .sa-l,.swipe.l .swipe-act .sa-r{display:none}
.swipe.armed .swipe-act span{transform:scale(1.12)}
.swipe > .card.settle{transition:transform .32s var(--ease-out)}
.shop2 .sc-chips .pill.genre{background:transparent;border-color:color-mix(in srgb,var(--c) 35%,var(--line));color:var(--ink)}

/* 本命 */
.hon-btn{pointer-events:auto;display:inline-grid;place-items:center;width:26px;height:28px;margin-left:6px;vertical-align:-3px;padding:0;border:0;border-radius:8px;background:transparent;transition:transform .2s var(--ease-spring)}
.hon-btn:active{transform:scale(.85)}
.pill.hon{color:var(--red);border-color:color-mix(in srgb,var(--red) 45%,transparent);background:color-mix(in srgb,var(--red) 7%,var(--card));font-weight:700}
.pk-hon{flex:none;height:38px;padding:0 10px;border:1px solid var(--line);border-radius:12px;background:var(--card);color:var(--sub);font:inherit;font-size:13px}
.pk-hon[aria-pressed="true"]{background:var(--red);border-color:var(--red);color:var(--on-red);font-weight:700}
.d-hon[aria-pressed="true"]{background:color-mix(in srgb,var(--red) 10%,var(--card));border-color:color-mix(in srgb,var(--red) 45%,transparent);color:var(--red);font-weight:700}
.pk-bar:has(.pk-hon){gap:5px}
.pk-bar:has(.pk-hon) .pk-sel{padding:0 18px 0 9px}
.pk-bar:has(.pk-hon) .pk-sel::after{right:7px}
.pk-hon{padding:0 8px;font-size:12.5px}
/* the 提灯: unlit outline -> lit red with a warm glow */
.lan{width:15px;height:21px;display:block;overflow:visible;flex:none}
.lan-cap{fill:currentColor}
.lan-body{fill:transparent;stroke:currentColor;stroke-width:1.4}
.lan-rib{fill:none;stroke:currentColor;stroke-width:.8;opacity:.55}
.lan-tas{stroke:currentColor;stroke-width:1.4;stroke-linecap:round}
.hon-btn{color:color-mix(in srgb,var(--sub) 55%,transparent)}
.hon-btn[aria-pressed="true"],.pill.hon,.d-hon[aria-pressed="true"],.pk-hon[aria-pressed="true"]{--lit:1}
.hon-btn[aria-pressed="true"]{color:#1F1B19}
.hon-btn[aria-pressed="true"] .lan-body,.pill.hon .lan-body,.d-hon[aria-pressed="true"] .lan-body{fill:var(--red);stroke:#7A1A14;stroke-width:.8}
.hon-btn[aria-pressed="true"] .lan-rib,.pill.hon .lan-rib,.d-hon[aria-pressed="true"] .lan-rib{stroke:#7A1A14;opacity:.45}
.hon-btn[aria-pressed="true"] .lan{filter:drop-shadow(0 0 4px color-mix(in srgb,#FFB347 85%,transparent)) drop-shadow(0 0 1px #FFD27A)}
@media (prefers-reduced-motion:no-preference){ .hon-btn[aria-pressed="true"] .lan{animation:lanOn .5s var(--ease-out)} @keyframes lanOn{0%{filter:none;transform:scale(.8)}60%{transform:scale(1.15)}} }
.pill.hon{gap:4px}
.pill.hon .lan,.d-hon .lan,.pk-hon .lan{width:11px;height:15px}
.pill.hon .lan-cap,.d-hon[aria-pressed="true"] .lan-cap{fill:#1F1B19}
.d-hon,.pk-hon{display:inline-flex;align-items:center;gap:5px}
.pk-hon[aria-pressed="true"] .lan-body{fill:#FFF3E0;stroke:#FFF3E0}

/* 定番: an empty お猪口 that fills with sake (蛇の目 at the bottom) */
.choko{width:17px;height:16px;display:block;overflow:visible;flex:none}
.ck-body{fill:transparent;stroke:currentColor;stroke-width:1.3;stroke-linejoin:round}
.ck-rim,.ck-foot{fill:none;stroke:currentColor;stroke-width:1.3}
.ck-foot{fill:currentColor;stroke:none}
.ck-sake,.ck-ring,.ck-dot{opacity:0;transition:opacity .25s}
.tsuke-btn{pointer-events:auto;display:inline-grid;place-items:center;width:28px;height:26px;margin-left:4px;vertical-align:-4px;padding:0;border:0;border-radius:8px;background:transparent;color:color-mix(in srgb,var(--sub) 55%,transparent);transition:transform .2s var(--ease-spring)}
.tsuke-btn:active{transform:scale(.85)}
.tsuke-btn[aria-pressed="true"],.pill.tsuke,.d-tsuke[aria-pressed="true"]{color:#1F1B19}
.tsuke-btn[aria-pressed="true"] .ck-body,.pill.tsuke .ck-body,.d-tsuke[aria-pressed="true"] .ck-body{fill:#FFFDF8}
.tsuke-btn[aria-pressed="true"] .ck-sake,.pill.tsuke .ck-sake,.d-tsuke[aria-pressed="true"] .ck-sake{opacity:1;fill:color-mix(in srgb,#9CC8F0 55%,#FFF6E0)}
.tsuke-btn[aria-pressed="true"] .ck-ring,.pill.tsuke .ck-ring,.d-tsuke[aria-pressed="true"] .ck-ring{opacity:1;fill:none;stroke:#2E5FA8;stroke-width:1.2}
.tsuke-btn[aria-pressed="true"] .ck-dot,.pill.tsuke .ck-dot,.d-tsuke[aria-pressed="true"] .ck-dot{opacity:1;fill:#2E5FA8}
@media (prefers-reduced-motion:no-preference){ .tsuke-btn[aria-pressed="true"] .choko{animation:chokoOn .45s var(--ease-out)} @keyframes chokoOn{0%{transform:translateY(2px) scale(.85)}60%{transform:translateY(-1px) scale(1.12)}} }
.pill.tsuke{gap:4px;color:#2E5FA8;border-color:color-mix(in srgb,#2E5FA8 40%,transparent);background:color-mix(in srgb,#2E5FA8 7%,var(--card));font-weight:700}
.pill.tsuke .choko,.d-tsuke .choko,.pk-tsuke .choko{width:13px;height:12px}
.d-tsuke[aria-pressed="true"]{background:color-mix(in srgb,#2E5FA8 8%,var(--card));border-color:color-mix(in srgb,#2E5FA8 40%,transparent);color:#2E5FA8;font-weight:700}
.pk-tsuke[aria-pressed="true"]{background:#2E5FA8;border-color:#2E5FA8;color:#fff}
.pk-tsuke[aria-pressed="true"] .ck-body{fill:#fff;stroke:#fff}
.pk-bar:has(.pk-tsuke) .pk-sel{padding:0 16px 0 8px;font-size:13.5px}
.pk-bar:has(.pk-tsuke) .pk-sel::after{right:6px}
.pk-tsuke{padding:0 7px;gap:3px;font-size:12px}
.pk-bar:has(.pk-hon) .pk-sel:nth-of-type(2){flex:1.45}
.pk-bar:has(.pk-hon) .pk-sel:nth-of-type(3){flex:.8}
.pk-bar:has(.pk-hon) .pk-sel select{font-size:14px}
/* Zen Antique sits a little low: lift the letter to the middle of the crest */
.crest{line-height:1;padding-bottom:.1em;box-sizing:border-box}