/* cj.css - Crossword Jam Answers - Masterpiece Playbook 2026 */
/* Concept: passport / travel stamp. Ink navy, warm paper, jam red, postmark amber. */

/* BASE */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font-body);font-size:17px;font-weight:400;line-height:1.65;color:var(--cj-ink);background:var(--cj-paper);-webkit-font-smoothing:antialiased}
a{color:var(--cj-jam);text-decoration:none}
a:hover{color:var(--cj-jam-dark)}
p{margin-bottom:16px}
p:last-child{margin-bottom:0}
img{vertical-align:middle;max-width:100%}
html,body{overflow-x:hidden}

/* TYPE */
h1{font-family:var(--font-head);font-weight:900;font-size:clamp(34px,5vw,56px);line-height:1.05;letter-spacing:-.02em;color:var(--cj-ink);text-transform:none;border:none;text-shadow:none;padding:0;margin:0 0 14px}
h2{font-family:var(--font-head);font-weight:800;font-size:clamp(24px,3vw,32px);line-height:1.15;letter-spacing:-.01em;color:var(--cj-ink);margin-bottom:14px}
h3{font-family:var(--font-head);font-weight:700;font-size:20px;line-height:1.25;color:var(--cj-ink);margin-bottom:8px}
.lead{font-size:19px;line-height:1.70}
small,.small{font-size:14px;font-weight:500;line-height:1.5}

/* LAYOUT */
.container,.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
.page-wrap{max-width:none;margin:0}

/* HEADER */
.site-header{background:var(--cj-ink);border-bottom:3px solid var(--cj-jam);padding:8px 16px;position:sticky;top:0;z-index:100}
.site-header .wrap,.site-header .container{display:flex;align-items:center;justify-content:space-between;gap:16px}
.logo{font-family:var(--font-head);font-weight:900;font-size:19px;color:var(--cj-paper);letter-spacing:-.01em;display:flex;align-items:center;gap:10px;text-decoration:none}
.logo:hover{text-decoration:none;color:var(--cj-paper)}
.site-nav{display:flex;gap:4px}
.site-nav a{color:rgba(247,244,236,.78);background:transparent;padding:8px 14px;border-radius:var(--r-pill);font-family:var(--font-body);font-size:15px;font-weight:600;transition:color 140ms ease,background 140ms ease}
.site-nav a:hover{color:var(--cj-paper);background:rgba(255,255,255,.08);text-decoration:none}
.site-nav a.active{color:var(--cj-ink);background:var(--cj-stamp);font-weight:700}
.lang-switcher{display:flex;align-items:center;gap:8px;margin-left:8px;padding-left:16px;border-left:1px solid rgba(247,244,236,.18)}
.lang-switcher a{opacity:.6;transition:opacity 140ms ease}
.lang-switcher a:hover{opacity:1}
.lang-switcher a[aria-current="true"]{opacity:1;border-bottom:2px solid var(--cj-stamp);padding-bottom:3px}

/* HERO */
.page-hero{background:var(--cj-ink);padding:64px 24px 56px;text-align:center;position:relative;overflow:hidden;border-bottom:4px solid var(--cj-jam)}
.page-hero h1{font-size:clamp(34px,5vw,56px);color:var(--cj-paper);border:none;padding:0;margin:0 auto .7rem;max-width:780px;text-transform:none;text-shadow:none;letter-spacing:-.02em}
.hero-badge{display:inline-flex;align-items:center;gap:7px;background:rgba(232,163,61,.14);border:1px solid rgba(232,163,61,.40);color:var(--cj-stamp);font-family:var(--font-body);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:6px 14px;border-radius:var(--r-pill);margin-bottom:20px}
.hero-sub{font-family:var(--font-body);font-size:19px;color:rgba(247,244,236,.72);max-width:600px;margin:0 auto 28px}

