/* ============================================================
   Kukaomistaa.fi — additions on top of the lifted
   Stripe-aesthetic styles.css. Only what our live app needs
   that's not in the static design files.
   ============================================================ */

/* Predictive search dropdown */
.predictive-search-box { position: relative; }
.predictive-suggestions {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: 420px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  z-index: 50;
}
.predictive-suggestions[hidden] { display: none; }
.suggest-section-label {
  padding: 10px 16px 4px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dim);
  font-weight: 600;
}
.suggestion-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 16px;
  border: 0;
  background: transparent;
  text-align: left;
  font: inherit;
  cursor: pointer;
  color: var(--ink);
  transition: background .12s;
}
.suggestion-row span { display: flex; flex-direction: column; }
.suggestion-row strong {
  font-size: 13.5px; font-weight: 500;
}
.suggestion-row small {
  font-size: 11.5px; color: var(--dim); margin-top: 1px;
  font-family: var(--mono);
}
.suggestion-row em {
  font-family: var(--mono);
  font-size: 11.5px;
  font-style: normal;
  color: var(--ink-2);
  white-space: nowrap;
  margin-left: 8px;
}
.suggestion-row:hover, .suggestion-row.active { background: var(--bg-2); }

/* Look-through panel on owner pages */
.bo-note {
  background: linear-gradient(135deg, color-mix(in oklab, var(--accent-1) 8%, #fff) 0%, var(--bg-2) 100%);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent-1);
  padding: 16px 20px;
  border-radius: var(--r);
  margin-bottom: 18px;
}
.bo-note-label {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-1);
  font-weight: 600;
}
.bo-note-name {
  margin-top: 6px;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--ink);
}
.bo-note-text {
  font-size: 14px;
  margin: 8px 0 6px;
  color: var(--ink-2);
  line-height: 1.55;
}
.bo-note-cite {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--dim);
  margin-top: 6px;
}
.bo-note-cite a { color: var(--ink-2); border-bottom: 1px solid var(--line); }
.bo-note-cite a:hover { color: var(--accent-1); border-color: var(--accent-1); }

.prh-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 14px 24px;
  padding-top: 14px;
  margin-top: 14px;
  border-top: 1px solid var(--line);
}
.prh-grid .label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 4px;
}
.prh-grid > div > div:not(.label) {
  font-size: 14px;
  color: var(--ink);
}
.prh-grid .mono { font-family: var(--mono); font-size: 13px; }
.prh-span { grid-column: 1 / -1; }

/* Dim text helper (used in many templates) */
.dim { color: var(--dim); }

/* Inline mini-stat card grid used on /omistaja, /yhtio */
.mini-stats { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.mini-stat { padding: 10px 14px; background: var(--bg-2); border-radius: var(--r-sm); }
.mini-stat .mini-value { font-family: var(--mono); font-weight: 600; font-size: 16px; }
.mini-stat .mini-label { font-size: 11px; color: var(--dim); margin-top: 2px; }

/* Pagination */
.pagination {
  display: flex; gap: 12px; align-items: center; justify-content: center;
  padding: 24px 0;
}
.pagination a {
  padding: 8px 14px; border: 1px solid var(--line); border-radius: var(--r-pill);
  font-size: 13px; color: var(--ink); background: #fff;
  transition: border-color .12s, color .12s;
}
.pagination a:hover { border-color: var(--ink); }
.pagination span { font-family: var(--mono); font-size: 12px; color: var(--dim); }

/* Empty-state */
.empty-state {
  padding: 36px 24px; text-align: center; color: var(--dim);
  background: var(--bg-2); border-radius: var(--r); font-size: 14px;
}
.empty-state.compact { padding: 18px; font-size: 13px; }

/* Universal-suggestions wider drop in hero */
.hero-search.predictive-search-box .predictive-suggestions {
  border-radius: var(--r-lg);
}

/* delta helpers (used everywhere) */
.delta-pos { color: var(--pos); }
.delta-neg { color: var(--neg); }

/* Sticky TOC fix — aside must fill the row height so its sticky child can travel */
.split > aside { position: relative; align-self: stretch; }
.split .toc { position: sticky; top: 92px; max-height: calc(100vh - 110px); overflow-y: auto; }

/* On small screens the columns stack, so the section nav becomes a horizontal
   bar pinned below the header. Flex (not grid) is used so the sticky aside's
   containing block is the whole tall .split, letting the bar stay pinned through
   the full scroll instead of unsticking after its own short grid row. */
@media (max-width: 1024px) {
  .split { display: flex; flex-direction: column; align-items: stretch; }
  .split > aside { order: -1; position: sticky; top: 72px; z-index: 30; }
  .split .toc {
    position: static; top: auto; max-height: none; overflow-y: hidden;
    display: flex; align-items: center; gap: 4px;
    overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    padding: 8px 10px;
  }
  .split .toc::-webkit-scrollbar { display: none; }
  .split .toc h4 { display: none; }
  .split .toc a {
    flex: 0 0 auto; margin: 0; white-space: nowrap;
    border-left: 0; border: 1px solid var(--line); border-radius: var(--r-pill);
    padding: 6px 11px; font-size: 12.5px;
  }
  .split .toc a.active { border-color: var(--ink); background: var(--bg-2); color: var(--ink); }
}

/* Brand wordmark — mono shell-prompt treatment */
.brand {
  font-family: var(--mono);
  letter-spacing: 0;
  gap: 8px;
  white-space: nowrap;
  flex-shrink: 0;
}
.brand .prompt {
  color: #0E9F6E;
  font-weight: 700;
}