/*
 * The look of goinfo.co.il/pro - the professional space.
 *
 * /pro is not this site's design. It is the tenders board's: ink on paper
 * (#fbfaf8), one teal accent, and a page built out of cards held by a
 * hairline rule and a very soft shadow rather than by a fill. The archives
 * already live there (/pro/tenders, /pro/protocols) and were deliberately
 * normalised onto that one look; a page that mounts under /pro has to arrive
 * wearing it, or the space stops reading as one product.
 *
 * So this sheet is a port of /pro/tenders/open.html's stylesheet - same
 * tokens, same components (.tiles, .filters, the li card with .row-top /
 * .meta / .pill, the <details class="req"> field grid) - and NOT a layer on
 * top of src/style.css. Loading both was tried in the head: style.css dresses
 * an app page with a green banner header and its own card system, and the two
 * fight over every element they share. A page here loads this sheet alone.
 *
 * What is NOT from the board, and is from this site: the three-way theme
 * picker. The board follows prefers-color-scheme only, but a reader who
 * picked זברה on goinfo.co.il and then opened a /pro page would watch the
 * choice evaporate. The archives' own search pages already solved this the
 * same way - keep the site's picker and its localStorage key, and map each
 * of the three onto these tokens.
 */

:root {
  --paper: #fbfaf8;
  --card: #ffffff;
  --ink: #14191d;
  --ink-soft: #56626b;
  --rule: #e2e0da;
  --accent: #1d6b64;
  --accent-soft: #e6f0ee;
  --warn: #9a6413;
  --warn-soft: #f7eddb;
  --urgent: #9c3a2c;
  --urgent-soft: #f8e6e2;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(20,25,29,.06), 0 8px 24px -16px rgba(20,25,29,.35);
}

/* :root:not([data-theme]) rather than a bare :root, so that a visitor who
   HAS chosen a theme is not overridden by their OS preference - the explicit
   picks below would otherwise have to repeat every token to outrank this. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --paper: #10151a;
    --card: #161d23;
    --ink: #e8eaec;
    --ink-soft: #98a4ac;
    --rule: #26313a;
    --accent: #5cc4b6;
    --accent-soft: #12312e;
    --warn: #d9a44b;
    --warn-soft: #2e2313;
    --urgent: #e08573;
    --urgent-soft: #331c17;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px -16px rgba(0,0,0,.8);
  }
}

/* The site's three looks, in the board's vocabulary. Scoped to :root and not
   written as a bare [data-theme="..."]: the picker's own buttons carry
   data-theme themselves, and a bare selector would redefine the tokens ON the
   button, painting it in a theme the page is not in. */
:root[data-theme="clouds"] {
  --paper: #fbfaf8; --card: #ffffff; --ink: #14191d; --ink-soft: #56626b;
  --rule: #e2e0da; --accent: #1d6b64; --accent-soft: #e6f0ee;
  --warn: #9a6413; --warn-soft: #f7eddb; --urgent: #9c3a2c; --urgent-soft: #f8e6e2;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(20,25,29,.06), 0 8px 24px -16px rgba(20,25,29,.35);
}

:root[data-theme="fashion"] {
  --paper: #0d0b08; --card: #221c12; --ink: #f3ecdc; --ink-soft: #b7a67f;
  --rule: #3c3320; --accent: #ddb44f; --accent-soft: #18140d;
  --warn: #ddb44f; --warn-soft: #241d10; --urgent: #e08573; --urgent-soft: #2a1713;
  --radius: 3px;
  --shadow: 0 1px 2px rgba(0,0,0,.5);
}

:root[data-theme="zebra"] {
  --paper: #ffffff; --card: #ffffff; --ink: #111111; --ink-soft: #5c5c5c;
  --rule: #cfcfcf; --accent: #111111; --accent-soft: #f0f0f0;
  --warn: #111111; --warn-soft: #f0f0f0; --urgent: #111111; --urgent-soft: #e4e4e4;
  --radius: 6px;
  --shadow: none;
}
/* Emoji are pre-rendered colour pixels, so no token can touch them -
   grayscale is the only way to keep this theme's no-hue promise. Same rule
   the site's own sheet applies to the same buttons. */
:root[data-theme="zebra"] .theme-pick button { filter: grayscale(1); }

