/* The single source of style for this project.
   Every screen draws from the tokens below — no screen defines its own palette.

   Two rules are structural here, not decorative:
   1. Colour never carries meaning on its own. Anything that means something also
      says it in a word or shows it with a shape. Red and green are never a pair.
   2. Text is large and high-contrast. No thin grey on grey. */

:root {
  /* The public side: light, clean, what a client sees. Matched to the email design
     already in use on the portal — a white sheet on a grey ground, one blue for every
     primary action, amber for a note. The same values drive the email templates, so the
     page a client books on and the email they receive cannot drift apart. */
  --page: #ffffff;
  --ground: #eef1f4; /* behind the sheet */
  --surface: #f6f8fa;
  --border: #dde3e9;
  --ink: #14181d; /* body text — near-black on white, deliberately */
  --ink-soft: #5b6672; /* the lightest text allowed anywhere */
  --accent: #1d4ed8; /* links and primary actions */
  --accent-ink: #ffffff;
  --attention: #fbbf24; /* the amber note, as on the portal's emails */
  --attention-bg: #fffbeb;

  /* Status. "Good" is teal, never green: green against red is the one pairing this
     project may never use, and the portal settled on the same substitution. */
  --ok: #0f766e;
  --warn: #92600a;
  --stop: #b3261e;

  --radius: 10px;
  --gap: 1rem;

  /* The portal's stack, character for character. Two systems from the same business
     rendering Hebrew in visibly different faces is the sort of detail that makes both
     look unfinished. */
  --font: -apple-system, "Segoe UI", Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--font);
  font-size: 18px;
  line-height: 1.65;
}

.wrap {
  max-width: 44rem;
  margin: 0 auto;
  padding: 3rem 1.25rem;
}

h1 {
  font-size: 2rem;
  line-height: 1.25;
  margin: 0 0 0.5rem;
}

p {
  margin: 0 0 var(--gap);
}

a {
  color: var(--accent);
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
}

/* Status readout. The label is a word, not a colour — that is the point. */
.status {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.35rem 1rem;
  margin: 0;
  font-size: 1rem;
}

.status dt {
  color: var(--ink-soft);
  white-space: nowrap;
}

.status dd {
  margin: 0;
  /* Commit hashes and timestamps are Latin text inside a Hebrew page — pin their
     direction so the punctuation does not jump to the wrong end. */
  direction: ltr;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* --- the admin theme -------------------------------------------------------------
   The same components, redrawn dark. Only the tokens change; no admin screen defines
   a colour of its own. The public side stays light — a dark page reads as a developer
   tool to a client who only wants to book a meeting. */

/* Tokens taken from the portal's design system (portal.seo-simple.co.il/static/ds.css),
   not invented here. Two admin interfaces in the same business should not disagree about
   what a dark background or a primary button looks like. */
body.admin {
  --page: #1e1e1e;
  --surface: #252526;
  --elev: #2d2d30;
  --field: #3c3c3c;
  --border: #3e3e42;
  --ink: #d4d4d4;
  --ink-soft: #9b9b9b;
  --accent: #4ea1ff;
  --accent-ink: #08233f;

  /* Success is cyan, never green — the portal made the same call, for the same reason. */
  --ok: #4ec9b0;
  --warn: #f5c451;
  --stop: #e0556b;
}

/* --- shared components ----------------------------------------------------------- */

h2 {
  font-size: 1.35rem;
  margin: 2rem 0 0.75rem;
}

.muted {
  color: var(--ink-soft);
  font-size: 0.95rem;
}

.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
  flex-wrap: wrap;
}

.bar h1 {
  margin: 0;
}

/* inline-FLEX, not inline-block.
   Some of these are <a> and some are <button>, and a browser centres text vertically
   inside a button but sits it on the baseline inside a padded link — so the two never
   line up beside each other however equal their padding. Centring explicitly makes the
   element type stop mattering. */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.6rem 1.2rem;
  border: 1px solid transparent;
  border-radius: 8px;
  background: var(--accent);
  color: var(--accent-ink);
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.button:hover {
  filter: brightness(1.12);
}

