/* site.css - Trip Planner Management System.
   The customer website's design language (owner, 10/07/2026: "it should be similar to this website and speak the same
   language": iloveaustria.online): deep forest green, white rounded cards on a soft green-white page, pill buttons and
   pill tabs, Heebo for text and Assistant for headings - the website's own fonts.

   ONE ACCENT: --clr-action is the website's primary green (oklch(0.398 0.0945 145.5) = #1F5425), used for filled
   buttons, links, the active menu marks and everything pressed; 9.4:1 on white. Until 10/07/2026 a blue did that job.
   Destructive stays red so "approve" and "remove" can never be confused; the status badges keep their own colours.

   The shell (layout D): a slim green rail with the five menu groups, a white tab bar with the group's pages, the page. */

@import url('https://fonts.googleapis.com/css2?family=Assistant:wght@600;700;800&family=Heebo:wght@400;500;600;700&display=swap');

:root {
  --clr-bg:          #F5F7F4;
  --clr-surface:     #ffffff;
  --clr-border:      #E4E7EC;
  --clr-card-border: #DCE3DC;
  --clr-brand:       #1F5425;
  --clr-brand-light: #DCEBDD;
  --clr-brand-tint:  #F1F7F2;
  --clr-action:      #1F5425;
  --clr-action-hover:#163D1B;
  --clr-rail:        #1A4521;
  --clr-text:        #1C2230;
  --clr-text-muted:  #5B6472;
  --clr-success:     #046C4E;
  --clr-success-bg:  #E6F4EE;
  --clr-warning:     #8A4B00;
  --clr-warning-bg:  #FFF4E0;
  --clr-danger:      #B42318;
  --clr-danger-bg:   #FDECEA;
  --clr-grid-head:   #F4F7F4;

  --control-radius:    10px;
  --control-font-size: 0.875rem;
  --control-height:    36px;
  --radius-card:       16px;
  --shadow-card:       0 1px 3px rgba(28, 34, 48, 0.06);
  --focus-ring:        0 0 0 3px rgba(31, 84, 37, 0.25);
  --font-display:      'Assistant', 'Heebo', system-ui, sans-serif;
  --rail-width:        92px;
}

* { box-sizing: border-box; }

html, body { margin: 0; }

body {
  background: var(--clr-bg);
  color: var(--clr-text);
  font-family: 'Heebo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 15px;
  line-height: 1.45;
}

h1, h2, h3, h4 { font-family: var(--font-display); }

a { color: var(--clr-action); }
a:hover { color: var(--clr-action-hover); }

/* Hebrew content is right-to-left and set in Heebo; the interface stays English */
.he { direction: rtl; unicode-bidi: plaintext; font-family: 'Heebo', sans-serif; }

/* ── The shell: the rail, then the tab bar and the page ── */
.shell { display: flex; min-height: 100vh; }
.shell-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }

.rail {
  flex: 0 0 var(--rail-width); position: sticky; top: 0; height: 100vh; z-index: 1001;
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 6px;
  background: var(--clr-rail);
}
.rail-brand { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 14px; }
.rail-brand img { width: 40px; height: 40px; border-radius: 12px; }
.rail-item {
  width: 80px; min-height: 60px; padding: 8px 0; border-radius: 16px; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 4px; color: #E6EFE7; text-decoration: none; font-size: 0.75rem; font-weight: 500;
  text-align: center; line-height: 1.2; /* a two-word label ("Customer Support") wraps centred */
}
.rail-item:hover { background: rgba(255, 255, 255, 0.10); color: #fff; }
.rail-item.active { background: var(--clr-surface); color: var(--clr-rail); font-weight: 700; }
.rail-item:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.tabbar { position: sticky; top: 0; z-index: 1000; background: var(--clr-surface); border-bottom: 1px solid var(--clr-border); }
.tabbar-inner { display: flex; align-items: center; gap: 6px 18px; min-height: 56px; padding: 0 24px; flex-wrap: wrap; }
.tabbar-title { font-family: var(--font-display); font-size: 1.2rem; font-weight: 800; }
.tabbar-tabs { display: flex; gap: 2px; flex: 1 1 auto; min-width: 0; overflow-x: auto; }
.tabbar-tabs a {
  padding: 17px 12px 15px; text-decoration: none; color: var(--clr-text-muted); font-weight: 600; font-size: 0.9rem;
  white-space: nowrap; border-bottom: 3px solid transparent;
}
.tabbar-tabs a:hover { color: var(--clr-text); }
.tabbar-tabs a.active { color: var(--clr-brand); border-bottom-color: var(--clr-brand); }

.user-area { display: flex; align-items: center; gap: 10px; margin-left: auto; font-size: 0.87rem; color: var(--clr-text-muted); }
.user-avatar {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: var(--clr-brand-light); color: var(--clr-brand); font-weight: 700;
}
.logout-link { color: var(--clr-text); text-decoration: none; border: 1px solid var(--clr-card-border); border-radius: 999px; padding: 5px 14px; }
.logout-link:hover { color: var(--clr-text); background: var(--clr-grid-head); }

/* the brand row of the sign-in card, which has no shell */
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--clr-text); font-weight: 700; font-family: var(--font-display); }
.brand img { width: 34px; height: 34px; border-radius: 10px; }
.brand span { white-space: nowrap; }

/* ── Page ── */
.page { width: 100%; max-width: 1320px; margin: 0 auto; padding: 24px 24px 48px; }
.page-title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 16px; }
.page-title h1 { margin: 0; font-size: 1.75rem; font-weight: 800; line-height: 1.15; }
.page-title .subtitle { color: var(--clr-text-muted); font-size: 0.9rem; }

.card {
  background: var(--clr-surface); border: 1px solid var(--clr-card-border); border-radius: var(--radius-card);
  box-shadow: var(--shadow-card); padding: 18px 20px; margin-bottom: 16px;
}
.card h2 { margin: 0 0 12px; font-size: 1.2rem; font-weight: 700; }
.card h3 { margin: 16px 0 8px; font-size: 1.02rem; font-weight: 700; }
.muted { color: var(--clr-text-muted); }
/* the customer website's rating chip, in its own colours (--secondary / --secondary-foreground), so the owner sees the number the visitor sees */
.rating-chip { display: inline-flex; align-items: center; gap: 4px; border-radius: 999px; padding: 2px 10px; font-size: 0.8rem; font-weight: 600; background: oklch(0.97 0.008 150); color: oklch(0.398 0.0945 145.5); margin-inline-end: 6px; }
.small { font-size: 0.84rem; }

