/* The management of a blog (/mijn-blog/): the calm look of Mijn SeniorenNet,
   large type and full-width buttons on a phone. */
:root {
  --bm-blue: #3f63ad;
  --bm-blue-soft: #e9eef8;
  --bm-ink: #1f2a3c;
  --bm-muted: #5b6472;
  --bm-line: #e3e7ee;
  --bm-bg: #f6f4f0;
  --bm-red: #b42318;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.bm { margin: 0; background: var(--bm-bg); color: var(--bm-ink); font: 18px/1.55 "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
/* Not the link-buttons: a.bm-btn keeps its own colours (white on blue). */
body.bm a:where(:not(.bm-btn)), .bm-app a:where(:not(.bm-btn)) { color: var(--bm-blue); }
.bm-app img { max-width: 100%; height: auto; }
/* What a screen hides stays hidden, whatever display its class gives it. */
body.bm [hidden], .bm-app [hidden] { display: none !important; }
.bl-skip { position: absolute; left: -999px; top: 0; background: #fff; padding: 8px 12px; z-index: 10; }
.bl-skip:focus { left: 8px; }
.bl-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.bm-bar { background: #fff; border-bottom: 1px solid var(--bm-line); }
.bm-bar__in { max-width: 1240px; margin: 0 auto; padding: 10px 16px; display: flex; align-items: center; gap: 18px; font-size: 16px; }
.bm-bar__logo { display: flex; gap: 10px; align-items: center; color: var(--bm-ink); text-decoration: none; font-weight: 700; font-size: 20px; }
.bm-bar__spacer { flex: 1; }
.bm-bar__link { color: var(--bm-ink); text-decoration: none; }
.bm-bar__btn { border: 1px solid var(--bm-line); border-radius: 8px; padding: 5px 14px; }
.bm-wrap { max-width: 1240px; margin: 0 auto; padding: 0 16px 48px; }
.bm-crumbs { font-size: 15px; color: var(--bm-muted); padding: 14px 0; }
.bm-crumbs a { text-decoration: none; }
.bm-frame { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 24px; align-items: start; }
.bm-frame > *, .bm-main { min-width: 0; }
.bm-main { overflow-wrap: anywhere; }
.bm-main--alone { max-width: 760px; margin: 0 auto; }

.bm-nav { background: #fff; border: 1px solid var(--bm-line); border-radius: 14px; padding: 10px; position: sticky; top: calc(var(--bm-above, 0px) + 12px); }
.bm-nav__blog { display: block; padding: 10px 12px 12px; margin-bottom: 6px; border-bottom: 1px solid var(--bm-line); text-decoration: none; color: var(--bm-ink); }
.bm-nav__blog strong { display: block; line-height: 1.3; }
.bm-nav__blog small { color: var(--bm-blue); font-size: 14px; }
.bm-nav ul { list-style: none; margin: 0; padding: 0; }
.bm-nav li a { display: flex; gap: 10px; align-items: center; padding: 9px 12px; border-radius: 10px; color: var(--bm-ink); text-decoration: none; font-size: 17px; }
.bm-nav li a:hover { background: #f3f5f9; }
.bm-nav li a[aria-current="page"] { background: var(--bm-blue-soft); color: var(--bm-blue); font-weight: 600; }
.bm-nav__icon { width: 22px; text-align: center; font-size: 16px; }

.bm-head { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.bm-head h1, .bm-h1, .bm-signin h1 { margin: 0; font: 700 30px/1.2 Georgia, "Times New Roman", serif; }
.bm-head p { margin: 4px 0 0; color: var(--bm-muted); }
.bm-acts { display: flex; flex-wrap: wrap; gap: 10px; }
.bm-btn { white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 8px; padding: 11px 20px; font: 600 17px "Inter", system-ui, sans-serif; text-decoration: none; border: 1px solid var(--bm-blue); background: var(--bm-blue); color: #fff; cursor: pointer; }
.bm-btn:hover { filter: brightness(1.07); }
.bm-btn:disabled { opacity: .45; cursor: default; }
.bm-btn--ghost { background: #fff; color: var(--bm-blue); }
.bm-btn--small { padding: 6px 13px; font-size: 15px; }
.bm-btn--wrap { white-space: normal; max-width: 100%; text-align: center; }
.bm-btn--danger { background: #fff; color: var(--bm-red); border-color: #e4a39c; }
a.bm-btn, a.bm-btn:visited { color: #fff; }
a.bm-btn--ghost, a.bm-btn--ghost:visited { color: var(--bm-blue); }
a.bm-btn--danger, a.bm-btn--danger:visited { color: var(--bm-red); }
.bm-head__action { display: inline-flex; align-items: center; gap: 8px; }
.bm-quick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 12px; margin: 0 0 22px; }
.bm-quick__item { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 16px; background: #fff; border: 1px solid var(--bm-line); border-radius: 14px; color: var(--bm-ink); text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.bm-quick__item:hover { border-color: var(--bm-blue); box-shadow: 0 4px 14px rgba(30, 50, 90, .08); }
.bm-quick__item span { grid-row: 1 / 3; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: #eef2f8; font-size: 22px; }
.bm-quick__item b { font-size: 17px; color: var(--bm-ink); }
.bm-quick__item--main b { color: #fff; }
.bm-quick__item small { color: var(--bm-muted); font-size: 14px; line-height: 1.3; }
.bm-quick__item--main { background: var(--bm-blue); border-color: var(--bm-blue); color: #fff; }
.bm-quick__item--main span { background: #fff; }
.bm-quick__item--main small { color: rgba(255, 255, 255, .85); }
.bm-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 22px; }
.bm-card { background: #fff; border: 1px solid var(--bm-line); border-radius: 14px; padding: 16px 18px; }
.bm-card b { display: block; font: 700 26px/1.1 Georgia, serif; margin-bottom: 4px; }
.bm-card span { color: var(--bm-muted); font-size: 15px; }
.bm-panel { background: #fff; border: 1px solid var(--bm-line); border-radius: 14px; padding: 18px 20px; margin-bottom: 20px; }
.bm-panel h2 { font: 700 21px/1.3 Georgia, serif; margin: 0 0 12px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bm-panel h3 { font: 700 18px/1.3 Georgia, serif; margin: 0 0 10px; }
.bm-count { display: inline-block; min-width: 24px; padding: 1px 8px; border-radius: 999px; background: #d92d20; color: #fff; font: 700 13px/20px "Inter", sans-serif; text-align: center; }
.bm-list { list-style: none; margin: 0; padding: 0; }
.bm-list li { display: flex; gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid #edf0f4; }
.bm-list li:first-child { border-top: 0; }
.bm-list img, .bm-thumb { width: 64px; height: 48px; object-fit: cover; border-radius: 8px; flex: none; background: #eef1f5; }
/* A post without a photo: a sheet of text in the photo's place, so it does not read as a picture that is missing. */
.bm-thumb { display: grid; place-items: center; }
.bm-thumb::before { content: ""; width: 22px; height: 26px; background: #b3bcc8;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 26'%3E%3Cpath d='M2 1h13l5 5v19H2z' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cpath d='M6 10h10M6 14h10M6 18h7' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 26'%3E%3Cpath d='M2 1h13l5 5v19H2z' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cpath d='M6 10h10M6 14h10M6 18h7' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat; }
.bm-grow { flex: 1; min-width: 0; }
a.bm-grow { color: var(--bm-ink); text-decoration: none; }
a.bm-grow:hover strong { text-decoration: underline; }
.bm-grow strong { display: block; overflow-wrap: anywhere; }
.bm-grow small { color: var(--bm-muted); font-size: 15px; }
.bm-quote { margin: 6px 0 0; color: #36404f; font-size: 16px; overflow-wrap: anywhere; }
.bm-list--messages li { align-items: flex-start; flex-wrap: wrap; }
.bm-inline { display: flex; flex-wrap: wrap; gap: 6px; }
.bm-flag { display: inline-block; font: 600 12px "Inter", sans-serif; padding: 2px 8px; border-radius: 999px; background: #fde8e8; color: #9b1c1c; }
.bm-flag--draft { background: #fef3c7; color: #8a5a00; }
.bm-flag--later { background: #e0ecff; color: #234b8f; }
.bm-hint, .bm-note { color: var(--bm-muted); font-size: 15px; }
.bm-hint { margin: 0 0 12px; }
.bm-done { background: #e8f4ea; color: #1d5b2a; border-radius: 10px; padding: 12px 16px; }
.bm-alert { background: #fdecea; color: #8a1c13; border-radius: 10px; padding: 12px 16px; }
.bm-error { color: var(--bm-red); font-size: 15px; margin: 6px 0 0; }
.bm-ok { color: #1d5b2a; }
/* The one-time "Je bent aangemeld" above the content (AdminBase::page), as Mijn SeniorenNet's acc-flash. */
.bm-flash { background: #ecfdf3; color: #067647; border-radius: 8px; padding: 12px 16px; margin: 0 0 20px; font-size: 1.05rem; }

/* Forms. */
.bm-field { margin: 0 0 16px; }
.bm-field label, .bm-label { display: block; font-weight: 600; margin: 0 0 6px; }
.bm-field input:not([type=checkbox]):not([type=radio]), .bm-field select, .bm-field textarea, .bm-filter input, .bm-filter select, .bm-when input {
  width: 100%; font: 18px "Inter", system-ui, sans-serif; padding: 11px 14px; border: 1px solid #c9d1dc; border-radius: 8px; background: #fff; color: var(--bm-ink); }
.bm-field textarea { min-height: 120px; }
[aria-invalid="true"] { border-color: var(--bm-red) !important; }
.bm-radio, .bm-check { display: flex; gap: 10px; align-items: flex-start; margin: 10px 0; font-size: 17px; }
.bm-radio input, .bm-check input { width: 20px; height: 20px; margin-top: 3px; flex: none; }
.bm-radio small { display: block; color: var(--bm-muted); font-size: 15px; }
.bm-also { border: 0; margin: 18px 0 6px; padding: 0; min-width: 0; }
.bm-also legend { font: 700 18px/1.3 Georgia, serif; padding: 0; margin: 0 0 4px; }
.bm-also .bm-note { color: var(--bm-muted); font-size: 15px; }
.bm-prefix { display: flex; border: 1px solid #c9d1dc; border-radius: 8px; overflow: hidden; background: #fff; }
.bm-prefix span { padding: 11px 0 11px 14px; color: var(--bm-muted); white-space: nowrap; }
.bm-prefix input { border: 0 !important; padding-left: 2px !important; min-width: 0; }
.bm-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.bm-stack { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.bm-savebar { position: sticky; bottom: 0; background: linear-gradient(transparent, var(--bm-bg) 30%); padding: 18px 0 12px; }
.bm-filter { display: flex; gap: 8px; margin-bottom: 16px; }
.bm-filter input { flex: 1; }
.bm-filter select { width: auto; }
.bm-search { margin-bottom: 16px; }
.bm-search .bm-filter { margin-bottom: 8px; }
.bm-search__more summary { cursor: pointer; color: var(--bm-blue); padding: 6px 0; }
.bm-search__more[open] { background: #fff; border: 1px solid var(--bm-line); border-radius: 14px; padding: 6px 20px 4px; }
.bm-panel .bm-month { margin-top: 22px; }
.bm-panel .bm-month:first-child { margin-top: 0; }
.bm-clip { font-weight: 400; }
.bm-bottom { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.bm-pager { display: flex; gap: 8px; }
.bm-pick { width: 22px; height: 22px; flex: none; }
.bm-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
/* Tabs as the portal's pills: round, the chosen one filled. */
.bm-tabs { gap: 8px; }
.bm-tabs a { padding: 9px 16px; border-radius: 999px; background: #fff; border: 1px solid var(--bm-line); text-decoration: none; color: var(--bm-ink); font: 600 16px/1.5 "Inter", system-ui, sans-serif; }
.bm-tabs a:hover { border-color: var(--bm-blue); }
.bm-tabs a[aria-current="page"] { background: var(--bm-blue); border-color: var(--bm-blue); color: #fff; }
.bm-signin .bm-panel { margin-top: 18px; }

/* Writing a post. */
.bm-edit { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; }
.bm-edit__main .bm-field input { font-size: 22px; font-weight: 600; }
.bm-editor { width: 100%; min-height: 460px; }
.bm-side .bm-panel { padding: 16px; }
.bm-when { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.bm-when input { width: auto; flex: 1; }
.tox-tinymce { border-radius: 8px !important; }

/* Uitzicht. */
.uz-choices .bm-panel { padding: 16px; margin-bottom: 14px; }
.uz-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.uz-option { border: 1px solid #d5dbe4; border-radius: 10px; padding: 8px; cursor: pointer; display: block; }
.uz-option input, .uz-colour input, .uz-pill input { position: absolute; opacity: 0; pointer-events: none; }
.uz-option b { display: block; font-size: 15px; }
.uz-sketch { display: block; width: 100%; height: auto; border-radius: 6px; margin-bottom: 6px; }
.uz-option small { display: block; color: var(--bm-muted); font-size: 12px; line-height: 1.3; }
.uz-option:has(input:checked), .uz-pill:has(input:checked) > span { border-color: var(--bm-blue); box-shadow: 0 0 0 2px var(--bm-blue) inset; }
.uz-option:has(input:focus-visible), .uz-colour:has(input:focus-visible) span, .uz-pill:has(input:focus-visible) > span { outline: 3px solid #f5b400; outline-offset: 2px; }
.uz-pic { padding: 12px 0; border-top: 1px solid #e3e7ee; }
.uz-pic:first-of-type { border-top: 0; }
.uz-pic__head { margin-bottom: 8px; }
.uz-pic__head small { display: block; color: var(--bm-muted); font-size: 13px; }
.uz-pic__thumb { height: 22px; width: auto; max-width: 60px; vertical-align: middle; margin-right: 6px; object-fit: contain; }
.uz-pic__thumb--big { display: block; height: auto; max-height: 80px; max-width: 100%; margin: 0 0 8px; }
.uz-pic__own { margin-top: 10px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.uz-pic__own input { min-width: 0; max-width: 100%; }
.uz-pic__own input[type=url] { box-sizing: border-box; width: 100%; max-width: 100%; padding: 9px 12px; border: 1px solid #cdd5e0; border-radius: 8px; font: inherit; }
.uz-border { padding: 10px 0; }
.uz-border__row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 6px; }
.uz-border__more { display: inline-flex; gap: 8px; align-items: center; }
.uz-border__more[hidden] { display: none; }
.uz-border select, .uz-parts select { padding: 8px 10px; border: 1px solid #cdd5e0; border-radius: 8px; font: inherit; background: #fff; }
.uz-parts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px 8px; align-items: center; }
.uz-parts__name { grid-column: 1 / -1; margin-top: 8px; font-weight: 600; }
.uz-parts__pick { display: grid; gap: 2px; min-width: 0; }
.uz-parts__pick small { color: var(--bm-muted); font-size: 12px; }
.uz-parts select { min-width: 0; width: 100%; }
[data-show-for][hidden] { display: none !important; }
.uz-own__reset { margin-top: 10px; }
.uz-colours { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 10px; }
.uz-colour { text-align: center; cursor: pointer; }
.uz-colour span { display: block; width: 40px; height: 40px; margin: 0 auto 4px; border-radius: 50%; background: linear-gradient(135deg, var(--c) 50%, var(--b) 50%); border: 3px solid #fff; box-shadow: 0 0 0 1px #d5dbe4; }
.uz-colour:has(input:checked) span { box-shadow: 0 0 0 3px var(--bm-ink); }
.uz-colour small { font-size: 12px; color: var(--bm-muted); line-height: 1.2; display: block; }
.uz-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.uz-pills--size { margin-top: 10px; }
.uz-pill { cursor: pointer; }
.uz-pill > span { display: inline-block; border: 1px solid #d5dbe4; background: #fff; border-radius: 999px; padding: 7px 14px; font-weight: 600; font-size: 15px; }
.uz-photo { margin-top: 12px; }
.uz-photo img { border-radius: 8px; max-height: 120px; object-fit: cover; width: 100%; margin-bottom: 8px; }
.uz-photo label { display: block; font-weight: 600; margin-bottom: 4px; }
.uz-own-bg { margin-top: 12px; }
.uz-own-bg img { border-radius: 8px; max-height: 120px; object-fit: cover; width: 100%; margin-bottom: 8px; }
.uz-own-bg label { display: block; font-weight: 600; margin-bottom: 4px; }
.uz-menu-colours { display: grid; gap: 12px; }
.uz-menu-colour__name { display: block; font-size: 15px; font-weight: 600; margin-bottom: 4px; }
.uz-menu-colour .uz-pills { align-items: center; }
.uz-menu-colour input[type=color] { width: 46px; height: 34px; border: 1px solid #d5dbe4; border-radius: 8px; padding: 2px; background: #fff; }
.uz-menu-warn { margin: 12px 0 0; }
.uz-own { display: grid; gap: 8px; margin-top: 10px; }
.uz-own__row { display: flex; align-items: center; gap: 10px; font-size: 16px; }
.uz-own__row input { width: 46px; height: 34px; border: 1px solid #d5dbe4; border-radius: 6px; padding: 2px; background: #fff; }
.bm-foot { border-top: 1px solid var(--bm-line); background: #fff; font-size: 14px; color: var(--bm-muted); }
.bm-foot__in { max-width: 1240px; margin: 0 auto; padding: 16px; display: flex; gap: 18px; flex-wrap: wrap; }

@media (max-width: 900px) {
  body.bm { font-size: 17px; }
  .bm-frame { grid-template-columns: 1fr; gap: 14px; }
  .bm-nav { position: static; padding: 6px; min-width: 0; overflow: hidden; }
  .bm-nav__blog { display: none; }
  .bm-nav ul { display: flex; overflow-x: auto; gap: 4px; scrollbar-width: none; }
  .bm-nav li { flex: none; }
  .bm-nav li a { padding: 8px 12px; font-size: 16px; }
  .bm-cards { gap: 8px; }
  .bm-card { padding: 12px; }
  .bm-card b { font-size: 22px; }
  .bm-card span { font-size: 13px; }
  .bm-quick { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .bm-head__action { width: 100%; justify-content: center; }
  .bm-edit { grid-template-columns: 1fr; }
  .bm-head h1, .bm-h1, .bm-signin h1 { font-size: 25px; }
  .bm-hide-phone { display: none; }
  .bm-panel { padding: 16px; }
  .bm-acts .bm-btn, .bm-stack .bm-btn, .bm-savebar .bm-btn { width: 100%; }
  .bm-row2 { grid-template-columns: 1fr; }
  /* The search words on a row of their own; the choice and the button below them. */
  .bm-filter { flex-wrap: wrap; }
  .bm-filter input { flex: 1 1 100%; }
  .bm-filter select { flex: 1; }
}
.bm-crumbs__out { float: right; font-weight: 600; }

/* The site header's welcome card speaks to the classic pages; these are renewed. */
#snf .pp-welcome--classic { display: none; }

/* Inside Mijn SeniorenNet's page: its menu is on the left, so the blog's own menu is a row of tabs above the screen. */
.bm-app--account { color: var(--bm-ink); font-size: 18px; line-height: 1.55; }
/* A screen that needs all the room (fullWidth, Uitzicht): in Mijn SeniorenNet's page without the member's menu beside it,
   at the width of the site's header. */
.acc--nav:has(.bm-app--full) { grid-template-columns: minmax(0, 1fr); }
.acc--nav:has(.bm-app--full) > .acc-nav { display: none; }
.bm-app--account .bm-frame { grid-template-columns: minmax(0, 1fr); gap: 16px; }
.bm-app--account .bm-nav { position: static; padding: 6px; min-width: 0; overflow: hidden; display: flex; align-items: center; gap: 6px; }
.bm-app--account .bm-nav__blog { flex: none; margin: 0; padding: 6px 12px; border-bottom: 0; border-right: 1px solid var(--bm-line); }
.bm-app--account .bm-nav ul { display: flex; overflow-x: auto; gap: 4px; scrollbar-width: none; min-width: 0; }
.bm-app--account .bm-nav li { flex: none; }
.bm-app--account .bm-nav li a { padding: 8px 12px; font-size: 16px; }
@media (min-width: 1000px) {
  .bm-app--account .bm-nav ul { flex-wrap: wrap; overflow: visible; }
}
@media (max-width: 700px) {
  .bm-app--account .bm-nav__blog { display: none; }
}
.uz-stack { display: grid; gap: 8px; }

/* The post's own picture and its attachments (edit form). */
.bm-attach__photo { max-width: 100%; max-height: 180px; border-radius: 8px; display: block; }
.bm-attach h3 + p { margin-top: 0; }
.bm-attach__list { list-style: none; padding: 0; margin: 0 0 10px; }
.bm-attach__list li { display: flex; gap: 10px; align-items: center; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--bm-line); overflow-wrap: anywhere; }
.bm-attach__list li > a { display: inline-flex; align-items: center; gap: 12px; }
.bm-attach__thumb { flex: none; width: 72px; height: 72px; object-fit: cover; border-radius: 8px; }
.bm-radio--inline { margin: 0; flex: none; font-size: 15px; }

/* Under the editor: what its picture and link buttons do, with their own icons. */
.bm-help { margin: 12px 0 0; padding: 14px 16px; background: #f4f6fa; border-radius: 12px; font-size: 16px; line-height: 1.5; color: var(--bm-ink); }
.bm-help h3 { margin: 0 0 8px; font-size: 17px; }
.bm-help p { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 8px; }
.bm-help .bm-tools__icon { margin-top: 1px; }
.bm-help__note { color: var(--bm-muted); font-size: 15px; margin-bottom: 0 !important; }
.bm-tools__icon { flex: none; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; }
.bm-tools__icon svg { width: 24px; height: 24px; fill: currentColor; }
/* Inside Mijn SeniorenNet: on a computer the blog's menu sits under Blog in the site's own menu, so the
   bar above the screen goes; on a phone (where that menu is a row of buttons) the bar stays. */
.bm-subnav { list-style: none; margin: 2px 0 6px 18px !important; padding: 0 0 0 10px !important; border-left: 2px solid #dfe5ee; display: grid; gap: 0; }
/* Inside a blog: its address small at the menu's own level, its items indented under it, the other blogs at the address's level. */
.bm-subnav:has(> .bm-subnav__blog) { margin-left: 4px !important; padding-left: 0 !important; border-left: 0; }
.bm-subnav__blog--open { margin-bottom: 4px; }
.bm-subnav__items { list-style: none; margin: 0 0 4px 12px !important; padding: 0 0 0 10px !important; border-left: 2px solid #dfe5ee; display: grid; }
.bm-subnav a { font-size: 16px !important; padding: 6px 10px !important; color: #374151; }
.bm-subnav a[aria-current="page"] { background: #e8eef8; color: #1f2937; font-weight: 600; }
.bm-subnav:has(> .bm-subnav__blog) { grid-template-columns: minmax(0, 1fr); }
.bm-subnav__blog { min-width: 0; }
.bm-subnav__blog > a { display: flex !important; justify-content: flex-start !important; gap: 0 !important; align-items: baseline; min-width: 0; max-width: 100%; overflow: hidden; text-align: left !important; font-size: 15px !important; font-weight: 600; color: #3f63ad !important; padding: 6px 10px !important; white-space: nowrap; }
.bm-subnav__blog > a::before { flex: none; white-space: pre; }
.bm-subnav__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.bm-subnav__blog--open > a { color: #1f2937 !important; padding-bottom: 2px !important; }
.bm-subnav__blog--open > a::before, .bm-subnav__blog > a::before { content: "▸ "; color: #9aa4b2; }
.bm-subnav__blog--open > a::before { content: "▾ "; }
.bm-subnav__blog small { font-weight: 400; color: #6b7280; margin-left: 4px; }
@media (min-width: 901px) { .bm-app--account .bm-nav { display: none; } }
@media (max-width: 900px) { .bm-subnav { display: none !important; } }
.bm-app--account .bm-nav__other { flex: none; padding: 8px 12px; font-size: 15px; white-space: nowrap; }
.bm-break { overflow-wrap: anywhere; }

/* The way from a blog's own sign-in to a SeniorenNet-account (account-welcome, signin-linked, account-linked):
   read as an article, the two choices as cards side by side, one below the other on a phone. */
.bm-btn--round { border-radius: 999px; padding-left: 24px; padding-right: 24px; }
.bm-welcome { max-width: 760px; margin: 8px auto 32px; background: #fff; border: 1px solid var(--bm-line); border-radius: 18px; padding: 36px 40px; box-shadow: 0 6px 24px rgba(31, 42, 60, .06); }
.bm-welcome--short { max-width: 620px; }
.bm-welcome h1 { margin: 0 0 14px; font: 700 34px/1.2 Georgia, "Times New Roman", serif; }
.bm-welcome p { margin: 0 0 14px; }
.bm-welcome__lead { font-size: 20px; color: var(--bm-ink); }
.bm-welcome__badge { display: inline-block; margin: 0 0 12px !important; padding: 3px 12px; border-radius: 999px; background: var(--bm-blue-soft); color: var(--bm-blue); font: 700 14px/1.6 "Inter", system-ui, sans-serif; letter-spacing: .04em; text-transform: uppercase; }
.bm-welcome__badge--done { background: #e6f4ea; color: #1d6b38; }
.bm-welcome__safe { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border-radius: 12px; background: #eef6f0; color: #1d4d2c; margin: 20px 0 !important; }
.bm-welcome__safe svg { flex: none; color: #2f7a47; margin-top: 2px; }
.bm-welcome__safe strong { overflow-wrap: break-word; }
.bm-welcome__choose { margin-top: 22px !important; font-weight: 600; }
.bm-welcome__choices { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 8px; }
.bm-welcome__choice { display: flex; flex-direction: column; align-items: flex-start; padding: 22px; border: 1px solid var(--bm-line); border-radius: 14px; background: #fbfaf8; }
.bm-welcome__choice h2 { margin: 0 0 8px; font: 700 21px/1.3 Georgia, "Times New Roman", serif; }
.bm-welcome__choice p { flex: 1; font-size: 17px; color: var(--bm-muted); }
.bm-welcome__choice form { margin: 0; }
.bm-welcome__choice--new { background: var(--bm-blue-soft); border-color: #c9d5ee; }
.bm-welcome__account { display: flex; gap: 14px; align-items: center; padding: 14px 18px; border-radius: 12px; background: var(--bm-blue-soft); margin: 18px 0 !important; }
.bm-welcome__account small, .bm-welcome__blogs small { display: block; color: var(--bm-muted); font-size: 15px; }
.bm-welcome__account strong { font-size: 21px; }
.bm-welcome__face { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--bm-blue); color: #fff; font: 700 21px Georgia, serif; }
.bm-welcome__blogs { list-style: none; margin: 18px 0 22px; padding: 0; display: grid; gap: 10px; }
.bm-welcome__blogs li { display: flex; gap: 14px; align-items: center; padding: 12px 16px; border: 1px solid var(--bm-line); border-radius: 12px; }
.bm-welcome__blogs small { overflow-wrap: break-word; font-size: 14px; }
.bm-welcome__small { font-size: 16px; color: var(--bm-muted); }
/* The early move's question (early-switch): the button, and waiting as a quiet link beside it, below it on a phone. */
.bm-early__form { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; margin-top: 22px; }
.bm-early__cancel { font-size: 17px; }
@media (max-width: 700px) {
  .bm-welcome { padding: 24px 18px; border-radius: 14px; margin-top: 0; }
  .bm-welcome h1 { font-size: 27px; }
  .bm-welcome__lead { font-size: 18px; }
  .bm-welcome__choices { grid-template-columns: 1fr; }
  .bm-welcome .bm-btn { width: 100%; }
  .bm-welcome__choice form { width: 100%; }
}
/* Uitzicht's menu: each item's tick box with a field for another name beside it. */
.uz-menu-item { display: grid; grid-template-columns: minmax(130px, auto) minmax(0, 1fr); gap: 10px; align-items: center; }
.uz-menu-name { border: 1px solid #ccd3dd; border-radius: 8px; padding: 6px 10px; font: inherit; min-width: 0; }
/* Uitzicht's own menu items: a name and a link, or a list of links that opens. */
.uz-own-item { border: 1px solid #d5dbe4; border-radius: 10px; padding: 10px 12px; margin: 0 0 10px; display: grid; gap: 8px; }
.uz-own-item legend { font-weight: 600; font-size: 14px; padding: 0 4px; }
.uz-own-item label { display: grid; gap: 4px; font-size: 14px; }
.uz-own-item input[type=text] { border: 1px solid #ccd3dd; border-radius: 8px; padding: 6px 10px; font: inherit; min-width: 0; }
.uz-own-sub summary { cursor: pointer; font-size: 14px; color: var(--bm-blue); }
.uz-own-pair { display: grid; grid-template-columns: 1fr 1.3fr; gap: 6px; margin-bottom: 6px; }

/* Uitzicht in steps: the site's own width without the management menu beside it, the row of steps on top, the
   settings of one step on the left, the blog as a computer shows it on the right, and a bar at the
   bottom with Vorige, Volgende and Bewaren. Without script every part stands below the other. */
.bm-main--wide { min-width: 0; }
.uz-back { display: inline-block; margin: 0 0 8px; font-size: 16px; font-weight: 600; text-decoration: none; }
.uz-back:hover { text-decoration: underline; }
.uz-head { margin-bottom: 14px; }
.uz-head p { max-width: 760px; }
.uz-steps { background: #fff; border: 1px solid var(--bm-line); border-radius: 14px; padding: 7px 18px; margin: 0 0 12px;
  position: sticky; top: var(--bm-above, 0px); z-index: 4; box-shadow: 0 -14px 0 var(--bm-bg), 0 4px 14px rgba(31, 42, 60, .06); }
.uz-steps ol { list-style: none; margin: 0; padding: 0; display: flex; }
.uz-steps li { flex: 1; position: relative; }
/* The line from one step to the next, behind the round numbers. */
.uz-steps li + li::before { content: ""; position: absolute; top: 15px; left: calc(-50% + 24px); right: calc(50% + 24px); height: 2px; background: var(--bm-line); }
.uz-steps li:has(.is-done) + li::before, .uz-steps li:has(.is-done)::before { background: #b8c7e6; }
.uz-steps button { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 2px; border: 0; background: none; padding: 0 4px; cursor: pointer; font: 600 14px/1.25 "Inter", system-ui, sans-serif; color: var(--bm-muted); border-radius: 8px; }
.uz-steps__n { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 2px solid #cfd7e3; color: var(--bm-ink); font-size: 17px; transition: background .15s, border-color .15s; }
.uz-steps button:hover .uz-steps__n { border-color: var(--bm-blue); }
.uz-steps button.is-done .uz-steps__n { background: var(--bm-blue-soft); border-color: #b8c7e6; color: var(--bm-blue); }
.uz-steps button[aria-current="step"] { color: var(--bm-ink); }
.uz-steps button[aria-current="step"] .uz-steps__n { background: var(--bm-blue); border-color: var(--bm-blue); color: #fff; box-shadow: 0 0 0 5px var(--bm-blue-soft); }
.uz-steps button:focus-visible { outline: 3px solid #f5b400; outline-offset: 2px; }
.uz-steps__mini { display: none; }
.uz-steps__mini select { font: 600 18px "Inter", system-ui, sans-serif; color: var(--bm-ink); padding: 9px 12px; border: 1px solid #c9d1dc; border-radius: 8px; background: #fff; min-width: 0; flex: 1; }
.uz-steps__of { font-weight: 600; color: var(--bm-muted); font-size: 16px; white-space: nowrap; }
.uz-body { display: grid; grid-template-columns: minmax(320px, 380px) minmax(0, 1fr); gap: 24px; align-items: start; }
.uz-choices { min-width: 0; align-self: stretch; display: flex; flex-direction: column; }
.uz-choices > .uz-nav { margin-top: auto; }
.uz-step-head { margin: 0 0 14px; }
.uz-step-head__of { margin: 0; font-size: 14px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--bm-blue); }
.uz-step-head h2 { margin: 2px 0 6px; font: 700 26px/1.2 Georgia, "Times New Roman", serif; }
.uz-step-head p:last-child { margin: 0; color: var(--bm-muted); font-size: 16px; }
/* Without script the steps' headings stand between the panels, as titles of each part. */
.uz:not(.uz--steps) .uz-step-head { margin-top: 26px; }
.uz-choices .bm-panel { padding: 18px; margin-bottom: 14px; }
/* Big, clear choices where they are pictures: the layout drawings and the colours. */
.uz-grid { gap: 10px; }
.uz-option { padding: 10px; border-radius: 12px; background: #fff; transition: border-color .15s, box-shadow .15s; }
.uz-option:hover { border-color: #9fb2d9; }
.uz-option b { font-size: 16px; }
.uz-option small { font-size: 13px; }
.uz-colours { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 12px 8px; }
.uz-colour span { width: 52px; height: 52px; }
.uz-colour small { font-size: 13px; color: var(--bm-ink); }
.uz-pill > span { padding: 8px 15px; }
.uz-pill:hover > span { border-color: #9fb2d9; }
/* The preview: below the row of steps (its height in --uz-steps-h, admin.js), as high as the window allows. */
.uz-preview { position: sticky; top: calc(var(--bm-above, 0px) + var(--uz-steps-h, 0px) + 12px); min-width: 0; }
.uz-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px 14px; margin-bottom: 8px; min-height: 40px; }
.uz-caption { margin: 0; font-weight: 600; font-size: 16px; color: var(--bm-ink); min-width: 0; }
.uz-caption.is-missing { color: #8a5a00; }
.uz-tabs { display: flex; gap: 8px; flex: none; }
.uz-tabs button { border: 1px solid #d5dbe4; background: #fff; border-radius: 999px; padding: 6px 14px; font: 600 15px "Inter", sans-serif; cursor: pointer; color: var(--bm-ink); }
.uz-tabs button[aria-pressed="true"] { background: var(--bm-blue); color: #fff; border-color: var(--bm-blue); }
/* The blog drawn 1600 pixels wide at its full height, moved and zoomed onto the part being set (admin.js);
   only to look at, its links are not followed. */
.uz-frame { position: relative; overflow: hidden; border-radius: 12px; border: 1px solid #cfd6e1; background: #fff; box-shadow: 0 10px 30px rgba(31, 42, 60, .10); height: 640px; }
.uz-frame iframe { position: absolute; top: 0; left: 0; width: 1600px; height: 2000px; border: 0; background: #fff; transform-origin: 0 0; transition: transform .3s ease; pointer-events: none; }
/* Room to bring the row of steps to the top of the window, with the whole preview under it. */
.uz--steps .uz-body { min-height: calc(100vh - var(--bm-above, 0px) - var(--uz-steps-h, 0px) - 40px); }
/* The bar at the bottom: what is not saved yet, and the way through the steps. */
.uz-nav { position: sticky; bottom: 0; z-index: 3; padding: 8px 0 12px; background: linear-gradient(rgba(246, 244, 240, 0), var(--bm-bg) 12px); }
.uz-nav__in { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--bm-line); border-radius: 14px; padding: 10px; box-shadow: 0 -4px 20px rgba(31, 42, 60, .08); }
.uz-unsaved { margin: 0 0 0 4px; flex: 1 1 100%; display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 15px; color: #8a5a00; }
.uz-unsaved::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #f5a700; flex: none; }
.uz-nav__acts { display: flex; gap: 8px; flex: 1 1 100%; }
.uz-nav__acts .bm-btn { flex: 1; min-width: 0; padding-left: 10px; padding-right: 10px; }
/* Klaar: the choices per step. */
.uz-done__state { margin: 0 0 12px; font-weight: 600; }
.uz-summary { display: grid; gap: 12px; }
.uz-summary__step { border: 1px solid var(--bm-line); border-radius: 12px; padding: 12px 14px; }
.uz-summary__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.uz-summary__head h3 { margin: 0; font: 700 17px/1.3 Georgia, serif; }
.uz-summary dl { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; font-size: 16px; }
.uz-summary dt { color: var(--bm-muted); }
.uz-summary dd { margin: 0; font-weight: 600; }
.uz-summary__new { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px; background: #fef3c7; color: #8a5a00; font: 600 12px/1.6 "Inter", sans-serif; vertical-align: 1px; }
.uz-done__acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
@media (max-width: 1100px) {
  .uz-body { grid-template-columns: minmax(0, 1fr); }
  /* Above the settings, staying in sight below the row of steps while they scroll. */
  .uz-preview { order: -1; z-index: 3; background: var(--bm-bg); padding-bottom: 8px; }
  .uz-frame { height: 34vh; min-height: 220px; }
  .uz-bar { flex-wrap: wrap; }
  .uz-caption { font-size: 15px; flex: 1 1 100%; }
  .uz--steps .uz-body { min-height: 0; }
}
@media (max-width: 900px) {
  .uz-steps { padding: 8px 10px; }
  .uz-steps ol { display: none; }
  .uz-steps__mini { display: flex; align-items: center; gap: 10px; }
  .uz-step-head h2 { font-size: 23px; }
}
/* The site's "Naar boven" button would stand on the bar's Bewaren; the steps bring the page up themselves. */
body:has(#look-form) .pp__top { display: none !important; }
/* Going to a setting with the keyboard keeps it clear of the row of steps and of the bar at the bottom. */
html:has(#look-form.uz--steps) { scroll-padding-top: calc(var(--bm-above, 0px) + var(--uz-steps-h, 0px) + 24px); scroll-padding-bottom: 120px; }

/* Uitzicht's choices as tiles, each with a small drawing of what it does (_look_tiles.twig), in the
   blog's colour as chosen (--uz-accent, admin.js). */
.uz-q { margin: 16px 0 6px; }
.uz-q--sub { margin: 6px 0 4px; }
.uz-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 8px; }
.uz-tiles--pages, .uz-tiles--commentplace { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.uz-tile { position: relative; display: flex; flex-direction: column; gap: 5px; padding: 6px 6px 7px; border: 1px solid #d5dbe4; border-radius: 10px; background: #fff; cursor: pointer; text-align: center; transition: border-color .15s, box-shadow .15s; }
.uz-tile:hover { border-color: #9fb2d9; }
.uz-tile input { position: absolute; opacity: 0; pointer-events: none; }
.uz-tile__pic { display: block; border-radius: 6px; overflow: hidden; background: #eef1f5; }
.uz-tile__pic svg { display: block; width: 100%; height: auto; }
.uz-tile b { font-size: 13px; line-height: 1.25; font-weight: 600; color: var(--bm-ink); }
.uz-tile:has(input:checked) { border-color: var(--bm-blue); box-shadow: 0 0 0 2px var(--bm-blue) inset; background: #f6f8fd; }
.uz-tile:has(input:checked)::after { content: "✓"; position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--bm-blue); color: #fff; font: 700 12px/20px "Inter", sans-serif; text-align: center; }
.uz-tile:has(input:focus-visible) { outline: 3px solid #f5b400; outline-offset: 2px; }
.uz-tile__aa { height: 52px; line-height: 52px; font-size: 25px; color: var(--uz-accent, var(--bm-blue)); background: #f6f4f0; }
.uz-tile__border span { display: block; width: 62%; height: 30px; margin: 11px auto; border: 6px solid var(--uz-accent, var(--bm-blue)); background: #fff; border-radius: 3px; }
.uz-border__more { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin-top: 10px; font-size: 15px; }
.uz-border__more label { display: inline-flex; gap: 8px; align-items: center; }
.uz-border__more input[type=color] { width: 46px; height: 34px; border: 1px solid #d5dbe4; border-radius: 8px; padding: 2px; background: #fff; }
.uz-parts__sample { grid-column: 1 / -1; padding: 6px 10px; border-radius: 8px; background: #f6f4f0; color: var(--bm-ink); line-height: 1.3; }
/* The drawings: the page, the posts and blocks, lines of text, the blog's colour. */
.uz-s .bg { fill: #eef1f5; }
.uz-s .card { fill: #fff; stroke: #d5dbe4; stroke-width: 1; }
.uz-s .side { fill: #e2e7ee; }
.uz-s .ln { fill: #c9d1dc; }
.uz-s .dk { fill: #8b97aa; }
.uz-s .w { fill: #fff; }
.uz-s .a { fill: var(--uz-accent, var(--bm-blue)); }
.uz-s .as { stroke: var(--uz-accent, var(--bm-blue)); }
.uz-s .fr { fill: none; stroke: var(--uz-accent, var(--bm-blue)); stroke-width: 4; }
.uz-s .btn { fill: #fff; stroke: var(--uz-accent, var(--bm-blue)); stroke-width: 1.5; }
.uz-s .pillb { fill: #fff; stroke: #c9d1dc; }
.uz-s .sky { fill: #bcd3ea; }
.uz-s .hill { fill: #7fa36b; }
.uz-s .sun { fill: #f4c95d; }
.uz-s .t-title { font: 700 11px Georgia, serif; fill: var(--uz-accent, var(--bm-blue)); }
.uz-s .t-text { font: 9px system-ui, sans-serif; fill: #5b6472; }
.uz-deco [fill="#000"] { fill: var(--uz-accent, var(--bm-blue)); }
.uz-deco [stroke="#000"] { stroke: var(--uz-accent, var(--bm-blue)); }
.uz-s .on-a .uz-deco [fill="#000"] { fill: #fff; }
.uz-s .on-a .uz-deco [stroke="#000"] { stroke: #fff; }
/* The small choices as chips, each showing the very thing (_look_tiles.twig chips): the mark, the line under a post,
   the button with its sign, the pattern; nothing as a struck-out circle, a picture of one's own as a picture. */
.uz-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.uz-chip { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; width: 62px; padding: 6px 2px 5px; border: 1px solid #d5dbe4; border-radius: 10px; background: #fff; cursor: pointer; text-align: center; }
.uz-chip:hover { border-color: #9fb2d9; }
.uz-chip input { position: absolute; opacity: 0; pointer-events: none; }
.uz-chip:has(input:checked) { border-color: var(--bm-blue); box-shadow: 0 0 0 2px var(--bm-blue) inset; background: #f6f8fd; }
.uz-chip:has(input:focus-visible) { outline: 3px solid #f5b400; outline-offset: 2px; }
.uz-chip small { font-size: 12px; line-height: 1.2; color: var(--bm-ink); }
.uz-chip__pic { display: grid; place-items: center; width: 100%; height: 36px; color: #6b7686; }
.uz-chip__pic svg { width: 30px; height: 30px; }
.uz-chips--divider .uz-chip { width: 100px; }
.uz-chips--divider .uz-chip__pic svg.uz-deco { width: 92px; height: 18px; }
.uz-chips--icon .uz-chip { width: auto; min-width: 66px; padding-left: 8px; padding-right: 8px; }
.uz-btnchip { display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; border-radius: 7px; background: var(--uz-accent, var(--bm-blue)); color: #fff; font: 600 13px/1.1 "Inter", system-ui, sans-serif; white-space: nowrap; }
.uz-btnchip--top { background: #fff; color: var(--bm-ink); border: 1px solid var(--uz-accent, var(--bm-blue)); }
.uz-btnchip .uz-btnchip__sign { width: 15px; height: 15px; }
.uz-btnchip .uz-deco [fill="#000"] { fill: currentColor; }
.uz-btnchip .uz-deco [stroke="#000"] { stroke: currentColor; }
/* Each sign points the way its button goes, as on the blog (blog.css): newer to the left, more posts down (the
   next page, with all posts on one page, to the right), back to the top up. */
.uz-btnchip--previous .uz-btnchip__sign { transform: scaleX(-1); }
.uz-btnchip--next .uz-btnchip__sign { transform: rotate(90deg); }
#look-form:has(input[name="berichten"][value="all"]:checked) .uz-btnchip--next .uz-btnchip__sign { transform: none; }
.uz-btnchip--top .uz-btnchip__sign { transform: rotate(-90deg); }
.uz-swatch { display: block; width: 40px; height: 32px; border-radius: 7px; border: 1px solid #d5dbe4; background-color: #fff; --pattern: color-mix(in srgb, var(--uz-accent, var(--bm-blue)) 30%, transparent); }
.uz-swatch.pattern-dots { background-image: radial-gradient(var(--pattern) 1.6px, transparent 2px); background-size: 9px 9px; }
.uz-swatch.pattern-stripes { background-image: repeating-linear-gradient(45deg, var(--pattern) 0 2px, transparent 2px 9px); }
.uz-swatch.pattern-checks { background-image: linear-gradient(90deg, var(--pattern) 50%, transparent 50%), linear-gradient(var(--pattern) 50%, transparent 50%); background-size: 16px 16px; }
.uz-swatch.pattern-linen { background-image: repeating-linear-gradient(0deg, var(--pattern) 0 1px, transparent 1px 4px), repeating-linear-gradient(90deg, var(--pattern) 0 1px, transparent 1px 4px); }
/* "Toon dit in het voorbeeld": the same small eye beside each setting's heading (admin.js), explained at the top. */
.uz-see, .uz-see-icon { display: inline-grid; place-items: center; width: 28px; height: 28px; border: 1px solid #c9d3e3; border-radius: 50%; background: #fff; color: var(--bm-blue); vertical-align: middle; }
.uz-see { margin-left: 8px; padding: 0; cursor: pointer; }
.uz-see:hover { background: #eef3fc; border-color: var(--bm-blue); }
.uz-see:focus-visible { outline: 3px solid #f5b400; outline-offset: 2px; }
.uz-see svg, .uz-see-icon svg { width: 18px; height: 18px; }
.uz-see-icon { margin: 0 5px; }
.uz-see-intro { margin: 8px 0 0; font-size: 16px; }
/* The link of an own menu item whose list has links: not used, so greyed out with a word why. */
.uz-own-item input:disabled { background: #eef0f3; color: #8a929e; cursor: not-allowed; }
.uz-own-link-note { margin: 2px 0 8px; font-size: 14px; }

/* The start page of a member without a blog: starting one first and large, linking one below it. */
.bm-start__new { text-align: center; padding: 34px 24px; }
.bm-start__new h1 { margin: 0 0 10px; }
.bm-btn--big { font-size: 19px; padding: 14px 30px; }
.bm-start__have { margin-top: 18px; }
/* A zoomed-in preview: a click shows the whole page again. */
.uz-frame--zoomed { cursor: zoom-out; }
.bm-signin .bm-lead { font-size: 18px; line-height: 1.5; margin: 10px 0 20px; }
/* The overview's words: a line under the blog's name, one under the figures, the first steps and the tips. */
.bm-intro { margin: 8px 0 0; color: var(--bm-muted); max-width: 60ch; }
.bm-cards__note { grid-column: 1 / -1; margin: -4px 0 0; color: var(--bm-muted); font-size: 15px; }
.bm-copied { display: block; color: var(--bm-green, #2f7d4f); margin-top: 6px; }
/* The overview's lines with a mark, words and a button: the steps, the tips, the empty list of posts. */
.bm-rows { list-style: none; margin: 0; padding: 0; }
.bm-rows > li, .bm-rows--one { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 6px 14px; align-items: center; padding: 12px 0; border-top: 1px solid var(--bm-line); }
.bm-rows > li:first-child { border-top: 0; padding-top: 2px; }
.bm-rows--one { grid-template-columns: minmax(0, 1fr) auto; border-top: 0; padding: 0; }
.bm-rows__mark { width: 30px; height: 30px; border-radius: 50%; background: var(--bm-blue-soft, #e8eef8); color: var(--bm-blue, #3f63ad); font: 700 15px/30px "Inter", system-ui, sans-serif; text-align: center; }
.bm-rows__mark--tip { background: #fff4d6; font-size: 15px; }
.bm-rows__text { line-height: 1.45; }
.bm-rows > li > .bm-btn, .bm-rows--one > .bm-btn { justify-self: end; white-space: nowrap; }
.bm-rows > li:not(:has(> .bm-btn)) { grid-template-columns: 32px minmax(0, 1fr); }
@media (max-width: 600px) {
  .bm-rows > li { grid-template-columns: 32px minmax(0, 1fr); }
  .bm-rows > li > .bm-btn { grid-column: 2; justify-self: start; }
  .bm-rows--one { grid-template-columns: minmax(0, 1fr); }
  .bm-rows--one > .bm-btn { justify-self: start; }
}
.bm-address { margin: 2px 0 0; color: var(--bm-muted); font-size: 15px; overflow-wrap: anywhere; }
/* A page's head: its title and words on the left, its buttons ("Bekijk je blog" first) always at the top right;
   under the words only on a narrow screen. */
.bm-head { flex-wrap: nowrap; align-items: flex-start; }
.bm-head > div:first-child { flex: 1 1 auto; min-width: 0; }
.bm-head > .bm-acts { flex: none; justify-content: flex-end; margin-top: 4px; }
@media (max-width: 700px) { .bm-head { flex-wrap: wrap; } .bm-head > .bm-acts { justify-content: flex-start; margin-top: 0; } }