/* ===== All styles scoped under #syn-app — cannot leak into the theme ===== */
#syn-app{
  /* === Site palette ===
     primary  #EDE5D8 (warm cream)  ·  secondary #D09A40 (gold)
     remaining tones are tints/shades derived from these two so the
     widget blends with the site without clashing. */
  --syn-bg:#EDE5D8;            /* primary cream — page background */
  --syn-card:#f6f1e8;          /* lighter cream — cards */
  --syn-card2:#fbf8f2;         /* lightest — inputs / inner panels */
  --syn-ink:#3a3026;           /* dark warm brown — body text (readable on cream) */
  --syn-mut:#8a7d68;           /* muted brown — labels, hints */
  --syn-line:#d8cdb9;          /* soft tan — borders */
  --syn-gold:#D09A40;          /* secondary gold — accents, headings */
  --syn-gold-dk:#a87a2c;       /* darker gold — gradients / hover */
  --syn-rose:#b06a4a;          /* warm terracotta — legend accent */
  --syn-cyan:#7a8f6e;          /* muted sage — sub-headings */
  --syn-good:#5f9468;          /* harmonious aspects */
  --syn-hard:#c0594f;          /* challenging aspects */
  --syn-soft:#6f86a8;          /* supportive aspects */
  --syn-radius:14px;
  all:initial;
  display:block; box-sizing:border-box; width:100%;
  font-family:Georgia,'Times New Roman',serif;
  color:var(--syn-ink);
  background:radial-gradient(120% 90% at 15% 0%,#f4eee3 0%,var(--syn-bg) 65%);
  padding:clamp(16px,3vw,34px);
  border-radius:var(--syn-radius);
  border:1px solid var(--syn-line);
  line-height:1.55;
}
#syn-app *,#syn-app *::before,#syn-app *::after{box-sizing:border-box;}
#syn-app .syn-wrap{max-width:980px;margin:0 auto;}

#syn-app .syn-head{text-align:center;margin-bottom:1.6rem;}
#syn-app .syn-title{
  font-size:clamp(1.6rem,4vw,2.4rem); margin:0 0 .3rem;
  letter-spacing:.04em; font-weight:700;
  color:var(--syn-gold-dk);
}
#syn-app .syn-sub{margin:0;color:var(--syn-mut);font-size:.96rem;font-style:italic;}

#syn-app .syn-forms{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:18px;margin-bottom:1.1rem;
}
@media(max-width:640px){#syn-app .syn-forms{grid-template-columns:1fr;}}

#syn-app .syn-card{
  background:var(--syn-card);
  border:1px solid var(--syn-line);
  border-radius:var(--syn-radius);
  padding:18px 18px 14px;margin:0;
}
#syn-app .syn-card legend{
  padding:0 10px;font-size:1.05rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--syn-rose);
}
#syn-app .syn-f{display:block;margin-bottom:11px;}
#syn-app .syn-f>span{
  display:block;font-size:.74rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--syn-mut);
  margin-bottom:4px;font-family:Georgia,serif;
}
#syn-app input[type=text],
#syn-app input[type=date],
#syn-app input[type=time],
#syn-app input[type=number]{
  width:100%;display:block;
  background:var(--syn-card2);
  border:1px solid var(--syn-line);
  border-radius:8px;
  color:var(--syn-ink);
  /* 16px minimum — stops iOS Safari from auto-zooming when a field is tapped */
  font-size:16px;font-family:Georgia,serif;
  padding:11px 12px;margin:0;
  -webkit-appearance:none;appearance:none;
}
#syn-app input::-webkit-calendar-picker-indicator{opacity:.55;}
#syn-app input:focus{outline:2px solid var(--syn-gold);outline-offset:1px;}
#syn-app .syn-citywrap{position:relative;}
#syn-app .syn-suggest{
  list-style:none;margin:4px 0 0;padding:0;
  position:absolute;left:0;right:0;top:100%;z-index:40;
  background:var(--syn-card2);
  border:1px solid var(--syn-line);border-radius:8px;
  max-height:210px;overflow-y:auto;display:none;
  box-shadow:0 10px 26px rgba(58,48,38,.18);
}
#syn-app .syn-suggest.syn-open{display:block;}
#syn-app .syn-suggest li{
  padding:12px 13px;font-size:15px;cursor:pointer;
  min-height:44px;display:flex;align-items:center;flex-wrap:wrap;gap:4px;
  border-bottom:1px solid var(--syn-line);color:var(--syn-ink);
}
#syn-app .syn-suggest li:last-child{border-bottom:none;}
#syn-app .syn-suggest li:hover,
#syn-app .syn-suggest li.syn-active{
  background:rgba(208,154,64,.16);color:var(--syn-gold-dk);
}
#syn-app .syn-suggest li .syn-sg-country{color:var(--syn-mut);font-size:.76rem;}
#syn-app .syn-suggest li.syn-noresult{cursor:default;color:var(--syn-mut);font-style:italic;}
#syn-app .syn-suggest li.syn-noresult:hover{background:none;color:var(--syn-mut);}
#syn-app .syn-citychosen{
  display:block;font-size:.74rem;color:var(--syn-good);margin-top:4px;
}
#syn-app .syn-checkrow{
  display:flex;align-items:center;gap:9px;
  font-size:.9rem;color:var(--syn-mut);margin:4px 0 11px;cursor:pointer;
  min-height:32px;
}
#syn-app .syn-checkrow input{width:20px;height:20px;accent-color:var(--syn-gold);margin:0;flex:none;}
#syn-app .syn-hint{font-size:.74rem;color:var(--syn-mut);margin:.4rem 0 0;line-height:1.4;}

