:root { --sc-serif: "Cormorant Garamond", Georgia, serif; }
/* sc-styles.css — Shared styles for SleepCalculators.site advanced tools */
/* Accessibility classes */
.sc-high-contrast { filter: contrast(1.5); }
.sc-reduced-motion * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
.sc-dyslexia { font-family: 'OpenDyslexic', 'Comic Sans MS', cursive !important; }
.sc-focus-enhanced :focus { outline: 3px solid #C9A86C !important; outline-offset: 3px !important; }
.sc-underline-links a { text-decoration: underline !important; }
/* Skip link */
.sc-skip-link { position:absolute;top:-40px;left:0;background:#53785F;color:#fff;padding:8px 16px;border-radius:0 0 8px 0;font-weight:700;z-index:99999;transition:top .2s; }
.sc-skip-link:focus { top:0; }
/* Advanced tool card */
.adv-card { background:var(--cream-card,#fff);border:1px solid var(--border,#E4DDD4);border-radius:16px;padding:20px;display:flex;flex-direction:column;gap:10px;transition:all .2s;box-shadow:0 1px 4px rgba(58,53,48,.08); }
.adv-card:hover { transform:translateY(-2px);box-shadow:0 4px 18px rgba(58,53,48,.12); }
.adv-card-icon { font-size:1.8rem; }
.adv-card-name { font-family:'Cormorant Garamond',serif;font-size:1.1rem;font-weight:700;color:var(--charcoal,#3A3530); }
.adv-card-desc { font-size:.8rem;color:var(--charcoal-mid,#6B6560);line-height:1.6; }
.adv-card-btn { padding:8px 18px;border-radius:100px;border:none;background:var(--sage-btn,#53785F);color:#fff;font-family:'Nunito',sans-serif;font-size:.8rem;font-weight:700;cursor:pointer;text-decoration:none;display:inline-block;text-align:center; }
.adv-card-btn:hover { background:var(--sage-dark,#4E7362); }
/* Section grid */
.adv-section { margin-bottom:28px; }
.adv-section-title { font-family:'Cormorant Garamond',serif;font-size:1.3rem;font-weight:700;margin-bottom:14px;color:var(--charcoal,#3A3530);display:flex;align-items:center;gap:8px; }
.adv-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px; }
/* Comparison panels */
.cmp-panels { display:grid;grid-template-columns:1fr 1fr;gap:16px; }
@media(max-width:600px){ .cmp-panels { grid-template-columns:1fr; } }
.cmp-panel { background:var(--cream-deep,#F0EBE2);border:1px solid var(--border,#E4DDD4);border-radius:14px;padding:18px; }
.cmp-panel h3 { font-size:.9rem;font-weight:700;margin-bottom:12px;color:var(--charcoal,#3A3530); }
/* Range slider */
.sc-range { -webkit-appearance:none;appearance:none;width:100%;height:5px;border-radius:3px;background:var(--cream-deep,#F0EBE2);outline:none; }
.sc-range::-webkit-slider-thumb { -webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:var(--sage-btn,#53785F);cursor:pointer;border:2px solid #fff;box-shadow:0 2px 6px rgba(83,120,95,.3); }
.sc-range::-moz-range-thumb { width:20px;height:20px;border-radius:50%;background:var(--sage-btn,#53785F);cursor:pointer;border:2px solid #fff; }
/* Chart container */
.sc-chart-wrap { position:relative;overflow:hidden;border-radius:12px;background:var(--cream-card,#fff);border:1px solid var(--border,#E4DDD4);padding:16px; }
.sc-chart-wrap canvas { display:block;width:100%!important; }
/* Status pills */
.sc-pill { display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:100px;font-size:.7rem;font-weight:700; }
.sc-pill-green  { background:#EDF5F0;color:#487057;border:1px solid #C4DACE; }
.sc-pill-amber  { background:#FEF8EE;color:#9A7030;border:1px solid #EDD9A8; }
.sc-pill-red    { background:#FEF0ED;color:#A05540;border:1px solid #F4C4B5; }
.sc-pill-grey   { background:var(--cream-deep);color:var(--charcoal-mid);border:1px solid var(--border); }
/* Score ring */
.sc-score-ring { position:relative;display:inline-flex;align-items:center;justify-content:center; }
.sc-score-num { position:absolute;font-family:'Cormorant Garamond',serif;font-size:2rem;font-weight:700;line-height:1; }
/* Print */
@media print {
  .navbar,.dark-btn,.adv-card-btn,.btn-primary,.btn-secondary,
  footer,.share-bar,.newsletter-cta,.sc-skip-link,
  #_scToast,#searchModal,#accessModal { display:none!important; }
  body { background:#fff!important;color:#000!important; }
  .card,.adv-card { box-shadow:none!important;border:1px solid #ccc!important;break-inside:avoid; }
}
