:root{
  --sense-field-surface:var(--color-card);
  --sense-field-border:var(--color-default-300);
  --sense-field-hover:var(--color-default-400);
  --sense-field-focus:var(--color-primary);
  --sense-field-radius:.625rem;
  --sense-field-shadow:0 1px 2px #0f172a0a;
  --sense-field-ring:0 0 0 3px color-mix(in srgb,var(--sense-field-focus) 18%,transparent);
}
/* Frame both ordinary fields and the outer shell of compound search controls. */
.form-input,.form-textarea,.form-select,.sensecms-field-frame,
.sensecms-console :is(select,textarea,input:not([type]),input[type=text],input[type=email],input[type=url],input[type=password],input[type=tel],input[type=number],input[type=date],input[type=time],input[type=datetime-local]):not(:where([role=combobox],.ql-toolbar *,.ql-tooltip *,[contenteditable=true] *)),
.sensecms-console :where(div,span,label):has(> :is(i,svg)):has(> input[type=search]:not(.form-input)){
  border:1px solid var(--sense-field-border)!important;
  border-radius:var(--sense-field-radius)!important;
  background-color:var(--sense-field-surface)!important;
  color:var(--color-default-900);
  box-shadow:var(--sense-field-shadow)!important;
  transition:border-color .15s,box-shadow .15s,background-color .15s;
  &:hover:not(:disabled){border-color:var(--sense-field-hover)!important}
  &:focus-within{
    border-color:var(--sense-field-focus)!important;outline:0!important;box-shadow:var(--sense-field-ring)!important;
    @media(forced-colors:active){outline:2px solid Highlight!important;outline-offset:2px!important}
  }
  &:is(:user-invalid,[aria-invalid=true]){border-color:var(--color-danger)!important}
  &:disabled{color:var(--color-default-500);background-color:var(--color-default-100)!important;box-shadow:none!important;cursor:not-allowed}
  &::placeholder{color:var(--color-default-500);opacity:1}
}
.sensecms-console :where(div,span,label):has(> :is(i,svg))>input[type=search]:not(.form-input):focus-visible{outline:none!important;box-shadow:none!important}

