/* Layout for the interactive calculators under /orodja/* (loaded after /hub.css).
   Presentation only; every colour comes from the hub.css tokens. */
.jf-crumb { font-size: .875rem; color: hsl(var(--muted-foreground)); margin-bottom: 8px; }
.jf-crumb a { color: hsl(var(--accent)); }
.jf-card { margin: 0 0 8px; }
.jf-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 14px; }
.jf-grid > div[hidden], [hidden] { display: none !important; }
.jf-hint { font-size: .8rem; color: hsl(var(--muted-foreground)); margin-top: 4px; }
.jf-mb { margin-bottom: 14px; }
.jf-checks { margin-top: 14px; display: grid; gap: 8px; }
.jf-check { display: flex; gap: 8px; align-items: center; font-weight: 500; text-transform: none; letter-spacing: 0; font-size: .95rem; }
.jf-check input, .jf-seg input { width: auto; flex: none; }
.jf-seg { display: flex; gap: 8px; flex-wrap: wrap; }
.jf-seg label { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 9px 12px; border: 1px solid hsl(var(--border)); border-radius: 10px; cursor: pointer; text-transform: none; letter-spacing: 0; font-size: .95rem; }
.jf-res { margin-top: 18px; padding: 18px; border-radius: var(--radius); background: hsl(var(--elevated)); border: 1px solid hsl(var(--border)); }
.jf-big { font-size: clamp(1.7rem, 5vw, 2.5rem); font-weight: 800; line-height: 1.2; color: hsl(var(--foreground)); overflow-wrap: anywhere; }
.jf-rows { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: .95rem; }
.jf-rows td { padding: 7px 0; border-bottom: 1px solid hsl(var(--border)); }
.jf-rows td:last-child { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; padding-left: 12px; }
.jf-note { margin: 12px 0 0; }
.jf-q { padding: 10px 0; border-bottom: 1px solid hsl(var(--border)); }
.jf-qt { font-weight: 600; margin-bottom: 6px; }
.jf-txt { margin: 8px 0 0; }
section.cta { margin: 28px 0; }
section.cta .btn { display: inline-block; margin: 4px 8px 4px 0; }
section.cta .btn.ghost { background: transparent; border: 1px solid hsl(var(--foreground) / .5); color: hsl(var(--foreground)); }
@media (max-width: 560px) { .jf-rows td:last-child { white-space: nowrap; } }