/* SuccessBeacon — calculator components (German grade calculator and the Italy tools).
   Loaded only on those pages; tokens come from style.css. */

/* ---------- 30. Free tools: German grade calculator (gc-) ---------- */
.gc-layout { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: clamp(1.25rem, 3vw, 2rem); align-items: start; }
.gc-inputs { display: grid; gap: 1.25rem; min-width: 0; }
.gc-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(1.15rem, 2.6vw, 1.9rem); min-width: 0; }
.gc-step { display: flex; align-items: center; gap: .7rem; font-size: 1.05rem; font-weight: 680; color: var(--ink); margin-bottom: 1.1rem; }
.gc-step__n { flex: 0 0 auto; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--petrol-700); color: var(--white); font-size: .8rem; font-weight: 700; }
.gc-presets { display: flex; flex-wrap: wrap; gap: .5rem; border: 0; padding: 0; margin: 0 0 1rem; }
.gc-presets legend { padding: 0; }
.gc-preset { position: relative; }
.gc-preset input { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; }
.gc-preset span { display: inline-flex; align-items: center; padding: .6rem 1.05rem; border: 1.5px solid var(--line); border-radius: var(--radius-pill); background: var(--mist); font-size: .9rem; font-weight: 580; color: var(--body); transition: background .2s, color .2s, border-color .2s; }
.gc-preset:hover span { border-color: var(--petrol-700); color: var(--ink); }
.gc-preset input:checked + span { background: var(--petrol-700); border-color: var(--petrol-700); color: #fff; }
.gc-preset input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.gc-hint { font-size: .86rem; color: var(--muted); margin: 0 0 1rem; }
.gc-error { background: #fdecec; color: #9b2226; border: 1px solid #f5c2c2; border-radius: var(--radius-sm); padding: .6rem .85rem; font-size: .86rem; margin: 0 0 1rem; }
.gc-error[hidden] { display: none; }
.gc-card .field input[aria-invalid="true"] { border-color: #c0392b; background: #fff7f6; }
.gc-card .field input { font-variant-numeric: tabular-nums; }
.gc-field-note { display: block; font-size: .78rem; color: var(--muted); margin-top: .3rem; }
.gc-tabs { display: flex; gap: .25rem; padding: .3rem; background: var(--mist); border: 1px solid var(--line); border-radius: var(--radius-pill); margin-bottom: 1.25rem; }
.gc-tab { flex: 1 1 0; min-width: 0; padding: .65rem .5rem; border-radius: var(--radius-pill); font-size: .88rem; font-weight: 600; color: var(--body); text-align: center; transition: background .2s, color .2s, box-shadow .2s; }
.gc-tab:hover { color: var(--ink); }
.gc-tab[aria-selected="true"] { background: var(--petrol-700); color: #fff; box-shadow: var(--shadow-sm); }
.gc-tab:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
.gc-panel[hidden] { display: none; }
.gc-rows-head, .gc-row { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, .8fr) minmax(0, .7fr) 3.1rem 2rem; gap: .5rem; align-items: center; }
.gc-rows-head { font-size: .74rem; font-weight: 600; color: var(--muted); margin-bottom: .4rem; }
.gc-rows-head span:nth-child(4) { text-align: center; }
.gc-rows { display: grid; gap: .5rem; }
.gc-row input { width: 100%; min-width: 0; padding: .7rem; border: 1.5px solid var(--line); border-radius: var(--radius-sm); background: var(--mist); transition: border-color .2s, box-shadow .2s, background .2s; font-variant-numeric: tabular-nums; }
.gc-row input:focus { outline: none; background: var(--white); border-color: var(--petrol-700); box-shadow: 0 0 0 4px rgba(69, 188, 205, .22); }
.gc-row input[aria-invalid="true"] { border-color: #c0392b; background: #fff7f6; }
.gc-row__g { display: grid; place-items: center; height: 2.2rem; border-radius: 8px; background: var(--brand-tint); color: var(--petrol-700); font-size: .86rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.gc-row__g[data-key="excellent"], .gc-row__g[data-key="good"] { background: #e3f5f1; color: #1b6a5e; }
.gc-row__g[data-key="pass"] { background: #fff3d6; color: #8a5a00; }
.gc-row__g[data-key="fail"] { background: #fdecec; color: #9b2226; }
.gc-row__del { width: 2rem; height: 2rem; border-radius: 50%; color: var(--muted); font-size: 1.25rem; line-height: 1; transition: background .2s, color .2s; }
.gc-row__del:hover { background: #fdecec; color: #9b2226; }
.gc-row-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }
.gc-link-btn { display: inline-flex; align-items: center; gap: .4rem; padding: .55rem .95rem; border: 1.5px dashed var(--brand-light); border-radius: var(--radius-pill); color: var(--petrol-700); font-size: .86rem; font-weight: 600; transition: background .2s, border-color .2s; }
.gc-link-btn:hover { background: var(--brand-tint); border-color: var(--petrol-700); }
.gc-target-row { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .6rem; }
.gc-chip { min-width: 3.1rem; padding: .45rem .75rem; border: 1.5px solid var(--line); border-radius: var(--radius-pill); background: var(--mist); color: var(--body); font-size: .86rem; font-weight: 600; font-variant-numeric: tabular-nums; transition: background .2s, color .2s, border-color .2s; }
.gc-chip:hover { background: var(--aqua-100); color: var(--ink); border-color: var(--aqua-400); }
.gc-plan-title { font-size: .88rem; font-weight: 680; color: var(--ink); margin: 1.4rem 0 .6rem; }
.gc-plan { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.6rem, 1fr)); gap: .5rem; }
.gc-plan li { display: grid; gap: .1rem; justify-items: center; padding: .55rem .4rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--mist); }
.gc-plan__g { font-size: .74rem; font-weight: 600; color: var(--muted); }
.gc-plan__n { font-size: 1rem; font-weight: 720; color: var(--petrol-700); font-variant-numeric: tabular-nums; }
.gc-calc-btn { width: 100%; margin-top: 1.1rem; }
.gc-out { position: sticky; top: calc(var(--nav-h) + 1.25rem); background: radial-gradient(120% 120% at 100% 0%, #15495a, var(--petrol-900) 60%); color: #fff; border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); padding: clamp(1.4rem, 3vw, 2.2rem); overflow: hidden; min-width: 0; isolation: isolate; }
.gc-out > * { position: relative; z-index: 1; }
.gc-out__label { font-size: .8rem; font-weight: 600; color: var(--on-dark-3); }
.gc-out__figure { display: flex; align-items: baseline; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
.gc-out__value { font-size: clamp(3.6rem, 9vw, 5.4rem); font-weight: 720; line-height: 1; letter-spacing: -.045em; color: #fff; font-variant-numeric: tabular-nums; }
.gc-out__unit { font-size: 1.3rem; font-weight: 650; color: var(--aqua-300); }
.gc-out__sub { margin-top: .5rem; font-size: .86rem; color: var(--on-dark-2); min-height: 1.3em; }
.gc-out__chip { display: inline-flex; flex-wrap: wrap; gap: .25rem; margin-top: .9rem; padding: .4rem .85rem; border-radius: var(--radius-pill); background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .2); font-size: .86rem; color: #eaf5f4; }
.gc-out__chip:empty { display: none; }
.gc-out__chip strong { color: #fff; }
.gc-out[data-band="pass"] .gc-out__chip { background: rgba(201, 162, 76, .2); border-color: rgba(201, 162, 76, .55); }
.gc-out[data-band="fail"] .gc-out__chip { background: rgba(220, 70, 70, .22); border-color: rgba(255, 140, 140, .5); }
.gc-out__error { margin-top: 1rem; padding: .75rem .9rem; border-radius: var(--radius-sm); background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .2); font-size: .9rem; color: #eaf5f4; }
.gc-out__error[hidden], .gc-out__body[hidden] { display: none; }
.gc-out.is-empty .gc-out__value { color: rgba(255, 255, 255, .5); }
.gc-meter { margin-top: 1.4rem; }
.gc-meter__track { position: relative; height: 10px; border-radius: 999px; background: linear-gradient(90deg, #c4eef3 0 16.67%, #8fd8e2 16.67% 50%, #45bccd 50% 83.33%, var(--gold) 83.33% 100%); }
.gc-meter__marker { position: absolute; top: 50%; left: 0; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: var(--white); border: 4px solid var(--petrol-900); box-shadow: 0 0 0 2px #fff, 0 4px 10px rgba(0, 0, 0, .35); transition: left .5s var(--ease); }
.gc-meter__ticks, .gc-meter__ends { display: flex; justify-content: space-between; font-size: .74rem; color: var(--on-dark-3); font-variant-numeric: tabular-nums; }
.gc-meter__ticks { margin-top: .6rem; }
.gc-meter__ends { margin-top: .1rem; font-size: .72rem; }
.gc-working { display: grid; gap: .35rem; margin-top: 1.4rem; padding: 1rem 1.1rem; border-radius: var(--radius); background: rgba(0, 0, 0, .22); border: 1px solid rgba(255, 255, 255, .12); font-size: .84rem; color: #d5e8eb; font-variant-numeric: tabular-nums; }
.gc-working li { overflow-wrap: anywhere; }
.gc-working li:last-child { margin-top: .25rem; padding-top: .55rem; border-top: 1px solid rgba(255, 255, 255, .14); color: #fff; }
.gc-working span { color: var(--on-dark-3); margin-right: .2rem; }
.gc-working b { color: #fff; }
.gc-working li:last-child b { color: var(--aqua-300); }
.gc-tip { margin-top: 1.1rem; font-size: .9rem; color: var(--on-dark-2); }
.gc-tip-note { margin-top: .5rem; font-size: .76rem; color: var(--on-dark-3); }
.gc-out__actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.35rem; }
.gc-out__actions .btn { padding: .65rem 1.1rem; font-size: .86rem; min-height: 2.6rem; }
.gc-out__actions .btn[disabled], .gc-out__actions .btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }
.gc-out__cta { margin-top: .85rem; }
.gc-out__cta .btn { width: 100%; }
.gc-formula { margin-top: 1.25rem; padding: 1.25rem 1.4rem; border-radius: var(--radius); background: var(--petrol-900); color: var(--white); font-size: clamp(1rem, 2.2vw, 1.3rem); font-weight: 650; text-align: center; overflow-wrap: anywhere; }
.gc-vars { display: grid; gap: .6rem; margin-top: 1rem; }
.gc-vars li { padding-left: 0 !important; font-size: .97rem; }
.gc-vars li::before { display: none !important; }
.gc-vars b { color: var(--petrol-700); }
.gc-grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr)); gap: 1.25rem; align-items: start; }
.gc-chart h3 { font-size: 1.05rem; margin: 0 0 .6rem; }
.gc-chart .table-scroll table { min-width: 0; }
.gc-chart .table-scroll thead th { padding: .65rem .7rem; font-size: .76rem; }
.gc-chart .table-scroll tbody td { padding: .55rem .7rem; font-size: .88rem; font-variant-numeric: tabular-nums; }
.gc-chart .table-scroll td:nth-child(2) { font-weight: 700; color: var(--petrol-700); }
.gc-chart details { margin-top: .75rem; }
.gc-chart summary { cursor: pointer; font-size: .88rem; font-weight: 600; color: var(--petrol-700); padding: .35rem 0; }
.gc-chart details[open] summary { margin-bottom: .6rem; }
.gc-chart .gc-chart__scroll { max-height: 24rem; overflow-y: auto; border-radius: var(--radius); }
.gc-chart__note { font-size: .82rem; color: var(--muted); margin-top: .6rem; }
.gc-bands td:first-child { white-space: nowrap; font-weight: 700; color: var(--ink); }
.gc-bands .table-scroll table { min-width: 560px; }
@media (max-width: 960px) { .gc-layout { grid-template-columns: minmax(0, 1fr); } .gc-out { position: relative; top: auto; } }
@media (max-width: 480px) {
  .gc-tab { font-size: .78rem; padding: .6rem .3rem; }
  .gc-rows-head, .gc-row { grid-template-columns: minmax(0, 1.3fr) minmax(0, .85fr) minmax(0, .75fr) 2.6rem 1.7rem; gap: .35rem; }
  .gc-row input { padding: .6rem .5rem; font-size: .9rem; }
}
.tool-page .section--alt { background: var(--white); }
.tool-page .prose { max-width: 60rem; }
.tool-page .section-head h2 { font-size: clamp(1.9rem, 1.3rem + 2.2vw, 3.1rem); }