* { box-sizing: border-box; }
html { background: var(--paper); }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: "Segoe UI", "Noto Sans Hebrew", "Arial Hebrew", Arial, sans-serif;
  font-size: 16px; line-height: 1.55;
}
.wrap { max-width: 1080px; margin: 0 auto; padding: 32px 20px 80px; }
a { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- masthead ---------- */

.topbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
          margin-bottom: 14px; }
.back { color: var(--accent); font-size: 14px; text-decoration: none; }
.back:hover { text-decoration: underline; }

.theme-pick { display: flex; gap: .3rem; margin-inline-start: auto; }
.theme-pick button {
  font-size: .72rem; padding: .3rem .65rem; border-radius: 999px;
  border: 1px solid var(--rule); background: var(--card); color: var(--ink);
  font-family: inherit; cursor: pointer;
}
.theme-pick button:hover { border-color: var(--accent); }
.theme-pick button[aria-pressed="true"] {
  background: var(--accent); color: var(--paper); border-color: var(--accent);
}
@media (max-width: 640px) { .theme-pick .theme-btn-label { display: none; } }

header.page { display: flex; flex-direction: column; gap: 6px; margin-bottom: 24px; }
header.page h1 {
  margin: 0; font-size: clamp(28px, 4vw, 40px); font-weight: 700;
  letter-spacing: -.02em; text-wrap: balance;
}
.sub { color: var(--ink-soft); max-width: 62ch; margin: 0; }
.sub b { color: var(--ink); }

/* ---------- stat tiles ---------- */

/* auto-fit rather than a fixed four columns: the row is written by JS and a
   count that fails to load leaves three tiles, which should still fill the
   row instead of leaving a hole where the fourth was. */
