/* Open Data Recommender — site layout on top of onedaybi-brand.css tokens */

main.odbi-container {
  padding-top: 1.5rem;
  padding-bottom: 3rem;
  min-height: 60vh;
}

/* --- Header: mirrors the main portal's chrome ----------------------------- */
/* Sticky white bar, 64px, hairline bottom border — matching
   OneDayBI.com/src/components/layout/Header.tsx. Values are the shared odbi
   tokens, which already match the portal's Tailwind palette exactly. */
.odr-header {
  position: sticky;
  top: 0;
  z-index: 40;
  width: 100%;
  background: var(--odbi-white);
  border-bottom: 1px solid var(--odbi-light-grey);
}

/* Width follows THIS site's content container, not the portal's 72rem: the
   portal's header is wide because its pages are. Matching its number here would
   leave the brand hanging outside the column of everything below it, which
   reads as sloppier than the small difference in bar width. */
.odr-header-inner {
  max-width: var(--odbi-maxw);
  margin: 0 auto;
  padding: 0 24px;
  min-height: 64px;
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.odr-brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  flex: none;
}

.odr-wordmark {
  font-family: var(--odbi-font-heading);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--odbi-navy-dark);
  letter-spacing: 0.01em;
  white-space: nowrap;
}

/* Which property of the estate you are on. Separated from the brand by a rule
   rather than by wording, so it reads as a section of one site. */
.odr-property {
  font-family: var(--odbi-font-heading);
  font-size: 0.95rem;
  color: var(--odbi-slate-mid);
  text-decoration: none;
  padding-left: 1.25rem;
  border-left: 1px solid var(--odbi-light-grey);
  white-space: nowrap;
}

.odr-property:hover {
  color: var(--odbi-navy-dark);
}

/* Primary nav — the four Personas. Amber underline on hover and on the current
   page, exactly as the portal does it. */
.odr-persona-nav {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-left: auto;
  overflow-x: auto;
}

.odr-persona-nav a {
  font-family: var(--odbi-font-heading);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--odbi-slate);
  text-decoration: none;
  padding: 0.25rem 0;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color 0.2s, border-color 0.2s;
}

.odr-persona-nav a:hover,
.odr-persona-nav a.odr-nav-current {
  color: var(--odbi-navy-dark);
  border-bottom-color: var(--odbi-amber);
}

.odr-nav {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex: none;
}

.odr-nav a {
  color: var(--odbi-slate-mid);
  text-decoration: none;
  font-size: 0.875rem;
}

.odr-nav a:hover {
  color: var(--odbi-navy-dark);
}

/* Below the portal's md breakpoint the bar wraps to two rows and the persona
   nav scrolls sideways. Deliberately not a hamburger: the portal's needs React
   state, and a disclosure that depends on JavaScript would hide the primary nav
   entirely for anyone without it. Nothing here is ever hidden. */
@media (max-width: 800px) {
  .odr-header-inner {
    flex-wrap: wrap;
    padding: 0.5rem 1rem;
    gap: 0.5rem 1rem;
  }

  .odr-persona-nav {
    order: 3;
    width: 100%;
    margin-left: 0;
    gap: 1.1rem;
    padding-bottom: 0.25rem;
  }

  .odr-nav {
    margin-left: auto;
  }
}

.odr-breadcrumb {
  margin: 0.5rem 0 1rem;
}

.odr-breadcrumb a {
  color: var(--odbi-slate-mid);
  text-decoration: none;
}

.odr-summary {
  font-size: 1.15rem;
  color: var(--odbi-slate);
  max-width: 46rem;
}

.odr-facts {
  margin: 1.5rem 0;
  max-width: 46rem;
}

.odr-facts th {
  text-align: left;
  white-space: nowrap;
  width: 10rem;
}

.odr-joinkeys,
.odr-access {
  list-style: none;
  padding: 0;
  max-width: 46rem;
}

.odr-joinkeys li,
.odr-access li {
  padding: 0.6rem 0.8rem;
  border-left: 3px solid var(--odbi-amber);
  background: var(--odbi-white);
  box-shadow: 0 3px 8px rgba(15, 23, 42, 0.1);
  margin-bottom: 0.6rem;
  border-radius: 4px;
}

