/* ============================================================
   Interactive tools — quote builder, health check, deadlines
   Inherits brand palette from styles.css / pages.css
   ============================================================ */

.tool-hero { padding: 150px 0 50px; text-align: center; border-bottom: 1px solid var(--gold-hairline); }
.tool-hero .label { display: block; margin-bottom: 16px; }
.tool-hero h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(2.2rem, 4.8vw, 3.8rem); line-height: 1.08; }
.tool-hero h1 em { font-style: italic; color: var(--gold-soft); }
.tool-hero p { color: var(--ivory-dim); max-width: 56ch; margin: 22px auto 0; line-height: 1.9; font-size: 0.98rem; }

.tool-wrap { max-width: 920px; margin: 0 auto; padding: 60px 24px 100px; }
.tool-grid { display: grid; grid-template-columns: 1.25fr 0.9fr; gap: 50px; align-items: start; }
@media (max-width: 900px){ .tool-grid { grid-template-columns: 1fr; gap: 36px; } }

.tstep { margin-bottom: 36px; }
.tstep .qlabel { font-size: 0.66rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold); margin-bottom: 4px; }
.tstep h3 { font-family: var(--serif); font-weight: 400; font-size: 1.5rem; color: var(--ivory); margin-bottom: 18px; }

/* option chips / cards */
.opts { display: flex; flex-wrap: wrap; gap: 10px; }
.opt { cursor: pointer; user-select: none; border: 1px solid var(--gold-hairline); background: rgba(13,23,40,0.6);
  color: var(--ivory-dim); padding: 12px 18px; border-radius: 8px; font-size: 0.9rem; transition: all 0.25s; position: relative; }
.opt:hover { border-color: var(--gold-faint); color: var(--ivory); }
.opt.on { border-color: var(--gold); color: var(--ivory); background: rgba(200,164,92,0.10); }
.opt.on::after { content: "✓"; color: var(--gold); margin-left: 8px; font-size: 0.8rem; }
.opt input { position: absolute; opacity: 0; pointer-events: none; }

.opts.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap: 10px; }
.opt.card { padding: 18px 16px; }
.opt.card .ot { font-family: var(--serif); font-size: 1.15rem; color: var(--ivory); display: block; }
.opt.card .od { font-size: 0.74rem; color: var(--muted); margin-top: 4px; display: block; line-height: 1.5; }
.opt.card.on .ot { color: var(--gold-soft); }

.tfield { margin-top: 14px; }
.tfield label { display:block; font-size: 0.64rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.tfield select, .tfield input { width: 100%; background: rgba(5,8,14,0.5); border: 1px solid rgba(243,239,230,0.16);
  border-radius: 8px; color: var(--ivory); font-family: var(--sans); font-size: 0.95rem; padding: 12px 14px; }
.tfield select:focus, .tfield input:focus { outline: none; border-color: var(--gold); }
.tfield select option { background: var(--navy); }

/* result / price panel (sticky) */
.tpanel { position: sticky; top: 110px; border: 1px solid var(--gold-faint); background: rgba(13,23,40,0.8); border-radius: 6px; padding: 32px 30px; }
.tpanel .ph { font-size: 0.64rem; letter-spacing: 0.34em; text-transform: uppercase; color: var(--gold); }
.tpanel .pnum { font-family: var(--serif); color: var(--gold-soft); font-size: 2.6rem; line-height: 1.1; margin: 10px 0 2px; }
.tpanel .psub { color: var(--muted); font-size: 0.8rem; }
.tpanel ul { list-style: none; margin: 22px 0; }
.tpanel li { display:flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(243,239,230,0.08); font-size: 0.84rem; color: var(--ivory-dim); }
.tpanel li .v { color: var(--ivory); font-family: var(--serif); white-space: nowrap; }
.tpanel .pbtn-full { display:block; width:100%; text-align:center; }
.tpanel .pnote { font-size: 0.66rem; color: var(--muted); line-height: 1.7; margin-top: 16px; }

/* health check gauge */
.gauge { text-align: center; }
.gauge .ring { width: 150px; height: 150px; margin: 0 auto 16px; border-radius: 50%; display:flex; align-items:center; justify-content:center;
  border: 3px solid var(--gold-faint); position: relative; }
.gauge .ring .score { font-family: var(--serif); font-size: 2.6rem; }
.gauge .verdict { font-family: var(--serif); font-size: 1.6rem; }
.gauge.low .ring { border-color: #6FBF8E; } .gauge.low .score, .gauge.low .verdict { color: #6FBF8E; }
.gauge.med .ring { border-color: var(--gold); } .gauge.med .score, .gauge.med .verdict { color: var(--gold-soft); }
.gauge.high .ring { border-color: #C96A5E; } .gauge.high .score, .gauge.high .verdict { color: #C96A5E; }
.flags { margin-top: 22px; }
.flags .flag { display:flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid rgba(243,239,230,0.08); font-size: 0.86rem; color: var(--ivory-dim); line-height: 1.6; }
.flags .flag .ic { color: var(--gold); flex-shrink: 0; }

/* quiz progress */
.qprogress { height: 3px; background: rgba(200,164,92,0.14); border-radius: 2px; overflow: hidden; margin-bottom: 34px; }
.qprogress i { display:block; height:100%; width:0; background: linear-gradient(90deg,var(--gold),var(--gold-soft)); transition: width 0.4s ease; }
.qcard { min-height: 220px; }
.qcard .qn { font-size: 0.66rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold); }
.qcard h3 { font-family: var(--serif); font-weight: 400; font-size: 1.8rem; color: var(--ivory); margin: 10px 0 26px; line-height: 1.25; }
.qopts { display: flex; flex-direction: column; gap: 12px; }
.qopt { text-align: left; cursor: pointer; border: 1px solid var(--gold-hairline); background: rgba(13,23,40,0.6);
  color: var(--ivory-dim); padding: 16px 20px; border-radius: 8px; font-size: 0.95rem; transition: all 0.2s; }
.qopt:hover { border-color: var(--gold); color: var(--ivory); background: rgba(200,164,92,0.08); padding-left: 26px; }

/* deadline calendar */
.dl-tabs { display:flex; gap: 2px; justify-content: center; border-bottom: 1px solid var(--gold-hairline); margin-bottom: 40px; }
.dl-tab { background: none; border: none; cursor: pointer; font-family: var(--sans); font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted); padding: 18px 28px; position: relative; transition: color 0.3s; }
.dl-tab::after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background: var(--gold); transform: scaleX(0); transition: transform 0.4s; }
.dl-tab:hover { color: var(--ivory); } .dl-tab.active { color: var(--gold-soft); } .dl-tab.active::after { transform: scaleX(1); }
.dl-list { display: none; }
.dl-list.active { display: block; }
.dl-item { display: grid; grid-template-columns: 130px 1fr; gap: 24px; padding: 22px 4px; border-bottom: 1px solid rgba(243,239,230,0.08); align-items: baseline; }
.dl-item .when { font-family: var(--serif); font-style: italic; color: var(--gold); font-size: 1.05rem; }
.dl-item .what { color: var(--ivory); font-family: var(--serif); font-size: 1.2rem; }
.dl-item .who { color: var(--muted); font-size: 0.82rem; margin-top: 4px; line-height: 1.7; }
.dl-item.soon .when { color: var(--gold-soft); }
.dl-item.soon { background: rgba(200,164,92,0.05); }
.dl-note { text-align:center; color: var(--muted); font-size: 0.76rem; margin-top: 26px; line-height: 1.8; }

