/* =====================================================================
   Australian Loan Calculator Suite — front-end styles (scoped to .alcs)
   Tokens below are overridden inline from the Branding settings.
   ===================================================================== */
.alcs{
  --green:#0E7C57; --green-d:#0A5E42; --green-l:#14a274;
  --ink:#0B1E2D; --ink-2:#13314A;
  --gold:#C8923B; --gold-l:#E2B66A;
  --bg:#F6F3EC; --bg-2:#EFEADF; --surface:#FFFFFF;
  --line:#E4DECF; --line-2:#D7CFBC;
  --text:#16242C; --text-soft:#3C4A52; --muted:#5C6A72; --muted-2:#7E8A90;
  --on-dark:#EAF1F0; --on-dark-soft:#9DB2B6;
  --r-xs:8px; --r-sm:12px; --r-md:18px; --r-lg:26px;
  --sh-1:0 1px 2px rgba(11,30,45,.06), 0 2px 8px rgba(11,30,45,.05);
  --sh-2:0 8px 24px rgba(11,30,45,.08), 0 2px 6px rgba(11,30,45,.05);
  --sh-3:0 24px 60px rgba(11,30,45,.14), 0 8px 20px rgba(11,30,45,.08);
  --font-head:'Bricolage Grotesque',sans-serif;
  --font-body:'Hanken Grotesk',system-ui,sans-serif;

  /* Button tokens (overridden inline from Branding → Buttons) */
  --btn-bg:#0E7C57; --btn-text:#FFFFFF; --btn-bd-color:#0E7C57; --btn-bd-width:1px;
  --btn-fs:16px; --btn-radius:999px; --btn-pad-y:15px; --btn-pad-x:26px;
  --btn-hover-bg:#0A5E42; --btn-hover-text:#FFFFFF; --btn-hover-border:#0A5E42;

  font-family:var(--font-body);
  color:var(--text);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -webkit-text-size-adjust:100%;
}
.alcs *{box-sizing:border-box; min-width:0}
.alcs{max-width:100%; overflow-wrap:break-word}
.alcs h1,.alcs h2,.alcs h3,.alcs h4{font-family:var(--font-head); font-weight:600; line-height:1.08; margin:0; letter-spacing:-.02em; color:var(--ink)}
.alcs p{margin:0}
.alcs img{max-width:100%; display:block}
.alcs .lead{font-size:1.08rem; color:var(--text-soft); line-height:1.55; max-width:62ch}

/* ---------- buttons (geometry + colours driven from Branding → Buttons) ---------- */
.alcs .btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px; cursor:pointer;
  font-family:inherit; font-weight:600; font-size:var(--btn-fs);
  padding:var(--btn-pad-y) var(--btn-pad-x); border-radius:var(--btn-radius);
  border:var(--btn-bd-width) solid transparent;
  transition:.22s cubic-bezier(.2,.7,.3,1); line-height:1.15; text-align:center;
  text-decoration:none; max-width:100%;
}
.alcs .btn-primary{background:var(--btn-bg); color:var(--btn-text); border-color:var(--btn-bd-color); box-shadow:0 8px 20px rgba(11,30,45,.18)}
.alcs .btn-primary:hover,.alcs .btn-primary:focus-visible{background:var(--btn-hover-bg); color:var(--btn-hover-text); border-color:var(--btn-hover-border); transform:translateY(-2px); box-shadow:0 14px 30px rgba(11,30,45,.24)}
.alcs .btn-block{width:100%}
.alcs .btn-sm{padding:calc(var(--btn-pad-y) * .72) calc(var(--btn-pad-x) * .7); font-size:calc(var(--btn-fs) * .92)}
/* Secondary / ghost action (e.g. Download PDF) inherits the same geometry but stays visually distinct */
.alcs .btn-ghost{background:var(--surface); color:var(--ink); border:var(--btn-bd-width) solid var(--line-2)}
.alcs .btn-ghost:hover,.alcs .btn-ghost:focus-visible{background:var(--bg-2); border-color:var(--btn-hover-border); transform:translateY(-2px)}
.alcs .cr-actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:4px}
.alcs .cr-actions .btn{flex:1 1 160px; min-width:0}
@media (max-width:480px){.alcs .cr-actions{flex-direction:column} .alcs .cr-actions .btn{width:100%; flex:1 1 auto}}