.odr-technical {
  color: var(--odbi-slate-mid);
}

.odr-dataset-card {
  display: block;
  text-decoration: none;
  color: inherit;
}

.odr-dataset-card h3 {
  margin-top: 0;
  color: var(--odbi-navy);
}

.odr-card-meta {
  color: var(--odbi-slate-mid);
  font-size: 0.85rem;
  margin-bottom: 0;
}

.odr-cta {
  margin-top: 2.5rem;
}

/* Find Relevant Datasets flow — reuses the rounded axis-chip look, no heavy box */
.odr-flow-panel {
  margin: 1.5rem 0 2.5rem;
}
.odr-flow-q {
  margin: 1rem 0 0.6rem;
}
.odr-flow-count {
  color: var(--odbi-slate-mid);
  font-size: 0.95rem;
}
.odr-flow-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0;
}
/* Same pill as .odr-chip, but a button carrying a count */
.odr-flow-option {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.85rem;
  border: 1px solid var(--odbi-light-grey);
  border-radius: 999px;
  background: var(--odbi-white);
  color: var(--odbi-navy);
  font-size: 0.9rem;
  font-family: inherit;
  white-space: nowrap;
  cursor: pointer;
}
.odr-flow-option:hover:not([disabled]) {
  border-color: var(--odbi-amber);
  background: var(--odbi-amber-tint);
}
.odr-flow-option[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}
.odr-flow-n {
  font-size: 0.75rem;
  color: var(--odbi-slate-mid);
}
.odr-flow-trail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.75rem;
}
/* Chosen answers: filled amber pills you can click to undo */
.odr-flow-chip {
  padding: 0.3rem 0.8rem;
  border: 1px solid var(--odbi-amber);
  border-radius: 999px;
  background: var(--odbi-amber-tint);
  color: var(--odbi-navy);
  font-size: 0.9rem;
  cursor: pointer;
}
.odr-flow-reset,
.odr-flow-browse {
  border: none;
  background: none;
  color: var(--odbi-blue);
  text-decoration: underline;
  cursor: pointer;
  font: inherit;
}
.odr-flow-browse {
  display: block;
  margin-top: 1.25rem;
  font-size: 0.9rem;
}
.odr-flow-results {
  margin-top: 1.25rem;
}
.odr-flow-request {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--odbi-light-grey);
}

/* Licence explanation page */
.odr-licence {
  padding-top: 1.5rem;
  border-top: 1px solid #e2e6ea;
  scroll-margin-top: 1rem;
}
.odr-licence-cols {
  gap: 1.5rem;
}
.odr-can li { list-style: "✓  "; }
.odr-must li { list-style: "!  "; }
.odr-licence-help {
  font-size: 0.85rem;
  white-space: nowrap;
}

.odr-cta .odbi-btn {
  margin-top: 0.5rem;
}

section h2 {
  margin-top: 2.2rem;
}

/* Axis navigation chips */
.odr-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0;
}

.odr-chip {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border: 1px solid var(--odbi-light-grey);
  border-radius: 999px;
  background: var(--odbi-white);
  color: var(--odbi-navy);
  text-decoration: none;
  font-size: 0.9rem;
  white-space: nowrap;
}

.odr-chip:hover {
  border-color: var(--odbi-amber);
  background: var(--odbi-amber-tint);
}

.odr-axis-nav h2 {
  margin-bottom: 0.6rem;
}

/* Client-side search (injected by js/search.mjs) */
.odr-search {
  display: block;
  width: 100%;
  max-width: 32rem;
  padding: 0.6rem 0.9rem;
  margin: 0.5rem 0 1rem;
  border: 1px solid var(--odbi-light-grey);
  border-radius: 6px;
  font-family: var(--odbi-font-body);
  font-size: 1rem;
  color: var(--odbi-slate);
}

.odr-search:focus {
  outline: 2px solid var(--odbi-amber);
  border-color: var(--odbi-amber);
}

.odr-search-empty {
  color: var(--odbi-slate-mid);
}

/* Drafts — preview builds only (npm run preview). Deliberately loud: a draft
   must never be mistaken for a live page during review. */
.odr-card-draft {
  border-style: dashed;
  border-color: var(--odbi-amber);
}

