/* INTP Stays & Events (hosting app). Uses the site's colours from vars.css. */
.hosting {
  --h-blue: var(--area-bg-color, #226394);
  --h-red: var(--highlight-color, #d84858);
  --h-residency: var(--caldefault, #68d7d1);
  --h-event: var(--calactivity, #f99d4f);
  --h-call: var(--calexploratory, #ffcf69);
  --h-long: #9fb4cc;
  --h-block: #b9b9b9;
  --h-line: #dde3ea;
  --h-soft: #f4f7fa;
  --h-muted: #5d6b78;
  --h-ok: #2e7d4f;
  --h-warn: #b26a00;
  --h-bad: #b3261e;
  --h-card: #fff;
  --h-text: var(--text-color, #222);
  --h-text2: #333;
  --h-input-line: #c3ccd5;
  --h-radius: 8px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 24px 24px 64px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--h-text);
}
.hosting h1 { font-family: "Montserrat", Helvetica, sans-serif; font-size: 28px; color: var(--h-blue); margin: 8px 0 16px; }
.hosting h2 { font-size: 21px; margin: 28px 0 12px; color: var(--h-blue); }
.hosting h3 { font-size: 17px; margin: 18px 0 8px; color: var(--h-blue); }
.hosting p { margin: 0 0 10px; }
.hosting a { color: var(--h-blue); }
.hosting .muted { color: var(--h-muted); }
.hosting .small { font-size: 13px; }
.hosting .nowrap { white-space: nowrap; }
.hosting .right { text-align: right; }
.hosting .row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.hosting .spacer { flex: 1; }
.hosting .grid2 { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 28px; }
@media (max-width: 900px) { .hosting .grid2 { grid-template-columns: 1fr; } .hosting { padding: 16px 16px 48px; } }

/* messages */
.hosting .msg { padding: 10px 14px; border-radius: 6px; margin: 0 0 12px; background: var(--h-soft); border-left: 4px solid var(--h-blue); }
.hosting .msg.success { border-color: var(--h-ok); background: #eef7f1; }
.hosting .msg.error { border-color: var(--h-bad); background: #fbeeed; }
.hosting .msg.warning { border-color: var(--h-warn); background: #fdf4e7; }

/* cards, badges, buttons */
.hosting .card { background: var(--h-card); border: 1px solid var(--h-line); border-radius: var(--h-radius); padding: 16px 18px; margin-bottom: 16px; }
.hosting .card.soft { background: var(--h-soft); }
.hosting .card h3:first-child, .hosting .card h2:first-child { margin-top: 0; }
.hosting .badge { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 12px; background: #e8edf2; color: var(--h-text2); white-space: nowrap; }
.hosting .badge.submitted, .hosting .badge.awaiting_confirmation, .hosting .badge.proposed { background: #fff0cc; }
.hosting .badge.in_discussion { background: #dcecff; }
.hosting .badge.accepted, .hosting .badge.confirmed, .hosting .badge.sent, .hosting .badge.paid, .hosting .badge.paid_pwyc { background: #d9f2e3; }
.hosting .badge.declined, .hosting .badge.cancelled, .hosting .badge.failed, .hosting .badge.unpaid { background: #fadcd9; }
.hosting .badge.waitlisted, .hosting .badge.partial { background: #fde6c8; }
.hosting .badge.withdrawn, .hosting .badge.discarded, .hosting .badge.completed, .hosting .badge.not_charged { background: #e6e6e6; }
.hosting .btn, .hosting button, .hosting input[type=submit] {
  display: inline-block; border: 1px solid var(--h-blue); background: var(--h-card); color: var(--h-blue);
  padding: 7px 14px; border-radius: 6px; font-size: 14px; cursor: pointer; text-decoration: none; line-height: 1.3;
}
.hosting .btn:hover, .hosting button:hover { background: var(--h-soft); text-decoration: none; }
.hosting .btn.primary, .hosting button.primary { background: var(--h-blue); color: #fff; }
.hosting .btn.primary:hover, .hosting button.primary:hover { background: #1b4f77; }
.hosting .btn.danger, .hosting button.danger { border-color: var(--h-bad); color: var(--h-bad); }
.hosting .btn.small, .hosting button.small { padding: 3px 9px; font-size: 13px; }
.hosting button:disabled, .hosting .btn.disabled { opacity: .45; cursor: default; }

/* forms */
.hosting form .field { margin-bottom: 18px; }
.hosting form label.q { display: block; font-weight: 600; margin-bottom: 4px; }
.hosting form .req { color: var(--h-red); }
.hosting form .help { color: var(--h-muted); font-size: 13.5px; margin: 0 0 6px; white-space: pre-line; }
.hosting form .errorlist { color: var(--h-bad); list-style: none; margin: 4px 0; padding: 0; font-size: 13.5px; }
.hosting form .field.has-error input, .hosting form .field.has-error textarea { border-color: var(--h-bad); }
.hosting input[type=text], .hosting input[type=email], .hosting input[type=date], .hosting input[type=time],
.hosting input[type=number], .hosting select, .hosting textarea {
  width: 100%; max-width: 640px; padding: 7px 9px; border: 1px solid var(--h-input-line); color: inherit; border-radius: 5px; font: inherit; background: var(--h-card);
}
.hosting textarea { min-height: 80px; }
.hosting form ul.choices, .hosting form div.choices > div { list-style: none; margin: 0; padding: 0; }
.hosting form .choices label { font-weight: normal; display: flex; gap: 8px; align-items: flex-start; padding: 3px 0; cursor: pointer; }
.hosting form .choices input { margin-top: 4px; }
.hosting form .other-input { max-width: 400px; margin-top: 4px; }
.hosting table.grid-q { border-collapse: collapse; }
.hosting table.grid-q th, .hosting table.grid-q td { padding: 6px 12px; border-bottom: 1px solid var(--h-line); text-align: center; }
.hosting table.grid-q th:first-child, .hosting table.grid-q td:first-child { text-align: left; }
.hosting .hp { position: absolute; left: -5000px; height: 0; overflow: hidden; }
.hosting fieldset { border: 1px solid var(--h-line); border-radius: 8px; padding: 14px 16px 6px; margin: 0 0 20px; }
.hosting legend { font-weight: 700; color: var(--h-blue); padding: 0 6px; font-size: 16px; }

/* tables */
.hosting table.list { width: 100%; border-collapse: collapse; font-size: 14px; }
.hosting table.list th { text-align: left; font-weight: 600; color: var(--h-muted); border-bottom: 2px solid var(--h-line); padding: 6px 8px; white-space: nowrap; }
.hosting table.list td { border-bottom: 1px solid var(--h-line); padding: 7px 8px; vertical-align: top; }
.hosting table.list tr:hover td { background: #fafcfe; }
.hosting .tablewrap { overflow-x: auto; }
.hosting dl.kv { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; margin: 0; }
.hosting dl.kv dt { color: var(--h-muted); }
.hosting dl.kv dd { margin: 0; white-space: pre-line; }
.hosting .answers dt { font-weight: 600; color: var(--h-text2); margin-top: 10px; }
.hosting .answers dd { margin: 2px 0 0; white-space: pre-line; }

/* manager navigation */
.hosting .mnav { display: flex; gap: 2px; flex-wrap: wrap; border-bottom: 2px solid var(--h-line); margin-bottom: 18px; align-items: flex-end; }
.hosting .mnav a { padding: 8px 14px; text-decoration: none; color: var(--h-muted); border-bottom: 3px solid transparent; margin-bottom: -2px; }
.hosting .mnav a.on { color: var(--h-blue); border-color: var(--h-blue); font-weight: 600; }
.hosting .mnav .count { background: var(--h-red); color: #fff; border-radius: 9px; padding: 0 6px; font-size: 11px; margin-left: 3px; }
.hosting .mnav .pause { margin-left: auto; font-size: 13px; padding: 6px 0; }
.hosting .tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.hosting .tabs a { padding: 4px 10px; border-radius: 14px; background: var(--h-soft); text-decoration: none; font-size: 13.5px; color: var(--h-text2); }
.hosting .tabs a.on { background: var(--h-blue); color: #fff; }

/* ---------- calendar ---------- */
.hosting .legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--h-muted); margin: 6px 0 16px; }
.hosting .legend i { display: inline-block; width: 14px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: middle; }
.hosting .yearnav { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
.hosting .yearnav .year { font-size: 26px; font-weight: 700; color: var(--h-blue); }
.hosting .months { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 16px; }
@media (max-width: 1100px) { .hosting .months { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 820px) { .hosting .months { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .hosting .months { grid-template-columns: 1fr; } }
.hosting .month { background: var(--h-card); border: 1px solid var(--h-line); border-radius: var(--h-radius); padding: 8px 8px 10px; }
.hosting .month.past { opacity: .62; }
.hosting .month h3 { margin: 0 0 6px; font-size: 15px; display: flex; justify-content: space-between; }
.hosting .month h3 a { text-decoration: none; }
.hosting .wk { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); column-gap: 1px; margin-bottom: 2px; }
.hosting .wk .d { text-align: center; font-size: 11.5px; color: var(--h-text2); padding: 1px 0; }
.hosting .wk .d.out { color: #c5ccd3; }
.hosting .wk .d.we { color: #8a97a3; }
.hosting .wk .d.today { background: var(--h-red); color: #fff; border-radius: 50%; }
.hosting .wk.head .d { color: var(--h-muted); font-size: 10.5px; }
.hosting .bar {
  grid-row: auto; height: 17px; margin: 1px 0; border-radius: 4px; font-size: 10.5px; line-height: 17px;
  padding: 0 4px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #13323f;
  position: relative; display: flex; align-items: center; gap: 3px; text-decoration: none;
}
.hosting .bar.k-residency_week { background: var(--h-residency); }
.hosting .bar.k-school, .hosting .bar.k-workshop, .hosting .bar.k-retreat { background: var(--h-event); }
.hosting .bar.k-long_term { background: var(--h-long); }
.hosting .bar.k-house_block { background: repeating-linear-gradient(45deg, #d6d6d6 0 4px, #c3c3c3 4px 8px); color: #444; }
.hosting .bar.k-call_for_interest { background: var(--h-call); }
.hosting .bar.draft { outline: 1px dashed #555; opacity: .75; }
.hosting .bar.full, .hosting .bar.st-full, .hosting .bar.st-closed { background: #cfd8dc; color: #555; }
.hosting .bar.cb { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.hosting .bar.ca { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.hosting .bar input { margin: 0; width: 12px; height: 12px; flex: none; }
.hosting .bar.sel { box-shadow: inset 0 0 0 2px var(--h-blue); font-weight: 700; }
.hosting .bar .tip { display: none; }
.hosting .bar:hover { filter: brightness(.95); }
/* zoomed month */
.hosting .bigmonth .wk { column-gap: 3px; margin-bottom: 6px; border-top: 1px solid var(--h-line); padding-top: 4px; }
.hosting .bigmonth .wk .d { text-align: left; font-size: 13px; padding: 2px 4px; }
.hosting .bigmonth .wk .d.today { border-radius: 4px; }
.hosting .bigmonth .bar { height: auto; min-height: 26px; line-height: 1.3; font-size: 13px; padding: 4px 8px; white-space: normal; }
.hosting .bigmonth .bar .meta { font-size: 12px; opacity: .85; }
.hosting .bigmonth .people { grid-column: 1 / -1; font-size: 12.5px; color: var(--h-muted); padding: 2px 4px 4px; }
.hosting .wkno { font-size: 10px; color: #9aa6b1; }
/* selection footer */
.hosting .selbar {
  position: sticky; bottom: 0; z-index: 5; background: var(--h-card); border-top: 2px solid var(--h-blue); padding: 10px 14px;
  display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-top: 18px; box-shadow: 0 -4px 12px rgba(0,0,0,.06);
}
.hosting .selbar .chosen { font-weight: 600; }
/* week picker in the application form */
.hosting .weekpick { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px 14px; margin-bottom: 8px; }
.hosting .weekpick label { border: 1px solid var(--h-line); border-radius: 6px; padding: 6px 9px; display: flex; gap: 8px; align-items: center; cursor: pointer; font-weight: normal; }
.hosting .weekpick label:has(input:checked) { border-color: var(--h-blue); background: #eef5fb; }
.hosting .weekpick .full { color: var(--h-warn); font-size: 12px; }
.hosting .monthlabel { font-weight: 600; margin: 10px 0 4px; color: var(--h-muted); font-size: 13px; text-transform: uppercase; letter-spacing: .03em; }

/* occupancy strip */
.hosting .occ { display: flex; gap: 2px; align-items: flex-end; height: 64px; margin: 8px 0 2px; }
.hosting .occ .n { flex: 1; min-width: 14px; background: #dfe7ee; border-radius: 3px 3px 0 0; position: relative; }
.hosting .occ .n .c { position: absolute; bottom: 0; left: 0; right: 0; background: var(--h-residency); border-radius: 3px 3px 0 0; }
.hosting .occ .n .a { position: absolute; bottom: 0; left: 0; right: 0; background: repeating-linear-gradient(45deg, #a9d9d6 0 3px, #d6efee 3px 6px); border-radius: 3px 3px 0 0; }
.hosting .occ .n.over .a, .hosting .occ .n.over .c { background: var(--h-bad); }
.hosting .occlabels { display: flex; gap: 2px; font-size: 10.5px; color: var(--h-muted); }
.hosting .occlabels span { flex: 1; min-width: 14px; text-align: center; }

/* steps on private pages */
.hosting .steps { display: flex; gap: 0; margin: 6px 0 22px; flex-wrap: wrap; }
.hosting .steps span { padding: 6px 14px 6px 22px; background: #e8edf2; color: var(--h-muted); font-size: 13.5px; position: relative; clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%, 10px 50%); margin-right: -6px; }
.hosting .steps span:first-child { clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%); padding-left: 14px; }
.hosting .steps span.done { background: #cfe9da; color: #1d5236; }
.hosting .steps span.now { background: var(--h-blue); color: #fff; font-weight: 600; }
.hosting pre.block { white-space: pre-wrap; font-family: inherit; background: var(--h-soft); border-radius: 6px; padding: 12px 14px; margin: 0 0 12px; }

/* timeline */
.hosting .timeline { list-style: none; margin: 0; padding: 0; }
.hosting .timeline li { border-left: 3px solid var(--h-line); padding: 4px 0 10px 14px; position: relative; }
.hosting .timeline li::before { content: ""; position: absolute; left: -7px; top: 9px; width: 11px; height: 11px; border-radius: 50%; background: #c9d3dc; }
.hosting .timeline li.note::before { background: var(--h-call); }
.hosting .timeline li.guest_message::before { background: var(--h-red); }
.hosting .timeline li.email_sent::before { background: var(--h-ok); }
.hosting .timeline li.email_proposed::before, .hosting .timeline li.email_failed::before { background: var(--h-warn); }
.hosting .timeline li.payment::before { background: var(--h-blue); }
.hosting .timeline .when { font-size: 12px; color: var(--h-muted); }
.hosting .timeline .text { font-size: 13.5px; white-space: pre-line; color: var(--h-text2); }

@media print { .headwrapper, .footwrapper, .mnav { display: none !important; } #overall { padding-top: 0 !important; } }
/* phones: past months of the current year are hidden, the year starts at this month */
@media (max-width: 520px) { .hosting .months .month.past { display: none; } }
/* anchors land below the site's fixed header */
.hosting [id] { scroll-margin-top: 230px; }
.hosting .occ .n { overflow: hidden; }

/* ---------- phase 3 ---------- */
.hosting .stats { display: flex; gap: 14px; flex-wrap: wrap; margin: 12px 0 18px; }
.hosting .stat { background: var(--h-soft); border-radius: 8px; padding: 10px 16px; min-width: 150px; }
.hosting .stat .n { font-size: 22px; font-weight: 700; color: var(--h-blue); }
.hosting .stat .l { font-size: 12.5px; color: var(--h-muted); }
.hosting .bars .barrow { display: grid; grid-template-columns: 74px 1fr 96px; gap: 8px; align-items: center; font-size: 13px; margin: 2px 0; }
.hosting .bars .track { background: #eef2f6; border-radius: 3px; height: 12px; overflow: hidden; }
.hosting .bars .fill { display: block; height: 100%; background: var(--h-residency); }
.hosting .bars .val { text-align: right; }
.hosting .tabletools { margin: 6px 0 8px; }
.hosting .tgrid { border: 1px solid var(--h-line); border-radius: 6px; font-size: 13px; }
.hosting .tgrid .tabulator-cell.ro { background: #f6f8fa; color: #444; }
.hosting .tgrid .tabulator-cell.saved { background: #d9f2e3 !important; transition: background .3s; }
.hosting .t-colpicker { margin: 6px 0; }
.hosting table.actgrid td.act.over { background: #fdf4e7; }
.hosting details.inline-edit > summary { cursor: pointer; list-style: none; margin-bottom: 8px; }
.hosting form.payonline { margin-bottom: 12px; }
.hosting .badge.issued { background: #dcecff; }
.hosting .badge.draft { background: #eee; }
.hosting .badge.paid { background: #d9f2e3; }

/* ---- Phase 4: room plan ---- */
.hosting .rp { overflow-x: auto; border: 1px solid #ddd; border-radius: 6px; padding: 6px; background: var(--h-card); }
.hosting .rp-row { display: grid; grid-template-columns: 170px repeat(var(--n), minmax(42px, 1fr)); gap: 2px 0;
  align-items: center; min-height: 26px; border-bottom: 1px dashed #eee; }
.hosting .rp-head { font-size: 11px; color: #666; text-align: center; border-bottom: 1px solid #ccc; }
.hosting .rp-label { grid-column: 1; padding-right: 6px; }
.hosting .rp-night { text-align: center; }
.hosting .rp-room { font-weight: bold; margin: 10px 0 2px; font-size: 13px; }
.hosting .rp-bar { background: #d7e8d0; border: 1px solid #8fb381; border-radius: 4px; padding: 1px 6px; font-size: 12px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: grab; margin: 0 1px; }
.hosting .rp-bar.other { background: #eee; border-color: #ccc; color: #777; cursor: default; }
.hosting .rp-bar.conflict { background: #f6d2cf; border-color: #c0392b; }
.hosting .rp-bed.dragover, .hosting .rp-pool.dragover { background: #fff6d6; }
.hosting .rp-pool { min-height: 40px; border: 1px dashed #bbb; border-radius: 6px; padding: 6px; }
.hosting .rp-chip { display: inline-block; background: var(--h-card); border: 1px solid #8fb381; border-radius: 12px; padding: 2px 8px;
  margin: 2px; font-size: 12px; cursor: grab; }
/* ---- Phase 4: read-only team pages ---- */
.hosting .teambar { background: #f4f1ea; border-radius: 6px; padding: 8px 12px; margin-bottom: 12px; font-size: 13px; }
@media print { .hosting .mnav, .hosting .tabs, .hosting .noprint { display: none; } }
.hosting .sitepage-results { display: flex; flex-direction: column; max-height: 260px; overflow-y: auto; }
.hosting .sitepage-hit { padding: 3px 6px; border-bottom: 1px solid #eee; font-size: 13px; text-decoration: none; }
.hosting .sitepage-hit:hover { background: #f4f1ea; }
.hosting form .choices label .help { display: block; margin: 0 0 2px 22px; font-weight: normal; }

/* ---- Phase 5: form builder list never pushes over the preview ---- */
.hosting .grid2 > div { min-width: 0; }
.hosting table.qlist td { overflow-wrap: anywhere; }
.hosting table.qlist td:nth-child(4) { min-width: 70px; }

/* ---- Phase 5: blocks on the website's pages (home, residency page) ---- */
.hosting.embed { max-width: none; padding: 0; margin: 10px 0 24px; }
.hosting.embed .embed-head { align-items: baseline; }
.hosting.embed .embed-title { margin: 0 0 6px; }
.hosting.embed .selbar.embedbar { position: static; box-shadow: none; border: 1px solid var(--h-line); border-top: 2px solid var(--h-blue); border-radius: 0 0 8px 8px; }
.hosting.embed.compact .months { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) { .hosting.embed.compact .months { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .hosting.embed.compact .months { grid-template-columns: 1fr; } }
.hosting .ribbon { display: flex; flex-wrap: wrap; gap: 0; background: var(--h-blue); color: #fff; border-radius: 10px; overflow: hidden; }
.hosting .ribbon .rib { flex: 1 1 140px; padding: 14px 18px; display: flex; flex-direction: column; justify-content: center; border-right: 1px solid rgba(255,255,255,.18); }
.hosting .ribbon .rib:last-child { border-right: 0; }
.hosting .ribbon .n { font-size: 28px; font-weight: 700; line-height: 1.1; font-family: "Montserrat", Helvetica, sans-serif; }
.hosting .ribbon .l { font-size: 13px; opacity: .9; }
.hosting .ribbon .rib.since { flex: 0 1 110px; font-style: italic; }
.hosting .quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-top: 14px; }
.hosting .hquote { margin: 0; background: var(--h-soft); border-left: 4px solid var(--h-residency); border-radius: 6px; padding: 12px 16px; }
.hosting .hquote blockquote { margin: 0 0 6px; padding: 0; border: 0; font-size: 15px; font-style: italic; }
.hosting .hquote figcaption { font-size: 13px; }

/* =====================================================================
   Phase 5: alternative styles, to try on the dashboard, the calendar and every stays page.
   Chosen with the "Style" menu of the manager pages (remembered in this browser), or ?hstyle=<name>
   on any stays page or page with a calendar. Each style only changes the variables and a few rules
   below; delete a block to drop a style, copy one to make a new one.
   ===================================================================== */

/* -- calm: pastel, airy, rounded -- */
.hosting[data-hstyle="calm"] {
  --h-blue: #3d6f8f; --h-red: #c9727d; --h-residency: #a8e0dc; --h-event: #f8c99c; --h-call: #fbe3a6;
  --h-long: #c6d3e3; --h-line: #e6ebf0; --h-soft: #f6f8fb; --h-radius: 16px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.hosting[data-hstyle="calm"] .card, .hosting[data-hstyle="calm"] .month { border-color: transparent; box-shadow: 0 2px 10px rgba(30, 60, 90, .07); }
.hosting[data-hstyle="calm"] .bar { border-radius: 9px; }
.hosting[data-hstyle="calm"] .btn, .hosting[data-hstyle="calm"] button { border-radius: 18px; }
.hosting[data-hstyle="calm"] h1, .hosting[data-hstyle="calm"] h2 { font-weight: 600; }

/* -- paper: warm, earthy, outlined calendar bars (closer to the website's look) -- */
.hosting[data-hstyle="paper"] {
  --h-blue: #5b4636; --h-red: #b5543c; --h-residency: #6f9c84; --h-event: #c47a3d; --h-call: #c9a227;
  --h-long: #7d8ca3; --h-line: #e4dccd; --h-soft: #f5efe3; --h-card: #fffdf8; --h-radius: 4px;
  background: #faf6ee;
}
.hosting[data-hstyle="paper"] h1, .hosting[data-hstyle="paper"] h2, .hosting[data-hstyle="paper"] h3 { font-family: Georgia, "Times New Roman", serif; }
.hosting[data-hstyle="paper"] .bar { background: transparent !important; border: 1.5px solid currentColor; color: var(--h-blue); }
.hosting[data-hstyle="paper"] .bar.k-residency_week { color: var(--h-residency); background: rgba(111, 156, 132, .12) !important; }
.hosting[data-hstyle="paper"] .bar.k-school, .hosting[data-hstyle="paper"] .bar.k-workshop, .hosting[data-hstyle="paper"] .bar.k-retreat { color: var(--h-event); background: rgba(196, 122, 61, .12) !important; }
.hosting[data-hstyle="paper"] .bar.k-call_for_interest { color: var(--h-call); }
.hosting[data-hstyle="paper"] .bar span { color: #3b2f25; }
.hosting[data-hstyle="paper"] .bar.sel { box-shadow: inset 0 0 0 2px var(--h-blue); background: rgba(91, 70, 54, .12) !important; }

/* -- contrast: strong colours, thick lines, bigger text (accessibility check) -- */
.hosting[data-hstyle="contrast"] {
  --h-blue: #0b3d91; --h-red: #c00018; --h-residency: #00a3a1; --h-event: #e86a00; --h-call: #f2b800;
  --h-long: #5b7fb0; --h-line: #8a96a3; --h-soft: #eef1f5; --h-muted: #333; --h-text2: #000; --h-text: #000;
  font-size: 16px;
}
.hosting[data-hstyle="contrast"] .card, .hosting[data-hstyle="contrast"] .month { border-width: 2px; }
.hosting[data-hstyle="contrast"] .bar { height: 20px; line-height: 20px; font-size: 12px; font-weight: 700; color: #000; }
.hosting[data-hstyle="contrast"] .wk .d { font-size: 13px; }
.hosting[data-hstyle="contrast"] a { text-decoration: underline; }

/* -- dark -- */
.hosting[data-hstyle="dark"] {
  --h-blue: #8cc4f0; --h-red: #ff7b88; --h-residency: #3fa7a1; --h-event: #d9813a; --h-call: #c9a227;
  --h-long: #6f86a6; --h-line: #33404d; --h-soft: #1f2a35; --h-card: #17212b; --h-muted: #a5b3c0;
  --h-text: #e8edf2; --h-text2: #d5dde5; --h-input-line: #4a5a6a;
  background: #0f171f; border-radius: 10px;
}
.hosting[data-hstyle="dark"] .badge { background: #2b3947; color: #e8edf2; }
.hosting[data-hstyle="dark"] .bar { color: #08141c; }
.hosting[data-hstyle="dark"] .wk .d.out { color: #4c5a67; }
.hosting[data-hstyle="dark"] .btn.primary, .hosting[data-hstyle="dark"] button.primary { color: #0f171f; }
.hosting[data-hstyle="dark"] .tgrid .tabulator-cell.ro { background: #1f2a35; color: #d5dde5; }
.hosting[data-hstyle="dark"] table.list tr:hover td { background: #1f2a35; }
.hosting[data-hstyle="dark"] .msg { color: #e8edf2; }

/* -- compact: dense, more on one screen -- */
.hosting[data-hstyle="compact"] { font-size: 13.5px; line-height: 1.35; padding: 12px 12px 40px; --h-radius: 4px; }
.hosting[data-hstyle="compact"] h1 { font-size: 22px; margin: 4px 0 10px; }
.hosting[data-hstyle="compact"] h2 { font-size: 17px; margin: 16px 0 8px; }
.hosting[data-hstyle="compact"] .card { padding: 9px 11px; margin-bottom: 9px; }
.hosting[data-hstyle="compact"] .grid2 { gap: 14px; }
.hosting[data-hstyle="compact"] .months { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 1200px) { .hosting[data-hstyle="compact"] .months { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.hosting[data-hstyle="compact"] .bar { height: 14px; line-height: 14px; font-size: 9.5px; }
.hosting[data-hstyle="compact"] .mnav a { padding: 5px 9px; }

/* style menu */
.hosting .stylepick { font-size: 12.5px; color: var(--h-muted); display: inline-flex; gap: 4px; align-items: center; }
.hosting .stylepick select { width: auto; padding: 2px 4px; font-size: 12.5px; }
.hosting .stylegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(560px, 1fr)); gap: 18px; }
.hosting .stylegrid > .hosting { max-width: none; border: 1px dashed var(--h-line); border-radius: 10px; padding: 14px; margin: 0; }
.hosting .mnav .stylepick { margin-left: auto; padding: 6px 8px; }
.hosting .mnav .stylepick + .pause { margin-left: 8px; }

/* embedded blocks in a style with its own background (dark, paper): keep some room around the content */
.hosting.embed[data-hstyle="dark"], .hosting.embed[data-hstyle="paper"] { padding: 14px 16px 16px; border-radius: 10px; }