/* Focus is a thick outline rather than a colour change, so it is visible regardless of
   how the viewer perceives colour. */
.button:focus-visible,
a:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 2px;
}

.button.quiet {
  background: transparent;
  border-color: var(--border);
  color: var(--ink);
}

/* Destructive only. Red appears nowhere else in the interface, and never opposite a
   green one — the meaning is carried by the word on the button. */
.button.danger {
  background: transparent;
  border-color: var(--stop);
  color: var(--ink);
}

.notice {
  border: 1px solid var(--border);
  border-inline-start: 5px solid var(--accent);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 0.75rem 1rem;
}

.accounts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--gap);
}

.account-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
  flex-wrap: wrap;
}

.who {
  font-size: 1.1rem;
  font-weight: 600;
  direction: ltr;
}

/* Each state carries a symbol and a word. The colour is the last of the three signals,
   never the only one. */
.state {
  white-space: nowrap;
  font-weight: 600;
}

.state-on {
  color: var(--ok);
}

.state-warn {
  color: var(--warn);
}

.state-off {
  color: var(--ink-soft);
}

.actions {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-top: 0.9rem;
}

.actions form {
  margin: 0;
}

/* --- forms ------------------------------------------------------------------------
   Labels wrap their field, so the whole label is a click target and the association
   needs no id/for pairing to get wrong. */

.form {
  display: grid;
  gap: 1.1rem;
  margin-bottom: 2rem;
}

.form label {
  display: grid;
  gap: 0.35rem;
}

.form label > span {
  font-weight: 600;
}

.form label.check,
.form label.inline {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.form label.check > span,
.form label.inline > span {
  font-weight: 400;
}

/* Generous target: these are used on a phone, and by someone over 60. */
.form input[type='checkbox'] {
  width: 1.35rem;
  height: 1.35rem;
  accent-color: var(--accent);
}

.form input[type='text'],
.form input[type='number'],
.form input[type='time'],
.form input[type='date'],
.form input[type='email'],
.form input[type='tel'],
.form select,
.form textarea {
  font: inherit;
  font-size: 1rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--page);
  color: var(--ink);
  width: 100%;
}

.form input:focus-visible,
.form select:focus-visible,
.form textarea:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 1px;
}

.form textarea {
  resize: vertical;
}

.pair {
  display: grid;
  gap: 1.1rem;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}

/* The working week as one row of days rather than six stacked rows. auto-fit means six
   columns where there is room, and fewer as the window narrows, without a breakpoint. */
.weekgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
  gap: 0.5rem;
}

.daycol {
  display: grid;
  gap: 0.3rem;
  padding: 0.6rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 8px;
}

.daycol .check {
  gap: 0.35rem;
}

.day-name {
  font-weight: 600;
}

.daycol select {
  width: 100%;
}

.daystate {
  font-size: 11px;
  color: var(--ink-soft);
}

/* Closed: dimmed AND labelled, never dimming alone. */
.day-closed {
  opacity: 0.6;
}

/* A year of holidays is twenty-odd entries. One per row is a very long page for a list
   that is set once a year, so they sit three across where there is room. */
.holidaylist {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 0.5rem;
  align-items: start;
}

.holidayrow {
  display: grid;
  gap: 0.3rem;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 8px;
}

.holidaywhen {
  display: flex;
  flex-direction: column;
}

.holidayrow select {
  width: 100%;
}

/* Present for a screen reader, absent on screen. Every control needs a label; not every
   label needs to be seen when the row above it already says what it is. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Error detail. Wraps rather than scrolls sideways — a stack trace that runs off the
   edge of a phone is a stack trace nobody reads. */
.detail {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 0.85rem;
  line-height: 1.5;
}