.odr-draft-banner {
  border-left: 4px solid var(--odbi-amber);
  background: var(--odbi-amber-tint);
}

/* --- Lead form (Slice 3) -------------------------------------------------- */

.odr-lead-form {
  display: grid;
  gap: 0.35rem;
  max-width: 34rem;
  margin-top: 1rem;
}

.odr-lead-form label {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--odbi-navy);
}

.odr-lead-form .odr-optional {
  font-weight: 400;
  color: var(--odbi-slate-mid);
}

.odr-lead-form input,
.odr-lead-form textarea {
  padding: 0.6rem 0.9rem;
  margin-bottom: 0.6rem;
  border: 1px solid var(--odbi-light-grey);
  border-radius: 6px;
  font-family: var(--odbi-font-body);
  font-size: 1rem;
  color: var(--odbi-slate);
}

.odr-lead-form input:focus,
.odr-lead-form textarea:focus {
  outline: 2px solid var(--odbi-amber);
  border-color: var(--odbi-amber);
}

.odr-lead-form button[type="submit"] {
  justify-self: start;
}

/* THE HONEYPOT. Must stay invisible: if this ever renders visibly, real people
   will fill it in and every one of their enquiries is silently dropped by the
   server. Belt and braces with aria-hidden + tabindex="-1" in the markup. */
.odr-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.odr-form-note {
  font-size: 0.9rem;
  color: var(--odbi-slate-mid);
}

.odr-form-status:empty {
  display: none;
}

.odr-form-status[data-state="error"] {
  padding: 0.6rem 0.9rem;
  border-left: 4px solid var(--odbi-amber);
  background: var(--odbi-amber-tint);
  color: var(--odbi-navy);
}

.odr-form-done {
  padding: 1rem;
  border-left: 4px solid var(--odbi-amber);
  background: var(--odbi-amber-tint);
}

.odr-prose {
  max-width: 42rem;
}

.odr-prose h2 {
  margin-top: 2rem;
}

/* --- Navigation spine toggle (role vs topic) ------------------------------ */
/* A segmented control: two real links that work with no JavaScript. The
   current spine is filled amber so "where am I" is answerable at a glance. */
.odr-view-toggle {
  display: inline-flex;
  border: 1px solid var(--odbi-light-grey);
  border-radius: 999px;
  overflow: hidden;
  margin-right: 1rem;
}

.odr-view-toggle a {
  padding: 0.3rem 0.85rem;
  font-size: 0.85rem;
  font-family: var(--odbi-font-heading);
  color: var(--odbi-slate);
  background: var(--odbi-white);
  text-decoration: none;
  white-space: nowrap;
}

.odr-view-toggle a + a {
  border-left: 1px solid var(--odbi-light-grey);
}

.odr-view-toggle a:hover {
  background: var(--odbi-amber-tint);
}

/* Set by view-toggle.mjs; without JavaScript neither is marked, which is
   correct — the visitor still sees both routes and can take either. */
.odr-view-toggle a.odr-view-current {
  background: var(--odbi-amber);
  color: var(--odbi-navy-dark);
  font-weight: 700;
}

/* The spine you last chose, offered rather than forced: redirecting the front
   page would make it unreachable and break the back button. */
.odr-view-toggle a.odr-view-suggested:not(.odr-view-current) {
  box-shadow: inset 0 -3px 0 var(--odbi-amber);
}

/* --- Persona (role) navigation ------------------------------------------- */
.odr-persona-hero {
  margin-bottom: 2rem;
}

/* The card is an anchor, so unstyled text inside it inherits the link colour —
   which made the description read as a link. Dataset cards avoid this with
   `color: inherit`; role cards need the same. */
.odr-persona-card {
  display: block;
  text-decoration: none;
  color: inherit;
}

.odr-persona-card h2 {
  margin-top: 0;
  color: var(--odbi-navy);
}

.odr-persona-card .odr-persona-question {
  font-family: var(--odbi-font-heading);
  color: var(--odbi-amber-dark);
  font-weight: 700;
  margin: 0.25rem 0 0.5rem;
}

.odr-persona-switch {
  margin: 2rem 0 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--odbi-light-grey);
  color: var(--odbi-slate-mid);
  font-size: 0.9rem;
}

.odr-persona-switch a {
  color: var(--odbi-blue);
}