/* Financial Asset Check Up — Finku. Own layout; shares only the Finku design tokens in style.css. */

/* ---- step progress ---- */
.ac-progress{display:flex;gap:8px;margin:0 0 26px}
.ac-progress button{flex:1;border:0;background:none;padding:0;font:inherit;text-align:left;cursor:pointer}
.ac-progress .bar{display:block;height:4px;border-radius:2px;background:var(--line);margin-bottom:8px;transition:background .2s}
.ac-progress .lbl{display:block;font-size:.78rem;font-weight:600;color:var(--muted);line-height:1.3}
.ac-progress button.done .bar,.ac-progress button.now .bar{background:var(--blue)}
.ac-progress button.now .lbl{color:var(--blue)}
.ac-progress button.done .lbl{color:var(--ink-2)}
.ac-progress button:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:4px}

/* ---- input groups ---- */
.ac-card{background:#FFF;border-radius:var(--r-card);box-shadow:0 12px 40px rgba(1,46,110,.10);padding:32px!important}
.ac-step-head{margin:0 0 22px}
.ac-step-head h2{font-size:1.35rem;font-weight:700;margin:0 0 4px}
.ac-step-head p{color:var(--ink-3);font-size:.95rem;margin:0}
.ac-group{border:1.5px solid var(--line);border-radius:14px;padding:18px;margin-bottom:14px}
.ac-group>h3{font-size:1rem;font-weight:700;color:var(--navy);margin:0 0 2px}
.ac-group>.gh{color:var(--ink-3);font-size:.85rem;margin:0 0 14px}
.ac-row{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:10px 16px;align-items:center;padding:7px 0}
.ac-row:not([hidden])~.ac-row:not([hidden]){border-top:1px dashed var(--line)}
.ac-row label{margin:0;font-size:.9rem;font-weight:500;color:var(--ink-2)}
.ac-row label small{display:block;color:var(--muted);font-size:.78rem;font-weight:400;margin-top:1px}
.ac-money{display:flex;align-items:stretch}
.ac-money span{display:flex;align-items:center;padding:0 12px;background:var(--blue-1);color:var(--blue);font-weight:700;font-size:.85rem;border:1.5px solid var(--line);border-right:0;border-radius:var(--r-input) 0 0 var(--r-input)}
.ac-money input{flex:1;min-width:0;height:44px;border:1.5px solid var(--line);border-radius:0 var(--r-input) var(--r-input) 0;padding:0 12px;text-align:right;font:600 1rem var(--font);color:var(--ink);background:#FFF}
.ac-money input::placeholder{color:#B7B7B7;font-weight:500}
.ac-money input:focus{outline:0;border-color:var(--blue);box-shadow:0 0 0 3px rgba(3,92,220,.15)}
.ac-remove{flex:0 0 40px;height:44px;border:1.5px solid var(--line);border-left:0;border-radius:0 var(--r-input) var(--r-input) 0;background:#FFF;color:var(--muted);font:400 20px/1 var(--font);cursor:pointer;padding:0}
.ac-money input:has(+.ac-remove){border-radius:0}
.ac-remove:hover{color:#B23A0A;background:#FDE8DD}
.ac-remove:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}

/* optional rows: "+ label" chips that reveal a hidden row */
.ac-add{margin-top:12px;padding-top:10px;border-top:1px dashed var(--line)}
.ac-rows:empty+.ac-add,.ac-rows:not(:has(.ac-row:not([hidden])))+.ac-add{border-top:0;padding-top:0;margin-top:0}
.ac-add-label{display:block;color:var(--muted);font-size:.78rem;font-weight:600;margin-bottom:8px}
.ac-chips{display:flex;flex-wrap:wrap;gap:8px}
.ac-chip{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px 0 10px;border:1.5px solid var(--line);border-radius:10px;background:#FFF;color:var(--ink-2);font:500 .85rem var(--font);cursor:pointer;transition:border-color .12s,color .12s}
.ac-chip .plus{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:6px;background:var(--blue-1);color:var(--blue);font-weight:700;font-size:1rem;line-height:1}
.ac-chip:hover{border-color:var(--blue);color:var(--blue)}
.ac-chip:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.ac-subtotal{display:flex;justify-content:space-between;align-items:baseline;margin-top:14px;padding-top:12px;border-top:1.5px solid var(--line);font-weight:600;color:var(--blue)}
.ac-subtotal .v{font-variant-numeric:tabular-nums}
.ac-steptotal{display:flex;justify-content:space-between;align-items:center;gap:12px;background:var(--navy);color:#FFF;border-radius:14px;padding:16px 20px;margin:20px 0 4px}
.ac-steptotal b{font-size:1.25rem;font-variant-numeric:tabular-nums}
.ac-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.ac-actions .btn{flex:0 0 auto}
.ac-actions .spacer{flex:1 1 auto}

/* ---- result ---- */
.ac-score-hero{text-align:center;padding:4px 0 0}
.ac-score-label{color:var(--ink-3);font-size:.95rem;font-weight:500;margin:0}
.ac-score{font-size:88px;line-height:1;font-weight:800;color:var(--blue);letter-spacing:-.04em;margin:6px 0 4px;font-variant-numeric:tabular-nums}
.ac-score small{font-size:24px;font-weight:600;color:var(--muted);letter-spacing:0}
.ac-band{color:var(--ink-2);font-size:.95rem;max-width:560px;margin:8px auto 22px}
.ac-band b{color:var(--navy)}
.ac-meter{position:relative;padding:30px 0 6px;margin-bottom:20px}
.ac-meter-bar{display:flex;height:12px;border-radius:6px;overflow:hidden}
.ac-meter-bar i{display:block;height:100%}
.ac-meter-bar .m1{width:40%;background:#D7263D}.ac-meter-bar .m2{width:20%;background:#E8750C}
.ac-meter-bar .m3{width:20%;background:#1F6AD1}.ac-meter-bar .m4{width:20%;background:var(--navy)}
.ac-pin{position:absolute;top:0;width:0;transition:left .5s ease}
.ac-pin i{position:absolute;left:-9px;top:2px;width:18px;height:18px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--amber);border:3px solid #FFF;box-shadow:0 2px 8px rgba(1,46,110,.25)}
.ac-ticks{position:relative;height:16px;margin-top:8px;font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.ac-ticks i{position:absolute;font-style:normal;transform:translateX(-50%)}
.ac-ticks i:nth-child(1){left:0;transform:none}.ac-ticks i:nth-child(2){left:40%}
.ac-ticks i:nth-child(3){left:60%}.ac-ticks i:nth-child(4){left:80%}
.ac-ticks i:nth-child(5){left:100%;transform:translateX(-100%)}

.ac-ratios{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ac-ratio{border:1.5px solid var(--line);border-radius:14px;padding:16px 18px}
.ac-ratio .top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.ac-ratio .name{font-size:.95rem;font-weight:700;color:var(--ink);margin:0}
.ac-ratio .val{font-size:1.5rem;font-weight:800;color:var(--blue);line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap}
.ac-pill{display:inline-block;border-radius:var(--r-pill);padding:3px 10px;font-size:.72rem;font-weight:700;letter-spacing:.02em}
.p-bad{background:#FDE8DD;color:#B23A0A}.p-warn{background:#FFF3D6;color:#8A5A00}
.p-ok{background:#E7F1FF;color:#0B4EA8}.p-great{background:#E3F7EC;color:#0B6B3A}
.ac-ratio .target{color:var(--muted);font-size:.78rem;margin:6px 0 0}
.ac-ratio .act{color:var(--ink-3);font-size:.85rem;margin:10px 0 0;padding-top:10px;border-top:1px dashed var(--line)}

.ac-sheet{background:var(--blue-1);border-radius:var(--r-card);padding:24px}
.ac-sheet h3{font-size:1rem;font-weight:700;color:var(--navy);margin:0 0 12px}
.ac-sheet h3+h3{margin-top:22px}
.ac-line{display:flex;justify-content:space-between;gap:12px;padding:4px 0;font-size:.9rem;color:var(--ink-3)}
.ac-line .v{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.ac-line.sub{padding-left:14px;font-size:.85rem}
.ac-total{display:flex;justify-content:space-between;align-items:center;gap:12px;background:#FFF;border-radius:12px;padding:14px 18px;margin-top:10px;box-shadow:0 2px 8px rgba(1,46,110,.06)}
.ac-total .l{color:var(--navy);font-weight:700;font-size:.95rem}
.ac-total .l small{display:block;color:var(--muted);font-weight:400;font-size:.78rem}
.ac-total .v{color:var(--blue);font-weight:800;font-size:1.2rem;font-variant-numeric:tabular-nums}
.ac-total .v.neg{color:#B23A0A}

.ac-cmp-row{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) 34px;align-items:center;gap:10px;padding:6px 0;font-size:.85rem;color:var(--ink-3)}
.ac-cmp-row .bar{height:8px;border-radius:4px;background:var(--blue-1);overflow:hidden}
.ac-cmp-row .bar i{display:block;height:100%;background:var(--blue-2);border-radius:4px}
.ac-cmp-row .v{text-align:right;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.ac-cmp-you{background:var(--blue-1);border-radius:10px;padding:10px 12px;margin-top:4px;color:var(--navy);font-weight:700}
.ac-cmp-you .bar{background:#FFF}.ac-cmp-you .bar i{background:var(--amber)}

.ac-next{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.ac-next-card{display:block;background:var(--surface);border-radius:14px;padding:18px 16px;color:var(--ink-3);font-size:.85rem;text-decoration:none;border:1.5px solid transparent;transition:border-color .15s}
.ac-next-card b{display:block;color:var(--navy);font-size:.95rem;margin-bottom:6px}
a.ac-next-card:hover{border-color:var(--blue);text-decoration:none;color:var(--ink-3)}

/* ---- notes (own copy, replaces the source page's guidance block) ---- */
.ac-notes details{border:1.5px solid var(--line);border-radius:14px;margin-bottom:10px;background:#FFF}
.ac-notes summary{padding:16px 20px;font-weight:600;font-size:.95rem;color:var(--ink);cursor:pointer;list-style:none}
.ac-notes summary::-webkit-details-marker{display:none}
.ac-notes summary::after{content:'+';float:right;color:var(--blue);font-size:20px;line-height:1}
.ac-notes details[open] summary::after{content:'\2212'}
.ac-notes summary:focus-visible{outline:2px solid var(--blue);outline-offset:-2px;border-radius:14px}
.ac-notes .body{padding:0 20px 18px;color:var(--ink-3);font-size:.9rem}
.ac-notes .body p{margin-bottom:.6rem}
.ac-notes .body b{color:var(--ink)}
.ac-notes .body ul{padding-left:18px;margin-bottom:.6rem}

@media (max-width:991.98px){
  .ac-card{padding:20px 16px!important;border-radius:16px}
  .ac-ratios{grid-template-columns:1fr}
  .ac-next{grid-template-columns:1fr}
  .ac-progress .lbl{font-size:.72rem}
}
@media (max-width:575.98px){
  .ac-row{grid-template-columns:1fr;gap:6px;padding:10px 0}
  .ac-row label{font-weight:600}
  .ac-chip{flex:1 1 auto;min-height:44px;text-align:left}
  .ac-score{font-size:64px}
  .ac-sheet{padding:18px 16px}
  .ac-actions .btn{width:100%}
  .ac-actions .spacer{display:none}
  .ac-progress .lbl{display:none}
  .ac-progress{gap:6px;margin-bottom:18px}
}
