/* ============================================================
   LUMIOTAX — App hub + shared tool-page layout
   ============================================================ */
.app-head { padding-top: var(--sp-8); padding-bottom: var(--sp-5); }
.app-search { margin-top: var(--sp-5); max-width: 420px; }

.hub-cat { margin-top: var(--sp-7); }
.hub-cat h3 { font-family: var(--font-sans); font-weight: 650; font-size: var(--fs-lg); display: flex; align-items: center; gap: var(--sp-3); }
.hub-cat h3 .count { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-faint); background: var(--surface-2); border: 1px solid var(--border); padding: .1rem .5rem; border-radius: var(--r-pill); }
.hub-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); margin-top: var(--sp-4); }
.hub-card { position: relative; }
.hub-card.soon { opacity: .62; pointer-events: none; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.status-dot.live { background: var(--good); box-shadow: 0 0 0 3px var(--good-bg); }
.status-dot.soon { background: var(--warn); box-shadow: 0 0 0 3px var(--warn-bg); }

/* ---------- Shared tool page ----------
   The tool itself is the protagonist, not the title/blurb above it --
   keep the header compact so the actual dropzone/form is visible without
   scrolling. Applies site-wide: every tool page shares this one block. */
.tool-page { padding: var(--sp-5) 0 var(--sp-9); }
.tool-header { margin-bottom: var(--sp-3); }
.tool-header .crumb { font-size: var(--fs-xs); color: var(--text-faint); }
.tool-header .crumb a:hover { color: var(--jade-700); }
.tool-header h1 { font-size: clamp(1.3rem, 2vw, 1.6rem); margin-top: .25rem; line-height: 1.2; }
.tool-header p { margin-top: .3rem; max-width: 62ch; font-size: var(--fs-xs); color: var(--text-faint); line-height: 1.4; }
.tool-header .flex[style*="margin-top:1rem"] { margin-top: .5rem !important; }

.tool-layout { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--sp-6); align-items: start; }
.tool-form .field { margin-bottom: var(--sp-4); }
.tool-form .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.tool-actions { display: flex; gap: var(--sp-3); margin-top: var(--sp-5); }

.tool-result { position: sticky; top: calc(var(--nav-h) + 1rem); }

.section-label { font-family: var(--font-mono); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .12em; color: var(--text-faint); margin: var(--sp-5) 0 var(--sp-2); }

@media (max-width: 920px) {
  .hub-grid { grid-template-columns: 1fr; }
  .tool-layout { grid-template-columns: 1fr; }
  .tool-result { position: static; }
}
@media (min-width: 921px) and (max-width: 1100px) { .hub-grid { grid-template-columns: repeat(2, 1fr); } }