/*
 * IOOI Anbudskollen - procurement search (/upphandlingar). Loaded only on these routes, after styles.css.
 * Uses the landing page tokens (styles.css :root); adds no new colours or fonts.
 */
.search-main h1 { font-size: var(--step-3); max-width: 24ch; }
.search-main section { padding: 2rem 0; }
@media (min-width: 48rem) { .search-main section { padding: 3rem 0; } }
.search-head { background: var(--sheet); border-bottom: 1px solid var(--line); }
.search-head .lead { max-width: 60ch; }

.search-form { display: grid; gap: 1rem; margin-top: 1.5rem; }
@media (min-width: 48rem) {
  .search-form { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; }
  .field-q { grid-column: 1 / -1; }
}
.field { display: grid; gap: 0.35rem; min-width: 0; }
.field label { font-size: var(--step--1); font-weight: 600; color: var(--ink); }
.field input, .field select {
  width: 100%; min-width: 0; font: inherit; color: var(--ink); background: var(--sheet);
  border: 1px solid #9aa7ab; border-radius: 6px; padding: 0.6rem 0.7rem;
}
.field input:focus-visible, .field select:focus-visible { outline: 3px solid var(--petrol); outline-offset: 2px; }
.field-submit { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
@media (min-width: 48rem) { .field-submit { grid-column: 1 / -1; } }
button.button { font: inherit; font-weight: 500; cursor: pointer; }
.search-note { color: var(--muted); font-size: var(--step--1); margin: 1rem 0 0; }

.result-count { font-size: var(--step-1); margin-bottom: 1rem; }
.results { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.result { background: var(--sheet); border: 1px solid var(--line); border-radius: 8px; padding: 1rem 1.1rem; }
.result-meta { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; align-items: center; margin: 0 0 0.4rem;
  color: var(--muted); font-size: var(--step--1); }
.result-meta .tag, .detail .result-meta .tag { background: var(--petrol-soft); color: var(--petrol); }
.result-title { font-size: var(--step-1); margin: 0 0 0.6rem; overflow-wrap: anywhere; }
.result-title a { text-decoration: none; }
.result-title a:hover { text-decoration: underline; }
.result-facts { margin: 0; display: grid; gap: 0.25rem 1.5rem; }
@media (min-width: 40rem) { .result-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.result-facts div { display: flex; flex-wrap: wrap; gap: 0 0.5rem; min-width: 0; }
.result-facts dt { color: var(--muted); }
.result-facts dt::after { content: ":"; }
.result-facts dd { margin: 0; overflow-wrap: anywhere; }
.pager { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1.5rem; }
.source-line { color: var(--muted); font-size: var(--step--1); margin-top: 1.5rem; }

.detail { padding: 1.5rem 0 3rem; }
.detail h1 { font-size: var(--step-2); max-width: none; margin-bottom: 1rem; overflow-wrap: anywhere; }
.crumbs { margin-bottom: 1rem; }
.detail-facts { margin-top: 1.5rem; }
.detail-facts dd, .source-box dd { overflow-wrap: anywhere; }
.bt { font-size: var(--step--1); color: var(--muted); font-weight: 400; }
.fine { display: block; font-size: var(--step--1); color: var(--muted); font-weight: 400; margin-top: 0.2rem; }
.codes { margin: 0; padding-left: 1.1rem; font-weight: 500; }
.detail-desc p { white-space: pre-line; overflow-wrap: anywhere; }
.detail section { padding: 1.5rem 0 0; }
.source-box { margin-top: 2rem; border-top: 3px solid var(--petrol); }
.source-box h2 { font-size: var(--step-1); margin-top: 1rem; }
.source-box code { font-size: var(--step--1); word-break: break-all; }
.source-box details { margin-top: 1rem; }
.source-box summary { cursor: pointer; color: var(--petrol); }
.claims li { max-width: 60ch; }

/*
 * FAS 2B-1 detail page: information states and question sections. Colours are the existing tokens and the values the
 * landing page already uses for its provenance tags (styles.css .prov-*); no new colours or fonts.
 */
.summary-box { background: var(--sheet); border: 1px solid var(--line); border-left: 3px solid var(--petrol);
  padding: 1rem 1.1rem; margin: 1rem 0 0.75rem; }
.summary-box p { margin: 0; max-width: 62ch; }
.summary-box p + p { margin-top: 0.5rem; }
.legend { margin: 0 0 0.5rem; }
.legend summary { cursor: pointer; color: var(--petrol); }
.legend dl { margin: 0.75rem 0 0; display: grid; gap: 0.5rem; }
.legend dl > div { display: grid; gap: 0.25rem; }
@media (min-width: 40rem) { .legend dl > div { grid-template-columns: 12rem 1fr; gap: 1rem; } }
.legend dd { margin: 0; color: var(--ink); }
.legend .note { margin-top: 0.75rem; font-size: var(--step--1); max-width: 62ch; }
.detail section > h2 { font-size: var(--step-1); margin: 0 0 0.75rem; }
.detail h3.sub { font-size: var(--step-0, 1rem); margin: 1.25rem 0 0.5rem; }
.qa > div { align-items: start; }
.qa dd { font-weight: 400; }
.qa dd strong { font-weight: 600; }
.st { margin: 0 0.5rem 0.25rem 0; font-size: 0.8125rem; vertical-align: 0.05em; white-space: nowrap; }
.st-fast { background: var(--petrol-soft); color: var(--petrol); }
.st-forkl { background: #e6f0f3; color: #234b5c; }
.st-kontroll { background: var(--warn-bg); color: var(--warn-ink); }
.st-ej { background: var(--open); color: var(--open-ink); }
.src { display: block; margin-top: 0.25rem; font-size: var(--step--1); color: var(--muted); }
.q { font-family: var(--serif); }
.checklist li { max-width: 62ch; }

/*
 * P4A "Delta i upphandlingen" (iooi.info participation data). Existing tokens and the existing .button styles only;
 * the S2 guide rules (square corners, step colours) govern the future step-by-step guide, not these links.
 */
.participation { border-top: 3px solid var(--petrol); margin-top: 1rem; }
.participation > .note { max-width: 62ch; margin: 0 0 0.75rem; }
.actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.5rem 0 0.25rem; }
.actions .button { overflow-wrap: anywhere; max-width: 100%; }
.actions .host { font-weight: 400; }