/* One field/filter rhythm for Admin, its embedded editors and the public site.
   No layout depends on JS; original controls keep their names and validation. */
:is(.admin-app,.demo-home,.public-page-content,.login-page){
    --bf-control-height:48px;
    --bf-control-font:14px;
    --bf-field-gap:8px;
    --bf-row-gap:20px;
    --bf-border:#ccd6ce;
    --bf-focus:#2c645b;
    --bf-error:#b33730;
}
.public-page-content{--bf-control-font:16px}
:is(.admin-app,.demo-home,.public-page-content,.login-page) :is(input,select,textarea,button){box-sizing:border-box}
:is(.admin-app,.demo-home,.public-page-content,.login-page) [hidden]{display:none!important}

/* Exclude swatches, ranges, native hidden sources and the date/clock proxies:
   those are composite controls, not a second field inside another border. */
:is(.admin-app,.demo-home,.public-page-content,.login-page)
input:not([type=checkbox]):not([type=radio]):not(:where([type=hidden],[type=color],[type=range],[type=file],.bf-native-source,.bf-date-text,.bf-calendar-year)),
:is(.admin-app,.demo-home,.public-page-content,.login-page) select:not(.bf-calendar-month),
:is(.admin-app,.demo-home,.public-page-content,.login-page) textarea{
    display:block;width:100%;min-width:0;max-width:100%;min-height:var(--bf-control-height);
    border:1px solid var(--bf-border);border-radius:8px;background:#fff;color:var(--ink,#203b35);
    padding:11px 12px;margin-block:0;font:inherit;font-size:var(--bf-control-font);line-height:1.6;
    box-shadow:none;
}
:is(.admin-app,.demo-home,.public-page-content,.login-page) select:not(.bf-calendar-month){
    appearance:none;text-overflow:ellipsis;cursor:pointer;padding-inline-end:40px;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%232c645b' stroke-width='1.7'%3E%3Cpath d='m5 7 5 5 5-5'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-size:18px;background-position:right 12px center;
}
:is(.admin-app,.demo-home,.public-page-content,.login-page) select:not(.bf-calendar-month):dir(rtl){background-position:left 12px center}
:is(.admin-app,.demo-home,.public-page-content,.login-page) textarea{min-height:112px;resize:vertical}
:is(.admin-app,.demo-home) textarea.title-area{font-family:Momken,URW,Arial,sans-serif;font-size:24px}
:is(.admin-app,.demo-home,.public-page-content,.login-page) :is(input,select,textarea)::placeholder{color:#7c8a81;opacity:1}
:is(.admin-app,.demo-home,.public-page-content,.login-page) :is(input,select,textarea):focus-visible:not(.bf-native-source):not(.bf-date-text):not([type=checkbox]){
    outline:2px solid var(--bf-focus);outline-offset:2px;border-color:var(--bf-focus);
}
:is(.admin-app,.demo-home,.public-page-content,.login-page) :is(input,select,textarea):disabled:not(.bf-native-source):not(.bf-date-text):not([type=checkbox]),
:is(.admin-app,.demo-home,.public-page-content,.login-page) :is(input,textarea)[readonly]:not([type=hidden]):not(.bf-native-source):not([type=checkbox]){
    background:#f1f4ee;color:#65766b;
}
:is(.admin-app,.demo-home) :is(input,select,textarea)[aria-invalid=true]:not(.bf-native-source){
    border-color:var(--bf-error);outline-color:var(--bf-error);
}
:is(.admin-app,.demo-home) :is(input,select,textarea)[aria-invalid=true]:focus-visible:not(.bf-native-source):not(.bf-date-text){
    border-color:var(--bf-error);outline-color:var(--bf-error);
}
:is(.admin-app,.demo-home) .field{
    min-width:0;margin-block:0 var(--bf-row-gap);
}
:is(.admin-app,.demo-home) .field:last-child{margin-block-end:0}
:is(.admin-app,.demo-home) :is(.field,.rich-text-field)>label{
    display:block;margin:0 0 var(--bf-field-gap);font-size:13px;font-weight:600;
    line-height:1.65;color:var(--ink,#203b35);overflow-wrap:anywhere;
}
:is(.admin-app,.demo-home) .field>label:has(.counter){display:flex;justify-content:space-between;align-items:baseline;gap:8px}
:is(.admin-app,.demo-home) :is(.settings-card-body,.language-grid fieldset,.home-language-details fieldset)>label:not(.checkbox):not(.check-field):not(:where(.checkbox-row,.professional-publication-control)){
    display:block;font-size:13px;line-height:1.65;margin-block:16px 8px;
}
:is(.admin-app,.demo-home) .field-optionality{font-size:12px;font-weight:400;color:#65766b}
:is(.admin-app,.demo-home) .field-help{
    display:block;font-size:12px;line-height:1.75;margin:6px 0 0;color:#65766b;overflow-wrap:anywhere;
}
:is(.admin-app,.demo-home) .field-error{
    display:block;font-size:12px;line-height:1.7;margin:6px 0 0;color:var(--bf-error);overflow-wrap:anywhere;
}
:is(.admin-app,.demo-home) :is(.field-error:empty,.field-error[hidden],.field-optionality[hidden]){display:none}
:is(.admin-app,.demo-home) .field-row{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:var(--bf-row-gap);margin-block:0 var(--bf-row-gap);
}
:is(.admin-app,.demo-home) .field-row.three{grid-template-columns:repeat(3,minmax(0,1fr))}
:is(.admin-app,.demo-home) .field-row>.field{margin:0;min-width:0}
.admin-app .settings-card-body{padding:24px}
:is(.admin-app,.demo-home) :is(.check-field,.checkbox,.checkbox-row){
    display:flex;align-items:center;justify-content:flex-start;gap:10px;min-height:32px;
    margin-block:16px 0;font-size:13px;font-weight:400;line-height:1.8;cursor:pointer;
}
:is(.admin-app,.demo-home) input:is([type=checkbox],[type=radio]){
    width:18px;height:18px;min-height:0;padding:0;flex-shrink:0;accent-color:var(--bf-focus);
}
/* All Admin checkboxes share the professional programme publication control.
   Keep the native input so labels, keyboard events and form values still work. */
:is(.admin-app,.demo-home,.login-page) input[type=checkbox]{
    appearance:none;position:relative;display:inline-block;box-sizing:border-box;
    width:48px;min-width:48px;max-width:48px;height:28px;min-height:28px;max-height:28px;
    flex:0 0 48px;margin:0;padding:0;vertical-align:middle;
    border:1px solid #cdd6c5;border-radius:99px;background:#dfe6d7;
    box-shadow:none;cursor:pointer;transition:background .18s,border-color .18s;
}
:is(.admin-app,.demo-home,.login-page) :is(.check-field,.checkbox,.checkbox-row,.login-remember)>input[type=checkbox]{
    width:48px;height:28px;min-height:28px;flex:0 0 48px;margin:0;padding:0;
}
:is(.admin-app,.demo-home,.login-page) input[type=checkbox]::before{
    content:"";position:absolute;inset-block-start:3px;inset-inline-start:3px;
    width:20px;height:20px;border-radius:50%;background:#fff;
    box-shadow:0 1px 3px #243f3620;transition:inset-inline-start .18s;
}
:is(.admin-app,.demo-home,.login-page) input[type=checkbox]:checked,
:is(.admin-app,.demo-home,.login-page) input[type=checkbox]:indeterminate{
    background:#2b6257;border-color:#2b6257;
}
:is(.admin-app,.demo-home,.login-page) input[type=checkbox]:checked::before{inset-inline-start:23px}
:is(.admin-app,.demo-home,.login-page) input[type=checkbox]:indeterminate::before{
    inset-block-start:11px;inset-inline-start:15px;width:14px;height:3px;border-radius:2px;box-shadow:none;
}
:is(.admin-app,.demo-home,.login-page) input[type=checkbox]:focus-visible{
    outline:3px solid #c49b5e;outline-offset:3px;box-shadow:none;
}
:is(.admin-app,.demo-home,.login-page) input[type=checkbox]:disabled{opacity:.5;cursor:not-allowed}
:is(.admin-app,.demo-home,.login-page) label:has(>input[type=checkbox])>span{min-width:0;overflow-wrap:anywhere}
@media(prefers-reduced-motion:reduce){
    :is(.admin-app,.demo-home,.login-page) input[type=checkbox],
    :is(.admin-app,.demo-home,.login-page) input[type=checkbox]::before{transition:none}
}
@media(forced-colors:active){
    :is(.admin-app,.demo-home,.login-page) input[type=checkbox]{forced-color-adjust:none;background:Canvas;border-color:ButtonText}
    :is(.admin-app,.demo-home,.login-page) input[type=checkbox]::before{background:ButtonText}
    :is(.admin-app,.demo-home,.login-page) input[type=checkbox]:checked,
    :is(.admin-app,.demo-home,.login-page) input[type=checkbox]:indeterminate{background:Highlight;border-color:Highlight}
    :is(.admin-app,.demo-home,.login-page) input[type=checkbox]:is(:checked,:indeterminate)::before{background:HighlightText}
}
:is(.admin-app,.demo-home) input[type=color],
:is(.admin-app,.demo-home) .field>input[type=color]{
    display:block;width:48px;height:48px;min-height:48px;padding:4px;border:1px solid var(--bf-border);border-radius:8px;background:#fff;cursor:pointer;
}
:is(.admin-app,.demo-home) .home-section-color{grid-template-columns:48px minmax(0,1fr) auto}

/* Filter fields are siblings with a separate, full-width action row.
   min(100%,...) prevents implicit wide columns in modals and on phones. */
:is(.admin-app,.demo-home,.public-page-content) .bf-filter-grid{
    display:grid;grid-template-columns:minmax(0,1fr);
    align-items:start;gap:16px;margin-block:0 24px;padding:20px;border:1px solid var(--line,#e1e4dc);
    border-radius:12px;background:#fff;
}
:is(.admin-app,.demo-home,.public-page-content) .bf-filter-fields{
    display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));align-items:start;gap:16px;min-width:0;
}
:is(.admin-app,.demo-home,.public-page-content) .bf-filter-grid :is(.field,.participant-field){
    display:block;min-width:0;margin:0;
}
:is(.admin-app,.demo-home,.public-page-content) .bf-filter-grid :is(.field,.participant-field)>label{
    display:block;margin:0 0 8px;font-size:13px;font-weight:600;line-height:1.6;overflow-wrap:anywhere;
}
:is(.admin-app,.demo-home,.public-page-content) .bf-filter-grid :is(.field,.participant-field)>:is(input,select):not(.bf-native-source):not(.bf-date-text){height:var(--bf-control-height)}
.public-page-content .participant-panel>.bf-filter-grid{border:0;border-bottom:1px solid var(--line);border-radius:0;margin:0}
:is(.admin-app,.demo-home) .home-media-library-toolbar.bf-filter-grid{
    grid-template-columns:minmax(0,1fr) auto;align-items:end;border:0;border-bottom:1px solid var(--line);border-radius:0;margin:0;padding:16px 20px;flex:none;
}
:is(.admin-app,.demo-home) .home-media-library-toolbar.bf-filter-grid>.bf-filter-actions{grid-column:auto;padding:0}
:is(.admin-app,.demo-home) .home-media-library-toolbar .search-box{max-width:none}
:is(.admin-app,.demo-home,.public-page-content) .bf-filter-grid>.bf-filter-actions{
    grid-column:1/-1;display:flex;align-items:center;justify-content:flex-start;gap:10px;flex-wrap:wrap;
    min-width:0;padding-block-start:4px;margin:0;
}
:is(.admin-app,.demo-home,.public-page-content) .bf-filter-actions>:is(button,a){
    display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;margin:0;
    padding:10px 18px;border:1px solid var(--bf-border);border-radius:8px;background:#fff;
    color:var(--bf-focus);font:inherit;font-size:var(--bf-control-font);line-height:1.5;text-decoration:none;white-space:normal;
}
:is(.admin-app,.demo-home,.public-page-content) .bf-filter-actions>button[type=submit]{
    border-color:var(--bf-focus);background:var(--bf-focus);color:#fff;cursor:pointer;
}
:is(.admin-app,.demo-home) .bf-filter-actions>.primary{margin-inline-start:auto;background:var(--green,#2c645b);color:#fff;border-color:var(--green,#2c645b)}
:is(.admin-app,.demo-home,.public-page-content) .bf-filter-actions>:is(button,a):focus-visible{outline:2px solid var(--bf-focus);outline-offset:3px}
:is(.admin-app,.demo-home,.public-page-content) .bf-filter-actions>:is(button,a):hover{filter:brightness(.96)}
:is(.admin-app,.demo-home,.public-page-content) .bf-filter-actions svg{width:18px;height:18px;flex-shrink:0}
:is(.admin-app,.demo-home) .search-box{
    width:100%;max-width:none;height:var(--bf-control-height);min-width:0;gap:10px;margin:0;
    padding:0 12px;border:1px solid var(--bf-border);border-radius:8px;background:#fff;box-sizing:border-box;
}
:is(.admin-app,.demo-home) .search-box:focus-within{outline:2px solid var(--bf-focus);outline-offset:2px;border-color:var(--bf-focus)}
:is(.admin-app,.demo-home) .search-box>input:not([type=hidden]):not(.bf-native-source){
    width:100%;min-width:0;height:100%;min-height:0;margin:0;padding:0;border:0;background:transparent;
    border-radius:0;box-shadow:none;outline:0;font-size:var(--bf-control-font);
}
:is(.admin-app,.demo-home) .search-box>:is(svg,.icon){width:18px;height:18px;flex-shrink:0}

/* Keep composite date/time widgets aligned; errors may grow below the field. */
:is(.admin-app,.demo-home,.public-page-content) .bf-date-control{
    min-height:var(--bf-control-height);height:auto;border-radius:8px;border-color:var(--bf-border);
}
:is(.admin-app,.demo-home,.public-page-content) .bf-date-control>input.bf-date-text{
    height:calc(var(--bf-control-height) - 2px);min-height:0;margin:0!important;
    font-size:var(--bf-control-font);padding-block:10px!important;
}
:is(.admin-app,.demo-home,.public-page-content) .bf-date-control>.bf-date-trigger{
    width:44px;height:44px;min-height:0;flex:0 0 44px;margin:1px!important;
}
:is(.admin-app,.demo-home,.public-page-content) .bf-date-control:has(>.bf-date-text[aria-invalid=true]){border-color:var(--bf-error)}
:is(.admin-app,.demo-home,.public-page-content) .bf-date-control:has(>.bf-date-text:disabled,>.bf-date-text[readonly]){background:#f1f4ee}
:is(.admin-app,.demo-home,.public-page-content) .bf-control-error{margin:6px 0 0;padding:0 10px 6px;line-height:1.7}
:is(.admin-app,.demo-home,.public-page-content) .bf-date-control .bf-control-error[hidden]{display:none}
:is(.admin-app,.demo-home) .bf-upload-control{margin:0}
:is(.admin-app,.demo-home) .bf-upload-choose{min-height:88px;gap:12px}
:is(.admin-app,.demo-home) .bf-upload-title{font-size:14px}
:is(.admin-app,.demo-home) .bf-upload-detail{font-size:12px}
:is(.admin-app,.demo-home) .bf-upload-choose[aria-invalid=true]{border-color:var(--bf-error)!important}

/* Real form regions, not the surrounding viewport, decide when rows stack. */
:is(.admin-app,.demo-home) :is(.settings-card-body,.dialog-body,.editor-scroll),
.public-page-content .page-body{container-type:inline-size;container-name:bf-form}
@container bf-form (max-width:520px){
    :is(.admin-app,.demo-home) :is(.field-row,.field-row.three,.guest-display-main-fields){grid-template-columns:minmax(0,1fr);gap:16px}
}
@media(max-width:700px){
    :is(.admin-app,.demo-home,.public-page-content) .bf-filter-grid{grid-template-columns:minmax(0,1fr);padding:16px;gap:16px}
    :is(.admin-app,.demo-home,.public-page-content) .bf-filter-fields{grid-template-columns:minmax(0,1fr)}
    :is(.admin-app,.demo-home) .home-media-library-toolbar.bf-filter-grid{grid-template-columns:minmax(0,1fr);padding:16px}
    :is(.admin-app,.demo-home) :is(.field-row,.field-row.three){grid-template-columns:minmax(0,1fr);gap:16px}
    :is(.admin-app,.demo-home) .bf-filter-actions>.primary{margin-inline-start:0}
    :is(.admin-app,.demo-home) .settings-card-body{padding:18px}
    :is(.admin-app,.demo-home,.public-page-content) .bf-filter-actions>:is(button,a){flex:1 1 auto}
    :is(.admin-app,.demo-home,.login-page){--bf-control-font:16px}
}
@media(forced-colors:active){
    :is(.admin-app,.demo-home,.public-page-content) .bf-filter-actions>button[type=submit]{border:1px solid ButtonText}
}