/* Parsskin Coffee v2.1 (2026-10-24): compact, responsive 36-card deck.
   CSS-only patch; compatible with the existing PHP 5.6 engine.
   Auto-fills columns according to real available content width, not only viewport width. */
/* Parsskin coffee component styles. Scoped to avoid impacting Hafez/site CSS. */
.coffee-app, .coffee-article { direction: rtl; font-family: inherit; }
.coffee-app { --cf-ink:#3e2a20; --cf-muted:#796659; --cf-accent:#825335; --cf-line:#e9ddcf; --cf-paper:#fffaf3; color:var(--cf-ink); margin:24px 0 32px; }
.coffee-app * { box-sizing:border-box; }
.coffee-app__hero { text-align:center; padding:24px 18px; border:1px solid var(--cf-line); border-radius:22px; background:linear-gradient(145deg,#fffdf9,#f5e9da); }
.coffee-app__eyebrow { display:block; color:var(--cf-accent); font-size:.85rem; margin-bottom:10px; }
.coffee-app__title { font-size:clamp(1.5rem,4vw,2.1rem); margin:0 0 12px; color:var(--cf-ink); }
.coffee-app__intro { max-width:640px; margin:0 auto 16px; line-height:2; font-size:.95rem; }
.coffee-app__meta { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; }
.coffee-app__meta span { background:rgba(255,255,255,.8); padding:5px 12px; border:1px solid var(--cf-line); border-radius:30px; font-size:.78rem; }
.coffee-app__notice { padding:14px; text-align:center; margin:20px 0; border-radius:12px; background:#f8f2e9; color:var(--cf-ink); font-weight:600; }
.coffee-app__grid { --cf-card-min:60px; --cf-card-gap:8px; display:grid; grid-template-columns:repeat(auto-fill,minmax(var(--cf-card-min),1fr)); gap:var(--cf-card-gap); width:100%; max-width:880px; margin:18px auto 26px; }
.coffee-card { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; min-width:0; width:100%; aspect-ratio:2/3; min-height:80px; padding:4px; border:2px solid #9b7153; border-radius:9px; background:radial-gradient(circle at 50% 42%,#80583d 0%,#4a3129 70%,#291b18 100%); box-shadow:0 3px 10px rgba(55,29,20,.14),inset 0 0 0 3px #d6b48a; color:#fff3d8; font:inherit; cursor:pointer; transition:transform .16s ease,box-shadow .16s ease; }
.coffee-card:hover:not(:disabled), .coffee-card:focus-visible { transform:translateY(-5px); box-shadow:0 8px 19px rgba(55,29,20,.25),inset 0 0 0 3px #d6b48a; outline:3px solid #b78955; outline-offset:2px; }
.coffee-card__ornament { font-size:clamp(1.05rem,2.3vw,1.6rem); line-height:1.2; }
.coffee-card__label { font-size:clamp(.57rem,1.2vw,.7rem); font-weight:700; text-align:center; }
.coffee-card__number { position:absolute; bottom:5px; font-size:.62rem; opacity:.75; direction:ltr; }
.coffee-card--picked { opacity:.35; cursor:not-allowed; filter:grayscale(.6); }
.coffee-app__results { margin-top:26px; }
.coffee-app__results > h2 { margin:0 0 18px; color:var(--cf-ink); font-size:1.45rem; }
.coffee-result { background:#fff; border:1px solid var(--cf-line); box-shadow:0 3px 15px rgba(77,52,33,.06); padding:clamp(15px,3vw,26px); border-radius:20px; margin-bottom:20px; }
.coffee-result__header { display:flex; gap:20px; align-items:center; margin-bottom:18px; }
.coffee-result__image { display:block; flex:0 0 150px; width:150px; height:150px; object-fit:contain; background:var(--cf-paper); border:1px solid var(--cf-line); border-radius:16px; }
.coffee-result__intro { min-width:0; flex:1; }
.coffee-result__intro h3 { font-size:1.55rem; margin:4px 0 9px; color:var(--cf-ink); }
.coffee-result__intro p { margin:0; line-height:1.9; }
.coffee-result__position { color:var(--cf-accent); font-size:.8rem; font-weight:700; }
.coffee-result__section { padding:15px 0; border-top:1px solid var(--cf-line); }
.coffee-result__section h4 { margin:0 0 10px; font-size:1.06rem; color:var(--cf-accent); }
.coffee-result__section p { margin:0; font-size:.95rem; line-height:2.1; }
.coffee-result__details { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:22px; }
.coffee-score { margin:14px 0; }
.coffee-score__label { display:flex; justify-content:space-between; font-size:.87rem; margin-bottom:6px; }
.coffee-score__track { background:#efe5d8; border-radius:20px; width:100%; height:9px; overflow:hidden; }
.coffee-score__track span { display:block; background:linear-gradient(90deg,#b17a52,#6a4933); border-radius:20px; height:100%; }
.coffee-result__scores small { color:var(--cf-muted); line-height:1.9; }
.coffee-result__yesno { font-size:1.4rem!important; font-weight:700; }
.coffee-app__actions { display:flex; justify-content:center; margin:23px auto 6px; }
.coffee-app__restart { background:var(--cf-accent); border:0; color:white; border-radius:100px; cursor:pointer; padding:12px 25px; font:inherit; font-weight:700; }
.coffee-app__restart:hover, .coffee-app__restart:focus-visible { background:#60391f; }
.coffee-article { line-height:2.15; margin:30px 0; }
.coffee-article h2 { font-size:1.3rem; margin:25px 0 8px; }
.coffee-article h3 { font-size:1.07rem; margin:16px 0 5px; }
.coffee-article p { margin:0 0 13px; }
@media (max-width:700px) { .coffee-app__grid { --cf-card-min:50px; --cf-card-gap:6px; } .coffee-card { min-height:72px; padding:3px; } .coffee-card__label { display:none; } .coffee-result__details { grid-template-columns:1fr; } .coffee-result__image { flex-basis:112px; height:112px; width:112px; } .coffee-result__header { gap:12px; } }
@media (max-width:360px) { .coffee-app__grid { --cf-card-min:48px; } .coffee-result__header { flex-direction:column; align-items:flex-start; } }
@media (prefers-reduced-motion: reduce) { .coffee-card { transition:none; } .coffee-card:hover:not(:disabled) { transform:none; } }

/* v3: distinguish selection from completion; add intent and expandable results. */
.coffee-app__form { margin-top:16px; }
.coffee-app__intent { max-width:520px; margin:15px auto 8px; padding:15px 18px; border:1px solid var(--cf-line); border-radius:15px; background:var(--cf-paper); text-align:right; }
.coffee-app__intent label { display:block; font-size:1rem; font-weight:700; margin:0 0 8px; }
.coffee-app__intent select { display:block; width:100%; border:1px solid #cbb59f; background:#fff; color:var(--cf-ink); border-radius:10px; font:inherit; font-size:.94rem; padding:11px 12px; min-height:46px; }
.coffee-app__intent select:focus { outline:2px solid var(--cf-accent); outline-offset:2px; }
.coffee-app__intent small { display:block; color:var(--cf-muted); margin-top:7px; line-height:1.8; font-size:.82rem; }
.coffee-app--complete { margin-top:8px; }
.coffee-app--complete .coffee-app__results { margin-top:5px; scroll-margin-top:24px; }
.coffee-app__complete-head { display:flex; gap:14px; align-items:center; margin:0 0 14px; padding:15px 20px; border:1px solid #d8c7af; border-radius:17px; background:#fcf5e9; }
.coffee-app__complete-check { display:flex; align-items:center; justify-content:center; flex:0 0 42px; width:42px; height:42px; border-radius:50%; color:#fff4de; background:#73503b; font-size:1.5rem; }
.coffee-app__complete-kicker { display:block; margin-bottom:2px; color:#79543a; font-size:.82rem; font-weight:700; }
.coffee-app__complete-head h2 { margin:0 0 7px; color:var(--cf-ink); font-size:1.36rem; }
.coffee-app__intent-tag { display:inline-block; color:#6a452d; background:#fff; border:1px solid #e7d9c7; border-radius:50px; padding:3px 10px; font-size:.78rem; }
.coffee-result__primary { padding:18px 19px; background:linear-gradient(145deg,#fffaf1,#f7ede0); border-radius:13px; border:1px solid #e8d9c5; margin-bottom:17px; }
.coffee-result__primary h4, .coffee-result__summary h4 { margin:0 0 10px; color:#794b2d; font-size:1.08rem; }
.coffee-result__primary p, .coffee-result__summary p, .coffee-result__advice p { margin:0; font-size:.97rem; line-height:2.1; }
.coffee-result__summary { margin:18px 0; }
.coffee-result__advice { margin:20px 0; border-right:3px solid #99764f; padding:10px 16px; background:#f8f5ef; border-radius:6px 12px 12px 6px; }
.coffee-result__advice strong { display:block; margin-bottom:5px; color:#624127; }
.coffee-result__expand { margin:20px 0 13px; }
.coffee-result__expand > h4 { margin:0 0 12px; font-size:1.06rem; }
.coffee-result__accordions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; align-items:start; }
.coffee-result__accordion { margin:0; background:#fffdf9; border:1px solid var(--cf-line); border-radius:12px; overflow:hidden; }
.coffee-result__accordion summary { position:relative; display:block; padding:14px 15px 14px 35px; cursor:pointer; font-size:.92rem; font-weight:700; color:var(--cf-ink); list-style:none; }
.coffee-result__accordion summary::-webkit-details-marker { display:none; }
.coffee-result__accordion summary:after { content:'+'; position:absolute; left:13px; top:50%; transform:translateY(-50%); font-weight:700; font-size:1.2rem; color:var(--cf-accent); }
.coffee-result__accordion[open] summary:after { content:'−'; }
.coffee-result__accordion summary:focus-visible { outline:2px solid #94633f; outline-offset:-3px; }
.coffee-result__accordion p { border-top:1px solid var(--cf-line); margin:0; padding:12px 15px 16px; font-size:.93rem; line-height:2.15; }
.coffee-result__score-details { margin-top:15px; }
.coffee-result__scores { border-top:1px solid var(--cf-line); padding:12px 18px 16px; }
.coffee-result__scores small { display:block; margin-top:11px; color:var(--cf-muted); line-height:1.8; }
.coffee-card--flipping { z-index:1; animation:cf-flip 450ms cubic-bezier(.2,.7,.2,1) both; }
@keyframes cf-flip { 0% { transform:rotateY(0deg) scale(1); filter:brightness(1); } 55% { transform:rotateY(90deg) scale(1.06); filter:brightness(1.25); } 100% { transform:rotateY(180deg) scale(1.06); filter:brightness(1.25); } }
@media (max-width:700px) { .coffee-result__accordions { grid-template-columns:1fr; } .coffee-app__intent { padding:12px 14px; } .coffee-app__complete-head { padding:12px; } .coffee-result__primary { padding:14px; } }
@media (prefers-reduced-motion: reduce) { .coffee-card--flipping { animation:none; } }

/* v14: small-screen reading polish across all coffee modes. */
@media (max-width:650px){
 .coffee-app{margin-top:12px;margin-bottom:22px}
 .coffee-app__hero{padding:15px 12px;border-radius:16px}
 .coffee-app__notice{margin:10px 0 12px;padding:10px;line-height:1.75}
 .coffee-app__grid{margin:12px auto 20px}
 .coffee-app__complete-head{gap:10px}
 .coffee-app__restart{min-height:46px}
 .coffee-result{padding:14px;border-radius:16px}
 .coffee-result__intro h3{font-size:1.25rem;line-height:1.5}
 .coffee-article{margin:22px 0;line-height:2}
 .coffee-result__accordion summary{min-height:46px}
 .coffee-app__share-button{min-height:44px}
}
.coffee-app__restart:focus-visible,.coffee-app__share-button:focus-visible,.coffee-result__accordion summary:focus-visible{outline:3px solid #ba7c44;outline-offset:3px}
/* Theme fonts occasionally force grid contents wider than phone viewports. */
.coffee-app,.coffee-article,.coffee-app__results{min-width:0;max-width:100%;overflow-wrap:break-word}
.coffee-v14-insights{margin:22px 0;padding:17px;border:1px solid #d9c5ad;background:#fff9f0;border-radius:16px;line-height:2;color:#513b2d}
.coffee-v14-insights h3{font-size:1.13rem;color:#66442d;margin:0 0 10px}
.coffee-v14-insights p{margin:9px 0}
.coffee-v14-insights ul{padding-right:21px;margin:9px 0}
.coffee-v14-insights li{margin:5px 0}
.coffee-v14-insights small{display:block;color:#766252;line-height:1.9}
@media(max-width:450px){.coffee-v14-insights{padding:12px}}