/* Shared Ostfriesland Nordsee controls. Palette via CSS variables; layout belongs to the containing component. */
/* Suppress only the browser's transient tap flash. Keep selection, hover and focus indicators. */
:where(body:not(.wp-admin), .editor-styles-wrapper, .on-admin, .on-editor-panel, .on-design-admin, .on-heading-editor),
:where(body:not(.wp-admin), .editor-styles-wrapper, .on-admin, .on-editor-panel, .on-design-admin, .on-heading-editor) * { -webkit-tap-highlight-color:transparent; }
/* Ostfriesland Nordsee admin and block-editor fields share square corners; checkbox pills and range controls keep their own shapes. */
:is(body.wp-admin,.editor-styles-wrapper) :is(.on-admin,.on-editor-panel,.on-design-admin,.on-heading-editor,.on-meta-field,.on-ad-admin,.on-article-picker,.on-inline-related-settings,.on-editorial-fields) :is(input:not([type=checkbox],[type=radio],[type=range]),select,textarea) { border-radius:0; }
/* Field geometry is shared by account, submission and editorial forms. */
.on-meta-grid,.on-form-columns { display:grid; grid-template-columns:minmax(0,1fr); align-items:start; gap:22px; min-width:0; width:100%; }
.on-meta-grid>*,.on-form-columns>* { min-width:0; max-width:100%; }
.on-field-label { display:inline-flex; align-items:center; gap:8px; min-width:0; vertical-align:middle; }
.on-field-label>.on-icon { display:block; width:16px; height:16px; min-width:16px; flex:0 0 16px; }
.on-social-field { display:grid; gap:8px; min-width:0; width:100%; }
.on-social-field>input { display:block; box-sizing:border-box; width:100%; max-width:none; }
/* Native admin selects keep a visible arrow even when field components set a background. */
body.wp-admin :is(.on-admin,.on-editor-panel,.on-design-admin,.on-heading-editor,.on-meta-field,.on-ad-admin) select:not([multiple]):not([size]),
body.wp-admin :is(.on-admin,.on-editor-panel,.on-design-admin,.on-heading-editor,.on-meta-field,.on-ad-admin) select:not([multiple])[size="1"] {
  appearance:none; -webkit-appearance:none; padding-inline-end:42px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%23002d5e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position:right 12px center; background-repeat:no-repeat; background-size:18px 18px;
}
body.wp-admin.rtl :is(.on-admin,.on-editor-panel,.on-design-admin,.on-heading-editor,.on-meta-field,.on-ad-admin) select:not([multiple]) { background-position:left 12px center; }
@media(forced-colors:active) { body.wp-admin :is(.on-admin,.on-editor-panel,.on-design-admin,.on-heading-editor,.on-meta-field,.on-ad-admin) select:not([multiple]) { appearance:auto; background-image:none; } }
/* One title tooltip in the configured text colour, also usable inside dialogs and without the theme. */
.on-tooltip { position:fixed; inset:auto; z-index:2147483646; box-sizing:border-box; width:max-content; min-width:0; max-width:min(340px,calc(100vw - 20px)); margin:0; padding:10px 12px; border:1px solid var(--on-ink,#002d5e); border-radius:0; background:var(--on-ink,#002d5e); color:var(--on-on-dark,#fff); box-shadow:0 4px 16px rgba(0,0,0,.16); font:400 13px/1.5 var(--on-font,system-ui,sans-serif); text-align:start; text-transform:none; letter-spacing:normal; white-space:normal; overflow:visible; overflow-wrap:anywhere; word-break:normal; pointer-events:auto; cursor:default; }
.on-tooltip[hidden] { display:none; }
.on-tooltip::backdrop { background:transparent; pointer-events:none; }
.on-tooltip-text { display:block; max-height:calc(100dvh - 42px); overflow:auto; overscroll-behavior:contain; scrollbar-width:thin; }
.on-tooltip::after { content:""; position:absolute; width:8px; height:8px; background:inherit; pointer-events:none; transform:rotate(45deg); }
.on-tooltip[data-placement="top"]::after { left:calc(var(--on-tooltip-arrow) - 4px); bottom:-5px; }
.on-tooltip[data-placement="bottom"]::after { left:calc(var(--on-tooltip-arrow) - 4px); top:-5px; }
.on-tooltip[data-placement="left"]::after { right:-5px; top:calc(var(--on-tooltip-arrow) - 4px); }
.on-tooltip[data-placement="right"]::after { left:-5px; top:calc(var(--on-tooltip-arrow) - 4px); }
@media (forced-colors:active) { .on-tooltip { border-color:CanvasText; background:Canvas; color:CanvasText; box-shadow:none; }.on-tooltip::after { display:none; } }
@media print { .on-tooltip { display:none!important; } }
/* One information-box surface for events, organizers, companies and editorial facts.
   Component files retain their content layout, not independent surface definitions. */
:is(.on-info-box,.on-wikibox,.on-content-infobox,.on-company-overview,.on-factbox) {
  --on-info-padding:26px;
  --on-property-surface:var(--on-paper,#fff);
  box-sizing:border-box; min-width:0; padding:var(--on-info-padding);
  border:1px solid var(--on-line,#f4e5d9); border-top:3px solid var(--on-accent,#fab900);
  border-radius:0; background:var(--on-info-background,var(--on-soft,#f4f6f7)); box-shadow:none;
  color:var(--on-info-color,var(--on-ink,#002d5e));
}
@media(max-width:639px) {
  :is(.on-info-box,.on-wikibox,.on-content-infobox,.on-company-overview,.on-factbox) { --on-info-padding:20px; }
}

/* Shared heading wrapping for frontend, editorial canvas and Ostfriesland Nordsee admin surfaces.
   Automatic hyphenation uses the inherited document/content language; emergency wrapping
   is only a fallback for words the browser cannot hyphenate (e.g. long model identifiers). */
:where(body:not(.wp-admin), .editor-styles-wrapper, .on-admin, .on-editor-panel, .on-design-admin, .on-heading-editor) :is(h1,h2,h3,h4,h5,h6,[role="heading"],.editor-post-title__input) {
  min-width:0; -webkit-hyphens:auto; hyphens:auto; hyphenate-limit-chars:6 3 3;
  word-break:normal; overflow-wrap:break-word;
}
/* Optional per-level typography follows semantic headings, including variable card heading tags. */
:where(body:not(.wp-admin),.editor-styles-wrapper) h1 { --on-heading-current-size:calc(var(--on-h1-size,var(--on-heading-size)) * var(--on-reading-scale,1)); }
:where(body:not(.wp-admin),.editor-styles-wrapper) h2 { --on-heading-current-size:calc(var(--on-h2-size,var(--on-heading-size)) * var(--on-reading-scale,1)); }
:where(body:not(.wp-admin),.editor-styles-wrapper) h3 { --on-heading-current-size:calc(var(--on-h3-size,var(--on-heading-size)) * var(--on-reading-scale,1)); }
:where(body:not(.wp-admin),.editor-styles-wrapper) h4 { --on-heading-current-size:calc(var(--on-h4-size,var(--on-heading-size)) * var(--on-reading-scale,1)); }
:where(body:not(.wp-admin),.editor-styles-wrapper) h5 { --on-heading-current-size:calc(var(--on-h5-size,var(--on-heading-size)) * var(--on-reading-scale,1)); }
:where(body:not(.wp-admin),.editor-styles-wrapper) h6 { --on-heading-current-size:calc(var(--on-h6-size,var(--on-heading-size)) * var(--on-reading-scale,1)); }
/* One transition for links and buttons, in both directions, including header/footer and editor controls. */
:where(body:not(.wp-admin), .editor-styles-wrapper, .on-admin, .on-editor-panel, .on-design-admin, .on-heading-editor) :is(a, button, [role="button"], input[type="submit"], input[type="button"], input[type="reset"], summary),
:is(.on-button, .on-file-picker, :where(.on-prose,.editor-styles-wrapper) .wp-block-button__link, :is(.on-admin,.on-editor-panel,.on-design-admin,.on-heading-editor) :is(.button,.wp-switch-editor)) { transition: all 0.4s ease-in-out; }
/* Icon segments appear without a padding animation; hover timing and visual transitions stay shared. */
:is(.on-button,.on-file-picker,.on-index-filter-toggle,.on-action,.on-helpful,.on-menu-button,.on-admin-button, :where(.on-prose,.editor-styles-wrapper) .wp-block-button__link, :is(.on-admin,.on-editor-panel,.on-design-admin,.on-heading-editor) .button) { transition-property:background-color,color,border-color,box-shadow,outline-color,opacity,transform,filter,text-decoration-color; }
/* Shared current-item treatment for the main menu, account links, tabs and select options.
   Containers may change the accent edge, not duplicate the state colours. */
.on-nav-links>:is(a[aria-current]:not([aria-current="false"]),button[aria-selected="true"]),
.on-menu-row>[aria-current]:not([aria-current="false"]) {
  background:var(--on-section-tint,#f4e5d9); color:var(--on-ink,#002d5e);
  box-shadow:var(--on-nav-active-mark,inset 2px 0 var(--on-accent,#fab900));
}
:is(.on-button, :where(.on-prose,.editor-styles-wrapper) .wp-block-button__link, :is(.on-admin,.on-editor-panel,.on-design-admin,.on-heading-editor) :is(.button,.wp-switch-editor)) {
  --on-btn-bg:var(--on-accent,#fab900);
  --on-btn-text:var(--on-on-accent,var(--on-ink,#002d5e));
  --on-btn-border:var(--on-accent,#fab900);
  --on-btn-hover-bg:var(--on-ink,#002d5e);
  --on-btn-hover-text:var(--on-on-dark,#fff);
  --on-btn-hover-border:var(--on-ink,#002d5e);
  --on-control-py:14px; --on-control-px:24px; --on-control-gap:12px;
  display:inline-flex; box-sizing:border-box; align-items:center; justify-content:center; gap:var(--on-control-gap);
  min-height:50px; max-width:100%; padding-block:var(--on-control-py); padding-inline:var(--on-control-start,var(--on-control-px)) var(--on-control-end,var(--on-control-px)); margin:0;
  border:1px solid var(--on-btn-border); border-radius:0;
  background:var(--on-btn-bg); color:var(--on-btn-text);
  font:var(--on-button-weight,600) var(--on-button-size,12px)/1.5 var(--on-button-font,'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif);
  letter-spacing:.035em; text-transform:var(--on-button-transform,uppercase); text-decoration:none; text-align:center;
  white-space:normal; overflow-wrap:anywhere; cursor:pointer; vertical-align:middle;
  box-shadow:none; text-shadow:none;
}
:is(.on-button, :where(.on-prose,.editor-styles-wrapper) .wp-block-button__link, :is(.on-admin,.on-editor-panel,.on-design-admin,.on-heading-editor) :is(.button,.wp-switch-editor)) .on-icon {
  display:inline-block; width:18px; height:18px; min-width:18px; max-width:18px; max-height:18px;
  flex:0 0 18px; fill:currentColor; vertical-align:middle;
}
:is(.on-button, :where(.on-prose,.editor-styles-wrapper) .wp-block-button__link, :is(.on-admin,.on-editor-panel,.on-design-admin,.on-heading-editor) :is(.button,.wp-switch-editor)):hover:not(:disabled):not([aria-disabled="true"]) {
  background:var(--on-btn-hover-bg); color:var(--on-btn-hover-text); border-color:var(--on-btn-hover-border);
  text-decoration:none;
}
:is(.on-button, :where(.on-prose,.editor-styles-wrapper) .wp-block-button__link, :is(.on-admin,.on-editor-panel,.on-design-admin,.on-heading-editor) :is(.button,.wp-switch-editor)):focus-visible { outline:2px solid var(--on-focus,var(--on-ink,#002d5e)); outline-offset:3px; }
:is(.on-button, :where(.on-prose,.editor-styles-wrapper) .wp-block-button__link, :is(.on-admin,.on-editor-panel,.on-design-admin,.on-heading-editor) :is(.button,.wp-switch-editor)):is(:disabled,[aria-disabled="true"]) { opacity:.5; cursor:not-allowed; }
.on-button.on-button-dark {
  --on-btn-bg:var(--on-ink,#002d5e); --on-btn-text:var(--on-on-dark,#fff); --on-btn-border:var(--on-ink,#002d5e);
  --on-btn-hover-bg:var(--on-accent,#fab900); --on-btn-hover-text:var(--on-on-accent,var(--on-ink,#002d5e)); --on-btn-hover-border:var(--on-accent,#fab900);
}
.on-button.on-button-light {
  --on-btn-bg:var(--on-soft,#f4f6f7); --on-btn-text:var(--on-ink,#002d5e); --on-btn-border:var(--on-line,#f4e5d9);
  --on-btn-hover-bg:var(--on-accent,#fab900); --on-btn-hover-text:var(--on-on-accent,var(--on-ink,#002d5e)); --on-btn-hover-border:var(--on-accent,#fab900);
}
.on-button.on-button-outline,:where(.on-prose,.editor-styles-wrapper) .is-style-outline>.wp-block-button__link {
  --on-btn-bg:transparent; --on-btn-text:var(--on-ink,#002d5e); --on-btn-border:var(--on-ink,#002d5e);
}
.on-button.on-button-block { display:flex; width:100%; min-width:0; align-self:stretch; justify-self:stretch; }
.on-button.on-button-small { --on-control-py:10px; --on-control-px:18px; min-height:44px; }
.on-button.on-button-compact { --on-control-py:7px; --on-control-px:12px; --on-control-gap:8px; min-height:36px; font-size:var(--on-button-size,11px); }
/* The same native file picker serves account forms and Design uploads. */
.on-file-picker { --on-control-py:11px; --on-control-px:15px; --on-control-gap:10px; position:relative; display:inline-flex; justify-content:center; min-height:44px; margin:0; border:1px solid var(--on-line,#f4e5d9); padding-block:var(--on-control-py); padding-inline:var(--on-control-start,var(--on-control-px)) var(--on-control-end,var(--on-control-px)); cursor:pointer; background:#fff; }
.on-file-picker>span { display:inline-flex; align-items:center; justify-content:center; gap:var(--on-control-gap); font:var(--on-button-weight,500) var(--on-button-size,12px)/1.5 var(--on-button-font,'Poppins',system-ui,-apple-system,"Segoe UI",sans-serif); text-transform:var(--on-button-transform,none); }
.on-file-picker .on-icon { width:17px; height:17px; }
.on-file-picker:hover { background:var(--on-soft,#f4f6f7); border-color:var(--on-ink,#002d5e); }
.on-file-picker:focus-within { outline:1px solid var(--on-ink,#002d5e); outline-offset:1px; }
.on-file-picker .on-file-input { position:absolute; inset:0; width:100%; height:100%; min-height:0; padding:0; margin:0; opacity:0; cursor:pointer; font-size:12px; }

.on-button.on-button-icon { width:44px; height:44px; min-width:44px; min-height:44px; padding:0; flex:0 0 44px; }
/* Admin aliases reuse the same palette and interaction model, at the compact editing size. */
:is(.on-admin,.on-editor-panel,.on-design-admin,.on-heading-editor) :is(.button,.on-button,.wp-switch-editor) {
  --on-btn-bg:var(--on-soft,#f4f6f7); --on-btn-text:var(--on-ink,#002d5e); --on-btn-border:var(--on-line,#f4e5d9);
  --on-btn-hover-bg:var(--on-accent,#fab900); --on-btn-hover-text:var(--on-on-accent,var(--on-ink,#002d5e)); --on-btn-hover-border:var(--on-accent,#fab900);
  --on-control-py:9px; --on-control-px:14px; --on-control-gap:8px;
  min-height:40px; padding-block:var(--on-control-py); padding-inline:var(--on-control-start,var(--on-control-px)) var(--on-control-end,var(--on-control-px)); gap:var(--on-control-gap); text-transform:var(--on-button-transform,none); letter-spacing:0;
}
:is(.on-admin,.on-editor-panel,.on-design-admin,.on-heading-editor) :is(.button-primary,.on-admin-primary) {
  --on-btn-bg:var(--on-accent,#fab900); --on-btn-text:var(--on-on-accent,var(--on-ink,#002d5e)); --on-btn-border:var(--on-accent,#fab900);
  --on-btn-hover-bg:var(--on-ink,#002d5e); --on-btn-hover-text:var(--on-on-dark,#fff); --on-btn-hover-border:var(--on-ink,#002d5e);
}
.on-button.on-button-danger,
:is(.on-admin,.on-editor-panel,.on-design-admin,.on-heading-editor) :is(.on-admin-danger,.on-button-danger) {
  --on-btn-bg:#8f1d1a; --on-btn-text:#fff; --on-btn-border:#8f1d1a;
  --on-btn-hover-bg:#6c1513; --on-btn-hover-text:#fff; --on-btn-hover-border:#6c1513;
}
/* A labelled action keeps its palette, radius and natural width. The existing icon
   occupies an edge segment; a translucent shade follows every hover/active colour.
   Only annotations are added to the DOM, so editor, counter and upload nodes stay intact. */
[data-on-button-icon] {
  --on-control-label-pad:min(var(--on-control-py,14px),var(--on-control-px,24px));
  --on-control-segment:var(--on-control-segment-measured,48px);
  position:relative;
}
[data-on-button-layout="row"][data-on-button-icon="start"] { --on-control-start:calc(var(--on-control-label-pad) + var(--on-control-segment)); --on-control-end:var(--on-control-label-pad); }
[data-on-button-layout="row"][data-on-button-icon="end"] { --on-control-start:var(--on-control-label-pad); --on-control-end:calc(var(--on-control-label-pad) + var(--on-control-segment)); }
[data-on-button-icon]::before {
  content:""; position:absolute; inset-block:auto; top:50%; inset-inline:auto 0; width:var(--on-control-segment); height:var(--on-control-segment); transform:translateY(-50%); box-sizing:border-box;
  background:rgb(0 0 0 / .08); border-start-end-radius:inherit; border-end-end-radius:inherit; pointer-events:none;
}
[data-on-button-icon="start"]::before { inset-inline:0 auto; border-start-start-radius:inherit; border-end-start-radius:inherit; border-start-end-radius:0; border-end-end-radius:0; }
[data-on-button-layout="row"] [data-on-button-symbol] {
  position:absolute; inset-block-start:50%; inset-inline-start:auto; inset-inline-end:calc((var(--on-control-segment) - var(--on-control-symbol,18px)) / 2);
  transform:translateY(-50%); pointer-events:none;
}
[data-on-button-layout="row"][data-on-button-icon="start"] [data-on-button-symbol] { inset-inline-start:calc((var(--on-control-segment) - var(--on-control-symbol,18px)) / 2); inset-inline-end:auto; }
/* High-contrast modes preserve the segment boundary without obscuring the icon. */
@media(forced-colors:active) {
  [data-on-button-icon]::before { background:transparent; border-inline-start:1px solid ButtonText; }
  [data-on-button-icon="start"]::before { border-inline-start:0; border-inline-end:1px solid ButtonText; }
}
.on-event-series-options { margin:0; border:1px solid var(--on-line,#f4e5d9); background:var(--on-soft,#f4f6f7); padding:14px 16px; min-width:0; }
.on-event-series-options>summary { display:flex; align-items:center; gap:12px; min-height:24px; list-style:none; cursor:pointer; font-size:14px; font-weight:600; }
.on-event-series-options>summary::-webkit-details-marker { display:none; }
.on-event-series-options>summary>.on-icon { width:18px; height:18px; margin-inline-start:auto; flex:0 0 18px; transition:transform .2s ease; }
.on-event-series-options[open]>summary>.on-icon { transform:rotate(180deg); }
.on-event-series-options>.on-meta-grid { margin-top:20px; padding:0; }
.on-recurrence-weekdays { min-width:0; margin:0; padding:0; border:0; }
.on-recurrence-weekdays>legend { margin:0 0 10px; font:600 14px/1.6 var(--on-font,system-ui,sans-serif); text-transform:none; }
/* Shared choices: square choice rows use the same checkbox pills, labels and focus states. */
.on-choice:has(>input:is([type=checkbox],[type=radio])) {
  position:relative; display:flex; box-sizing:border-box; flex-direction:row; flex-wrap:nowrap;
  align-items:center; justify-content:flex-start; align-self:start; justify-self:stretch; gap:var(--on-choice-gap,16px);
  width:100%; max-width:100%; min-width:0; min-height:56px; margin:0; padding:var(--on-choice-padding,12px 16px);
  border:1px solid var(--on-choice-border,transparent); border-radius:0;
  background:var(--on-choice-background,var(--on-soft,#f4f6f7)); color:var(--on-ink,#002d5e);
  font:500 var(--on-choice-font-size,14px)/var(--on-choice-line-height,1.6) var(--on-font,system-ui,-apple-system,"Segoe UI",sans-serif);
  text-align:left; text-transform:none; letter-spacing:0; overflow-wrap:anywhere; cursor:pointer;
  transition:border-color 180ms ease;
}
.on-choice:has(>input:not(:disabled)):hover { border-color:var(--on-line,#f4e5d9); }
.on-choice:has(>input:focus-visible) { border-color:var(--on-focus,var(--on-ink,#002d5e)); }
.on-choice:has(>input:disabled) { cursor:default; }
.on-choice:has(>input:user-invalid),.on-choice:has(>input[aria-invalid="true"]) { border-color:#8f1d1a; }
.on-choice:has(>input:is([type=checkbox],[type=radio]))>input:is([type=checkbox],[type=radio]) {
  appearance:none; -webkit-appearance:none; position:relative; inset:auto; display:block; box-sizing:border-box;
  order:3; flex:0 0 46px; width:46px; min-width:46px; max-width:46px;
  height:26px; min-height:26px; max-height:26px; padding:0; margin:0 0 0 auto;
  opacity:1; clip-path:none; overflow:visible; border:1px solid #879398; border-radius:999px;
  background:#879398; color:var(--on-ink,#002d5e); box-shadow:none; cursor:pointer;
  transition:background-color 180ms ease,border-color 180ms ease;
}
.on-choice:has(>input:is([type=checkbox],[type=radio]))>input:is([type=checkbox],[type=radio])::before {
  content:""; position:absolute; display:block; box-sizing:border-box;
  width:18px; height:18px; top:3px; left:3px; margin:0; padding:0;
  border:0; border-radius:50%; background:#fff; box-shadow:none; opacity:1;
  transform:translateX(0); transition:transform 180ms ease;
}
.on-choice:has(>input:is([type=checkbox],[type=radio]))>input:is([type=checkbox],[type=radio])::after { content:none; }
.on-choice:has(>input)>input:is([type=checkbox],[type=radio]):checked {
  background:var(--on-accent,#fab900); border-color:var(--on-accent,#fab900);
}
.on-choice:has(>input)>input:is([type=checkbox],[type=radio]):checked::before { transform:translateX(20px); }
.on-choice:has(>input)>input:is([type=checkbox],[type=radio]):indeterminate::before { transform:translateX(10px); }
.on-choice:has(>input)>input:is([type=checkbox],[type=radio]):focus-visible { outline:2px solid var(--on-focus,var(--on-ink,#002d5e)); outline-offset:3px; }
.on-choice:has(>input)>input:is([type=checkbox],[type=radio]):disabled { opacity:.6; cursor:default; }
.on-choice>span:not(.screen-reader-text),.on-choice>strong { min-width:0; }
.on-choice-copy { display:grid; flex:1 1 auto; gap:4px; min-width:0; }
.on-choice-copy>strong { font:600 14px/1.5 var(--on-font,system-ui,sans-serif); }
.on-choice-description { display:block; font:400 12px/1.7 var(--on-font,system-ui,sans-serif); }
.on-choice a { color:inherit; text-decoration:underline; text-underline-offset:3px; }
.on-choice.on-choice-icon:has(>input) { width:auto; min-width:70px; padding:10px; }
.on-brand-choices>.on-choice:has(>input) { --on-choice-gap:10px; --on-choice-padding:8px; --on-choice-border:var(--on-line,#f4e5d9); --on-choice-background:var(--on-paper,#fff); align-self:stretch; }
.on-choice-media { display:grid; place-items:center; box-sizing:border-box; flex:0 0 44px; width:44px; height:44px; padding:4px; border:1px solid var(--on-line,#f4e5d9); border-radius:0; background:var(--on-paper,#fff); }
.on-choice-media>img { display:block; width:100%; height:100%; min-width:0; min-height:0; object-fit:contain; }
.on-choice-media>.on-icon { width:24px; height:24px; }
.on-brand-choices { --on-choice-font-size:13px; display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr)); gap:10px; min-width:0; }
.on-entry-group>.on-brand-choices { max-height:320px; overflow-y:auto; }
/* Hex-only admin input with one preview and one value, never a browser RGB picker. */
.on-hex-control { display:grid; grid-template-columns:38px minmax(0,1fr); align-items:center; gap:10px; min-width:0; max-width:100%; }
.on-hex-swatch { display:block; width:38px; height:38px; box-sizing:border-box; border:1px solid #c3cbd3; background:var(--on-hex-preview,#fff); border-radius:0; }
.on-hex-control input[data-on-hex] { width:100%; min-width:0; min-height:38px; margin:0; font:500 14px/1.5 ui-monospace,monospace; padding:7px 10px; text-transform:uppercase; background:#fff; border:1px solid #b9c4cd; border-radius:0; }
.on-hex-control input[data-on-hex][aria-invalid=true] { border-color:#a32926; outline:1px solid #a32926; }
.on-hex-control .on-hex-error { grid-column:1/-1; margin:0; color:#932d2a; font:400 12px/1.5 system-ui,sans-serif; }
@media(prefers-reduced-motion:reduce) {
  :where(body:not(.wp-admin), .editor-styles-wrapper, .on-admin, .on-editor-panel, .on-design-admin, .on-heading-editor) :is(a, button, [role="button"], input[type="submit"], input[type="button"], input[type="reset"], summary),
:is(.on-button, .on-file-picker, :where(.on-prose,.editor-styles-wrapper) .wp-block-button__link, :is(.on-admin,.on-editor-panel,.on-design-admin,.on-heading-editor) :is(.button,.wp-switch-editor)) { transition:none; }
  :is(.on-button, :where(.on-prose,.editor-styles-wrapper) .wp-block-button__link, :is(.on-admin,.on-editor-panel,.on-design-admin,.on-heading-editor) :is(.button,.wp-switch-editor)),
  .on-choice:has(>input),.on-choice:has(>input)>input,.on-choice:has(>input)>input::before { transition:none; }
}
@media(forced-colors:active) {
  .on-choice:has(>input)>input:is([type=checkbox],[type=radio]) { forced-color-adjust:none; background:Canvas; border-color:CanvasText; }
  .on-choice:has(>input)>input:is([type=checkbox],[type=radio])::before { background:CanvasText; }
  .on-choice:has(>input)>input:is([type=checkbox],[type=radio]):checked { background:Highlight; border-color:Highlight; }
  .on-choice:has(>input)>input:is([type=checkbox],[type=radio]):checked::before { background:HighlightText; }
}
@media print {
  .on-ingredient.on-choice:has(>input) { padding:5px 0; min-height:0; border:0; border-radius:0; background:transparent; color:inherit; }
  .on-ingredient.on-choice>input { display:none!important; }
}

/* Shared bordered content badges for recipe features and knowledge subtypes. */
.on-content-badges { display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.on-content-badges>a,.on-content-badges>span { display:inline-flex; align-items:center; min-width:0; max-width:100%; overflow-wrap:break-word; min-height:30px; padding:5px 10px; background:var(--on-paper,#fff); border:1px solid var(--on-line,#f4e5d9); font:500 var(--on-badge-font-size,11px)/1.5 var(--on-font,system-ui,sans-serif); color:var(--on-ink,#002d5e); text-decoration:none; }
.on-content-badges>a:hover,.on-content-badges>a:focus-visible { border-color:var(--on-accent,#fab900); color:var(--on-ink,#002d5e); }

/* Shared asynchronous state: one spinner for results, forms, dialogs and media. */
.on-spinner { position:relative; display:inline-block; box-sizing:border-box; flex:none; width:var(--on-spinner-size,36px); height:var(--on-spinner-size,36px); }
.on-spinner::before,.on-spinner::after { content:""; position:absolute; box-sizing:border-box; border:var(--on-spinner-stroke,3px) solid transparent; border-radius:50%; animation:on-spinner-turn 900ms linear infinite; }
.on-spinner::before { inset:0; border-top-color:var(--on-accent,#fab900); border-bottom-color:var(--on-accent,#fab900); border-left-color:var(--on-accent,#fab900); }
.on-spinner::after { inset:var(--on-spinner-inset,20%); border-top-color:var(--on-spinner-track,#c8cdd2); border-right-color:var(--on-spinner-track,#c8cdd2); animation-direction:reverse; animation-duration:700ms; }
.on-loading-inline { display:flex; align-items:center; justify-content:center; width:100%; min-height:100px; margin:0; padding:18px; }
.on-loading-region { position:relative; isolation:isolate; }
.on-loading-region:not(.on-loading-control) { min-height:80px; }
.on-loading-region.on-loading-control { --on-spinner-size:22px; --on-spinner-stroke:2px; }
.on-loading-overlay { position:absolute; inset:0; z-index:30; overflow:hidden; background:var(--on-loading-surface,rgba(255,255,255,.94)); border-radius:inherit; cursor:progress; }
.on-loading-control>.on-loading-overlay { --on-loading-surface:var(--on-btn-bg,var(--on-paper,#fff)); }
.on-loading-overlay>.on-spinner { position:absolute; left:var(--on-loading-x,50%); top:var(--on-loading-y,50%); margin:calc(var(--on-spinner-size,36px) / -2); }
.on-loading-sr { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip-path:inset(50%)!important; white-space:nowrap!important; border:0!important; }
@keyframes on-spinner-turn { to { transform:rotate(360deg); } }
@media(prefers-reduced-motion:reduce) { .on-spinner::before,.on-spinner::after { animation:none; } }
@media print { .on-loading-inline,.on-loading-overlay { display:none!important; } }

@media(max-width:699px) { .on-mobile-bleed { width:calc(100% + 2 * var(--on-bleed,0px)); max-width:none; margin-inline:calc(-1 * var(--on-bleed,0px)); } }

/* Companies, member profiles and biographies share equal-width social link rows. */
.on-social-profile-links { display:flex; flex-wrap:wrap; align-items:stretch; gap:10px; width:100%; margin-block-start:18px; min-width:0; }
.on-social-profile-links>.on-button { flex:1 1 160px; font-size:calc(var(--on-button-size,14px) * var(--on-reading-scale,1)); min-height:44px; min-width:0; max-width:100%; white-space:normal; }
.on-social-profile-label { min-width:0; }
@media(max-width:599px) { .on-social-profile-links>.on-button { flex-basis:44px; min-width:44px; padding:10px; gap:0; }.on-social-profile-label { display:none; } }

/* Format markers in text/logo directory rows; shared icons and colours. */
.on-post-format-badge { display:inline-flex; align-items:center; gap:6px; margin:6px 0; padding:5px 8px; border:1px solid var(--on-line,#f4e5d9); color:var(--on-ink,#002d5e); font:500 12px/1.4 var(--on-font,system-ui,sans-serif); }
.on-post-format-badge>.on-icon { width:15px; height:15px; flex:0 0 15px; }