#syn-app .syn-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:.4rem 0 .2rem;}
#syn-app .syn-btn{
  font-family:Georgia,serif;font-size:.95rem;letter-spacing:.05em;
  padding:12px 26px;border-radius:30px;cursor:pointer;
  border:1px solid var(--syn-gold-dk);
  background:linear-gradient(180deg,#e0ac54,var(--syn-gold));
  color:#3a3026;font-weight:bold;
  transition:transform .12s ease,box-shadow .12s ease;
}
#syn-app .syn-btn:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(208,154,64,.4);}
#syn-app .syn-btn:active{transform:translateY(0);}
#syn-app .syn-btn-ghost{
  background:transparent;color:var(--syn-mut);border-color:var(--syn-line);
}
#syn-app .syn-btn-ghost:hover{box-shadow:none;color:var(--syn-ink);}

#syn-app .syn-err{
  background:rgba(192,89,79,.12);
  border:1px solid var(--syn-hard);
  color:#8f3a32;border-radius:10px;
  padding:10px 14px;font-size:.88rem;margin:1rem 0 0;text-align:center;
}

#syn-app .syn-results{margin-top:1.8rem;}
#syn-app .syn-block{
  background:var(--syn-card);
  border:1px solid var(--syn-line);
  border-radius:var(--syn-radius);
  padding:18px;margin-bottom:18px;
}
#syn-app .syn-h3{
  margin:0 0 .8rem;font-size:1.2rem;color:var(--syn-gold-dk);
  letter-spacing:.04em;font-weight:700;
  border-bottom:1px solid var(--syn-line);padding-bottom:.4rem;
}
#syn-app .syn-h4{margin:0 0 .5rem;font-size:.95rem;color:var(--syn-cyan);letter-spacing:.05em;}
#syn-app .syn-note,#syn-app .syn-disclaimer{
  font-size:.78rem;color:var(--syn-mut);font-style:italic;
}
#syn-app .syn-disclaimer{margin-top:.6rem;text-align:center;}

#syn-app .syn-tables{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
@media(max-width:640px){
  #syn-app .syn-tables{grid-template-columns:1fr;}
  #syn-app .syn-actions{flex-direction:column;}
  #syn-app .syn-btn{width:100%;}
  #syn-app .syn-suggest{max-height:46vh;}
  #syn-app .syn-grid{font-size:.78rem;}
}
#syn-app .syn-tablewrap{overflow-x:auto;}
#syn-app table{border-collapse:collapse;width:100%;font-size:.84rem;}
#syn-app .syn-table th,#syn-app .syn-table td{
  text-align:left;padding:5px 8px;border-bottom:1px solid var(--syn-line);
  white-space:nowrap;
}
#syn-app .syn-table th{color:var(--syn-mut);font-weight:normal;font-size:.72rem;
  text-transform:uppercase;letter-spacing:.05em;}
#syn-app .syn-glyph{font-size:1rem;color:var(--syn-gold-dk);}

#syn-app .syn-gridscroll{overflow-x:auto;margin-bottom:.6rem;}
#syn-app .syn-grid{font-size:.8rem;min-width:520px;}
#syn-app .syn-grid th,#syn-app .syn-grid td{
  border:1px solid var(--syn-line);padding:0;text-align:center;
  width:34px;height:34px;
}
#syn-app .syn-grid th{
  background:var(--syn-card2);color:var(--syn-cyan);
  font-weight:normal;font-size:1rem;
}
#syn-app .syn-grid th.syn-corner{background:transparent;}
#syn-app .syn-grid td .syn-cell{
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  cursor:default;font-size:.95rem;
}
#syn-app .syn-cell[data-cat=good]{background:rgba(95,148,104,.18);color:var(--syn-good);}
#syn-app .syn-cell[data-cat=hard]{background:rgba(192,89,79,.18);color:var(--syn-hard);}
#syn-app .syn-cell[data-cat=soft]{background:rgba(111,134,168,.18);color:var(--syn-soft);}
#syn-app .syn-cell[title]{cursor:help;}

#syn-app .syn-legend{
  list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:14px;
  font-size:.76rem;color:var(--syn-mut);
}
#syn-app .syn-legend li{display:flex;align-items:center;gap:5px;}
#syn-app .syn-swatch{width:13px;height:13px;border-radius:3px;display:inline-block;}

#syn-app .syn-aspectlist{display:flex;flex-direction:column;gap:10px;}
#syn-app .syn-aspect{
  background:var(--syn-card2);border:1px solid var(--syn-line);
  border-left:4px solid var(--syn-line);border-radius:9px;padding:11px 14px;
}
#syn-app .syn-aspect[data-cat=good]{border-left-color:var(--syn-good);}
#syn-app .syn-aspect[data-cat=hard]{border-left-color:var(--syn-hard);}
#syn-app .syn-aspect[data-cat=soft]{border-left-color:var(--syn-soft);}
#syn-app .syn-aspect-head{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;margin-bottom:3px;
}
#syn-app .syn-aspect-title{font-size:.98rem;color:var(--syn-ink);}
#syn-app .syn-aspect-orb{font-size:.74rem;color:var(--syn-mut);}
#syn-app .syn-aspect-tag{
  font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;
  padding:2px 8px;border-radius:20px;border:1px solid var(--syn-line);color:var(--syn-mut);
}
#syn-app .syn-aspect-body{font-size:.86rem;color:var(--syn-mut);margin:0;}
#syn-app .syn-empty{color:var(--syn-mut);font-style:italic;font-size:.88rem;}
#syn-app .syn-warn{
  background:rgba(208,154,64,.14);border:1px solid var(--syn-gold);
  color:#7a5a1e;border-radius:8px;padding:8px 12px;font-size:.78rem;
  margin-bottom:10px;
}