.tiles {
  display: grid; align-items: stretch; gap: 10px; margin-bottom: 22px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.tile {
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 10px 12px; box-shadow: var(--shadow); text-align: center;
  display: flex; flex-direction: column; justify-content: center;
}
.tile b {
  display: block; font-size: 22px; font-weight: 700; line-height: 1.25;
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.tile span { color: var(--ink-soft); font-size: 12px; letter-spacing: .03em; }
.tile.ok b { color: var(--accent); }
.tile.warn b { color: var(--warn); }
@media (max-width: 760px) {
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile { padding: 8px 6px; }
  .tile b { font-size: 19px; }
  .tile span { font-size: 11px; letter-spacing: 0; }
}

/* ---------- filters ---------- */

.filters { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; align-items: center; }
.filters select,
.filters input[type="search"],
.filters input[type="text"] {
  font: inherit; color: var(--ink); background: var(--card);
  border: 1px solid var(--rule); border-radius: 8px; padding: 9px 12px; min-width: 150px;
}
.filters input[type="search"],
.filters input[type="text"] { flex: 1 1 240px; }
/* A select whose options are "status (123,456)" is far wider than the row can
   afford; the value still shows in full when it is open. */
.filters select { max-width: 22rem; }
.check {
  display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px;
  color: var(--ink-soft); cursor: pointer; padding: 9px 0;
}
/* accent-color, or a ticked box paints itself in the browser's blue and is
   the one element on the page that ignores the chosen theme entirely. */
.check input { cursor: pointer; accent-color: var(--accent); }

/* On a phone the row is a column, and a select sized to its content leaves a
   ragged edge down the page - so every control takes the full width. */
@media (max-width: 560px) {
  .filters { flex-direction: column; align-items: stretch; }
  /* flex:0 0 auto is load-bearing, not tidying: the row's `flex: 1 1 240px`
     is a basis along the main axis, and once that axis is vertical 240px
     stops meaning width and starts meaning HEIGHT - two search boxes a
     quarter of the screen tall each. */
  .filters select,
  .filters input[type="search"],
  .filters input[type="text"] { flex: 0 0 auto; width: 100%; max-width: none; }
  .check { padding: 4px 0; }
}

/* ---------- the result list ---------- */

.countrow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 12px 0 10px; }
.count { color: var(--ink-soft); font-size: 14px; }
.dl {
  font: inherit; font-size: 14px; cursor: pointer; border-radius: 8px;
  padding: 7px 14px; border: 1px solid var(--rule); background: var(--card);
  color: var(--ink); margin-inline-start: auto; white-space: nowrap;
}
.dl:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.dl:disabled { opacity: .6; cursor: default; }

.results { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.results li {
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 14px 16px; box-shadow: var(--shadow);
}
.row-top { display: flex; justify-content: space-between; gap: 14px;
           align-items: baseline; flex-wrap: wrap; }
.title { font-weight: 600; }
.row-end { display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.meta { color: var(--ink-soft); font-size: 14px; display: flex; gap: 10px;
        flex-wrap: wrap; align-items: center; margin-top: 6px; }
.meta .num { font-variant-numeric: tabular-nums; }

.pill { font-size: 12px; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.pill.ok { background: var(--accent-soft); color: var(--accent); }
.pill.warn { background: var(--warn-soft); color: var(--warn); }
.pill.bad { background: var(--urgent-soft); color: var(--urgent); font-weight: 600; }
.pill.unknown { background: var(--rule); color: var(--ink-soft); }
.pill.gov { border: 1px solid var(--accent); color: var(--accent); }

/* The extra ica_companies fields the card has no room for, folded away -
   the board's own <details class="req"> pattern, same grid and same marker. */
.more { margin-top: 6px; border-top: 1px dashed var(--rule); padding-top: 8px; }
.more summary { cursor: pointer; color: var(--accent); font-size: 14px;
                font-weight: 600; list-style: none; width: fit-content; }
.more summary::-webkit-details-marker { display: none; }
.more summary::before { content: '+ '; font-weight: 700; }
.more[open] summary::before { content: '– '; }
.more-row { display: grid; grid-template-columns: 10em 1fr; gap: 4px 12px;
            margin-top: 8px; font-size: 14.5px; align-items: baseline; }
.more-row dt { color: var(--ink-soft); font-weight: 600; margin: 0; }
.more-row dd { color: var(--ink); margin: 0; overflow-wrap: anywhere; }
@media (max-width: 560px) { .more-row { grid-template-columns: 1fr; gap: 2px; } }

/* ---------- pager ---------- */

.pager { display: flex; gap: 10px; align-items: center; justify-content: center;
         margin-top: 18px; color: var(--ink-soft); font-size: 14px; flex-wrap: wrap; }
.pager button {
  font: inherit; font-size: 14px; cursor: pointer; border-radius: 8px;
  padding: 7px 14px; border: 1px solid var(--rule); background: var(--card); color: var(--ink);
}
.pager button:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.pager button:disabled { opacity: .45; cursor: default; }

/* ---------- notices, and what src/ui.js writes ---------- */

/* showError()/showLoading()/showInfo() emit .notice error / .skeleton, and
   this page loads none of src/style.css - so their classes are defined here
   or the error a reader most needs to see arrives unstyled. */
.notice {
  border: 1px solid var(--rule); border-radius: var(--radius); background: var(--card);
  padding: 12px 14px; box-shadow: var(--shadow); color: var(--ink);
}
.notice.error { border-color: var(--urgent); color: var(--urgent); background: var(--urgent-soft); }
.notice.info { background: var(--accent-soft); border-color: transparent; color: var(--ink); }
.notice p { margin: .5rem 0 0; }
.notice pre { overflow-x: auto; background: var(--card); border: 1px solid var(--rule);
              border-radius: 6px; padding: 8px 10px; font-size: 13px; }
.notice code { font-size: .92em; }
.skeleton { color: var(--ink-soft); font-size: 14px; padding: 10px 0; }

/* "מה יש כאן" - the same folded panel as .more, at page scale. */
.about { margin-bottom: 20px; font-size: 14.5px; }
.about summary { cursor: pointer; color: var(--accent); font-weight: 600;
                 width: fit-content; padding: .2rem 0; }
.about-body {
  margin-top: .5rem; padding: .9rem 1rem; background: var(--accent-soft);
  border: 1px solid var(--rule); border-radius: var(--radius);
  color: var(--ink-soft); line-height: 1.6;
}
.about-body p { margin: 0 0 .6rem; }
.about-body p:last-child { margin-bottom: 0; }
.about-body strong { color: var(--ink); }

/* ---------- the legal footer tools/footer_inject.py writes ---------- */

.site-legal {
  border-top: 1px solid var(--rule); margin-top: 48px; padding: 20px 0 0;
  color: var(--ink-soft); font-size: 13px;
}
.site-legal .wrap { padding: 0 20px 40px; }
.site-legal nav { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; }
.site-legal p { margin: 0; max-width: 70ch; }