select:is(.form-select,.form-input),.sensecms-console select{
  &:not([multiple]):is(:not([size]),[size="1"]){
    appearance:none;padding-inline-end:2.25rem;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-position:right .7rem center;background-repeat:no-repeat;background-size:1rem;
    &:dir(rtl){background-position:left .7rem center}
    @media(forced-colors:active){appearance:auto;background-image:none}
  }
}
@supports (appearance:base-select) and selector(::picker(select)){
  .sensecms-console select:not([multiple]):is(:not([size]),[size="1"]){
    align-content:center;align-items:center;
    min-inline-size:0;max-inline-size:100%;
    white-space:nowrap;overflow:clip;overflow-clip-margin:content-box;text-overflow:ellipsis;
    &>button{display:block;min-inline-size:0;max-inline-size:100%;padding:0;border:0;background:transparent;color:inherit;font:inherit;text-align:start}
    & selectedcontent{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
    &, &::picker(select){appearance:base-select}
    &::picker-icon{display:none}
    &::picker(select){
      box-sizing:border-box;margin-block:.25rem;padding:.35rem;
      min-inline-size:min(anchor-size(width),calc(100vw - 1rem));max-inline-size:calc(100vw - 1rem);
      max-block-size:min(20rem,50dvh);overflow:auto;overscroll-behavior:contain;
      border:1px solid var(--sense-field-border);border-radius:.75rem;
      background:var(--sense-field-surface);color:var(--color-default-800);
      box-shadow:0 10px 28px #0f172a26,0 2px 6px #0f172a0c;
      scrollbar-width:thin;scrollbar-color:var(--color-default-400) transparent;
    }
    &:open{border-color:var(--sense-field-focus)!important}
    & optgroup{padding:.25rem}
    & option{
      padding:.52rem .7rem;gap:.75rem;border-radius:.45rem;align-items:center;
      font:inherit;font-size:.8125rem;line-height:1.45;white-space:normal;overflow-wrap:anywhere;cursor:pointer;
    }
    & option:hover,& option:focus-visible{background:var(--color-default-100)}
    & option:focus-visible{outline:2px solid var(--sense-field-focus);outline-offset:-2px}
    & option:checked{background:color-mix(in srgb,var(--sense-field-focus) 10%,var(--sense-field-surface));font-weight:700}
    & option::checkmark{order:1;margin-inline-start:auto;color:var(--sense-field-focus);font-weight:800}
    & option:disabled{color:var(--color-default-500);cursor:not-allowed}
  }
}
.sensecms-console input:is([type=checkbox],[type=radio],[type=range]){accent-color:var(--sense-field-focus)}
.sensecms-console input:is([type=checkbox],[type=radio]):not(.form-switch,[role=switch]){
  appearance:none;vertical-align:middle;flex:none;box-sizing:border-box;width:1.05rem;height:1.05rem;padding:0;
  border:1px solid var(--sense-field-hover);border-radius:.27rem;background:var(--sense-field-surface) center/80% no-repeat;
  &:is(:checked,:indeterminate){border-color:var(--sense-field-focus);background-color:var(--sense-field-focus)}
  &[type=checkbox]:checked{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m3 8 3 3 7-7' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
  &[type=checkbox]:indeterminate{background-image:linear-gradient(white,white);background-size:60% 2px}
  &[type=radio]{border-radius:50%}
  &[type=radio]:checked{background-image:radial-gradient(circle,white 32%,transparent 36%)}
  &:focus-visible{outline:2px solid var(--sense-field-focus)!important;outline-offset:2px!important}
  &:disabled{opacity:.55;cursor:not-allowed}
  @media(forced-colors:active){appearance:auto}
}
.sensecms-console :is(.sensecms-switch,.sensecms-theme-switch,.sensecms-facility-toggle,.sensecms-builder-toggle) input:checked+span:not(:has(i)),
.sensecms-console .sensecms-facility-toggle input:checked+span i{background-color:var(--sense-field-focus)}
.sensecms-console input[type=color]{border-radius:var(--sense-field-radius);accent-color:var(--sense-field-focus)}
.form-input[type=file]{padding:.45rem!important;background:var(--color-default-100)!important}
.sensecms-console input[type=file]::file-selector-button,.form-input[type=file]::file-selector-button{
  margin-inline-end:.75rem;padding:.5rem .75rem;border:1px solid var(--sense-field-border);border-radius:.5rem;
  background:color-mix(in srgb,var(--sense-field-focus) 8%,var(--sense-field-surface));color:var(--color-default-800);font-weight:600;cursor:pointer;
}
.form-input[type=color]{min-height:2.75rem;padding:.25rem!important;cursor:pointer}
.form-input[type=range]{accent-color:var(--color-primary)}
.card{box-shadow:0 1px 2px #0f172a08!important}
.card-header{background:var(--color-default-50)}

.sensecms-console label.sensecms-document-picker{display:grid;min-width:0;max-width:min(100%,26rem);gap:.3rem}
.sensecms-console .sensecms-document-picker .sensecms-editing-label{
  margin:0;color:var(--color-default-700);font-size:.7rem;line-height:1.3;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
}
.sensecms-console .sensecms-content-save-state.is-new i{background:var(--color-default-500);box-shadow:none}
.sensecms-console .sensecms-document-picker select{width:100%;min-width:0;min-height:2.5rem;padding-inline-start:.75rem;font-size:.875rem;font-weight:650}
.sensecms-select-popup{
  position:fixed;inset:auto;z-index:110;margin:0;box-sizing:border-box;display:flex;flex-direction:column;
  gap:.35rem;padding:.4rem;border:1px solid var(--sense-field-border);border-radius:.75rem;
  background:var(--sense-field-surface);color:var(--color-default-800);box-shadow:0 10px 28px #0f172a26,0 2px 6px #0f172a0c;
}
.sensecms-select-popup input{width:100%;min-width:0;flex:none;padding:.5rem .7rem;font:inherit;font-size:.875rem;color:inherit;background:var(--sense-field-surface);border:1px solid var(--sense-field-focus);border-radius:var(--sense-field-radius)}
.sensecms-select-popup input:focus{outline:2px solid var(--sense-field-focus);outline-offset:-2px}
.sensecms-select-popup [role=listbox]{overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}
.sensecms-select-popup [role=option],.sensecms-select-popup [role=status],.sensecms-select-group{position:relative;padding:.52rem 2rem .52rem .7rem;font-size:.8125rem;line-height:1.45;overflow-wrap:anywhere;border-radius:.45rem}
.sensecms-select-group{font-weight:700;color:var(--color-default-600)}
.sensecms-select-popup [role=option]{cursor:pointer}
.sensecms-select-popup [role=option]:hover,.sensecms-select-popup .is-active{background:var(--color-default-100)}
.sensecms-select-popup .is-active{box-shadow:inset 3px 0 var(--sense-field-focus)}
.sensecms-select-popup [aria-selected=true]{background:color-mix(in srgb,var(--sense-field-focus) 10%,var(--sense-field-surface));font-weight:700}
.sensecms-select-popup [aria-selected=true]::after{content:'✓';position:absolute;right:.7rem;color:var(--sense-field-focus)}
.sensecms-select-popup [aria-disabled=true]{opacity:.6;cursor:not-allowed}
.sensecms-select-popup [hidden]{display:none}
@media(forced-colors:active){.sensecms-select-popup .is-active{outline:2px solid Highlight;outline-offset:-2px}}