.flash { background: var(--clr-success-bg); color: var(--clr-success); border: 1px solid #B7E0CE; border-radius: var(--radius-card); padding: 10px 14px; margin-bottom: 16px; font-weight: 600; }
.errors { background: var(--clr-danger-bg); color: var(--clr-danger); border: 1px solid #F5C2BD; border-radius: var(--radius-card); padding: 10px 14px; margin-bottom: 16px; }
.errors ul { margin: 6px 0 0 18px; padding: 0; }

/* ── Website cards ── */
.site-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; }
/* Countries > Add country (owner, 10/08/2026): one row on a wide screen, stacked on a phone */
.add-country { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; max-width: 640px; margin-top: 8px; }
.add-country h2 { width: 100%; margin: 0; }
.add-country select { flex: 1 1 240px; min-width: 0; padding: 8px; }
.site-card h2 { display: flex; align-items: center; gap: 8px; }
.hostnames { list-style: none; padding: 0; margin: 0 0 14px; }
.hostnames li { display: flex; align-items: center; gap: 8px; padding: 3px 0; font-size: 0.9rem; flex-wrap: wrap; }
.kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.kpi { border: 1px solid var(--clr-border); border-radius: 14px; padding: 12px 16px; background: var(--clr-brand-tint); text-decoration: none; color: inherit; }
a.kpi:hover { border-color: var(--clr-action); }
.kpi .value { font-family: var(--font-display); font-size: 1.9rem; font-weight: 800; color: var(--clr-brand); }
.kpi .label { font-size: 0.8rem; color: var(--clr-text-muted); }
.kpi.attention .value { color: var(--clr-warning); }

/* ── Badges ── */
.badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 0.75rem; font-weight: 700; white-space: nowrap; border: 1px solid transparent; }
.badge-new, .badge-changed { background: #E8EEFD; color: #1E3A8A; }
.badge-conflict { background: var(--clr-warning-bg); color: var(--clr-warning); }
.badge-approved { background: var(--clr-success-bg); color: var(--clr-success); }
.badge-rejected { background: var(--clr-danger-bg); color: var(--clr-danger); }
.badge-promoted, .badge-live { background: var(--clr-brand-light); color: var(--clr-brand); }
.badge-neutral { background: #EEF0F3; color: var(--clr-text-muted); }

/* ── Tabs and toolbar ── */
.tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.tab { display: inline-flex; align-items: center; min-height: 36px; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--clr-card-border); background: var(--clr-surface); color: var(--clr-text); text-decoration: none; font-weight: 600; font-size: 0.85rem; }
.tab:hover { background: var(--clr-brand-tint); color: var(--clr-text); }
.tab.active { border-color: var(--clr-brand); color: #fff; background: var(--clr-brand); }
.tab .count { margin-left: 6px; color: var(--clr-text-muted); font-weight: 500; }
.tab.active .count { color: #E6EFE7; }
.toolbar { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }

/* ── Tables ── */
.table-wrap { overflow-x: auto; }
table.grid { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
table.grid th { text-align: left; background: var(--clr-grid-head); color: var(--clr-text-muted); font-weight: 600; padding: 8px 10px; border-bottom: 1px solid var(--clr-border); white-space: nowrap; }
table.grid td { padding: 8px 10px; border-bottom: 1px solid var(--clr-border); vertical-align: top; }
table.grid tr.clickable { cursor: pointer; }
table.grid tr.clickable:hover td { background: var(--clr-brand-tint); }

/* ── Forms ── */
label { display: block; font-size: 0.8rem; font-weight: 600; color: var(--clr-text-muted); margin-bottom: 4px; }
input[type=text], input[type=email], input[type=search], input[type=password], input[type=number], input[type=url], input[type=date], input[type=time], select, textarea {
  width: 100%; min-height: var(--control-height); padding: 6px 10px; font: inherit; font-size: var(--control-font-size);
  border: 1px solid var(--clr-border); border-radius: var(--control-radius); background: var(--clr-surface); color: var(--clr-text);
}
textarea { min-height: 70px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--clr-action); box-shadow: var(--focus-ring); }
.check { display: flex; align-items: center; gap: 8px; font-weight: 500; color: var(--clr-text); font-size: 0.9rem; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px 16px; }
.field-was { font-size: 0.76rem; color: var(--clr-warning); margin-top: 3px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: var(--control-height);
  padding: 6px 16px; border-radius: 999px; border: 1px solid var(--clr-card-border); background: var(--clr-surface);
  color: var(--clr-text); font: inherit; font-size: var(--control-font-size); font-weight: 600; cursor: pointer; text-decoration: none;
}
.btn:hover { border-color: var(--clr-card-border); background: var(--clr-grid-head); }
.btn-primary { background: var(--clr-action); border-color: var(--clr-action); color: #fff; }
.btn-primary:hover { background: var(--clr-action-hover); border-color: var(--clr-action-hover); color: #fff; }
.btn-danger { background: var(--clr-surface); border-color: #F5C2BD; color: var(--clr-danger); }
.btn-danger:hover { background: var(--clr-danger-bg); }

/* ── Review screen ── */
.review-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.review-map { height: 380px; border-radius: 8px; border: 1px solid var(--clr-border); }
.decision-bar {
  position: sticky; bottom: 0; z-index: 900; background: var(--clr-surface); border: 1px solid var(--clr-card-border);
  border-radius: var(--radius-card); box-shadow: 0 -2px 10px rgba(11, 37, 69, 0.08); padding: 12px 16px;
  display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap;
}
.decision-bar .note { flex: 1 1 280px; }
.activity { border: 1px solid var(--clr-border); border-radius: 8px; padding: 12px; margin-bottom: 12px; }
.activity-head { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: baseline; }
.activity-head strong { font-size: 0.95rem; }
.quote { background: var(--clr-grid-head); border-left: 3px solid var(--clr-card-border); padding: 6px 10px; margin: 8px 0; font-size: 0.86rem; white-space: pre-wrap; }
.limits { display: flex; gap: 14px; flex-wrap: wrap; font-size: 0.86rem; margin: 6px 0; }
.owner-panel { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--clr-border); }
.owner-panel .form-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.clearance-options { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 8px; }
.clearance-options label { display: flex; gap: 6px; align-items: center; font-weight: 500; color: var(--clr-text); font-size: 0.88rem; margin: 0; }
.notes-box { white-space: pre-wrap; font-size: 0.86rem; }
dl.facts { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; margin: 0; font-size: 0.88rem; }
dl.facts dt { color: var(--clr-text-muted); }
dl.facts dd { margin: 0; overflow-wrap: anywhere; }

/* ── Sign-in ── */
.login-shell { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.login-card { width: 100%; max-width: 380px; }
.login-card .brand { justify-content: center; margin-bottom: 18px; font-size: 1.05rem; }
.login-card .field { margin-bottom: 12px; }
.login-card .btn-primary { width: 100%; margin-top: 6px; }

/* ── Database view ── */
.db-layout { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 16px; align-items: start; }
.db-tables { padding: 12px; position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow-y: auto; }
.db-tables h2 { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--clr-text-muted); margin: 6px 6px 6px; }
.db-tables ul { list-style: none; margin: 0 0 10px; padding: 0; }
.db-tables a { display: flex; align-items: center; gap: 6px; padding: 7px 8px; border-radius: var(--control-radius); text-decoration: none; color: var(--clr-text); font-size: 0.86rem; min-height: 32px; }
.db-tables a:hover { background: var(--clr-grid-head); }
.db-tables a.active { background: var(--clr-brand-tint); box-shadow: inset 3px 0 0 var(--clr-brand); font-weight: 600; }
.db-tables .name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.db-tables .count { color: var(--clr-text-muted); font-variant-numeric: tabular-nums; font-size: 0.8rem; }
.db-content { min-width: 0; }
.db-heading { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.db-heading h2 { margin: 0; font-size: 1.08rem; }
table.db-grid th a { color: inherit; text-decoration: none; }
table.db-grid th a:hover { color: var(--clr-action); }
table.db-grid td { max-width: 26rem; overflow-wrap: anywhere; white-space: pre-wrap; }
table.db-grid .num { text-align: right; font-variant-numeric: tabular-nums; }
.pager { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.pager-buttons { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pager-size { display: flex; align-items: center; gap: 8px; margin: 0; }
.pager-size select { width: auto; min-height: 36px; margin-left: 6px; }

/* ── Phone ── */
@media (max-width: 760px) {
  .shell { flex-direction: column; }
  .rail { position: static; height: auto; flex: none; flex-direction: row; gap: 2px; padding: 6px 8px; overflow-x: auto; }
  .rail-brand { width: 36px; height: 36px; margin: 0 4px 0 0; flex: 0 0 auto; }
  .rail-brand img { width: 34px; height: 34px; }
  .rail-item { flex: 1 0 auto; width: auto; min-width: 56px; min-height: 52px; padding: 6px 4px; }
  /* the rail already names the group, so the tab bar keeps only the tabs and Sign out, on one line */
  .tabbar-inner { padding: 0 12px 0 4px; flex-wrap: nowrap; gap: 8px; }
  .tabbar-title, .user-avatar, .user-name { display: none; }
  .tabbar-tabs a { padding: 15px 10px 13px; }
  .logout-link { white-space: nowrap; padding: 4px 12px; }
}
@media (max-width: 900px) {
  .review-layout { grid-template-columns: 1fr; }
  .page { padding: 16px 16px 40px; }
  .kpis { grid-template-columns: 1fr 1fr; }
  .site-grid { grid-template-columns: 1fr; }
  .db-layout { grid-template-columns: 1fr; }
  .db-tables { position: static; max-height: 280px; }
  dl.facts { grid-template-columns: 1fr; gap: 0; }
  dl.facts dt { margin-top: 10px; font-weight: 600; }
  dl.facts dd { margin-bottom: 2px; }
  .appearance { padding: 10px; }
  .appearance-head { align-items: flex-start; }
}

/* System settings - one card per setting, readable on a phone and on a desktop */
.setting-card { margin-bottom: 14px; }
.setting-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.setting-key { font-size: 0.95rem; font-weight: 600; word-break: break-all; }
.setting-title { flex-basis: 100%; font-size: 1.05rem; }
.setting-state { font-size: 0.75rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.setting-state.on { background: #dcfae6; color: #085d3a; }
.setting-state.off { background: #eceff3; color: #475467; }
.setting-description { margin: 8px 0 12px; color: #475467; line-height: 1.55; }
/* a setting a published legal page quotes (database update 053): the warning in red, the card edged in red */
.setting-card.is-policy { border-color: #f04438; }
.setting-policy { margin: 0 0 12px; padding: 8px 12px; color: #b42318; background: #fef3f2; border: 1px solid #fecdca; border-radius: 8px; line-height: 1.5; }
/* the legal pages block (owner, 10/05/2026): one red note, then each setting as a row divided by a line */
.legal-block-title { margin: 0 0 10px; font-size: 1.1rem; }
.legal-block-row { padding: 14px 0; border-top: 1px solid #fecdca; }
.legal-block-row:last-child { padding-bottom: 0; }
.setting-form { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.setting-form input[type="number"], .setting-form select { padding: 7px 10px; border: 1px solid #d0d5dd; border-radius: 8px; min-width: 120px; }
/* a control placed straight in the row keeps its own width, so its unit, Save and range note stay on its line. The
   global input rule makes every input width 100%, which pushed them underneath on all 15 System settings (10/04/2026) */
.setting-form > input[type="number"], .setting-form > select { width: auto; flex: 0 1 220px; }
.setting-form > input.setting-text { width: auto; flex: 1 1 320px; max-width: 560px; min-width: 0; }
/* a labelled text area (the Incident notes) takes the whole row, so the note boxes are one width, not their label's */
.setting-form > label:has(textarea) { flex: 1 1 100%; margin: 0; }
.setting-unit { color: #475467; }
.setting-range { color: #667085; font-size: 0.85rem; }
.setting-meta { margin: 10px 0 0; color: #667085; font-size: 0.85rem; }

@media (max-width: 640px) {
  .setting-form { align-items: stretch; }
  .setting-form input[type="number"], .setting-form select { width: 100%; min-width: 0; }
  .setting-form > input[type="number"], .setting-form > select, .setting-form > input.setting-text { flex: 1 1 100%; max-width: 100%; }
  .setting-form .btn { width: 100%; }
  .setting-range { width: 100%; }
}

/* ── Attraction screen: the evidence half and the our-data half ── */
.section-number { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px;
  border-radius: 50%; background: var(--clr-accent, #2F6F4F); color: #fff; font-size: 14px; margin-inline-end: 8px; }
.section-lead { margin: -4px 0 14px; color: var(--clr-muted, #6B7280); font-size: 14px; line-height: 1.5; }
.section-evidence { border-inline-start: 4px solid #8FA8C8; }
.section-ours { border-inline-start: 4px solid #2F6F4F; }
.appearance { border: 1px solid var(--clr-border, #E5E7EB); border-radius: 10px; padding: 12px 14px; margin-bottom: 14px; }
.appearance-head { display: flex; justify-content: space-between; align-items: center; gap: 10px;
  flex-wrap: wrap; margin-bottom: 4px; }
.appearance .facts { margin-top: 10px; }
.appearance { overflow-wrap: anywhere; }

/* the deep sweep's own evidence cards, beneath the sites that listed the attraction. A source that was read
   and gave nothing is shown faded rather than hidden: "we looked at the operator's site and it did not answer"
   is a fact the owner needs, and hiding it makes a gap look like an oversight. */
.sweep-head { margin-top: 20px; }
.source-evidence { background: #FBFCFE; }
.source-empty { opacity: 0.62; }
.source-fields dt { color: #4A5568; }
.source-raw { margin-top: 10px; }
.source-raw summary { cursor: pointer; color: #2B6CB0; }
/* a grid item's default min-width:auto is its MIN-CONTENT width, so one unbreakable child widens the
   whole column and the page scrolls sideways on a phone. min-width:0 lets the column shrink instead. */
.review-layout > *, .review-layout .card { min-width: 0; }
.chip-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.chip { display: inline-block; padding: 3px 10px; border-radius: 999px; background: #F1F3F5;
  border: 1px solid var(--clr-border, #E5E7EB); font-size: 13px; }
.chip-yes { background: #E7F3EC; border-color: #B7D9C4; }

/* -- What the website needs: the per-field checklist and the readiness chip -- */
.readiness { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; }
.readiness-bar { flex: 1; height: 8px; border-radius: 999px; background: #E9ECEF; overflow: hidden; }
.readiness-bar span { display: block; height: 100%; background: #2F6F4F; }
.field-list { list-style: none; margin: 0 0 14px; padding: 0; }
.field-row { display: flex; gap: 10px; padding: 8px 10px; border-radius: 8px; margin-bottom: 4px; }
.field-row.is-present { background: #F4F8F5; }
.field-row.is-missing { background: #FDF4F4; border: 1px solid #F0D2D2; }
.field-mark { font-weight: 700; line-height: 1.4; }
.field-row.is-present .field-mark { color: #2F6F4F; }
.field-row.is-missing .field-mark { color: #B3412F; }
.field-body { min-width: 0; }
.field-value { font-size: 0.88rem; overflow-wrap: anywhere; }
.field-missing-label { font-size: 0.85rem; color: #B3412F; }
.field-note { font-size: 0.82rem; color: var(--clr-text-muted); margin-top: 2px; }
.readiness-chip { display: inline-block; padding: 2px 9px; border-radius: 999px; font-variant-numeric: tabular-nums; }
.ready-high { background: #E7F3EC; color: #1F5138; }
.ready-mid { background: #FDF3E2; color: #7A5316; }
.ready-low { background: #FBE9E7; color: #8A2F22; }

/* -- The coverage panel above the attractions table -- */
.coverage-panel summary { cursor: pointer; display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.coverage-panel summary::marker { color: var(--clr-text-muted); }
.coverage-panel h3 { margin: 14px 0 8px; }
.coverage-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px 16px; }
.coverage-item { min-width: 0; }
.coverage-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
  font-size: 0.88rem; margin-bottom: 4px; }
.coverage-head span { min-width: 0; overflow-wrap: anywhere; }
.coverage-item .readiness-bar { height: 6px; }
.ready-text-high { color: #1F5138; }
.ready-text-mid { color: #7A5316; }
.ready-text-low { color: #8A2F22; }

/* -- The coverage TABLE: one row per website field, sortable, scrolling in both directions -- */
/* The box scrolls rather than the page so the table can be read against the list below it, and the head
   stays put because a percentage with the column heading scrolled away is a number without a question. */
.coverage-scroll { max-height: 62vh; overflow: auto; border: 1px solid var(--clr-border); border-radius: 10px; }
table.coverage-table { min-width: 880px; }
table.coverage-table th { position: sticky; top: 0; z-index: 2; }
table.coverage-table td { vertical-align: top; }
table.coverage-table tbody tr:hover td { background: var(--clr-brand-tint); }
table.coverage-table th.sortable { cursor: pointer; user-select: none; padding-right: 20px; position: sticky; }
table.coverage-table th.sortable:hover { color: var(--clr-text); }
/* The arrows are LITERAL characters, not CSS escapes. A backslash escape did not survive the shell
   that first wrote this file and landed as a control character, which rendered beside each heading as
   the stray text "95". A literal glyph cannot be mangled between here and the browser. */
table.coverage-table th.sortable::after { content: "↕"; position: absolute; right: 7px; opacity: 0.35; }
table.coverage-table th[aria-sort="ascending"]::after { content: "↑"; opacity: 1; }
table.coverage-table th[aria-sort="descending"]::after { content: "↓"; opacity: 1; }
table.coverage-table th.sortable:focus-visible { outline: 2px solid var(--clr-action); outline-offset: -2px; }
table.coverage-table .readiness-bar { height: 6px; max-width: 120px; margin: 4px 0; }

/* the real screenshot of the customer site, cropped to this field; clicking it enlarges the page */
/* A CROP rather than the whole page shrunk: 1280 x 2163 inside a 148-pixel cell is an unreadable
   smudge, while the crop shows the actual row or button with its own text in it. */
.where-cell { display: flex; gap: 10px; align-items: flex-start; }
.where-text { min-width: 0; }
.surface-thumb { position: relative; flex: 0 0 190px; width: 190px; height: 118px; padding: 0; cursor: zoom-in;
  border: 1px solid var(--clr-card-border); border-radius: 6px; background: #FAFBFC; overflow: hidden; }
.surface-thumb:hover { border-color: var(--clr-action); }
.surface-thumb:focus-visible { outline: 2px solid var(--clr-action); outline-offset: 1px; }
.surface-thumb-view { position: absolute; inset: 0; background-repeat: no-repeat; }
.surface-thumb-zoom { position: absolute; right: 3px; bottom: 2px; font-size: 0.72rem; line-height: 1;
  padding: 2px 4px; border-radius: 4px; background: rgba(255,255,255,0.86); color: var(--clr-text-muted); }
.surface-thumb-none { cursor: default; background:
  repeating-linear-gradient(45deg, #F7F8FA, #F7F8FA 4px, #EFF1F4 4px, #EFF1F4 8px); }

/* the enlarged view: the whole surface, with everything outside the field's own area dimmed away */
.surface-viewer { position: fixed; inset: 0; z-index: 2000; background: rgba(17,20,24,0.62);
  display: flex; align-items: center; justify-content: center; padding: 24px; }
/* display:flex above beats the browser's own [hidden] { display: none }, so the closed overlay leaked a
   floating Close button onto the page. Seen on screen 09/25/2026 the first time the table was opened. */
.surface-viewer[hidden] { display: none; }
body.surface-viewer-open { overflow: hidden; }
.surface-viewer-box { background: var(--clr-surface); border-radius: 12px; max-width: min(1100px, 94vw);
  max-height: 92vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 18px 60px rgba(0,0,0,0.35); }
.surface-viewer-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px;
  padding: 12px 16px; border-bottom: 1px solid var(--clr-border); }
.surface-viewer-stage { overflow: auto; padding: 0; background: #F3F4F6; }
.surface-viewer-frame { position: relative; display: block; }
.surface-viewer-frame img { display: block; width: 100%; height: auto; }
/* the ring, plus a shadow big enough to dim the entire rest of the picture */
.surface-viewer-mark { position: absolute; border: 3px solid #E8501E; border-radius: 10px;
  box-shadow: 0 0 0 9999px rgba(17,20,24,0.55); pointer-events: none; }

/* which websites filled the field, and in what share */
.source-shares { display: flex; flex-direction: column; gap: 3px; margin-bottom: 4px; }
.source-share { display: grid; grid-template-columns: 54px 1fr auto; align-items: center; gap: 8px; font-size: 0.82rem; }
.source-share-bar { height: 6px; border-radius: 999px; background: #E9ECEF; overflow: hidden; }
.source-share-bar span { display: block; height: 100%; background: #2F6F4F; }
.source-share-name { overflow-wrap: anywhere; }
.source-share strong { font-variant-numeric: tabular-nums; }

@media (max-width: 720px) {
  .coverage-scroll { max-height: 70vh; }
  .wireframe { width: 56px; flex-basis: 56px; }
}

/* Attraction websites: an editable link per website, and the add form (owner direction 09/27/2026) */
.source-link-row { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.source-link-row input[type=url] { min-width: 320px; font-size: 0.85rem; }
.source-link-label { flex: 0 0 104px; font-size: 0.78rem; color: var(--clr-text-muted); }
.source-link-open-placeholder { visibility: hidden; }
.source-add-form label { display: flex; flex-direction: column; gap: 4px; font-size: 0.85rem; font-weight: 600; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Attractions list: views, filters, table and pages in one bordered area (owner direction 09/27/2026) */
.list-panel-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.list-panel-head h2 { margin-bottom: 10px; }
.list-panel-table { margin: 0 -20px; border-top: 1px solid var(--clr-card-border); border-bottom: 1px solid var(--clr-card-border); }
.list-panel .pager { margin-top: 12px; }

/* Trips Planning (09/30/2026): the list reuses the Attractions list panel; the detail reuses the Attraction
   screen's two halves. Only what those screens do not already have is added here. */
.trip-error-text { max-width: 22rem; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.trip-minisite { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.trip-minisite code { overflow-wrap: anywhere; }
.trip-step { border-top: 1px solid var(--clr-border); padding-top: 10px; margin-top: 12px; }
.trip-step:first-of-type { border-top: 0; margin-top: 0; padding-top: 0; }
.trip-step h3 { margin: 0 0 8px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.trip-step-number { font-size: 0.75rem; font-weight: 700; color: var(--clr-brand); background: var(--clr-brand-light);
  border-radius: 999px; padding: 1px 8px; }
/* one label column for every wizard step, so the answers line up down the whole section; answers in Hebrew keep
   their own direction (dir="auto") but start at the same edge as the English ones */
.trip-step dl.facts { grid-template-columns: 12rem minmax(0, 1fr); }
.trip-answer { white-space: pre-wrap; text-align: left; }
@media (max-width: 900px) { .trip-step dl.facts { grid-template-columns: 1fr; } }
.trip-problems { margin: 4px 0 0 18px; padding: 0; }
.trip-timeline { margin: 0 0 8px; padding-left: 20px; font-size: 0.88rem; }
.trip-timeline li { margin-bottom: 4px; overflow-wrap: anywhere; }
.raw-json { max-height: 70vh; overflow: auto; margin: 12px 0 0; padding: 12px; background: var(--clr-grid-head);
  border: 1px solid var(--clr-border); border-radius: 8px; font-size: 0.8rem; line-height: 1.4; white-space: pre-wrap;
  overflow-wrap: anywhere; }

/* Trip costs (10/03/2026): what one trip and each feature cost. One colour per feature (Trip_cost_rules.FEATURES), checked
   with a colour-vision validator; green and amber sit close for protanopia, so every bar keeps a 2px gap between its
   segments and every amount is also written in text beside it - colour is never the only way to read a feature. */
.feature-planning { background: #2E8B57; }
.feature-changes { background: #C27C0E; }
.feature-advisor { background: #1D4ED8; }
.feature-memory { background: #8E6FD8; }
/* trip import (10/10/2026): magenta, far from the green and amber of the planning features for every colour vision */
.feature-import { background: #C2185B; }
/* places search (10/12/2026): teal, apart from the green, amber, blue, violet and magenta of the other features */
.feature-places { background: #00838F; }
/* the first plans split by trip import, under the Trip planning row, and the paid-trip average under the total */
.planning-split { margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--clr-border); display: grid; gap: 2px; }
.paid-trip-average { margin-top: 6px; }
.feature-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 3px; vertical-align: baseline; flex: 0 0 10px; }
.cost-bar { display: flex; gap: 2px; height: 10px; border-radius: 4px; background: #EEF0F3; overflow: hidden; margin: 8px 0; min-width: 80px; }
.cost-seg { display: block; flex-grow: 0; flex-shrink: 1; min-width: 2px; }
.cost-seg:first-child { border-radius: 4px 0 0 4px; }
.cost-seg:last-child { border-radius: 0 4px 4px 0; }
.cost-seg:only-child { border-radius: 4px; }
.cost-bar-cell { min-width: 120px; vertical-align: middle !important; }
.cost-bar-cell .cost-bar { margin: 0; }
.share-bar { height: 6px; border-radius: 999px; background: #EEF0F3; overflow: hidden; margin: 4px 0; max-width: 160px; }
.share-bar span { display: block; height: 100%; border-radius: 999px; }
.cost-period-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 10px; }
.cost-period { border: 1px solid var(--clr-border); border-radius: 8px; padding: 12px 14px; background: var(--clr-grid-head); min-width: 0; }
.cost-period-label { font-size: 0.8rem; font-weight: 600; color: var(--clr-text-muted); }
.cost-headline { font-size: 1.6rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.25; margin-top: 2px; }
.cost-legend { list-style: none; margin: 0 0 6px; padding: 0; font-size: 0.82rem; }
.cost-legend li { display: flex; align-items: center; gap: 6px; padding: 1px 0; }
.cost-legend-label { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.cost-legend-value { font-variant-numeric: tabular-nums; font-weight: 600; }
table.feature-cost-table td { min-width: 150px; }
table.feature-cost-table td:first-child { min-width: 170px; }
table.grid tr.cost-total-row td { background: var(--clr-grid-head); border-top: 2px solid var(--clr-card-border); }
.feature-definitions { margin-top: 12px; }
.feature-definitions dt { display: flex; align-items: center; gap: 6px; }
.trip-cost-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.trip-cost-subhead { margin: 14px 0 6px; font-size: 0.88rem; }
/* the model choice per AI service (10/04/2026, owner: "make sure all fields are aligned properly"): a two-row grid -
   Model (wide) and Fallback, then Longest answer, Cache lifetime and Save - every control 40px high, bottom-aligned */
.ai-service-form { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 14px; align-items: end; margin-top: 4px; }
.ai-service-form .ai-field { margin: 0; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ai-service-form .ai-field-model { grid-column: 1 / span 3; }
.ai-service-form .ai-field-fallback { grid-column: 4; }
.ai-service-form .ai-field-tokens { grid-column: 1; }
.ai-service-form .ai-field-cache { grid-column: 2; }
.ai-service-form .ai-field-save { grid-column: 4; }
.ai-service-form .ai-field-rank { grid-column: 3; }
.ai-service-form select, .ai-service-form input[type="number"], .ai-service-form .btn { height: 40px; box-sizing: border-box; width: 100%; max-width: 100%; margin: 0; }
.ai-service-form .ai-field-save .btn { width: auto; min-width: 110px; }
.ai-input-with-unit { display: flex; align-items: center; gap: 8px; }
.ai-input-with-unit input { flex: 1 1 auto; min-width: 0; }
.ai-field-hint { font-weight: 400; color: var(--clr-text-muted); margin-left: 4px; }
@media (max-width: 700px) {
  .ai-service-form { grid-template-columns: 1fr; }
  .ai-service-form .ai-field-model, .ai-service-form .ai-field-fallback, .ai-service-form .ai-field-tokens,
  .ai-service-form .ai-field-cache, .ai-service-form .ai-field-save, .ai-service-form .ai-field-rank { grid-column: 1; }
  .ai-service-form .ai-field-save .btn { width: 100%; }
}

/* the Trip costs date range (10/04/2026): one range for the whole screen, so the trip-cost card stands alone */
.cost-period-grid.cost-period-single { grid-template-columns: minmax(0, 420px); }
.cost-range-form { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.cost-range-form label { display: flex; flex-direction: column; gap: 4px; font-size: 0.85rem; font-weight: 600; }
.cost-range-form input[type="date"] { min-height: 40px; }
.cost-range-presets { margin-bottom: 6px; }
@media (max-width: 900px) {
  .cost-period-grid { grid-template-columns: 1fr 1fr; }
  .cost-period-grid.cost-period-single { grid-template-columns: minmax(0, 420px); }
}
@media (max-width: 560px) {
  .cost-period-grid, .cost-period-grid.cost-period-single { grid-template-columns: 1fr; }
}

/* Trip costs - how the families rate the advisor's answers (10/04/2026): four figures, then the reasons as counted chips */
.rating-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 12px; }
.rating-stat { border: 1px solid var(--clr-border); border-radius: 8px; padding: 10px 14px; background: var(--clr-grid-head); min-width: 0; }
.rating-stat-value { font-size: 1.35rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.3; }
.rating-reasons-title { font-size: 0.95rem; margin: 14px 0 6px; }
.rating-reasons { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.rating-reason { display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; padding: 3px 10px; font-size: 0.82rem; border: 1px solid transparent; }
.rating-reason.is-up { background: var(--clr-success-bg); color: var(--clr-success); border-color: #B7E0CE; }
.rating-reason.is-down { background: var(--clr-danger-bg); color: var(--clr-danger); border-color: #F5C2BD; }

/* Trip costs - model decisions (10/04/2026): the reason is the widest column and wraps */
table.grid td.decision-reason { min-width: 280px; max-width: 520px; white-space: normal; overflow-wrap: anywhere; }

/* Attraction websites: the photo permission per website (migration 060, owner 10/05/2026) - the box and its state on one
   line, the proof note under it */
.photo-permission { min-width: 0; }
.photo-permission-tick { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; font-weight: 600; }
.photo-permission input[type="text"] { width: 100%; min-width: 0; }
.photo-permission-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 6px; }
.photo-permission-head .photo-permission-tick { margin: 0; }
.photo-permission-problem { color: var(--clr-danger); font-weight: 600; margin-top: 4px; }

/* the information icon beside the box, and the photo policy panel it opens (migration 072, owner 10/06/2026); the
   icon's colour says the finding at a glance: green usable, amber allowed with a condition we may not meet, grey none */
.photo-policy-icon { width: 22px; height: 22px; flex: none; border-radius: 999px; border: 1.5px solid currentColor; background: var(--clr-surface);
  font: italic 700 0.8rem/1 Georgia, serif; cursor: pointer; padding: 0; color: var(--clr-text-muted); }
.photo-policy-icon.is-usable { color: var(--clr-success); background: var(--clr-success-bg); }
.photo-policy-icon.is-partial { color: var(--clr-warning); background: var(--clr-warning-bg); }
.photo-policy-icon.is-no { color: var(--clr-text-muted); }
.photo-policy-icon.is-unknown { color: #A0A7B2; border-style: dashed; }
.photo-policy-icon:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.photo-policy-panel { width: min(640px, calc(100vw - 32px)); max-height: min(80vh, 720px); overflow: auto; margin: auto; padding: 16px 18px;
  border: 1px solid var(--clr-card-border); border-radius: var(--radius-card); background: var(--clr-surface); color: var(--clr-text);
  box-shadow: 0 12px 40px rgba(11, 37, 69, 0.25); font-size: 0.9rem; white-space: normal; text-align: start; }
.photo-policy-panel::backdrop { background: rgba(11, 37, 69, 0.25); }
.photo-policy-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.photo-policy-verdict { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
/* the words to type into the browser's search box on a policy page, and the link that opens the page at them (owner,
   10/06/2026: "tell me what text to search in this page") */
.photo-policy-search { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin-top: 4px; }
.photo-policy-search mark { padding: 1px 6px; border-radius: 4px; background: var(--clr-warning-bg); color: inherit; font-weight: 600;
  overflow-wrap: break-word; }
.photo-policy-panel h4 { margin: 14px 0 6px; font-size: 0.9rem; }
.photo-policy-panel ul { margin: 0; padding-inline-start: 18px; }
.photo-policy-panel li { margin-bottom: 6px; overflow-wrap: anywhere; }
.photo-policy-panel blockquote { margin: 4px 0 0; padding: 4px 10px; border-inline-start: 3px solid var(--clr-card-border);
  color: var(--clr-text-muted); font-style: italic; }
.photo-policy-conditions { width: 100%; }
.photo-policy-conditions td { vertical-align: top; }
.photo-policy-conditions td:last-child, .photo-policy-conditions th:last-child { width: 1%; white-space: nowrap; overflow-wrap: normal; }

/* System Configuration > System: the purchase packages section (trip_planner migration 071, owner 10/06/2026) - the
   overview table, then one folding form per package and one to add a package */
.packages-section .package-table td { min-width: 110px; }
.packages-section .package-table td:first-child { min-width: 180px; overflow-wrap: anywhere; }
.package-message { margin: 0 0 12px; padding: 8px 12px; border: 1px solid var(--clr-card-border); border-radius: 8px; background: var(--clr-grid-head); font-weight: 600; }
.package-edit { border-top: 1px solid var(--clr-border); padding: 10px 0; }
.package-edit:first-of-type { margin-top: 12px; }
.package-edit > summary { cursor: pointer; display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; min-height: 32px; }
.package-edit[open] > summary { margin-bottom: 12px; }
.package-form .form-grid { align-items: end; }
.package-label { display: block; font-size: 0.8rem; font-weight: 600; color: var(--clr-text-muted); margin-bottom: 4px; }
.package-slug { display: inline-flex; align-items: center; min-height: var(--control-height); overflow-wrap: anywhere; }
.package-checks { display: flex; flex-direction: column; gap: 8px; margin: 14px 0 4px; }
.package-checks .check { margin: 0; min-height: 32px; }
.package-checks input[type="checkbox"] { width: 18px; height: 18px; flex: 0 0 18px; }
.package-save { margin: 12px 0 0; }
.package-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.package-actions form { margin: 0; }
@media (max-width: 640px) {
  .package-save .btn, .package-actions .btn { width: 100%; }
  .package-actions form { width: 100%; }
}

/* Attraction websites: the owner's filter (10/06/2026) - all websites, or only those not approved yet, the most
   attractions first; the pressed one is filled */
.website-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 12px; }
.website-filter .btn[aria-pressed="true"] { background: var(--clr-action); border-color: var(--clr-action); color: #fff; }

/* Attraction websites and Photos websites: each table fits the page, never scrolling sideways (owner, 10/06/2026: "try
   to make the sections fit without horizontal scrolling") - fixed column shares, wrapping headers, links and notes,
   and link boxes that take their column's width; only the height scrolls.
   Words are never broken in the middle (owner, 10/06/2026: "dont beak words in the middle" - "Remo|ve", "10/05/202|6",
   "Salzkammer|gut"): only a word longer than its whole column, in practice a web address, may break. So the short
   columns are sized in rem to their longest word, measured at 1280 px (Salzkammergut 96 px, a date 72 px, the
   Suggested badge 75 px, the Remove button 62 px, plus 20 px of cell padding), and the Website column takes the rest */
.fit-table-scroll { max-height: 70vh; overflow-y: auto; overflow-x: hidden; border: 1px solid var(--clr-border); border-radius: 10px; }
/* positioned, so the screen-reader-only column headings (position: absolute) are clipped with the table: unpositioned,
   they escaped the box at phone width and widened the whole page by 523 px (layout check, 10/07/2026) */
.fit-table-scroll { position: relative; }
table.grid.fit-table { table-layout: fixed; width: 100%; }
table.grid.fit-table th { white-space: normal; }
table.grid.fit-table td { overflow-wrap: break-word; }
table.grid.fit-table .btn, table.grid.fit-table .badge { white-space: nowrap; }
table.grid.fit-table .source-link-row { flex-wrap: wrap; gap: 4px 8px; }
table.grid.fit-table .source-link-row input[type=url] { min-width: 0; flex: 1 1 180px; }
table.grid.fit-table .source-link-label { flex: 0 0 auto; min-width: 92px; }
table.grid.fit-table .btn { padding-inline: 8px; }
#websites-table .col-approve { width: 5rem; }
#websites-table .col-website { width: auto; }
#websites-table .col-kind { width: 5.5rem; }
#websites-table .col-region { width: 8rem; }
#websites-table .col-found { width: 10rem; }
#websites-table .col-scanned { width: 6.5rem; }
#websites-table .col-approved { width: 6.5rem; }
#websites-table .col-remove { width: 6rem; }
#cards-table .col-approve { width: 7%; }
#cards-table .col-card { width: 45%; }
#cards-table .col-websites { width: 22%; }
#cards-table .col-covered { width: 13%; }
#cards-table .col-approved { width: 13%; }
#cards-table .source-link-label { min-width: 140px; }
.website-cards { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 6px; }
/* a line reached from a link in another section is marked, so the owner sees which one it is */
#websites-table tr:target td, #cards-table tr:target td { background: var(--clr-brand-tint); }
#photo-websites-table .col-permit { width: 24%; }
#photo-websites-table .col-site { width: 24%; }
#photo-websites-table .col-policy { width: 40%; }
#photo-websites-table .col-photos { width: 12%; }
#photo-websites-table .photo-policy-verdict { margin-bottom: 4px; }
#photo-websites-table .badge { white-space: normal; }
/* below about 1,000 px the fixed columns would leave the Website column too narrow: this one table then scrolls
   sideways rather than split words */
@media (max-width: 1000px) {
  .fit-table-scroll:has(#websites-table) { overflow-x: auto; }
  #websites-table { min-width: 960px; }
}

/* Countries > Country sites: the owner's two switches per country (migration 075, owner 10/07/2026) */
.country-switches { display: flex; flex-direction: column; gap: 8px; margin: 0 0 14px; padding: 12px 14px;
  border: 1px solid var(--clr-card-border); border-radius: 12px; background: var(--clr-brand-tint); }
.country-switches .check { margin: 0; min-height: 32px; }
.country-switches input[type="checkbox"] { width: 18px; height: 18px; flex: 0 0 18px; accent-color: var(--clr-action); }
.kpis .kpi:only-child { grid-column: 1 / -1; }

/* ── Layout D stage 2: a list row's page in a panel beside the list (side-panel.js, owner 10/07/2026) ── */
:root { --side-panel-width: min(46vw, 760px); }
.side-panel { display: none; }
body.side-panel-open .side-panel {
  display: flex; flex-direction: column; position: fixed; top: 0; right: 0; bottom: 0; width: var(--side-panel-width); z-index: 1002;
  background: var(--clr-surface); border-left: 1px solid var(--clr-border); box-shadow: -8px 0 24px rgba(16, 24, 40, 0.08);
}
body.side-panel-open .shell-main { margin-right: var(--side-panel-width); }
.side-panel-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 0 12px 0 20px;
  border-bottom: 1px solid var(--clr-border);
}
.side-panel-full { font-weight: 600; }
.side-panel-close {
  width: 36px; height: 36px; min-height: 36px; padding: 0; border-radius: 50%; border: 1px solid var(--clr-card-border);
  background: var(--clr-surface); color: var(--clr-text); font-size: 1.3rem; line-height: 1; cursor: pointer;
}
.side-panel-close:hover { background: var(--clr-brand-tint); }
.side-panel-frame { flex: 1 1 auto; width: 100%; border: 0; }
table.grid tr.is-open td { background: var(--clr-brand-light); }
table.grid tr[data-open-beside]:focus-visible { outline: 2px solid var(--clr-action); outline-offset: -2px; }
/* the page inside the panel's frame: no menus, and no way back to the list it already sits beside */
.in-panel .rail, .in-panel .tabbar, .in-panel .back-link { display: none; }
.in-panel .page { padding: 16px 20px 32px; }
@media (max-width: 1099px) {
  body.side-panel-open .side-panel { display: none; }
  body.side-panel-open .shell-main { margin-right: 0; }
}

/* Development > Testing: the Google address search section (owner, 10/12/2026) */
.places-test-controls { display: grid; grid-template-columns: minmax(220px, 2fr) minmax(140px, 1fr) minmax(140px, 1fr); gap: 12px; margin: 12px 0; }
.places-test-controls select, .places-test-controls input { width: 100%; }
.places-test-grid { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(300px, 1.2fr); gap: 20px; }
.places-suggestions { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.places-suggestion { width: 100%; text-align: left; display: flex; flex-direction: column; gap: 1px; padding: 8px 10px; border: 1px solid var(--clr-card-border); border-radius: 8px; background: var(--clr-surface); cursor: pointer; font: inherit; color: inherit; }
.places-suggestion:hover, .places-suggestion:focus-visible { border-color: var(--clr-action); background: var(--clr-grid-head); outline: none; }
.places-main { font-weight: 700; }
.places-secondary { color: var(--clr-text-muted); font-size: 0.88rem; }
.places-types { color: var(--clr-text-muted); font-size: 0.76rem; }
.places-map { height: 340px; border: 1px solid var(--clr-card-border); border-radius: 10px; }
.places-detail { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; margin: 12px 0 0; }
.places-detail dt { color: var(--clr-text-muted); font-size: 0.8rem; font-weight: 600; }
.places-detail dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 860px) { .places-test-controls, .places-test-grid { grid-template-columns: 1fr; } }