/* ---------- chips / cards ---------- */
.alcs .tag{display:inline-block; font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--green); background:rgba(14,124,87,.1); padding:5px 11px; border-radius:6px}
.alcs .card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-1)}

/* ---------- suite shell + sidebar ---------- */
.alcs .calc-shell{display:grid; grid-template-columns:268px 1fr; gap:34px; align-items:start}
.alcs .calc-sidebar{position:sticky; top:18px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:18px; box-shadow:var(--sh-1)}
.alcs .cn-title{font-size:.74rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--muted-2); padding:6px 10px 12px}
.alcs .cn-group{font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--green); padding:16px 10px 7px}
.alcs .cn-item{display:block; width:100%; text-align:left; background:none; border:none; padding:10px 12px; border-radius:10px; font-family:inherit; font-size:.95rem; font-weight:500; color:var(--text-soft); cursor:pointer; transition:.15s}
.alcs .cn-item:hover{background:var(--bg-2); color:var(--ink)}
.alcs .cn-item.active{background:var(--green); color:#fff; font-weight:600}
.alcs .cn-cta{margin-top:18px; padding:16px; background:var(--bg-2); border-radius:var(--r-md); text-align:center}
.alcs .cn-cta p{font-size:.9rem; color:var(--text-soft); margin-bottom:10px; font-weight:600}

/* ---------- calculator head ---------- */
.alcs .calc-main{min-height:40vh}
.alcs .calc-head .tag{margin-bottom:14px}
.alcs .calc-head h1{font-size:clamp(1.7rem,3.2vw,2.5rem); margin-bottom:12px}
.alcs .calc-head .lead{font-size:1.06rem; max-width:62ch}

/* ---------- inputs + results layout ---------- */
.alcs .calc-body{display:grid; grid-template-columns:1fr 380px; gap:28px; margin-top:30px; align-items:start}
.alcs .calc-inputs{display:grid; grid-template-columns:1fr 1fr; gap:22px 20px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:28px; box-shadow:var(--sh-1)}
.alcs .cfield{display:flex; flex-direction:column}
.alcs .cfield label{font-size:.9rem; font-weight:600; color:var(--text-soft); margin-bottom:8px}
.alcs .cf-help{font-size:.78rem; color:var(--muted); margin-top:7px; line-height:1.4}

.alcs .input,.alcs .select{
  width:100%; padding:14px 16px; border:1px solid var(--line-2); border-radius:var(--r-sm);
  background:var(--surface); font-family:inherit; font-size:1rem; color:var(--text); transition:.18s;
}
.alcs .input:focus,.alcs .select:focus{outline:none; border-color:var(--green); box-shadow:0 0 0 4px rgba(14,124,87,.12)}

.alcs .cinput-wrap{position:relative; display:flex; align-items:center}
.alcs .cinput-wrap .input{width:100%}
.alcs .cinput-wrap.prefix .input{padding-left:30px}
.alcs .cinput-wrap.suffix .input{padding-right:46px}
.alcs .cf-affix{position:absolute; color:var(--muted); font-weight:600; pointer-events:none; font-size:.95rem}
.alcs .cinput-wrap.prefix .cf-affix{left:14px}
.alcs .cinput-wrap.suffix .cf-affix{right:14px}

/* synced slider beneath each numeric input */
.alcs .alcs-rng{margin-top:12px}
.alcs .le-range{-webkit-appearance:none; appearance:none; width:100%; height:6px; border-radius:4px; background:var(--line-2); outline:none; cursor:pointer}
.alcs .le-range::-webkit-slider-thumb{-webkit-appearance:none; width:22px; height:22px; border-radius:50%; background:#fff; border:3px solid var(--green); box-shadow:var(--sh-1); cursor:pointer; transition:.15s}
.alcs .le-range::-webkit-slider-thumb:hover{transform:scale(1.12)}
.alcs .le-range:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px rgba(14,124,87,.22)}
.alcs .le-range::-moz-range-thumb{width:22px; height:22px; border-radius:50%; background:#fff; border:3px solid var(--green); cursor:pointer}

/* ---------- results card ---------- */
.alcs .calc-results{position:sticky; top:18px; padding:28px; border:1px solid var(--line); background:linear-gradient(170deg,var(--surface),var(--bg-2))}
.alcs .cr-headline{padding-bottom:18px; border-bottom:1px solid var(--line); margin-bottom:6px}
.alcs .cr-headline > span{font-size:.84rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); font-weight:600}
.alcs .cr-big{font-family:var(--font-head); font-size:2.9rem; font-weight:700; color:var(--result); letter-spacing:-.03em; line-height:1.05; margin-top:6px; word-break:break-word}
.alcs .cr-rows{margin:6px 0 10px}
.alcs .cr-row{display:flex; justify-content:space-between; gap:10px; padding:10px 0; border-bottom:1px solid var(--line); font-size:.7rem; color:var(--text-soft)}
.alcs .cr-row:last-child{border-bottom:none}
.alcs .cr-row strong{color:var(--ink); text-align:right; font-weight:600}
.alcs .cr-warn{background:rgba(200,146,59,.12); border:1px solid rgba(200,146,59,.3); color:#8a6418; border-radius:var(--r-sm); padding:13px 15px; font-size:.7rem; line-height:1.5; margin:16px 0}
.alcs .alcs-cta{margin-top:6px}
.alcs .cr-note{font-size:.78rem; color:var(--muted); text-align:center; margin-top:12px}

.alcs .calc-disclaimer{margin-top:24px; font-size:.84rem; color:var(--muted); line-height:1.6; background:var(--bg-2); border-radius:var(--r-md); padding:18px 20px; border-left:3px solid var(--line-2)}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .alcs .calc-body{grid-template-columns:1fr}
  .alcs .calc-results{position:static}
}
@media (max-width:860px){
  .alcs .calc-shell{grid-template-columns:1fr; gap:22px}
  .alcs .calc-sidebar{position:static}
  .alcs .alcs-nav{display:grid; grid-template-columns:repeat(2,1fr); gap:6px}
  .alcs .cn-group{grid-column:1/-1}
}
@media (max-width:768px){
  .alcs .calc-body{gap:22px; margin-top:24px}
  .alcs .calc-inputs{padding:22px}
}
@media (max-width:576px){
  .alcs .calc-inputs{grid-template-columns:1fr; gap:18px; padding:18px}
  .alcs .calc-results{padding:22px}
  .alcs .alcs-nav{grid-template-columns:1fr}
  .alcs .calc-head h1{font-size:clamp(1.5rem,7vw,2rem)}
  .alcs .cr-big{font-size:2.3rem}
}
@media (max-width:414px){
  .alcs .calc-inputs{padding:16px}
  .alcs .calc-results{padding:18px}
  .alcs .input,.alcs .select{padding:10px 18px; font-size:14px} /* 16px avoids iOS zoom */
  .alcs .cr-big{font-size:2.05rem}
  .alcs .cr-row{font-size:.65rem}
}
@media (max-width:360px){
  .alcs .calc-inputs{padding:14px}
  .alcs .calc-results{padding:16px}
  .alcs .calc-disclaimer{padding:14px 15px}
  .alcs .cr-big{font-size:1.85rem}
}
@media (prefers-reduced-motion:reduce){
  .alcs *{transition:none !important}
}

/* ---- Result chart ---- */
.alcs .cr-chart{margin:6px 0 18px; padding:14px 14px 6px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-sm); box-shadow:var(--sh-1)}
.alcs .cr-chart-title{font-family:var(--font-head); font-size:.95rem; font-weight:700; color:var(--ink); margin:0 2px 8px}
.alcs .cr-chart canvas{display:block; width:100%; height:auto; touch-action:pan-y}
.alcs .cr-legend{display:flex; flex-wrap:wrap; gap:8px 16px; margin:10px 2px 6px; padding-top:10px; border-top:1px solid var(--line)}
.alcs .cr-legend-item{display:inline-flex; align-items:center; gap:7px; font-size:.82rem; color:var(--text-soft); font-weight:600; line-height:1.3}
.alcs .cr-legend-dot{width:12px; height:12px; border-radius:4px; flex:0 0 auto}
.alcs .cr-chart-tip{position:absolute; pointer-events:none; z-index:5; background:var(--ink); color:#fff; font-size:.78rem; font-weight:600; padding:6px 9px; border-radius:7px; white-space:nowrap; box-shadow:var(--sh-2); opacity:0; transform:translate(-50%,-6px); transition:opacity .12s}
.alcs .cr-chart-wrap{position:relative}