/* --- admin density ----------------------------------------------------------------
   The public page stays generous — a client reads it once, on a phone, and legibility
   wins there. The admin is a working tool used daily by two people who know it, and at
   the public scale it forced scrolling for no reason.

   The numbers below are the portal's, so the two admin interfaces feel like one product:
   14px body, 12px labels, 13px buttons, 38px control height, 8px radius on controls.
   Last in the file so these win over the shared component rules above. */

body.admin {
  font-size: 14px;
  line-height: 1.55;
}

body.admin .wrap {
  /* Wider than the public page: more width is less scrolling, which was the complaint. */
  max-width: 60rem;
  padding: 1.25rem 1rem 3rem;
}

body.admin h1 {
  font-size: 19px;
  margin-bottom: 0.25rem;
}

body.admin h2 {
  font-size: 16px;
  margin: 1.5rem 0 0.6rem;
}

body.admin .muted {
  font-size: 12px;
}

body.admin .card {
  padding: 14px;
  border-radius: 12px;
}

body.admin .accounts,
body.admin .form {
  gap: 0.7rem;
}

body.admin .form label > span {
  font-size: 12px;
  font-weight: 400;
  color: var(--ink-soft);
}

body.admin .form input[type='text'],
body.admin .form input[type='number'],
body.admin .form input[type='time'],
body.admin .form input[type='date'],
body.admin .form input[type='email'],
body.admin .form input[type='tel'],
body.admin .form select,
body.admin .form textarea {
  padding: 8px 12px;
  font-size: 14px;
  min-height: 38px;
  border-radius: 8px;
  background: var(--field);
}

body.admin .form textarea {
  min-height: 0;
}

body.admin .button {
  padding: 8px 13px;
  font-size: 13px;
  min-height: 38px;
  border-radius: 8px;
  line-height: 1.3;
}

body.admin .who {
  font-size: 14px;
}

body.admin .state {
  font-size: 12px;
}

body.admin .notice {
  padding: 9px 12px;
  font-size: 13px;
}

body.admin .day-name {
  font-size: 13px;
}

/* The day and holiday cells are narrow, so the dropdowns inside them lose the generous
   padding the rest of the admin uses. */
body.admin .daycol select,
body.admin .holidayrow select {
  padding: 5px 6px;
  font-size: 13px;
  min-height: 32px;
}

body.admin .holidayrow .who {
  font-size: 13px;
}

/* A closed day is dimmed AND labelled "סגור". The word is what carries the meaning; the
   dimming only reinforces it. */

/* The one thing deliberately NOT shrunk. A checkbox is a touch target, and the portal
   holds the same line at 44px for the same reason. */
body.admin .form input[type='checkbox'] {
  width: 1.15rem;
  height: 1.15rem;
}

body.admin .status dt,
body.admin .status dd {
  font-size: 13px;
}

/* A booking address, shown so it can be read and copied. Breaks rather than overflows —
   these are long, and they sit inside a Hebrew paragraph. */
.linkline {
  margin: 0.35rem 0;
  word-break: break-all;
}

body.admin .linkline {
  font-size: 12px;
}

/* Meeting types three across rather than one per row and a long scroll. auto-fit with a
   minimum width means three on a wide screen, two on a narrow one and one on a phone —
   without a breakpoint deciding it. */
.typegrid {
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  align-items: start;
}

.typegrid .actions {
  gap: 0.4rem;
}

body.admin .typegrid .button {
  padding: 6px 10px;
  font-size: 12px;
}

/* Copy-to-clipboard. Sits inline with the address it copies. */
.copybtn {
  margin-inline-start: 0.5rem;
  padding: 2px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 11px;
  cursor: pointer;
  white-space: nowrap;
}

.copybtn:hover {
  border-color: var(--accent);
}

/* Breathing room under a grid of cards. Without it the button that follows sits flush
   against the last card and reads as part of it. */
.after-grid {
  margin-top: 1.25rem;
}

/* A list that reads as sentences rather than as data. Used where a page has to spell out
   consequences before somebody commits to them. */