/* INTRO */
.cj-intro{background:var(--cj-paper);border-bottom:1px solid var(--cj-line);padding:40px 24px}
.cj-intro>div{max-width:880px;margin:0 auto}
.cj-intro p,.cj-intro .cj-intro-p{font-family:var(--font-body);font-size:19px;line-height:1.75;color:var(--cj-ink);margin-bottom:18px}
.cj-intro p:last-child{margin-bottom:0}
.cj-intro a{color:var(--cj-jam);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px;font-weight:600}
.cj-intro a:hover{color:var(--cj-jam-dark);text-decoration-thickness:2.5px}
.cj-intro strong{font-weight:700;color:var(--cj-ink)}

/* PACK CARDS */
.cj-region-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px}
.pack-card{display:block;text-decoration:none;background:var(--cj-card);border:1px solid var(--cj-line);border-radius:var(--r-md);padding:14px 16px;box-shadow:var(--sh-1);transition:transform 140ms ease,box-shadow 140ms ease,border-color 140ms ease}
.pack-card:hover{transform:translateY(-2px);box-shadow:var(--sh-2);border-color:var(--cj-jam)}
.pack-name{font-family:var(--font-body);font-weight:700;font-size:16px;color:var(--cj-ink)}
.pack-range{font-family:var(--font-mono);font-weight:400;font-size:13px;color:var(--cj-slate);margin-top:3px}
.pack-pill{font-family:var(--font-body);font-weight:600;font-size:11px;letter-spacing:.04em;text-transform:uppercase;padding:3px 8px;border-radius:var(--r-sm);margin-top:8px;display:inline-block;background:rgba(30,140,126,.12);color:var(--cj-teal)}
.pack-pill--amber{background:rgba(232,163,61,.16);color:#8A5A00}

/* CONTENT SECTIONS */
.content-box{background:var(--cj-card);border:1px solid var(--cj-line);border-radius:var(--r-lg);box-shadow:var(--sh-1);padding:22px 20px;margin:36px auto;max-width:var(--max)}
.section-title{margin-bottom:18px}

/* BREADCRUMBS */
.breadcrumb-bar{background:var(--cj-paper);border-bottom:1px solid var(--cj-line);padding:.5rem 0}
.breadcrumb,.breadcrumbs{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem;list-style:none;font-size:14px}
.breadcrumb a,.breadcrumbs a{color:var(--cj-jam);font-weight:600}

/* FOOTER */
.site-footer{background:var(--cj-ink);border-top:4px solid var(--cj-jam);padding:40px 24px 24px;color:rgba(247,244,236,.7)}
.site-footer a{color:rgba(247,244,236,.7)}
.site-footer a:hover{color:var(--cj-stamp)}
.footer-inner{max-width:var(--max);margin:0 auto}
.footer-desc{font-size:14px;color:rgba(247,244,236,.55);margin-top:8px}
.footer-links{display:flex;flex-wrap:wrap;gap:8px 16px;margin:16px 0;font-size:15px}
.footer-independence{font-size:13px;color:rgba(247,244,236,.5);margin:12px 0}
.footer-also{font-size:13px;color:rgba(247,244,236,.45);line-height:2}

/* WHEEL FINDER */
.cj-wheel-section{background:var(--cj-ink);border-radius:var(--r-lg);padding:32px;margin:36px auto;max-width:var(--max);box-shadow:var(--sh-3)}
.cj-wheel-section h2{color:var(--cj-paper)}

/* REGION NAV */
.cj-region-nav{position:sticky;top:68px;z-index:90;background:rgba(247,244,236,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--cj-line);padding:12px 24px}
.cj-region-nav .container{display:flex;gap:8px;flex-wrap:wrap}

/* FAQ */
.faq-section{padding:36px 24px;margin:36px 0}
.faq-item{background:var(--cj-card);border:1px solid var(--cj-line);border-radius:var(--r-md);margin-bottom:10px;overflow:hidden}

/* RESPONSIVE */
@media(max-width:685px){
  .site-header{padding:8px 12px}
  .site-nav a{font-size:13px;padding:6px 10px}
  .page-hero{padding:44px 20px 40px}
  .cj-region-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
}
@media(max-width:480px){
  .lang-switcher{gap:4px;padding-left:8px;margin-left:4px}
}

/* UTILITIES */
.skip-link{position:absolute;top:-40px;left:0;background:var(--cj-jam);color:#fff;padding:8px 12px;z-index:10000;font-size:14px;font-weight:700;border-radius:0 0 4px 0}
.skip-link:focus{top:0}
#scroll-progress{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,var(--cj-jam),var(--cj-stamp),var(--cj-jam));z-index:9999;transition:width .1s linear}

/* Region nav - bigger, centered, distinct */
.cj-region-nav{text-align:center;padding:20px 24px}
.cj-region-nav .container{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.cj-region-nav a,.region-pill{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 18px;border-radius:var(--r-pill);
  background:var(--cj-card);border:2px solid var(--cj-line);
  font-family:var(--font-body);font-weight:700;font-size:15px;
  color:var(--cj-ink);text-decoration:none;
  transition:border-color 140ms ease,transform 140ms ease,box-shadow 140ms ease}
.cj-region-nav a:hover,.region-pill:hover{
  border-color:var(--cj-jam);color:var(--cj-jam);
  transform:translateY(-1px);box-shadow:var(--sh-2)}
.cj-region-nav .count,.region-count{
  font-family:var(--font-mono);font-weight:700;font-size:13px;
  background:var(--cj-jam);color:#fff;
  padding:2px 8px;border-radius:var(--r-sm);margin-left:4px}

/* Wheel finder - more visible */
.cj-wheel-section{margin:40px auto;box-shadow:var(--sh-3)}
.cj-wheel-section h2{font-size:26px}
.cj-wheel-section input{font-size:24px;height:60px}
.cj-wheel-section button{height:60px;font-size:18px;padding:0 36px}

/* Flags - bigger and brighter */
.lang-switcher a{opacity:.85}
.lang-switcher img{width:24px;height:18px;border-radius:3px;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.lang-switcher a[aria-current="true"]{opacity:1;border-bottom:2px solid var(--cj-stamp);padding-bottom:4px}

/* How to Play, Tips, About, FAQ sections */
.cj-content-section{background:var(--cj-card);border:1px solid var(--cj-line);border-radius:var(--r-lg);padding:32px;margin:24px auto;max-width:var(--max);box-shadow:var(--sh-1)}
.cj-content-section h2{margin-bottom:16px}
.cj-content-section p{font-size:17px;line-height:1.7;color:var(--cj-ink);margin-bottom:14px}
.cj-content-section a{color:var(--cj-jam);text-decoration:underline;text-underline-offset:3px;font-weight:600}
.cj-content-section strong{font-weight:700;color:var(--cj-ink)}
.cj-steps-list{list-style:none;padding:0;margin:16px 0;display:flex;flex-direction:column;gap:12px}
.cj-steps-list li{padding:14px 18px;background:var(--cj-paper);border-left:3px solid var(--cj-jam);border-radius:0 var(--r-md) var(--r-md) 0;font-size:16px;line-height:1.6}
.cj-tips-list{list-style:none;padding:0;display:flex;flex-direction:column;gap:10px}
.cj-tips-list li{padding:14px 18px;background:var(--cj-paper);border:1px solid var(--cj-line);border-left:4px solid var(--cj-teal);border-radius:0 var(--r-md) var(--r-md) 0;font-size:16px;line-height:1.65}
.cj-tips-list li:hover{border-left-color:var(--cj-jam)}

/* FAQ section */
.faq-section{background:var(--cj-paper);padding:32px 24px;border-radius:var(--r-lg);margin:24px auto;max-width:var(--max)}
.faq-section h2{margin-bottom:18px}
.faq-section h3{font-size:17px;font-weight:700;color:var(--cj-ink);margin:18px 0 8px;padding:14px 18px;background:var(--cj-card);border:1px solid var(--cj-line);border-radius:var(--r-md)}
.faq-section p{font-size:16px;line-height:1.7;color:var(--cj-slate);padding:0 18px 14px;margin:0}

/* How to Play visual */
.cj-how-inner{display:flex;gap:32px;flex-wrap:wrap;align-items:flex-start}
.cj-how-text{flex:1 1 340px}
.cj-how-visual{flex:0 0 240px}
.cj-mock-wheel{background:var(--cj-ink);border-radius:var(--r-lg);padding:20px;text-align:center}
.cj-wheel-ring{position:relative;width:160px;height:160px;margin:0 auto 16px}
.cj-tile{position:absolute;width:32px;height:32px;background:var(--cj-paper);border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-weight:700;font-size:14px;color:var(--cj-ink)}
.cj-tile-active{background:var(--cj-stamp);color:var(--cj-ink)}
.cj-mock-grid{display:inline-flex;flex-direction:column;gap:2px}
.cj-mock-row{display:flex;gap:2px}
.cj-gcell{width:22px;height:22px;border-radius:3px;display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-weight:700;font-size:11px;background:rgba(247,244,236,.12);color:var(--cj-paper)}
.cj-gfilled{background:var(--cj-paper);color:var(--cj-ink)}
.cj-mock-caption{font-size:12px;color:rgba(247,244,236,.6);margin-top:10px}

/* Wheel finder improvements */
.cj-wheel-section .section-title{font-family:var(--font-head);font-size:24px;color:var(--cj-paper)}
.cj-wheel-box{display:flex;gap:10px;flex-wrap:wrap}
.cj-wheel-input{flex:1 1 260px;height:56px;padding:0 20px;background:var(--cj-paper);border:2px solid transparent;border-radius:var(--r-md);font-family:var(--font-mono);font-weight:700;font-size:22px;letter-spacing:.2em;text-transform:uppercase;color:var(--cj-ink)}
.cj-wheel-input:focus{border-color:var(--cj-stamp);outline:none;box-shadow:0 0 0 4px rgba(232,163,61,.22)}
.cj-wheel-btn{height:56px;padding:0 32px;background:var(--cj-jam);color:#fff;border:none;border-radius:var(--r-md);font-family:var(--font-body);font-weight:700;font-size:17px;cursor:pointer;transition:background 140ms ease}
.cj-wheel-btn:hover{background:var(--cj-jam-dark)}
.section-intro{font-size:16px;color:var(--cj-slate);margin-bottom:18px}

/* Sticky mobile bar */
.cj-sticky-bar{position:fixed;bottom:-60px;left:0;right:0;z-index:90;background:var(--cj-ink);padding:12px 20px;text-align:center;transition:bottom 200ms ease;box-shadow:0 -2px 12px rgba(0,0,0,.2)}
.cj-sticky-bar.cj-sticky-visible{bottom:0}
.cj-sticky-link{color:var(--cj-paper);font-family:var(--font-body);font-weight:600;font-size:15px}

/* Word chips from finder */
.cj-word-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.cj-word-chip{padding:8px 14px;background:rgba(247,244,236,.1);border:1px solid rgba(247,244,236,.2);border-radius:var(--r-pill);font-family:var(--font-mono);font-weight:700;font-size:14px;color:var(--cj-paper)}
.cj-word-chip[data-len="6"],.cj-word-chip[data-len="7"],.cj-word-chip[data-len="8"],.cj-word-chip[data-len="9"]{background:rgba(232,163,61,.16);border-color:rgba(232,163,61,.5);color:var(--cj-stamp)}
.cj-found-count{font-family:var(--font-body);font-size:15px;color:var(--cj-stamp);margin:14px 0 8px}
.cj-no-results,.cj-searching{font-family:var(--font-body);font-size:15px;color:rgba(247,244,236,.6);margin:14px 0}

/* Empty appdescription - hide it */
.appdescription:empty,.appdescription:has(> :empty){display:none}

/* Hero wave - hide it */
.hero-wave{display:none}
.hero-pattern{display:none}

@media(max-width:640px){
  .cj-how-inner{flex-direction:column}
  .cj-how-visual{width:100%}
  .cj-content-section{padding:20px 18px}
}

/* Wheel finder helper text - more visible */
.cj-wheel-section p{color:rgba(247,244,236,.85)!important;font-size:16px!important}

/* Region nav - use jam red for counts, bigger gaps */
.cj-ra-count{background:var(--cj-jam)!important;color:#fff!important;font-size:13px;padding:3px 10px;border-radius:var(--r-sm)}
.cj-region-anchor{font-size:15px;font-weight:700}

/* Region heading - jam red count, bigger gap before */
.cj-region-block{margin-top:48px;padding-top:24px;border-top:2px solid var(--cj-line)}
.cj-region-block:first-child{margin-top:0;border-top:none}
.cj-rh-count{color:var(--cj-jam)!important;font-family:var(--font-mono);font-weight:700;font-size:15px}

/* Back to regions link - more space above */
.cj-back-top{display:block;margin-top:24px;padding-top:16px;border-top:1px solid var(--cj-line);text-align:center;font-size:14px;color:var(--cj-slate)}
.cj-back-top:hover{color:var(--cj-jam)}

/* Region heading - centered, bigger */
.cj-region-h3{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:24px 18px!important;margin:0 0 24px!important;font-size:28px!important;background:var(--cj-card)!important;border-left:none!important;border:2px solid var(--cj-line)!important;border-radius:var(--r-lg)!important;box-shadow:var(--sh-2)!important}
.cj-rh-icon{display:flex;align-items:center;justify-content:center;width:48px;height:48px;background:var(--cj-ink);border-radius:50%;padding:12px}
.cj-rh-icon svg{width:24px;height:24px;color:var(--cj-paper)}
.cj-rh-count{font-family:var(--font-mono)!important;font-size:18px!important;color:var(--cj-jam)!important;font-weight:700!important;margin-top:4px}

/* Comment section - modern card style */
#hashover,#hashover-comments{background:var(--cj-card);border:1px solid var(--cj-line);border-radius:var(--r-lg);padding:28px 24px;margin:32px auto;max-width:var(--max);box-shadow:var(--sh-1)}
#hashover .hashover-title,#hashover h3{font-family:var(--font-head)!important;font-weight:800!important;font-size:22px!important;color:var(--cj-ink)!important;margin-bottom:16px!important}
#hashover .hashover-comment{background:var(--cj-paper)!important;border:1px solid var(--cj-line)!important;border-radius:var(--r-md)!important;padding:16px 18px!important;margin-bottom:12px!important}
#hashover .hashover-name-span{font-family:var(--font-body)!important;font-weight:700!important;font-size:15px!important;color:var(--cj-ink)!important}
#hashover .hashover-date-time{font-family:var(--font-mono)!important;font-size:12px!important;color:var(--cj-slate)!important}
#hashover .hashover-comment-body{font-family:var(--font-body)!important;font-size:16px!important;line-height:1.65!important;color:var(--cj-ink)!important;margin-top:8px!important}
#hashover textarea{width:100%!important;min-height:120px!important;background:var(--cj-card)!important;border:2px solid var(--cj-line)!important;border-radius:var(--r-md)!important;padding:14px 16px!important;font-family:var(--font-body)!important;font-size:16px!important;color:var(--cj-ink)!important;resize:vertical!important}
#hashover textarea:focus{border-color:var(--cj-jam)!important;outline:none!important;box-shadow:0 0 0 3px rgba(196,48,79,.12)!important}
#hashover input[type="text"],#hashover input[type="email"],#hashover input[type="url"]{width:100%!important;height:48px!important;background:var(--cj-card)!important;border:2px solid var(--cj-line)!important;border-radius:var(--r-md)!important;padding:0 14px!important;font-family:var(--font-body)!important;font-size:15px!important;color:var(--cj-ink)!important;margin-bottom:10px!important}
#hashover input:focus{border-color:var(--cj-jam)!important;outline:none!important;box-shadow:0 0 0 3px rgba(196,48,79,.12)!important}
#hashover input[type="submit"],#hashover .hashover-submit{background:var(--cj-jam)!important;color:#fff!important;border:none!important;border-radius:var(--r-md)!important;padding:14px 28px!important;font-family:var(--font-body)!important;font-weight:700!important;font-size:16px!important;cursor:pointer!important;transition:background 140ms ease!important}
#hashover input[type="submit"]:hover,#hashover .hashover-submit:hover{background:var(--cj-jam-dark)!important}
#hashover .hashover-avatar{border-radius:50%!important;border:2px solid var(--cj-stamp)!important}
#hashover a{color:var(--cj-jam)!important}
#hashover .hashover-end-links{display:none!important}

/* Pack page byline - bigger and bolder */
.cj-pack-byline{font-family:var(--font-body);font-size:15px;font-weight:600;color:rgba(247,244,236,.75);margin-top:20px;text-align:center}
.cj-pack-byline strong{color:var(--cj-paper);font-weight:700}

/* Pack page stat strip - bigger numbers */
.cj-pack-stats .stat-num{font-family:var(--font-mono);font-weight:700;font-size:26px;color:var(--cj-stamp)}
.cj-pack-stats .stat-label{font-size:12px;color:rgba(247,244,236,.6);text-transform:uppercase;letter-spacing:.06em;margin-top:4px}

/* Pack FAQ - same as homepage FAQ styling */
.cj-faq details{background:var(--cj-card);border:1px solid var(--cj-line);border-radius:var(--r-md);margin-bottom:10px;overflow:hidden}
.cj-faq details[open]{border-color:var(--cj-jam)}
.cj-faq summary{font-family:var(--font-body);font-weight:700;font-size:17px;color:var(--cj-ink);padding:18px 22px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center}
.cj-faq summary::-webkit-details-marker{display:none}
.cj-faq summary:hover{background:var(--cj-paper)}
.cj-faq details div{padding:0 22px 20px;font-family:var(--font-body);font-size:16px;line-height:1.7;color:var(--cj-slate)}
.cj-faq details div a{color:var(--cj-jam);text-decoration:underline;font-weight:600}

/* ===== Comments Section (HL.4) ===== */
.cj-comments{background:var(--cj-card);border:1px solid var(--cj-line);
  border-radius:var(--r-lg);padding:32px 28px;margin:0 auto;max-width:760px;
  box-shadow:var(--sh-1)}
.cj-comments h2{font-family:var(--font-head);font-weight:800;font-size:24px;
  color:var(--cj-ink);margin:0 0 8px}
.cj-comments-intro{font-family:var(--font-body);font-weight:400;font-size:15px;
  line-height:1.6;color:var(--cj-slate);margin:0 0 24px}

.cj-comments .hashover .hashover-comment{background:var(--cj-paper);border:1px solid var(--cj-line);
  border-left:3px solid var(--cj-jam);
  border-radius:var(--r-md);padding:16px 18px;margin-bottom:12px}
.cj-comments .hashover .hashover-comment .hashover-name-span{font-family:var(--font-body);font-weight:700;font-size:15px;
  color:var(--cj-ink)}
.cj-comments .hashover .hashover-comment .hashover-date-permalink{font-family:var(--font-mono);font-weight:400;font-size:12px;
  color:var(--cj-slate);margin-left:8px}
.cj-comments .hashover .hashover-comment .hashover-comment-body{font-family:var(--font-body);font-weight:400;font-size:16px;
  line-height:1.65;color:var(--cj-ink);margin-top:8px}
.cj-comments .hashover .hashover-reply .hashover-comment{margin-left:28px;border-left-color:var(--cj-line-2)}

.cj-comments input[type=text],
.cj-comments input[type=email],
.cj-comments textarea{
  width:100%;
  background:var(--cj-card);
  border:1px solid var(--cj-line-2);
  border-radius:var(--r-md);
  padding:12px 14px;
  font-family:var(--font-body);font-weight:400;font-size:16px;
  color:var(--cj-ink);
  margin-bottom:12px}
.cj-comments textarea{min-height:120px;resize:vertical;line-height:1.6}
.cj-comments input:focus,.cj-comments textarea:focus{
  border-color:var(--cj-jam);
  outline:none;
  box-shadow:0 0 0 3px rgba(196,48,79,.14)}
.cj-comments input::placeholder,.cj-comments textarea::placeholder{
  color:var(--cj-slate);opacity:.7}

.cj-comments input[type=submit],
.cj-comments button[type=submit]{
  background:var(--cj-jam);
  color:#fff;
  border:none;
  border-radius:var(--r-md);
  padding:12px 28px;
  font-family:var(--font-body);font-weight:700;font-size:16px;
  cursor:pointer;
  transition:background .15s;
  width:auto}
.cj-comments input[type=submit]:hover,
.cj-comments button[type=submit]:hover{background:var(--cj-jam-dark)}

[id*="-end-links"],#hashover-end-links,.hashover-footer{display:none!important}

@media(max-width:480px){
  .cj-comments{padding:20px 16px}
  .cj-comments .hashover .hashover-reply .hashover-comment{margin-left:14px}
}

/* Button tokens (Phase 1.4) */
.cj-btn{
  display:inline-flex;align-items:center;justify-content:center;
  height:48px;padding:0 28px;border-radius:var(--r-md);
  font-family:var(--font-body);font-weight:700;font-size:16px;
  line-height:1;text-decoration:none;white-space:nowrap;
  transition:background 140ms ease,color 140ms ease,transform 140ms ease,box-shadow 140ms ease;
}
.cj-btn--primary{
  background:var(--cj-jam);color:#FFFFFF;border:0;box-shadow:var(--sh-2);
}
.cj-btn--primary:hover{
  background:var(--cj-jam-dark);color:#FFFFFF;transform:translateY(-1px);
  box-shadow:var(--sh-3);
}
.cj-btn--ghost{
  background:transparent;color:var(--cj-jam);
  border:1px solid var(--cj-jam);box-shadow:none;
}
.cj-btn--ghost:hover{
  background:var(--cj-jam);color:#FFFFFF;transform:translateY(-1px);
}
.cj-btn:focus-visible{
  outline:3px solid var(--cj-stamp);outline-offset:2px;
}

/* Dark mode toggle - server rendered (Phase 9.3) */
.dm-toggle{
  width:40px;height:40px;flex:0 0 40px;
  display:inline-flex;align-items:center;justify-content:center;
  background:transparent;border:1px solid rgba(247,244,236,.20);
  border-radius:var(--r-md);cursor:pointer;
  font-size:18px;line-height:1;color:var(--cj-paper);
  transition:background 140ms ease,border-color 140ms ease;
  margin-left:8px;
}
.dm-toggle:hover{background:rgba(247,244,236,.10);border-color:var(--cj-stamp)}
.dm-toggle:focus-visible{outline:2px solid var(--cj-stamp);outline-offset:2px}

/* Answer table classes (Phase 8.7) */
.cj-answers table{width:100%;border-collapse:collapse}
.cj-answers th{
  text-align:left;padding:10px 14px;
  font:700 12px/1.2 var(--font-body);text-transform:uppercase;
  letter-spacing:.04em;color:var(--cj-slate);
  border-bottom:2px solid var(--cj-line);
}
.cj-answers th.num{text-align:center}
.cj-answers td{padding:12px 14px;border-bottom:1px solid var(--cj-line)}
.cj-answers td.w-word{
  font:700 16px/1.3 var(--font-mono);letter-spacing:.04em;color:var(--cj-ink);
}
.cj-answers td.w-len{
  text-align:center;font:400 14px/1.3 var(--font-mono);color:var(--cj-slate);
}
.cj-answers td.w-note{
  font:400 14px/1.4 var(--font-body);color:var(--cj-slate);
}
.cj-answers tr:last-child td{border-bottom:0}