.docara-preferences-panel{max-inline-size:100%;block-size:100dvh}
.docara-preferences-surface{
  --sf-modal-surface-shadow:
    var(--sf-0) var(--sf-a8) var(--sf-b4) var(--sf-a4) var(--sf-black--alfa-8),
    var(--sf-0) var(--sf-a4) var(--sf-b0) var(--sf-0) var(--sf-black--alfa-12),
    var(--sf-0) var(--sf-a8) var(--sf-a8) calc(-1 * var(--sf-a4)) var(--sf-black--alfa-24);
  block-size:100dvh;
  max-block-size:100dvh;
}
.docara-preferences-body,.docara-preferences-content{min-block-size:0}
/* A setting is its label above a full-width segmented control; segments share the
   width by content so the longest label still fits a 390px panel. The native radio
   covers its segment invisibly, so clicks, arrow keys and the radio group stay native. */
.docara-preferences-field{display:flex;flex-direction:column;align-items:stretch;gap:var(--sf-space-1\/3);min-inline-size:0;padding-block:var(--sf-space-1)}
.docara-preferences-field:first-child{padding-block-start:0}
.docara-preferences-label{color:var(--sf-on-surface);font-weight:var(--sf-font-weight-medium)}
.docara-preferences-options{display:flex;inline-size:100%}
.docara-preferences-options>.sf-button{position:relative;flex:1 1 auto;justify-content:center;min-block-size:var(--sf-ui-1--control-height);margin:0;text-align:center}
.docara-preferences-options>.sf-button>input{position:absolute;inset:0;z-index:1;inline-size:100%;block-size:100%;margin:0;opacity:0;cursor:pointer}
.docara-preferences-options>.sf-button:has(input:focus-visible){outline:var(--sf-focus--width) var(--sf-focus--style) var(--sf-focus--color,Highlight);outline-offset:var(--sf-focus--offset)}
@media(max-width:40rem){
  .docara-preferences-panel{inline-size:100vw}
}
/* The menu view: the Framework context menu under the header's ⋮ button, in
   the top layer as a popover. Each setting is one row showing its value;
   the row opens a submenu of values beside the menu, the selected value
   marked by a check. A closed popover must stay hidden: a display utility
   would override the browser's own rule, so the menu sets its display. */
.docara-preferences-menu:not(:popover-open){display:none}
.docara-preferences-menu:popover-open{display:flex}
.docara-preferences-menu{position:fixed;inset:auto;inset-block-start:var(--docara-preferences-top,4rem);inset-inline-end:var(--docara-preferences-end,var(--sf-space-1));margin:0;padding:0;border:0;min-inline-size:var(--sf-f8);max-inline-size:calc(100vw - 2 * var(--sf-space-1));overflow:visible}
/* The Framework menu content scrolls by default, which would clip the submenu beside it; the menu is short, so it does not scroll. */
.docara-preferences-menu>.sf-context-menu-content{overflow:visible}
.docara-preferences-menu__group{padding-block:var(--sf-space-1\/3)}
.docara-preferences-menu__group+.docara-preferences-menu__group{border-block-start:1px solid var(--sf-outline-variant)}
.docara-preferences-menu__entry{position:relative}
.docara-preferences-menu__item{justify-content:flex-start;gap:var(--sf-space-1);inline-size:100%;margin:0;text-align:start}
.docara-preferences-menu__item>.sf-button-text-container{flex:1 1 auto;min-inline-size:0}
.docara-preferences-menu__value{color:var(--sf-on-surface-variant);font-size:var(--sf-text-small--size);line-height:var(--sf-text-small--height);white-space:nowrap}
.docara-preferences-menu__chevron{color:var(--sf-on-surface-variant)}
[dir="rtl"] .docara-preferences-menu__chevron{transform:scaleX(-1)}
.docara-preferences-menu__item[aria-expanded="true"]{background:var(--sf-surface-container-hover)}
.docara-preferences-menu__item[role="menuitemradio"]:not([aria-checked="true"])>.docara-preferences-menu__check{visibility:hidden}
.docara-preferences-menu__check{color:var(--sf-primary)}
.docara-preferences-submenu{position:absolute;inset-block-start:calc(var(--sf-space-1\/3) * -1);inset-inline-end:calc(100% + var(--sf-space-1\/3));min-inline-size:var(--sf-e8,12rem)}
.docara-preferences-submenu[hidden]{display:none}
/* On a phone there is no room beside the menu: the submenu opens under its row. */
@media(max-width:40rem){
  .docara-preferences-submenu{position:static;min-inline-size:0;box-shadow:none;border:0;border-radius:0;background:transparent;padding-inline-start:var(--sf-space-2)}
}