/* Student calculators (/resources, /resources/calculators/*), ohmyweb 2026-10.
   Everything is scoped under .puc. The site sets html{font-size:62.5%}, so sizes here are in px. */
.puc {
  --puc-navy: #0c2459;
  --puc-navy-deep: #06173f;
  --puc-gold: #efad32;
  --puc-fg: #121b29;
  --puc-muted: #5e6a7b;
  --puc-border: #dce2e9;
  --puc-soft: #f2f7fd;
  --puc-error: #cc272e;
  --puc-shadow: 0 1px 2px rgba(18, 27, 41, .06), 0 8px 24px rgba(18, 27, 41, .08);
  --puc-heading: 'Inter', sans-serif; /* same as the site headings */
  padding: 8px 0 80px;
  color: var(--puc-fg);
}
.puc [hidden] { display: none !important; }
.puc p { font-size: 16px; line-height: 1.6; color: inherit; }
.puc h2, .puc h3 { font-family: var(--puc-heading); color: var(--puc-navy); letter-spacing: -.01em; }

.puc-eyebrow { display: inline-block; background: rgba(239, 173, 50, .2); color: var(--puc-navy) !important; border-radius: 2px; padding: 4px 10px; font-size: 12px !important; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.puc-lead { margin: 12px 0 32px !important; max-width: 680px; color: var(--puc-muted) !important; font-size: 17px !important; }

/* Cards (hub + related) */
.puc-card { display: flex; flex-direction: column; height: 100%; min-height: 224px; padding: 24px; background: #fff; border: 1px solid var(--puc-border); border-radius: 8px; box-shadow: var(--puc-shadow); color: var(--puc-fg); text-decoration: none; transition: border-color .2s; }
.puc-card:hover { border-color: var(--puc-gold); color: var(--puc-fg); }
.puc-card-icon { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 6px; background: rgba(239, 173, 50, .2); color: var(--puc-navy); }
.puc-card h2 { margin-top: 20px; font-size: 20px; font-weight: 700; }
.puc-card p { flex: 1; margin-top: 8px; font-size: 14px; color: var(--puc-muted); }
.puc-more { display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; font-size: 14px; font-weight: 600; color: var(--puc-navy); }
.puc-card:hover .puc-arrow { transform: translateX(4px); }
.puc-arrow { transition: transform .2s; flex-shrink: 0; }
.puc-card-sm { min-height: 0; padding: 20px; }
.puc-card-sm h3 { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; font-size: 16px; font-weight: 600; }

/* Form */
.puc-form { height: 100%; padding: 32px; background: #fff; border: 1px solid var(--puc-border); border-radius: 8px; box-shadow: var(--puc-shadow); }
.puc-form label { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 600; line-height: 1; color: var(--puc-navy); }
.puc-form input, .puc-form select { display: block; width: 100%; height: 48px; padding: 4px 12px; font-size: 16px; color: var(--puc-fg); background: #fff; border: 1px solid var(--puc-border); border-radius: 6px; box-shadow: 0 1px 2px rgba(0, 0, 0, .05); }
.puc-form input::placeholder { color: var(--puc-muted); }
.puc-form input:focus, .puc-form select:focus { outline: none; box-shadow: 0 0 0 1px #102e6a; }
.puc-error { display: flex; gap: 8px; margin-top: 20px !important; padding: 8px 12px; border-radius: 6px; background: rgba(204, 39, 46, .1); color: var(--puc-error) !important; font-size: 14px !important; }
.puc-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.puc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 32px; border-radius: 6px; font-size: 14px; cursor: pointer; transition: background-color .2s; }
.puc-btn-navy { background: var(--puc-navy); color: #fff; border: 0; font-weight: 600; box-shadow: 0 1px 2px rgba(0, 0, 0, .1); }
.puc-btn-navy:hover { background: var(--puc-navy-deep); }
.puc-btn-outline { background: #fff; color: var(--puc-fg); border: 1px solid var(--puc-border); font-weight: 500; }
.puc-btn-outline:hover { background: var(--puc-gold); color: #1a2550; }

/* Result panel */
.puc-empty { display: flex; flex-direction: column; justify-content: center; height: 100%; min-height: 256px; padding: 24px; text-align: center; border: 1px dashed var(--puc-border); border-radius: 8px; background: var(--puc-soft); }
.puc-empty svg { margin: 0 auto; color: rgba(12, 36, 89, .4); }
.puc-empty p { font-size: 14px; color: var(--puc-muted); }
.puc-empty .puc-empty-title { margin-top: 12px; font-family: var(--puc-heading); font-size: 18px; font-weight: 600; color: var(--puc-navy); }
.puc-result { height: 100%; min-height: 256px; padding: 32px; border-radius: 8px; color: #f9fcff; background: linear-gradient(135deg, #112a5f, #203f7c); box-shadow: var(--puc-shadow); container-type: inline-size; }
.puc-result p, .puc-result dt, .puc-result dd { color: inherit; margin: 0; }
.puc-result-label { font-size: 14px !important; letter-spacing: .16em; text-transform: uppercase; color: var(--puc-gold) !important; }
.puc-result-value { margin-top: 8px !important; font-family: var(--puc-heading); font-size: clamp(28px, 11cqi, 48px) !important; font-weight: 700; line-height: 1.2 !important; }
.puc-result-big { font-size: clamp(40px, 15cqi, 60px) !important; }
.puc-result-formula, .puc-result-rows { margin: 24px 0 0; padding-top: 20px; border-top: 1px solid rgba(249, 252, 255, .2); }
.puc-result-k { font-size: 12px !important; text-transform: uppercase; opacity: .6; }
.puc-result-formula p:last-child { margin-top: 4px; font-weight: 600; }
.puc-result-rows div { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 8px; font-size: 14px; }
.puc-result-rows dt { font-weight: 400; opacity: .7; }
.puc-result-rows dd { font-weight: 600; text-align: right; }
.puc-result-detail { margin-top: 20px !important; font-size: 14px !important; opacity: .8; }
.puc-result-note { margin-top: 24px !important; font-size: 12px !important; opacity: .65; }

/* Copy + related */
.puc-copy { max-width: 760px; margin-top: 64px; }
.puc-copy h2 { font-size: 24px; font-weight: 700; }
.puc-copy p { margin-top: 12px; color: rgba(18, 27, 41, .8); }
.puc-related { margin-top: 64px; }
.puc-related-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.puc-related-head h2 { font-size: 24px; font-weight: 700; }
.puc-related-head a { font-size: 14px; font-weight: 600; color: var(--puc-navy); }
.puc-related-head a:hover { color: var(--puc-gold); }

/* Icons */
.puc-i16 { width: 16px; height: 16px; flex-shrink: 0; }
.puc-i20 { width: 20px; height: 20px; }
.puc-i24 { width: 24px; height: 24px; }
.puc-i32 { width: 32px; height: 32px; }
.puc-gold { color: var(--puc-gold); }

@media (max-width: 575px) {
  .puc-form, .puc-result { padding: 24px; }
  .puc-btn { width: 100%; }
}