.plainlist {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  display: grid;
  gap: 0.35rem;
}

/* --- the visitor's side -----------------------------------------------------------
   Deliberately larger and plainer than the admin. A client reads this once, usually on
   a phone, often in a hurry. Nothing here assumes a side of the page: `dir` comes from
   the language, and every edge uses logical properties so Hebrew and English lay out
   from the same rules.

   The shape is the one already used for the portal's emails — a white sheet on a grey
   ground, a logo bar at the top, a quiet footer line at the bottom. Deliberate: a client
   who books here and then receives the confirmation should recognise the second as
   coming from the first. */

.public-body {
  background: var(--ground);
}

.wrap.public {
  padding: 1.5rem 1rem 3rem;
  max-width: 42rem;
}

.card-sheet {
  background: var(--page);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.06), 0 8px 24px rgba(16, 24, 40, 0.06);
}

/* The mark alone, centred. Nothing else sits on this line. */
.sheet-head {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--border);
}

.sheet-logo {
  max-height: 34px;
  width: auto;
  display: block;
}

.sheet-name {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.sheet-body {
  padding: 1.75rem 1.5rem 2rem;
}

.sheet-body > h1:first-child,
.sheet-body > h2:first-child {
  margin-top: 0;
}

.sheet-foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.9rem 1.5rem;
  border-top: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink-soft);
  font-size: 0.85rem;
}

.sheet-dot {
  opacity: 0.6;
}

/* The amber note, the same one the portal's emails use for "שימו לב". Amber, not red:
   this is something to be aware of, not something that went wrong. */
.public .notice {
  border: 1px solid var(--attention);
  border-inline-start: 5px solid var(--attention);
  background: var(--attention-bg);
  color: var(--ink);
}

.button.small {
  padding: 0.3rem 0.7rem;
  font-size: 0.85rem;
}

/* One size for everything under the title: the meta line, the description and each
   section heading.

   `inherit`, NOT 1rem. The body is 18px but a rem is 16px — the root's size, which the
   body's own font-size does not change. Setting all three to 1rem made them equal to each
   other and still smaller than the paragraph between them, which is why they went on
   looking like three different fonts. Inheriting is the only way to say "the same as the
   text around it" and mean it. */
.quiet-heading {
  font-size: inherit;
  color: var(--ink);
  font-weight: 700;
  margin: 1.75rem 0 0.75rem;
}

/* Everything from the first section heading onwards starts on a clean line, so a short
   page cannot leave the calendar wrapped around the floated language button. */
.public .quiet-heading,
.public .calendars,
.public .notice {
  clear: both;
}

/* The description keeps the body size — it is the sentence a client reads. The two
   supporting lines, the meeting's length and the time-zone note, are one step smaller
   and identical to each other: they are reference, not reading. */
.public .summary p {
  font-size: inherit;
}

.public .choice-meta,
.public .fineprint {
  font-size: 0.85rem;
  color: var(--ink-soft);
}

/* The switch sits opposite the heading, at the far end of the reading direction, and the
   title rises to sit level with it — so the button costs no vertical space of its own.
   In Hebrew that puts it on the left; in English it moves to the right.
   Floated rather than flexed because the heading and the text beneath it live in each
   page's own template, and a float lets them flow up beside this without every template
   having to wrap them in a row.
   Written as two direction rules rather than `float: inline-end`, which is newer than
   some of the browsers a client might arrive with. */
.public .langbar {
  float: left;
  margin-inline-start: 1rem;
  margin-bottom: 0.5rem;
}

html[dir='ltr'] .public .langbar {
  float: right;
}

.backlink {
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
}

.choices {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}

.choice {
  display: grid;
  gap: 0.25rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--border);
  border-inline-start: 5px solid var(--accent);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
}

.choice:hover {
  border-color: var(--accent);
}

.choice-name {
  font-size: 1.15rem;
  font-weight: 600;
}

.choice-meta {
  color: var(--ink-soft);
  font-size: 0.95rem;
}