/* ---- residency simulator / relocation ---- */
.sim-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 10px; }
@media (max-width: 760px){ .sim-grid { grid-template-columns: 1fr; } }
.sim-col { border: 1px solid var(--gold-hairline); background: rgba(13,23,40,0.6); border-radius: 10px; padding: 22px 20px; text-align: center; }
.sim-col .flag { font-size: 1.5rem; }
.sim-col .cname { font-family: var(--serif); font-size: 1.2rem; color: var(--ivory); margin: 6px 0 14px; }
.sim-col .days { font-family: var(--serif); color: var(--gold-soft); font-size: 2rem; line-height: 1; }
.sim-col .dlabel { font-size: 0.64rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); margin-top: 4px; }
.sim-col input[type=range] { width: 100%; margin: 18px 0 6px; accent-color: var(--gold); }
.sbadge { display:inline-block; margin-top: 10px; font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; border: 1px solid; }
.sbadge.res { color:#C96A5E; border-color: rgba(201,106,94,0.5); }
.sbadge.maybe { color: var(--gold-soft); border-color: var(--gold-faint); }
.sbadge.non { color:#6FBF8E; border-color: rgba(111,191,142,0.5); }
.sim-toggle { display:flex; align-items:center; gap: 12px; justify-content:center; margin: 24px 0; padding: 14px 18px; border:1px solid var(--gold-hairline); border-radius: 10px; background: rgba(200,164,92,0.05); }
.sim-toggle input { width: 18px; height: 18px; accent-color: var(--gold); }
.sim-toggle label { color: var(--ivory-dim); font-size: 0.9rem; }
.sim-out { margin-top: 30px; }
.sim-out .verdict { font-family: var(--serif); font-size: 1.5rem; color: var(--ivory); margin-bottom: 18px; }
.sim-out .flag-line { display:flex; gap: 12px; padding: 13px 0; border-bottom: 1px solid rgba(243,239,230,0.08); color: var(--ivory-dim); font-size: 0.92rem; line-height: 1.7; }
.sim-out .flag-line .ic { color: var(--gold); flex-shrink:0; }
.sim-days-note { text-align:center; font-size: 0.74rem; color: var(--muted); margin-top: 10px; }

/* ---- Aria attachment ---- */
.aria-attach { flex-shrink: 0; width: 40px; height: 40px; border-radius: 10px; border: 1px solid rgba(200,164,92,0.3); background: transparent; color: var(--aria-gold); cursor: pointer; font-size: 1.05rem; display:flex; align-items:center; justify-content:center; transition: all 0.25s; }
.aria-attach:hover { background: rgba(200,164,92,0.12); }
.aria-file-tag { align-self:flex-start; font-size: 0.72rem; color: var(--aria-gold-soft); background: rgba(200,164,92,0.08); border:1px solid rgba(200,164,92,0.25); padding:6px 10px; border-radius: 8px; margin: 0 18px; display:flex; gap:8px; align-items:center; }
.aria-file-tag button { background:none;border:none;color:var(--aria-muted);cursor:pointer;font-size:0.9rem; }