/* PCH Calculators.
   Inherits the active theme's tokens where they exist, and falls back to its
   own palette so the widget still looks right in any other theme. */

.pch{
  --c-bd:var(--line,#e2e2e6);
  --c-bg:var(--surface,#fff);
  --c-soft:var(--sunken,#f4f4f6);
  --c-tx:var(--tx,#18181b);
  --c-dim:var(--tx-dim,#52525b);
  --c-mut:var(--tx-mute,#71717a);
  --c-a1:var(--brand-1,#625fff);
  --c-a2:var(--brand-2,#ac4bff);
  --c-ok:var(--green,#00bb7f);
  --c-warn:var(--amber,#c2740c);
  --c-bad:var(--red,#d4351c);
  --c-on:var(--on-brand,#fff);
  --c-r:var(--r-md,14px);
  --c-rl:var(--r-lg,22px);

  position:relative;
  border:1px solid var(--c-bd);
  border-radius:var(--c-rl);
  background:var(--c-bg);
  color:var(--c-tx);
  padding:26px;
  margin:30px 0;
  font-size:16px;
  line-height:1.55;
  font-family:inherit;
  box-shadow:var(--shadow-sm,0 1px 3px rgba(24,24,27,.06));
  overflow:hidden;
}
.pch::before{
  content:"";position:absolute;inset:0 0 auto;height:3px;
  background:linear-gradient(90deg,var(--c-a1),var(--c-a2),var(--c-a1));
}
.pch *,.pch *::before,.pch *::after{box-sizing:border-box}
.pch [hidden]{display:none!important}

@media (prefers-color-scheme:dark){
  .pch:not([data-pch-theme="light"]){
    --c-bd:var(--line,#27272a); --c-bg:var(--surface,#18181b); --c-soft:var(--sunken,#121215);
    --c-tx:var(--tx,#fafafa); --c-dim:var(--tx-dim,#c4c4cc); --c-mut:var(--tx-mute,#a1a1aa);
    --c-a1:var(--brand-1,#8b88ff); --c-a2:var(--brand-2,#c37cff);
    --c-ok:var(--green,#31d9a0); --c-warn:var(--amber,#e5a640); --c-bad:var(--red,#ff7a68);
    --c-on:var(--on-brand,#0b0b0f);
  }
}
.pch[data-pch-theme="dark"]{
  --c-bd:#27272a; --c-bg:#18181b; --c-soft:#121215;
  --c-tx:#fafafa; --c-dim:#c4c4cc; --c-mut:#a1a1aa;
  --c-a1:#8b88ff; --c-a2:#c37cff; --c-ok:#31d9a0; --c-warn:#e5a640; --c-bad:#ff7a68;
  --c-on:#0b0b0f;
}

.pch__title{font-size:13px;font-weight:600;margin:0 0 18px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--c-mut);font-family:inherit}

/* ---- segmented mode switch ---- */
.pch__tabs{display:inline-flex;flex-wrap:wrap;gap:8px;margin-bottom:20px;padding:3px;
  background:var(--c-soft);border:1px solid var(--c-bd);border-radius:999px;max-width:100%}
.pch__tab{appearance:none;min-height:44px;border:0;background:none;color:var(--c-mut);
  padding:8px 16px;border-radius:999px;font-size:13.5px;font-weight:600;cursor:pointer;
  font-family:inherit;line-height:1.25;white-space:nowrap}
.pch__tab:hover{color:var(--c-tx)}
.pch__tab[aria-selected="true"]{background:var(--c-bg);color:var(--c-tx);
  box-shadow:0 1px 3px rgba(0,0,0,.14)}
.pch__tab:focus-visible{outline:2px solid var(--c-a1);outline-offset:1px}

/* ---- fields ---- */
.pch__grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(165px,1fr))}
.pch__grid+.pch__grid{margin-top:16px}
.pch__field{display:flex;flex-direction:column;gap:6px;min-width:0}
.pch__label{font-size:13px;font-weight:600;color:var(--c-mut)}
.pch__input,.pch__select{
  width:100%;padding:12px 14px;border:1px solid var(--line-strong,var(--c-bd));border-radius:var(--c-r);
  background:var(--c-soft);color:var(--c-tx);font-size:16px;font-family:inherit;
  line-height:1.3;-moz-appearance:textfield;font-variant-numeric:tabular-nums}
.pch__input:hover,.pch__select:hover{border-color:color-mix(in srgb,var(--c-a1) 40%,var(--c-bd))}
.pch__input:focus,.pch__select:focus{outline:0;border-color:var(--c-a1);background:var(--c-bg);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--c-a1) 22%,transparent)}
.pch__input::-webkit-outer-spin-button,.pch__input::-webkit-inner-spin-button{
  -webkit-appearance:none;margin:0}
.pch__hint{font-size:12px;color:var(--c-mut);line-height:1.45}

/* ---- buttons ---- */
.pch__actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.pch__btn{appearance:none;min-height:44px;border:1px solid transparent;cursor:pointer;font-family:inherit;
  background:linear-gradient(120deg,var(--c-a1),var(--c-a2));color:var(--c-on);
  padding:11px 22px;border-radius:999px;font-size:14.5px;font-weight:650;line-height:1.25}
.pch__btn:hover{filter:brightness(1.08)}
.pch__btn--ghost{background:none;color:var(--c-mut);border-color:var(--c-bd)}
.pch__btn--ghost:hover{color:var(--c-tx);border-color:var(--c-a1);filter:none}
.pch__btn:focus-visible{outline:2px solid var(--c-a1);outline-offset:2px}

/* ---- result ---- */
.pch__out{margin-top:22px;padding:24px;border-radius:var(--c-rl);
  background:
    radial-gradient(120% 140% at 0% 0%,color-mix(in srgb,var(--c-a1) 11%,transparent),transparent 62%),
    var(--c-soft);
  border:1px solid var(--c-bd)}
.pch__big{font-size:clamp(30px,6vw,42px);font-weight:750;letter-spacing:-.035em;
  color:var(--c-tx);line-height:1.08;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.pch__sub{font-size:14.5px;color:var(--c-mut);margin-top:8px;line-height:1.5}
.pch__stats{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));
  margin:20px 0 0}
.pch__stat{background:var(--c-bg);border:1px solid var(--c-bd);border-radius:var(--c-r);padding:13px 15px}
.pch__stat dt{font-size:11px;color:var(--c-mut);margin:0 0 4px;font-weight:600;
  letter-spacing:.07em;text-transform:uppercase}
.pch__stat dd{font-size:19px;font-weight:700;margin:0;color:var(--c-tx);
  overflow-wrap:anywhere;font-variant-numeric:tabular-nums;letter-spacing:-.015em}
.pch__err{color:var(--c-bad);font-size:14px;font-weight:600;margin-top:10px;line-height:1.5}
.pch__err:empty{margin:0}
.pch--ok{color:var(--c-ok)} .pch--warn{color:var(--c-warn)} .pch--bad{color:var(--c-bad)}
[data-out="cat"]{font-weight:700}

/* ---- repeating rows ---- */
.pch__list{display:flex;flex-direction:column;gap:10px;margin:0}
.pch__item{display:grid;gap:9px;grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr) auto;
  align-items:center}
.pch__del{appearance:none;border:1px solid var(--c-bd);background:none;color:var(--c-mut);
  width:44px;height:44px;border-radius:var(--c-r);cursor:pointer;font-size:18px;line-height:1;
  font-family:inherit;flex:none}
.pch__del:hover{color:var(--c-bad);border-color:var(--c-bad)}
@media (max-width:560px){
  .pch__item{grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto}
  .pch__item .pch__item-name{grid-column:1/-1}
}

/* ---- schedule table ---- */
.pch__tablewrap{overflow-x:auto;margin-top:20px;border:1px solid var(--c-bd);
  border-radius:var(--c-r);-webkit-overflow-scrolling:touch}
.pch__table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:480px;
  font-variant-numeric:tabular-nums}
.pch__table th,.pch__table td{padding:11px 14px;text-align:right;
  border-bottom:1px solid var(--c-bd);white-space:nowrap}
.pch__table th{color:var(--c-mut);font-weight:600;font-size:11px;background:var(--c-soft);
  text-transform:uppercase;letter-spacing:.07em}
.pch__table th:first-child,.pch__table td:first-child{text-align:left}
.pch__table tbody tr:last-child td{border-bottom:0}
.pch__table td{color:var(--c-dim)}
.pch__table td:first-child{color:var(--c-mut);font-family:var(--mono,ui-monospace,monospace);font-size:12px}

.pch__vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

@media (prefers-reduced-motion:no-preference){
  .pch__btn,.pch__tab,.pch__input,.pch__select,.pch__del{
    transition:background-color .15s,border-color .15s,color .15s,box-shadow .15s}
}
@media (max-width:600px){ .pch{padding:20px} .pch__out{padding:20px} }

/* ---- trust line + sources ---- */
.pch__trust{margin:-6px 0 18px;font-size:13px;line-height:1.6;color:var(--c-mut)}
.pch__trust strong{color:var(--c-dim);font-weight:600}
.pch__trust a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.pch__trust-item{display:inline}
.pch__sources{margin-top:22px;padding-top:16px;border-top:1px solid var(--c-bd)}
.pch__sources-title{font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--c-mut);margin:0 0 8px}
.pch__sources ul{margin:0;padding-left:18px;font-size:13.5px;line-height:1.6}
.pch__sources li{margin:3px 0;color:var(--c-dim)}
.pch__sources a{color:var(--c-a1);text-decoration:none}
.pch__sources a:hover{text-decoration:underline}
.pch__sources .pch__note{margin-top:12px;padding-top:0;border-top:0}

/* ---- calculator card grid (home page) ---- */
.pch-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));margin:24px 0}
.pch-card{
  --c-bd:var(--line,#e2e2e6);--c-bg:var(--surface,#fff);--c-tx:var(--tx,#18181b);
  --c-mut:var(--tx-mute,#71717a);--c-a1:var(--brand-1,#625fff);--c-rl:var(--r-lg,22px);
  display:flex;flex-direction:column;gap:8px;padding:20px;min-height:44px;
  background:var(--c-bg);border:1px solid var(--c-bd);border-radius:var(--c-rl);
  color:var(--c-tx);text-decoration:none;position:relative;overflow:hidden}
.pch-card:hover{border-color:var(--c-a1)}
.pch-card:focus-visible{outline:2px solid var(--c-a1);outline-offset:2px}
.pch-card__icon{color:var(--c-a1);display:inline-flex;width:40px;height:40px;align-items:center;
  justify-content:center;border-radius:10px;background:color-mix(in srgb,var(--c-a1) 12%,transparent)}
.pch-card__title{font-weight:700;font-size:16.5px;letter-spacing:-.01em;line-height:1.3}
.pch-card__desc{font-size:14px;line-height:1.5;color:var(--c-mut)}
@media (prefers-reduced-motion:no-preference){
  .pch-card{transition:border-color .2s,transform .2s}
  .pch-card:hover{transform:translateY(-2px)}
}

/* ---- ad slot: reserved height so it never shifts layout ---- */
.pch-ad{margin:28px 0;min-height:280px;display:flex;align-items:center;justify-content:center;
  background:var(--sunken,#f4f4f6);border-radius:var(--r-md,14px)}
.pch-ad--top,.pch-ad--bottom{min-height:250px}
.pch-ad ins{width:100%}
@media (max-width:600px){ .pch-ad{min-height:250px} }

/* ---- touch: no 300ms delay, press feedback (instant; transition gated above) ---- */
.pch__btn,.pch__tab,.pch__del,.pch__input,.pch__select,.pch-card{touch-action:manipulation}
.pch__btn:active,.pch__del:active,.pch-card:active{transform:scale(.98)}
.pch__tab:active{transform:scale(.97)}

/* ---- article data tables (server-rendered reference data) ---- */
.pch-data{margin:24px 0;overflow-x:auto;border:1px solid var(--line,#e2e2e6);
  border-radius:var(--r-md,14px);background:var(--surface,#fff);-webkit-overflow-scrolling:touch}
.pch-data table{width:100%;border-collapse:collapse;font-size:14px;margin:0;
  font-variant-numeric:tabular-nums}
.pch-data caption{caption-side:top;text-align:left;padding:12px 14px 10px;font-size:13px;
  color:var(--tx-dim,#52525b);border-bottom:1px solid var(--line,#e2e2e6)}
.pch-data th,.pch-data td{padding:10px 14px;text-align:right;white-space:nowrap;
  border-bottom:1px solid var(--line,#e2e2e6)}
.pch-data thead th{color:var(--tx-mute,#71717a);font-weight:600;font-size:11px;
  background:var(--sunken,#f4f4f6);text-transform:uppercase;letter-spacing:.07em}
.pch-data th:first-child,.pch-data td:first-child{text-align:left}
.pch-data tbody th{font-weight:600;color:var(--tx,#18181b);font-size:14px;text-transform:none;letter-spacing:0}
.pch-data td{color:var(--tx-dim,#52525b)}
.pch-data tbody tr:last-child th,.pch-data tbody tr:last-child td{border-bottom:0}