.choice-desc {
  margin-top: 0.25rem;
}

.day {
  margin-bottom: 1.5rem;
}

.day-heading {
  font-size: 1rem;
  margin: 0 0 0.6rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--border);
}

.times {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* A time is a real target, not a link-sized word: 44px is the size a thumb can hit
   reliably, and this is the control the whole page exists for. */
.time {
  min-width: 5.5rem;
  min-height: 44px;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: var(--page);
  color: var(--accent);
  font: inherit;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

.time:hover {
  background: var(--accent);
  color: var(--accent-ink);
}

/* A time is a link, so it works with no JavaScript and can be opened in a new tab. */
a.time {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

/* --- confirming a booking ---------------------------------------------------------- */

.summary {
  border: 1px solid var(--border);
  border-inline-start: 5px solid var(--accent);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 1rem 1.1rem;
  margin-bottom: 1.5rem;
}

.summary p {
  margin: 0 0 0.35rem;
}

.summary p:last-child {
  margin-bottom: 0;
}

.summary-when {
  font-size: 1.1rem;
}

.book-form {
  max-width: 30rem;
}

/* The two video options, both visible without a click. A fieldset rather than a div so a
   screen reader announces them as one question with two answers. */
.choicegroup {
  display: grid;
  gap: 0.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.9rem 1.1rem;
  margin: 0;
}

.choicegroup legend {
  padding: 0 0.4rem;
  margin: 0;
}

.choicegroup input[type='radio'] {
  width: 1.35rem;
  height: 1.35rem;
  accent-color: var(--accent);
}

.errorlist {
  margin: 0.4rem 0 0;
  padding-inline-start: 1.2rem;
}

/* The honeypot: out of sight, out of the accessibility tree, and never focusable. Not
   `display:none`, which some form fillers skip — the point is that they DO fill it. */
.hp {
  position: absolute;
  inset-inline-start: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.fineprint {
  margin-top: 2rem;
  color: var(--ink-soft);
  font-size: 0.9rem;
}

/* --- the month calendar -----------------------------------------------------------
   A CSS grid of seven columns. Under dir="rtl" the browser lays the columns out from
   the right by itself, so Sunday sits where an Israeli reader expects it and no rule
   here mentions left or right. */

/* Two months side by side where there is room, stacked where there is not. Booking
   usually happens within a few weeks, and those few weeks regularly cross a month
   boundary — one month at a time sends people hunting for a "next" button to reach
   next Tuesday. */
.calendars {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

.calendar {
  flex: 1 1 15rem;
  min-width: 0;
}

.cal-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.cal-month {
  font-size: 0.95rem;
  margin: 0 0 0.5rem;
}

/* Only the worked weekdays are columns, so the count comes from the server. */
.cal-grid {
  display: grid;
  grid-template-columns: repeat(var(--cal-columns, 5), 1fr);
  gap: 0.25rem;
}

.cal-dow {
  text-align: center;
  font-size: 0.7rem;
  color: var(--ink-soft);
  padding-bottom: 0.2rem;
}

/* The calendar is compact; the times below it are not. Choosing a day is a glance at a
   grid, choosing a time is the decision that matters. */
.cal-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  min-height: 2.2rem;
  border: 1px solid transparent;
  border-radius: 7px;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  line-height: 1.15;
}

.cal-num {
  font-size: 0.85rem;
}

/* A bookable day: outlined, and it states how many times it has. The number is the
   signal; the colour merely agrees with it. */
.cal-open {
  border-color: var(--accent);
  background: var(--page);
  color: var(--accent);
  font-weight: 600;
}

.cal-open:hover {
  background: var(--surface);
}

/* The word on a full day. Small, but a word — a shade of grey alone would be invisible
   to a reader who cannot separate it from the others. */
.cal-tag {
  font-size: 0.55rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Fully booked: a solid block with the word on it. Distinct from a closed day, which is
   flat and empty, and from an open one, which is outlined. Three states, three shapes. */
.cal-full {
  background: var(--surface);
  border-color: var(--border);
  color: var(--ink-soft);
  cursor: not-allowed;
}

/* The chosen day. Marked by a filled block AND by a thicker outline, so it is still
   obvious to someone who cannot separate the two colours. */
.cal-open.is-selected {
  background: var(--accent);
  color: var(--accent-ink);
  outline: 3px solid var(--accent);
  outline-offset: 1px;
}

/* No times. Dimmed and unbordered, and it carries no count — the absence of the number
   is what says "nothing here". */
.cal-shut {
  color: var(--ink-soft);
  opacity: 0.5;
}

/* Today, marked by an underline rather than a colour. */
.cal-cell.is-today .cal-num {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.daypanel {
  margin-top: 1.25rem;
}

/* --- the email log: filters and a real table ---------------------------------------

   Cards were fine for two accounts and wrong for a log. A card per message means one
   fact per line and a page that has to be scrolled to compare anything; the whole reason
   to open this screen is to scan down a column — who, when, did it leave — and that is a
   table's job.

   Built from the SHARED form controls: the filter row carries `.form` as well, so its
   fields are the same fields as everywhere else in the admin. This block is layout only. */

.filters {
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  align-items: end;
  gap: 0.8rem;
  margin-bottom: 1.25rem;
}

/* Scrolls inside its own box. Without this a wide table makes the entire document slide
   sideways on a phone, and the header and the back button go with it. */
.table-scroll {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--page);
}

.table {
  width: 100%;
  border-collapse: collapse;
}

.table th,
.table td {
  padding: 0.6rem 0.75rem;
  /* `inherit`, not `right`: this screen is Hebrew, but the rule is written so a table
     dropped into a left-to-right page still aligns with its own direction. */
  text-align: inherit;
  vertical-align: top;
  border-bottom: 1px solid var(--border);
}

/* Deliberately NOT sticky. `overflow-x` makes the wrapper a scroll container with no
   height of its own, so a sticky heading would stick to nothing — a rule that looks like
   it does something and does not. */
.table th {
  background: var(--surface);
  font-size: 0.85em;
  font-weight: 700;
  color: var(--ink-soft);
  white-space: nowrap;
}

/* Alternating rows, because a long line is read across and the eye loses which row it is
   on. A difference in LIGHTNESS, never in hue — it has to survive colourblindness, and it
   must not be mistaken for a status. Status is said in words, in its own column. */
.table tbody tr:nth-child(even) {
  background: var(--surface);
}

.table tbody tr:last-child td {
  border-bottom: 0;
}

.nowrap {
  white-space: nowrap;
}

body.admin .table th,
body.admin .table td {
  padding: 7px 10px;
}

/* --- the booking links on the admin home -------------------------------------------

   The meeting's name, and a button that copies its address. The name is the ONLY text in
   each one: the address is long, and printing it as well would make every chip as wide as
   a URL while adding nothing anybody presses. It is on the link and on the button.

   Not `.linkline`, which exists for showing a URL and is therefore 12px with
   `word-break: break-all` — right for an address, wrong for a Hebrew meeting name, which
   it would shrink and split mid-word. */

/* ACROSS, not down. One full-width row per link spent the whole width of the screen on a
   two-word name and turned four meeting types into four screenfuls of nothing. They sit
   beside each other now and wrap onto the next line only when they run out of room, so
   the list is as tall as it needs to be and no taller.

   This overrides the grid that `.plainlist` sets, which is why it must stay after it. */
.linklist {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Each one only as wide as its own contents — no stretching to share the row equally,
   which would make a short name and a long one occupy the same space and read as a table
   that is not one. */
.linklist li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 0 1 auto;
  padding: 0.4rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--page);
}

.linklist a {
  font-weight: 600;
  /* Kept on one line: a name broken across two lines inside a chip makes the row ragged
     and the chips stop reading as one band. */
  white-space: nowrap;
}