now, because the site strip above it belongs on the desk and not on the paper. min-height keeps a two-line protocol looking like a short page rather than a floating strip, and the sheet drops its margins, shadow and rounding on a phone, where a page inset on both sides is just wasted width. */ html { background: var(--bg); } body { font-family: var(--font-body); margin: 0; line-height: 1.6; background: var(--bg); color: var(--fg); } .sheet { max-width: 900px; margin: 0 auto 2.5rem; padding: 2.5rem 3rem 4rem; background: var(--card); box-shadow: var(--shadow); border-radius: var(--radius); min-height: 60vh; } @media (max-width: 700px) { .sheet { margin: 0; padding: 1.2rem 1rem 2.5rem; box-shadow: none; border-radius: 0; min-height: 100vh; } } /* Transitional. This stylesheet reaches every page in the archive the moment it is uploaded, while the pages themselves arrive one build later - and a page built before the strip puts the document straight in , with no .sheet to carry it. Without this rule that window is 64,000 pages of unstyled full-width text. It matches nothing once everything has been rebuilt, and can be deleted then. :where() so the whole thing keeps 's own specificity - search.css loads after this file and resets for the search page, and a rule that outranked it would undo that reset. */ body:where(:not(:has(.site-shell))) { max-width: 900px; margin: 2.5rem auto; padding: 2.5rem 3rem 4rem; background: var(--card); box-shadow: var(--shadow); border-radius: var(--radius); min-height: calc(100vh - 5rem); } @media (max-width: 700px) { body:where(:not(:has(.site-shell))) { margin: 0; padding: 1.2rem 1rem 2.5rem; box-shadow: none; border-radius: 0; } } /* Every link on the sheet, not only the ones named below: the source link in the metadata table had no rule of its own and so took the browser's default blue, which on the dark themes is a link nobody can read. */ .sheet a, body:where(:not(:has(.site-shell))) a { color: var(--accent); } .sheet a:visited, body:where(:not(:has(.site-shell))) a:visited { color: var(--visited); } /* שחור-לבן has no shadow and a white card on a white desk, so the sheet needs a drawn edge or the page has no boundary at all. */ :root[data-theme="zebra"] .sheet { border: 1px solid var(--border); } /* ------------------------------------------------------- the site strip goinfo.co.il's own header, not an approximation of it: the same column width, the same wordmark, the same theme switch and the same field and chips as the home page, with this sheet's tokens standing in for the home page's (--card for --panel, --surface for --panel-2). It sits on the desk above the sheet, and keeps the site's 430px column at every width - a header that grows to the width of a document is a different header. */ .site-shell { max-width: var(--head-w); margin: 0 auto; padding: 14px 16px 18px; font-family: var(--font-body); } .site-top { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; } .site-brand { font-family: var(--font-head); font-weight: 700; font-size: 1.2rem; letter-spacing: -.01em; color: var(--fg); text-decoration: none; } .site-brand:hover { color: var(--accent); } /* The switch, in the home page's treatment: a soft track holding three borderless buttons, the chosen one lifted out in the card colour rather than filled dark. Scoped to the strip - search.html's own picker keeps the filled-dark state that was chosen for it. */ .site-shell .theme-pick { border: 0; background: var(--surface); padding: 2px; } .site-shell .theme-pick button { min-block-size: 0; padding: 6px 9px; gap: 4px; font-size: 0.75rem; font-weight: 500; } .site-shell .theme-pick button[aria-pressed="true"] { background: var(--card); color: var(--fg); box-shadow: var(--shadow); } /* Both fields are the home page's .field: one pill, an icon at the start, no furniture. The site's search comes first and the archive's second. */ .gi-find, .site-find { display: flex; align-items: center; gap: 10px; margin-top: 16px; background: var(--card); border: 1px solid var(--border); border-radius: 999px; padding: 0 18px; box-shadow: var(--shadow); transition: box-shadow .15s ease, border-color .15s ease; } .gi-find:focus-within, .site-find:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 30%, transparent); } .gi-find input[type="search"], .site-find input[type="search"] { flex: 1 1 auto; min-width: 0; border: 0; background: none; color: inherit; font: 500 1.05rem/1 var(--font-body); padding: 17px 0; outline: none; } .gi-find input::placeholder, .site-find input::placeholder { color: var(--muted); opacity: .85; } /* The magnifier is the submit button, so the form works with no script and still looks like the home page's, which has no button at all. */ .gi-find > button[type="submit"] { flex: none; display: inline-flex; border: 0; background: none; color: var(--muted); cursor: pointer; padding: 0; } .gi-find > button[type="submit"]:hover { color: var(--accent); } .site-find-icon { width: 20px; height: 20px; flex: none; color: var(--muted); } /* The archive's box keeps a named action: two identical pills on one screen leave nothing to say which one searches the documents. */ .site-find button[type="submit"] { flex: none; border: 0; border-radius: 999px; cursor: pointer; background: var(--accent); color: var(--card); font: 600 0.85rem/1 var(--font-body); padding: 10px 16px; } .site-find button[type="submit"]:hover { filter: brightness(1.08); } /* The topics, exactly as the home page lays them out: a centred row that wraps. Never a single flattened line, and never a strip that scrolls sideways - the shape of the block is how a reader sees there are eleven. */ .gi-cats { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; margin-top: 16px; } .gi-cats a { display: inline-flex; align-items: center; text-decoration: none; font: 500 0.875rem/1 var(--font-body); color: var(--fg); background: var(--card); border: 1px solid var(--border); border-radius: 999px; padding: 8px 12px; } .gi-cats a:hover { border-color: var(--accent); color: var(--accent); } /* The line between the two boxes: without it they read as one control with a second, redundant field. */ .site-rule { border: 0; border-top: 1px solid var(--border); margin: 18px 0 0; } /* The link row: a centred flex row rather than centred text, so anything added to it sits beside the links instead of dropping to a line of its own. */ .site-find-all { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 10px; margin: 10px 0 0; font-size: 0.82rem; color: var(--muted); } .site-find-all a { color: var(--accent); text-decoration: none; } .site-find-all a:hover { text-decoration: underline; } /* ✦ inside the archive's box (ARCHIVE_AI_IN_BOX): a ring in the accent colour, beside the box's own "חיפוש", the same mark goinfo.co.il's home page draws. */ .site-find-ai { flex: none; display: inline-grid; place-items: center; inline-size: 38px; block-size: 38px; border-radius: 50%; border: 1.5px solid var(--accent); color: var(--accent); background: transparent; font: 600 1.05rem/1 var(--font-body); text-decoration: none; cursor: pointer; } .site-find-ai:hover, .site-find-ai:focus-visible { background: var(--accent); color: var(--card); outline: none; } .sheet a.site-find-ai, .sheet a.site-find-ai:visited { color: var(--accent); } .sheet a.site-find-ai:hover, .sheet a.site-find-ai:focus-visible { color: var(--card); } :root[data-theme="zebra"] .site-find-ai { border-color: #000; color: #000; } /* The box moved under the page's title: the sheet's width, and room above and below. */ .site-find.in-sheet { margin: 1.1rem 0 1.4rem; padding-inline-end: 6px; } /* The two ✦ AI pills on a record page (top.js): the same pill src/style.css draws for the site's search fields. */ .site-ai { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 12px 0 0; } .ai-search { display: inline-flex; align-items: center; gap: .3rem; border-radius: 999px; padding: .5rem .8rem; text-decoration: none; background: var(--fg); color: var(--bg); font: 600 .85rem/1 var(--font-body); white-space: nowrap; cursor: pointer; } .ai-search:hover { background: var(--accent); color: var(--bg); } .ai-search .ai-spark { font-size: .95em; line-height: 1; } .ai-search.ai-alt { background: transparent; color: var(--fg); border: 1px solid var(--fg); padding: calc(.5rem - 1px) calc(.8rem - 1px); } .ai-search.ai-alt:hover { background: var(--surface); color: var(--fg); } :root[data-theme="zebra"] .ai-search { background: #000; color: #fff; border: 1px solid #000; } :root[data-theme="zebra"] .ai-search.ai-alt { background: #fff; color: #000; } /* The switch's shared shape; the strip restyles it above, search.html uses it as it is. */ .theme-pick { display: flex; gap: 2px; padding: 3px; flex: none; border: 1px solid var(--border); border-radius: 999px; background: var(--card); } .theme-pick button { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-block-size: 40px; padding: 6px 12px; border: 0; border-radius: 999px; background: none; color: var(--muted); font: inherit; font-size: 13px; white-space: nowrap; cursor: pointer; } .theme-pick svg { width: 15px; height: 15px; } .theme-pick button:hover { color: var(--fg); } .theme-pick button[aria-pressed="true"] { background: var(--fg); color: var(--card); } nav { margin-bottom: 1.5rem; } nav a { color: var(--accent); } /* The city banner, identical on a city's index and on every protocol inside it. The emblem is a fixed 56px box with object-fit: contain, because these come from two sources with nothing in common - a tall Commons SVG shield next to a wide logo lifted from a council's own site - and letting them set their own height makes the header jump between pages. */ .city-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; padding-bottom: 0.8rem; border-bottom: 1px solid var(--border); } .city-head nav { margin: 0; } .city-id { display: flex; align-items: center; gap: 0.7rem; min-width: 0; } .city-emblem { width: 56px; height: 56px; object-fit: contain; flex: none; } .city-head-name { font-size: 1.3rem; font-weight: 700; margin: 0; color: inherit; text-decoration: none; overflow-wrap: break-word; } a.city-head-name:hover { text-decoration: underline; } /* Two real columns rather than a floated

. The float version set its gap with margin-inline-start, which in RTL is the *right* edge - the outer side of the float - so no space ever landed between label and value and they ran together as "עירגלבוע". Grid also keeps values aligned when one wraps. */ .meta { display: grid; grid-template-columns: max-content 1fr; column-gap: 0.5em; row-gap: 0.3em; margin: 0; } .meta dt { font-weight: bold; } .meta dd { margin: 0; min-width: 0; overflow-wrap: break-word; } /* The "only if the source is gone" note beside the mirror link: present, but never competing with the municipality's own link above it. */ .meta .muted { color: var(--muted); font-size: .9em; } .protocol-text { overflow-wrap: break-word; border-top: 1px solid var(--border); padding-top: 1rem; margin-top: 1rem; font-family: inherit; } .protocol-text p { margin: 0 0 0.15em; } /* A finding links to the exact line it was read from. Without a scroll margin the browser parks that line under the sticky header and the reader studies the sentence above it; :target then says which one. */ .protocol-text [id^="L"] { scroll-margin-top: 5rem; } .protocol-text [id^="L"]:target { background: var(--surface); box-shadow: 0 0 0 0.35em var(--surface); border-radius: 2px; } .protocol-text .pt-gap { height: 0.7em; margin: 0; } .protocol-text h2 { font-size: 1.15rem; margin: 1.2em 0 0.4em; } .protocol-text h3 { font-size: 1.05rem; margin: 1.1em 0 0.35em; padding-bottom: 0.15em; border-bottom: 1px solid var(--border); } .protocol-text .pt-decision { font-weight: 600; border-inline-start: 3px solid var(--accent); padding-inline-start: 0.6em; margin: 0.5em 0; } .protocol-text .pt-item { padding-inline-start: 1.1em; } /* The agenda marker, kept as one LTR unit so "2." never renders as ".2". Weight is inherited so the marker matches whatever it introduces - these appear both in plain agenda lines and inside bold section headings. */ .protocol-text .pt-num { unicode-bidi: isolate; } /* A speaker turn. The name carries the emphasis on its own - a rule or a tint here would draw a box around most of a discussion protocol. */ .protocol-text .pt-turn { margin-top: 0.5em; } .protocol-text .pt-speaker { margin: 0.9em 0 0.15em; } .protocol-text .pt-speaker u { text-underline-offset: 0.15em; } .protocol-text h3.pt-topic { text-align: center; font-weight: 700; text-decoration: underline; text-underline-offset: 0.15em; border-bottom: 0; } .protocol-text p.al-c { text-align: center; } .protocol-text p.al-l { text-align: left; } .protocol-text h3.pt-doc-h { font-size: 1em; font-weight: 700; text-decoration: underline; text-underline-offset: 0.15em; border-bottom: 0; margin: 1.1em 0 0.3em; } .protocol-text table.kt { border-collapse: collapse; margin: 0.7em 0; } .protocol-text table.kt td { padding: 0.15em 0.6em; vertical-align: top; } .protocol-text table.kt-b td { border: 1px solid var(--border, #999); } .protocol-text table.kt p { margin: 0 0 0.25em; } .protocol-text .pt-turn strong { font-weight: 700; } .pt-raw { margin-top: 1.5rem; font-size: 0.95rem; } .pt-raw summary { cursor: pointer; color: var(--muted); } .pt-siblings { font-size: 0.9rem; color: var(--muted); } .pt-warning { font-size: 0.9rem; background: var(--warn-bg); border: 1px solid var(--warn-border); border-radius: 8px; padding: 0.6em 0.9em; } .protocol-list li, .city-list li { margin-bottom: 0.4em; } .city-row { display: flex; align-items: center; gap: 0.6rem; } .city-emblem-sm { width: 28px; height: 28px; object-fit: contain; flex: none; } .city-count { color: var(--muted); font-size: 0.9rem; } .agenda-line { color: var(--muted); font-size: 0.9rem; } .protocol-list a, .city-list a, .pdf-link { color: var(--accent); } .protocol-list a:visited, .city-list a:visited { color: var(--visited); } .pdf-link { display: inline-block; margin: 0.5em 0; } .city-filters { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 1rem; } /* max-width, because a